feat: Text generation suggestions via Gemini models

Backend: - New text_gen.py module with Gemini text generation client - suggest_prompts(): generates 3 prompt suggestions from user input - get_text_gen_config(): loads config from .env (model, API key, safety) - get_available_models(): returns list of Gemini text models - Safety settings: harassment, hate_speech, sexually_explicit, dangerous Configurable via TEXT_GEN_SAFETY_* env vars (default: BLOCK_ONLY_HIGH) - New endpoints: * POST /api/text-gen/suggest — generates 3 prompt suggestions * GET /api/text-gen/models — lists available text models * GET /api/text-gen/config — returns safe config (API key masked) * POST /api/text-gen/config — updates config in-memory - Default model: gemini-2.5-flash - Fallback API key: LYRIA_API_KEY if TEXT_GEN_API_KEY not set - System prompt: expert music producer persona for rich musical detail Frontend: - New SuggestionsModal component for displaying generated suggestions - Auto-fetches when opened - Shows loading spinner, error state, or suggestion list - Each suggestion clickable to populate the prompt field - Hover effect: 'Click to use this prompt →' - Generator component updated with 'Get Suggestions ✨' button - Appears next to prompt label in both Basic and Advanced modes - Disabled when no input present - Clicking suggestion populates the prompt/structured fields - SettingsModal expanded with Text Generation section (collapsible) - Same pattern as Image Generation: model, API key status, safety filters - Editable dropdowns with Save Changes button - Refactored to use shared useGenSettings hook for both sections Models Available: - gemini-2.5-flash (GA, default) — best price-to-performance - gemini-2.5-pro (GA) — highest quality reasoning - gemini-3.5-flash (Preview) — next-gen Flash - gemini-3.1-flash (Preview) — latest with thinking Architecture KB and Tasks KB updated.
2026-05-29 22:37:35 -04:00
1 parent 70beb89ad9
commit e687f7d457
@@ -0,0 +1,130 @@
+import { useState, useEffect } from 'react'
+
+interface Props {
+  isOpen: boolean
+  onClose: () => void
+  onSelect: (suggestion: string) => void
+  userInput: string
+}
+
+export default function SuggestionsModal({ isOpen, onClose, onSelect, userInput }: Props) {
+  const [suggestions, setSuggestions] = useState<string[]>([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  const fetchSuggestions = async () => {
+    if (!userInput.trim()) return
+    setLoading(true)
+    setError('')
+    try {
+      const res = await fetch('/api/text-gen/suggest', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ input: userInput }),
+      })
+      if (!res.ok) {
+        const err = await res.json()
+        throw new Error(err.detail || 'Failed to get suggestions')
+      }
+      const data = await res.json()
+      setSuggestions(data.suggestions || [])
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to get suggestions')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  // Auto-fetch when opened
+  useEffect(() => {
+    if (isOpen && suggestions.length === 0 && !loading && !error) {
+      fetchSuggestions()
+    }
+  }, [isOpen])
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div
+        className="absolute inset-0 bg-black/80 backdrop-blur-md"
+        onClick={onClose}
+      />
+
+      <div className="relative bg-lyria-surface border border-white/10 rounded-xl shadow-2xl w-full max-w-lg mx-4 overflow-hidden max-h-[80vh] flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-white/10 shrink-0">
+          <div>
+            <h2 className="text-lg font-semibold text-white">Prompt Suggestions</h2>
+            <p className="text-xs text-lyria-muted mt-0.5 truncate max-w-[280px]">{userInput}</p>
+          </div>
+          <button
+            onClick={onClose}
+            className="text-lyria-muted hover:text-white transition-colors"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="px-6 py-5 overflow-y-auto">
+          {loading && (
+            <div className="flex items-center justify-center py-8">
+              <svg className="animate-spin w-6 h-6 text-lyria-accent" fill="none" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+              </svg>
+            </div>
+          )}
+
+          {error && (
+            <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-4">
+              <p className="text-sm text-red-400">{error}</p>
+              <button
+                onClick={fetchSuggestions}
+                className="mt-2 text-xs text-lyria-accent hover:text-lyria-accent/80"
+              >
+                Try again
+              </button>
+            </div>
+          )}
+
+          {!loading && !error && suggestions.length === 0 && (
+            <div className="text-center py-8">
+              <p className="text-sm text-lyria-muted">No suggestions yet. Click below to generate.</p>
+              <button
+                onClick={fetchSuggestions}
+                className="mt-3 px-4 py-2 text-sm bg-lyria-accent text-black rounded-md hover:bg-lyria-accent/90"
+              >
+                Get Suggestions
+              </button>
+            </div>
+          )}
+
+          <div className="space-y-3">
+            {suggestions.map((suggestion, i) => (
+              <button
+                key={i}
+                onClick={() => {
+                  onSelect(suggestion)
+                  onClose()
+                }}
+                className="w-full text-left p-4 bg-white/5 hover:bg-white/10 border border-white/5 hover:border-lyria-accent/30 rounded-lg transition-all group"
+              >
+                <div className="flex items-start gap-3">
+                  <span className="text-lyria-accent font-mono text-sm shrink-0">{i + 1}.</span>
+                  <p className="text-sm text-white/90 leading-relaxed">{suggestion}</p>
+                </div>
+                <div className="mt-2 text-xs text-lyria-accent opacity-0 group-hover:opacity-100 transition-opacity">
+                  Click to use this prompt →
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}