added the music generation functionality

frontend/src/App.jsx

@@ -7,8 +7,10 @@ import ScalesDisplay from './components/ScalesDisplay'
 import StemMixer from './components/StemMixer'
 import TransportBar from './components/TransportBar'
 import ProcessingOverlay from './components/ProcessingOverlay'
+import GenerationPanel from './components/generation/GenerationPanel'
 import { useSession } from './hooks/useSession'
 import { useAudioEngine } from './hooks/useAudioEngine'
+import { useGeneration } from './hooks/useGeneration'
 import { useProcessingProgress } from './hooks/useProcessingProgress'
 import { usePresetCache } from './hooks/usePresetCache'
 import { getCachedPreset } from './utils/presetCache'
@@ -25,6 +27,9 @@ function App() {
     detect,
     process,
     generate,
+    extractSeed,
+    generateAceStep,
+    checkModels,
     loadPreset,
     clearError
   } = useSession()
@@ -60,6 +65,14 @@ function App() {
 
   const { cacheStatus } = usePresetCache()
 
+  const generation = useGeneration({
+    sessionId,
+    generate,
+    extractSeed,
+    generateAceStep,
+    checkModels,
+  })
+
   const currentPresetNameRef = useRef(null)
 
   const [isProcessing, setIsProcessing] = useState(false)
@@ -239,6 +252,17 @@ function App() {
             hasRegion={hasRegion}
           />
 
+          {/* AI Generation Panel */}
+          <GenerationPanel
+            sessionId={sessionId}
+            detection={detection}
+            regionStart={regionStart}
+            regionEnd={regionEnd}
+            hasRegion={hasRegion}
+            onPlaySection={handlePlaySection}
+            generation={generation}
+          />
+
           {/* Chord Summary (all unique chords) */}
           {chordsData && (
             <ChordDisplay

frontend/src/components/StemMixer.jsx

@@ -57,7 +57,7 @@ function VolumeSlider({ value, onChange, disabled }) {
         <div className="w-full h-full rounded-full bg-white/[0.08]" />
         <div
           className="absolute top-0 left-0 h-full rounded-full"
-          style={{ width: `${pct}%`, background: disabled ? '#374151' : '#14B8A6' }}
+          style={{ width: `${pct}%`, background: disabled ? '#374151' : '#F0A500' }}
         />
       </div>
       <div
@@ -69,7 +69,7 @@ function VolumeSlider({ value, onChange, disabled }) {
           left: `${pct}%`,
           transform: 'translate(-50%, -50%)',
           background: disabled ? '#374151' : 'white',
-          border: `2px solid ${disabled ? '#4b5563' : '#14B8A6'}`,
+          border: `2px solid ${disabled ? '#4b5563' : '#F0A500'}`,
         }}
       />
     </div>
@@ -268,7 +268,7 @@ function StemMixer({
                       max={1}
                       onChange={(v) => onPanChange && onPanChange(stem, v)}
                       label="Pan"
-                      color="#14B8A6"
+                      color="#F0A500"
                       showCenterTick
                       disabled={isMuted}
                     />
@@ -278,7 +278,7 @@ function StemMixer({
                       max={0.5}
                       onChange={(v) => onReverbChange && onReverbChange(stem, v)}
                       label="Reverb"
-                      color="#14B8A6"
+                      color="#F0A500"
                       disabled={isMuted}
                     />
                   </div>

frontend/src/components/TransportBar.jsx

@@ -482,7 +482,7 @@ function TransportBar({
                   onClick={() => setSnapMode(mode)}
                   className={`px-2 py-0.5 rounded transition-colors capitalize ${
                     snapMode === mode
-                      ? 'bg-cyan-500/30 text-cyan-300 border border-cyan-500/40'
+                      ? 'bg-accent-500/30 text-accent-400 border border-accent-500/40'
                       : 'text-gray-400 hover:text-gray-200 hover:bg-white/[0.06]'
                   }`}
                 >

frontend/src/components/generation/ACEStepParams.jsx

@@ -0,0 +1,127 @@
+import React, { useState } from 'react'
+import ParamSlider from './ParamSlider'
+
+export default function ACEStepParams({ params, onParamChange, detection }) {
+  const [showAdvanced, setShowAdvanced] = useState(false)
+
+  return (
+    <div className="space-y-3">
+      <div className="text-[10px] text-gray-500 bg-white/[0.02] rounded-lg px-3 py-2">
+        Caption is auto-generated from your seed's analysis (BPM, key, brightness, instruments) for musical coherence. Override below if needed.
+      </div>
+
+      {/* Optional caption override (collapsed by default) */}
+      <button
+        onClick={() => setShowAdvanced(!showAdvanced)}
+        className="text-xs text-gray-500 hover:text-gray-300 transition-colors flex items-center gap-1"
+      >
+        <span className={`transition-transform ${showAdvanced ? 'rotate-90' : ''}`}>&#9654;</span>
+        Custom Caption & Advanced
+      </button>
+
+      {showAdvanced && (
+        <div className="space-y-3 pl-3 border-l border-white/[0.06]">
+          <div>
+            <label className="text-xs text-gray-400 font-medium mb-1 block">Caption Override</label>
+            <textarea
+              value={params.caption}
+              onChange={e => onParamChange('caption', e.target.value)}
+              placeholder="Leave empty for auto-generated caption"
+              className="w-full bg-surface-elevated border border-white/[0.08] rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-accent-500/40 resize-none font-mono"
+              rows={2}
+            />
+          </div>
+
+          <ParamSlider
+            label="CFG Scale"
+            value={params.cfg_scale || 7}
+            min={1}
+            max={15}
+            step={0.5}
+            onChange={v => onParamChange('cfg_scale', v)}
+          />
+
+          <div>
+            <label className="text-xs text-gray-400 font-medium mb-1 block">Scheduler</label>
+            <select
+              value={params.scheduler}
+              onChange={e => onParamChange('scheduler', e.target.value)}
+              className="bg-surface-elevated border border-white/[0.08] rounded-lg px-3 py-1.5 text-sm text-white focus:outline-none focus:border-accent-500/40"
+            >
+              <option value="ode">ODE (recommended)</option>
+              <option value="sde">SDE</option>
+            </select>
+          </div>
+        </div>
+      )}
+
+      <ParamSlider
+        label="Duration"
+        value={params.duration}
+        min={10}
+        max={120}
+        step={5}
+        onChange={v => onParamChange('duration', v)}
+        leftLabel="10s"
+        rightLabel="120s"
+      />
+
+      <ParamSlider
+        label="Source Fidelity"
+        value={params.audio_cover_strength}
+        min={0}
+        max={1}
+        step={0.05}
+        onChange={v => onParamChange('audio_cover_strength', v)}
+        leftLabel="Creative"
+        rightLabel="Faithful"
+      />
+
+      {/* Model Variant */}
+      <div>
+        <label className="text-xs text-gray-400 font-medium mb-1 block">Model Variant</label>
+        <select
+          value={params.model_variant}
+          onChange={e => onParamChange('model_variant', e.target.value)}
+          className="bg-surface-elevated border border-white/[0.08] rounded-lg px-3 py-1.5 text-sm text-white focus:outline-none focus:border-accent-500/40"
+        >
+          <option value="xl-turbo">XL Turbo (best for 32GB)</option>
+          <option value="standard-turbo">Standard Turbo (faster)</option>
+          <option value="standard-sft">Standard SFT (balanced)</option>
+        </select>
+      </div>
+
+      <ParamSlider
+        label="Inference Steps"
+        value={params.inference_steps}
+        min={1}
+        max={50}
+        step={1}
+        onChange={v => onParamChange('inference_steps', v)}
+        leftLabel="Fast (1)"
+        rightLabel="Quality (50)"
+      />
+
+      {/* Seed */}
+      <div>
+        <label className="text-xs text-gray-400 font-medium mb-1 block">Seed</label>
+        <div className="flex gap-2">
+          <input
+            type="number"
+            value={params.seed}
+            onChange={e => onParamChange('seed', parseInt(e.target.value) || -1)}
+            className="flex-1 bg-surface-elevated border border-white/[0.08] rounded-lg px-3 py-1.5 text-sm text-white font-mono focus:outline-none focus:border-accent-500/40"
+          />
+          <button
+            onClick={() => onParamChange('seed', Math.floor(Math.random() * 999999))}
+            className="px-2 py-1.5 rounded-lg bg-white/[0.06] hover:bg-white/[0.1] text-sm transition-colors"
+            title="Random seed"
+          >
+            🎲
+          </button>
+        </div>
+        <span className="text-[10px] text-gray-600 mt-0.5 block">-1 = random</span>
+      </div>
+    </div>
+  )
+}

frontend/src/components/generation/GenerationOutput.jsx

@@ -0,0 +1,211 @@
+import React, { useRef, useState, useEffect } from 'react'
+
+export default function GenerationOutput({
+  sessionId,
+  generationResult,
+  onRegenerate,
+  onUseAsSource,
+  onPlaySection,
+}) {
+  const audioRef = useRef(null)
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [currentTime, setCurrentTime] = useState(0)
+  const [duration, setDuration] = useState(0)
+  const [abSource, setAbSource] = useState('generated')
+  const [downloadFormat, setDownloadFormat] = useState('wav')
+  const [audioSrc, setAudioSrc] = useState(null)
+  const [loadError, setLoadError] = useState(false)
+
+  // Only set the audio src when we get a NEW generation result
+  useEffect(() => {
+    if (generationResult && sessionId) {
+      setAudioSrc(`/api/stem/${sessionId}/_continuation?format=wav&v=${Date.now()}`)
+      setIsPlaying(false)
+      setCurrentTime(0)
+      setDuration(0)
+      setAbSource('generated')
+      setLoadError(false)
+    } else {
+      setAudioSrc(null)
+    }
+  }, [generationResult, sessionId])
+
+  const handleTimeUpdate = () => {
+    if (audioRef.current) setCurrentTime(audioRef.current.currentTime)
+  }
+
+  const handleLoadedMetadata = () => {
+    if (audioRef.current) setDuration(audioRef.current.duration)
+  }
+
+  const handleEnded = () => setIsPlaying(false)
+
+  // Stop retrying on error — clear the src so the browser doesn't loop
+  const handleError = () => {
+    setLoadError(true)
+    setIsPlaying(false)
+  }
+
+  const togglePlay = () => {
+    if (!audioRef.current || loadError) return
+    if (isPlaying) {
+      audioRef.current.pause()
+      setIsPlaying(false)
+    } else {
+      audioRef.current.play().catch(() => setIsPlaying(false))
+      setIsPlaying(true)
+    }
+  }
+
+  const handleSeek = (e) => {
+    if (!audioRef.current || !duration) return
+    const rect = e.currentTarget.getBoundingClientRect()
+    const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
+    audioRef.current.currentTime = pct * duration
+  }
+
+  const formatTime = (t) => {
+    const m = Math.floor(t / 60)
+    const s = Math.floor(t % 60).toString().padStart(2, '0')
+    return `${m}:${s}`
+  }
+
+  const handleDownload = () => {
+    if (!sessionId) return
+    const url = `/api/stem/${sessionId}/_continuation?format=${downloadFormat}`
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `generation.${downloadFormat}`
+    a.click()
+  }
+
+  // Don't render anything until we have a generation result
+  if (!generationResult) return null
+
+  return (
+    <div className="space-y-3 pt-3 border-t border-white/[0.06]">
+      {/* Only mount <audio> when we have a valid src */}
+      {audioSrc && !loadError && (
+        <audio
+          ref={audioRef}
+          src={audioSrc}
+          preload="auto"
+          onTimeUpdate={handleTimeUpdate}
+          onLoadedMetadata={handleLoadedMetadata}
+          onEnded={handleEnded}
+          onError={handleError}
+        />
+      )}
+
+      {loadError && (
+        <div className="text-xs text-red-400 bg-red-500/10 rounded px-3 py-2">
+          Audio playback unavailable — session may have expired. Try generating again.
+        </div>
+      )}
+
+      {/* A/B Toggle */}
+      <div className="flex gap-1.5">
+        <button
+          onClick={() => setAbSource('generated')}
+          className={`px-3 py-1 rounded text-xs font-medium transition-all ${
+            abSource === 'generated'
+              ? 'bg-accent-500/20 text-accent-400 border border-accent-500/30'
+              : 'bg-white/[0.04] text-gray-500 border border-transparent hover:bg-white/[0.06]'
+          }`}
+        >
+          Seed + Generated
+        </button>
+        <button
+          onClick={() => {
+            setAbSource('seed')
+            if (audioRef.current) { audioRef.current.pause(); setIsPlaying(false) }
+            if (onPlaySection) onPlaySection()
+          }}
+          className={`px-3 py-1 rounded text-xs font-medium transition-all ${
+            abSource === 'seed'
+              ? 'bg-accent-500/20 text-accent-400 border border-accent-500/30'
+              : 'bg-white/[0.04] text-gray-500 border border-transparent hover:bg-white/[0.06]'
+          }`}
+        >
+          Seed Only
+        </button>
+      </div>
+
+      {/* Playback controls */}
+      {!loadError && (
+        <div className="space-y-2">
+          <div className="flex items-center gap-3">
+            <button
+              onClick={togglePlay}
+              disabled={abSource === 'seed'}
+              className={`w-8 h-8 rounded-full flex items-center justify-center transition-colors text-white text-sm ${
+                abSource === 'seed' ? 'bg-gray-700 cursor-not-allowed' : 'bg-accent-500 hover:bg-accent-400'
+              }`}
+            >
+              {isPlaying ? '⏸' : '▶'}
+            </button>
+            <div
+              className="flex-1 h-1.5 rounded-full bg-white/[0.06] cursor-pointer"
+              onClick={handleSeek}
+            >
+              <div
+                className="h-full bg-accent-500 rounded-full transition-all"
+                style={{ width: duration ? `${(currentTime / duration) * 100}%` : '0%' }}
+              />
+            </div>
+            <span className="text-xs font-mono text-gray-400 w-16 text-right">
+              {formatTime(currentTime)} / {formatTime(duration)}
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* Metadata */}
+      <div className="flex flex-wrap gap-2 text-[10px]">
+        <span className="px-2 py-0.5 rounded bg-white/[0.04] text-gray-500">
+          Model: {generationResult.model || 'unknown'}
+        </span>
+        <span className="px-2 py-0.5 rounded bg-white/[0.04] text-gray-500">
+          Duration: {generationResult.duration_seconds?.toFixed(1)}s
+        </span>
+        <span className="px-2 py-0.5 rounded bg-white/[0.04] text-gray-500">
+          Generated in {generationResult.generation_time_seconds?.toFixed(1)}s
+        </span>
+      </div>
+
+      {/* Action buttons */}
+      <div className="flex items-center gap-2">
+        <button
+          onClick={onRegenerate}
+          className="px-3 py-1.5 rounded-lg bg-white/[0.06] hover:bg-white/[0.1] text-xs text-gray-300 transition-colors"
+        >
+          Regenerate
+        </button>
+        <button
+          onClick={onUseAsSource}
+          className="px-3 py-1.5 rounded-lg bg-white/[0.06] hover:bg-white/[0.1] text-xs text-gray-300 transition-colors"
+        >
+          Use as Source
+        </button>
+
+        {/* Download */}
+        <div className="ml-auto flex items-center gap-1">
+          <select
+            value={downloadFormat}
+            onChange={e => setDownloadFormat(e.target.value)}
+            className="bg-surface-elevated border border-white/[0.06] rounded px-1.5 py-1 text-[10px] text-gray-400 focus:outline-none"
+          >
+            <option value="wav">.wav</option>
+            <option value="flac">.flac</option>
+          </select>
+          <button
+            onClick={handleDownload}
+            className="px-2 py-1 rounded bg-white/[0.06] hover:bg-white/[0.1] text-[10px] text-gray-400 transition-colors"
+          >
+            Download
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/components/generation/GenerationPanel.jsx

@@ -0,0 +1,201 @@
+import React, { useState, useCallback, useEffect, useRef } from 'react'
+import ModelSelector from './ModelSelector'
+import SeedRegionInfo from './SeedRegionInfo'
+import TaskTypeSelector from './TaskTypeSelector'
+import MusicGenParams from './MusicGenParams'
+import ACEStepParams from './ACEStepParams'
+import GenerationProgress from './GenerationProgress'
+import GenerationOutput from './GenerationOutput'
+
+// Map model+taskType to the param key used in the request
+function getTaskTypeKey(model) {
+  if (model === 'ace-step') return 'task_type'
+  return null
+}
+
+export default function GenerationPanel({
+  sessionId,
+  detection,
+  regionStart,
+  regionEnd,
+  hasRegion,
+  onPlaySection,
+  generation, // all state from useGeneration hook
+}) {
+  const [isCollapsed, setIsCollapsed] = useState(false)
+  const [isExtracting, setIsExtracting] = useState(false)
+
+  const {
+    selectedModel,
+    setSelectedModel,
+    modelParams,
+    setModelParam,
+    isGenerating,
+    generationResult,
+    generationProgress,
+    modelAvailability,
+    seedData,
+    doExtractSeed,
+    startGeneration,
+    setGenerationResult,
+  } = generation
+
+  const currentParams = modelParams[selectedModel] || {}
+
+  // Get the current task type for the selected model
+  const taskTypeKey = getTaskTypeKey(selectedModel)
+  const taskType = taskTypeKey ? currentParams[taskTypeKey] : 'continuation'
+
+  const handleTaskTypeChange = useCallback((newType) => {
+    if (taskTypeKey) {
+      setModelParam(selectedModel, taskTypeKey, newType)
+    }
+  }, [selectedModel, taskTypeKey, setModelParam])
+
+  const handleParamChange = useCallback((key, value) => {
+    setModelParam(selectedModel, key, value)
+  }, [selectedModel, setModelParam])
+
+  // Auto-extract seed when region changes (debounced with longer delay)
+  const regionRef = useRef({ start: regionStart, end: regionEnd })
+  useEffect(() => {
+    regionRef.current = { start: regionStart, end: regionEnd }
+  }, [regionStart, regionEnd])
+
+  useEffect(() => {
+    if (!hasRegion || !sessionId) return
+    if (regionEnd - regionStart < 3) return
+
+    const timer = setTimeout(async () => {
+      // Only extract if region hasn't changed during the delay
+      if (regionRef.current.start === regionStart && regionRef.current.end === regionEnd) {
+        setIsExtracting(true)
+        await doExtractSeed(regionStart, regionEnd)
+        setIsExtracting(false)
+      }
+    }, 1000)
+
+    return () => clearTimeout(timer)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [regionStart, regionEnd, hasRegion, sessionId])
+
+  const handleGenerate = useCallback(async () => {
+    if (!hasRegion) return
+    await startGeneration(regionStart, regionEnd)
+  }, [hasRegion, regionStart, regionEnd, startGeneration])
+
+  const handleRegenerate = useCallback(async () => {
+    // Set a new random seed before regenerating
+    if (selectedModel === 'musicgen') {
+      setModelParam('musicgen', 'seed', Math.floor(Math.random() * 999999))
+    } else if (selectedModel === 'ace-step') {
+      setModelParam('ace-step', 'seed', Math.floor(Math.random() * 999999))
+    }
+    // Small delay for state to update
+    setTimeout(() => handleGenerate(), 50)
+  }, [selectedModel, setModelParam, handleGenerate])
+
+  const handleUseAsSource = useCallback(() => {
+    // The generated continuation is already stored in the session.
+    // Clear the current result so the user can generate again.
+    setGenerationResult(null)
+  }, [setGenerationResult])
+
+  const canGenerate = hasRegion && !isGenerating && (regionEnd - regionStart >= 3)
+
+  return (
+    <div className="card rounded-xl p-4 animate-fade-in">
+      {/* Header */}
+      <button
+        onClick={() => setIsCollapsed(!isCollapsed)}
+        className="w-full flex items-center justify-between mb-3"
+      >
+        <div className="flex items-center gap-2">
+          <span className="text-[10px] uppercase tracking-widest text-accent-500 font-medium">
+            AI Generation
+          </span>
+        </div>
+        <span className={`text-gray-500 text-xs transition-transform ${isCollapsed ? '' : 'rotate-180'}`}>
+          &#9660;
+        </span>
+      </button>
+
+      {!isCollapsed && (
+        <div className="space-y-4">
+          {/* Model selector tabs */}
+          <ModelSelector
+            selectedModel={selectedModel}
+            onModelChange={setSelectedModel}
+            availability={modelAvailability}
+          />
+
+          {/* Seed region info */}
+          <SeedRegionInfo
+            seedData={seedData}
+            regionStart={regionStart}
+            regionEnd={regionEnd}
+            hasRegion={hasRegion}
+            onPreviewRegion={onPlaySection}
+            isExtracting={isExtracting}
+          />
+
+          {/* Task type selector (per model) */}
+          <TaskTypeSelector
+            model={selectedModel}
+            taskType={taskType}
+            onTaskTypeChange={handleTaskTypeChange}
+          />
+
+          {/* Model-specific parameters */}
+          <div className="transition-all">
+            {selectedModel === 'musicgen' && (
+              <MusicGenParams
+                params={currentParams}
+                onParamChange={handleParamChange}
+              />
+            )}
+            {selectedModel === 'ace-step' && (
+              <ACEStepParams
+                params={currentParams}
+                onParamChange={handleParamChange}
+                detection={detection}
+              />
+            )}
+          </div>
+
+          {/* Generate button */}
+          <button
+            onClick={handleGenerate}
+            disabled={!canGenerate}
+            className={`w-full py-2.5 rounded-lg text-sm font-medium transition-all ${
+              canGenerate
+                ? 'bg-accent-500 hover:bg-accent-400 text-white'
+                : 'bg-white/[0.04] text-gray-600 cursor-not-allowed'
+            }`}
+          >
+            {isGenerating
+              ? 'Generating...'
+              : `\u25B6 Generate with ${selectedModel === 'musicgen' ? 'MusicGen' : 'ACE-Step'}`
+            }
+          </button>
+
+          {/* Progress */}
+          <GenerationProgress
+            model={selectedModel}
+            progress={generationProgress}
+            isGenerating={isGenerating}
+          />
+
+          {/* Output */}
+          <GenerationOutput
+            sessionId={sessionId}
+            generationResult={generationResult}
+            onRegenerate={handleRegenerate}
+            onUseAsSource={handleUseAsSource}
+            onPlaySection={onPlaySection}
+          />
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/components/generation/GenerationProgress.jsx

@@ -0,0 +1,54 @@
+import React from 'react'
+
+export default function GenerationProgress({ model, progress, isGenerating }) {
+  if (!isGenerating) return null
+
+  return (
+    <div className="py-3">
+      {model === 'ace-step' && (
+        <div className="space-y-1.5">
+          <div className="flex items-center justify-between text-xs">
+            <span className="text-gray-400">Generating with ACE-Step...</span>
+            {progress?.step && progress?.totalSteps && (
+              <span className="font-mono text-accent-400">
+                Step {progress.step}/{progress.totalSteps}
+              </span>
+            )}
+          </div>
+          <div className="h-1.5 rounded-full bg-white/[0.06] overflow-hidden">
+            <div
+              className="h-full bg-accent-500 rounded-full transition-all duration-300"
+              style={{
+                width: progress?.step && progress?.totalSteps
+                  ? `${(progress.step / progress.totalSteps) * 100}%`
+                  : '60%',
+                animation: (!progress?.step) ? 'pulse 2s ease-in-out infinite' : 'none',
+              }}
+            />
+          </div>
+          <span className="text-[10px] text-gray-600">
+            {progress?.estimateSeconds
+              ? `~${progress.estimateSeconds}s remaining`
+              : 'XL Turbo: ~20-60s depending on duration'}
+          </span>
+        </div>
+      )}
+
+      {model === 'musicgen' && (
+        <div className="space-y-1.5">
+          <span className="text-xs text-gray-400">Generating with MusicGen...</span>
+          <div className="h-1.5 rounded-full bg-white/[0.06] overflow-hidden">
+            <div
+              className="h-full bg-accent-500 rounded-full"
+              style={{
+                width: '100%',
+                animation: 'pulse 2s ease-in-out infinite',
+                opacity: 0.7,
+              }}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/components/generation/ModelSelector.jsx

@@ -0,0 +1,76 @@
+import React from 'react'
+
+const MODELS = [
+  {
+    id: 'musicgen',
+    name: 'MusicGen',
+    provider: 'META',
+    location: 'LOCAL',
+    subtitle: 'Melody-conditioned continuation',
+  },
+  {
+    id: 'ace-step',
+    name: 'ACE-Step v1.5',
+    provider: 'ACE STUDIO',
+    location: 'LOCAL',
+    subtitle: 'Seed continuation & style transfer',
+  },
+]
+
+function getTooltip(model, availability) {
+  if (!availability) return null
+  const info = availability[model.id]
+  if (!info) return null
+  if (info.status === 'offline') {
+    return model.id === 'ace-step'
+      ? 'Start ACE-Step: ./start_api_server_macos.sh'
+      : 'Model offline'
+  }
+  return null
+}
+
+export default function ModelSelector({ selectedModel, onModelChange, availability }) {
+  return (
+    <div className="flex gap-2">
+      {MODELS.map(model => {
+        const tooltip = getTooltip(model, availability)
+        const isAvailable = !tooltip
+        const isActive = selectedModel === model.id
+
+        return (
+          <button
+            key={model.id}
+            onClick={() => isAvailable && onModelChange(model.id)}
+            disabled={!isAvailable}
+            title={tooltip || model.subtitle}
+            className={`flex-1 px-3 py-2.5 rounded-lg border text-left transition-all ${
+              isActive
+                ? 'bg-accent-500/20 border-accent-500/40'
+                : isAvailable
+                  ? 'bg-white/[0.03] border-white/[0.06] hover:bg-white/[0.06] hover:border-white/[0.12]'
+                  : 'bg-white/[0.02] border-white/[0.04] opacity-40 cursor-not-allowed'
+            }`}
+          >
+            <div className="flex items-center gap-2 mb-0.5">
+              <span className={`text-sm font-medium ${isActive ? 'text-accent-400' : 'text-gray-300'}`}>
+                {model.name}
+              </span>
+            </div>
+            <div className="flex items-center gap-1.5">
+              <span className="text-[9px] uppercase tracking-wider font-medium px-1.5 py-0.5 rounded bg-white/[0.06] text-gray-500">
+                {model.provider}
+              </span>
+              <span className={`text-[9px] uppercase tracking-wider font-medium px-1.5 py-0.5 rounded ${
+                model.location === 'LOCAL'
+                  ? 'bg-emerald-500/10 text-emerald-500'
+                  : 'bg-blue-500/10 text-blue-400'
+              }`}>
+                {model.location}
+              </span>
+            </div>
+          </button>
+        )
+      })}
+    </div>
+  )
+}

frontend/src/components/generation/MusicGenParams.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import ParamSlider from './ParamSlider'
+
+export default function MusicGenParams({ params, onParamChange }) {
+  return (
+    <div className="space-y-3">
+      <div className="text-[10px] text-gray-500 bg-white/[0.02] rounded-lg px-3 py-2">
+        Prompt is auto-generated from your seed's BPM, key, and instrumentation to ensure musical coherence.
+      </div>
+
+      <ParamSlider
+        label="Duration"
+        value={params.duration}
+        min={1}
+        max={30}
+        step={1}
+        onChange={v => onParamChange('duration', v)}
+        leftLabel="1s"
+        rightLabel="30s"
+      />
+
+      {/* Seed */}
+      <div>
+        <label className="text-xs text-gray-400 font-medium mb-1 block">Seed</label>
+        <div className="flex gap-2">
+          <input
+            type="number"
+            value={params.seed}
+            onChange={e => onParamChange('seed', parseInt(e.target.value) || -1)}
+            className="flex-1 bg-surface-elevated border border-white/[0.08] rounded-lg px-3 py-1.5 text-sm text-white font-mono focus:outline-none focus:border-accent-500/40"
+          />
+          <button
+            onClick={() => onParamChange('seed', Math.floor(Math.random() * 999999))}
+            className="px-2 py-1.5 rounded-lg bg-white/[0.06] hover:bg-white/[0.1] text-sm transition-colors"
+            title="Random seed"
+          >
+            🎲
+          </button>
+        </div>
+        <span className="text-[10px] text-gray-600 mt-0.5 block">-1 = random</span>
+      </div>
+    </div>
+  )
+}

frontend/src/components/generation/ParamSlider.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+export default function ParamSlider({ label, value, min, max, step = 1, onChange, leftLabel, rightLabel, disabled }) {
+  const displayValue = step < 1 ? value.toFixed(2) : Math.round(value)
+
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center justify-between">
+        <label className="text-xs text-gray-400 font-medium">{label}</label>
+        <span className="text-xs font-mono text-accent-400">{displayValue}</span>
+      </div>
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={e => onChange(parseFloat(e.target.value))}
+        disabled={disabled}
+        className="w-full"
+      />
+      {(leftLabel || rightLabel) && (
+        <div className="flex justify-between">
+          <span className="text-[10px] text-gray-500">{leftLabel}</span>
+          <span className="text-[10px] text-gray-500">{rightLabel}</span>
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/components/generation/SeedRegionInfo.jsx

@@ -0,0 +1,65 @@
+import React from 'react'
+
+function formatTime(seconds) {
+  const m = Math.floor(seconds / 60)
+  const s = (seconds % 60).toFixed(1)
+  return `${m}:${s.padStart(4, '0')}`
+}
+
+export default function SeedRegionInfo({ seedData, regionStart, regionEnd, hasRegion, onPreviewRegion, isExtracting }) {
+  if (!hasRegion) {
+    return (
+      <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-amber-500/5 border border-amber-500/20">
+        <span className="text-amber-400 text-xs">
+          Select a region in the transport bar to use as seed audio
+        </span>
+      </div>
+    )
+  }
+
+  const duration = (regionEnd - regionStart).toFixed(1)
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2 text-xs text-gray-400">
+          <span className="font-mono text-accent-400">
+            {formatTime(regionStart)} &rarr; {formatTime(regionEnd)}
+          </span>
+          <span className="text-gray-600">({duration}s)</span>
+        </div>
+        <button
+          onClick={onPreviewRegion}
+          className="text-[10px] px-2 py-1 rounded bg-white/[0.06] hover:bg-white/[0.1] text-gray-400 hover:text-white transition-colors"
+        >
+          Preview
+        </button>
+      </div>
+
+      {seedData?.analysis && (
+        <div className="flex flex-wrap gap-2">
+          <Badge label="BPM" value={seedData.analysis.bpm} />
+          <Badge label="Key" value={`${seedData.analysis.key} ${seedData.analysis.mode}`} />
+          <Badge label="Brightness" value={seedData.analysis.brightness.toFixed(2)} />
+          <Badge label="Density" value={seedData.analysis.density.toFixed(2)} />
+        </div>
+      )}
+
+      {isExtracting && (
+        <div className="text-[10px] text-gray-500 animate-pulse">Analyzing seed...</div>
+      )}
+    </div>
+  )
+}
+
+function Badge({ label, value }) {
+  const isUnknown = value === '?' || value === '0' || value === 0 || value === '? ?'
+  return (
+    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-white/[0.04] border border-white/[0.06]">
+      <span className="text-[9px] uppercase tracking-wider text-gray-500">{label}</span>
+      <span className={`text-xs font-mono ${isUnknown ? 'text-amber-400' : 'text-accent-400'}`}>
+        {isUnknown ? '?' : value}
+      </span>
+    </span>
+  )
+}

frontend/src/components/generation/TaskTypeSelector.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+const TASK_TYPES = {
+  musicgen: [
+    { id: 'continuation', label: 'Continue' },
+  ],
+  'ace-step': [
+    { id: 'repaint', label: 'Continue' },
+    { id: 'cover', label: 'Style Transfer' },
+  ],
+}
+
+export default function TaskTypeSelector({ model, taskType, onTaskTypeChange }) {
+  const types = TASK_TYPES[model] || []
+  if (types.length <= 1) return null
+
+  return (
+    <div className="flex gap-1.5">
+      {types.map(t => (
+        <button
+          key={t.id}
+          onClick={() => onTaskTypeChange(t.id)}
+          className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
+            taskType === t.id
+              ? 'bg-accent-500/20 text-accent-400 border border-accent-500/30'
+              : 'bg-white/[0.04] text-gray-400 border border-transparent hover:bg-white/[0.06] hover:text-gray-300'
+          }`}
+        >
+          {t.label}
+        </button>
+      ))}
+    </div>
+  )
+}

frontend/src/hooks/useGeneration.js

@@ -0,0 +1,155 @@
+import { useState, useCallback, useRef, useEffect } from 'react'
+
+const DEFAULT_PARAMS = {
+  musicgen: {
+    prompt: '',
+    duration: 15,
+    seed: -1,
+  },
+  'ace-step': {
+    task_type: 'repaint',
+    caption: '',
+    lyrics: '[Instrumental]',
+    bpm: null,
+    duration: 30,
+    audio_cover_strength: 0.8,
+    model_variant: 'xl-turbo',
+    inference_steps: 15,
+    seed: -1,
+    scheduler: 'ode',
+    cfg_scale: null,
+    timestep_shift: null,
+  },
+}
+
+export function useGeneration({
+  sessionId,
+  generate,
+  extractSeed,
+  generateAceStep,
+  checkModels,
+}) {
+  const [selectedModel, setSelectedModel] = useState('musicgen')
+  const [modelParams, setModelParams] = useState(() => JSON.parse(JSON.stringify(DEFAULT_PARAMS)))
+  const [isGenerating, setIsGenerating] = useState(false)
+  const [generationResult, setGenerationResult] = useState(null)
+  const [generationProgress, setGenerationProgress] = useState(null)
+  const [modelAvailability, setModelAvailability] = useState(null)
+  const [seedData, setSeedData] = useState(null)
+  const abortRef = useRef(null)
+
+  // Check model availability and clear stale results when session changes
+  useEffect(() => {
+    // Clear previous generation when session changes
+    setGenerationResult(null)
+    setSeedData(null)
+    setGenerationProgress(null)
+
+    if (checkModels) {
+      checkModels().then(data => {
+        if (data?.models) {
+          const avail = {}
+          data.models.forEach(m => { avail[m.name] = m })
+          setModelAvailability(avail)
+        }
+      })
+    }
+  }, [sessionId, checkModels])
+
+  const setModelParam = useCallback((model, key, value) => {
+    setModelParams(prev => ({
+      ...prev,
+      [model]: { ...prev[model], [key]: value },
+    }))
+  }, [])
+
+  const resetParams = useCallback((model) => {
+    setModelParams(prev => ({
+      ...prev,
+      [model]: JSON.parse(JSON.stringify(DEFAULT_PARAMS[model])),
+    }))
+  }, [])
+
+  // Extract seed from region
+  const doExtractSeed = useCallback(async (regionStart, regionEnd) => {
+    if (!extractSeed) return null
+    const result = await extractSeed(regionStart, regionEnd)
+    if (result) {
+      setSeedData(result)
+      // Pre-fill BPM from analysis
+      if (result.analysis?.bpm) {
+        setModelParams(prev => ({
+          ...prev,
+          'ace-step': { ...prev['ace-step'], bpm: result.analysis.bpm },
+        }))
+      }
+    }
+    return result
+  }, [extractSeed])
+
+  // Start generation
+  const startGeneration = useCallback(async (regionStart, regionEnd) => {
+    setIsGenerating(true)
+    setGenerationResult(null)
+    setGenerationProgress({ status: 'starting' })
+
+    try {
+      let result = null
+
+      if (selectedModel === 'musicgen') {
+        const params = modelParams.musicgen
+        result = await generate(regionStart, regionEnd, params.duration, params.prompt || null)
+      } else if (selectedModel === 'ace-step') {
+        if (!seedData?.seed_id) {
+          // Auto-extract seed if not done
+          const extracted = await doExtractSeed(regionStart, regionEnd)
+          if (!extracted) throw new Error('Failed to extract seed')
+        }
+        const params = { ...modelParams['ace-step'] }
+        params.seed_id = seedData.seed_id
+        result = await generateAceStep(params)
+      }
+
+      if (result) {
+        setGenerationResult({ ...result, model: selectedModel })
+        setGenerationProgress({ status: 'done' })
+      } else {
+        setGenerationProgress({ status: 'error' })
+      }
+
+      return result
+    } catch (err) {
+      setGenerationProgress({ status: 'error', message: err.message })
+      return null
+    } finally {
+      setIsGenerating(false)
+    }
+  }, [selectedModel, modelParams, seedData, generate, generateAceStep, doExtractSeed])
+
+  const cancelGeneration = useCallback(() => {
+    if (abortRef.current) {
+      abortRef.current.abort()
+      abortRef.current = null
+    }
+    setIsGenerating(false)
+    setGenerationProgress(null)
+  }, [])
+
+  return {
+    selectedModel,
+    setSelectedModel,
+    modelParams,
+    setModelParam,
+    resetParams,
+    isGenerating,
+    generationResult,
+    setGenerationResult,
+    generationProgress,
+    modelAvailability,
+    seedData,
+    setSeedData,
+    doExtractSeed,
+    startGeneration,
+    cancelGeneration,
+  }
+}

frontend/src/hooks/useSession.js

@@ -245,6 +245,78 @@ export function useSession() {
     }
   }, [sessionId])
 
+  // Extract and analyze a seed from a selected region
+  const extractSeed = useCallback(async (regionStart, regionEnd) => {
+    if (!sessionId) {
+      setError('No session')
+      return null
+    }
+
+    try {
+      const response = await fetch('/api/seed/extract', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          session_id: sessionId,
+          start_time: regionStart,
+          end_time: regionEnd,
+        }),
+      })
+
+      if (!response.ok) {
+        const data = await response.json().catch(() => ({}))
+        throw new Error(data.detail || `Seed extraction failed: ${response.status}`)
+      }
+
+      return await response.json()
+    } catch (err) {
+      setError(err.message)
+      return null
+    }
+  }, [sessionId])
+
+  // Generate with ACE-Step
+  const generateAceStep = useCallback(async (params) => {
+    if (!sessionId) {
+      setError('No session')
+      return null
+    }
+
+    setLoading(true)
+    setError(null)
+
+    try {
+      const response = await fetch('/api/generate/acestep', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ session_id: sessionId, ...params }),
+      })
+
+      if (!response.ok) {
+        const data = await response.json().catch(() => ({}))
+        throw new Error(data.detail || `ACE-Step generation failed: ${response.status}`)
+      }
+
+      return await response.json()
+    } catch (err) {
+      setError(err.message)
+      return null
+    } finally {
+      setLoading(false)
+    }
+  }, [sessionId])
+
+  // Check available models
+  const checkModels = useCallback(async () => {
+    try {
+      const response = await fetch('/api/models')
+      if (response.ok) return await response.json()
+    } catch (err) {
+      console.warn('Model check failed:', err.message)
+    }
+    return null
+  }, [])
+
   return {
     sessionId,
     stems,
@@ -256,6 +328,9 @@ export function useSession() {
     detect,
     process,
     generate,
+    extractSeed,
+    generateAceStep,
+    checkModels,
     fetchChords,
     getStems,
     loadPreset,

frontend/src/index.css

@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
 
 @tailwind base;
 @tailwind components;
@@ -28,12 +29,12 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(20, 184, 166, 0.3);
+  background: rgba(240, 165, 0, 0.3);
   border-radius: 3px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: rgba(20, 184, 166, 0.5);
+  background: rgba(240, 165, 0, 0.5);
 }
 
 /* Slider styling */
@@ -54,7 +55,7 @@ input[type="range"]::-webkit-slider-thumb {
   appearance: none;
   width: 14px;
   height: 14px;
-  background: #14B8A6;
+  background: #F0A500;
   border-radius: 50%;
   cursor: pointer;
   margin-top: -5px;
@@ -85,8 +86,8 @@ input[type="range"]::-webkit-slider-thumb:hover {
 }
 
 @keyframes pulse-border {
-  0%, 100% { border-color: rgba(20, 184, 166, 0.3); }
-  50% { border-color: rgba(20, 184, 166, 0.8); }
+  0%, 100% { border-color: rgba(240, 165, 0, 0.3); }
+  50% { border-color: rgba(240, 165, 0, 0.8); }
 }
 
 .animate-pulse-border {

frontend/tailwind.config.js

@@ -13,13 +13,15 @@ export default {
           elevated: '#1C1F33',
         },
         accent: {
-          400: '#2DD4BF',
-          500: '#14B8A6',
-          600: '#0D9488',
+          300: '#FCD34D',
+          400: '#FBBF24',
+          500: '#F0A500',
+          600: '#D97706',
         }
       },
       fontFamily: {
         sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
+        mono: ['JetBrains Mono', 'Fira Code', 'ui-monospace', 'monospace'],
       },
       animation: {
         'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',