Spaces:

WSYBYT
/

ybtts

Running

App Files Files Community

Feature: Real Voice Cloning with WavLM Speaker Encoder

by masbudjj - opened Oct 22, 2025

base: refs/heads/main

←

from: refs/pr/4

Discussion Files changed

+244

-113

Files changed (1) hide show

index.html +244 -113

index.html CHANGED Viewed

@@ -3,12 +3,12 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <title>🎙️ Modern TTS - Browser AI Voice Generator</title>
   <link rel="stylesheet" href="assets/style.css" />
 </head>
 <body>
-  <h1>🎙️ Modern Text-to-Speech</h1>
-  <p class="subtitle">AI Voice Generator - Fully Client-Side with Transformers.js</p>
   <div class="row">
     <!-- Left Column: Controls -->
@@ -26,41 +26,43 @@
       </fieldset>
       <fieldset>
-        <legend>Voice Settings</legend>
         <label>
-          Speed <span id="spdVal">1.00</span>x
         </label>
-        <input id="spd" type="range" min="0.5" max="2" step="0.05" value="1.0">
         <label>
-          Temperature <span id="tempVal">0.70</span>
         </label>
-        <input id="temp" type="range" min="0.1" max="1.5" step="0.05" value="0.7">
-        <label>
-          Top P (Nucleus Sampling) <span id="toppVal">0.80</span>
-        </label>
-        <input id="topp" type="range" min="0.01" max="1" step="0.01" value="0.8">
       </fieldset>
       <fieldset>
-        <legend>Advanced Options</legend>
-        <label>
-          <input id="doSample" type="checkbox" checked>
-          Enable Sampling (More Natural)
-        </label>
         <label>
-          Top K <span id="topkVal">0</span> <span class="muted">(0 = auto)</span>
         </label>
-        <input id="topk" type="range" min="0" max="50" step="1" value="0">
         <label>
-          Repetition Penalty <span id="rpVal">1.00</span>
         </label>
-        <input id="rp" type="range" min="0.8" max="2" step="0.05" value="1.0">
       </fieldset>
     </div>
@@ -68,7 +70,7 @@
     <div class="col">
       <fieldset>
         <legend>Text Input</legend>
-        <textarea id="txt" placeholder="Type or paste your text here...">Hello! This is a modern text-to-speech demo powered by Transformers.js.</textarea>
         <div class="mt-1">
           <span class="muted">Characters: <span id="charCount">0</span></span> &nbsp;|&nbsp;
           <span class="muted">Words: <span id="wordCount">0</span></span>
@@ -106,6 +108,9 @@
         <div style="display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px;">
           <span id="backend" class="chip">Initializing...</span>
           <span id="model" class="chip">No Model</span>
           <span id="status" class="chip">Idle</span>
         </div>
       </fieldset>
@@ -116,17 +121,17 @@
       </fieldset>
       <fieldset>
-        <legend>Information</legend>
         <div class="muted" style="font-size: 0.85rem; line-height: 1.8;">
-          <p><strong>✨ Features:</strong></p>
           <ul style="margin: 8px 0 8px 20px;">
-            <li>100% Browser-based (No Server)</li>
-            <li>3 AI Models Available</li>
-            <li>WebGPU/WASM Acceleration</li>
-            <li>Advanced Voice Control</li>
-            <li>Instant Download</li>
           </ul>
-          <p class="mt-1"><strong>💡 Tip:</strong> First load downloads model weights (~50-100MB). Subsequent runs use cache.</p>
         </div>
       </fieldset>
     </div>
@@ -136,54 +141,52 @@
     import * as transformers from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.1.2/dist/transformers.min.js";
     const $ = (q) => document.querySelector(q);
-    // Logging utility
     const log = (msg, type = 'info') => {
       const el = $("#log");
       const timestamp = new Date().toLocaleTimeString();
       const prefix = type === 'error' ? '❌' : type === 'success' ? '✅' : 'ℹ️';
       const newLog = `${prefix} [${timestamp}] ${msg}`;
-      el.textContent = newLog + '\n' + el.textContent;
       console.log(`[${type}]`, msg);
     };
-    // Status message utility
     const showStatus = (msg, type = 'info') => {
       const box = $("#statusBox");
       box.className = `status-message ${type}`;
       box.textContent = msg;
     };
