feat: Add album artwork support

- Backend: artwork_filename column on clips table (auto-migration)
- Backend: PATCH /api/clips/{id}/artwork (upload image, 5MB limit)
- Backend: GET /api/clips/{id}/artwork (serve image with correct content-type)
- Backend: DELETE /api/clips/{id}/artwork (remove artwork file + null out DB)
- Backend: DELETE /api/clips/{id} now cascade-removes artwork file
- Frontend: Clip interface includes artwork_filename
- Frontend: Gallery ribbons show artwork thumbnail with hover overlay (play + upload)
- Frontend: Gallery tiles show artwork with hover overlay (play + upload)
- Frontend: DetailPanel shows full artwork with upload/change/remove controls
- Frontend: App.tsx handleUploadArtwork + handleRemoveArtwork handlers
- Storage: /data/artwork/ directory for image files

frontend/src/components/Generator.tsx

@@ -1,4 +1,11 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
+
+interface ModelInfo {
+  name: string
+  max_duration: number
+  default_duration: number
+  description: string
+}
 
 interface Props {
   onGenerate: () => void
@@ -6,8 +13,35 @@ interface Props {
 
 export default function Generator({ onGenerate }: Props) {
   const [prompt, setPrompt] = useState('')
+  const [model, setModel] = useState('lyria-3-clip-preview')
+  const [duration, setDuration] = useState(30)
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState('')
+  const [models, setModels] = useState<Record<string, ModelInfo>>({})
+
+  useEffect(() => {
+    fetch('/api/models')
+      .then(res => res.json())
+      .then(data => {
+        setModels(data.models || {})
+        setModel(data.default || 'lyria-3-clip-preview')
+        const defaultInfo = data.models?.[data.default]
+        setDuration(defaultInfo?.default_duration || 30)
+      })
+      .catch(() => {})  // Use hardcoded defaults on failure
+  }, [])
+
+  const handleModelChange = (newModel: string) => {
+    setModel(newModel)
+    const info = models[newModel]
+    if (info) {
+      setDuration(info.default_duration)
+    }
+  }
+
+  const currentModelInfo = models[model]
+  const maxDuration = currentModelInfo?.max_duration || 30
+  const minDuration = 5
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
@@ -22,12 +56,26 @@ export default function Generator({ onGenerate }: Props) {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           prompt: prompt.trim(),
-          model: 'lyria-3-clip-preview',
-          duration: 30
+          model,
+          duration
         })
       })
 
-      if (!res.ok) throw new Error('Generation failed')
+      if (!res.ok) {
+        try {
+          const errorData = await res.json()
+          throw new Error(errorData.error || errorData.detail || 'Generation failed')
+        } catch (parseErr) {
+          if (parseErr instanceof Error && parseErr.message !== 'Generation failed') throw parseErr
+          throw new Error('Generation failed')
+        }
+      }
+
+      const data = await res.json()
+
+      if (data.error) {
+        throw new Error(data.error)
+      }
 
       setPrompt('')
       onGenerate()
@@ -52,18 +100,51 @@ export default function Generator({ onGenerate }: Props) {
           <textarea
             value={prompt}
             onChange={(e) => setPrompt(e.target.value)}
-            placeholder="Dark gabber kick at 180 BPM with distorted synth lead..."
+            placeholder="Dark distorted kickdrum with atmospheric synth pads, 180 BPM..."
             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 gap-4">
+          <div className="flex-1">
+            <label className="block text-xs text-lyria-muted mb-1.5">
+              Model
+            </label>
+            <select
+              value={model}
+              onChange={(e) => handleModelChange(e.target.value)}
+              className="w-full bg-lyria-dark border border-white/10 rounded-md px-3 py-2 text-sm text-white focus:outline-none focus:border-lyria-accent"
+            >
+              {Object.entries(models).map(([key, info]) => (
+                <option key={key} value={key}>
+                  {info.name} — {info.description}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div className="w-28">
+            <label className="block text-xs text-lyria-muted mb-1.5">
+              Duration ({duration}s)
+            </label>
+            <input
+              type="range"
+              min={minDuration}
+              max={maxDuration}
+              value={duration}
+              onChange={(e) => setDuration(Number(e.target.value))}
+              className="w-full mt-2 accent-lyria-accent"
+            />
+          </div>
+        </div>
+
         <div className="flex items-center justify-between text-xs text-lyria-muted">
-          <span>Model: lyria-3-clip-preview</span>
-          <span>30s</span>
+          <span>{currentModelInfo?.name || 'Clip Preview'}</span>
+          <span>{duration}s / {maxDuration}s max</span>
         </div>
 
         {error && (
-          <p className="text-xs text-red-400">{error}</p>
+          <p className="text-xs text-red-400 break-words">{error}</p>
         )}
 
         <button
@@ -76,4 +157,4 @@ export default function Generator({ onGenerate }: Props) {
       </form>
     </div>
   )
-}
+}