feat: Album artwork generation via Gemini Image models

Backend:
- New image_gen.py module with Gemini image generation client
  - generate_artwork(): generates PNG from text prompt using Google GenAI
  - get_image_gen_config(): loads config from .env (model, API key, safety)
  - get_available_models(): returns list of Gemini image models
  - Safety settings: harassment, hate_speech, sexually_explicit, dangerous
    Configurable via IMAGE_GEN_SAFETY_* env vars (default: BLOCK_ONLY_HIGH)
- New endpoints:
  * POST /api/clips/{id}/generate-artwork — generates and saves artwork
  * GET /api/image-gen/models — lists available models
  * GET /api/image-gen/config — returns safe config (API key masked)
- Default model: gemini-3.1-flash-image-preview
- Fallback API key: LYRIA_API_KEY if IMAGE_GEN_API_KEY not set
- Added google-genai==1.0.0 to requirements.txt

Frontend:
- New ArtworkGenerationModal component for prompt input
  - Textarea with placeholder, loading spinner during generation
  - Styled consistent with SettingsModal (backdrop blur, rounded, dark)
- SettingsModal expanded with Image Generation section (collapsible)
  - Shows current model, API key status, safety filter levels
  - Read-only display — values configured via .env
- DetailPanel: 'Generate' button added next to Upload/Change
  - Passes onGenerateArtwork prop to App.tsx
- App.tsx: handles artwork generation flow, updates state on success

Architecture KB and Tasks KB updated.

backend/requirements.txt

@@ -8,3 +8,4 @@ python-dotenv==1.0.0
 numpy==2.2.0
 librosa==0.10.2
 soundfile==0.12.1
+google-genai==1.0.0

backend/src/image_gen.py

@@ -0,0 +1,110 @@
+"""Image generation client using Google Gemini Image models."""
+
+import os
+from pathlib import Path
+from typing import Optional
+
+from google import genai
+from google.genai import types
+
+ARTWORK_DIR = Path(os.environ.get("ARTWORK_DIR", "/data/artwork"))
+ARTWORK_DIR.mkdir(parents=True, exist_ok=True)
+
+# ── Configuration ──────────────────────────────────────────────────────────
+
+def get_image_gen_config():
+    """Load image generation configuration from environment."""
+    return {
+        "api_key": os.environ.get("IMAGE_GEN_API_KEY") or os.environ.get("LYRIA_API_KEY"),
+        "model": os.environ.get("IMAGE_GEN_MODEL", "gemini-3.1-flash-image-preview"),
+        "safety_harassment": os.environ.get("IMAGE_GEN_SAFETY_HARASSMENT", "BLOCK_ONLY_HIGH"),
+        "safety_hate_speech": os.environ.get("IMAGE_GEN_SAFETY_HATE_SPEECH", "BLOCK_ONLY_HIGH"),
+        "safety_sexually_explicit": os.environ.get("IMAGE_GEN_SAFETY_SEXUALLY_EXPLICIT", "BLOCK_ONLY_HIGH"),
+        "safety_dangerous": os.environ.get("IMAGE_GEN_SAFETY_DANGEROUS", "BLOCK_ONLY_HIGH"),
+    }
+
+# ── Safety Settings ────────────────────────────────────────────────────────
+
+SAFETY_LEVELS = {
+    "off": "OFF",
+    "block_none": "BLOCK_NONE",
+    "block_few": "BLOCK_ONLY_HIGH",
+    "block_some": "BLOCK_MEDIUM_AND_ABOVE",
+    "block_most": "BLOCK_LOW_AND_ABOVE",
+}
+
+def build_safety_settings(config: dict) -> list:
+    """Build safety settings from config."""
+    return [
+        types.SafetySetting(
+            category="HARM_CATEGORY_HARASSMENT",
+            threshold=config.get("safety_harassment", "BLOCK_ONLY_HIGH"),
+        ),
+        types.SafetySetting(
+            category="HARM_CATEGORY_HATE_SPEECH",
+            threshold=config.get("safety_hate_speech", "BLOCK_ONLY_HIGH"),
+        ),
+        types.SafetySetting(
+            category="HARM_CATEGORY_SEXUALLY_EXPLICIT",
+            threshold=config.get("safety_sexually_explicit", "BLOCK_ONLY_HIGH"),
+        ),
+        types.SafetySetting(
+            category="HARM_CATEGORY_DANGEROUS_CONTENT",
+            threshold=config.get("safety_dangerous", "BLOCK_ONLY_HIGH"),
+        ),
+    ]
+
+# ── Generation ──────────────────────────────────────────────────────────────
+
+async def generate_artwork(prompt: str, config: Optional[dict] = None) -> bytes:
+    """Generate album artwork from a text prompt.
+
+    Returns the raw PNG image bytes.
+    """
+    cfg = config or get_image_gen_config()
+    client = genai.Client(api_key=cfg["api_key"])
+
+    safety = build_safety_settings(cfg)
+
+    response = client.models.generate_content(
+        model=cfg["model"],
+        contents=prompt,
+        config=types.GenerateContentConfig(
+            safety_settings=safety,
+            response_modalities=["image"],
+        ),
+    )
+
+    # Extract image from response
+    for part in response.candidates[0].content.parts:
+        if part.inline_data:
+            return part.inline_data.data
+
+    raise RuntimeError("No image data in response")
+
+# ── Available Models ────────────────────────────────────────────────────────
+
+AVAILABLE_IMAGE_MODELS = [
+    {
+        "id": "gemini-3.1-flash-image-preview",
+        "name": "Gemini 3.1 Flash Image",
+        "description": "Fast, cost-efficient image generation. Best for album art.",
+        "status": "Preview",
+    },
+    {
+        "id": "gemini-3-pro-image-preview",
+        "name": "Gemini 3 Pro Image",
+        "description": "Highest quality image generation with reasoning.",
+        "status": "Preview",
+    },
+    {
+        "id": "gemini-2.5-flash-image",
+        "name": "Gemini 2.5 Flash Image",
+        "description": "GA image generation. Solid quality, good speed.",
+        "status": "GA",
+    },
+]
+
+def get_available_models() -> list:
+    """Return list of available image generation models."""
+    return AVAILABLE_IMAGE_MODELS