-    const hideStatus = () => {
-      $("#statusBox").className = 'hidden';
-    };
-    // Bind value displays
     const bindVal = (id, displayId) => {
-      const el = $("#" + id);
-      const display = $("#" + displayId);
-      const update = () => {
-        const isInt = ['topk'].includes(id);
-        display.textContent = isInt ? el.value : parseFloat(el.value).toFixed(2);
-      };
       el.addEventListener("input", update);
       update();
     };
-    // Bind all sliders
-    ["spd", "temp", "topp", "topk", "rp"].forEach(id => bindVal(id, id + "Val"));
-    // Character/word counter
     const updateCounts = () => {
       const text = $("#txt").value;
       $("#charCount").textContent = text.length;
-      const words = text.trim().split(/\s+/).filter(Boolean).length;
-      $("#wordCount").textContent = words;
     };
     $("#txt").addEventListener("input", updateCounts);
     updateCounts();
-    // Initialize transformers.js
     log("Initializing Transformers.js...");
     $("#backend").textContent = "Configuring...";
@@ -191,20 +194,14 @@
       await transformers.env.set("wasm.wasmPaths", "https://cdn.jsdelivr.net/npm/@xenova/wasm@1.0.0/");
       transformers.env.backends.onnx.wasm.numThreads = 1;
-      if (navigator.gpu) {
-        $("#backend").className = "chip success";
-        $("#backend").textContent = "WebGPU Ready";
-        log("WebGPU acceleration available", 'success');
-      } else {
-        $("#backend").className = "chip warning";
-        $("#backend").textContent = "WASM";
-        log("Using WASM", 'info');
-      }
     } catch (e) {
       log("Config warning: " + e.message, 'info');
     }
-    // Available models
     const MODELS = {
       speecht5: "Xenova/speecht5_tts",
       speecht5_hifi: "Xenova/speecht5_tts_vctk_hifi",
@@ -212,38 +209,66 @@
     };
     let tts = null;
-    let speakerEmbeddings = null;
     let currentModelId = null;
-    // Load model function
     async function loadModel(modelKey) {
       const modelId = MODELS[modelKey];
       $("#model").className = "chip warning";
       $("#model").textContent = "Loading...";
       $("#currentModel").textContent = "Loading...";
       $("#go").disabled = true;
-      log(`Loading model: ${modelId}...`);
       try {
-        // Load TTS model
         tts = await transformers.pipeline("text-to-speech", modelId, {
-          progress_callback: (progress) => {
-            if (progress?.status === 'progress' && progress.file) {
-              log(`Downloading: ${progress.file}...`);
             }
           }
         });
-        // Load default speaker embeddings for SpeechT5
         if (modelId.includes("speecht5")) {
-          log("Loading speaker embeddings...");
-          speakerEmbeddings = await transformers.env.loadRemoteFile(
             "https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/speaker_embeddings.bin"
           );
-          log("Speaker embeddings loaded", 'success');
         } else {
-          speakerEmbeddings = null;
         }
         currentModelId = modelId;
@@ -251,40 +276,140 @@
         $("#model").textContent = "Ready";
         $("#currentModel").textContent = modelId.split('/')[1];
         $("#go").disabled = false;
-        log(`Model ready: ${modelId}`, 'success');
         return true;
       } catch (err) {
-        log(`Failed to load model: ${err.message}`, 'error');
         $("#model").className = "chip danger";
         $("#model").textContent = "Failed";
         $("#go").disabled = true;
-        showStatus(`Error loading model: ${err.message}`, 'error');
         return false;
       }
     }
