karaoke-gen 0.71.42__py3-none-any.whl → 0.75.53__py3-none-any.whl

karaoke_gen/instrumental_review/server.py

@@ -10,16 +10,22 @@ Similar pattern to LyricsTranscriber's ReviewServer.
 
 import logging
 import os
+from pathlib import Path
+import socket
 import threading
 import webbrowser
 from typing import List, Optional
 
-from fastapi import FastAPI, HTTPException
+from fastapi import FastAPI, HTTPException, UploadFile, File
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import FileResponse, HTMLResponse
 from pydantic import BaseModel
+import shutil
+import tempfile
 import uvicorn
 
+from pydub import AudioSegment
+
 from karaoke_gen.instrumental_review import (
     AnalysisResult,
     AudioAnalyzer,
@@ -63,6 +69,7 @@ class InstrumentalReviewServer:
         backing_vocals_path: str,
         clean_instrumental_path: str,
         with_backing_path: Optional[str] = None,
+        original_audio_path: Optional[str] = None,
     ):
         """
         Initialize the review server.
@@ -75,6 +82,7 @@ class InstrumentalReviewServer:
             backing_vocals_path: Path to the backing vocals audio file
             clean_instrumental_path: Path to the clean instrumental audio file
             with_backing_path: Path to the instrumental with backing vocals
+            original_audio_path: Path to the original audio file (with vocals)
         """
         self.output_dir = output_dir
         self.base_name = base_name
@@ -83,7 +91,9 @@ class InstrumentalReviewServer:
         self.backing_vocals_path = backing_vocals_path
         self.clean_instrumental_path = clean_instrumental_path
         self.with_backing_path = with_backing_path
+        self.original_audio_path = original_audio_path
         self.custom_instrumental_path: Optional[str] = None
+        self.uploaded_instrumental_path: Optional[str] = None
         self.selection: Optional[str] = None
         
         self._app: Optional[FastAPI] = None
@@ -148,9 +158,13 @@ class InstrumentalReviewServer:
                     "backing_vocals": "/api/audio/backing_vocals" if self.backing_vocals_path else None,
                     "with_backing": "/api/audio/with_backing" if self.with_backing_path else None,
                     "custom_instrumental": "/api/audio/custom_instrumental" if self.custom_instrumental_path else None,
+                    "uploaded_instrumental": "/api/audio/uploaded_instrumental" if self.uploaded_instrumental_path else None,
+                    "original": "/api/audio/original" if self.original_audio_path else None,
                 },
                 "waveform_url": "/api/waveform" if self.waveform_path else None,
                 "has_custom_instrumental": self.custom_instrumental_path is not None,
+                "has_uploaded_instrumental": self.uploaded_instrumental_path is not None,
+                "has_original": self.original_audio_path is not None,
             }
         
         @app.get("/api/jobs/local/waveform-data")
@@ -182,6 +196,8 @@ class InstrumentalReviewServer:
                 "backing_vocals": self.backing_vocals_path,
                 "with_backing": self.with_backing_path,
                 "custom_instrumental": self.custom_instrumental_path,
+                "uploaded_instrumental": self.uploaded_instrumental_path,
+                "original": self.original_audio_path,
             }
             
             audio_path = path_map.get(stem_type)
@@ -249,10 +265,72 @@ class InstrumentalReviewServer:
                 logger.exception(f"Error creating custom instrumental: {e}")
                 raise HTTPException(status_code=500, detail=str(e)) from e
         
+        @app.post("/api/jobs/local/upload-instrumental")
+        async def upload_instrumental(file: UploadFile = File(...)):
+            """Upload a custom instrumental audio file."""
+            # Validate file type
+            allowed_extensions = {".flac", ".mp3", ".wav", ".m4a", ".ogg"}
+            ext = os.path.splitext(file.filename or "")[1].lower()
+            if ext not in allowed_extensions:
+                raise HTTPException(
+                    status_code=400, 
+                    detail=f"Invalid file type. Allowed: {', '.join(allowed_extensions)}"
+                )
+            
+            tmp_path = None
+            file_moved = False
+            try:
+                # Save to temp file first to validate
+                with tempfile.NamedTemporaryFile(delete=False, suffix=ext) as tmp:
+                    shutil.copyfileobj(file.file, tmp)
+                    tmp_path = tmp.name
+                
+                # Load and check duration
+                uploaded_audio = AudioSegment.from_file(tmp_path)
+                uploaded_duration = len(uploaded_audio) / 1000.0  # ms to seconds
+                
+                expected_duration = self.analysis.total_duration_seconds
+                duration_diff = abs(uploaded_duration - expected_duration)
+                
+                if duration_diff > 0.5:
+                    raise HTTPException(
+                        status_code=400,
+                        detail=f"Duration mismatch: uploaded file is {uploaded_duration:.2f}s, "
+                               f"expected {expected_duration:.2f}s (±0.5s allowed)"
+                    )
+                
+                # Move to final location
+                output_path = os.path.join(
+                    self.output_dir,
+                    f"{self.base_name} (Instrumental Uploaded){ext}"
+                )
+                shutil.move(tmp_path, output_path)
+                file_moved = True
+                self.uploaded_instrumental_path = output_path
+                
+                return {
+                    "status": "success",
+                    "uploaded_instrumental_url": "/api/audio/uploaded_instrumental",
+                    "duration_seconds": uploaded_duration,
+                    "filename": file.filename,
+                }
+            except HTTPException:
+                raise
+            except Exception as e:
+                logger.exception(f"Error uploading instrumental: {e}")
+                raise HTTPException(status_code=500, detail=str(e)) from e
+            finally:
+                # Clean up temp file if it wasn't moved
+                if tmp_path and not file_moved and os.path.exists(tmp_path):
+                    try:
+                        os.unlink(tmp_path)
+                    except OSError:
+                        pass  # Best effort cleanup
+        
         @app.post("/api/jobs/local/select-instrumental")
         async def select_instrumental(request: SelectionRequest):
             """Submit instrumental selection."""