backend/src/main.py

@@ -9,11 +9,14 @@ from dotenv import load_dotenv
 # Load environment variables BEFORE importing lyria_client (it reads env at module level)
 load_dotenv(Path(__file__).parent.parent / ".env")
 
-from models import GenerateRequest, GenerateResponse, ClipList, RenameRequest, LYRIA_MODELS, DEFAULT_MODEL
+from models import GenerateRequest, GenerateResponse, ClipList, RenameRequest, GenerateArtworkRequest, LYRIA_MODELS, DEFAULT_MODEL
 from database import init_db, create_clip, get_clips, get_clip, delete_clip, update_clip_status, rename_clip, set_artwork, remove_artwork, delete_all_clips, set_analysis
 from lyria_client import generate_clip, save_clip_file
 from waveform import generate_waveform_svg, get_waveform_path
 from analysis import analyze_clip
+from image_gen import generate_artwork, get_image_gen_config, get_available_models
+from analysis import analyze_clip
+from image_gen import generate_artwork, get_image_gen_config, get_available_models, SAFETY_LEVELS
 
 app = FastAPI(title="Lyria Studio", version="0.1.0")
 
@@ -243,6 +246,58 @@ async def remove_artwork_endpoint(clip_id: str):
     updated = await get_clip(clip_id)
     return updated
 