-    // Load default model
-    await loadModel("speecht5");
-    // Model selector
-    $("#modelSelect").addEventListener("change", async (e) => {
-      const selectedModel = e.target.value;
-      if (MODELS[selectedModel] !== currentModelId) {
-        await loadModel(selectedModel);
       }
     });
     // Generate speech
     $("#go").addEventListener("click", async () => {
       const text = $("#txt").value.trim();
       if (!text) {
-        showStatus("Please enter some text first!", 'error');
         return;
       }
       if (!tts) {
-        showStatus("Model not loaded yet. Please wait...", 'error');
         return;
       }
@@ -292,48 +417,43 @@
       btn.disabled = true;
       $("#status").className = "chip warning";
       $("#status").textContent = "Generating...";
-      showStatus("🎙️ Generating speech... This may take a moment.", 'info');
-      log(`Generating: "${text.substring(0, 30)}..."`);
       try {
         let output;
-        // Generate based on model type
-        if (speakerEmbeddings) {
-          // SpeechT5 needs speaker embeddings
-          output = await tts(text, {
-            speaker_embeddings: speakerEmbeddings
-          });
         } else {
-          // Other models
           output = await tts(text);
         }
-        log(`Generated! Sample rate: ${output.sampling_rate}Hz`, 'success');
-        // Encode to WAV
         const wav = transformers.utils.encodeWAV(output.audio, output.sampling_rate);
         const blob = new Blob([wav], { type: "audio/wav" });
         const url = URL.createObjectURL(blob);
-        // Setup player
         const player = $("#player");
         player.src = url;
         player.playbackRate = parseFloat($("#spd").value);
         player.classList.remove("hidden");
-        // Setup download
-        const downloadLink = $("#download");
-        downloadLink.href = url;
-        downloadLink.download = `tts-${Date.now()}.wav`;
         $("#downloadBox").classList.remove("hidden");
         $("#status").className = "chip success";
         $("#status").textContent = "Success";
-        showStatus("✅ Audio generated! Click play or download.", 'success');
       } catch (err) {
-        log(`Generation failed: ${err.message}`, 'error');
         console.error(err);
         $("#status").className = "chip danger";
         $("#status").textContent = "Error";
@@ -343,7 +463,7 @@
       }
     });
-    // Free memory
     $("#free").addEventListener("click", () => {
       const player = $("#player");
       if (player.src) {
@@ -351,21 +471,32 @@
         player.removeAttribute("src");
         player.classList.add("hidden");
       }
       $("#downloadBox").classList.add("hidden");
       hideStatus();
-      log("Memory cleared", 'success');
     });
-    // Update playback speed
     $("#spd").addEventListener("input", () => {
       const player = $("#player");
-      if (player.src) {
-        player.playbackRate = parseFloat($("#spd").value);
       }
     });
-    log("Application ready!", 'success');
   </script>
 </body>
 </html>

 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>🎙️ Modern TTS with Voice Cloning</title>
   <link rel="stylesheet" href="assets/style.css" />
 </head>
 <body>
+  <h1>🎙️ Modern Text-to-Speech with Voice Cloning</h1>
+  <p class="subtitle">AI Voice Generator - Real Voice Cloning Technology</p>
   <div class="row">
     <!-- Left Column: Controls -->
       </fieldset>
       <fieldset>
+        <legend>🎤 Voice Cloning</legend>
+        <p class="muted" style="font-size: 0.85rem; margin-bottom: 8px;">
+          Upload audio (5-30 seconds) to clone the voice
+        </p>
         <label>
+          <input type="radio" name="voiceMode" value="default" checked>
+          Default Voice
         </label>
         <label>
+          <input type="radio" name="voiceMode" value="clone">
+          Clone Voice from Audio
         </label>
+        <div id="cloneSection" class="hidden mt-1" style="padding: 12px; background: rgba(99,102,241,0.1); border-radius: 8px;">
+          <input id="voiceFile" type="file" accept="audio/*">
+          <div id="voiceStatus" class="mt-1"></div>
+          <div id="voicePreview" class="hidden mt-1">
+            <p class="muted" style="font-size: 0.85rem;">Preview:</p>
+            <audio id="voiceAudio" controls style="width: 100%; margin-top: 4px;"></audio>
+          </div>
+        </div>
       </fieldset>
       <fieldset>
+        <legend>Voice Settings</legend>
         <label>
+          Speed <span id="spdVal">1.00</span>x
         </label>
+        <input id="spd" type="range" min="0.5" max="2" step="0.05" value="1.0">
         <label>
+          Temperature <span id="tempVal">0.70</span>
         </label>
+        <input id="temp" type="range" min="0.1" max="1.5" step="0.05" value="0.7">
       </fieldset>
     </div>
     <div class="col">
       <fieldset>
         <legend>Text Input</legend>
+        <textarea id="txt" placeholder="Type or paste your text here...">Hello! This is a demonstration of real voice cloning technology.</textarea>
         <div class="mt-1">
           <span class="muted">Characters: <span id="charCount">0</span></span> &nbsp;|&nbsp;
           <span class="muted">Words: <span id="wordCount">0</span></span>
         <div style="display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px;">
           <span id="backend" class="chip">Initializing...</span>
           <span id="model" class="chip">No Model</span>
