trysem
/

hush

Model card Files Files and versions

xet

Community

trysem commited on 21 days ago

Commit

0fdd3cf

verified ·

1 Parent(s): c3e7702

Create hush

Browse files

Files changed (1) hide show

hush +983 -0

hush ADDED Viewed

	@@ -0,0 +1,983 @@

+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hush AI | Voice Audio Studio</title>
+    <!-- PWA Setup -->
+    <script>
+        const manifest = {
+            name: "Hush AI Studio", short_name: "Hush Pro", start_url: ".", display: "standalone",
+            background_color: "#0f172a", theme_color: "#8b5cf6",
+            icons: [{ src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' x2='12' y1='19' y2='22'/%3E%3C/svg%3E", sizes: "512x512", type: "image/svg+xml" }]
+        };
+        const manifestLink = document.createElement('link');
+        manifestLink.rel = 'manifest'; manifestLink.href = 'data:application/manifest+json;charset=utf-8,' + encodeURIComponent(JSON.stringify(manifest));
+        document.head.appendChild(manifestLink);
+        if ('serviceWorker' in navigator) {
+            const blob = new Blob(["self.addEventListener('install', (e) => self.skipWaiting()); self.addEventListener('activate', (e) => self.clients.claim()); self.addEventListener('fetch', (e) => {});"], { type: 'application/javascript' });
+            navigator.serviceWorker.register(URL.createObjectURL(blob)).catch(console.error);
+        }
+    </script>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lamejs/1.2.1/lame.min.js"></script>
+    <script>
+        // Updated theme colors to a sleek Violet to signify the Hush engine
+        tailwind.config = { darkMode: 'class', theme: { extend: { colors: { primary: { 50: '#f5f3ff', 100: '#ede9fe', 500: '#8b5cf6', 600: '#7c3aed', 900: '#4c1d95' } } } } }
+    </script>
+    <style>
+        .drag-active { border-color: #8b5cf6 !important; background-color: rgba(139, 92, 246, 0.1) !important; }
+        .hidden { display: none !important; }
+        .spinner { animation: spin 1s linear infinite; }
+        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+        /* Global Scrollbars */
+        ::-webkit-scrollbar { width: 6px; height: 6px; }
+        ::-webkit-scrollbar-track { background: transparent; }
+        ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; }
+        .dark ::-webkit-scrollbar-thumb { background: #334155; }
+        ::-webkit-scrollbar-thumb:hover { background: #64748b; }
+        .dark ::-webkit-scrollbar-thumb:hover { background: #475569; }
+        /* Custom Premium Range Sliders */
+        input[type=range] { -webkit-appearance: none; background: transparent; }
+        input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 8px; background: #cbd5e1; }
+        .dark input[type=range]::-webkit-slider-runnable-track { background: #334155; }
+        input[type=range]::-webkit-slider-thumb {
+            -webkit-appearance: none; height: 18px; width: 18px; border-radius: 50%;
+            background: currentColor; margin-top: -6px; cursor: pointer;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: transform 0.1s;
+        }
+        input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.15); }
+        /* Aesthetic Modern Waveform Horizontal Scrollbar */
+        #waveform > div::-webkit-scrollbar { height: 6px; }
+        #waveform > div::-webkit-scrollbar-track { background: transparent; border-radius: 8px; }
+        #waveform > div::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.5); border-radius: 8px; }
+        .dark #waveform > div::-webkit-scrollbar-thumb { background: rgba(71, 85, 105, 0.6); }
+        #waveform > div::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.8); }
+        .dark #waveform > div::-webkit-scrollbar-thumb:hover { background: rgba(71, 85, 105, 0.9); }
+        /* Spectrogram Plugin styling */
+        #spectrogram { border-top: 1px solid rgba(148, 163, 184, 0.2); margin-top: 4px; }
+        .dark #spectrogram { border-top: 1px solid rgba(51, 65, 85, 0.5); }
+    </style>
+</head>
+<body class="bg-slate-50 dark:bg-slate-900 text-slate-800 dark:text-slate-200 min-h-screen font-sans selection:bg-primary-500 selection:text-white pb-12 overflow-x-hidden transition-colors duration-200">
+    <audio id="ws-audio" class="hidden" crossorigin="anonymous"></audio>
+    <div class="max-w-7xl mx-auto px-4 pt-8">
+        <header class="flex flex-col md:flex-row items-center justify-between mb-6 gap-4 pb-4">
+            <div class="flex items-center gap-4">
+                <div class="inline-flex items-center justify-center p-3 bg-white dark:bg-primary-900/50 rounded-2xl border border-slate-200 dark:border-primary-500/30 text-primary-600 dark:text-primary-500 shadow-[0_0_15px_rgba(139,92,246,0.2)]">
+                    <i data-lucide="mic-off" class="w-6 h-6"></i>
+                    <i data-lucide="sparkles" class="w-4 h-4 absolute transform translate-x-3 -translate-y-3 text-yellow-500 dark:text-yellow-400"></i>
+                </div>
+                <div>
+                    <h1 class="text-3xl font-bold text-slate-900 dark:text-white tracking-tight">Hush AI Studio</h1>
+                    <p class="text-slate-500 dark:text-slate-400 text-sm flex items-center gap-1">
+                        <i data-lucide="shield-check" class="w-3 h-3 text-emerald-500 dark:text-green-400"></i> Local 16kHz Background Speaker Suppression
+                    </p>
+                </div>
+            </div>
+            <div class="flex items-center gap-4 flex-wrap justify-center">
+                <label class="flex items-center gap-2 cursor-pointer group bg-white dark:bg-slate-800 px-3 py-1.5 rounded-lg border border-slate-200 dark:border-slate-700 shadow-sm transition-colors duration-200" title="Processes Left and Right channels independently">
+                    <input type="checkbox" id="stereoCheck" class="w-4 h-4 rounded border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-primary-500 focus:ring-primary-500 cursor-pointer">
+                    <span class="text-sm font-medium text-slate-600 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">Preserve Stereo</span>
+                </label>
+                <label class="flex items-center gap-2 cursor-pointer group bg-white dark:bg-slate-800 px-3 py-1.5 rounded-lg border border-slate-200 dark:border-slate-700 shadow-sm transition-colors duration-200">
+                    <input type="checkbox" id="normalizeCheck" checked class="w-4 h-4 rounded border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-primary-500 focus:ring-primary-500 cursor-pointer">
+                    <span class="text-sm font-medium text-slate-600 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">Auto-Normalize</span>
+                </label>
+                <div class="flex items-center bg-slate-100 dark:bg-slate-900 rounded-lg p-1 border border-slate-200 dark:border-slate-700 shadow-sm transition-colors duration-200">
+                    <button id="formatWav" class="px-3 py-1.5 text-xs font-bold rounded-md text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-white transition-all">WAV</button>
+                    <button id="formatMp3" class="px-3 py-1.5 text-xs font-bold rounded-md bg-primary-600 text-white transition-all shadow-sm">MP3</button>
+                </div>
+                <button id="themeToggle" class="p-2 rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-500 dark:text-slate-400 hover:text-primary-500 transition-colors shadow-sm">
+                    <i data-lucide="sun" class="w-5 h-5 hidden dark:block text-yellow-400"></i>
+                    <i data-lucide="moon" class="w-5 h-5 block dark:hidden"></i>
+                </button>
+            </div>
+        </header>
+        <!-- Aesthetic Pro Controls Dashboard -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+            <!-- Noise Reduction -->
+            <div class="bg-white dark:bg-slate-800/80 p-5 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm hover:shadow-md transition-shadow duration-200 flex flex-col gap-4">
+                <div class="flex justify-between items-center">
+                    <label class="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider flex items-center gap-2"><i data-lucide="cpu" class="w-4 h-4 text-primary-500"></i> Hush Intensity</label>
+                    <div class="flex items-center gap-1.5">
+                        <button id="resetNoise" title="Reset to Default" class="p-1 text-slate-400 hover:text-primary-500 dark:hover:text-primary-400 transition-colors opacity-60 hover:opacity-100 rounded-full hover:bg-slate-100 dark:hover:bg-slate-700/50"><i data-lucide="rotate-ccw" class="w-3 h-3"></i></button>
+                        <span id="noiseLevelValue" class="text-sm text-primary-600 dark:text-primary-400 font-bold bg-primary-50 dark:bg-primary-900/30 px-2 py-0.5 rounded border border-primary-100 dark:border-primary-800/50">100%</span>
+                    </div>
+                </div>
+                <input type="range" id="noiseLevel" min="0" max="100" value="100" class="w-full text-primary-500">
+            </div>
+            <!-- Bass EQ -->
+            <div class="bg-white dark:bg-slate-800/80 p-5 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm hover:shadow-md transition-shadow duration-200 flex flex-col gap-4">
+                <div class="flex justify-between items-center">
+                    <label class="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider flex items-center gap-2"><i data-lucide="speaker" class="w-4 h-4 text-emerald-500"></i> Bass EQ</label>
+                    <div class="flex items-center gap-1.5">
+                        <button id="resetBass" title="Reset to 0dB" class="p-1 text-slate-400 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors opacity-60 hover:opacity-100 rounded-full hover:bg-slate-100 dark:hover:bg-slate-700/50"><i data-lucide="rotate-ccw" class="w-3 h-3"></i></button>
+                        <span id="bassVal" class="text-sm text-emerald-600 dark:text-emerald-400 font-bold bg-emerald-50 dark:bg-emerald-900/30 px-2 py-0.5 rounded border border-emerald-100 dark:border-emerald-800/50">0dB</span>
+                    </div>
+                </div>
+                <input type="range" id="eqBass" min="-12" max="12" value="0" step="0.5" class="w-full text-emerald-500">
+            </div>
+            <!-- Treble EQ -->
+            <div class="bg-white dark:bg-slate-800/80 p-5 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm hover:shadow-md transition-shadow duration-200 flex flex-col gap-4">
+                <div class="flex justify-between items-center">
+                    <label class="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider flex items-center gap-2"><i data-lucide="audio-waveform" class="w-4 h-4 text-amber-500"></i> Treble EQ</label>
+                    <div class="flex items-center gap-1.5">
+                        <button id="resetTreble" title="Reset to 0dB" class="p-1 text-slate-400 hover:text-amber-500 dark:hover:text-amber-400 transition-colors opacity-60 hover:opacity-100 rounded-full hover:bg-slate-100 dark:hover:bg-slate-700/50"><i data-lucide="rotate-ccw" class="w-3 h-3"></i></button>
+                        <span id="trebleVal" class="text-sm text-amber-600 dark:text-amber-400 font-bold bg-amber-50 dark:bg-amber-900/30 px-2 py-0.5 rounded border border-amber-100 dark:border-amber-800/50">0dB</span>
+                    </div>
+                </div>
+                <input type="range" id="eqTreble" min="-12" max="12" value="0" step="0.5" class="w-full text-amber-500">
+            </div>
+            <!-- Output Gain -->
+            <div class="bg-white dark:bg-slate-800/80 p-5 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm hover:shadow-md transition-shadow duration-200 flex flex-col gap-4">
+                <div class="flex justify-between items-center">
+                    <label class="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider flex items-center gap-2"><i data-lucide="volume-2" class="w-4 h-4 text-rose-500"></i> Output Gain</label>
+                    <div class="flex items-center gap-1.5">
+                        <button id="resetGain" title="Reset to 0dB" class="p-1 text-slate-400 hover:text-rose-500 dark:hover:text-rose-400 transition-colors opacity-60 hover:opacity-100 rounded-full hover:bg-slate-100 dark:hover:bg-slate-700/50"><i data-lucide="rotate-ccw" class="w-3 h-3"></i></button>
+                        <span id="gainVal" class="text-sm text-rose-600 dark:text-rose-400 font-bold bg-rose-50 dark:bg-rose-900/30 px-2 py-0.5 rounded border border-rose-100 dark:border-rose-800/50">0dB</span>
+                    </div>
+                </div>
+                <input type="range" id="eqGain" min="-12" max="12" value="0" step="0.5" class="w-full text-rose-500">
+            </div>
+        </div>
+        <main class="grid lg:grid-cols-[300px_1fr] gap-6">
+            <!-- Sidebar: Upload & Queue -->
+            <aside class="flex flex-col gap-4">
+                <div class="flex flex-col gap-2">
+                    <div id="dropzone" class="bg-white dark:bg-transparent border-2 border-dashed border-slate-300 dark:border-slate-600 rounded-2xl p-6 text-center cursor-pointer transition-all duration-200 hover:border-primary-500 dark:hover:border-primary-500 dark:hover:bg-slate-800/80 group">
+                        <input type="file" id="fileInput" accept="audio/*" multiple class="hidden">
+                        <i data-lucide="file-audio" id="dropzoneIcon" class="w-8 h-8 mx-auto text-slate-400 group-hover:text-primary-500 transition-colors mb-2"></i>
+                        <h3 class="font-semibold text-slate-700 dark:text-white text-sm">Add Audio Files</h3>
+                        <p class="text-slate-500 text-xs mt-1">Drag & Drop or Click</p>
+                    </div>
+                    <div id="dropzoneActions" class="hidden flex justify-between items-center px-2 transition-all duration-200">
+                        <span class="text-xs text-emerald-600 dark:text-emerald-400 font-medium flex items-center gap-1"><i data-lucide="check-circle-2" class="w-3 h-3"></i> <span id="dropzoneIndicatorText">Audio added</span></span>
+                        <button id="clearAllBtn" class="text-xs text-red-500 hover:text-red-600 dark:hover:text-red-400 font-medium flex items-center gap-1 transition-colors cursor-pointer z-10"><i data-lucide="trash-2" class="w-3 h-3"></i> Clear All</button>
+                    </div>
+                </div>
+                <div class="bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 flex-1 flex flex-col overflow-hidden max-h-[600px] shadow-sm">
+                    <div class="p-4 border-b border-slate-200 dark:border-slate-700 flex justify-between items-center bg-slate-50 dark:bg-slate-800/90">
+                        <h3 class="font-semibold text-slate-800 dark:text-white flex items-center gap-2"><i data-lucide="list-video" class="w-4 h-4 text-slate-500"></i> Batch Queue</h3>
+                        <span id="queueCount" class="bg-slate-200 dark:bg-slate-700 text-xs px-2 py-0.5 rounded-full text-slate-600 dark:text-slate-300 font-medium">0 files</span>
+                    </div>
+                    <div id="fileList" class="overflow-y-auto flex-1 p-2 space-y-1">
+                        <div class="p-4 text-center text-slate-400 dark:text-slate-500 text-sm italic empty-state">Queue is empty.</div>
+                    </div>
+                    <div class="p-4 border-t border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/90 space-y-3">
+                        <!-- Dynamic Process Button -->
+                        <button id="processBtn" disabled class="w-full flex items-center justify-center gap-2 bg-primary-600 disabled:bg-slate-200 dark:disabled:bg-slate-700 disabled:text-slate-400 dark:disabled:text-slate-500 hover:bg-primary-500 text-white px-4 py-2.5 rounded-xl font-medium transition-all shadow-sm disabled:shadow-none">
+                            <i data-lucide="cpu" class="w-4 h-4"></i> Process
+                        </button>
+                        <button id="downloadZipBtn" class="hidden w-full flex items-center justify-center gap-2 bg-emerald-600 hover:bg-emerald-500 text-white px-4 py-2.5 rounded-xl font-medium transition-all shadow-[0_0_15px_rgba(16,185,129,0.2)]">
+                            <i data-lucide="archive" class="w-4 h-4"></i> Download ZIP
+                        </button>
+                    </div>
+                </div>
+                <p class="text-[10px] text-center text-slate-400 dark:text-slate-500 font-mono mt-[-5px]">
+                    Shortcuts: [Space] Play, [←/→] Seek, [Del] Remove
+                </p>
+            </aside>
+            <!-- Main Workspace -->
+            <section class="bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 flex flex-col overflow-hidden min-h-[400px] shadow-sm">
+                <div id="workspaceEmpty" class="flex-1 flex flex-col items-center justify-center text-slate-400 dark:text-slate-500 p-10">
+                    <i data-lucide="activity" class="w-16 h-16 text-slate-300 dark:text-slate-700 mb-4"></i>
+                    <p class="text-lg text-slate-500 dark:text-slate-400">Select a file from the queue to edit</p>
+                </div>
+                <div id="workspaceActive" class="hidden flex-1 flex flex-col">
+                    <!-- File Header & Playback Modes -->
+                    <div class="p-5 border-b border-slate-200 dark:border-slate-700 flex justify-between items-center bg-slate-50 dark:bg-slate-900/40">
+                        <h2 id="activeFileName" class="text-xl font-bold text-slate-800 dark:text-white truncate max-w-[50%]">filename.wav</h2>
+                        <!-- Toggle modes: Original | Preview (Realtime AI) | Processed -->
+                        <div id="abToggleContainer" class="bg-slate-200 dark:bg-slate-900 p-1 rounded-lg border border-slate-300 dark:border-slate-700 flex items-center shadow-inner">
+                            <button id="btnOriginal" class="px-4 py-1.5 text-xs font-bold rounded-md bg-white dark:bg-slate-700 text-slate-800 dark:text-white transition-all shadow-sm">Original</button>
+                            <button id="btnPreview" class="px-4 py-1.5 text-xs font-bold rounded-md text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-white transition-all" title="Hear AI noise reduction applied in real-time">Live Preview</button>
+                            <button id="btnCleaned" disabled class="px-4 py-1.5 text-xs font-bold rounded-md text-slate-400 dark:text-slate-600 cursor-not-allowed transition-all" title="Must Process first to unlock the final baked file">Processed</button>
+                        </div>
+                    </div>
+                    <!-- Waveform & Spectrogram Area with Zoom -->
+                    <div class="flex-1 flex flex-col justify-center p-6 bg-slate-50 dark:bg-slate-900/20 relative">
+                        <div class="absolute top-4 right-6 flex items-center gap-2 bg-white/90 dark:bg-slate-900/80 px-2 py-1.5 rounded-lg border border-slate-200 dark:border-slate-700 z-10 shadow-sm backdrop-blur">
+                            <i data-lucide="zoom-out" class="w-3 h-3 text-slate-400 dark:text-slate-500"></i>
+                            <input type="range" id="zoomSlider" min="0" max="200" value="0" title="Adjust Zoom (0 = Fit)" class="w-24 accent-primary-500 h-1 bg-slate-200 dark:bg-slate-700 rounded-lg cursor-pointer">
+                            <i data-lucide="zoom-in" class="w-3 h-3 text-slate-400 dark:text-slate-500"></i>
+                        </div>
+                        <!-- Visualization Container -->
+                        <div class="w-full relative">
+                            <div id="waveform"></div>
+                            <div id="spectrogram"></div>
+                        </div>
+                        <div id="timeDisplay" class="absolute bottom-4 right-6 text-xs font-mono text-slate-500 dark:text-slate-400 bg-white/90 dark:bg-slate-900/80 px-2 py-1 rounded shadow-sm border border-slate-200 dark:border-slate-700 z-10">00:00 / 00:00</div>
+                    </div>
+                    <!-- Trimming & Controls -->
+                    <div class="p-5 border-t border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800/80">
+                        <div class="flex flex-col md:flex-row gap-6 items-center justify-between">
+                            <!-- Playback -->
+                            <div class="flex items-center gap-3">
+                                <button id="playBtn" class="w-14 h-14 flex items-center justify-center bg-primary-600 hover:bg-primary-500 text-white rounded-full transition-all shadow-lg hover:scale-105">
+                                    <span id="iconPlayWrap" class="flex items-center justify-center ml-1"><i data-lucide="play" class="w-6 h-6 fill-current"></i></span>
+                                    <span id="iconPauseWrap" class="hidden items-center justify-center"><i data-lucide="pause" class="w-6 h-6 fill-current"></i></span>
+                                </button>
+                            </div>
+                            <!-- Trimming -->
+                            <div class="flex items-center gap-2 flex-1 max-w-xl">
+                                <i data-lucide="scissors" class="w-4 h-4 text-slate-400 dark:text-slate-500"></i>
+                                <div class="flex items-center gap-2 bg-slate-50 dark:bg-slate-900 p-2 rounded-lg border border-slate-200 dark:border-slate-700 flex-1">
+                                    <div class="flex-1 flex flex-col">
+                                        <label class="text-[10px] font-semibold text-slate-500 uppercase ml-1">Start (sec)</label>
+                                        <div class="flex gap-1 mt-0.5">
+                                            <input type="number" id="trimStart" step="0.1" min="0" value="0.0" class="w-full bg-white dark:bg-slate-800 text-slate-900 dark:text-white text-sm px-2 py-1 rounded border border-slate-200 dark:border-slate-600 focus:border-primary-500 outline-none font-mono">
+                                            <button id="setStartBtn" title="Set to current playhead" class="px-2 bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 rounded text-slate-600 dark:text-slate-300 transition-colors"><i data-lucide="map-pin" class="w-3 h-3"></i></button>
+                                        </div>
+                                    </div>
+                                    <div class="w-4 border-t border-slate-300 dark:border-slate-600"></div>
+                                    <div class="flex-1 flex flex-col">
+                                        <label class="text-[10px] font-semibold text-slate-500 uppercase ml-1">End (sec)</label>
+                                        <div class="flex gap-1 mt-0.5">
+                                            <input type="number" id="trimEnd" step="0.1" min="0" value="0.0" class="w-full bg-white dark:bg-slate-800 text-slate-900 dark:text-white text-sm px-2 py-1 rounded border border-slate-200 dark:border-slate-600 focus:border-primary-500 outline-none font-mono">
+                                            <button id="setEndBtn" title="Set to current playhead" class="px-2 bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 rounded text-slate-600 dark:text-slate-300 transition-colors"><i data-lucide="map-pin" class="w-3 h-3"></i></button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- Download Single -->
+                            <div>
+                                <button id="downloadSingleBtn" class="hidden flex items-center gap-2 bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 text-slate-800 dark:text-white px-4 py-3 rounded-lg text-sm font-medium transition-all border border-slate-300 dark:border-transparent">
+                                    <i data-lucide="download" class="w-4 h-4"></i> Save
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </main>
+    </div>
+    <!-- Web Modules -->
+    <script type="module">
+        import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js';
+        import Spectrogram from 'https://unpkg.com/wavesurfer.js@7/dist/plugins/spectrogram.esm.js';
+        // --- HUGGING FACE DIRECT FETCH INTERCEPTOR FOR HUSH INTEGRATION ---
+        if (typeof window.SharedArrayBuffer === 'undefined') { window.SharedArrayBuffer = window.ArrayBuffer; }
+        const originalFetch = window.fetch;
+        window.fetch = async function(...args) {
+            let request = args[0];
+            let reqUrl = typeof request === 'string' ? request : (request && request.url);
+            if (reqUrl && typeof reqUrl === 'string') {
+                let newUrl = null;
+                // Keep WASM engine identical but substitute the DeepFilterNet ONNX with the Hush ONNX Model
+                if (reqUrl.includes('df_bg.wasm')) newUrl = 'https://huggingface.co/trysem/DeepFilterNet3/resolve/main/df_bg.wasm';
+                else if (reqUrl.includes('DeepFilterNet3_onnx.tar.gz')) newUrl = 'https://huggingface.co/weya-ai/hush/resolve/main/onnx/advanced_dfnet16k_model_best_onnx.tar.gz';
+                if (newUrl) args[0] = request instanceof Request ? new Request(newUrl, request) : newUrl;
+            }
+            return originalFetch.apply(this, args);
+        };
+        // --- STATE MANAGEMENT ---
+        const state = {
+            files: [], activeId: null,
+            settings: { format: 'mp3', normalize: true, stereo: false, noiseLevel: 100, bass: 0, treble: 0, gain: 0 },
+            ProcessorClass: null,
+            assetConfigObj: {
+                cdnUrl: 'https://huggingface.co/weya-ai/hush/resolve/main/onnx',
+                modelUrl: 'https://huggingface.co/weya-ai/hush/resolve/main/onnx/advanced_dfnet16k_model_best_onnx.tar.gz',
+                wasmUrl: 'https://huggingface.co/trysem/DeepFilterNet3/resolve/main/df_bg.wasm'
+            },
+            dfNetProc: null, wavesurfer: null, playbackMode: 'original',
+            liveCtx: null, mediaNode: null, liveNodes: {}
+        };
+        // --- UI BINDINGS ---
+        lucide.createIcons();
+        const UI = {
+            dropzone: document.getElementById('dropzone'), fileInput: document.getElementById('fileInput'),
+            dropzoneActions: document.getElementById('dropzoneActions'), dropzoneIndicatorText: document.getElementById('dropzoneIndicatorText'),
+            clearAllBtn: document.getElementById('clearAllBtn'), dropzoneIcon: document.getElementById('dropzoneIcon'),
+            fileList: document.getElementById('fileList'), queueCount: document.getElementById('queueCount'),
+            processBtn: document.getElementById('processBtn'), downloadZipBtn: document.getElementById('downloadZipBtn'),
+            workspaceEmpty: document.getElementById('workspaceEmpty'), workspaceActive: document.getElementById('workspaceActive'),
+            activeFileName: document.getElementById('activeFileName'), playBtn: document.getElementById('playBtn'),
+            iconPlayWrap: document.getElementById('iconPlayWrap'), iconPauseWrap: document.getElementById('iconPauseWrap'),
+            timeDisplay: document.getElementById('timeDisplay'), trimStart: document.getElementById('trimStart'),
+            trimEnd: document.getElementById('trimEnd'), btnOriginal: document.getElementById('btnOriginal'),
+            btnPreview: document.getElementById('btnPreview'), btnCleaned: document.getElementById('btnCleaned'),
+            downloadSingleBtn: document.getElementById('downloadSingleBtn'), themeToggle: document.getElementById('themeToggle'),
+            zoomSlider: document.getElementById('zoomSlider')
+        };
+        // Handles Process Button UI States natively
+        function updateProcessButtonText() {
+            const count = state.files.length;
+            if (count === 0) {
+                UI.processBtn.innerHTML = `<i data-lucide="cpu" class="w-4 h-4"></i> Process`;
+                UI.processBtn.disabled = true;
+            } else if (count === 1) {
+                UI.processBtn.innerHTML = `<i data-lucide="cpu" class="w-4 h-4"></i> Process`;
+                UI.processBtn.disabled = false;
+            } else {
+                UI.processBtn.innerHTML = `<i data-lucide="cpu" class="w-4 h-4"></i> Start Batch Processing`;
+                UI.processBtn.disabled = false;
+            }
+            lucide.createIcons();
+        }
+        function setProcessButtonState(isProcessing, progressStr = '') {
+            if (isProcessing) {
+                UI.processBtn.disabled = true;
+                UI.processBtn.innerHTML = `<i data-lucide="loader-2" class="w-4 h-4 spinner"></i> ${progressStr}`;
+            } else {
+                updateProcessButtonText();
+            }
+            lucide.createIcons();
+        }
+        // --- PRE-LOAD AI MODEL ON STARTUP ---
+        window.addEventListener('DOMContentLoaded', async () => {
+            setProcessButtonState(true, "Loading Hush AI...");
+            try {
+                const dfModule = await import('https://esm.sh/deepfilternet3-noise-filter@1.2.1');
+                state.ProcessorClass = dfModule.DeepFilterNet3Core || dfModule.DeepFilterNoiseFilterProcessor;
+                // MIGRATION: Hush is strictly a 16kHz model
+                state.dfNetProc = new state.ProcessorClass({
+                    sampleRate: 16000, noiseReductionLevel: state.settings.noiseLevel, assetConfig: state.assetConfigObj
+                });
+                await state.dfNetProc.initialize();
+                setProcessButtonState(false);
+            } catch (err) {
+                console.error(err);
+                UI.processBtn.innerHTML = `<i data-lucide="alert-triangle" class="w-4 h-4"></i> AI Error`;
+                lucide.createIcons();
+            }
+        });
+        // --- THEME & SETTINGS LOGIC ---
+        UI.themeToggle.onclick = () => { document.documentElement.classList.toggle('dark'); };
+        document.getElementById('stereoCheck').addEventListener('change', (e) => state.settings.stereo = e.target.checked);
+        document.getElementById('normalizeCheck').addEventListener('change', (e) => state.settings.normalize = e.target.checked);
+        const updateEqLabel = (id, val) => { const v = parseFloat(val); document.getElementById(id).textContent = (v > 0 ? '+' : '') + v + 'dB'; };
+        // Slider Logic
+        document.getElementById('noiseLevel').addEventListener('input', (e) => {
+            state.settings.noiseLevel = parseInt(e.target.value, 10);
+            document.getElementById('noiseLevelValue').textContent = e.target.value + '%';
+            if (state.dfNetProc && state.liveCtx) state.dfNetProc.noiseReductionLevel = state.settings.noiseLevel;
+        });
+        document.getElementById('eqBass').addEventListener('input', (e) => {
+            state.settings.bass = parseFloat(e.target.value); updateEqLabel('bassVal', e.target.value);
+            if(state.liveNodes.bass) state.liveNodes.bass.gain.value = state.settings.bass;
+        });
+        document.getElementById('eqTreble').addEventListener('input', (e) => {
+            state.settings.treble = parseFloat(e.target.value); updateEqLabel('trebleVal', e.target.value);
+            if(state.liveNodes.treble) state.liveNodes.treble.gain.value = state.settings.treble;
+        });
+        document.getElementById('eqGain').addEventListener('input', (e) => {
+            state.settings.gain = parseFloat(e.target.value); updateEqLabel('gainVal', e.target.value);
+            if(state.liveNodes.gain) state.liveNodes.gain.gain.value = Math.pow(10, state.settings.gain / 20);
+        });
+        // Aesthetic Reset Buttons
+        document.getElementById('resetNoise').onclick = () => {
+            state.settings.noiseLevel = 100; document.getElementById('noiseLevel').value = 100;
+            document.getElementById('noiseLevelValue').textContent = '100%';
+            if (state.dfNetProc && state.liveCtx) state.dfNetProc.noiseReductionLevel = 100;
+        };
+        document.getElementById('resetBass').onclick = () => {
+            state.settings.bass = 0; document.getElementById('eqBass').value = 0; updateEqLabel('bassVal', 0);
+            if(state.liveNodes.bass) state.liveNodes.bass.gain.value = 0;
+        };
+        document.getElementById('resetTreble').onclick = () => {
+            state.settings.treble = 0; document.getElementById('eqTreble').value = 0; updateEqLabel('trebleVal', 0);
+            if(state.liveNodes.treble) state.liveNodes.treble.gain.value = 0;
+        };
+        document.getElementById('resetGain').onclick = () => {
+            state.settings.gain = 0; document.getElementById('eqGain').value = 0; updateEqLabel('gainVal', 0);
+            if(state.liveNodes.gain) state.liveNodes.gain.gain.value = 1;
+        };
+        const formatWav = document.getElementById('formatWav');
+        const formatMp3 = document.getElementById('formatMp3');
+        formatWav.onclick = () => { state.settings.format = 'wav'; formatWav.className = 'px-3 py-1.5 text-xs font-bold rounded-md bg-primary-600 text-white transition-all shadow-sm'; formatMp3.className = 'px-3 py-1.5 text-xs font-bold rounded-md text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-white transition-all'; };
+        formatMp3.onclick = () => { state.settings.format = 'mp3'; formatMp3.className = 'px-3 py-1.5 text-xs font-bold rounded-md bg-primary-600 text-white transition-all shadow-sm'; formatWav.className = 'px-3 py-1.5 text-xs font-bold rounded-md text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-white transition-all'; };
+        // --- DRAG & DROP LOGIC ---
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(e => UI.dropzone.addEventListener(e, ev => { ev.preventDefault(); ev.stopPropagation(); }, false));
+        ['dragenter', 'dragover'].forEach(e => UI.dropzone.addEventListener(e, () => UI.dropzone.classList.add('drag-active'), false));
+        ['dragleave', 'drop'].forEach(e => UI.dropzone.addEventListener(e, () => UI.dropzone.classList.remove('drag-active'), false));
+        UI.dropzone.addEventListener('drop', (e) => handleFiles(e.dataTransfer.files));
+        UI.dropzone.addEventListener('click', () => UI.fileInput.click());
+        UI.fileInput.addEventListener('change', (e) => handleFiles(e.target.files));
+        UI.clearAllBtn.onclick = () => {
+            state.files = []; state.activeId = null;
+            UI.workspaceActive.classList.add('hidden'); UI.workspaceEmpty.classList.remove('hidden');
+            if (state.wavesurfer) { state.wavesurfer.destroy(); state.wavesurfer = null; }
+            UI.fileInput.value = ''; renderQueue(); teardownLivePipeline();
+        };
+        document.addEventListener('keydown', (e) => {
+            if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+            if (!state.activeId) return;
+            switch(e.code) {
+                case 'Space': e.preventDefault(); if (state.wavesurfer) state.wavesurfer.playPause(); break;
+                case 'ArrowLeft': e.preventDefault(); if (state.wavesurfer) state.wavesurfer.skip(-5); break;
+                case 'ArrowRight': e.preventDefault(); if (state.wavesurfer) state.wavesurfer.skip(5); break;
+                case 'Delete': case 'Backspace': e.preventDefault(); removeFile(state.activeId); break;
+            }
+        });
+        // --- FILE HANDLING & QUEUE ---
+        function handleFiles(files) {
+            let added = false;
+            for (let f of files) {
+                const ext = f.name.substring(f.name.lastIndexOf('.')).toLowerCase();
+                const validExts = ['.mp3', '.wav', '.ogg', '.aac', '.m4a', '.flac', '.wma', '.aiff', '.mp4'];
+                if (!f.type.startsWith('audio/') && !f.type.startsWith('video/') && !validExts.includes(ext)) {
+                    console.warn('Skipped non-audio file:', f.name);
+                    continue;
+                }
+                const id = 'f_' + Date.now() + Math.random().toString(36).substr(2, 5);
+                state.files.push({
+                    id, file: f, name: f.name, size: f.size, originalUrl: URL.createObjectURL(f),
+                    cleanedUrl: null, status: 'pending', duration: 0, startTrim: 0, endTrim: 0
+                });
+                added = true;
+            }
+            if (added) {
+                renderQueue();
+                if (!state.activeId && state.files.length > 0) selectFile(state.files[0].id);
+            }
+        }
+        function renderQueue() {
+            UI.fileList.innerHTML = '';
+            UI.queueCount.textContent = `${state.files.length} file${state.files.length !== 1 ? 's' : ''}`;
+            if (state.files.length > 0) {
+                UI.dropzoneActions.classList.remove('hidden');
+                UI.dropzoneIndicatorText.textContent = `${state.files.length} file(s) ready`;
+                UI.dropzone.classList.replace('border-slate-300', 'border-primary-400');
+                UI.dropzone.classList.replace('dark:border-slate-600', 'dark:border-primary-500');
+                UI.dropzone.classList.add('bg-primary-50/50', 'dark:bg-primary-900/20');
+                UI.dropzoneIcon.classList.replace('text-slate-400', 'text-primary-500');
+            } else {
+                UI.dropzoneActions.classList.add('hidden');
+                UI.dropzone.classList.replace('border-primary-400', 'border-slate-300');
+                UI.dropzone.classList.replace('dark:border-primary-500', 'dark:border-slate-600');
+                UI.dropzone.classList.remove('bg-primary-50/50', 'dark:bg-primary-900/20');
+                UI.dropzoneIcon.classList.replace('text-primary-500', 'text-slate-400');
+                UI.fileList.innerHTML = '<div class="p-4 text-center text-slate-400 dark:text-slate-500 text-sm italic empty-state">Queue is empty.</div>';
+            }
+            state.files.forEach(item => {
+                const el = document.createElement('div');
+                const isActive = item.id === state.activeId;
+                let icon = '<i data-lucide="clock" class="w-4 h-4 text-slate-400"></i>';
+                if(item.status === 'processing') icon = '<i data-lucide="loader-2" class="w-4 h-4 text-primary-500 spinner"></i>';
+                if(item.status === 'done') icon = '<i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-500 dark:text-emerald-400"></i>';
+                el.className = `p-3 rounded-lg flex items-center justify-between cursor-pointer border transition-all ${isActive ? 'bg-primary-50 dark:bg-primary-900/20 border-primary-500/50' : 'bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 hover:border-slate-300 dark:hover:border-slate-500'}`;
+                el.innerHTML = `
+                    <div class="flex items-center gap-3 overflow-hidden">${icon}<span class="text-sm truncate text-slate-700 dark:text-slate-200 ${isActive ? 'font-semibold' : ''}">${item.name}</span></div>
+                    <button class="p-1 text-slate-400 hover:text-red-500 dark:hover:text-red-400 remove-btn transition-colors" data-id="${item.id}"><i data-lucide="x" class="w-4 h-4"></i></button>
+                `;
+                el.onclick = (e) => { if(!e.target.closest('.remove-btn')) selectFile(item.id); };
+                el.querySelector('.remove-btn').onclick = () => removeFile(item.id);
+                UI.fileList.appendChild(el);
+            });
+            updateProcessButtonText();
+            const doneCount = state.files.filter(f => f.status === 'done').length;
+            UI.downloadZipBtn.classList.toggle('hidden', doneCount < 1);
+        }
+        function removeFile(id) {
+            state.files = state.files.filter(f => f.id !== id);
+            if (state.activeId === id) {
+                state.activeId = null;
+                UI.workspaceActive.classList.add('hidden');
+                UI.workspaceEmpty.classList.remove('hidden');
+                if (state.wavesurfer) state.wavesurfer.destroy();
+                state.wavesurfer = null;
+                teardownLivePipeline();
+            }
+            renderQueue();
+        }
+        // --- WORKSPACE, LIVE PREVIEW & WAVESURFER ---
+        async function selectFile(id) {
+            state.activeId = id; renderQueue();
+            const item = state.files.find(f => f.id === id);
+            UI.workspaceEmpty.classList.add('hidden');
+            UI.workspaceActive.classList.remove('hidden');
+            UI.activeFileName.textContent = item.name;
+            // Manage Processed button state
+            if (item.status === 'done') {
+                UI.btnPreview.classList.add('hidden');
+                UI.btnCleaned.classList.remove('opacity-50', 'cursor-not-allowed', 'text-slate-400', 'dark:text-slate-600');
+                UI.btnCleaned.classList.add('text-slate-500', 'dark:text-slate-400', 'hover:text-slate-800', 'dark:hover:text-white');
+                UI.btnCleaned.disabled = false;
+                UI.btnCleaned.title = "Play the final baked output";
+                UI.downloadSingleBtn.classList.remove('hidden');
+                setPlaybackMode('cleaned', item);
+            } else {
+                UI.btnPreview.classList.remove('hidden');
+                UI.btnCleaned.classList.remove('text-slate-500', 'dark:text-slate-400', 'hover:text-slate-800', 'dark:hover:text-white');
+                UI.btnCleaned.classList.add('opacity-50', 'cursor-not-allowed', 'text-slate-400', 'dark:text-slate-600');
+                UI.btnCleaned.disabled = true;
+                UI.btnCleaned.title = "Must Process first to unlock the final baked file";
+                UI.downloadSingleBtn.classList.add('hidden');
+                setPlaybackMode('original', item);
+            }
+            initWavesurfer(item);
+        }
+        function initWavesurfer(item) {
+            if (state.wavesurfer) state.wavesurfer.destroy();
+            setProcessButtonState(true, "Loading Audio...");
+            // Memory Protection: Spectrogram crashes tabs on massive audio files. Disable if > 15MB.
+            const isMassive = item.size > 15 * 1024 * 1024;
+            const plugins = [];
+            const specContainer = document.getElementById('spectrogram');
+            if (!isMassive) {
+                specContainer.innerHTML = '';
+                plugins.push(
+                    Spectrogram.create({
+                        container: '#spectrogram',
+                        labels: true,
+                        height: 80,
+                        splitChannels: false
+                    })
+                );
+            } else {
+                specContainer.innerHTML = '<div class="flex items-center justify-center h-20 text-xs text-slate-500 bg-slate-900/10 dark:bg-slate-900/40 border border-dashed border-slate-300 dark:border-slate-700 rounded-lg mx-2 mb-2">Spectrogram disabled for massive files to prevent browser memory crash.</div>';
+            }
+            state.wavesurfer = WaveSurfer.create({
+                container: '#waveform', waveColor: '#94a3b8', progressColor: '#8b5cf6',
+                cursorColor: '#a78bfa', barWidth: 2, barGap: 1, barRadius: 2, height: 100, normalize: true,
+                plugins: plugins
+            });
+            const loadUrl = state.playbackMode === 'cleaned' ? item.cleanedUrl : item.originalUrl;
+            state.wavesurfer.load(loadUrl);
+            UI.zoomSlider.value = 0;
+            state.wavesurfer.on('ready', () => {
+                setProcessButtonState(false);
+                const duration = state.wavesurfer.getDuration();
+                if (item.duration === 0) { item.duration = duration; item.endTrim = duration; }
+                UI.trimStart.max = duration; UI.trimEnd.max = duration;
+                UI.trimStart.value = item.startTrim.toFixed(1); UI.trimEnd.value = item.endTrim.toFixed(1);
+                updateTimeDisplay();
+                UI.iconPlayWrap.classList.replace('hidden', 'flex');
+                UI.iconPauseWrap.classList.replace('flex', 'hidden');
+            });
+            state.wavesurfer.on('audioprocess', updateTimeDisplay);
+            state.wavesurfer.on('seek', updateTimeDisplay);
+            state.wavesurfer.on('play', () => { UI.iconPlayWrap.classList.replace('flex', 'hidden'); UI.iconPauseWrap.classList.replace('hidden', 'flex'); });
+            state.wavesurfer.on('pause', () => { UI.iconPauseWrap.classList.replace('flex', 'hidden'); UI.iconPlayWrap.classList.replace('hidden', 'flex'); });
+        }
+        UI.zoomSlider.addEventListener('input', (e) => {
+            if (state.wavesurfer) state.wavesurfer.zoom(Number(e.target.value));
+        });
+        function updateTimeDisplay() {
+            if(!state.wavesurfer) return;
+            const cur = state.wavesurfer.getCurrentTime(), tot = state.wavesurfer.getDuration() || 0;
+            UI.timeDisplay.textContent = `${formatTime(cur)} / ${formatTime(tot)}`;
+            const item = state.files.find(f => f.id === state.activeId);
+            if(item && item.status === 'pending') {
+               if (cur > item.endTrim && state.wavesurfer.isPlaying()) {
+                   state.wavesurfer.pause(); state.wavesurfer.setTime(item.startTrim);
+               }
+            }
+        }
+        function formatTime(sec) { const m = Math.floor(sec / 60), s = Math.floor(sec % 60); return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`; }
+        UI.playBtn.onclick = () => state.wavesurfer && state.wavesurfer.playPause();
+        document.getElementById('setStartBtn').onclick = () => { if(state.wavesurfer){ UI.trimStart.value = state.wavesurfer.getCurrentTime().toFixed(1); saveTrim(); }};
+        document.getElementById('setEndBtn').onclick = () => { if(state.wavesurfer){ UI.trimEnd.value = state.wavesurfer.getCurrentTime().toFixed(1); saveTrim(); }};
+        UI.trimStart.onchange = saveTrim; UI.trimEnd.onchange = saveTrim;
+        function saveTrim() {
+            const item = state.files.find(f => f.id === state.activeId);
+            if(!item || item.status !== 'pending') return;
+            let start = parseFloat(UI.trimStart.value) || 0, end = parseFloat(UI.trimEnd.value) || item.duration;
+            if(start < 0) start = 0; if(end > item.duration) end = item.duration; if(start >= end) start = end - 0.1;
+            UI.trimStart.value = start.toFixed(1); UI.trimEnd.value = end.toFixed(1);
+            item.startTrim = start; item.endTrim = end;
+        }
+        // Live Preview Routing Logic
+        async function setupLivePipeline() {
+            if (!state.liveCtx) {
+                // MIGRATION: 16kHz context for Hush
+                state.liveCtx = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: 16000 });
+                state.liveNodes = {};
+            }
+            if (state.liveCtx.state === 'suspended') await state.liveCtx.resume();
+            const mediaElt = state.wavesurfer.getMediaElement();
+            if (!mediaElt.audioNodeMap) {
+                state.mediaNode = state.liveCtx.createMediaElementSource(mediaElt);
+                mediaElt.audioNodeMap = state.mediaNode;
+            } else {
+                state.mediaNode = mediaElt.audioNodeMap;
+            }
+            state.mediaNode.disconnect();
+            if(state.liveNodes.dfNode) state.liveNodes.dfNode.disconnect();
+            if(state.liveNodes.bass) state.liveNodes.bass.disconnect();
+            if(state.liveNodes.treble) state.liveNodes.treble.disconnect();
+            if(state.liveNodes.gain) state.liveNodes.gain.disconnect();
+            state.liveNodes.dfNode = await state.dfNetProc.createAudioWorkletNode(state.liveCtx);
+            state.liveNodes.bass = state.liveCtx.createBiquadFilter(); state.liveNodes.bass.type = 'lowshelf'; state.liveNodes.bass.frequency.value = 250; state.liveNodes.bass.gain.value = state.settings.bass;
+            state.liveNodes.treble = state.liveCtx.createBiquadFilter(); state.liveNodes.treble.type = 'highshelf'; state.liveNodes.treble.frequency.value = 4000; state.liveNodes.treble.gain.value = state.settings.treble;
+            state.liveNodes.gain = state.liveCtx.createGain(); state.liveNodes.gain.gain.value = Math.pow(10, state.settings.gain / 20);
+            state.mediaNode.connect(state.liveNodes.dfNode);
+            state.liveNodes.dfNode.connect(state.liveNodes.bass);
+            state.liveNodes.bass.connect(state.liveNodes.treble);
+            state.liveNodes.treble.connect(state.liveNodes.gain);
+            state.liveNodes.gain.connect(state.liveCtx.destination);
+        }
+        function teardownLivePipeline() {
+            if (state.mediaNode && state.liveCtx) {
+                state.mediaNode.disconnect();
+                state.mediaNode.connect(state.liveCtx.destination);
+            }
+        }
+        // A/B/Live Toggle Logic
+        UI.btnOriginal.onclick = () => setPlaybackMode('original', state.files.find(f=>f.id===state.activeId));
+        UI.btnPreview.onclick = () => setPlaybackMode('preview', state.files.find(f=>f.id===state.activeId));
+        UI.btnCleaned.onclick = () => { if(!UI.btnCleaned.disabled) setPlaybackMode('cleaned', state.files.find(f=>f.id===state.activeId)); };
+        async function setPlaybackMode(mode, item) {
+            if (!item || !state.wavesurfer) return;
+            state.playbackMode = mode;
+            const baseClass = 'px-4 py-1.5 text-xs font-bold rounded-md transition-all shadow-sm ';
+            const activeClass = 'bg-white dark:bg-slate-700 text-slate-800 dark:text-white';
+            const inactiveClass = 'text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-white';
+            UI.btnOriginal.className = baseClass + (mode === 'original' ? activeClass : inactiveClass);
+            UI.btnPreview.className = baseClass + (mode === 'preview' ? 'bg-fuchsia-600 text-white' : inactiveClass);
+            if (item.status === 'done') {
+                UI.btnCleaned.className = baseClass + (mode === 'cleaned' ? 'bg-primary-600 text-white' : inactiveClass);
+            }
+            if (mode === 'original') state.wavesurfer.setOptions({ waveColor: '#94a3b8', progressColor: '#cbd5e1' });
+            else if (mode === 'preview') state.wavesurfer.setOptions({ waveColor: '#d946ef', progressColor: '#fdf4ff' });
+            else if (mode === 'cleaned') state.wavesurfer.setOptions({ waveColor: '#4c1d95', progressColor: '#8b5cf6' });
+            const curTime = state.wavesurfer.getCurrentTime();
+            const wasPlaying = state.wavesurfer.isPlaying();
+            if (wasPlaying) state.wavesurfer.pause();
+            try {
+                if (mode === 'preview') {
+                    await setupLivePipeline();
+                    if(state.wavesurfer.getMediaElement().src !== item.originalUrl) await state.wavesurfer.load(item.originalUrl);
+                } else {
+                    teardownLivePipeline();
+                    const targetUrl = mode === 'cleaned' ? item.cleanedUrl : item.originalUrl;
+                    if(state.wavesurfer.getMediaElement().src !== targetUrl) await state.wavesurfer.load(targetUrl);
+                }
+                state.wavesurfer.setTime(curTime);
+                if(wasPlaying) state.wavesurfer.play();
+            } catch(e) {
+                console.error(e);
+                alert("Could not switch playback mode.");
+            }
+        }
+        // --- OFFLINE PROCESSING ENGINE ---
+        UI.processBtn.onclick = async () => {
+            const pending = state.files.filter(f => f.status === 'pending');
+            if (pending.length === 0) return;
+            setProcessButtonState(true, "Preparing Hush AI...");
+            try {
+                // MIGRATION: 16kHz for Hush Offline Nodes
+                const offlineProcL = new state.ProcessorClass({ sampleRate: 16000, noiseReductionLevel: state.settings.noiseLevel, assetConfig: state.assetConfigObj });
+                const offlineProcR = new state.ProcessorClass({ sampleRate: 16000, noiseReductionLevel: state.settings.noiseLevel, assetConfig: state.assetConfigObj });
+                await Promise.all([offlineProcL.initialize(), offlineProcR.initialize()]);
+                // MIGRATION: 16kHz context forces browser to downsample audio natively!
+                const audioCtx = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: 16000 });
+                for (let i = 0; i < pending.length; i++) {
+                    const item = pending[i]; item.status = 'processing'; renderQueue();
+                    const tag = `(${i+1}/${pending.length})`;
+                    setProcessButtonState(true, `Decoding Audio ${tag}...`);
+                    await new Promise(r => setTimeout(r, 10)); // Force paint
+                    const arrayBuffer = await item.file.arrayBuffer();
+                    let decodedBuffer = await audioCtx.decodeAudioData(arrayBuffer);
+                    if (item.endTrim > 0 && (item.startTrim > 0 || item.endTrim < decodedBuffer.duration)) {
+                        const startSample = Math.floor(item.startTrim * 16000); // 16kHz sample rate
+                        let endSample = Math.floor(item.endTrim * 16000);
+                        if (endSample > decodedBuffer.length) endSample = decodedBuffer.length;
+                        const len = endSample - startSample;
+                        const trimmed = new AudioContext({sampleRate: 16000}).createBuffer(decodedBuffer.numberOfChannels, len, 16000);
+                        for(let c=0; c<decodedBuffer.numberOfChannels; c++) trimmed.copyToChannel(decodedBuffer.getChannelData(c).subarray(startSample, endSample), c);
+                        decodedBuffer = trimmed;
+                    }
+                    // --- STEREO PRESERVATION LOGIC ---
+                    const isStereoFile = decodedBuffer.numberOfChannels > 1;
+                    const processStereo = state.settings.stereo && isStereoFile;
+                    const channels = processStereo ? 2 : 1;
+                    const offlineCtx = new OfflineAudioContext(channels, decodedBuffer.length, 16000);
+                    const sourceNode = offlineCtx.createBufferSource();
+                    let pipelineTail = null;
+                    if (processStereo) {
+                        sourceNode.buffer = decodedBuffer;
+                        const splitter = offlineCtx.createChannelSplitter(2);
+                        const merger = offlineCtx.createChannelMerger(2);
+                        sourceNode.connect(splitter);
+                        const dfNodeL = await offlineProcL.createAudioWorkletNode(offlineCtx);
+                        const dfNodeR = await offlineProcR.createAudioWorkletNode(offlineCtx);
+                        splitter.connect(dfNodeL, 0, 0);
+                        splitter.connect(dfNodeR, 1, 0);
+                        dfNodeL.connect(merger, 0, 0);
+                        dfNodeR.connect(merger, 0, 1);
+                        pipelineTail = merger;
+                    } else {
+                        if (isStereoFile) {
+                            const mono = offlineCtx.createBuffer(1, decodedBuffer.length, 16000);
+                            const data = mono.getChannelData(0), left = decodedBuffer.getChannelData(0), right = decodedBuffer.getChannelData(1);
+                            for (let j = 0; j < decodedBuffer.length; j++) data[j] = (left[j] + right[j]) / 2;
+                            decodedBuffer = mono; // Memory Optimization! Drops the heavy stereo buffer
+                        }
+                        sourceNode.buffer = decodedBuffer;
+                        const dfNode = await offlineProcL.createAudioWorkletNode(offlineCtx);
+                        sourceNode.connect(dfNode);
+                        pipelineTail = dfNode;
+                    }
+                    // Apply Post-Processing EQ
+                    const bassEq = offlineCtx.createBiquadFilter(); bassEq.type = 'lowshelf'; bassEq.frequency.value = 250; bassEq.gain.value = state.settings.bass;
+                    const trebleEq = offlineCtx.createBiquadFilter(); trebleEq.type = 'highshelf'; trebleEq.frequency.value = 4000; trebleEq.gain.value = state.settings.treble;
+                    const gainNode = offlineCtx.createGain(); gainNode.gain.value = Math.pow(10, state.settings.gain / 20);
+                    pipelineTail.connect(bassEq);
+                    bassEq.connect(trebleEq);
+                    trebleEq.connect(gainNode);
+                    gainNode.connect(offlineCtx.destination);
+                    offlineCtx.suspend(0.1).then(() => { setTimeout(() => offlineCtx.resume(), 100); });
+                    // Memory Protection: Track progress of massive AI rendering
+                    const dur = decodedBuffer.duration;
+                    const interval = Math.max(5, dur / 100);
+                    for (let t = Math.ceil(interval); t < dur; t += interval) {
+                        offlineCtx.suspend(t).then(async () => {
+                            const pct = Math.round((t / dur) * 100);
+                            setProcessButtonState(true, `Cleaning ${tag} - ${pct}%`);
+                            await new Promise(r => setTimeout(r, 0));
+                            offlineCtx.resume();
+                        });
+                    }
+                    sourceNode.start(0);
+                    const renderedBuffer = await offlineCtx.startRendering();
+                    if (state.settings.normalize) {
+                        for(let c=0; c<renderedBuffer.numberOfChannels; c++) {
+                            const dat = renderedBuffer.getChannelData(c);
+                            let max = 0;
+                            for(let j=0; j<dat.length; j++) { if(Math.abs(dat[j]) > max) max = Math.abs(dat[j]); }
+                            if (max > 0) { const multiplier = 0.95 / max; for(let j=0; j<dat.length; j++) dat[j] *= multiplier; }
+                        }
+                    }
+                    let outBlob;
+                    if (state.settings.format === 'mp3') {
+                        outBlob = await encodeToMP3(renderedBuffer, (p) => {
+                            setProcessButtonState(true, `Encoding MP3 ${tag} - ${Math.round(p * 100)}%`);
+                        });
+                    } else {
+                        outBlob = await audioBufferToWav(renderedBuffer, (p) => {
+                            setProcessButtonState(true, `Saving WAV ${tag} - ${Math.round(p * 100)}%`);
+                        });
+                    }
+                    item.cleanedUrl = URL.createObjectURL(outBlob); item.blob = outBlob; item.status = 'done';
+                    decodedBuffer = null;
+                }
+                setProcessButtonState(false); renderQueue();
+                if(state.activeId) selectFile(state.activeId);
+            } catch (err) {
+                console.error(err); alert("An error occurred during processing. The file may be too large for browser memory limits."); setProcessButtonState(false);
+            }
+        };
+        // --- HIGH-PERFORMANCE ASYNC ENCODERS ---
+        async function audioBufferToWav(buffer, onProgress) {
+            const numOfChan = buffer.numberOfChannels, len = buffer.length * numOfChan * 2 + 44;
+            const view = new DataView(new ArrayBuffer(len)), channels = [];
+            let offset = 0, pos = 0;
+            const setU16 = d => { view.setUint16(offset, d, true); offset += 2; };
+            const setU32 = d => { view.setUint32(offset, d, true); offset += 4; };
+            setU32(0x46464952); setU32(len - 8); setU32(0x45564157); setU32(0x20746d66); setU32(16); setU16(1); setU16(numOfChan);
+            setU32(buffer.sampleRate); setU32(buffer.sampleRate * 2 * numOfChan); setU16(numOfChan * 2); setU16(16); setU32(0x61746164); setU32(len - pos - 4);
+            for(let i=0; i<numOfChan; i++) channels.push(buffer.getChannelData(i));
+            const chunk = buffer.sampleRate * 5;
+            while(pos < buffer.length) {
+                let end = Math.min(pos + chunk, buffer.length);
+                while(pos < end) {
+                    for(let i=0; i<numOfChan; i++) {
+                        let s = Math.max(-1, Math.min(1, channels[i][pos]));
+                        setU16(s < 0 ? s * 0x8000 : s * 0x7FFF);
+                    }
+                    pos++;
+                }
+                if(onProgress) onProgress(pos / buffer.length);
+                await new Promise(r => setTimeout(r, 0)); // Prevents UI freeze
+            }
+            return new Blob([view.buffer], { type: "audio/wav" });
+        }
+        async function encodeToMP3(audioBuffer, onProgress) {
+            const encoder = new lamejs.Mp3Encoder(1, audioBuffer.sampleRate, 192);
+            const samples = audioBuffer.getChannelData(0);
+            const mp3Data = [];
+            const blockSize = 11520; // Massive Memory Fix: Process strictly in small 10-frame sliding windows
+            const chunkBuffer = new Int16Array(blockSize);
+            for (let i = 0; i < samples.length; i += blockSize) {
+                const end = Math.min(i + blockSize, samples.length);
+                const view = chunkBuffer.subarray(0, end - i);
+                for (let j = 0; j < view.length; j++) {
+                    let s = samples[i + j];
+                    s = Math.max(-1, Math.min(1, s));
+                    view[j] = s < 0 ? s * 0x8000 : s * 0x7FFF;
+                }
+                const buf = encoder.encodeBuffer(view);
+                if (buf.length > 0) mp3Data.push(buf);
+                // Yield control to browser UI every ~3 seconds of audio
+                if (i % (audioBuffer.sampleRate * 3) < blockSize) {
+                    if(onProgress) onProgress(i / samples.length);
+                    await new Promise(r => setTimeout(r, 0));
+                }
+            }
+            const flush = encoder.flush(); if (flush.length > 0) mp3Data.push(flush);
+            return new Blob(mp3Data, { type: 'audio/mp3' });
+        }
+        // --- DOWNLOAD ACTIONS ---
+        UI.downloadSingleBtn.onclick = () => {
+            const item = state.files.find(f => f.id === state.activeId);
+            if(!item || !item.cleanedUrl) return;
+            const ext = state.settings.format === 'mp3' ? '.mp3' : '.wav';
+            const a = document.createElement('a'); a.href = item.cleanedUrl; a.download = `Hush_Cleaned_${item.name.replace(/\.[^/.]+$/, "")}${ext}`; a.click();
+        };
+        UI.downloadZipBtn.onclick = async () => {
+            const doneFiles = state.files.filter(f => f.status === 'done');
+            if(doneFiles.length === 0) return;
+            const oldHtml = UI.downloadZipBtn.innerHTML;
+            UI.downloadZipBtn.disabled = true;
+            UI.downloadZipBtn.innerHTML = `<i data-lucide="loader-2" class="w-4 h-4 spinner"></i> Zipping...`;
+            lucide.createIcons();
+            await new Promise(r => setTimeout(r, 10)); // Force UI Paint
+            const zip = new JSZip(); const ext = state.settings.format === 'mp3' ? '.mp3' : '.wav';
+            doneFiles.forEach(f => { zip.file(`Hush_Cleaned_${f.name.replace(/\.[^/.]+$/, "")}${ext}`, f.blob); });
+            const content = await zip.generateAsync({type:"blob"});
+            UI.downloadZipBtn.disabled = false;
+            UI.downloadZipBtn.innerHTML = oldHtml;
+            lucide.createIcons();
+            const a = document.createElement('a'); a.href = URL.createObjectURL(content); a.download = "HushAI_Batch.zip"; a.click();
+        };
+    </script>
+</body>
+</html>