feat: add interactive client-side audio trimmer for voice references

index.html

@@ -1024,6 +1024,171 @@
                 display: none; /* Only show toggle trigger on desktop */
             }
         }
+
+        /* ── Premium Audio Trimmer Widget ── */
+        .audio-trimmer-container {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            background: rgba(255, 255, 255, 0.02);
+            border: 1px solid rgba(60, 208, 162, 0.15);
+            border-radius: var(--radius-md);
+            padding: 14px;
+            margin-top: 10px;
+            transition: var(--transition);
+        }
+
+        .trimmer-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+            padding-bottom: 8px;
+        }
+
+        .trimmer-file-info {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            overflow: hidden;
+        }
+
+        .trimmer-file-icon {
+            font-size: 1.1rem;
+        }
+
+        .trimmer-filename {
+            font-size: 0.8rem;
+            color: var(--text-primary);
+            font-weight: 500;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-width: 170px;
+        }
+
+        .btn-clear-trimmer {
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            font-size: 0.9rem;
+            padding: 4px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: var(--transition);
+        }
+
+        .btn-clear-trimmer:hover {
+            color: #ef4444;
+            background: rgba(239, 68, 68, 0.1);
+        }
+
+        .trimmer-waveform-box {
+            position: relative;
+            width: 100%;
+            height: 64px;
+            background: rgba(0, 0, 0, 0.3);
+            border: 1px solid rgba(255, 255, 255, 0.05);
+            border-radius: var(--radius-sm);
+            overflow: hidden;
+        }
+
+        .trimmer-canvas {
+            width: 100%;
+            height: 100%;
+            display: block;
+        }
+
+        .trimmer-duration-info {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 0.75rem;
+            margin-bottom: -4px;
+        }
+
+        .duration-title {
+            color: var(--text-secondary);
+        }
+
+        .duration-val {
+            color: var(--accent-mint);
+            font-family: monospace;
+            font-weight: 700;
+        }
+
+        .trim-slider-group {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+
+        .trim-slider-meta {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 0.75rem;
+            color: var(--text-secondary);
+        }
+
+        .trim-value-label {
+            color: var(--accent-mint);
+            font-family: monospace;
+            font-weight: 600;
+        }
+
+        .trimmer-controls {
+            display: flex;
+            gap: 8px;
+            margin-top: 4px;
+        }
+
+        .btn-trimmer-control {
+            flex: 1;
+            padding: 8px 12px;
+            font-size: 0.75rem;
+            font-weight: 600;
+            border-radius: var(--radius-sm);
+            cursor: pointer;
+            transition: var(--transition);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 6px;
+        }
+
+        .btn-trimmer-play {
+            background: rgba(60, 208, 162, 0.1);
+            border: 1px solid var(--accent-mint);
+            color: var(--accent-mint);
+        }
+
+        .btn-trimmer-play:hover {
+            background: var(--accent-mint);
+            color: #000;
+            box-shadow: 0 0 10px var(--accent-mint-glow);
+        }
+
+        .btn-trimmer-play.playing {
+            background: #ef4444;
+            border-color: #ef4444;
+            color: #fff;
+            box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
+        }
+
+        .btn-trimmer-reset {
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            color: var(--text-secondary);
+        }
+
+        .btn-trimmer-reset:hover {
+            background: rgba(255, 255, 255, 0.1);
+            color: var(--text-primary);
+        }
     </style>
 </head>
 <body>
@@ -1049,6 +1214,48 @@
                         </div>
                     </div>
                     <input type="file" id="audio-file" class="hidden-input" accept="audio/*">
+                    
+                    <!-- Premium Audio Trimmer Widget -->
+                    <div id="audio-trimmer-container" class="audio-trimmer-container" style="display: none;">
+                        <div class="trimmer-header">
+                            <div class="trimmer-file-info">
+                                <span class="trimmer-file-icon">🎵</span>
+                                <span id="trimmer-filename" class="trimmer-filename">audio.wav</span>
+                            </div>
+                            <button type="button" class="btn-clear-trimmer" id="btn-clear-trimmer" title="Remove audio reference">✕</button>
+                        </div>
+                        
+                        <div class="trimmer-waveform-box">
+                            <canvas id="trimmer-canvas" class="trimmer-canvas"></canvas>
+                        </div>
+                        
+                        <div class="trimmer-duration-info">
+                            <span class="duration-title">Trimmed Duration</span>
+                            <span id="trimmer-duration-val" class="duration-val">0.0s / 0.0s</span>
+                        </div>
+                        
+                        <!-- Range sliders -->
+                        <div class="trim-slider-group">
+                            <div class="trim-slider-meta">
+                                <span>Start Trim</span>
+                                <span class="trim-value-label" id="trim-start-val">0.0s</span>
+                            </div>
+                            <input type="range" id="trim-start" class="trim-range-input" min="0" max="100" step="0.1" value="0">
+                        </div>
+                        
+                        <div class="trim-slider-group">
+                            <div class="trim-slider-meta">
+                                <span>End Trim</span>
+                                <span class="trim-value-label" id="trim-end-val">100.0s</span>
+                            </div>
+                            <input type="range" id="trim-end" class="trim-range-input" min="0" max="100" step="0.1" value="100">
+                        </div>
+                        
+                        <div class="trimmer-controls">
+                            <button type="button" id="btn-trimmer-play" class="btn-trimmer-control btn-trimmer-play" title="Play trimmed section">▶ Play Trimmed</button>
+                            <button type="button" id="btn-trimmer-reset" class="btn-trimmer-control btn-trimmer-reset" title="Reset trim selection">🔄 Reset</button>
+                        </div>
+                    </div>
                 </div>
 
                 <!-- Settings Dashboard Parameters -->
@@ -1380,6 +1587,12 @@
         let selectedAudioFile = null;
         let selectedAudioFilename = "";
 
+        // Trimmer state variables
+        let trimmerAudioContext = null;
+        let originalAudioBuffer = null;
+        let trimmerAudioSource = null;
+        let isTrimmerPlaying = false;
+
         // UI nodes
         const sidebar = document.getElementById("app-sidebar");
         const sidebarOverlay = document.getElementById("sidebar-overlay");
@@ -1421,6 +1634,19 @@
         const playerDownload = document.getElementById("player-download");
         const speedButtons = document.querySelectorAll(".btn-speed");
 
+        // Trimmer UI elements
+        const trimmerContainer = document.getElementById("audio-trimmer-container");
+        const trimmerFilename = document.getElementById("trimmer-filename");
+        const btnClearTrimmer = document.getElementById("btn-clear-trimmer");
+        const trimmerCanvas = document.getElementById("trimmer-canvas");
+        const labelTrimmerDuration = document.getElementById("trimmer-duration-val");
+        const sliderTrimStart = document.getElementById("trim-start");
+        const valTrimStart = document.getElementById("trim-start-val");
+        const sliderTrimEnd = document.getElementById("trim-end");
+        const valTrimEnd = document.getElementById("trim-end-val");
+        const btnTrimmerPlay = document.getElementById("btn-trimmer-play");
+        const btnTrimmerReset = document.getElementById("btn-trimmer-reset");
+
         // Guide togglers
         const guideToggle = document.getElementById("guide-toggle");
         const guideBody = document.getElementById("guide-body");
@@ -1532,29 +1758,206 @@
         function handleUploadedFile(file) {
             selectedAudioFile = file;
             selectedAudioFilename = file.name;
-            renderUploadedUI(file.name);
+            loadAudioIntoTrimmer(file);
+        }
+
+        // --- 16-bit PCM WAV Encoder Utility ---
+        function bufferToWav(buffer) {
+            let numOfChan = buffer.numberOfChannels,
+                length = buffer.length * numOfChan * 2 + 44,
+                bufferArr = new ArrayBuffer(length),
+                view = new DataView(bufferArr),
+                channels = [], i, sample,
+                offset = 0,
+                pos = 0;
+
+            function setUint16(data) {
+                view.setUint16(pos, data, true);
+                pos += 2;
+            }
+
+            function setUint32(data) {
+                view.setUint32(pos, data, true);
+                pos += 4;
+            }
+
+            setUint32(0x46464952); // "RIFF"
+            setUint32(length - 8);
+            setUint32(0x45564157); // "WAVE"
+
+            setUint32(0x20746d66); // "fmt "
+            setUint32(16);
+            setUint16(1);
+            setUint16(numOfChan);
+            setUint32(buffer.sampleRate);
+            setUint32(buffer.sampleRate * 2 * numOfChan);
+            setUint16(numOfChan * 2);
+            setUint16(16);
+
+            setUint32(0x61746164); // "data"
+            setUint32(length - pos - 4);
+
+            for (i = 0; i < numOfChan; i++) {
+                channels.push(buffer.getChannelData(i));
+            }
+
+            while (pos < length) {
+                for (i = 0; i < numOfChan; i++) {
+                    sample = Math.max(-1, Math.min(1, channels[i][offset]));
+                    sample = (sample < 0 ? sample * 0x8000 : sample * 0x7FFF);
+                    view.setInt16(pos, sample, true);
+                    pos += 2;
+                }
+                offset++;
+            }
+
+            return new Blob([bufferArr], { type: "audio/wav" });
+        }
+
+        // --- Waveform Rendering ---
+        function drawWaveform(buffer, canvas, startTime, endTime) {
+            const ctx = canvas.getContext("2d");
+            const width = canvas.width;
+            const height = canvas.height;
+            ctx.clearRect(0, 0, width, height);
+
+            const data = buffer.getChannelData(0);
+            const step = Math.ceil(data.length / width);
+            const amp = height / 2;
+            const duration = buffer.duration;
+            const startPercent = startTime / duration;
+            const endPercent = endTime / duration;
+
+            for (let i = 0; i < width; i++) {
+                let min = 1.0;
+                let max = -1.0;
+                for (let j = 0; j < step; j++) {
+                    const idx = i * step + j;
+                    if (idx >= data.length) break;
+                    const datum = data[idx];
+                    if (datum < min) min = datum;
+                    if (datum > max) max = datum;
+                }
+
+                const x = i;
+                const y = amp;
+                const h = Math.max(2, (max - min) * amp * 0.85);
+                const currentPercent = i / width;
+                const isSelected = currentPercent >= startPercent && currentPercent <= endPercent;
+
+                if (isSelected) {
+                    ctx.fillStyle = "#3cd0a2"; // var(--accent-mint)
+                } else {
+                    ctx.fillStyle = "rgba(255, 255, 255, 0.2)";
+                }
+
+                ctx.fillRect(x, y - h / 2, 2, h);
+            }
         }
 
-        function renderUploadedUI(filename) {
-            dropzone.innerHTML = `
-                <div class="file-capsule">
-                    <div class="file-info">
-                        <span>🎵</span>
-                        <span style="overflow: hidden; text-overflow: ellipsis; max-width: 190px;">${filename}</span>
-                    </div>
-                    <button type="button" class="btn-clear" id="btn-clear-upload" title="Remove voice file">✕</button>
-                </div>
-            `;
-            document.getElementById("btn-clear-upload").addEventListener("click", (e) => {
-                e.stopPropagation();
-                clearUploadedFile();
-            });
+        // --- Trimmer Web Audio Previewing ---
+        function playTrimmedSlice(buffer, startTime, endTime, onEndedCallback) {
+            if (!trimmerAudioContext) {
+                trimmerAudioContext = new (window.AudioContext || window.webkitAudioContext)();
+            }
+            
+            stopTrimmerPlay();
+
+            if (trimmerAudioContext.state === "suspended") {
+                trimmerAudioContext.resume();
+            }
+
+            const duration = endTime - startTime;
+            trimmerAudioSource = trimmerAudioContext.createBufferSource();
+            trimmerAudioSource.buffer = buffer;
+            trimmerAudioSource.connect(trimmerAudioContext.destination);
+
+            trimmerAudioSource.start(0, startTime, duration);
+            isTrimmerPlaying = true;
+
+            trimmerAudioSource.onended = () => {
+                isTrimmerPlaying = false;
+                if (onEndedCallback) onEndedCallback();
+            };
         }
 
+        // --- Stop Preview Playback ---
+        function stopTrimmerPlay() {
+            if (trimmerAudioSource) {
+                try {
+                    trimmerAudioSource.stop();
+                } catch (e) {}
+                trimmerAudioSource = null;
+            }
+            isTrimmerPlaying = false;
+        }
+
+        // --- Ingest and Initialize Trimmer ---
+        function loadAudioIntoTrimmer(file) {
+            stopTrimmerPlay();
+            btnTrimmerPlay.innerText = "▶ Play Trimmed";
+            btnTrimmerPlay.classList.remove("playing");
+
+            const reader = new FileReader();
+            reader.onload = async (e) => {
+                const arrayBuffer = e.target.result;
+                try {
+                    updateStatus("Decoding audio file for editor...", "info");
+                    if (!trimmerAudioContext) {
+                        trimmerAudioContext = new (window.AudioContext || window.webkitAudioContext)();
+                    }
+                    
+                    originalAudioBuffer = await trimmerAudioContext.decodeAudioData(arrayBuffer);
+                    const duration = originalAudioBuffer.duration;
+
+                    // Update UI views
+                    dropzone.style.display = "none";
+                    trimmerContainer.style.display = "flex";
+                    trimmerFilename.innerText = selectedAudioFilename;
+
+                    // Configure ranges
+                    sliderTrimStart.min = 0;
+                    sliderTrimStart.max = duration;
+                    sliderTrimStart.step = 0.1;
+                    sliderTrimStart.value = 0;
+
+                    sliderTrimEnd.min = 0;
+                    sliderTrimEnd.max = duration;
+                    sliderTrimEnd.step = 0.1;
+                    sliderTrimEnd.value = duration;
+
+                    valTrimStart.innerText = "0.0s";
+                    valTrimEnd.innerText = duration.toFixed(1) + "s";
+                    labelTrimmerDuration.innerText = duration.toFixed(1) + "s / " + duration.toFixed(1) + "s";
+
+                    // Draw waveform
+                    setTimeout(() => {
+                        trimmerCanvas.width = trimmerCanvas.clientWidth || 250;
+                        trimmerCanvas.height = trimmerCanvas.clientHeight || 64;
+                        drawWaveform(originalAudioBuffer, trimmerCanvas, 0, duration);
+                    }, 50);
+
+                    updateStatus("Audio loaded successfully", "success", false);
+                    setTimeout(hideStatus, 1500);
+
+                } catch (err) {
+                    console.error(err);
+                    updateStatus("Failed to decode audio file for editing", "error", false);
+                }
+            };
+            reader.readAsArrayBuffer(file);
+        }
+
+        // --- Clear Loaded Audio State ---
         function clearUploadedFile() {
+            stopTrimmerPlay();
             selectedAudioFile = null;
             selectedAudioFilename = "";
+            originalAudioBuffer = null;
             audioFileInput.value = "";
+            
+            trimmerContainer.style.display = "none";
+            dropzone.style.display = "flex";
             dropzone.innerHTML = `
                 <span class="upload-icon">📤</span>
                 <div class="upload-text">
@@ -1564,7 +1967,7 @@
             `;
         }
 
-        // Fetch preloaded voices as File
+        // --- Fetch and Buffer Example Voice Clips ---
         async function loadExampleVoice(voicePath, originalFilename) {
             try {
                 updateStatus("Buffering reference voice...", "info");
@@ -1575,7 +1978,7 @@
                 selectedAudioFile = new File([blob], originalFilename, { type: blob.type || "audio/mpeg" });
                 selectedAudioFilename = originalFilename;
                 
-                renderUploadedUI(originalFilename);
+                loadAudioIntoTrimmer(selectedAudioFile);
                 updateStatus("Reference voice mapped", "success", false);
                 setTimeout(hideStatus, 1500);
             } catch (err) {
@@ -1584,6 +1987,90 @@
             }
         }
 
+        // --- Trimmer Range Slider Event Handlers ---
+        function handleTrimSliderChange() {
+            if (!originalAudioBuffer) return;
+            
+            let start = parseFloat(sliderTrimStart.value);
+            let end = parseFloat(sliderTrimEnd.value);
+            const duration = originalAudioBuffer.duration;
+
+            // Maintain at least 0.5s duration
+            if (start >= end - 0.5) {
+                start = Math.max(0, end - 0.5);
+                sliderTrimStart.value = start;
+            }
+            if (end <= start + 0.5) {
+                end = Math.min(duration, start + 0.5);
+                sliderTrimEnd.value = end;
+            }
+
+            valTrimStart.innerText = start.toFixed(1) + "s";
+            valTrimEnd.innerText = end.toFixed(1) + "s";
+            
+            const trimmedDur = end - start;
+            labelTrimmerDuration.innerText = trimmedDur.toFixed(1) + "s / " + duration.toFixed(1) + "s";
+
+            drawWaveform(originalAudioBuffer, trimmerCanvas, start, end);
+            
+            // Stop playing if they change selection
+            if (isTrimmerPlaying) {
+                stopTrimmerPlay();
+                btnTrimmerPlay.innerText = "▶ Play Trimmed";
+                btnTrimmerPlay.classList.remove("playing");
+            }
+        }
+
+        sliderTrimStart.addEventListener("input", handleTrimSliderChange);
+        sliderTrimEnd.addEventListener("input", handleTrimSliderChange);
+
+        // --- Play Trimmed Trigger ---
+        btnTrimmerPlay.addEventListener("click", () => {
+            if (!originalAudioBuffer) return;
+
+            if (isTrimmerPlaying) {
+                stopTrimmerPlay();
+                btnTrimmerPlay.innerText = "▶ Play Trimmed";
+                btnTrimmerPlay.classList.remove("playing");
+            } else {
+                btnTrimmerPlay.innerText = "⏸ Stop";
+                btnTrimmerPlay.classList.add("playing");
+                
+                const start = parseFloat(sliderTrimStart.value);
+                const end = parseFloat(sliderTrimEnd.value);
+                
+                playTrimmedSlice(originalAudioBuffer, start, end, () => {
+                    btnTrimmerPlay.innerText = "▶ Play Trimmed";
+                    btnTrimmerPlay.classList.remove("playing");
+                });
+            }
+        });
+
+        // --- Reset Trim Trigger ---
+        btnTrimmerReset.addEventListener("click", () => {
+            if (!originalAudioBuffer) return;
+            
+            stopTrimmerPlay();
+            btnTrimmerPlay.innerText = "▶ Play Trimmed";
+            btnTrimmerPlay.classList.remove("playing");
+
+            const duration = originalAudioBuffer.duration;
+            sliderTrimStart.value = 0;
+            sliderTrimEnd.value = duration;
+            
+            valTrimStart.innerText = "0.0s";
+            valTrimEnd.innerText = duration.toFixed(1) + "s";
+            labelTrimmerDuration.innerText = duration.toFixed(1) + "s / " + duration.toFixed(1) + "s";
+
+            drawWaveform(originalAudioBuffer, trimmerCanvas, 0, duration);
+        });
+
+        // --- Clear Trimmer Click ---
+        btnClearTrimmer.addEventListener("click", (e) => {
+            e.stopPropagation();
+            clearUploadedFile();
+        });
+
         // Dynamically build Example Capsules
         const examplesContainer = document.getElementById("examples-container");
         EXAMPLES.forEach((ex) => {
@@ -1716,13 +2203,54 @@
             const seed = parseInt(inputSeed.value);
 
             try {
+                // Stop preview audio if playing
+                if (isTrimmerPlaying) {
+                    stopTrimmerPlay();
+                    btnTrimmerPlay.innerText = "▶ Play Trimmed";
+                    btnTrimmerPlay.classList.remove("playing");
+                }
+
                 btnGenerate.disabled = true;
                 btnGenerate.innerHTML = `<div class="alert-spinner"></div> Synthesizing...`;
                 updateStatus("Checking models & processing queues...", "info");
 
                 let uploadedFileData = null;
                 if (selectedAudioFile) {
-                    uploadedFileData = handle_file(selectedAudioFile);
+                    let fileToUpload = selectedAudioFile;
+                    
+                    // If audio has been trimmed, crop the buffer and serialize it to WAV
+                    if (originalAudioBuffer) {
+                        const start = parseFloat(sliderTrimStart.value);
+                        const end = parseFloat(sliderTrimEnd.value);
+                        
+                        // Slicing buffer if trim range is smaller than full duration
+                        if (start > 0 || end < originalAudioBuffer.duration) {
+                            const sampleRate = originalAudioBuffer.sampleRate;
+                            const startSample = Math.floor(start * sampleRate);
+                            const endSample = Math.min(originalAudioBuffer.length, Math.floor(end * sampleRate));
+                            const trimLength = endSample - startSample;
+
+                            if (trimLength > 0) {
+                                const trimmedBuffer = trimmerAudioContext.createBuffer(
+                                    originalAudioBuffer.numberOfChannels,
+                                    trimLength,
+                                    sampleRate
+                                );
+
+                                for (let channel = 0; channel < originalAudioBuffer.numberOfChannels; channel++) {
+                                    const channelData = originalAudioBuffer.getChannelData(channel);
+                                    const trimmedChannelData = trimmedBuffer.getChannelData(channel);
+                                    trimmedChannelData.set(channelData.subarray(startSample, endSample));
+                                }
+
+                                const wavBlob = bufferToWav(trimmedBuffer);
+                                const trimmedName = `trimmed_${selectedAudioFilename.replace(/\.[^/.]+$/, "")}.wav`;
+                                fileToUpload = new File([wavBlob], trimmedName, { type: "audio/wav" });
+                            }
+                        }
+                    }
+                    
+                    uploadedFileData = handle_file(fileToUpload);
                 }
 
                 // Execute Gradio Client request