Initial scaffold: FastAPI backend + React frontend + Docker Compose

- Backend: FastAPI with SQLite, clip CRUD, health check
- Frontend: React + Vite + TypeScript + Tailwind, dark theme
- Components: Generator, Gallery, Player
- Docker: Compose setup for backend + frontend
- Architecture docs in Palace KB

frontend/src/components/Generator.tsx

@@ -0,0 +1,79 @@
+import { useState } from 'react'
+
+interface Props {
+  onGenerate: () => void
+}
+
+export default function Generator({ onGenerate }: Props) {
+  const [prompt, setPrompt] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!prompt.trim()) return
+
+    setIsLoading(true)
+    setError('')
+
+    try {
+      const res = await fetch('/api/generate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          prompt: prompt.trim(),
+          model: 'lyria-3-clip-preview',
+          duration: 30
+        })
+      })
+
+      if (!res.ok) throw new Error('Generation failed')
+
+      setPrompt('')
+      onGenerate()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Something went wrong')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className="bg-lyria-panel rounded-lg p-5 border border-white/5">
+      <h2 className="text-sm font-semibold text-white mb-4 uppercase tracking-wider">
+        Generate
+      </h2>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label className="block text-xs text-lyria-muted mb-1.5">
+            Prompt
+          </label>
+          <textarea
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+            placeholder="Dark gabber kick at 180 BPM with distorted synth lead..."
+            className="w-full h-24 bg-lyria-dark border border-white/10 rounded-md px-3 py-2 text-sm text-white placeholder:text-lyria-muted/50 focus:outline-none focus:border-lyria-accent resize-none"
+          />
+        </div>
+
+        <div className="flex items-center justify-between text-xs text-lyria-muted">
+          <span>Model: lyria-3-clip-preview</span>
+          <span>30s</span>
+        </div>
+
+        {error && (
+          <p className="text-xs text-red-400">{error}</p>
+        )}
+
+        <button
+          type="submit"
+          disabled={isLoading || !prompt.trim()}
+          className="w-full py-2.5 bg-lyria-accent text-white text-sm font-medium rounded-md hover:bg-lyria-accent/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+        >
+          {isLoading ? 'Generating...' : 'Generate'}
+        </button>
+      </form>
+    </div>
+  )
+}