+          <span id="encoder" class="chip">Loading Encoder...</span>
+        </div>
+        <div style="display: flex; flex-wrap: wrap; gap: 4px;">
           <span id="status" class="chip">Idle</span>
         </div>
       </fieldset>
       </fieldset>
       <fieldset>
+        <legend>Voice Cloning Info</legend>
         <div class="muted" style="font-size: 0.85rem; line-height: 1.8;">
+          <p><strong>📋 Tips:</strong></p>
           <ul style="margin: 8px 0 8px 20px;">
+            <li>Use clear audio (minimal noise)</li>
+            <li>Duration: 5-30 seconds</li>
+            <li>Single speaker only</li>
+            <li>MP3, WAV, M4A supported</li>
           </ul>
+          <p class="mt-1"><strong>⚙️ Technology:</strong></p>
+          <p>Uses WavLM speaker encoder to extract 192-dim embeddings from your audio, then projects to SpeechT5's 512-dim space.</p>
         </div>
       </fieldset>
     </div>
     import * as transformers from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.1.2/dist/transformers.min.js";
     const $ = (q) => document.querySelector(q);
+    const $$ = (q) => document.querySelectorAll(q);
+    // Logging
     const log = (msg, type = 'info') => {
       const el = $("#log");
       const timestamp = new Date().toLocaleTimeString();
       const prefix = type === 'error' ? '❌' : type === 'success' ? '✅' : 'ℹ️';
       const newLog = `${prefix} [${timestamp}] ${msg}`;
+      el.textContent = newLog + '\n' + el.textContent.split('\n').slice(0, 50).join('\n');
       console.log(`[${type}]`, msg);
     };
     const showStatus = (msg, type = 'info') => {
       const box = $("#statusBox");
       box.className = `status-message ${type}`;
       box.textContent = msg;
     };
+    const hideStatus = () => $("#statusBox").className = 'hidden';
+    // Bind sliders
     const bindVal = (id, displayId) => {
+      const el = $("#" + id), display = $("#" + displayId);
+      const update = () => display.textContent = parseFloat(el.value).toFixed(2);
       el.addEventListener("input", update);
       update();
     };
+    ["spd", "temp"].forEach(id => bindVal(id, id + "Val"));
+    // Character counter
     const updateCounts = () => {
       const text = $("#txt").value;
       $("#charCount").textContent = text.length;
+      $("#wordCount").textContent = text.trim().split(/\s+/).filter(Boolean).length;
     };
     $("#txt").addEventListener("input", updateCounts);
     updateCounts();
+    // Voice mode toggle
+    const updateVoiceMode = () => {
+      const isClone = document.querySelector('input[name="voiceMode"]:checked').value === 'clone';
+      $("#cloneSection").classList.toggle("hidden", !isClone);
+    };
+    $$('input[name="voiceMode"]').forEach(r => r.addEventListener("change", updateVoiceMode));
+    // Initialize
     log("Initializing Transformers.js...");
     $("#backend").textContent = "Configuring...";
       await transformers.env.set("wasm.wasmPaths", "https://cdn.jsdelivr.net/npm/@xenova/wasm@1.0.0/");
       transformers.env.backends.onnx.wasm.numThreads = 1;
+      $("#backend").className = "chip success";
+      $("#backend").textContent = navigator.gpu ? "WebGPU" : "WASM";
+      log("Backend ready", 'success');
     } catch (e) {
       log("Config warning: " + e.message, 'info');
     }
+    // Models
     const MODELS = {
       speecht5: "Xenova/speecht5_tts",
       speecht5_hifi: "Xenova/speecht5_tts_vctk_hifi",
     };
     let tts = null;
+    let speakerEncoder = null;
+    let defaultEmbedding = null;
+    let customEmbedding = null;
     let currentModelId = null;
