deleted the server and client side decoding so the play back is ready instantly after loading the stems

backend/routers/stems.py

@@ -1,8 +1,9 @@
 """Stems router for retrieving processed audio."""
 
 import time
+import numpy as np
 from fastapi import APIRouter, HTTPException
-from fastapi.responses import StreamingResponse
+from fastapi.responses import StreamingResponse, Response
 import io
 
 from ..models.session import get_session
@@ -90,6 +91,29 @@ async def get_stem(
             detail=f"Stem '{stem_name}' not found"
         )
 
+    # Serve raw float32 PCM — skip WAV encode/decode entirely
+    if format == "pcm":
+        audio = stem.audio
+        if audio.ndim == 2:
+            audio = np.mean(audio, axis=1).astype(np.float32)
+        else:
+            audio = np.ascontiguousarray(audio, dtype=np.float32)
+        num_frames = len(audio)
+        pcm_bytes = audio.tobytes()
+        print(f"[{stem_name}] Serving {len(pcm_bytes)/1024/1024:.1f}MB raw PCM ({num_frames} frames @ {stem.sample_rate}Hz)")
+        return Response(
+            content=pcm_bytes,
+            media_type="application/octet-stream",
+            headers={
+                "Content-Disposition": f'inline; filename="{stem_name}.pcm"',
+                "Content-Length": str(len(pcm_bytes)),
+                "X-Sample-Rate": str(stem.sample_rate),
+                "X-Channels": "1",
+                "X-Frames": str(num_frames),
+                "Access-Control-Expose-Headers": "X-Sample-Rate, X-Channels, X-Frames",
+            }
+        )
+
     start_time = time.time()
 
     # Create cache key based on stem name, processed flag, and region flag
@@ -125,6 +149,8 @@ async def get_stem(
         io.BytesIO(audio_bytes),
         media_type=media_type,
         headers={
-            "Content-Disposition": f'attachment; filename="{stem_name}.wav"'
+            "Content-Disposition": f'inline; filename="{stem_name}.wav"',
+            "Content-Length": str(len(audio_bytes)),
+            "Accept-Ranges": "bytes"
         }
     )

backend/services/music_generator.py

@@ -63,6 +63,13 @@ def generate_continuation(audio_np, sr, text_prompt, duration=15.0):
     model, processor = _load_model()
     device = _model_cache["device"]
 
+    # MusicGen expects audio at 32000 Hz — resample if needed
+    model_sr = model.config.audio_encoder.sampling_rate  # 32000
+    if sr != model_sr:
+        import librosa
+        audio_np = librosa.resample(audio_np, orig_sr=sr, target_sr=model_sr)
+        sr = model_sr
+
     # Use the last 4 seconds of input as conditioning audio (reduces repetition)
     max_conditioning = 4.0
     max_samples = int(max_conditioning * sr)

frontend/src/.backup/App.jsx.bak

