PyPI - karaoke-gen - Versions diffs - 0.105.4__py3-none-any.whl → 0.107.0__py3-none-any.whl - Mend

karaoke-gen 0.105.4py3-none-any.whl → 0.107.0py3-none-any.whl

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (322) hide show

karaoke_gen/instrumental_review/static/index.html DELETED Viewed

@@ -1,1721 +0,0 @@
-<!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 {
-            /* Nomad Karaoke brand colors - see docs/BRAND-STYLE-GUIDE.md */
-            --bg: #0f0f0f;
-            --card: #1a1a1a;
-            --card-border: #2a2a2a;
-            --waveform-bg: #0d1117;
-            --text: #e5e5e5;
-            --text-muted: #888;
-            --primary: #ff7acc;
-            --primary-hover: #ff5bb8;
-            --secondary: #252525;
-            --secondary-hover: #333;
-            --success: #22c55e;
-            --warning: #f59e0b;
-            --danger: #ef4444;
-            --brand-pink: #ff7acc;
-            --brand-gold: #ffdf6b;
-            --brand-purple: #8b5cf6;
-            --blue: #3b82f6;
-        }
-        * { 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.5;
-            height: 100vh;
-            overflow: hidden;
-        }
-        .app {
-            display: flex;
-            flex-direction: column;
-            height: 100vh;
-            padding: 16px 24px;
-            gap: 12px;
-        }
-        /* Header - compact */
-        .header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            gap: 16px;
-            flex-shrink: 0;
-        }
-        .header-left {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-        }
-        .logo {
-            font-size: 1.25rem;
-            font-weight: 600;
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-        }
-        .logo-img {
-            height: 40px;
-            width: auto;
-        }
-        .track-info {
-            font-size: 0.9rem;
-            color: var(--text-muted);
-        }
-        .header-right {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        .badge {
-            display: inline-flex;
-            align-items: center;
-            padding: 4px 10px;
-            border-radius: 12px;
-            font-size: 0.7rem;
-            font-weight: 500;
-            background: var(--secondary);
-            color: var(--text-muted);
-        }
-        .badge-warning { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
-        .badge-success { background: rgba(34, 197, 94, 0.15); color: var(--success); }
-        /* Main waveform player */
-        .waveform-player {
-            background: var(--card);
-            border: 1px solid var(--card-border);
-            border-radius: 12px;
-            overflow: hidden;
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            min-height: 0;
-        }
-        .waveform-toolbar {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 10px 16px;
-            background: var(--secondary);
-            border-bottom: 1px solid var(--card-border);
-            gap: 12px;
-            flex-shrink: 0;
-        }
-        .toolbar-left {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        .toolbar-center {
-            display: flex;
-            align-items: center;
-            gap: 6px;
-        }
-        .toolbar-right {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-        }
-        .time-display {
-            font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
-            font-size: 0.85rem;
-            color: var(--text);
-            min-width: 90px;
-        }
-        .btn {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            padding: 6px 12px;
-            border-radius: 6px;
-            font-size: 0.8rem;
-            font-weight: 500;
-            cursor: pointer;
-            border: none;
-            transition: all 0.15s;
-            gap: 6px;
-        }
-        .btn-icon {
-            width: 32px;
-            height: 32px;
-            padding: 0;
-            border-radius: 50%;
-            font-size: 1rem;
-        }
-        .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); border: 1px solid var(--card-border); }
-        .btn-secondary:hover { background: var(--secondary-hover); }
-        .btn-secondary.active { background: var(--primary); border-color: var(--primary); }
-        .btn-ghost { background: transparent; color: var(--text-muted); }
-        .btn-ghost:hover { background: var(--secondary); color: var(--text); }
-        .btn-ghost.active { background: var(--primary); color: white; }
-        .btn-sm { padding: 4px 8px; font-size: 0.75rem; }
-        .btn-danger { background: var(--danger); color: white; }
-        .btn-success { background: var(--success); color: white; }
-        .audio-toggle-group {
-            display: flex;
-            background: var(--bg);
-            border-radius: 6px;
-            padding: 2px;
-        }
-        .audio-toggle {
-            padding: 5px 10px;
-            border-radius: 4px;
-            font-size: 0.75rem;
-            font-weight: 500;
-            color: var(--text-muted);
-            background: transparent;
-            border: none;
-            cursor: pointer;
-            transition: all 0.15s;
-        }
-        .audio-toggle:hover { color: var(--text); }
-        .audio-toggle.active { background: var(--primary); color: white; }
-        /* Waveform canvas area */
-        .waveform-container {
-            flex: 1;
-            position: relative;
-            overflow-x: auto;
-            overflow-y: hidden;
-            background: var(--waveform-bg);
-            min-height: 120px;
-        }
-        .waveform-area {
-            position: relative;
-            height: 100%;
-            min-width: 100%;
-        }
-        #waveform-canvas {
-            display: block;
-            height: 100%;
-            cursor: pointer;
-        }
-        /* Zoom controls */
-        .zoom-controls {
-            display: flex;
-            align-items: center;
-            gap: 4px;
-            background: var(--bg);
-            border-radius: 6px;
-            padding: 2px;
-        }
-        .zoom-btn {
-            width: 28px;
-            height: 28px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: transparent;
-            border: none;
-            color: var(--text-muted);
-            cursor: pointer;
-            border-radius: 4px;
-            font-size: 0.9rem;
-        }
-        .zoom-btn:hover { background: var(--secondary); color: var(--text); }
-        .zoom-btn.active { background: var(--primary); color: white; }
-        .zoom-label {
-            font-size: 0.7rem;
-            color: var(--text-muted);
-            min-width: 28px;
-            text-align: center;
-        }
-        /* Upload button */
-        .upload-btn {
-            position: relative;
-            overflow: hidden;
-        }
-        .upload-btn input[type="file"] {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            opacity: 0;
-            cursor: pointer;
-        }
-        .upload-progress {
-            position: fixed;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            background: var(--card);
-            border: 1px solid var(--card-border);
-            border-radius: 12px;
-            padding: 24px 32px;
-            z-index: 1000;
-            text-align: center;
-        }
-        .upload-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0,0,0,0.6);
-            z-index: 999;
-        }
-        .playhead {
-            position: absolute;
-            top: 0;
-            width: 2px;
-            height: 100%;
-            background: var(--primary);
-            pointer-events: none;
-            z-index: 10;
-            box-shadow: 0 0 8px var(--primary);
-        }
-        .playhead::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -4px;
-            width: 10px;
-            height: 10px;
-            background: var(--primary);
-            border-radius: 50%;
-        }
-        .selection-overlay {
-            position: absolute;
-            top: 0;
-            height: 100%;
-            background: rgba(59, 130, 246, 0.3);
-            border: 1px dashed var(--primary);
-            pointer-events: none;
-            z-index: 5;
-        }
-        .time-axis {
-            display: flex;
-            justify-content: space-between;
-            padding: 4px 12px;
-            font-size: 0.7rem;
-            color: var(--text-muted);
-            background: rgba(0,0,0,0.4);
-            flex-shrink: 0;
-        }
-        /* Hidden audio element */
-        #audio-player { display: none; }
-        /* Bottom section */
-        .bottom-section {
-            display: flex;
-            gap: 12px;
-            flex-shrink: 0;
-        }
-        /* Mute regions panel */
-        .mute-panel {
-            flex: 1;
-            background: var(--card);
-            border: 1px solid var(--card-border);
-            border-radius: 10px;
-            padding: 12px;
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-            max-height: 140px;
-        }
-        .mute-panel-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-        }
-        .mute-panel-title {
-            font-size: 0.85rem;
-            font-weight: 600;
-        }
-        .mute-regions-list {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 6px;
-            overflow-y: auto;
-            flex: 1;
-        }
-        .mute-region-tag {
-            display: inline-flex;
-            align-items: center;
-            gap: 4px;
-            padding: 4px 8px;
-            background: var(--secondary);
-            border-radius: 4px;
-            font-size: 0.75rem;
-        }
-        .mute-region-tag button {
-            background: none;
-            border: none;
-            color: var(--text-muted);
-            cursor: pointer;
-            padding: 0;
-            font-size: 0.8rem;
-            line-height: 1;
-        }
-        .mute-region-tag button:hover { color: var(--danger); }
-        .quick-segments {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 4px;
-        }
-        .quick-segment-btn {
-            padding: 3px 6px;
-            background: var(--bg);
-            border: 1px solid var(--card-border);
-            border-radius: 4px;
-            font-size: 0.7rem;
-            color: var(--text-muted);
-            cursor: pointer;
-        }
-        .quick-segment-btn:hover {
-            border-color: var(--pink);
-            color: var(--pink);
-        }
-        /* Selection panel */
-        .selection-panel {
-            width: 340px;
-            background: var(--card);
-            border: 1px solid var(--card-border);
-            border-radius: 10px;
-            padding: 12px;
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-        }
-        .selection-panel-title {
-            font-size: 0.85rem;
-            font-weight: 600;
-        }
-        .selection-options {
-            display: flex;
-            flex-direction: column;
-            gap: 6px;
-        }
-        .selection-option {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            padding: 10px 12px;
-            background: var(--secondary);
-            border-radius: 8px;
-            cursor: pointer;
-            border: 2px solid transparent;
-            transition: border-color 0.15s;
-        }
-        .selection-option:hover { border-color: var(--card-border); }
-        .selection-option.selected { border-color: var(--primary); background: rgba(59, 130, 246, 0.1); }
-        .selection-option input { display: none; }
-        .selection-radio {
-            width: 16px;
-            height: 16px;
-            border: 2px solid var(--text-muted);
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-shrink: 0;
-        }
-        .selection-option.selected .selection-radio {
-            border-color: var(--primary);
-        }
-        .selection-option.selected .selection-radio::after {
-            content: '';
-            width: 8px;
-            height: 8px;
-            background: var(--primary);
-            border-radius: 50%;
-        }
-        .selection-label {
-            flex: 1;
-            font-size: 0.8rem;
-        }
-        .selection-label-title { font-weight: 500; }
-        .selection-label-desc { font-size: 0.7rem; color: var(--text-muted); }
-        .submit-btn {
-            margin-top: auto;
-            width: 100%;
-            padding: 10px;
-            font-size: 0.85rem;
-        }
-        /* Keyboard hints */
-        .kbd {
-            display: inline-block;
-            padding: 2px 6px;
-            background: var(--bg);
-            border: 1px solid var(--card-border);
-            border-radius: 4px;
-            font-family: 'SF Mono', Monaco, monospace;
-            font-size: 0.65rem;
-            color: var(--text-muted);
-        }
-        /* Alert */
-        .alert {
-            padding: 1rem;
-            border-radius: 8px;
-            text-align: center;
-        }
-        .alert-success {
-            background: rgba(34, 197, 94, 0.15);
-            border: 1px solid var(--success);
-            color: var(--success);
-        }
-        .alert-error {
-            position: fixed;
-            top: 16px;
-            left: 50%;
-            transform: translateX(-50%);
-            background: rgba(239, 68, 68, 0.95);
-            color: white;
-            padding: 10px 20px;
-            border-radius: 8px;
-            z-index: 1000;
-        }
-        /* Loading */
-        .loading {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 100%;
-        }
-        .spinner {
-            width: 32px;
-            height: 32px;
-            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); } }
-        .hidden { display: none !important; }
-        /* Success screen */
-        .success-screen {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            height: 100%;
-            gap: 16px;
-        }
-        .success-screen h2 {
-            font-size: 1.5rem;
-            color: var(--success);
-        }
-        /* Mobile responsiveness */
-        @media (max-width: 768px) {
-            .app {
-                padding: 12px;
-                gap: 8px;
-                height: auto;
-                min-height: 100vh;
-                overflow-y: auto;
-            }
-            body {
-                overflow: auto;
-            }
-            .header {
-                flex-direction: column;
-                align-items: flex-start;
-                gap: 8px;
-            }
-            .header-left {
-                width: 100%;
-            }
-            .header-right {
-                width: 100%;
-                justify-content: flex-start;
-                flex-wrap: wrap;
-            }
-            .logo {
-                font-size: 1rem;
-            }
-            .logo-img {
-                height: 32px;
-            }
-            .waveform-player {
-                flex: none;
-                min-height: 200px;
-            }
-            .waveform-toolbar {
-                flex-wrap: wrap;
-                padding: 8px 12px;
-                gap: 8px;
-            }
-            .toolbar-left,
-            .toolbar-center,
-            .toolbar-right {
-                flex-wrap: wrap;
-            }
-            .audio-toggle-group {
-                order: 10;
-                width: 100%;
-                justify-content: center;
-            }
-            .bottom-section {
-                flex-direction: column;
-            }
-            .mute-panel {
-                max-height: none;
-            }
-            .selection-panel {
-                width: 100%;
-            }
-            .selection-option {
-                padding: 12px;
-            }
-            .btn {
-                min-height: 44px;
-                padding: 8px 12px;
-            }
-            .btn-icon {
-                width: 44px;
-                height: 44px;
-            }
-            .audio-toggle {
-                padding: 8px 12px;
-                min-height: 40px;
-            }
-            .zoom-btn {
-                width: 40px;
-                height: 40px;
-            }
-            .time-display {
-                font-size: 0.9rem;
-            }
-        }
-        @media (max-width: 480px) {
-            .app {
-                padding: 8px;
-            }
-            .header-left {
-                flex-wrap: wrap;
-            }
-            .track-info {
-                width: 100%;
-                margin-top: 4px;
-            }
-            .waveform-toolbar {
-                padding: 6px 8px;
-            }
-            .toolbar-center {
-                width: 100%;
-                justify-content: center;
-                order: -1;
-            }
-            .toolbar-left {
-                order: 1;
-            }
-            .toolbar-right {
-                order: 2;
-                width: 100%;
-                justify-content: space-between;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div class="app" id="app">
-        <div class="loading">
-            <div class="spinner"></div>
-        </div>
-    </div>
-    <script>
-        // State
-        let analysisData = null;
-        let waveformData = null;
-        let muteRegions = [];
-        let currentTime = 0;
-        let duration = 0;
-        let isPlaying = false;
-        let isDragging = false;
-        let dragStartTime = 0;
-        let selectionStartX = 0;
-        let activeAudio = 'backing';
-        let selectedOption = 'with_backing';
-        let hasCustom = false;
-        let hasUploaded = false;
-        let uploadedFilename = '';
-        let hasOriginal = false;
-        let zoomLevel = 1;
-        let animationFrameId = null;
-        let currentAudioElement = null;  // Track audio element reference for listener management
-        // Parse URL parameters for cloud mode
-        const urlParams = new URLSearchParams(window.location.search);
-        const encodedBaseApiUrl = urlParams.get('baseApiUrl');
-        const instrumentalToken = urlParams.get('instrumentalToken');
-        // Check localStorage for full auth token (logged-in users)
-        // This takes priority over instrumentalToken which can expire
-        const fullAuthToken = localStorage.getItem('karaoke_access_token');
-        // Determine API base URL - cloud mode uses provided URL, local mode uses default
-        const API_BASE = encodedBaseApiUrl
-            ? decodeURIComponent(encodedBaseApiUrl)
-            : '/api/jobs/local';
-        // Helper to add auth token to URL
-        // Priority: fullAuthToken (doesn't expire) > instrumentalToken (expires after 48h)
-        // This is essential for audio elements which can't use Bearer headers
-        function addTokenToUrl(url) {
-            // Prefer full auth token - it doesn't have the short expiry that magic link tokens have
-            if (fullAuthToken) {
-                const separator = url.includes('?') ? '&' : '?';
-                return `${url}${separator}token=${encodeURIComponent(fullAuthToken)}`;
-            }
-            // Fall back to instrumental token for non-logged-in users
-            if (!instrumentalToken) return url;
-            const separator = url.includes('?') ? '&' : '?';
-            return `${url}${separator}instrumental_token=${encodeURIComponent(instrumentalToken)}`;
-        }
-        // Auth-aware fetch helper
-        // Priority: fullAuthToken (Bearer header) > instrumentalToken (query param)
-        function authFetch(url, options = {}) {
-            if (fullAuthToken) {
-                // Use Bearer auth for logged-in users
-                const headers = new Headers(options.headers || {});
-                headers.set('Authorization', `Bearer ${fullAuthToken}`);
-                return fetch(url, { ...options, headers });
-            } else {
-                // Fall back to instrumental token in URL
-                return fetch(addTokenToUrl(url), options);
-            }
-        }
-        // HTML escape helper to prevent XSS
-        function escapeHtml(str) {
-            if (!str) return '';
-            const div = document.createElement('div');
-            div.textContent = str;
-            return div.innerHTML;
-        }
-        // Named event handlers for audio (so they can be added once)
-        function onAudioPlay() { isPlaying = true; updatePlayButton(); startPlayheadAnimation(); }
-        function onAudioPause() { isPlaying = false; updatePlayButton(); stopPlayheadAnimation(); }
-        function onAudioEnded() { isPlaying = false; updatePlayButton(); stopPlayheadAnimation(); }
-        // Initialize
-        async function init() {
-            try {
-                const [analysisRes, waveformRes] = await Promise.all([
-                    authFetch(`${API_BASE}/instrumental-analysis`),
-                    authFetch(`${API_BASE}/waveform-data?num_points=1000`)
-                ]);
-                if (!analysisRes.ok) throw new Error('Failed to load analysis');
-                analysisData = await analysisRes.json();
-                if (waveformRes.ok) {
-                    waveformData = await waveformRes.json();
-                    // API may return duration_seconds (cloud) or duration (local)
-                    duration = waveformData.duration_seconds || waveformData.duration || 0;
-                }
-                // Set initial selection based on recommendation
-                selectedOption = analysisData.analysis.recommended_selection === 'clean' ? 'clean' : 'with_backing';
-                // Check if there's already an uploaded instrumental
-                if (analysisData.has_uploaded_instrumental) {
-                    hasUploaded = true;
-                }
-                // Check if original audio is available
-                if (analysisData.has_original) {
-                    hasOriginal = true;
-                }
-                render();
-                setupKeyboardShortcuts();
-            } catch (error) {
-                showError(error.message);
-            }
-        }
-        function render() {
-            // Pause any existing audio before rebuilding DOM to avoid AbortError
-            const existingAudio = document.getElementById('audio-player');
-            const wasPlaying = isPlaying;
-            if (existingAudio && !existingAudio.paused) {
-                existingAudio.pause();
-            }
-            const app = document.getElementById('app');
-            const segments = analysisData.analysis.audible_segments;
-            const hasSegments = segments.length > 0;
-            app.innerHTML = `
-                <div class="header">
-                    <div class="header-left">
-                        <span class="logo"><img src="https://gen.nomadkaraoke.com/nomad-karaoke-logo.svg" alt="Nomad Karaoke" class="logo-img" onerror="this.style.display='none'"> Instrumental Review</span>
-                        <span class="track-info">${escapeHtml(analysisData.artist) || ''} ${analysisData.artist && analysisData.title ? '–' : ''} ${escapeHtml(analysisData.title) || ''}</span>
-                    </div>
-                    <div class="header-right">
-                        ${hasSegments ? `
-                            <span class="badge">${segments.length} segments</span>
-                            <span class="badge">${analysisData.analysis.audible_percentage.toFixed(0)}% backing vocals</span>
-                        ` : ''}
-                        <span class="badge ${analysisData.analysis.recommended_selection === 'clean' ? 'badge-success' : 'badge-warning'}">
-                            ${analysisData.analysis.recommended_selection === 'clean' ? '✓ Clean recommended' : '⚠ Review needed'}
-                        </span>
-                    </div>
-                </div>
-                <div id="error-container"></div>
-                <div class="waveform-player">
-                    <div class="waveform-toolbar">
-                        <div class="toolbar-left">
-                            <button class="btn btn-icon btn-primary" id="play-btn" onclick="togglePlayPause()">
-                                ${isPlaying ? '⏸' : '▶'}
-                            </button>
-                            <span class="time-display">
-                                <span id="current-time">${formatTime(currentTime)}</span>
-                                <span style="color: var(--text-muted)"> / ${formatTime(duration)}</span>
-                            </span>
-                        </div>
-                        <div class="toolbar-center">
-                            <div class="audio-toggle-group">
-                                ${hasOriginal ? `
-                                <button class="audio-toggle ${activeAudio === 'original' ? 'active' : ''}" data-audio-type="original" onclick="setActiveAudio('original')">Original</button>
-                                ` : ''}
-                                <button class="audio-toggle ${activeAudio === 'backing' ? 'active' : ''}" data-audio-type="backing" onclick="setActiveAudio('backing')">Backing Vocals Only</button>
-                                <button class="audio-toggle ${activeAudio === 'clean' ? 'active' : ''}" data-audio-type="clean" onclick="setActiveAudio('clean')">Pure Instrumental</button>
-                                ${analysisData.audio_urls.with_backing ? `
-                                <button class="audio-toggle ${activeAudio === 'with_backing' ? 'active' : ''}" data-audio-type="with_backing" onclick="setActiveAudio('with_backing')">Instrumental + Backing</button>
-                                ` : ''}
-                                ${hasCustom ? `
-                                <button class="audio-toggle ${activeAudio === 'custom' ? 'active' : ''}" data-audio-type="custom" onclick="setActiveAudio('custom')">Custom</button>
-                                ` : ''}
-                                ${hasUploaded ? `
-                                <button class="audio-toggle ${activeAudio === 'uploaded' ? 'active' : ''}" data-audio-type="uploaded" onclick="setActiveAudio('uploaded')" title="${escapeHtml(uploadedFilename)}">Uploaded</button>
-                                ` : ''}
-                            </div>
-                            <label class="btn btn-sm btn-secondary upload-btn" title="Upload custom instrumental">
-                                📁 Upload
-                                <input type="file" accept=".flac,.mp3,.wav,.m4a,.ogg" onchange="handleUpload(event)">
-                            </label>
-                        </div>
-                        <div class="toolbar-right">
-                            <div class="zoom-controls">
-                                <button class="zoom-btn ${zoomLevel === 1 ? 'active' : ''}" onclick="setZoom(1)" title="1x zoom">1x</button>
-                                <button class="zoom-btn ${zoomLevel === 2 ? 'active' : ''}" onclick="setZoom(2)" title="2x zoom">2x</button>
-                                <button class="zoom-btn ${zoomLevel === 4 ? 'active' : ''}" onclick="setZoom(4)" title="4x zoom">4x</button>
-                            </div>
-                            <span style="font-size: 0.7rem; color: var(--text-muted);">
-                                <span class="kbd">Shift</span>+drag
-                            </span>
-                            <span class="kbd">Space</span>
-                        </div>
-                    </div>
-                    <div class="waveform-container" id="waveform-container">
-                        <div class="waveform-area" id="waveform-area" style="width: ${zoomLevel * 100}%;">
-                            <canvas id="waveform-canvas"></canvas>
-                            <div class="playhead hidden" id="playhead"></div>
-                            <div class="selection-overlay hidden" id="selection-overlay"></div>
-                        </div>
-                    </div>
-                    <div class="time-axis">
-                        <span>0:00</span>
-                        <span>${formatTime(duration * 0.25)}</span>
-                        <span>${formatTime(duration * 0.5)}</span>
-                        <span>${formatTime(duration * 0.75)}</span>
-                        <span>${formatTime(duration)}</span>
-                    </div>
-                </div>
-                <audio id="audio-player" src="${getAudioUrl()}"></audio>
-                <div class="bottom-section">
-                    <div class="mute-panel">
-                        <div class="mute-panel-header">
-                            <span class="mute-panel-title">Mute Regions ${muteRegions.length > 0 ? `(${muteRegions.length})` : ''}</span>
-                            ${muteRegions.length > 0 ? `
-                            <div style="display: flex; gap: 6px;">
-                                <button class="btn btn-sm btn-secondary" onclick="clearAllRegions()">Clear</button>
-                                ${!hasCustom ? `<button class="btn btn-sm btn-primary" id="create-custom-btn" onclick="createCustomInstrumental()">Create Custom</button>` : ''}
-                            </div>
-                            ` : ''}
-                        </div>
-                        ${muteRegions.length > 0 ? `
-                        <div class="mute-regions-list">
-                            ${muteRegions.map((r, i) => `
-                            <div class="mute-region-tag">
-                                <span onclick="seekTo(${r.start_seconds}, true)" style="cursor: pointer">${formatTime(r.start_seconds)} – ${formatTime(r.end_seconds)}</span>
-                                <button onclick="removeRegion(${i})">×</button>
-                            </div>
-                            `).join('')}
-                        </div>
-                        ` : `
-                        <div style="color: var(--text-muted); font-size: 0.75rem;">
-                            ${hasSegments ? 'Click segments below or <kbd class="kbd">Shift</kbd> + drag on waveform' : 'No backing vocals detected – clean instrumental recommended'}
-                        </div>
-                        `}
-                        ${hasSegments ? `
-                        <div class="quick-segments">
-                            ${segments.slice(0, 8).map((seg, i) => `
-                            <button class="quick-segment-btn" onclick="addSegmentAsRegion(${i})" title="Add to mute regions">
-                                ${formatTime(seg.start_seconds)} – ${formatTime(seg.end_seconds)}
-                            </button>
-                            `).join('')}
-                            ${segments.length > 8 ? `<span style="font-size: 0.7rem; color: var(--text-muted); padding: 3px;">+${segments.length - 8} more</span>` : ''}
-                        </div>
-                        ` : ''}
-                    </div>
-                    <div class="selection-panel">
-                        <span class="selection-panel-title">Final Selection</span>
-                        <div class="selection-options">
-                            <label class="selection-option ${selectedOption === 'clean' ? 'selected' : ''}" onclick="setSelection('clean')">
-                                <input type="radio" name="selection" value="clean">
-                                <div class="selection-radio"></div>
-                                <div class="selection-label">
-                                    <div class="selection-label-title">Clean Instrumental</div>
-                                    <div class="selection-label-desc">No backing vocals</div>
-                                </div>
-                            </label>
-                            <label class="selection-option ${selectedOption === 'with_backing' ? 'selected' : ''}" onclick="setSelection('with_backing')">
-                                <input type="radio" name="selection" value="with_backing">
-                                <div class="selection-radio"></div>
-                                <div class="selection-label">
-                                    <div class="selection-label-title">With Backing Vocals</div>
-                                    <div class="selection-label-desc">All backing vocals included</div>
-                                </div>
-                            </label>
-                            ${hasOriginal ? `
-                            <label class="selection-option ${selectedOption === 'original' ? 'selected' : ''}" onclick="setSelection('original')">
-                                <input type="radio" name="selection" value="original">
-                                <div class="selection-radio"></div>
-                                <div class="selection-label">
-                                    <div class="selection-label-title">Original Audio</div>
-                                    <div class="selection-label-desc">Full original with lead vocals</div>
-                                </div>
-                            </label>
-                            ` : ''}
-                            ${hasCustom ? `
-                            <label class="selection-option ${selectedOption === 'custom' ? 'selected' : ''}" onclick="setSelection('custom')">
-                                <input type="radio" name="selection" value="custom">
-                                <div class="selection-radio"></div>
-                                <div class="selection-label">
-                                    <div class="selection-label-title">Custom</div>
-                                    <div class="selection-label-desc">${muteRegions.length} regions muted</div>
-                                </div>
-                            </label>
-                            ` : ''}
-                            ${hasUploaded ? `
-                            <label class="selection-option ${selectedOption === 'uploaded' ? 'selected' : ''}" onclick="setSelection('uploaded')">
-                                <input type="radio" name="selection" value="uploaded">
-                                <div class="selection-radio"></div>
-                                <div class="selection-label">
-                                    <div class="selection-label-title">Uploaded</div>
-                                    <div class="selection-label-desc">${escapeHtml(uploadedFilename)}</div>
-                                </div>
-                            </label>
-                            ` : ''}
-                        </div>
-                        <button class="btn btn-primary submit-btn" id="submit-btn" onclick="submitSelection()">
-                            ✓ Confirm & Continue
-                        </button>
-                    </div>
-                </div>
-            `;
-            // Setup after render
-            if (waveformData) {
-                resizeCanvas();
-                drawWaveform();
-                setupWaveformInteraction();
-            }
-            // Setup audio state - add listeners when element changes
-            const audio = document.getElementById('audio-player');
-            if (audio) {
-                // Check if this is a new audio element (DOM was rebuilt)
-                if (audio !== currentAudioElement) {
-                    audio.addEventListener('timeupdate', onTimeUpdate);
-                    audio.addEventListener('play', onAudioPlay);
-                    audio.addEventListener('pause', onAudioPause);
-                    audio.addEventListener('ended', onAudioEnded);
-                    currentAudioElement = audio;
-                }
-                // Restore playback position and state after audio is ready
-                audio.addEventListener('loadeddata', function onLoaded() {
-                    audio.currentTime = currentTime;
-                    if (wasPlaying) {
-                        audio.play().catch(() => {});
-                    }
-                }, { once: true });
-                // If already loaded (cached), set time directly
-                if (audio.readyState >= 2) {
-                    audio.currentTime = currentTime;
-                    if (wasPlaying) {
-                        audio.play().catch(() => {});
-                    }
-                }
-            }
-        }
-        function resizeCanvas() {
-            const canvas = document.getElementById('waveform-canvas');
-            const container = document.getElementById('waveform-container');
-            const area = document.getElementById('waveform-area');
-            if (!canvas || !container || !area) return;
-            // Set canvas width based on container width * zoom level
-            canvas.width = container.clientWidth * zoomLevel;
-            canvas.height = container.clientHeight;
-            // Update area width to match
-            area.style.width = `${zoomLevel * 100}%`;
-        }
-        function drawWaveform() {
-            const canvas = document.getElementById('waveform-canvas');
-            if (!canvas || !waveformData) return;
-            const ctx = canvas.getContext('2d');
-            const { amplitudes } = waveformData;
-            const width = canvas.width;
-            const height = canvas.height;
-            const centerY = height / 2;
-            const bgColor = getComputedStyle(document.documentElement).getPropertyValue('--waveform-bg').trim();
-            // Clear
-            ctx.fillStyle = bgColor;
-            ctx.fillRect(0, 0, width, height);
-            // Draw center line
-            ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
-            ctx.setLineDash([4, 4]);
-            ctx.beginPath();
-            ctx.moveTo(0, centerY);
-            ctx.lineTo(width, centerY);
-            ctx.stroke();
-            ctx.setLineDash([]);
-            // Draw waveform bars
-            const barWidth = width / amplitudes.length;
-            amplitudes.forEach((amp, i) => {
-                const x = i * barWidth;
-                const barHeight = Math.max(2, amp * height * 0.9);
-                const y = centerY - barHeight / 2;
-                const time = (i / amplitudes.length) * duration;
-                // Check regions
-                const inMuteRegion = muteRegions.some(r => time >= r.start_seconds && time <= r.end_seconds);
-                const inAudibleSegment = analysisData.analysis.audible_segments.some(
-                    s => time >= s.start_seconds && time <= s.end_seconds
-                );
-                if (inMuteRegion) {
-                    // Muted regions blend into background - very subtle
-                    ctx.fillStyle = 'rgba(13, 17, 23, 0.8)';
-                } else if (inAudibleSegment) {
-                    ctx.fillStyle = '#ec4899'; // pink for detected backing vocals
-                } else {
-                    ctx.fillStyle = '#60a5fa'; // blue for rest
-                }
-                ctx.fillRect(x, y, Math.max(1, barWidth - 0.5), barHeight);
-            });
-        }
-        function setupWaveformInteraction() {
-            const canvas = document.getElementById('waveform-canvas');
-            const area = document.getElementById('waveform-area');
-            if (!canvas || !area) return;
-            canvas.onmousedown = (e) => {
-                const rect = canvas.getBoundingClientRect();
-                const x = e.clientX - rect.left;
-                // Guard against invalid duration
-                if (!Number.isFinite(duration) || duration <= 0 || !Number.isFinite(rect.width) || rect.width <= 0) {
-                    return;
-                }
-                const time = (x / rect.width) * duration;
-                // Shift+drag to select mute region
-                if (e.shiftKey) {
-                    isDragging = true;
-                    dragStartTime = time;
-                    selectionStartX = x;
-                    updateSelectionOverlay(x, x);
-                    showSelectionOverlay(true);
-                } else {
-                    // Regular click to seek and play
-                    seekTo(time);
-                }
-            };
-            canvas.onmousemove = (e) => {
-                if (!isDragging) return;
-                const rect = canvas.getBoundingClientRect();
-                const x = e.clientX - rect.left;
-                updateSelectionOverlay(selectionStartX, x);
-            };
-            const endDrag = (e) => {
-                if (!isDragging) return;
-                const rect = canvas.getBoundingClientRect();
-                const x = e.clientX - rect.left;
-                // Guard against invalid duration
-                if (!Number.isFinite(duration) || duration <= 0 || !Number.isFinite(rect.width) || rect.width <= 0) {
-                    isDragging = false;
-                    showSelectionOverlay(false);
-                    return;
-                }
-                const time = (x / rect.width) * duration;
-                const start = Math.min(dragStartTime, time);
-                const end = Math.max(dragStartTime, time);
-                if (end - start > 0.5) {
-                    addRegion(start, end);
-                }
-                isDragging = false;
-                showSelectionOverlay(false);
-            };
-            canvas.onmouseup = endDrag;
-            canvas.onmouseleave = (e) => {
-                if (isDragging) endDrag(e);
-            };
-        }
-        function updateSelectionOverlay(startX, endX) {
-            const overlay = document.getElementById('selection-overlay');
-            if (!overlay) return;
-            const left = Math.min(startX, endX);
-            const width = Math.abs(endX - startX);
-            overlay.style.left = `${left}px`;
-            overlay.style.width = `${width}px`;
-        }
-        function showSelectionOverlay(show) {
-            const overlay = document.getElementById('selection-overlay');
-            if (overlay) {
-                overlay.classList.toggle('hidden', !show);
-            }
-        }
-        function startPlayheadAnimation() {
-            const animate = () => {
-                updatePlayhead();
-                animationFrameId = requestAnimationFrame(animate);
-            };
-            animate();
-        }
-        function stopPlayheadAnimation() {
-            if (animationFrameId) {
-                cancelAnimationFrame(animationFrameId);
-                animationFrameId = null;
-            }
-        }
-        function updatePlayhead() {
-            const playhead = document.getElementById('playhead');
-            const canvas = document.getElementById('waveform-canvas');
-            const audio = document.getElementById('audio-player');
-            if (!playhead || !canvas || !audio) return;
-            currentTime = audio.currentTime;
-            // Update time display regardless of playhead position validity
-            const timeEl = document.getElementById('current-time');
-            if (timeEl) timeEl.textContent = formatTime(currentTime);
-            // Guard against NaN/Infinity when calculating playhead position
-            if (!Number.isFinite(duration) || duration <= 0 || !Number.isFinite(canvas.width) || canvas.width <= 0) {
-                playhead.style.left = '0px';
-            } else {
-                const x = Math.max(0, Math.min((currentTime / duration) * canvas.width, canvas.width));
-                playhead.style.left = `${x}px`;
-            }
-            playhead.classList.remove('hidden');
-        }
-        function updatePlayButton() {
-            const btn = document.getElementById('play-btn');
-            if (btn) btn.innerHTML = isPlaying ? '⏸' : '▶';
-        }
-        function togglePlayPause() {
-            const audio = document.getElementById('audio-player');
-            if (!audio) return;
-            if (isPlaying) {
-                audio.pause();
-            } else {
-                audio.play();
-            }
-        }
-        function seekTo(time, autoPlay = true) {
-            const audio = document.getElementById('audio-player');
-            // Guard against non-finite time values (NaN, Infinity)
-            if (!audio || !Number.isFinite(time)) return;
-            audio.currentTime = time;
-            currentTime = time;
-            updatePlayhead();
-            // Auto-play when seeking via click (if not already playing)
-            if (autoPlay && !isPlaying) {
-                audio.play();
-            }
-        }
-        function onTimeUpdate(e) {
-            currentTime = e.target.currentTime;
-        }
-        function setActiveAudio(type) {
-            const audio = document.getElementById('audio-player');
-            if (!audio) return;
-            const wasPlaying = !audio.paused;
-            const time = audio.currentTime;
-            // Pause before changing source
-            audio.pause();
-            activeAudio = type;
-            // Update toggle button states using data attributes (robust detection)
-            document.querySelectorAll('.audio-toggle').forEach(btn => {
-                const btnType = btn.dataset.audioType || 'custom';
-                btn.classList.toggle('active', btnType === type);
-            });
-            // Change source and restore playback
-            audio.src = getAudioUrl();
-            audio.addEventListener('loadeddata', function onLoaded() {
-                audio.currentTime = time;
-                if (wasPlaying) {
-                    audio.play().catch(() => {});
-                }
-            }, { once: true });
-        }
-        function getAudioUrl() {
-            const stemTypes = {
-                original: 'original',
-                backing: 'backing_vocals',
-                clean: 'clean_instrumental',
-                with_backing: 'with_backing',
-                custom: 'custom_instrumental',
-                uploaded: 'uploaded_instrumental'
-            };
-            const stemType = stemTypes[activeAudio] || stemTypes.backing;
-            // Cloud mode uses /audio-stream/{stem_type}, local mode uses /api/audio/{stem_type}
-            const isCloudMode = !!encodedBaseApiUrl;
-            const url = isCloudMode
-                ? `${API_BASE}/audio-stream/${stemType}`
-                : `/api/audio/${stemType}`;
-            return addTokenToUrl(url);
-        }
-        function formatTime(seconds) {
-            // Guard against NaN/Infinity
-            if (!Number.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 addRegion(start, end) {
-            muteRegions.push({ start_seconds: start, end_seconds: end });
-            muteRegions.sort((a, b) => a.start_seconds - b.start_seconds);
-            mergeOverlappingRegions();
-            hasCustom = false; // Invalidate custom when regions change
-            // Just redraw waveform instead of full render to preserve scroll position
-            drawWaveform();
-            updateMuteRegionsPanel();
-        }
-        function updateMuteRegionsPanel() {
-            // Update only the mute regions panel without full DOM rebuild
-            const panel = document.querySelector('.mute-panel');
-            if (!panel) return;
-            const segments = analysisData.analysis.audible_segments;
-            const hasSegments = segments.length > 0;
-            // Build mute regions list HTML
-            let regionsListHtml = '';
-            if (muteRegions.length > 0) {
-                regionsListHtml = '<div class="mute-regions-list">' +
-                    muteRegions.map((r, i) =>
-                        '<div class="mute-region-tag">' +
-                        '<span onclick="seekTo(' + r.start_seconds + ', true)" style="cursor: pointer">' +
-                        formatTime(r.start_seconds) + ' – ' + formatTime(r.end_seconds) + '</span>' +
-                        '<button onclick="removeRegion(' + i + ')">×</button>' +
-                        '</div>'
-                    ).join('') +
-                    '</div>';
-            } else {
-                regionsListHtml = '<div style="color: var(--text-muted); font-size: 0.75rem;">' +
-                    (hasSegments ? 'Click segments below or <kbd class="kbd">Shift</kbd> + drag on waveform' : 'No backing vocals detected – clean instrumental recommended') +
-                    '</div>';
-            }
-            // Build quick segments HTML
-            let quickSegmentsHtml = '';
-            if (hasSegments) {
-                quickSegmentsHtml = '<div class="quick-segments">' +
-                    segments.slice(0, 8).map((seg, i) =>
-                        '<button class="quick-segment-btn" onclick="addSegmentAsRegion(' + i + ')" title="Add to mute regions">' +
-                        formatTime(seg.start_seconds) + ' – ' + formatTime(seg.end_seconds) +
-                        '</button>'
-                    ).join('') +
-                    (segments.length > 8 ? '<span style="font-size: 0.7rem; color: var(--text-muted); padding: 3px;">+' + (segments.length - 8) + ' more</span>' : '') +
-                    '</div>';
-            }
-            // Build header buttons
-            let headerButtons = '';
-            if (muteRegions.length > 0) {
-                headerButtons = '<div style="display: flex; gap: 6px;">' +
-                    '<button class="btn btn-sm btn-secondary" onclick="clearAllRegions()">Clear</button>' +
-                    (!hasCustom ? '<button class="btn btn-sm btn-primary" id="create-custom-btn" onclick="createCustomInstrumental()">Create Custom</button>' : '') +
-                    '</div>';
-            }
-            panel.innerHTML =
-                '<div class="mute-panel-header">' +
-                '<span class="mute-panel-title">Mute Regions ' + (muteRegions.length > 0 ? '(' + muteRegions.length + ')' : '') + '</span>' +
-                headerButtons +
-                '</div>' +
-                regionsListHtml +
-                quickSegmentsHtml;
-        }
-        function addSegmentAsRegion(index) {
-            const seg = analysisData.analysis.audible_segments[index];
-            if (seg) {
-                addRegion(seg.start_seconds, seg.end_seconds);
-            }
-        }
-        function removeRegion(index) {
-            muteRegions.splice(index, 1);
-            hasCustom = false;
-            drawWaveform();
-            updateMuteRegionsPanel();
-        }
-        function clearAllRegions() {
-            muteRegions = [];
-            hasCustom = false;
-            drawWaveform();
-            updateMuteRegionsPanel();
-        }
-        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 + 0.5) {
-                    last.end_seconds = Math.max(last.end_seconds, curr.end_seconds);
-                } else {
-                    merged.push(curr);
-                }
-            }
-            muteRegions = merged;
-        }
-        function setSelection(value) {
-            selectedOption = value;
-            render();
-        }
-        function setZoom(level) {
-            const container = document.getElementById('waveform-container');
-            const oldScrollRatio = container ? container.scrollLeft / (container.scrollWidth - container.clientWidth || 1) : 0;
-            zoomLevel = level;
-            // Update zoom button states directly (avoid full render)
-            document.querySelectorAll('.zoom-btn').forEach(btn => {
-                const btnLevel = parseInt(btn.textContent);
-                btn.classList.toggle('active', btnLevel === level);
-            });
-            // Resize canvas and redraw
-            resizeCanvas();
-            drawWaveform();
-            // Maintain scroll position proportionally
-            if (container && zoomLevel > 1) {
-                const newMaxScroll = container.scrollWidth - container.clientWidth;
-                container.scrollLeft = oldScrollRatio * newMaxScroll;
-            }
-        }
-        async function handleUpload(event) {
-            const file = event.target.files[0];
-            if (!file) return;
-            // Show upload progress
-            const overlay = document.createElement('div');
-            overlay.className = 'upload-overlay';
-            overlay.id = 'upload-overlay';
-            document.body.appendChild(overlay);
-            const progress = document.createElement('div');
-            progress.className = 'upload-progress';
-            progress.id = 'upload-progress';
-            progress.innerHTML = `
-                <div class="spinner" style="margin: 0 auto 12px;"></div>
-                <div>Uploading ${file.name}...</div>
-                <div style="font-size: 0.8rem; color: var(--text-muted); margin-top: 8px;">Validating duration...</div>
-            `;
-            document.body.appendChild(progress);
-            try {
-                const formData = new FormData();
-                formData.append('file', file);
-                const response = await authFetch(`${API_BASE}/upload-instrumental`, {
-                    method: 'POST',
-                    body: formData
-                });
-                if (!response.ok) {
-                    const data = await response.json();
-                    throw new Error(data.detail || 'Upload failed');
-                }
-                const result = await response.json();
-                hasUploaded = true;
-                uploadedFilename = file.name;
-                activeAudio = 'uploaded';
-                selectedOption = 'uploaded';
-                render();
-                showSuccess(`Uploaded ${file.name} (${result.duration_seconds.toFixed(1)}s)`);
-            } catch (error) {
-                showError(error.message);
-            } finally {
-                // Clean up progress UI
-                document.getElementById('upload-overlay')?.remove();
-                document.getElementById('upload-progress')?.remove();
-                // Reset file input so same file can be uploaded again
-                event.target.value = '';
-            }
-        }
-        function showSuccess(message) {
-            const existing = document.querySelector('.alert-success-toast');
-            if (existing) existing.remove();
-            const el = document.createElement('div');
-            el.className = 'alert-error'; // Reuse error styling but green
-            el.style.background = 'rgba(34, 197, 94, 0.95)';
-            el.textContent = message;
-            document.body.appendChild(el);
-            setTimeout(() => el.remove(), 3000);
-        }
-        async function createCustomInstrumental() {
-            const btn = document.getElementById('create-custom-btn');
-            const audio = document.getElementById('audio-player');
-            const wasPlaying = isPlaying;
-            const time = currentTime;
-            // Pause audio while creating custom instrumental
-            if (audio && !audio.paused) {
-                audio.pause();
-            }
-            if (btn) {
-                btn.disabled = true;
-                btn.textContent = 'Creating...';
-            }
-            try {
-                const response = await authFetch(`${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');
-                }
-                hasCustom = true;
-                selectedOption = 'custom';
-                activeAudio = 'custom';
-                // Render first, then restore playback
-                render();
-                // After render, seek to previous position and optionally resume
-                const newAudio = document.getElementById('audio-player');
-                if (newAudio) {
-                    newAudio.addEventListener('loadeddata', function onLoaded() {
-                        newAudio.removeEventListener('loadeddata', onLoaded);
-                        newAudio.currentTime = time;
-                        if (wasPlaying) {
-                            newAudio.play().catch(() => {});
-                        }
-                    }, { once: true });
-                }
-            } catch (error) {
-                showError(error.message);
-                if (btn) {
-                    btn.disabled = false;
-                    btn.textContent = 'Create Custom';
-                }
-                // Resume playback if there was an error
-                if (wasPlaying && audio) {
-                    audio.play().catch(() => {});
-                }
-            }
-        }
-        async function submitSelection() {
-            const btn = document.getElementById('submit-btn');
-            if (btn) {
-                btn.disabled = true;
-                btn.textContent = 'Submitting...';
-            }
-            try {
-                const response = await authFetch(`${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');
-                }
-                const selectionLabels = {
-                    clean: 'Clean Instrumental',
-                    with_backing: 'With Backing Vocals',
-                    custom: 'Custom',
-                    uploaded: 'Uploaded Instrumental',
-                    original: 'Original Audio'
-                };
-                const selectionLabel = selectionLabels[selectedOption] || selectedOption;
-                document.getElementById('app').innerHTML = `
-                    <div class="success-screen">
-                        <h2>✓ Selection Submitted</h2>
-                        <p>You selected: <strong>${escapeHtml(selectionLabel)}</strong></p>
-                        <p id="close-msg" style="color: var(--text-muted);">Closing in <span id="countdown">2</span>s...</p>
-                    </div>
-                `;
-                // Auto-close window after 2 seconds
-                let countdown = 2;
-                const countdownEl = document.getElementById('countdown');
-                const countdownInterval = setInterval(() => {
-                    countdown--;
-                    if (countdownEl) countdownEl.textContent = countdown;
-                    if (countdown <= 0) {
-                        clearInterval(countdownInterval);
-                        // Try to close the window (works for windows opened by script)
-                        window.close();
-                        // If window.close() didn't work, update message
-                        const msg = document.getElementById('close-msg');
-                        if (msg) msg.textContent = 'You can close this window now.';
-                    }
-                }, 1000);
-            } catch (error) {
-                showError(error.message);
-                if (btn) {
-                    btn.disabled = false;
-                    btn.textContent = '✓ Confirm & Continue';
-                }
-            }
-        }
-        function setupKeyboardShortcuts() {
-            document.addEventListener('keydown', (e) => {
-                // Ignore if typing in input
-                if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
-                switch (e.code) {
-                    case 'Space':
-                        e.preventDefault();
-                        togglePlayPause();
-                        break;
-                    case 'Escape':
-                        // Cancel any in-progress drag selection
-                        if (isDragging) {
-                            isDragging = false;
-                            showSelectionOverlay(false);
-                        }
-                        break;
-                }
-            });
-        }
-        function showError(message) {
-            // Remove any existing error
-            const existing = document.querySelector('.alert-error');
-            if (existing) existing.remove();
-            const errorEl = document.createElement('div');
-            errorEl.className = 'alert-error';
-            errorEl.textContent = message;
-            document.body.appendChild(errorEl);
-            setTimeout(() => errorEl.remove(), 5000);
-        }
-        // Handle window resize
-        window.addEventListener('resize', () => {
-            if (waveformData) {
-                resizeCanvas();
-                drawWaveform();
-            }
-        });
-        // Start
-        init();
-    </script>
-</body>
-</html>

karaoke-gen 0.105.4__py3-none-any.whl → 0.107.0__py3-none-any.whl

karaoke-gen 0.105.4py3-none-any.whl → 0.107.0py3-none-any.whl