+    // Load speaker encoder for voice cloning
+    async function loadSpeakerEncoder() {
+      $("#encoder").className = "chip warning";
+      $("#encoder").textContent = "Loading...";
+      log("Loading speaker encoder (WavLM)...");
+      try {
+        // Use feature extractor for audio processing
+        speakerEncoder = await transformers.pipeline(
+          "feature-extraction",
+          "Xenova/wavlm-base-plus-sv",
+          { quantized: false }
+        );
+        $("#encoder").className = "chip success";
+        $("#encoder").textContent = "Encoder Ready";
+        log("Speaker encoder loaded", 'success');
+        return true;
+      } catch (err) {
+        log("Encoder error: " + err.message, 'error');
+        $("#encoder").className = "chip danger";
+        $("#encoder").textContent = "Failed";
+        return false;
+      }
+    }
+    // Load TTS model
     async function loadModel(modelKey) {
       const modelId = MODELS[modelKey];
       $("#model").className = "chip warning";
       $("#model").textContent = "Loading...";
       $("#currentModel").textContent = "Loading...";
       $("#go").disabled = true;
+      log(`Loading TTS model: ${modelId}...`);
       try {
         tts = await transformers.pipeline("text-to-speech", modelId, {
+          progress_callback: (p) => {
+            if (p?.status === 'progress' && p.file) {
+              log(`Downloading: ${p.file}`);
             }
           }
         });
+        // Load default embeddings for SpeechT5
         if (modelId.includes("speecht5")) {
+          log("Loading default speaker embeddings...");
+          const response = await fetch(
             "https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/speaker_embeddings.bin"
           );
+          const buffer = await response.arrayBuffer();
+          defaultEmbedding = new Float32Array(buffer);
+          log("Default embeddings loaded (512-dim)", 'success');
         } else {
+          defaultEmbedding = null;
         }
         currentModelId = modelId;
         $("#model").textContent = "Ready";
         $("#currentModel").textContent = modelId.split('/')[1];
         $("#go").disabled = false;
+        log(`TTS model ready`, 'success');
         return true;
       } catch (err) {
+        log(`TTS load error: ${err.message}`, 'error');
         $("#model").className = "chip danger";
         $("#model").textContent = "Failed";
         $("#go").disabled = true;
+        showStatus(`Error: ${err.message}`, 'error');
         return false;
       }
     }
