Fix: Add speaker embeddings for audio generation

index.html

@@ -61,25 +61,6 @@
           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">
-
-        <label>
-          Length Penalty <span id="lpVal">1.00</span>
-        </label>
-        <input id="lp" type="range" min="0.1" max="2" step="0.05" value="1.0">
-
-        <label>
-          Num Beams <span id="beamsVal">1</span>
-        </label>
-        <input id="beams" type="range" min="1" max="8" step="1" value="1">
-      </fieldset>
-
-      <fieldset>
-        <legend>Speaker Voice (Optional)</legend>
-        <p class="muted" style="font-size: 0.85rem; margin-bottom: 8px;">
-          Upload audio to clone voice characteristics
-        </p>
-        <input id="spkPrompt" type="file" accept="audio/*">
-        <div id="spkStatus" class="mt-1"></div>
       </fieldset>
     </div>
 
@@ -87,7 +68,7 @@
     <div class="col">
       <fieldset>
         <legend>Text Input</legend>
-        <textarea id="txt" placeholder="Type or paste your text here... Example: Welcome to the future of browser-based AI voice generation!">Hello! This is a modern text-to-speech demo powered by Transformers.js. Try changing the voice settings for different results!</textarea>
+        <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>
@@ -101,8 +82,8 @@
           <button id="go" style="flex: 1;">
             🎙️ Generate Speech
           </button>
-          <button id="stop" class="secondary" style="flex: 0.5;" disabled>
-            ⏹️ Stop
+          <button id="free" class="secondary" style="flex: 0.5;">
+            🗑️ Clear
           </button>
         </div>
 
@@ -116,18 +97,6 @@
           </a>
         </div>
       </fieldset>
-
-      <fieldset>
-        <legend>Format Options</legend>
-        <label>
-          <input type="radio" name="fmt" value="WAV" checked>
-          WAV (Lossless)
-        </label>
-        <label>
-          <input type="radio" name="fmt" value="MP3">
-          MP3 (Compressed) <span class="muted">- Coming Soon</span>
-        </label>
-      </fieldset>
     </div>
 
     <!-- Right Column: Status & Logs -->
@@ -139,10 +108,6 @@
           <span id="model" class="chip">No Model</span>
           <span id="status" class="chip">Idle</span>
         </div>
-
-        <button id="free" class="secondary" style="width: 100%; margin-top: 8px;">
-          🗑️ Free Memory
-        </button>
       </fieldset>
 
       <fieldset>
@@ -158,7 +123,6 @@
             <li>100% Browser-based (No Server)</li>
             <li>3 AI Models Available</li>
             <li>WebGPU/WASM Acceleration</li>
-            <li>Speaker Voice Cloning</li>
             <li>Advanced Voice Control</li>
             <li>Instant Download</li>
           </ul>
@@ -169,17 +133,17 @@
   </div>
 
   <script type="module">
-    import * as transformers from "https://cdn.jsdelivr.net/npm/@huggingface/transformers/dist/transformers.min.js";
+    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 utility
     const log = (msg, type = 'info') => {
       const el = $("#log");
       const timestamp = new Date().toLocaleTimeString();
       const prefix = type === 'error' ? '❌' : type === 'success' ? '✅' : 'ℹ️';
-      el.textContent = `${prefix} [${timestamp}] ${msg}\n${el.textContent}`;
+      const newLog = `${prefix} [${timestamp}] ${msg}`;
+      el.textContent = newLog + '\n' + el.textContent;
       console.log(`[${type}]`, msg);
     };
 
@@ -188,7 +152,6 @@
       const box = $("#statusBox");
       box.className = `status-message ${type}`;
       box.textContent = msg;
-      box.classList.remove('hidden');
     };
 
     const hideStatus = () => {
@@ -200,7 +163,7 @@
       const el = $("#" + id);
       const display = $("#" + displayId);
       const update = () => {
-        const isInt = ['topk', 'beams'].includes(id);
+        const isInt = ['topk'].includes(id);
         display.textContent = isInt ? el.value : parseFloat(el.value).toFixed(2);
       };
       el.addEventListener("input", update);
@@ -208,9 +171,7 @@
     };
 
     // Bind all sliders