+@app.post("/api/clips/{clip_id}/generate-artwork")
+async def generate_clip_artwork(clip_id: str, request: GenerateArtworkRequest):
+    """Generate album artwork using Gemini Image model."""
+    clip = await get_clip(clip_id)
+    if not clip:
+        raise HTTPException(status_code=404, detail="Clip not found")
+
+    try:
+        # Generate image
+        config = get_image_gen_config()
+        image_bytes = await generate_artwork(request.prompt, config)
+
+        # Save to disk
+        import uuid
+        artwork_filename = f"{clip_id}_{uuid.uuid4().hex[:8]}.png"
+        artwork_path = ARTWORK_DIR / artwork_filename
+        with open(artwork_path, "wb") as f:
+            f.write(image_bytes)
+
+        # Remove old artwork if exists
+        if clip.get("artwork_filename"):
+            old_path = ARTWORK_DIR / clip["artwork_filename"]
+            if old_path.exists():
+                old_path.unlink()
+
+        # Update DB
+        await set_artwork(clip_id, artwork_filename)
+        updated = await get_clip(clip_id)
+        return updated
+
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Image generation failed: {str(e)}")
+
+@app.get("/api/image-gen/models")
+async def list_image_gen_models():
+    """List available image generation models."""
+    return {"models": get_available_models()}
+
+@app.get("/api/image-gen/config")
+async def get_image_gen_configuration():
+    """Get current image generation configuration (safe values only)."""
+    config = get_image_gen_config()
+    return {
+        "model": config["model"],
+        "safety_harassment": config["safety_harassment"],
+        "safety_hate_speech": config["safety_hate_speech"],
+        "safety_sexually_explicit": config["safety_sexually_explicit"],
+        "safety_dangerous": config["safety_dangerous"],
+        # API key is masked
+        "has_api_key": bool(config.get("api_key")),
+    }
+
 @app.patch("/api/clips/{clip_id}")
 async def rename_clip_endpoint(clip_id: str, request: RenameRequest):
     clip = await get_clip(clip_id)

backend/src/models.py

@@ -61,6 +61,10 @@ class Clip(BaseModel):
 class RenameRequest(BaseModel):
     title: str
 
+class GenerateArtworkRequest(BaseModel):
+    prompt: str
+
 class ClipList(BaseModel):
     clips: list[Clip]
+    total: int
     total: int

frontend/src/App.tsx

@@ -4,6 +4,7 @@ import Gallery from './components/Gallery'
 import Player from './components/Player'
 import DetailPanel from './components/DetailPanel'
 import SettingsModal from './components/SettingsModal'
+import ArtworkGenerationModal from './components/ArtworkGenerationModal'
 
 interface Clip {
   id: string
@@ -26,6 +27,8 @@ function App() {
   const [isPlaying, setIsPlaying] = useState(false)
   const [selectedClip, setSelectedClip] = useState<Clip | null>(null)
   const [settingsOpen, setSettingsOpen] = useState(false)
+  const [artworkGenOpen, setArtworkGenOpen] = useState(false)
+  const [artworkGenClip, setArtworkGenClip] = useState<Clip | null>(null)
 
   const fetchClips = async () => {
     try {
@@ -134,6 +137,38 @@ function App() {
     }
   }
 
+  const handleGenerateArtwork = async (clip: Clip) => {
+    setArtworkGenClip(clip)
+    setArtworkGenOpen(true)
+  }
+
+  const handleArtworkGenSubmit = async (prompt: string) => {
+    if (!artworkGenClip) return
+    try {
+      const res = await fetch(`/api/clips/${artworkGenClip.id}/generate-artwork`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ prompt }),
+      })
+      if (res.ok) {
+        const updated = await res.json()
+        setClips(prev => prev.map(c => c.id === updated.id ? updated : c))
+        if (currentClip?.id === updated.id) {
+          setCurrentClip(updated)
+        }
+        if (selectedClip?.id === updated.id) {
+          setSelectedClip(updated)
+        }
+      } else {
+        const err = await res.json()
+        alert(err.detail || 'Failed to generate artwork')
+      }
+    } catch (err) {
+      console.error('Failed to generate artwork:', err)
+      alert('Failed to generate artwork')
+    }
+  }
+
   const handleSelectClip = async (clip: Clip) => {
     setSelectedClip(clip)
     // Fetch analysis if not already cached
@@ -238,6 +273,19 @@ function App() {
           onRemoveArtwork={handleRemoveArtwork}
           onPlay={handlePlay}
           onTogglePlay={() => setIsPlaying(!isPlaying)}
+          onGenerateArtwork={handleGenerateArtwork}
+        />
+      )}
+
+      {artworkGenOpen && artworkGenClip && (
+        <ArtworkGenerationModal
+          isOpen={artworkGenOpen}
+          onClose={() => {
+            setArtworkGenOpen(false)
+            setArtworkGenClip(null)
+          }}
+          onGenerate={handleArtworkGenSubmit}
+          trackName={artworkGenClip.title || artworkGenClip.prompt}
         />
       )}
 