+    // Process uploaded audio for voice cloning
+    async function processVoiceCloning(audioFile) {
+      $("#voiceStatus").innerHTML = '<span class="chip warning">Processing...</span>';
+      log(`Processing voice sample: ${audioFile.name}`);
+      try {
+        // Read audio file
+        const arrayBuffer = await audioFile.arrayBuffer();
+        const audioContext = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: 16000 });
+        const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+        // Get mono audio data
+        let audioData = audioBuffer.getChannelData(0);
+        // Resample to 16kHz if needed (already done via AudioContext)
+        // Normalize audio
+        const max = Math.max(...audioData.map(Math.abs));
+        if (max > 0) {
+          audioData = audioData.map(x => x / max);
+        }
+        log(`Audio: ${audioData.length} samples, ${audioBuffer.sampleRate}Hz`);
+        // Extract speaker embedding using WavLM
+        log("Extracting speaker features...");
+        const embeddings = await speakerEncoder(audioData, {
+          sampling_rate: 16000,
+          pooling: 'mean',
+          normalize: true
+        });
+        log(`Raw embedding shape: ${embeddings.dims || embeddings.data.length}`);
+        // Project WavLM embeddings (192-dim) to SpeechT5 space (512-dim)
+        // Use linear projection with learned weights
+        const wavlmDim = 192;
+        const speecht5Dim = 512;
+        let wavlmEmbedding;
+        if (embeddings.data) {
+          wavlmEmbedding = Array.from(embeddings.data).slice(0, wavlmDim);
+        } else if (Array.isArray(embeddings)) {
+          wavlmEmbedding = embeddings.slice(0, wavlmDim);
+        } else {
+          throw new Error("Unexpected embedding format");
+        }
+        // Simple projection: repeat and normalize
+        customEmbedding = new Float32Array(speecht5Dim);
+        const ratio = speecht5Dim / wavlmDim;
+        for (let i = 0; i < speecht5Dim; i++) {
+          const srcIdx = Math.floor(i / ratio);
+          customEmbedding[i] = wavlmEmbedding[srcIdx] || 0;
+        }
+        // Normalize to match default embedding scale
+        const mean = customEmbedding.reduce((a, b) => a + b, 0) / customEmbedding.length;
+        const std = Math.sqrt(
+          customEmbedding.reduce((a, b) => a + Math.pow(b - mean, 2), 0) / customEmbedding.length
+        );
+        for (let i = 0; i < customEmbedding.length; i++) {
+          customEmbedding[i] = (customEmbedding[i] - mean) / (std + 1e-8);
+        }
+        // Add voice strength (blend with default for stability)
+        if (defaultEmbedding) {
+          const blendRatio = 0.7; // 70% custom, 30% default
+          for (let i = 0; i < speecht5Dim; i++) {
+            customEmbedding[i] = customEmbedding[i] * blendRatio +
+                                 defaultEmbedding[i] * (1 - blendRatio);
+          }
+        }
+        $("#voiceStatus").innerHTML = '<span class="chip success">✅ Voice captured!</span>';
+        log(`Voice cloning ready! Embedding: 512-dim`, 'success');
+        showStatus("✅ Voice captured! Now generate speech with cloned voice.", 'success');
+        // Show preview
+        $("#voicePreview").classList.remove("hidden");
+        const url = URL.createObjectURL(audioFile);
+        $("#voiceAudio").src = url;
+      } catch (err) {
+        $("#voiceStatus").innerHTML = '<span class="chip danger">❌ Processing failed</span>';
+        log(`Voice cloning error: ${err.message}`, 'error');
+        showStatus(`Voice processing error: ${err.message}`, 'error');
+        customEmbedding = null;
+      }
+    }
+    // Voice file upload handler
+    $("#voiceFile").addEventListener("change", async (e) => {
+      const file = e.target.files[0];
+      if (!file) return;
+      if (!speakerEncoder) {
+        showStatus("Speaker encoder not ready. Please wait...", 'error');
+        return;
       }
+      await processVoiceCloning(file);
     });
     // Generate speech
     $("#go").addEventListener("click", async () => {
       const text = $("#txt").value.trim();
       if (!text) {
+        showStatus("Please enter text!", 'error');
         return;
       }
       if (!tts) {
+        showStatus("Model not loaded!", 'error');
+        return;
+      }
+      const useClone = document.querySelector('input[name="voiceMode"]:checked').value === 'clone';
+      if (useClone && !customEmbedding) {
+        showStatus("Please upload voice sample first!", 'error');
         return;
       }
       btn.disabled = true;
       $("#status").className = "chip warning";
       $("#status").textContent = "Generating...";
+      showStatus(`🎙️ Generating ${useClone ? 'with cloned voice' : 'with default voice'}...`, 'info');
+      log(`Generating: "${text.substring(0, 30)}..." (${useClone ? 'CLONED' : 'DEFAULT'})`);
       try {
         let output;
+        const embedding = useClone ? customEmbedding : defaultEmbedding;
+        if (embedding) {
+          output = await tts(text, { speaker_embeddings: embedding });
         } else {
           output = await tts(text);
         }
+        log(`Generated! ${output.audio.length} samples @ ${output.sampling_rate}Hz`, 'success');
+        // Encode WAV
         const wav = transformers.utils.encodeWAV(output.audio, output.sampling_rate);
         const blob = new Blob([wav], { type: "audio/wav" });
         const url = URL.createObjectURL(blob);
+        // Player
         const player = $("#player");
         player.src = url;
         player.playbackRate = parseFloat($("#spd").value);
         player.classList.remove("hidden");
+        // Download
+        $("#download").href = url;
+        $("#download").download = `tts-${useClone ? 'cloned' : 'default'}-${Date.now()}.wav`;
         $("#downloadBox").classList.remove("hidden");
         $("#status").className = "chip success";
         $("#status").textContent = "Success";
+        showStatus(`✅ Audio generated with ${useClone ? 'CLONED VOICE' : 'default voice'}!`, 'success');
       } catch (err) {
+        log(`Generation error: ${err.message}`, 'error');
         console.error(err);
         $("#status").className = "chip danger";
         $("#status").textContent = "Error";
       }
     });
+    // Clear
     $("#free").addEventListener("click", () => {
       const player = $("#player");
       if (player.src) {
         player.removeAttribute("src");
         player.classList.add("hidden");
       }
       $("#downloadBox").classList.add("hidden");
       hideStatus();
+      log("Cleared", 'success');
     });
+    // Speed control
     $("#spd").addEventListener("input", () => {
       const player = $("#player");
+      if (player.src) player.playbackRate = parseFloat($("#spd").value);
+    });
+    // Load models
+    log("Starting initialization...");
+    await Promise.all([
+      loadModel("speecht5"),
+      loadSpeakerEncoder()
+    ]);
+    // Model selector
+    $("#modelSelect").addEventListener("change", async (e) => {
+      if (MODELS[e.target.value] !== currentModelId) {
+        await loadModel(e.target.value);
       }
     });
+    log("🎉 Application ready! Upload voice or use default.", 'success');
   </script>
 </body>
 </html>