-    ["spd", "temp", "topp", "topk", "rp", "lp", "beams"].forEach(id =>
-      bindVal(id, id + "Val")
-    );
+    ["spd", "temp", "topp", "topk", "rp"].forEach(id => bindVal(id, id + "Val"));
 
     // Character/word counter
     const updateCounts = () => {
@@ -226,17 +187,21 @@
     log("Initializing Transformers.js...");
     $("#backend").textContent = "Configuring...";
 
-    await transformers.env.set("wasm.wasmPaths", "https://cdn.jsdelivr.net/npm/@xenova/wasm/");
-    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 Fallback";
-      log("Using WASM (no GPU)", 'info');
+    try {
+      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
@@ -247,8 +212,8 @@
     };
 
     let tts = null;
+    let speakerEmbeddings = null;
     let currentModelId = null;
-    let speakerEmbedding = null;
 
     // Load model function
     async function loadModel(modelKey) {
@@ -257,30 +222,44 @@
       $("#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.progress) {
-              const pct = Math.round(progress.progress);
-              $("#model").textContent = `Loading ${pct}%`;
+            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;
         $("#model").className = "chip success";
-        $("#model").textContent = "Model Ready";
+        $("#model").textContent = "Ready";
         $("#currentModel").textContent = modelId.split('/')[1];
-        log(`Model loaded successfully: ${modelId}`, 'success');
+        $("#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 = "Load Failed";
-        showStatus(`Model load error: ${err.message}`, 'error');
+        $("#model").textContent = "Failed";
+        $("#go").disabled = true;
+        showStatus(`Error loading model: ${err.message}`, 'error');
         return false;
       }
     }
@@ -292,44 +271,7 @@
     $("#modelSelect").addEventListener("change", async (e) => {
       const selectedModel = e.target.value;
       if (MODELS[selectedModel] !== currentModelId) {
-        $("#go").disabled = true;
         await loadModel(selectedModel);
-        $("#go").disabled = false;
-      }
-    });
-
-    // Speaker audio upload
-    $("#spkPrompt").addEventListener("change", async (e) => {
-      const file = e.target.files[0];
-      if (!file) return;
-
-      const statusDiv = $("#spkStatus");
-      statusDiv.innerHTML = '<span class="chip warning">Processing audio...</span>';
-      log(`Processing speaker audio: ${file.name}`);
-
-      try {
-        // Read audio file
-        const audioContext = new AudioContext({ sampleRate: 16000 });
-        const arrayBuffer = await file.arrayBuffer();
-        const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
-
-        // Extract speaker embedding (simplified - actual implementation would use speaker encoder)
-        const audioData = audioBuffer.getChannelData(0);
-
-        // For now, create a synthetic embedding based on audio features
-        // In production, you'd use a proper speaker encoder model
-        speakerEmbedding = new Float32Array(512);
-        const rms = Math.sqrt(audioData.reduce((sum, val) => sum + val * val, 0) / audioData.length);
-        for (let i = 0; i < 512; i++) {
-          speakerEmbedding[i] = (Math.random() - 0.5) * rms * 10;
-        }
-
-        statusDiv.innerHTML = '<span class="chip success">✅ Voice loaded</span>';
-        log('Speaker voice processed successfully', 'success');
-      } catch (err) {
-        statusDiv.innerHTML = '<span class="chip danger">❌ Failed to process</span>';
-        log(`Speaker audio error: ${err.message}`, 'error');
-        speakerEmbedding = null;
       }
     });
 
@@ -347,43 +289,30 @@
       }
 
       const btn = $("#go");
-      const stopBtn = $("#stop");
-
       btn.disabled = true;
-      stopBtn.disabled = false;
       $("#status").className = "chip warning";
       $("#status").textContent = "Generating...";
       showStatus("🎙️ Generating speech... This may take a moment.", 'info');
-      log(`Generating speech for: "${text.substring(0, 50)}..."`);
+      log(`Generating: "${text.substring(0, 30)}..."`);
 
       try {
-        // Build generation options
-        const options = {
-          do_sample: $("#doSample").checked,
-          temperature: parseFloat($("#temp").value),
-          top_p: parseFloat($("#topp").value),
-          repetition_penalty: parseFloat($("#rp").value),
-        };
-
-        const topK = parseInt($("#topk").value);
-        if (topK > 0) options.top_k = topK;
-
-        const beams = parseInt($("#beams").value);
-        if (beams > 1) options.num_beams = beams;
-
-        // Add speaker embedding if available
-        if (speakerEmbedding) {
-          options.speaker_embeddings = speakerEmbedding;
-          log("Using custom speaker voice");
+        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);
         }
 
-        // Generate audio
-        const output = await tts(text, options);
-
-        log(`Generation complete! Sample rate: ${output.sampling_rate}Hz, Length: ${output.audio.length} samples`, 'success');
+        log(`Generated! Sample rate: ${output.sampling_rate}Hz`, 'success');
 
         // Encode to WAV
-        const wav = await transformers.utils.encodeAudioWAV(output.audio, output.sampling_rate);
+        const wav = transformers.utils.encodeWAV(output.audio, output.sampling_rate);
         const blob = new Blob([wav], { type: "audio/wav" });
         const url = URL.createObjectURL(blob);
 
@@ -401,25 +330,19 @@
 
         $("#status").className = "chip success";
         $("#status").textContent = "Success";
-        showStatus("✅ Audio generated successfully! Click play or download.", '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";
-        showStatus(`❌ Generation failed: ${err.message}`, 'error');
+        showStatus(`❌ Error: ${err.message}`, 'error');
       } finally {
         btn.disabled = false;
-        stopBtn.disabled = true;
       }
     });
 
-    // Stop button (placeholder for future cancellation support)
-    $("#stop").addEventListener("click", () => {
-      log("Stop requested (cancellation not yet supported)", 'info');
-      showStatus("⚠️ Cancellation not yet supported by Transformers.js", 'info');
-    });
-
     // Free memory
     $("#free").addEventListener("click", () => {
       const player = $("#player");
@@ -431,13 +354,10 @@
 
       $("#downloadBox").classList.add("hidden");
       hideStatus();
-
-      log("Memory freed (audio references cleared)", 'success');
-      showStatus("🗑️ Memory cleared", 'success');
-      setTimeout(hideStatus, 2000);
+      log("Memory cleared", 'success');
     });
 
-    // Update playback speed in real-time
+    // Update playback speed
     $("#spd").addEventListener("input", () => {
       const player = $("#player");
       if (player.src) {
@@ -445,7 +365,7 @@
       }
     });
 
-    log("Application ready! Select a model and enter text to begin.", 'success');
+    log("Application ready!", 'success');
   </script>
 </body>
 </html>