frontend/src/components/ArtworkGenerationModal.tsx

@@ -0,0 +1,103 @@
+import { useState } from 'react'
+
+interface Props {
+  isOpen: boolean
+  onClose: () => void
+  onGenerate: (prompt: string) => Promise<void>
+  trackName: string
+}
+
+export default function ArtworkGenerationModal({ isOpen, onClose, onGenerate, trackName }: Props) {
+  const [prompt, setPrompt] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  if (!isOpen) return null
+
+  const handleGenerate = async () => {
+    if (!prompt.trim() || loading) return
+    setLoading(true)
+    try {
+      await onGenerate(prompt.trim())
+      setPrompt('')
+      onClose()
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleClose = () => {
+    if (!loading) {
+      setPrompt('')
+      onClose()
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        onClick={handleClose}
+      />
+
+      {/* Modal */}
+      <div className="relative bg-lyria-surface border border-white/10 rounded-xl shadow-2xl w-full max-w-md mx-4 overflow-hidden">
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-white/10">
+          <div>
+            <h2 className="text-lg font-semibold text-white">Generate Artwork</h2>
+            <p className="text-xs text-lyria-muted mt-0.5 truncate max-w-[200px]">{trackName}</p>
+          </div>
+          <button
+            onClick={handleClose}
+            disabled={loading}
+            className="text-lyria-muted hover:text-white transition-colors disabled:opacity-50"
+            aria-label="Close"
+          >
+            <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 space-y-4">
+          <div>
+            <label className="block text-sm text-white mb-2">
+              Describe the artwork you want
+            </label>
+            <textarea
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              placeholder="e.g., A cyberpunk cityscape at night with neon lights reflecting on wet streets..."
+              className="w-full h-32 bg-black/30 border border-white/10 rounded-lg px-4 py-3 text-sm text-white placeholder:text-lyria-muted/40 focus:outline-none focus:border-lyria-accent resize-none"
+              disabled={loading}
+            />
+            <p className="text-xs text-lyria-muted/60 mt-2">
+              Uses Gemini Image model. Be descriptive for best results.
+            </p>
+          </div>
+
+          {/* Generate Button */}
+          <button
+            onClick={handleGenerate}
+            disabled={!prompt.trim() || loading}
+            className="w-full py-3 text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed bg-lyria-accent text-black hover:bg-lyria-accent/90"
+          >
+            {loading ? (
+              <span className="flex items-center justify-center gap-2">
+                <svg className="animate-spin w-4 h-4" 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>
+                Generating...
+              </span>
+            ) : (
+              'Generate Artwork'
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/components/DetailPanel.tsx

@@ -27,6 +27,7 @@ interface Props {
   onRemoveArtwork: (id: string) => void
   onPlay?: (clip: Clip) => void
   onTogglePlay?: () => void
+  onGenerateArtwork?: (clip: Clip) => void
 }
 
 const modelName = (modelId: string) => {
@@ -37,7 +38,7 @@ const modelName = (modelId: string) => {
   return names[modelId] || modelId
 }
 
-export default function DetailPanel({ clip, isPlaying, currentClipId, onClose, onRename, onDelete, onUploadArtwork, onRemoveArtwork, onPlay, onTogglePlay }: Props) {
+export default function DetailPanel({ clip, isPlaying, currentClipId, onClose, onRename, onDelete, onUploadArtwork, onRemoveArtwork, onPlay, onTogglePlay, onGenerateArtwork }: Props) {
   const artworkInputRef = useRef<HTMLInputElement>(null)
   const [isEditingTitle, setIsEditingTitle] = useState(false)
   const [editTitle, setEditTitle] = useState(clip.title || '')
@@ -133,6 +134,12 @@ export default function DetailPanel({ clip, isPlaying, currentClipId, onClose, o
             <div className="flex items-center justify-between mb-2">
               <label className="text-xs text-lyria-muted uppercase tracking-wider">Album Art</label>
               <div className="flex items-center gap-2">
+                <button
+                  onClick={() => onGenerateArtwork?.(clip)}
+                  className="text-xs text-lyria-accent hover:text-lyria-accent/80 transition-colors"
+                >
+                  Generate
+                </button>
                 <button
                   onClick={() => artworkInputRef.current?.click()}
                   className="text-xs text-lyria-accent hover:text-lyria-accent/80 transition-colors"

frontend/src/components/SettingsModal.tsx

@@ -1,4 +1,20 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
+
+interface ImageGenConfig {
+  model: string
+  has_api_key: boolean
+  safety_harassment: string
+  safety_hate_speech: string
+  safety_sexually_explicit: string
+  safety_dangerous: string
+}
+
+interface ImageGenModel {
+  id: string
+  name: string
+  description: string
+  status: string
+}
 
 interface Props {
   isOpen: boolean
@@ -8,9 +24,51 @@ interface Props {
   clipCount: number
 }
 
+const SAFETY_OPTIONS = [
+  { value: 'OFF', label: 'Off' },
+  { value: 'BLOCK_NONE', label: 'Block None' },
+  { value: 'BLOCK_ONLY_HIGH', label: 'Block Few (High only)' },
+  { value: 'BLOCK_MEDIUM_AND_ABOVE', label: 'Block Some (Medium+)' },
+  { value: 'BLOCK_LOW_AND_ABOVE', label: 'Block Most (Low+)' },
+]
+
 export default function SettingsModal({ isOpen, onClose, onClearWaveforms, onDeleteAll, clipCount }: Props) {
   const [confirmDelete, setConfirmDelete] = useState(false)
   const [loading, setLoading] = useState(false)
+  const [imageGenModels, setImageGenModels] = useState<ImageGenModel[]>([])
+  const [imageGenConfig, setImageGenConfig] = useState<ImageGenConfig | null>(null)
+  const [showImageGenSettings, setShowImageGenSettings] = useState(false)
+
+  useEffect(() => {
+    if (isOpen) {
+      fetchImageGenModels()
+      fetchImageGenConfig()
+    }
+  }, [isOpen])
+
+  const fetchImageGenModels = async () => {
+    try {
+      const res = await fetch('/api/image-gen/models')
+      if (res.ok) {
+        const data = await res.json()
+        setImageGenModels(data.models)
+      }
+    } catch (e) {
+      console.error('Failed to fetch image gen models:', e)
+    }
+  }
+
+  const fetchImageGenConfig = async () => {
+    try {
+      const res = await fetch('/api/image-gen/config')
+      if (res.ok) {
+        const data = await res.json()
+        setImageGenConfig(data)
+      }
+    } catch (e) {
+      console.error('Failed to fetch image gen config:', e)
+    }
+  }
 
   if (!isOpen) return null
 
@@ -46,9 +104,9 @@ export default function SettingsModal({ isOpen, onClose, onClearWaveforms, onDel
       />
 
       {/* Modal */}
-      <div className="relative bg-lyria-surface border border-white/10 rounded-xl shadow-2xl w-full max-w-md mx-4 overflow-hidden">
+      <div className="relative bg-lyria-surface border border-white/10 rounded-xl shadow-2xl w-full max-w-md 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">
+        <div className="flex items-center justify-between px-6 py-4 border-b border-white/10 shrink-0">
           <h2 className="text-lg font-semibold text-white">Settings</h2>
           <button
             onClick={onClose}
@@ -62,7 +120,92 @@ export default function SettingsModal({ isOpen, onClose, onClearWaveforms, onDel
         </div>
 
         {/* Content */}
-        <div className="px-6 py-5 space-y-6">
+        <div className="px-6 py-5 space-y-6 overflow-y-auto">
+          {/* Image Generation Settings */}
+          <div className="border border-white/10 rounded-lg overflow-hidden">
+            <button
+              onClick={() => setShowImageGenSettings(!showImageGenSettings)}
+              className="w-full flex items-center justify-between px-4 py-3 bg-white/5 hover:bg-white/10 transition-colors"
+            >
+              <div className="flex items-center gap-2">
+                <svg className="w-4 h-4 text-lyria-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                </svg>
+                <span className="text-sm font-medium text-white">Image Generation</span>
+              </div>
+              <svg
+                className={`w-4 h-4 text-lyria-muted transition-transform ${showImageGenSettings ? 'rotate-180' : ''}`}
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+              </svg>
+            </button>
+
+            {showImageGenSettings && (
+              <div className="p-4 space-y-4">
+                {/* Model Selection */}
+                <div>
+                  <label className="block text-xs text-lyria-muted mb-1.5">Model</label>
+                  <select
+                    className="w-full bg-black/30 border border-white/10 rounded-md px-3 py-2 text-sm text-white focus:outline-none focus:border-lyria-accent"
+                    value={imageGenConfig?.model || 'gemini-3.1-flash-image-preview'}
+                    onChange={(e) => {
+                      // This would need a backend endpoint to update config
+                      // For now, it's read-only from .env
+                      console.log('Model selection changed:', e.target.value)
+                    }}
+                  >
+                    {imageGenModels.map((model) => (
+                      <option key={model.id} value={model.id}>
+                        {model.name} ({model.status})
+                      </option>
+                    ))}
+                  </select>
+                  <p className="text-xs text-lyria-muted/60 mt-1">
+                    Configure via IMAGE_GEN_MODEL in .env
+                  </p>
+                </div>
+
+                {/* API Key Status */}
+                <div className="flex items-center gap-2">
+                  <div className={`w-2 h-2 rounded-full ${imageGenConfig?.has_api_key ? 'bg-green-400' : 'bg-red-400'}`} />
+                  <span className="text-xs text-lyria-muted">
+                    {imageGenConfig?.has_api_key ? 'API key configured' : 'No API key — set IMAGE_GEN_API_KEY in .env'}
+                  </span>
+                </div>
+
+                {/* Safety Settings */}
+                <div className="space-y-3">
+                  <p className="text-xs font-medium text-white">Safety Filters</p>
+                  {[
+                    { key: 'safety_harassment', label: 'Harassment' },
+                    { key: 'safety_hate_speech', label: 'Hate Speech' },
+                    { key: 'safety_sexually_explicit', label: 'Sexually Explicit' },
+                    { key: 'safety_dangerous', label: 'Dangerous Content' },
+                  ].map(({ key, label }) => (
+                    <div key={key}>
+                      <label className="block text-xs text-lyria-muted mb-1">{label}</label>
+                      <select
+                        className="w-full bg-black/30 border border-white/10 rounded-md px-3 py-1.5 text-sm text-white focus:outline-none focus:border-lyria-accent"
+                        value={imageGenConfig?.[key as keyof ImageGenConfig] as string || 'BLOCK_ONLY_HIGH'}
+                        disabled
+                      >
+                        {SAFETY_OPTIONS.map((opt) => (
+                          <option key={opt.value} value={opt.value}>{opt.label}</option>
+                        ))}
+                      </select>
+                    </div>
+                  ))}
+                  <p className="text-xs text-lyria-muted/60">
+                    Configure via IMAGE_GEN_SAFETY_* in .env
+                  </p>
+                </div>
+              </div>
+            )}
+          </div>
+
           {/* Danger Zone */}
           <div className="border border-red-500/30 rounded-lg overflow-hidden">
             <div className="bg-red-500/10 px-4 py-2 border-b border-red-500/20">