@@ -0,0 +1,305 @@
+import React, { useState, useCallback, useEffect } from 'react'
+import FileUpload from './components/FileUpload'
+import AnalysisDisplay from './components/AnalysisDisplay'
+import ControlPanel from './components/ControlPanel'
+import StemMixer from './components/StemMixer'
+import TransportBar from './components/TransportBar'
+import Waveform from './components/Waveform'
+import ProcessingOverlay from './components/ProcessingOverlay'
+import { useSession } from './hooks/useSession'
+import { useAudioEngine } from './hooks/useAudioEngine'
+import { useProcessingProgress } from './hooks/useProcessingProgress'
+
+function App() {
+  const {
+    sessionId,
+    stems,
+    detection,
+    loading,
+    error,
+    upload,
+    detect,
+    process,
+    generate,
+    clearError
+  } = useSession()
+
+  const {
+    isPlaying,
+    isLoaded,
+    currentTime,
+    duration,
+    volumes,
+    solos,
+    mutes,
+    reverbs,
+    pans,
+    analyserData,
+    loadStems,
+    play,
+    pause,
+    stop,
+    seek,
+    setVolume,
+    setSolo,
+    setMute,
+    setReverb,
+    setPan,
+    resetVolumes,
+    setLoop,
+    clearBufferCache
+  } = useAudioEngine()
+
+  const [isProcessing, setIsProcessing] = useState(false)
+  const [isGenerating, setIsGenerating] = useState(false)
+  const [continuationReady, setContinuationReady] = useState(false)
+  const { progress: processingProgress, resetProgress } = useProcessingProgress(sessionId)
+
+  // Region selection state
+  const [regionStart, setRegionStart] = useState(null)
+  const [regionEnd, setRegionEnd] = useState(null)
+  // 'full' = playing full song stems, 'region' = playing processed region slice
+  const [playbackMode, setPlaybackMode] = useState('full')
+  // Store the full-song duration so we can show the region on the full-length bar
+  const [fullSongDuration, setFullSongDuration] = useState(0)
+
+  const hasRegion = regionStart !== null && regionEnd !== null
+
+  const handleUpload = useCallback(async (files) => {
+    await upload(files)
+  }, [upload])
+
+  const handleProcess = useCallback(async (semitones, targetBpm) => {
+    setIsProcessing(true)
+    resetProgress()
+
+    try {
+      const result = await process(
+        semitones,
+        targetBpm,
+        hasRegion ? regionStart : null,
+        hasRegion ? regionEnd : null
+      )
+      if (result?.success && sessionId && stems.length > 0) {
+        if (hasRegion) {
+          // Clear stale region cache (new processing produced new audio)
+          clearBufferCache('region')
+          await loadStems(sessionId, stems, { region: true })
+          setPlaybackMode('region')
+          setLoop(true)
+        } else {
+          // Clear stale full cache (new processing produced new audio)
+          clearBufferCache('full')
+          await loadStems(sessionId, stems)
+          setPlaybackMode('full')
+          setLoop(false)
+        }
+      }
+    } finally {
+      setIsProcessing(false)
+    }
+  }, [process, sessionId, stems, loadStems, resetProgress, hasRegion, regionStart, regionEnd, setLoop, clearBufferCache])
+
+  const handleGenerate = useCallback(async (prompt) => {
+    if (!hasRegion) return
+    setIsGenerating(true)
+    setContinuationReady(false)
+    resetProgress()
+
+    try {
+      const result = await generate(regionStart, regionEnd, 15.0, prompt || null)
+      if (result?.success) {
+        setContinuationReady(true)
+      }
+    } finally {
+      setIsGenerating(false)
+    }
+  }, [generate, hasRegion, regionStart, regionEnd, resetProgress])
+
+  const handlePlayFullSong = useCallback(async () => {
+    // Stop current playback
+    stop()
+    setLoop(false)
+    setPlaybackMode('full')
+
+    if (sessionId && stems.length > 0) {
+      // Reload full stems (original or previously full-processed)
+      // Setting processed=true will get processed if available, else original
+      await loadStems(sessionId, stems)
+    }
+  }, [stop, setLoop, sessionId, stems, loadStems])
+
+  const handleStemsReady = useCallback(async () => {
+    if (sessionId && stems.length > 0) {
+      console.log('=== handleStemsReady called ===')
+      console.log('Session:', sessionId)
+      console.log('Stems to load:', stems)
+      const start = performance.now()
+      try {
+        await loadStems(sessionId, stems)
+        const end = performance.now()
+        console.log(`=== handleStemsReady completed in ${(end - start).toFixed(0)}ms ===`)
+      } catch (err) {
+        console.error('Failed to load stems:', err)
+      }
+    }
+  }, [sessionId, stems, loadStems])
+
+  // Track full song duration whenever we're in full mode and duration updates
+  useEffect(() => {
+    if (playbackMode === 'full' && duration > 0) {
+      setFullSongDuration(duration)
+    }
+  }, [playbackMode, duration])
+
+  // Show upload screen if no session
+  if (!sessionId) {
+    return (
+      <div className="min-h-screen flex items-center justify-center p-4">
+        <div className="w-full max-w-2xl">
+          <h1 className="text-4xl font-bold text-center mb-2 bg-gradient-to-r from-primary-400 to-accent-400 bg-clip-text text-transparent">
+            Jam Track Studio
+          </h1>
+          <p className="text-gray-400 text-center mb-8">
+            Upload your stems, detect BPM & key, shift pitch and tempo, mix in real-time
+          </p>
+
+          <FileUpload
+            onUpload={handleUpload}
+            loading={loading}
+            error={error}
+            onClearError={clearError}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  // Show analysis and controls
+  return (
+    <div className="min-h-screen p-4 md:p-8">
+      <div className="max-w-full mx-auto px-4">
+        {/* Header */}
+        <header className="mb-6 flex items-center justify-between">
+          <h1 className="text-2xl font-bold bg-gradient-to-r from-primary-400 to-accent-400 bg-clip-text text-transparent">
+            Jam Track Studio
+          </h1>
+          <button
+            onClick={() => window.location.reload()}
+            className="text-sm text-gray-400 hover:text-white transition-colors"
+          >
+            Upload New
+          </button>
+        </header>
+
+        {/* Main content grid */}
+        <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
+          {/* Left column: Analysis + Controls */}
+          <div className="lg:col-span-3 space-y-6">
+            <AnalysisDisplay
+              detection={detection}
+              loading={loading}
+              onReady={handleStemsReady}
+            />
+
+            <ControlPanel
+              detection={detection}
+              onProcess={handleProcess}
+              isProcessing={isProcessing}
+              hasRegion={hasRegion}
+              isGenerating={isGenerating}
+              onGenerate={handleGenerate}
+              sessionId={sessionId}
+              continuationReady={continuationReady}
+            />
+
+            {/* Waveform visualization */}
+            <div className="glass rounded-xl p-4">
+              <Waveform analyserData={analyserData} isPlaying={isPlaying} />
+            </div>
+
+            {/* Transport controls */}
+            {isLoaded ? (
+              <TransportBar
+                isPlaying={isPlaying}
+                currentTime={currentTime}
+                duration={duration}
+                onPlay={play}
+                onPause={pause}
+                onStop={stop}
+                onSeek={seek}
+                regionStart={regionStart}
+                regionEnd={regionEnd}
+                onRegionChange={(start, end) => {
+                  setRegionStart(start)
+                  setRegionEnd(end)
+                }}
+                onClearRegion={() => {
+                  setRegionStart(null)
+                  setRegionEnd(null)
+                  if (playbackMode === 'region') {
+                    handlePlayFullSong()
+                  }
+                }}
+                playbackMode={playbackMode}
+                onPlayFullSong={handlePlayFullSong}
+                fullSongDuration={fullSongDuration}
+              />
+            ) : (
+              <div className="glass rounded-xl p-4 text-center">
+                <div className="flex items-center justify-center gap-3 text-gray-400">
+                  <div className="animate-spin text-2xl">⏳</div>
+                  <span>Loading audio for playback...</span>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Right column: Stem Mixer */}
+          <div className="lg:col-span-2">
+            <StemMixer
+              stems={stems}
+              volumes={volumes}
+              solos={solos}
+              mutes={mutes}
+              reverbs={reverbs}
+              pans={pans}
+              isPlaying={isPlaying}
+              onVolumeChange={setVolume}
+              onSoloToggle={setSolo}
+              onMuteToggle={setMute}
+              onReverbChange={setReverb}
+              onPanChange={setPan}
+              onReset={resetVolumes}
+            />
+          </div>
+        </div>
+
+        {/* Error display */}
+        {error && (
+          <div className="fixed bottom-4 right-4 bg-red-500/90 text-white px-4 py-3 rounded-lg shadow-lg animate-fade-in">
+            <div className="flex items-center gap-3">
+              <span>{error}</span>
+              <button
+                onClick={clearError}
+                className="text-white/80 hover:text-white"
+              >
+                &times;
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Processing overlay */}
+      {isProcessing && (
+        <ProcessingOverlay
+          stems={stems}
+          progress={processingProgress}
+        />
+      )}
+    </div>
+  )
+}
+
+export default App

frontend/src/.backup/ControlPanel.jsx.bak

@@ -0,0 +1,349 @@
+import React, { useState, useRef, useMemo, useCallback, useEffect } from 'react'
+
+// All 24 key+mode combinations
+const ALL_KEYS_WITH_MODES = [
+  'C major', 'C minor', 'C# major', 'C# minor',
+  'D major', 'D minor', 'D# major', 'D# minor',
+  'E major', 'E minor', 'F major', 'F minor',
+  'F# major', 'F# minor', 'G major', 'G minor',
+  'G# major', 'G# minor', 'A major', 'A minor',
+  'A# major', 'A# minor', 'B major', 'B minor'
+]
+
+const KEY_NAMES = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B']
+
+function formatTime(seconds) {
+  if (!seconds || !isFinite(seconds)) return '0:00'
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.floor(seconds % 60)
+  return `${mins}:${secs.toString().padStart(2, '0')}`
+}
+
+function ContinuationPlayer({ sessionId }) {
+  const audioRef = useRef(null)
+  const [playing, setPlaying] = useState(false)
+  const [cTime, setCTime] = useState(0)
+  const [dur, setDur] = useState(0)
+
+  const src = `/api/stem/${sessionId}/_continuation?processed=false&t=${Date.now()}`
+
+  const toggle = () => {
+    if (!audioRef.current) return
+    if (playing) {
+      audioRef.current.pause()
+    } else {
+      audioRef.current.play()
+    }
+  }
+
+  const handleSeek = (e) => {
+    if (!audioRef.current || !dur) return
+    const rect = e.currentTarget.getBoundingClientRect()
+    const pct = (e.clientX - rect.left) / rect.width
+    audioRef.current.currentTime = pct * dur
+  }
+
+  return (
+    <div className="mt-3 bg-green-500/10 border border-green-500/30 rounded-lg p-3">
+      <audio
+        ref={audioRef}
+        src={src}
+        preload="auto"
+        onTimeUpdate={() => setCTime(audioRef.current?.currentTime || 0)}
+        onLoadedMetadata={() => setDur(audioRef.current?.duration || 0)}
+        onPlay={() => setPlaying(true)}
+        onPause={() => setPlaying(false)}
+        onEnded={() => { setPlaying(false); setCTime(0) }}
+      />
+      <div className="flex items-center gap-3">
+        <button
+          onClick={toggle}
+          className="w-9 h-9 rounded-full bg-green-500 hover:bg-green-400 flex items-center justify-center transition-colors flex-shrink-0"
+        >
+          {playing ? (
+            <svg className="w-4 h-4 fill-white" viewBox="0 0 24 24">
+              <rect x="6" y="4" width="4" height="16" />
+              <rect x="14" y="4" width="4" height="16" />
+            </svg>
+          ) : (
+            <svg className="w-4 h-4 fill-white ml-0.5" viewBox="0 0 24 24">
+              <polygon points="5,3 19,12 5,21" />
+            </svg>
+          )}
+        </button>
+
+        <div className="flex-1 flex items-center gap-2">
+          <span className="text-xs text-gray-400 w-10 text-right font-mono">{formatTime(cTime)}</span>
+          <div
+            onClick={handleSeek}
+            className="flex-1 h-2 bg-gray-700/50 rounded-full cursor-pointer relative"
+          >
+            <div
+              className="h-full bg-green-500 rounded-full transition-all"
+              style={{ width: dur > 0 ? `${(cTime / dur) * 100}%` : '0%' }}
+            />
+          </div>
+          <span className="text-xs text-gray-400 w-10 font-mono">{formatTime(dur)}</span>
+        </div>
+      </div>
+      <p className="text-xs text-green-400/70 mt-1.5">AI Continuation (seed + generated)</p>
+    </div>
+  )
+}
+
+function ControlPanel({ detection, onProcess, isProcessing, hasRegion, isGenerating, onGenerate, sessionId, continuationReady }) {
+  const [targetKeyWithMode, setTargetKeyWithMode] = useState('C major')
+  const [targetBpm, setTargetBpm] = useState(120)
+  const [generationPrompt, setGenerationPrompt] = useState('')
+
+  // Initialize targets from detection
+  useEffect(() => {
+    if (detection) {
+      setTargetKeyWithMode(`${detection.key} ${detection.mode}`)
+      setTargetBpm(detection.bpm)
+    }
+  }, [detection])
+
+  const targetKey = targetKeyWithMode.split(' ')[0]
+
+  const semitones = useMemo(() => {
+    if (!detection || !targetKey) return 0
+    const fromIdx = KEY_NAMES.indexOf(detection.key)
+    const toIdx = KEY_NAMES.indexOf(targetKey)
+    let diff = toIdx - fromIdx
+    if (diff > 6) diff -= 12
+    if (diff < -6) diff += 12
+    return diff
+  }, [detection, targetKey])
+
+  const bpmPercent = useMemo(() => {
+    if (!detection || !targetBpm) return 0
+    return Math.round(((targetBpm - detection.bpm) / detection.bpm) * 100)
+  }, [detection, targetBpm])
+
+  // Quality indicators per spec
+  const getKeyQualityBadge = (semitones) => {
+    const abs = Math.abs(semitones)
+    if (abs <= 4) return { color: 'bg-green-500', label: 'Recommended' }
+    if (abs <= 7) return { color: 'bg-yellow-500', label: 'Some quality loss' }
+    return { color: 'bg-red-500', label: 'Significant quality loss' }
+  }
+
+  const getBpmQualityBadge = (percent) => {
+    const abs = Math.abs(percent)
+    if (abs <= 20) return { color: 'bg-green-500', label: 'Recommended' }
+    if (abs <= 40) return { color: 'bg-yellow-500', label: 'Some quality loss' }
+    return { color: 'bg-red-500', label: 'Significant quality loss' }
+  }
+
+  // Get slider background with colored zones
+  const getSliderBackground = () => {
+    // Green center (80-120%), yellow edges (60-80%, 120-140%), red extremes
+    return `linear-gradient(to right,
+      #ef4444 0%,
+      #eab308 25%,
+      #22c55e 40%,
+      #22c55e 60%,
+      #eab308 75%,
+      #ef4444 100%)`
+  }
+
+  const handleKeyShift = useCallback((shift) => {
+    const currentIdx = KEY_NAMES.indexOf(targetKey)
+    const newIdx = (currentIdx + shift + 12) % 12
+    const mode = targetKeyWithMode.split(' ')[1]
+    setTargetKeyWithMode(`${KEY_NAMES[newIdx]} ${mode}`)
+  }, [targetKey, targetKeyWithMode])
+
+  const handleApply = useCallback(() => {
+    if (!detection) return
+    const newBpm = Math.abs(targetBpm - detection.bpm) > 0.1 ? targetBpm : null
+    onProcess(semitones, newBpm)
+  }, [onProcess, semitones, targetBpm, detection])
+
+  const hasChanges = detection && (semitones !== 0 || Math.abs(targetBpm - detection.bpm) > 0.1)
+
+  if (!detection) {
+    return (
+      <div className="glass rounded-xl p-6">
+        <h2 className="text-lg font-semibold mb-4 text-white">Controls</h2>
+        <p className="text-gray-400">Waiting for analysis...</p>
+      </div>
+    )
+  }
+
+  const keyQuality = getKeyQualityBadge(semitones)
+  const bpmQuality = getBpmQualityBadge(bpmPercent)
+
+  return (
+    <div className="glass rounded-xl p-6 animate-fade-in">
+      <h2 className="text-lg font-semibold mb-6 text-white">Pitch & Tempo Controls</h2>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+        {/* Key Control */}
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <label className="text-white font-medium">Key</label>
+            {semitones !== 0 && (
+              <div className="flex items-center gap-2">
+                <span className="text-gray-300 text-sm font-mono">
+                  {semitones > 0 ? '+' : ''}{semitones} semitones
+                </span>
+                <span
+                  className={`px-2 py-0.5 rounded text-xs font-medium text-white ${keyQuality.color} cursor-help`}
+                  title="For best quality, stay within ±4 semitones of the original key"
+                >
+                  {keyQuality.label}
+                </span>
+              </div>
+            )}
+          </div>
+
+          {/* Dropdown with all 24 keys */}
+          <select
+            value={targetKeyWithMode}
+            onChange={(e) => setTargetKeyWithMode(e.target.value)}
+            className="w-full bg-gray-800/80 border border-gray-600 rounded-lg px-4 py-3 text-white text-lg focus:outline-none focus:border-purple-500 backdrop-blur"
+          >
+            {ALL_KEYS_WITH_MODES.map(key => (
+              <option key={key} value={key}>{key}</option>
+            ))}
+          </select>
+
+          {/* Quick shift buttons: -2, -1, +1, +2 */}
+          <div className="flex gap-2">
+            {[-2, -1, 1, 2].map(shift => (
+              <button
+                key={shift}
+                onClick={() => handleKeyShift(shift)}
+                className="flex-1 py-2 text-sm bg-gray-700/50 hover:bg-gray-600/50 rounded-lg transition-colors text-white border border-gray-600"
+              >
+                {shift > 0 ? '+' : ''}{shift}
+              </button>
+            ))}
+          </div>
+
+          <p className="text-xs text-gray-500">
+            Original: {detection.key} {detection.mode}
+          </p>
+        </div>
+
+        {/* BPM Control */}
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <label className="text-white font-medium">BPM</label>
+            {bpmPercent !== 0 && (
+              <div className="flex items-center gap-2">
+                <span className="text-gray-300 text-sm font-mono">
+                  {bpmPercent > 0 ? '+' : ''}{bpmPercent}%
+                </span>
+                <span
+                  className={`px-2 py-0.5 rounded text-xs font-medium text-white ${bpmQuality.color} cursor-help`}
+                  title="For best quality, stay within ±20% of the original BPM"
+                >
+                  {bpmQuality.label}
+                </span>
+              </div>
+            )}
+          </div>
+
+          {/* Number input */}
+          <input
+            type="number"
+            value={Math.round(targetBpm)}
+            onChange={(e) => setTargetBpm(parseFloat(e.target.value) || detection.bpm)}
+            min={Math.round(detection.bpm * 0.5)}
+            max={Math.round(detection.bpm * 2)}
+            className="w-full bg-gray-800/80 border border-gray-600 rounded-lg px-4 py-3 text-white text-lg focus:outline-none focus:border-purple-500 backdrop-blur"
+          />
+
+          {/* Slider with colored zones (50% to 200%) */}
+          <div className="relative">
+            <div
+              className="absolute inset-0 h-2 rounded-full top-1/2 -translate-y-1/2 pointer-events-none"
+              style={{ background: getSliderBackground() }}
+            />
+            <input
+              type="range"
+              value={targetBpm}
+              onChange={(e) => setTargetBpm(parseFloat(e.target.value))}
+              min={detection.bpm * 0.5}
+              max={detection.bpm * 2}
+              step={1}
+              className="relative w-full h-2 bg-transparent rounded-lg appearance-none cursor-pointer z-10"
+              style={{ WebkitAppearance: 'none' }}
+            />
+          </div>
+          <div className="flex justify-between text-xs text-gray-500">
+            <span>50%</span>
+            <span>100%</span>
+            <span>200%</span>
+          </div>
+
+          {/* Quick BPM buttons: -10, -5, +5, +10 */}
+          <div className="flex gap-2">
+            {[-10, -5, 5, 10].map(shift => (
+              <button
+                key={shift}
+                onClick={() => setTargetBpm(Math.max(20, targetBpm + shift))}
+                className="flex-1 py-2 text-sm bg-gray-700/50 hover:bg-gray-600/50 rounded-lg transition-colors text-white border border-gray-600"
+              >
+                {shift > 0 ? '+' : ''}{shift}
+              </button>
+            ))}
+          </div>
+
+          <p className="text-xs text-gray-500">
+            Original: {detection.bpm.toFixed(1)} BPM
+          </p>
+        </div>
+      </div>
+
+      {/* Apply Changes button */}
+      <button
+        onClick={handleApply}
+        disabled={!hasChanges || isProcessing}
+        className={`w-full mt-8 py-4 rounded-xl font-semibold text-lg transition-all ${
+          !hasChanges || isProcessing
+            ? 'bg-gray-700 text-gray-500 cursor-not-allowed'
+            : 'bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-400 hover:to-purple-400 text-white shadow-lg hover:shadow-purple-500/25'
+        }`}
+      >
+        {isProcessing ? 'Processing...' : hasChanges ? (hasRegion ? 'Apply to Selection' : 'Apply Changes') : 'No Changes'}
+      </button>
+
+      {/* AI Continuation — visible when region is selected */}
+      {hasRegion && (
+        <div className="mt-6 pt-6 border-t border-gray-700/50">
+          <h3 className="text-sm font-semibold text-white mb-3">AI Continuation</h3>
+          <input
+            type="text"
+            value={generationPrompt}
+            onChange={(e) => setGenerationPrompt(e.target.value)}
+            placeholder="Describe the continuation style (optional)..."
+            disabled={isGenerating || isProcessing}
+            className="w-full bg-gray-800/80 border border-gray-600 rounded-lg px-4 py-2 text-white text-sm focus:outline-none focus:border-green-500 backdrop-blur placeholder-gray-500 mb-3"
+          />
+          <button
+            onClick={() => onGenerate(generationPrompt)}
+            disabled={isGenerating || isProcessing}
+            className={`w-full py-3 rounded-xl font-semibold text-sm transition-all ${
+              isGenerating || isProcessing
+                ? 'bg-gray-700 text-gray-500 cursor-not-allowed'
+                : 'bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-400 hover:to-emerald-400 text-white shadow-lg hover:shadow-green-500/25'
+            }`}
+          >
+            {isGenerating ? 'Generating...' : 'Generate AI Continuation (15s)'}
+          </button>
+
+          {/* Dedicated continuation player */}
+          {continuationReady && sessionId && (
+            <ContinuationPlayer sessionId={sessionId} />
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ControlPanel

frontend/src/.backup/useSession.js.bak

@@ -0,0 +1,201 @@
+import { useState, useCallback } from 'react'
+
+export function useSession() {
+  const [sessionId, setSessionId] = useState(null)
+  const [stems, setStems] = useState([])
+  const [detection, setDetection] = useState(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(null)
+
+  const clearError = useCallback(() => {
+    setError(null)
+  }, [])
+
+  // Upload files and automatically run detection
+  const upload = useCallback(async (formData) => {
+    setLoading(true)
+    setError(null)
+
+    try {
+      // Step 1: Upload files (formData already prepared by FileUpload component)
+      const uploadResponse = await fetch('/api/upload', {
+        method: 'POST',
+        body: formData
+      })
+
+      if (!uploadResponse.ok) {
+        const data = await uploadResponse.json().catch(() => ({}))
+        throw new Error(data.detail || `Upload failed: ${uploadResponse.status}`)
+      }
+
+      const uploadData = await uploadResponse.json()
+      console.log('Upload response:', uploadData)
+
+      setSessionId(uploadData.session_id)
+      setStems(uploadData.stems)
+
+      // Step 2: Automatically run detection with the session_id we just got
+      const detectResponse = await fetch(`/api/detect/${uploadData.session_id}`, {
+        method: 'POST'
+      })
+
+      if (!detectResponse.ok) {
+        const data = await detectResponse.json().catch(() => ({}))
+        throw new Error(data.detail || `Detection failed: ${detectResponse.status}`)
+      }
+
+      const detectData = await detectResponse.json()
+      console.log('Detection response:', detectData)
+      setDetection(detectData)
+
+      return { upload: uploadData, detection: detectData }
+    } catch (err) {
+      console.error('Error:', err)
+      setError(err.message)
+      return null
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  // Manual detect (if needed separately)
+  const detect = useCallback(async (sid = null) => {
+    const id = sid || sessionId
+    if (!id) {
+      setError('No session to detect')
+      return null
+    }
+
+    setLoading(true)
+    setError(null)
+
+    try {
+      const response = await fetch(`/api/detect/${id}`, {
+        method: 'POST'
+      })
+
+      if (!response.ok) {
+        const data = await response.json().catch(() => ({}))
+        throw new Error(data.detail || `Detection failed: ${response.status}`)
+      }
+
+      const data = await response.json()
+      setDetection(data)
+      return data
+    } catch (err) {
+      setError(err.message)
+      return null
+    } finally {
+      setLoading(false)
+    }
+  }, [sessionId])
+
+  const process = useCallback(async (semitones, targetBpm = null, regionStart = null, regionEnd = null) => {
+    if (!sessionId) {
+      setError('No session to process')
+      return null
+    }
+
+    setLoading(true)
+    setError(null)
+
+    try {
+      const body = { semitones, target_bpm: targetBpm }
+      if (regionStart !== null && regionEnd !== null) {
+        body.region_start = regionStart
+        body.region_end = regionEnd
+      }
+
+      const response = await fetch(`/api/process/${sessionId}`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(body)
+      })
+
+      if (!response.ok) {
+        const data = await response.json().catch(() => ({}))
+        throw new Error(data.detail || `Processing failed: ${response.status}`)
+      }
+
+      const data = await response.json()
+      return data
+    } catch (err) {
+      setError(err.message)
+      return null
+    } finally {
+      setLoading(false)
+    }
+  }, [sessionId])
+
+  const getStems = useCallback(async () => {
+    if (!sessionId) return null
+
+    try {
+      const response = await fetch(`/api/stems/${sessionId}`)
+
+      if (!response.ok) {
+        throw new Error('Failed to get stems')
+      }
+
+      const data = await response.json()
+      return data
+    } catch (err) {
+      setError(err.message)
+      return null
+    }
+  }, [sessionId])
+
+  const generate = useCallback(async (regionStart, regionEnd, duration = 15.0, prompt = null) => {
+    if (!sessionId) {
+      setError('No session to generate')
+      return null
+    }
+
+    setLoading(true)
+    setError(null)
+
+    try {
+      const body = { region_start: regionStart, region_end: regionEnd, duration }
+      if (prompt) {
+        body.prompt = prompt
+      }
+
+      const response = await fetch(`/api/generate/${sessionId}`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(body)
+      })
+
+      if (!response.ok) {
+        const data = await response.json().catch(() => ({}))
+        throw new Error(data.detail || `Generation failed: ${response.status}`)
+      }
+
+      const data = await response.json()
+      return data
+    } catch (err) {
+      setError(err.message)
+      return null
+    } finally {
+      setLoading(false)
+    }
+  }, [sessionId])
+
+  return {
+    sessionId,
+    stems,
+    detection,
+    loading,
+    error,
+    upload,
+    detect,
+    process,
+    generate,
+    getStems,
+    clearError
+  }
+}

frontend/src/App.jsx

@@ -20,6 +20,7 @@ function App() {
     upload,
     detect,
     process,
+    generate,
     clearError
   } = useSession()
 
@@ -50,6 +51,8 @@ function App() {
   } = useAudioEngine()
 
   const [isProcessing, setIsProcessing] = useState(false)
+  const [isGenerating, setIsGenerating] = useState(false)
+  const [continuationReady, setContinuationReady] = useState(false)
   const { progress: processingProgress, resetProgress } = useProcessingProgress(sessionId)
 
   // Region selection state
@@ -97,6 +100,22 @@ function App() {
     }
   }, [process, sessionId, stems, loadStems, resetProgress, hasRegion, regionStart, regionEnd, setLoop, clearBufferCache])
 
+  const handleGenerate = useCallback(async (prompt) => {
+    if (!hasRegion) return
+    setIsGenerating(true)
+    setContinuationReady(false)
+    resetProgress()
+
+    try {
+      const result = await generate(regionStart, regionEnd, 15.0, prompt || null)
+      if (result?.success) {
+        setContinuationReady(true)
+      }
+    } finally {
+      setIsGenerating(false)
+    }
+  }, [generate, hasRegion, regionStart, regionEnd, resetProgress])
+
   const handlePlayFullSong = useCallback(async () => {
     // Stop current playback
     stop()
@@ -188,6 +207,10 @@ function App() {
               onProcess={handleProcess}
               isProcessing={isProcessing}
               hasRegion={hasRegion}
+              isGenerating={isGenerating}
+              onGenerate={handleGenerate}
+              sessionId={sessionId}
+              continuationReady={continuationReady}
             />
 
             {/* Waveform visualization */}

frontend/src/components/ControlPanel.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useCallback, useEffect } from 'react'
+import React, { useState, useRef, useMemo, useCallback, useEffect } from 'react'
 
 // All 24 key+mode combinations
 const ALL_KEYS_WITH_MODES = [
@@ -12,9 +12,128 @@ const ALL_KEYS_WITH_MODES = [
 
 const KEY_NAMES = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B']
 
-function ControlPanel({ detection, onProcess, isProcessing, hasRegion }) {
+function formatTime(seconds) {
+  if (!seconds || !isFinite(seconds)) return '0:00'
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.floor(seconds % 60)
+  return `${mins}:${secs.toString().padStart(2, '0')}`
+}
+
+function ContinuationPlayer({ sessionId }) {
+  const audioRef = useRef(null)
+  const rafRef = useRef(null)
+  const [playing, setPlaying] = useState(false)
+  const [cTime, setCTime] = useState(0)
+  const [dur, setDur] = useState(0)
+
+  // Stable URL — only changes when sessionId changes, not on every render
+  const src = useMemo(
+    () => `/api/stem/${sessionId}/_continuation?processed=false&t=${Date.now()}`,
+    [sessionId]
+  )
+
+  // Try to read duration from the audio element (WAV streams may delay reporting it)
+  const tryReadDuration = useCallback(() => {
+    const audio = audioRef.current
+    if (!audio) return
+    const d = audio.duration
+    if (d && isFinite(d) && d > 0) {
+      setDur(d)
+    }
+  }, [])
+
+  // Smooth animation loop — reads currentTime every frame while playing
+  useEffect(() => {
+    if (!playing) {
+      if (rafRef.current) cancelAnimationFrame(rafRef.current)
+      return
+    }
+
+    const tick = () => {
+      if (audioRef.current) {
+        setCTime(audioRef.current.currentTime)
+        tryReadDuration()
+      }
+      rafRef.current = requestAnimationFrame(tick)
+    }
+    rafRef.current = requestAnimationFrame(tick)
+
+    return () => {
+      if (rafRef.current) cancelAnimationFrame(rafRef.current)
+    }
+  }, [playing, tryReadDuration])
+
+  const toggle = () => {
+    if (!audioRef.current) return
+    if (playing) {
+      audioRef.current.pause()
+    } else {
+      audioRef.current.play()
+    }
+  }
+
+  const handleSeek = (e) => {
+    const d = dur || audioRef.current?.duration
+    if (!audioRef.current || !d || !isFinite(d)) return
+    const rect = e.currentTarget.getBoundingClientRect()
+    const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
+    audioRef.current.currentTime = pct * d
+    setCTime(audioRef.current.currentTime)
+  }
+
+  return (
+    <div className="mt-3 bg-green-500/10 border border-green-500/30 rounded-lg p-3">
+      <audio
+        ref={audioRef}
+        src={src}
+        preload="auto"
+        onLoadedMetadata={tryReadDuration}
+        onDurationChange={tryReadDuration}
+        onCanPlayThrough={tryReadDuration}
+        onPlay={() => setPlaying(true)}
+        onPause={() => setPlaying(false)}
+        onEnded={() => { setPlaying(false); setCTime(0) }}
+      />
+      <div className="flex items-center gap-3">
+        <button
+          onClick={toggle}
+          className="w-9 h-9 rounded-full bg-green-500 hover:bg-green-400 flex items-center justify-center transition-colors flex-shrink-0"
+        >
+          {playing ? (
+            <svg className="w-4 h-4 fill-white" viewBox="0 0 24 24">
+              <rect x="6" y="4" width="4" height="16" />
+              <rect x="14" y="4" width="4" height="16" />
+            </svg>
+          ) : (
+            <svg className="w-4 h-4 fill-white ml-0.5" viewBox="0 0 24 24">
+              <polygon points="5,3 19,12 5,21" />
+            </svg>
+          )}
+        </button>
+
+        <div className="flex-1 flex items-center gap-2">
+          <span className="text-xs text-gray-400 w-10 text-right font-mono">{formatTime(cTime)}</span>
+          <div
+            onClick={handleSeek}
+            className="flex-1 h-2 bg-gray-700/50 rounded-full cursor-pointer relative"
+          >
+            <div
+              className="h-full bg-green-500 rounded-full"
+              style={{ width: dur > 0 ? `${(cTime / dur) * 100}%` : '0%' }}
+            />
+          </div>
+          <span className="text-xs text-gray-400 w-10 font-mono">{formatTime(dur)}</span>
+        </div>
+      </div>
+      <p className="text-xs text-green-400/70 mt-1.5">AI Continuation (seed + generated)</p>
+    </div>
+  )
+}
+
+function ControlPanel({ detection, onProcess, isProcessing, hasRegion, isGenerating, onGenerate, sessionId, continuationReady }) {
   const [targetKeyWithMode, setTargetKeyWithMode] = useState('C major')
   const [targetBpm, setTargetBpm] = useState(120)
+  const [generationPrompt, setGenerationPrompt] = useState('')
 
   // Initialize targets from detection
   useEffect(() => {
@@ -231,6 +350,37 @@ function ControlPanel({ detection, onProcess, isProcessing, hasRegion }) {
       >
         {isProcessing ? 'Processing...' : hasChanges ? (hasRegion ? 'Apply to Selection' : 'Apply Changes') : 'No Changes'}
       </button>
+
+      {/* AI Continuation — visible when region is selected */}
+      {hasRegion && (
+        <div className="mt-6 pt-6 border-t border-gray-700/50">
+          <h3 className="text-sm font-semibold text-white mb-3">AI Continuation</h3>
+          <input
+            type="text"
+            value={generationPrompt}
+            onChange={(e) => setGenerationPrompt(e.target.value)}
+            placeholder="Describe the continuation style (optional)..."
+            disabled={isGenerating || isProcessing}
+            className="w-full bg-gray-800/80 border border-gray-600 rounded-lg px-4 py-2 text-white text-sm focus:outline-none focus:border-green-500 backdrop-blur placeholder-gray-500 mb-3"
+          />
+          <button
+            onClick={() => onGenerate(generationPrompt)}
+            disabled={isGenerating || isProcessing}
+            className={`w-full py-3 rounded-xl font-semibold text-sm transition-all ${
+              isGenerating || isProcessing
+                ? 'bg-gray-700 text-gray-500 cursor-not-allowed'
+                : 'bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-400 hover:to-emerald-400 text-white shadow-lg hover:shadow-green-500/25'
+            }`}
+          >
+            {isGenerating ? 'Generating...' : 'Generate AI Continuation (15s)'}
+          </button>
+
+          {/* Dedicated continuation player */}
+          {continuationReady && sessionId && (
+            <ContinuationPlayer sessionId={sessionId} />
+          )}
+        </div>
+      )}
     </div>
   )
 }

frontend/src/hooks/useAudioEngine.js

@@ -123,30 +123,36 @@ export function useAudioEngine() {
         return { stem, audioBuffer: bufferCacheRef.current[cacheKey] }
       }
 
-      // Cache miss — fetch and decode
+      // Cache miss — fetch raw PCM and construct AudioBuffer directly (no decodeAudioData)
       const stemStart = performance.now()
       try {
-        console.log(`[${stem}] CACHE MISS — fetching...`)
+        console.log(`[${stem}] CACHE MISS — fetching PCM...`)
         const fetchStart = performance.now()
         const regionParam = region ? '&region=true' : ''
-        let response = await fetch(`/api/stem/${sessionId}/${stem}?processed=true${regionParam}`)
+        let response = await fetch(`/api/stem/${sessionId}/${stem}?processed=true${regionParam}&format=pcm`)
         if (!response.ok) {
-          response = await fetch(`/api/stem/${sessionId}/${stem}?processed=false`)
+          response = await fetch(`/api/stem/${sessionId}/${stem}?processed=false&format=pcm`)
         }
         const fetchEnd = performance.now()
         console.log(`[${stem}] Fetch completed in ${(fetchEnd - fetchStart).toFixed(0)}ms`)
 
         if (response.ok) {
+          const sampleRate = parseInt(response.headers.get('X-Sample-Rate'))
+          const numChannels = parseInt(response.headers.get('X-Channels'))
+          const numFrames = parseInt(response.headers.get('X-Frames'))
+
           const bufferStart = performance.now()
           const arrayBuffer = await response.arrayBuffer()
           const bufferEnd = performance.now()
           const sizeMB = (arrayBuffer.byteLength / 1024 / 1024).toFixed(2)
           console.log(`[${stem}] ArrayBuffer: ${sizeMB}MB in ${(bufferEnd - bufferStart).toFixed(0)}ms`)
 
-          const decodeStart = performance.now()
-          const audioBuffer = await ctx.decodeAudioData(arrayBuffer)
-          const decodeEnd = performance.now()
-          console.log(`[${stem}] Decode: ${audioBuffer.duration.toFixed(1)}s audio in ${(decodeEnd - decodeStart).toFixed(0)}ms`)
+          const constructStart = performance.now()
+          const float32 = new Float32Array(arrayBuffer)
+          const audioBuffer = ctx.createBuffer(numChannels, numFrames, sampleRate)
+          audioBuffer.copyToChannel(float32, 0)
+          const constructEnd = performance.now()
+          console.log(`[${stem}] Constructed ${audioBuffer.duration.toFixed(1)}s AudioBuffer in ${(constructEnd - constructStart).toFixed(0)}ms`)
 
           // Store in persistent cache
           bufferCacheRef.current[cacheKey] = audioBuffer

frontend/src/hooks/useSession.js

@@ -147,6 +147,44 @@ export function useSession() {
     }
   }, [sessionId])
 
+  const generate = useCallback(async (regionStart, regionEnd, duration = 15.0, prompt = null) => {
+    if (!sessionId) {
+      setError('No session to generate')
+      return null
+    }
+
+    setLoading(true)
+    setError(null)
+
+    try {
+      const body = { region_start: regionStart, region_end: regionEnd, duration }
+      if (prompt) {
+        body.prompt = prompt
+      }
+
+      const response = await fetch(`/api/generate/${sessionId}`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(body)
+      })
+
+      if (!response.ok) {
+        const data = await response.json().catch(() => ({}))
+        throw new Error(data.detail || `Generation failed: ${response.status}`)
+      }
+
+      const data = await response.json()
+      return data
+    } catch (err) {
+      setError(err.message)
+      return null
+    } finally {
+      setLoading(false)
+    }
+  }, [sessionId])
+
   return {
     sessionId,
     stems,
@@ -156,6 +194,7 @@ export function useSession() {
     upload,
     detect,
     process,
+    generate,
     getStems,
     clearError
   }