-            if request.selection not in ("clean", "with_backing", "custom"):
+            if request.selection not in ("clean", "with_backing", "custom", "uploaded", "original"):
                 raise HTTPException(status_code=400, detail=f"Invalid selection: {request.selection}")
             
             self.selection = request.selection
@@ -260,883 +338,95 @@ class InstrumentalReviewServer:
             
             return {"status": "success", "selection": request.selection}
     
+    @staticmethod
+    def _get_static_dir() -> Path:
+        """Get the path to the static assets directory."""
+        return Path(__file__).parent / "static"
+    
     def _get_frontend_html(self) -> str:
-        """Return the complete frontend HTML with all features."""
-        return '''<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Instrumental Review</title>
-    <style>
-        :root {
-            --bg: #0a0a0a;
-            --card: #18181b;
-            --card-border: #27272a;
-            --text: #fafafa;
-            --text-muted: #a1a1aa;
-            --primary: #3b82f6;
-            --primary-hover: #2563eb;
-            --secondary: #27272a;
-            --secondary-hover: #3f3f46;
-            --success: #22c55e;
-            --warning: #eab308;
-            --danger: #ef4444;
-            --badge-bg: #27272a;
-        }
-        
-        * { box-sizing: border-box; margin: 0; padding: 0; }
-        
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: var(--bg);
-            color: var(--text);
-            line-height: 1.6;
-            min-height: 100vh;
-        }
-        
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 2rem;
-        }
-        
-        header {
-            background: var(--card);
-            border-bottom: 1px solid var(--card-border);
-            padding: 1rem 2rem;
-            margin-bottom: 2rem;
-        }
-        
-        header h1 {
-            font-size: 1.25rem;
-            font-weight: 600;
-        }
-        
-        .page-title {
-            font-size: 1.875rem;
-            font-weight: 700;
-            margin-bottom: 0.5rem;
-        }
-        
-        .page-subtitle {
-            color: var(--text-muted);
-            margin-bottom: 2rem;
-        }
-        
-        .card {
-            background: var(--card);
-            border: 1px solid var(--card-border);
-            border-radius: 0.5rem;
-            margin-bottom: 1.5rem;
-        }
-        
-        .card-header {
-            padding: 1.25rem 1.5rem;
-            border-bottom: 1px solid var(--card-border);
-        }
-        
-        .card-title {
-            font-size: 1.125rem;
-            font-weight: 600;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-        
-        .card-description {
-            color: var(--text-muted);
-            font-size: 0.875rem;
-            margin-top: 0.25rem;
-        }
-        
-        .card-content {
-            padding: 1.5rem;
-        }
-        
-        .badge {
-            display: inline-flex;
-            align-items: center;
-            padding: 0.25rem 0.75rem;
-            border-radius: 9999px;
-            font-size: 0.75rem;
-            font-weight: 500;
-            background: var(--badge-bg);
-            border: 1px solid var(--card-border);
-        }
-        
-        .badge-success { background: rgba(34, 197, 94, 0.2); color: var(--success); border-color: var(--success); }
-        .badge-warning { background: rgba(234, 179, 8, 0.2); color: var(--warning); border-color: var(--warning); }
-        
-        .flex { display: flex; }
-        .flex-wrap { flex-wrap: wrap; }
-        .gap-2 { gap: 0.5rem; }
-        .gap-4 { gap: 1rem; }
-        .items-center { align-items: center; }
-        .justify-between { justify-content: space-between; }
-        
-        .grid { display: grid; }
-        .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
-        @media (max-width: 1024px) { .grid-cols-2 { grid-template-columns: 1fr; } }
-        
-        .btn {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            padding: 0.5rem 1rem;
-            border-radius: 0.375rem;
-            font-size: 0.875rem;
-            font-weight: 500;
-            cursor: pointer;
-            border: none;
-            transition: background 0.2s;
-        }
-        
-        .btn-primary {
-            background: var(--primary);
-            color: white;
-        }
-        .btn-primary:hover { background: var(--primary-hover); }
-        .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
-        
-        .btn-secondary {
-            background: var(--secondary);
-            color: var(--text);
-        }
-        .btn-secondary:hover { background: var(--secondary-hover); }
-        
-        .btn-outline {
-            background: transparent;
-            border: 1px solid var(--card-border);
-            color: var(--text);
-        }
-        .btn-outline:hover { background: var(--secondary); }
-        .btn-outline.active { background: var(--primary); border-color: var(--primary); }
-        
-        .btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
-        .btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; }
-        
-        .btn-danger { background: var(--danger); color: white; }
-        .btn-success { background: var(--success); color: white; }
-        
-        /* Waveform */
-        #waveform-container {
-            position: relative;
-            background: #1a1a2e;
-            border-radius: 0.5rem;
-            overflow: hidden;
-        }
-        
-        #waveform-canvas {
-            display: block;
-            width: 100%;
-            cursor: crosshair;
-        }
-        
-        .time-axis {
-            display: flex;
-            justify-content: space-between;
-            padding: 0.5rem 1rem;
-            font-size: 0.75rem;
-            color: var(--text-muted);
-            background: rgba(0,0,0,0.3);
-        }
-        
-        /* Audio Player */
-        .audio-player {
-            background: var(--secondary);
-            padding: 1rem;
-            border-radius: 0.5rem;
-        }
-        
-        .audio-player audio {
-            width: 100%;
-        }
-        
-        .audio-label {
-            font-size: 0.875rem;
-            color: var(--text-muted);
-            margin-bottom: 0.5rem;
-        }
-        
-        /* Region List */
-        .region-list {
-            max-height: 200px;
-            overflow-y: auto;
-        }
-        
-        .region-item {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0.75rem;
-            background: var(--secondary);
-            border-radius: 0.375rem;
-            margin-bottom: 0.5rem;
-        }
-        
-        .region-item:last-child { margin-bottom: 0; }
-        
-        /* Radio Group */
-        .radio-group { display: flex; flex-direction: column; gap: 1rem; }
-        
-        .radio-item {
-            display: flex;
-            align-items: flex-start;
-            gap: 0.75rem;
-            padding: 1rem;
-            background: var(--secondary);
-            border-radius: 0.5rem;
-            cursor: pointer;
-            border: 2px solid transparent;
-            transition: border-color 0.2s;
-        }
-        
-        .radio-item:hover { border-color: var(--card-border); }
-        .radio-item.selected { border-color: var(--primary); }
-        
-        .radio-item input { margin-top: 0.25rem; }
-        .radio-item-content { flex: 1; }
-        .radio-item-title { font-weight: 500; }
-        .radio-item-desc { font-size: 0.875rem; color: var(--text-muted); }
-        
-        /* Alert */
-        .alert {
-            padding: 1rem;
-            border-radius: 0.5rem;
-            margin-bottom: 1.5rem;
-        }
-        
-        .alert-error {
-            background: rgba(239, 68, 68, 0.2);
-            border: 1px solid var(--danger);
-            color: var(--danger);
-        }
-        
-        .alert-success {
-            background: rgba(34, 197, 94, 0.2);
-            border: 1px solid var(--success);
-            color: var(--success);
-        }
-        
-        /* Loading */
-        .loading {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 4rem;
-        }
-        
-        .spinner {
-            width: 2rem;
-            height: 2rem;
-            border: 3px solid var(--card-border);
-            border-top-color: var(--primary);
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-        }
-        
-        @keyframes spin { to { transform: rotate(360deg); } }
-        
-        /* Segment markers */
-        .segment-marker {
-            position: absolute;
-            background: rgba(234, 179, 8, 0.3);
-            border-left: 1px solid var(--warning);
-            border-right: 1px solid var(--warning);
-            pointer-events: none;
-        }
-        
-        .mute-region {
-            position: absolute;
-            background: rgba(239, 68, 68, 0.4);
-            border: 1px dashed var(--danger);
-            pointer-events: none;
-        }
-        
-        .playhead {
-            position: absolute;
-            width: 2px;
-            background: var(--primary);
-            pointer-events: none;
-        }
-        
-        .hidden { display: none !important; }
-    </style>
-</head>
-<body>
-    <header>
-        <h1>🎤 Karaoke Generator</h1>
-    </header>
+        """Return the frontend HTML by reading from the static file."""
+        static_file = self._get_static_dir() / "index.html"
+        if static_file.exists():
+            return static_file.read_text(encoding="utf-8")
+        else:
+            # Fallback error message if file is missing
+            return """<!DOCTYPE html>
+<html>
+<head><title>Error</title></head>
+<body style="background:#1a1a1a;color:#fff;font-family:sans-serif;padding:2rem;">
+<h1>Frontend assets not found</h1>
+<p>The static/index.html file is missing from the instrumental_review module.</p>
+</body>
+</html>"""
     
-    <main class="container" id="main-content">
-        <div class="loading" id="loading">
-            <div class="spinner"></div>
-        </div>
-    </main>
-
-    <script>
-        // State
-        let analysisData = null;
-        let waveformData = null;
-        let muteRegions = [];
-        let currentTime = 0;
-        let isSelectionMode = false;
-        let selectionStart = null;
-        let activeAudio = 'backing';
-        let selectedOption = 'clean';
-        let hasCustom = false;
-        
-        const API_BASE = '/api/jobs/local';
-        
-        // Initialize
-        async function init() {
-            try {
-                // Fetch analysis
-                const analysisRes = await fetch(`${API_BASE}/instrumental-analysis`);
-                if (!analysisRes.ok) throw new Error('Failed to load analysis');
-                analysisData = await analysisRes.json();
-                
-                // Fetch waveform data
-                const waveformRes = await fetch(`${API_BASE}/waveform-data?num_points=800`);
-                if (waveformRes.ok) {
-                    waveformData = await waveformRes.json();
-                }
-                
-                // Set initial selection based on recommendation
-                selectedOption = analysisData.analysis.recommended_selection === 'clean' ? 'clean' : 'with_backing';
-                
-                render();
-            } catch (error) {
-                showError(error.message);
-            }
-        }
-        
-        function render() {
-            const main = document.getElementById('main-content');
-            main.innerHTML = `
-                <h1 class="page-title">Select Instrumental Track</h1>
-                <p class="page-subtitle">${analysisData.artist || ''} ${analysisData.artist && analysisData.title ? '-' : ''} ${analysisData.title || ''}</p>
-                
-                <div id="error-container"></div>
-                
-                <!-- Analysis Summary -->
-                <div class="card">
-                    <div class="card-header">
-                        <div class="card-title">
-                            <span>🎵</span> Backing Vocals Analysis
-                        </div>
-                        <div class="card-description">Automated analysis of the backing vocals stem</div>
-                    </div>
-                    <div class="card-content">
-                        <div class="flex flex-wrap gap-4 items-center">
-                            <div class="flex items-center gap-2">
-                                ${analysisData.analysis.has_audible_content 
-                                    ? '<span style="color: var(--warning)">🔊</span> Backing vocals detected'
-                                    : '<span style="color: var(--success)">🔇</span> No backing vocals detected'}
-                            </div>
-                            ${analysisData.analysis.has_audible_content ? `
-                                <span class="badge">${analysisData.analysis.audible_segments.length} segments</span>
-                                <span class="badge">${analysisData.analysis.audible_percentage.toFixed(1)}% of track</span>
-                                <span class="badge">${analysisData.analysis.total_audible_duration_seconds.toFixed(1)}s total</span>
-                            ` : ''}
-                            <span class="badge ${analysisData.analysis.recommended_selection === 'clean' ? 'badge-success' : 'badge-warning'}">
-                                Recommended: ${analysisData.analysis.recommended_selection === 'clean' ? 'Clean Instrumental' : 'Review Needed'}
-                            </span>
-                        </div>
-                    </div>
-                </div>
-                
-                <!-- Waveform -->
-                ${waveformData ? `
-                <div class="card">
-                    <div class="card-header">
-                        <div class="card-title">Backing Vocals Waveform</div>
-                        <div class="card-description">
-                            Click to seek • ${isSelectionMode ? 'Click and drag to select mute region' : 'Click "Add Mute Region" to start selecting'}
-                        </div>
-                    </div>
-                    <div class="card-content">
-                        <div id="waveform-container">
-                            <canvas id="waveform-canvas" width="800" height="150"></canvas>
-                            <div id="segments-overlay"></div>
-                            <div id="mute-overlay"></div>
-                            <div id="playhead" class="playhead hidden"></div>
-                        </div>
-                        <div class="time-axis">
-                            <span>0:00</span>
-                            <span>${formatTime(waveformData.duration / 4)}</span>
-                            <span>${formatTime(waveformData.duration / 2)}</span>
-                            <span>${formatTime(waveformData.duration * 3 / 4)}</span>
-                            <span>${formatTime(waveformData.duration)}</span>
-                        </div>
-                    </div>
-                </div>
-                ` : ''}
-                
-                <!-- Audio & Regions Grid -->
-                <div class="grid grid-cols-2 gap-4">
-                    <!-- Audio Player -->
-                    <div class="card">
-                        <div class="card-header">
-                            <div class="card-title">Audio Preview</div>
-                            <div class="card-description">Listen to different instrumental options</div>
-                        </div>
-                        <div class="card-content">
-                            <div class="flex flex-wrap gap-2" style="margin-bottom: 1rem;">
-                                <button class="btn btn-sm ${activeAudio === 'backing' ? 'btn-primary' : 'btn-outline'}" onclick="setActiveAudio('backing')">Backing Vocals</button>
-                                <button class="btn btn-sm ${activeAudio === 'clean' ? 'btn-primary' : 'btn-outline'}" onclick="setActiveAudio('clean')">Clean Instrumental</button>
-                                ${analysisData.audio_urls.with_backing ? `
-                                <button class="btn btn-sm ${activeAudio === 'with_backing' ? 'btn-primary' : 'btn-outline'}" onclick="setActiveAudio('with_backing')">With Backing</button>
-                                ` : ''}
-                                ${hasCustom ? `
-                                <button class="btn btn-sm ${activeAudio === 'custom' ? 'btn-primary' : 'btn-outline'}" onclick="setActiveAudio('custom')">Custom</button>
-                                ` : ''}
-                            </div>
-                            <div class="audio-player">
-                                <div class="audio-label">${getAudioLabel()}</div>
-                                <audio id="audio-player" controls src="${getAudioUrl()}" ontimeupdate="onTimeUpdate(this)"></audio>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <!-- Region Selector -->
-                    <div class="card">
-                        <div class="card-header">
-                            <div class="card-title">Mute Regions</div>
-                            <div class="card-description">Select sections of backing vocals to mute</div>
-                        </div>
-                        <div class="card-content">
-                            <div class="flex gap-2" style="margin-bottom: 1rem;">
-                                <button class="btn btn-sm ${isSelectionMode ? 'btn-primary' : 'btn-outline'}" onclick="toggleSelectionMode()">
-                                    ${isSelectionMode ? '✓ Selecting...' : '+ Add Mute Region'}
-                                </button>
-                                ${muteRegions.length > 0 ? `
-                                <button class="btn btn-sm btn-outline" onclick="clearAllRegions()">Clear All</button>
-                                ` : ''}
-                            </div>
-                            
-                            ${muteRegions.length > 0 ? `
-                            <div class="region-list">
-                                ${muteRegions.map((r, i) => `
-                                <div class="region-item">
-                                    <span>${formatTime(r.start_seconds)} - ${formatTime(r.end_seconds)} (${(r.end_seconds - r.start_seconds).toFixed(1)}s)</span>
-                                    <div class="flex gap-2">
-                                        <button class="btn btn-sm btn-outline" onclick="seekTo(${r.start_seconds})">▶</button>
-                                        <button class="btn btn-sm btn-danger" onclick="removeRegion(${i})">×</button>
-                                    </div>
-                                </div>
-                                `).join('')}
-                            </div>
-                            ` : `
-                            <p style="color: var(--text-muted); font-size: 0.875rem;">
-                                No mute regions selected. Click "Add Mute Region" then click and drag on the waveform to select sections to mute.
-                            </p>
-                            `}
-                            
-                            ${analysisData.analysis.audible_segments.length > 0 ? `
-                            <div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--card-border);">
-                                <div style="font-size: 0.875rem; color: var(--text-muted); margin-bottom: 0.5rem;">Quick mute detected segments:</div>
-                                <div class="flex flex-wrap gap-2">
-                                    ${analysisData.analysis.audible_segments.slice(0, 5).map((seg, i) => `
-                                    <button class="btn btn-sm btn-outline" onclick="addSegmentAsRegion(${i})">
-                                        ${formatTime(seg.start_seconds)} - ${formatTime(seg.end_seconds)}
-                                    </button>
-                                    `).join('')}
-                                    ${analysisData.analysis.audible_segments.length > 5 ? `<span class="badge">+${analysisData.analysis.audible_segments.length - 5} more</span>` : ''}
-                                </div>
-                            </div>
-                            ` : ''}
-                        </div>
-                    </div>
-                </div>
-                
-                <!-- Create Custom Button -->
-                ${muteRegions.length > 0 && !hasCustom ? `
-                <div class="card">
-                    <div class="card-content">
-                        <div class="flex items-center justify-between">
-                            <div>
-                                <p style="font-weight: 500;">Ready to create custom instrumental</p>
-                                <p style="font-size: 0.875rem; color: var(--text-muted);">${muteRegions.length} region${muteRegions.length > 1 ? 's' : ''} will be muted</p>
-                            </div>
-                            <button class="btn btn-primary" id="create-custom-btn" onclick="createCustomInstrumental()">
-                                Create Custom Instrumental
-                            </button>
-                        </div>
-                    </div>
-                </div>
-                ` : ''}
-                
-                <!-- Selection Options -->
-                <div class="card">
-                    <div class="card-header">
-                        <div class="card-title">Final Selection</div>
-                        <div class="card-description">Choose which instrumental to use for your karaoke video</div>
-                    </div>
-                    <div class="card-content">
-                        <div class="radio-group">
-                            <label class="radio-item ${selectedOption === 'clean' ? 'selected' : ''}" onclick="setSelection('clean')">
-                                <input type="radio" name="selection" value="clean" ${selectedOption === 'clean' ? 'checked' : ''}>
-                                <div class="radio-item-content">
-                                    <div class="radio-item-title">Clean Instrumental</div>
-                                    <div class="radio-item-desc">Use the instrumental with no backing vocals at all</div>
-                                </div>
-                                ${analysisData.analysis.recommended_selection === 'clean' ? '<span class="badge badge-success">✓ Recommended</span>' : ''}
-                            </label>
-                            
-                            <label class="radio-item ${selectedOption === 'with_backing' ? 'selected' : ''}" onclick="setSelection('with_backing')">
-                                <input type="radio" name="selection" value="with_backing" ${selectedOption === 'with_backing' ? 'checked' : ''}>
-                                <div class="radio-item-content">
-                                    <div class="radio-item-title">Instrumental with Backing Vocals</div>
-                                    <div class="radio-item-desc">Use the instrumental with all backing vocals included</div>
-                                </div>
-                            </label>
-                            
-                            ${hasCustom ? `
-                            <label class="radio-item ${selectedOption === 'custom' ? 'selected' : ''}" onclick="setSelection('custom')">
-                                <input type="radio" name="selection" value="custom" ${selectedOption === 'custom' ? 'checked' : ''}>
-                                <div class="radio-item-content">
-                                    <div class="radio-item-title">Custom Instrumental</div>
-                                    <div class="radio-item-desc">Use your custom instrumental with ${muteRegions.length} muted region${muteRegions.length > 1 ? 's' : ''}</div>
-                                </div>
-                                <span class="badge">Custom</span>
-                            </label>
-                            ` : ''}
-                        </div>
-                    </div>
-                </div>
-                
-                <!-- Submit Button -->
-                <button class="btn btn-primary btn-lg" id="submit-btn" onclick="submitSelection()" style="width: 100%; max-width: 400px; margin-top: 1rem;">
-                    ✓ Confirm Selection & Continue
-                </button>
-            `;
-            
-            // Initialize waveform after render
-            if (waveformData) {
-                setTimeout(drawWaveform, 0);
-                setupWaveformInteraction();
-            }
-        }
-        
-        function drawWaveform() {
-            const canvas = document.getElementById('waveform-canvas');
-            if (!canvas || !waveformData) return;
-            
-            const ctx = canvas.getContext('2d');
-            const { amplitudes, duration } = waveformData;
-            const width = canvas.width;
-            const height = canvas.height;
-            const centerY = height / 2;
-            
-            // Clear canvas
-            ctx.fillStyle = '#1a1a2e';
-            ctx.fillRect(0, 0, width, height);
-            
-            // Draw threshold line
-            ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
-            ctx.setLineDash([5, 5]);
-            ctx.beginPath();
-            ctx.moveTo(0, centerY);
-            ctx.lineTo(width, centerY);
-            ctx.stroke();
-            ctx.setLineDash([]);
-            
-            // Draw waveform
-            const barWidth = width / amplitudes.length;
-            
-            amplitudes.forEach((amp, i) => {
-                const x = i * barWidth;
-                const barHeight = Math.max(2, amp * height);
-                const y = centerY - barHeight / 2;
-                
-                // Check if this point is in a muted region
-                const time = (i / amplitudes.length) * duration;
-                const inMuteRegion = muteRegions.some(r => time >= r.start_seconds && time <= r.end_seconds);
-                
-                // Check if in audible segment
-                const inAudibleSegment = analysisData.analysis.audible_segments.some(
-                    s => time >= s.start_seconds && time <= s.end_seconds
-                );
-                
-                if (inMuteRegion) {
-                    ctx.fillStyle = '#ef4444';
-                } else if (inAudibleSegment) {
-                    ctx.fillStyle = '#ec4899';
-                } else {
-                    ctx.fillStyle = '#60a5fa';
-                }
-                
-                ctx.fillRect(x, y, Math.max(1, barWidth - 1), barHeight);
-            });
-            
-            // Draw playhead
-            const playhead = document.getElementById('playhead');
-            if (playhead && currentTime > 0) {
-                const x = (currentTime / duration) * width;
-                playhead.style.left = `${x}px`;
-                playhead.style.height = `${height}px`;
-                playhead.classList.remove('hidden');
-            }
-        }
-        
-        function setupWaveformInteraction() {
-            const canvas = document.getElementById('waveform-canvas');
-            if (!canvas) return;
-            
-            let isDragging = false;
-            let dragStart = 0;
-            
-            canvas.onmousedown = (e) => {
-                const rect = canvas.getBoundingClientRect();
-                const x = e.clientX - rect.left;
-                const time = (x / rect.width) * waveformData.duration;
-                
-                if (isSelectionMode) {
-                    isDragging = true;
-                    dragStart = time;
-                    selectionStart = time;
-                } else {
-                    seekTo(time);
-                }
-            };
-            
-            canvas.onmousemove = (e) => {
-                if (!isDragging || !isSelectionMode) return;
-                // Visual feedback could be added here
-            };
-            
-            canvas.onmouseup = (e) => {
-                if (!isDragging || !isSelectionMode) return;
-                
-                const rect = canvas.getBoundingClientRect();
-                const x = e.clientX - rect.left;
-                const time = (x / rect.width) * waveformData.duration;
-                
-                const start = Math.min(dragStart, time);
-                const end = Math.max(dragStart, time);
-                
-                if (end - start > 0.1) {
-                    addRegion(start, end);
-                }
-                
-                isDragging = false;
-                isSelectionMode = false;
-                render();
-            };
-            
-            canvas.onmouseleave = () => {
-                if (isDragging) {
-                    isDragging = false;
-                }
-            };
-        }
-        
-        function formatTime(seconds) {
-            const mins = Math.floor(seconds / 60);
-            const secs = Math.floor(seconds % 60);
-            return `${mins}:${secs.toString().padStart(2, '0')}`;
-        }
-        
-        function getAudioUrl() {
-            const urls = {
-                backing: '/api/audio/backing_vocals',
-                clean: '/api/audio/clean_instrumental',
-                with_backing: '/api/audio/with_backing',
-                custom: '/api/audio/custom_instrumental'
-            };
-            return urls[activeAudio] || urls.backing;
-        }
-        
-        function getAudioLabel() {
-            const labels = {
-                backing: 'Backing Vocals Only',
-                clean: 'Clean Instrumental',
-                with_backing: 'Instrumental + Backing Vocals',
-                custom: 'Custom Instrumental'
-            };
-            return labels[activeAudio] || 'Audio';
-        }
-        
-        function setActiveAudio(type) {
-            activeAudio = type;
-            render();
-        }
-        
-        function onTimeUpdate(audio) {
-            currentTime = audio.currentTime;
-            if (waveformData) {
-                const playhead = document.getElementById('playhead');
-                const canvas = document.getElementById('waveform-canvas');
-                if (playhead && canvas) {
-                    const x = (currentTime / waveformData.duration) * canvas.width;
-                    playhead.style.left = `${x}px`;
-                    playhead.style.height = `${canvas.height}px`;
-                    playhead.classList.remove('hidden');
-                }
-            }
-        }
-        
-        function seekTo(time) {
-            const audio = document.getElementById('audio-player');
-            if (audio) {
-                audio.currentTime = time;
-                audio.play();
-            }
-        }
-        
-        function toggleSelectionMode() {
-            isSelectionMode = !isSelectionMode;
-            render();
-        }
-        
-        function addRegion(start, end) {
-            muteRegions.push({ start_seconds: start, end_seconds: end });
-            muteRegions.sort((a, b) => a.start_seconds - b.start_seconds);
-            // Merge overlapping
-            mergeOverlappingRegions();
-        }
-        
-        function addSegmentAsRegion(index) {
-            const seg = analysisData.analysis.audible_segments[index];
-            if (seg) {
-                addRegion(seg.start_seconds, seg.end_seconds);
-                render();
-            }
-        }
-        
-        function removeRegion(index) {
-            muteRegions.splice(index, 1);
-            render();
-        }
-        
-        function clearAllRegions() {
-            muteRegions = [];
-            hasCustom = false;
-            render();
-        }
-        
-        function mergeOverlappingRegions() {
-            if (muteRegions.length < 2) return;
-            
-            const merged = [muteRegions[0]];
-            for (let i = 1; i < muteRegions.length; i++) {
-                const last = merged[merged.length - 1];
-                const curr = muteRegions[i];
-                
-                if (curr.start_seconds <= last.end_seconds) {
-                    last.end_seconds = Math.max(last.end_seconds, curr.end_seconds);
-                } else {
-                    merged.push(curr);
-                }
-            }
-            muteRegions = merged;
-        }
-        
-        function setSelection(value) {
-            selectedOption = value;
-            render();
-        }
+    @staticmethod
+    def _is_port_available(host: str, port: int) -> bool:
+        """Check if a port is available for binding."""
+        try:
+            with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as sock:
+                sock.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
+                sock.bind((host, port))
+                return True
+        except OSError:
+            return False
+    
+    @staticmethod
+    def _find_available_port(host: str, preferred_port: int, max_attempts: int = 100) -> int:
+        """
+        Find an available port, starting with the preferred port.
         
-        async function createCustomInstrumental() {
-            const btn = document.getElementById('create-custom-btn');
-            if (btn) {
-                btn.disabled = true;
-                btn.textContent = 'Creating...';
-            }
+        Args:
+            host: Host to bind to
+            preferred_port: The preferred port to try first
+            max_attempts: Maximum number of ports to try
             
-            try {
-                const response = await fetch(`${API_BASE}/create-custom-instrumental`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ mute_regions: muteRegions })
-                });
-                
-                if (!response.ok) {
-                    const data = await response.json();
-                    throw new Error(data.detail || 'Failed to create custom instrumental');
-                }
-                
-                hasCustom = true;
-                selectedOption = 'custom';
-                activeAudio = 'custom';
-                render();
-            } catch (error) {
-                showError(error.message);
-                if (btn) {
-                    btn.disabled = false;
-                    btn.textContent = 'Create Custom Instrumental';
-                }
-            }
-        }
-        
-        async function submitSelection() {
-            const btn = document.getElementById('submit-btn');
-            if (btn) {
-                btn.disabled = true;
-                btn.textContent = 'Submitting...';
-            }
+        Returns:
+            An available port number
             
-            try {
-                const response = await fetch(`${API_BASE}/select-instrumental`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ selection: selectedOption })
-                });
-                
-                if (!response.ok) {
-                    const data = await response.json();
-                    throw new Error(data.detail || 'Failed to submit selection');
-                }
-                
-                // Show success message
-                document.getElementById('main-content').innerHTML = `
-                    <div class="alert alert-success" style="max-width: 600px; margin: 4rem auto; text-align: center;">
-                        <h2 style="margin-bottom: 1rem;">✓ Selection Submitted!</h2>
-                        <p>You selected: <strong>${selectedOption === 'clean' ? 'Clean Instrumental' : selectedOption === 'with_backing' ? 'Instrumental with Backing Vocals' : 'Custom Instrumental'}</strong></p>
-                        <p style="margin-top: 1rem; color: var(--text-muted);">You can close this window now.</p>
-                    </div>
-                `;
-            } catch (error) {
-                showError(error.message);
-                if (btn) {
-                    btn.disabled = false;
-                    btn.textContent = '✓ Confirm Selection & Continue';
-                }
-            }
-        }
-        
-        function showError(message) {
-            const container = document.getElementById('error-container');
-            if (container) {
-                container.innerHTML = `<div class="alert alert-error">${message}</div>`;
-            }
-        }
-        
-        // Start
-        init();
-    </script>
-</body>
-</html>'''
+        Raises:
+            RuntimeError: If no available port could be found
+        """
+        # Try the preferred port first
+        if InstrumentalReviewServer._is_port_available(host, preferred_port):
+            return preferred_port
+        
+        # Try subsequent ports
+        for offset in range(1, max_attempts):
+            port = preferred_port + offset
+            if port > 65535:
+                break
+            if InstrumentalReviewServer._is_port_available(host, port):
+                return port
+        
+        # Last resort: let the OS assign a port
+        with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as sock:
+            sock.bind((host, 0))
+            return sock.getsockname()[1]
     
     def start_and_open_browser(self, port: int = 8765) -> str:
         """
         Start server, open browser, and block until selection is submitted.
         
         Args:
-            port: Port to run the server on
+            port: Preferred port to run the server on. If unavailable, will
+                  automatically find an available port.
             
         Returns:
             The user's selection ("clean", "with_backing", or "custom")
         """
         self._app = self._create_app()
         
+        # Find an available port (handles concurrent CLI instances)
+        host = "127.0.0.1"
+        actual_port = self._find_available_port(host, port)
+        if actual_port != port:
+            logger.info(f"Port {port} in use, using port {actual_port} instead")
+        
         # Run uvicorn in a separate thread
         config = uvicorn.Config(
             self._app,
-            host="127.0.0.1",
-            port=port,
+            host=host,
+            port=actual_port,
             log_level="warning",
         )
         server = uvicorn.Server(config)
@@ -1151,7 +441,7 @@ class InstrumentalReviewServer:
         import time
         time.sleep(0.5)
         
-        url = f"http://localhost:{port}/"
+        url = f"http://localhost:{actual_port}/"
         logger.info(f"Instrumental review server started at {url}")
         
         # Open browser
@@ -1179,3 +469,7 @@ class InstrumentalReviewServer:
     def get_custom_instrumental_path(self) -> Optional[str]:
         """Get the path to the custom instrumental if one was created."""
         return self.custom_instrumental_path
+    
+    def get_uploaded_instrumental_path(self) -> Optional[str]:
+        """Get the path to the uploaded instrumental if one was uploaded."""
+        return self.uploaded_instrumental_path