File size: 19,840 Bytes

8bdeb34

<!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 Audio Cleaner</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide@latest"></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 */
        .spinner {
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body class="bg-slate-900 text-slate-200 min-h-screen font-sans selection:bg-primary-500 selection:text-white pb-12">
    
    <div class="max-w-4xl mx-auto px-4 pt-12">
        
        <!-- Header Section -->
        <header class="text-center mb-10">
            <div class="inline-flex items-center justify-center p-3 bg-primary-900/50 rounded-2xl mb-4 border border-primary-500/30 text-primary-500">
                <i data-lucide="mic" class="w-8 h-8"></i>
                <i data-lucide="sparkles" class="w-5 h-5 ml-1 absolute transform translate-x-4 -translate-y-4 text-yellow-400"></i>
            </div>
            <h1 class="text-4xl font-bold mb-3 text-white">DeepFilterNet Offline Cleaner</h1>
            <p class="text-slate-400 max-w-2xl mx-auto text-lg">
                Remove background noise and enhance speech clarity entirely in your browser. 
                Powered by the <a href="https://github.com/Rikorose/DeepFilterNet" target="_blank" class="text-primary-500 hover:underline">DeepFilterNet3 AI model</a>. 
                <span class="text-green-400 font-medium text-sm block mt-2">
                    <i data-lucide="shield-check" class="w-4 h-4 inline align-text-bottom"></i> 
                    100% Client-Side Privacy: Your audio never leaves your device.
                </span>
            </p>
        </header>

        <!-- Main Content Area -->
        <main class="bg-slate-800 rounded-2xl border border-slate-700 shadow-xl overflow-hidden">
            
            <!-- Settings & Controls -->
            <div class="p-6 border-b border-slate-700 bg-slate-800/50 flex flex-col md:flex-row items-center justify-between gap-4">
                <div class="flex items-center gap-3">
                    <i data-lucide="sliders-horizontal" class="w-5 h-5 text-slate-400"></i>
                    <label for="noiseLevel" class="text-sm font-medium">Noise Reduction Level:</label>
                    <span id="noiseLevelValue" class="text-primary-500 font-bold w-8 text-center">100</span>
                </div>
                <input type="range" id="noiseLevel" min="0" max="100" value="100" class="w-full md:w-64 accent-primary-500 h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer">
            </div>

            <!-- Upload Zone -->
            <div class="p-8">
                <div id="dropzone" class="border-2 border-dashed border-slate-600 rounded-xl p-10 text-center cursor-pointer transition-all duration-200 hover:border-primary-500 hover:bg-slate-700/30 group">
                    <input type="file" id="fileInput" accept="audio/*" class="hidden">
                    <i data-lucide="upload-cloud" class="w-12 h-12 mx-auto text-slate-400 group-hover:text-primary-500 transition-colors mb-4"></i>
                    <h3 class="text-xl font-semibold text-white mb-2">Drag & Drop Audio File</h3>
                    <p class="text-slate-400 text-sm">or click to browse from your device</p>
                    <p class="text-slate-500 text-xs mt-4">Supports WAV, MP3, AAC, OGG</p>
                </div>

                <!-- Status & Progress UI -->
                <div id="statusContainer" class="hidden mt-8 p-6 bg-slate-900/50 rounded-xl border border-slate-700">
                    <div class="flex items-center gap-4 mb-2">
                        <i data-lucide="loader-2" id="statusIcon" class="w-6 h-6 text-primary-500 spinner"></i>
                        <h4 id="statusTitle" class="text-lg font-medium text-white">Initializing Engine...</h4>
                    </div>
                    <p id="statusMessage" class="text-sm text-slate-400 ml-10">Loading WebAssembly and DeepFilterNet3 neural network models...</p>
                </div>

                <!-- Results UI -->
                <div id="resultsContainer" class="hidden mt-8 space-y-6">
                    <div class="grid md:grid-cols-2 gap-6">
                        <!-- Original Audio -->
                        <div class="bg-slate-900 rounded-xl p-5 border border-slate-700">
                            <h4 class="text-sm font-semibold text-slate-400 mb-3 uppercase tracking-wider flex items-center gap-2">
                                <i data-lucide="headphones" class="w-4 h-4"></i> Original Audio
                            </h4>
                            <audio id="originalAudio" controls class="w-full h-10 rounded outline-none"></audio>
                        </div>
                        
                        <!-- Cleaned Audio -->
                        <div class="bg-primary-900/20 rounded-xl p-5 border border-primary-500/30">
                            <h4 class="text-sm font-semibold text-primary-400 mb-3 uppercase tracking-wider flex items-center gap-2">
                                <i data-lucide="check-circle-2" class="w-4 h-4"></i> Cleaned Audio
                            </h4>
                            <audio id="cleanedAudio" controls class="w-full h-10 rounded outline-none"></audio>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="flex justify-center pt-4">
                        <button id="downloadBtn" class="flex items-center gap-2 bg-primary-600 hover:bg-primary-500 text-white px-6 py-3 rounded-xl font-medium transition-all shadow-lg shadow-primary-500/20 hover:shadow-primary-500/40">
                            <i data-lucide="download" class="w-5 h-5"></i>
                            Download Cleaned Audio (.wav)
                        </button>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- Application Logic -->
    <script type="module">
        // --- 1. SHARED-ARRAY-BUFFER POLYFILL ---
        if (typeof window.SharedArrayBuffer === 'undefined') {
            window.SharedArrayBuffer = window.ArrayBuffer;
        }

        // --- 2. HUGGING FACE DIRECT FETCH INTERCEPTOR ---
        // Since you uploaded the files directly to the root of your Hugging Face repo,
        // we intercept the library's requests (which expect nested /v2/pkg/ folders) 
        // and strictly redirect them to your raw Hugging Face file URLs.
        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')) {
                    console.log("Redirecting WASM fetch to Hugging Face...");
                    newUrl = 'https://huggingface.co/trysem/DeepFilterNet3/resolve/main/df_bg.wasm';
                } else if (reqUrl.includes('DeepFilterNet3_onnx.tar.gz')) {
                    console.log("Redirecting Model fetch to Hugging Face...");
                    newUrl = 'https://huggingface.co/trysem/DeepFilterNet3/resolve/main/DeepFilterNet3_onnx.tar.gz';
                }

                // If we have a match, swap the URL while preserving all original fetch configurations
                if (newUrl) {
                    if (request instanceof Request) {
                        // Rebuild the request to keep internal library headers/signals intact
                        args[0] = new Request(newUrl, request);
                    } else {
                        args[0] = newUrl;
                    }
                }
            }
            
            // Let normal requests pass completely unfiltered
            return originalFetch.apply(this, args);
        };

        // Initialize Icons
        lucide.createIcons();

        // UI Elements
        const dropzone = document.getElementById('dropzone');
        const fileInput = document.getElementById('fileInput');
        const noiseLevel = document.getElementById('noiseLevel');
        const noiseLevelValue = document.getElementById('noiseLevelValue');
        
        const statusContainer = document.getElementById('statusContainer');
        const statusIcon = document.getElementById('statusIcon');
        const statusTitle = document.getElementById('statusTitle');
        const statusMessage = document.getElementById('statusMessage');
        
        const resultsContainer = document.getElementById('resultsContainer');
        const originalAudio = document.getElementById('originalAudio');
        const cleanedAudio = document.getElementById('cleanedAudio');
        const downloadBtn = document.getElementById('downloadBtn');

        let cleanedBlobUrl = null;

        // Settings Listener
        noiseLevel.addEventListener('input', (e) => {
            noiseLevelValue.textContent = e.target.value;
        });

        // Drag and Drop Listeners
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dropzone.addEventListener(eventName, preventDefaults, false);
        });

        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }

        ['dragenter', 'dragover'].forEach(eventName => {
            dropzone.addEventListener(eventName, () => dropzone.classList.add('drag-active'), false);
        });

        ['dragleave', 'drop'].forEach(eventName => {
            dropzone.addEventListener(eventName, () => dropzone.classList.remove('drag-active'), false);
        });

        dropzone.addEventListener('drop', (e) => {
            let dt = e.dataTransfer;
            let files = dt.files;
            if (files.length > 0) handleFile(files[0]);
        });

        dropzone.addEventListener('click', () => fileInput.click());
        fileInput.addEventListener('change', function() {
            if (this.files.length > 0) handleFile(this.files[0]);
        });

        function setStatus(state, title, message) {
            statusContainer.classList.remove('hidden');
            resultsContainer.classList.add('hidden');
            statusTitle.textContent = title;
            statusMessage.textContent = message;

            if (state === 'error') {
                statusIcon.setAttribute('data-lucide', 'alert-circle');
                statusIcon.classList.remove('spinner');
                statusIcon.classList.add('text-red-500');
            } else if (state === 'done') {
                statusIcon.setAttribute('data-lucide', 'check-circle-2');
                statusIcon.classList.remove('spinner');
                statusIcon.classList.replace('text-primary-500', 'text-green-500');
            } else {
                statusIcon.setAttribute('data-lucide', 'loader-2');
                statusIcon.classList.add('spinner');
                statusIcon.classList.replace('text-green-500', 'text-primary-500');
                statusIcon.classList.replace('text-red-500', 'text-primary-500');
            }
            lucide.createIcons();
        }

        async function handleFile(file) {
            if (!file.type.startsWith('audio/')) {
                setStatus('error', 'Invalid File Type', 'Please upload a valid audio file format.');
                return;
            }

            try {
                // Prepare original audio player
                const originalUrl = URL.createObjectURL(file);
                originalAudio.src = originalUrl;
                
                // 1. Decode original file into AudioBuffer
                setStatus('loading', 'Decoding Audio...', 'Processing raw audio data...');
                const audioData = await file.arrayBuffer();
                
                // DeepFilterNet targets 48kHz for optimal quality
                const targetSampleRate = 48000;
                const decodeCtx = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: targetSampleRate });
                const audioBuffer = await decodeCtx.decodeAudioData(audioData);

                setStatus('loading', 'Loading AI Model...', 'Fetching WebAssembly & Weights (~17MB)...');
                
                // Import v1.2.1 which features SIMD optimizations and accurate APIs
                const dfModule = await import('https://esm.sh/deepfilternet3-noise-filter@1.2.1');
                const ProcessorClass = dfModule.DeepFilterNet3Core || dfModule.DeepFilterNoiseFilterProcessor;
                
                if (!ProcessorClass) throw new Error("Could not initialize the DeepFilterNet AI Processor.");

                // Initialize DeepFilterNet configuration
                const level = parseInt(noiseLevel.value, 10);
                
                const proc = new ProcessorClass({
                    sampleRate: targetSampleRate,
                    noiseReductionLevel: level,
                    // The fetch interceptor above handles the exact routing, 
                    // but we provide your base URL here to satisfy the config requirements.
                    assetConfig: { cdnUrl: 'https://huggingface.co/trysem/DeepFilterNet3/resolve/main' }
                });

                // Execute Initialization
                await proc.initialize();

                // 2. Set up Offline Rendering Context for faster-than-realtime processing
                setStatus('loading', 'Cleaning Audio...', 'Running the neural network over the audio frames...');
                
                // We use mono processing as DeepFilterNet is single-channel optimized for voice
                const offlineCtx = new OfflineAudioContext(1, audioBuffer.length, targetSampleRate);
                const sourceNode = offlineCtx.createBufferSource();
                
                // Mixdown to mono if stereo
                if (audioBuffer.numberOfChannels > 1) {
                    const monoBuffer = offlineCtx.createBuffer(1, audioBuffer.length, targetSampleRate);
                    const monoData = monoBuffer.getChannelData(0);
                    const left = audioBuffer.getChannelData(0);
                    const right = audioBuffer.getChannelData(1);
                    for (let i = 0; i < audioBuffer.length; i++) {
                        monoData[i] = (left[i] + right[i]) / 2;
                    }
                    sourceNode.buffer = monoBuffer;
                } else {
                    sourceNode.buffer = audioBuffer;
                }

                // Connect to DeepFilter AI node
                const dfNode = await proc.createAudioWorkletNode(offlineCtx);
                sourceNode.connect(dfNode);
                dfNode.connect(offlineCtx.destination);
                sourceNode.start(0);

                // Render out the cleaned audio
                const renderedBuffer = await offlineCtx.startRendering();

                // 3. Convert resulting buffer to a downloadable WAV
                setStatus('loading', 'Finalizing...', 'Encoding cleaned audio to WAV format...');
                const wavBlob = audioBufferToWav(renderedBuffer);
                
                if (cleanedBlobUrl) URL.revokeObjectURL(cleanedBlobUrl);
                cleanedBlobUrl = URL.createObjectURL(wavBlob);
                
                // Show UI
                setStatus('done', 'Processing Complete!', 'Your audio has been successfully cleaned.');
                cleanedAudio.src = cleanedBlobUrl;
                resultsContainer.classList.remove('hidden');

                // Set up Download button
                downloadBtn.onclick = () => {
                    const a = document.createElement('a');
                    a.style.display = 'none';
                    a.href = cleanedBlobUrl;
                    a.download = `Cleaned_${file.name.split('.')[0] || 'audio'}.wav`;
                    document.body.appendChild(a);
                    a.click();
                    setTimeout(() => document.body.removeChild(a), 100);
                };

            } catch (err) {
                console.error(err);
                setStatus('error', 'Processing Failed', err.message || 'An error occurred during audio processing. Check console for details.');
            }
        }

        /**
         * Converts an AudioBuffer to a valid WAV Blob.
         * DeepFilterNet outputs standard Float32, we convert to 16-bit PCM WAV.
         */
        function audioBufferToWav(buffer) {
            const numOfChan = buffer.numberOfChannels;
            const length = buffer.length * numOfChan * 2 + 44;
            const bufferData = new ArrayBuffer(length);
            const view = new DataView(bufferData);
            const channels = [];
            let i, sample, offset = 0, pos = 0;

            // Write WAV Header
            setUint32(0x46464952);                         // "RIFF"
            setUint32(length - 8);                         // file length - 8
            setUint32(0x45564157);                         // "WAVE"
            setUint32(0x20746d66);                         // "fmt " chunk
            setUint32(16);                                 // length = 16
            setUint16(1);                                  // PCM (uncompressed)
            setUint16(numOfChan);
            setUint32(buffer.sampleRate);
            setUint32(buffer.sampleRate * 2 * numOfChan); // avg. bytes/sec
            setUint16(numOfChan * 2);                      // block-align
            setUint16(16);                                 // 16-bit
            setUint32(0x61746164);                         // "data" - chunk
            setUint32(length - pos - 4);                   // chunk length

            // Read channel data
            for (i = 0; i < buffer.numberOfChannels; i++) {
                channels.push(buffer.getChannelData(i));
            }

            // Write Interleaved Audio Data
            while (pos < buffer.length) {
                for (i = 0; i < numOfChan; i++) {
                    sample = Math.max(-1, Math.min(1, channels[i][pos]));
                    sample = (0.5 + sample < 0 ? sample * 32768 : sample * 32767) | 0;
                    view.setInt16(offset, sample, true);
                    offset += 2;
                }
                pos++;
            }
            return new Blob([bufferData], { type: "audio/wav" });

            function setUint16(data) {
                view.setUint16(offset, data, true);
                offset += 2;
            }
            function setUint32(data) {
                view.setUint32(offset, data, true);
                offset += 4;
            }
        }
    </script>
</body>
</html>