| <!DOCTYPE html> |
| <html lang="en" class="dark"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>DeepFilterNet Pro | Offline Audio Studio</title> |
| |
| |
| <script> |
| const manifest = { |
| name: "DeepFilterNet Pro", |
| short_name: "DFN Pro", |
| start_url: ".", |
| display: "standalone", |
| background_color: "#0f172a", |
| theme_color: "#3b82f6", |
| icons: [{ |
| src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' 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 swCode = ` |
| self.addEventListener('install', (e) => self.skipWaiting()); |
| self.addEventListener('activate', (e) => self.clients.claim()); |
| self.addEventListener('fetch', (e) => {}); |
| `; |
| const blob = new Blob([swCode], { 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> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| colors: { primary: { 50: '#eff6ff', 100: '#dbeafe', 500: '#3b82f6', 600: '#2563eb', 900: '#1e3a8a' } } |
| } |
| } |
| } |
| </script> |
| <style> |
| .drag-active { border-color: #3b82f6 !important; background-color: rgba(59, 130, 246, 0.1) !important; } |
| .hidden { display: none !important; } |
| .spinner { animation: spin 1s linear infinite; } |
| @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } |
| |
| ::-webkit-scrollbar { width: 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; } |
| </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"> |
| |
| <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(59,130,246,0.2)]"> |
| <i data-lucide="mic" 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">DeepFilterNet Pro</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 & Offline processing |
| </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"> |
| <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 bg-primary-600 text-white transition-all shadow-sm">WAV</button> |
| <button id="formatMp3" 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">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> |
|
|
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8"> |
| |
| <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-3"> |
| <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> Noise Reduction |
| </label> |
| <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">100%</span> |
| </div> |
| <input type="range" id="noiseLevel" min="0" max="100" value="100" class="w-full accent-primary-500 h-2 bg-slate-200 dark:bg-slate-700 rounded-lg cursor-pointer mt-1"> |
| </div> |
|
|
| |
| <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-3"> |
| <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> |
| <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">0dB</span> |
| </div> |
| <input type="range" id="eqBass" min="-12" max="12" value="0" step="0.5" class="w-full accent-emerald-500 h-2 bg-slate-200 dark:bg-slate-700 rounded-lg cursor-pointer mt-1"> |
| </div> |
|
|
| |
| <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-3"> |
| <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> |
| <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">0dB</span> |
| </div> |
| <input type="range" id="eqTreble" min="-12" max="12" value="0" step="0.5" class="w-full accent-amber-500 h-2 bg-slate-200 dark:bg-slate-700 rounded-lg cursor-pointer mt-1"> |
| </div> |
|
|
| |
| <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-3"> |
| <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> |
| <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">0dB</span> |
| </div> |
| <input type="range" id="eqGain" min="-12" max="12" value="0" step="0.5" class="w-full accent-rose-500 h-2 bg-slate-200 dark:bg-slate-700 rounded-lg cursor-pointer mt-1"> |
| </div> |
| </div> |
|
|
| <main class="grid lg:grid-cols-[300px_1fr] gap-6"> |
| |
| <aside class="flex flex-col gap-4"> |
| <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:bg-slate-800/80 group"> |
| <input type="file" id="fileInput" accept="audio/*" multiple class="hidden"> |
| <i data-lucide="file-audio" 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 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"> |
| <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> Start Processing |
| </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> |
|
|
| |
| <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"> |
| |
| <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-[60%]">filename.wav</h2> |
| |
| |
| <div id="abToggleContainer" class="hidden 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="btnCleaned" 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">Cleaned</button> |
| </div> |
| </div> |
|
|
| |
| <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> |
|
|
| <div id="waveform" class="w-full"></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">00:00 / 00:00</div> |
| </div> |
|
|
| |
| <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"> |
| |
| |
| <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> |
|
|
| |
| <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> |
| |
| |
| <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> |
|
|
| |
| <div id="globalStatus" class="hidden absolute inset-0 bg-white/90 dark:bg-slate-900/80 backdrop-blur-sm z-50 flex flex-col items-center justify-center rounded-2xl"> |
| <i data-lucide="loader-2" class="w-12 h-12 text-primary-500 spinner mb-4"></i> |
| <h3 id="globalStatusTitle" class="text-xl font-bold text-slate-900 dark:text-white mb-2">Initializing AI Engine...</h3> |
| <p id="globalStatusDesc" class="text-slate-500 dark:text-slate-400 text-sm max-w-sm text-center">Loading DeepFilterNet WebAssembly core.</p> |
| |
| <div class="w-64 bg-slate-200 dark:bg-slate-800 rounded-full h-2 mt-6 overflow-hidden border border-slate-300 dark:border-slate-700"> |
| <div id="globalProgressBar" class="bg-primary-500 h-2 rounded-full transition-all duration-300" style="width: 0%"></div> |
| </div> |
| </div> |
|
|
| </section> |
| </main> |
| </div> |
|
|
| <script type="module"> |
| import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js'; |
| |
| |
| 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; |
| 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/trysem/DeepFilterNet3/resolve/main/DeepFilterNet3_onnx.tar.gz'; |
| if (newUrl) args[0] = request instanceof Request ? new Request(newUrl, request) : newUrl; |
| } |
| return originalFetch.apply(this, args); |
| }; |
| |
| |
| const state = { |
| files: [], |
| activeId: null, |
| settings: { format: 'wav', normalize: true, noiseLevel: 100, bass: 0, treble: 0, gain: 0 }, |
| dfNetProc: null, |
| wavesurfer: null, |
| playbackMode: 'original' |
| }; |
| |
| |
| lucide.createIcons(); |
| const UI = { |
| dropzone: document.getElementById('dropzone'), fileInput: document.getElementById('fileInput'), |
| 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'), abToggle: document.getElementById('abToggleContainer'), |
| btnOriginal: document.getElementById('btnOriginal'), btnCleaned: document.getElementById('btnCleaned'), |
| downloadSingleBtn: document.getElementById('downloadSingleBtn'), globalStatus: document.getElementById('globalStatus'), |
| statusTitle: document.getElementById('globalStatusTitle'), statusDesc: document.getElementById('globalStatusDesc'), |
| progressBar: document.getElementById('globalProgressBar'), themeToggle: document.getElementById('themeToggle'), |
| zoomSlider: document.getElementById('zoomSlider') |
| }; |
| |
| |
| UI.themeToggle.onclick = () => { document.documentElement.classList.toggle('dark'); }; |
| |
| document.getElementById('noiseLevel').addEventListener('input', (e) => { |
| state.settings.noiseLevel = parseInt(e.target.value, 10); |
| document.getElementById('noiseLevelValue').textContent = e.target.value + '%'; |
| }); |
| 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'; }; |
| document.getElementById('eqBass').addEventListener('input', (e) => { state.settings.bass = parseFloat(e.target.value); updateEqLabel('bassVal', e.target.value); }); |
| document.getElementById('eqTreble').addEventListener('input', (e) => { state.settings.treble = parseFloat(e.target.value); updateEqLabel('trebleVal', e.target.value); }); |
| document.getElementById('eqGain').addEventListener('input', (e) => { state.settings.gain = parseFloat(e.target.value); updateEqLabel('gainVal', e.target.value); }); |
| |
| |
| 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'; }; |
| |
| |
| ['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)); |
| |
| |
| 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; |
| } |
| }); |
| |
| |
| function handleFiles(files) { |
| let added = false; |
| for (let f of files) { |
| if (!f.type.startsWith('audio/')) continue; |
| const id = 'f_' + Date.now() + Math.random().toString(36).substr(2, 5); |
| state.files.push({ |
| id, file: f, name: f.name, originalUrl: URL.createObjectURL(f), |
| cleanedUrl: null, status: 'pending', duration: 0, startTrim: 0, endTrim: 0 |
| }); |
| added = true; |
| } |
| if (added) { |
| renderQueue(); |
| UI.processBtn.disabled = false; |
| 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.fileList.innerHTML = '<div class="p-4 text-center text-slate-400 dark:text-slate-500 text-sm italic empty-state">Queue is empty.</div>'; |
| UI.processBtn.disabled = true; |
| return; |
| } |
| |
| 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); |
| }); |
| lucide.createIcons(); |
| |
| 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; |
| } |
| renderQueue(); |
| } |
| |
| |
| 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; |
| |
| if (item.status === 'done') { |
| UI.abToggle.classList.remove('hidden'); |
| UI.downloadSingleBtn.classList.remove('hidden'); |
| setPlaybackMode('cleaned', item); |
| } else { |
| UI.abToggle.classList.add('hidden'); |
| UI.downloadSingleBtn.classList.add('hidden'); |
| setPlaybackMode('original', item); |
| } |
| |
| initWavesurfer(item); |
| } |
| |
| function initWavesurfer(item) { |
| if (state.wavesurfer) state.wavesurfer.destroy(); |
| |
| state.wavesurfer = WaveSurfer.create({ |
| container: '#waveform', |
| waveColor: '#94a3b8', |
| progressColor: '#3b82f6', |
| cursorColor: '#60a5fa', |
| barWidth: 2, |
| barGap: 1, |
| barRadius: 2, |
| height: 120, |
| normalize: true, |
| }); |
| |
| const loadUrl = state.playbackMode === 'cleaned' ? item.cleanedUrl : item.originalUrl; |
| state.wavesurfer.load(loadUrl); |
| |
| |
| UI.zoomSlider.value = 0; |
| |
| state.wavesurfer.on('ready', () => { |
| 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.remove('hidden'); |
| UI.iconPlayWrap.classList.add('flex'); |
| UI.iconPauseWrap.classList.add('hidden'); |
| UI.iconPauseWrap.classList.remove('flex'); |
| }); |
| |
| state.wavesurfer.on('audioprocess', updateTimeDisplay); |
| state.wavesurfer.on('seek', updateTimeDisplay); |
| |
| |
| state.wavesurfer.on('play', () => { |
| UI.iconPlayWrap.classList.add('hidden'); |
| UI.iconPlayWrap.classList.remove('flex'); |
| UI.iconPauseWrap.classList.remove('hidden'); |
| UI.iconPauseWrap.classList.add('flex'); |
| }); |
| state.wavesurfer.on('pause', () => { |
| UI.iconPauseWrap.classList.add('hidden'); |
| UI.iconPauseWrap.classList.remove('flex'); |
| UI.iconPlayWrap.classList.remove('hidden'); |
| UI.iconPlayWrap.classList.add('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(); |
| const 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); |
| const 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) return; |
| UI.trimStart.value = state.wavesurfer.getCurrentTime().toFixed(1); |
| saveTrim(); |
| }; |
| document.getElementById('setEndBtn').onclick = () => { |
| if(!state.wavesurfer) return; |
| 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; |
| let 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; |
| } |
| |
| |
| UI.btnOriginal.onclick = () => setPlaybackMode('original', state.files.find(f=>f.id===state.activeId)); |
| UI.btnCleaned.onclick = () => setPlaybackMode('cleaned', state.files.find(f=>f.id===state.activeId)); |
| |
| function setPlaybackMode(mode, item) { |
| if (!item || !state.wavesurfer) return; |
| state.playbackMode = mode; |
| |
| if (mode === 'original') { |
| UI.btnOriginal.className = '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'; |
| UI.btnCleaned.className = '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'; |
| state.wavesurfer.setOptions({ waveColor: '#94a3b8', progressColor: '#cbd5e1' }); |
| } else { |
| UI.btnCleaned.className = 'px-4 py-1.5 text-xs font-bold rounded-md bg-primary-600 text-white transition-all shadow-sm'; |
| UI.btnOriginal.className = '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'; |
| state.wavesurfer.setOptions({ waveColor: '#1e3a8a', progressColor: '#3b82f6' }); |
| } |
| |
| const curTime = state.wavesurfer.getCurrentTime(); |
| const wasPlaying = state.wavesurfer.isPlaying(); |
| |
| state.wavesurfer.load(mode === 'cleaned' ? item.cleanedUrl : item.originalUrl).then(() => { |
| state.wavesurfer.setTime(curTime); |
| if(wasPlaying) state.wavesurfer.play(); |
| }); |
| } |
| |
| |
| function setGlobalStatus(show, title='', desc='', progress=0) { |
| if (!show) { UI.globalStatus.classList.add('hidden'); return; } |
| UI.globalStatus.classList.remove('hidden'); |
| UI.statusTitle.textContent = title; |
| UI.statusDesc.textContent = desc; |
| UI.progressBar.style.width = `${progress}%`; |
| } |
| |
| UI.processBtn.onclick = async () => { |
| const pending = state.files.filter(f => f.status === 'pending'); |
| if (pending.length === 0) return; |
| |
| setGlobalStatus(true, "Initializing AI Engine...", "Loading DeepFilterNet WebAssembly core.", 10); |
| |
| try { |
| if (!state.dfNetProc) { |
| const dfModule = await import('https://esm.sh/deepfilternet3-noise-filter@1.2.1'); |
| const ProcessorClass = dfModule.DeepFilterNet3Core || dfModule.DeepFilterNoiseFilterProcessor; |
| |
| state.dfNetProc = new ProcessorClass({ |
| sampleRate: 48000, |
| noiseReductionLevel: state.settings.noiseLevel, |
| assetConfig: { cdnUrl: 'https://huggingface.co/trysem/DeepFilterNet3/resolve/main' } |
| }); |
| await state.dfNetProc.initialize(); |
| } else { |
| state.dfNetProc.noiseReductionLevel = state.settings.noiseLevel; |
| } |
| |
| const audioCtx = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: 48000 }); |
| |
| for (let i = 0; i < pending.length; i++) { |
| const item = pending[i]; |
| item.status = 'processing'; |
| renderQueue(); |
| |
| const p = 10 + Math.floor((i / pending.length) * 90); |
| setGlobalStatus(true, `Processing File ${i+1} of ${pending.length}`, `Cleaning: ${item.name}`, p); |
| |
| 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 * 48000); |
| let endSample = Math.floor(item.endTrim * 48000); |
| if (endSample > decodedBuffer.length) endSample = decodedBuffer.length; |
| |
| const len = endSample - startSample; |
| const trimmed = new AudioContext({sampleRate:48000}).createBuffer(decodedBuffer.numberOfChannels, len, 48000); |
| for(let c=0; c<decodedBuffer.numberOfChannels; c++){ |
| trimmed.copyToChannel(decodedBuffer.getChannelData(c).subarray(startSample, endSample), c); |
| } |
| decodedBuffer = trimmed; |
| } |
| |
| const offlineCtx = new OfflineAudioContext(1, decodedBuffer.length, 48000); |
| const sourceNode = offlineCtx.createBufferSource(); |
| |
| if (decodedBuffer.numberOfChannels > 1) { |
| const mono = offlineCtx.createBuffer(1, decodedBuffer.length, 48000); |
| 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; |
| sourceNode.buffer = mono; |
| } else { |
| sourceNode.buffer = decodedBuffer; |
| } |
| |
| |
| const dfNode = await state.dfNetProc.createAudioWorkletNode(offlineCtx); |
| |
| 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); |
| |
| sourceNode.connect(dfNode); |
| dfNode.connect(bassEq); |
| bassEq.connect(trebleEq); |
| trebleEq.connect(gainNode); |
| gainNode.connect(offlineCtx.destination); |
| |
| sourceNode.start(0); |
| |
| const renderedBuffer = await offlineCtx.startRendering(); |
| |
| if (state.settings.normalize) { |
| const dat = renderedBuffer.getChannelData(0); |
| 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') { |
| setGlobalStatus(true, `Encoding MP3...`, `Compressing: ${item.name}`, p+5); |
| outBlob = encodeToMP3(renderedBuffer); |
| } else { |
| outBlob = audioBufferToWav(renderedBuffer); |
| } |
| |
| item.cleanedUrl = URL.createObjectURL(outBlob); |
| item.blob = outBlob; |
| item.status = 'done'; |
| decodedBuffer = null; |
| } |
| |
| setGlobalStatus(false); |
| renderQueue(); |
| if(state.activeId) selectFile(state.activeId); |
| |
| } catch (err) { |
| console.error(err); |
| alert("An error occurred during processing. Check console."); |
| setGlobalStatus(false); |
| } |
| }; |
| |
| |
| function audioBufferToWav(buffer) { |
| 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)); |
| |
| while(pos < buffer.length) { |
| 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++; |
| } |
| return new Blob([view.buffer], { type: "audio/wav" }); |
| } |
| |
| function encodeToMP3(audioBuffer) { |
| const encoder = new lamejs.Mp3Encoder(1, audioBuffer.sampleRate, 192); |
| const samples = audioBuffer.getChannelData(0); |
| const mp3Data = []; |
| const blockSize = 1152; |
| const int16Samples = new Int16Array(samples.length); |
| |
| for (let i = 0; i < samples.length; i++) { |
| let s = Math.max(-1, Math.min(1, samples[i])); |
| int16Samples[i] = s < 0 ? s * 0x8000 : s * 0x7FFF; |
| } |
| |
| for (let i = 0; i < int16Samples.length; i += blockSize) { |
| const chunk = int16Samples.subarray(i, i + blockSize); |
| const buf = encoder.encodeBuffer(chunk); |
| if (buf.length > 0) mp3Data.push(buf); |
| } |
| |
| const flush = encoder.flush(); |
| if (flush.length > 0) mp3Data.push(flush); |
| return new Blob(mp3Data, { type: 'audio/mp3' }); |
| } |
| |
| |
| 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 = `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 zip = new JSZip(); |
| const ext = state.settings.format === 'mp3' ? '.mp3' : '.wav'; |
| |
| doneFiles.forEach(f => { |
| const safeName = `Cleaned_${f.name.replace(/\.[^/.]+$/, "")}${ext}`; |
| zip.file(safeName, f.blob); |
| }); |
| |
| setGlobalStatus(true, "Zipping files...", "Compressing your audio batch"); |
| const content = await zip.generateAsync({type:"blob"}); |
| setGlobalStatus(false); |
| |
| const a = document.createElement('a'); |
| a.href = URL.createObjectURL(content); |
| a.download = "DeepFilterNet_Batch.zip"; |
| a.click(); |
| }; |
| </script> |
| </body> |
| </html> |
