feat: load lightweight Kokoro-82M on-device neural TTS model via WebGPU/WASM with voice profiles

index.html

@@ -15,19 +15,10 @@
       --ink: #1e1e24;
       
       --comic-yellow: #fef08a;
-      --comic-yellow-border: #eab308;
-      
       --comic-cyan: #bae6fd;
-      --comic-cyan-border: #0284c7;
-      
       --comic-mint: #bbf7d0;
-      --comic-mint-border: #16a34a;
-      
       --comic-coral: #fed7aa;
-      --comic-coral-border: #ea580c;
-
       --comic-pink: #fecdd3;
-      --comic-pink-border: #e11d48;
 
       --card-paper: #ffffff;
       --shadow-hard: 5px 5px 0px var(--ink);
@@ -53,12 +44,12 @@
     header {
       text-align: center;
       max-width: 860px;
-      margin-bottom: 24px;
+      margin-bottom: 20px;
     }
 
     .badge-row {
       display: flex;
-      gap: 12px;
+      gap: 10px;
       justify-content: center;
       margin-bottom: 12px;
       flex-wrap: wrap;
@@ -70,17 +61,16 @@
       color: var(--ink);
       padding: 4px 14px;
       border-radius: 8px;
-      font-size: 0.85rem;
+      font-size: 0.82rem;
       font-family: 'JetBrains Mono', monospace;
       font-weight: 700;
       text-decoration: none;
       box-shadow: var(--shadow-hard-sm);
-      transition: transform 0.15s ease, box-shadow 0.15s ease;
+      transition: transform 0.15s ease;
       display: inline-block;
     }
     .badge:hover {
       transform: translate(-1px, -1px);
-      box-shadow: 4px 4px 0px var(--ink);
     }
 
     .badge.cyan { background: var(--comic-cyan); }
@@ -98,7 +88,7 @@
     }
 
     p.sub {
-      font-size: 1.15rem;
+      font-size: 1.1rem;
       font-weight: 700;
       color: #4b5563;
     }
@@ -109,7 +99,7 @@
       grid-template-columns: 1fr;
       gap: 24px;
       width: 100%;
-      max-width: 1120px;
+      max-width: 1140px;
     }
     @media (min-width: 880px) {
       .main-grid { grid-template-columns: 1.15fr 1fr; }
@@ -127,33 +117,61 @@
       position: relative;
     }
 
-    .panel-header-strip {
+    /* TTS Controls Banner */
+    .tts-controls-box {
+      background: #fefce8;
+      border: 2px solid var(--ink);
+      border-radius: 12px;
+      padding: 12px 14px;
+      margin-bottom: 16px;
+      box-shadow: var(--shadow-hard-sm);
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    .tts-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      border-bottom: 2px dashed var(--ink);
-      padding-bottom: 12px;
-      margin-bottom: 16px;
-      font-family: 'JetBrains Mono', monospace;
-      font-size: 0.85rem;
-      font-weight: 700;
       flex-wrap: wrap;
       gap: 8px;
+      font-size: 0.95rem;
+      font-weight: 700;
     }
-
-    .panel-header-strip select {
+    .tts-row select {
       background: var(--comic-cyan);
       border: 2px solid var(--ink);
       color: var(--ink);
       font-family: 'Comic Neue', cursive;
       font-size: 0.95rem;
       font-weight: 700;
-      padding: 4px 8px;
+      padding: 4px 10px;
       border-radius: 8px;
       outline: none;
       cursor: pointer;
       box-shadow: 2px 2px 0px var(--ink);
     }
+    .model-loader-bar {
+      height: 8px;
+      background: #e2e8f0;
+      border: 1.5px solid var(--ink);
+      border-radius: 9999px;
+      overflow: hidden;
+      display: none;
+    }
+    .model-loader-fill {
+      height: 100%;
+      background: #10b981;
+      width: 0%;
+      transition: width 0.2s ease;
+    }
+    .tts-status-label {
+      font-size: 0.8rem;
+      font-family: 'JetBrains Mono', monospace;
+      color: #065f46;
+      font-weight: 700;
+      display: none;
+    }
 
     /* Comic Mic Orb */
     .orb-container {
@@ -161,7 +179,7 @@
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      padding: 12px 0;
+      padding: 10px 0;
       gap: 12px;
     }
 
@@ -186,13 +204,11 @@
     .voice-orb.listening {
       background: var(--comic-mint);
       transform: scale(1.1);
-      box-shadow: 6px 6px 0px var(--ink);
       animation: comicPulse 1s infinite alternate ease-in-out;
     }
     .voice-orb.speaking {
       background: var(--comic-coral);
       transform: scale(1.08);
-      box-shadow: 6px 6px 0px var(--ink);
       animation: comicTalk 0.8s infinite alternate ease-in-out;
     }
 
@@ -224,7 +240,7 @@
       display: flex;
       gap: 8px;
       flex-wrap: wrap;
-      margin: 12px 0 14px;
+      margin: 10px 0 12px;
     }
     .chip {
       background: #ffffff;
@@ -248,14 +264,14 @@
     /* Speech Bubble Chat */
     .chat-box {
       flex: 1;
-      min-height: 240px;
-      max-height: 320px;
+      min-height: 230px;
+      max-height: 310px;
       overflow-y: auto;
       display: flex;
       flex-direction: column;
       gap: 14px;
       padding: 10px 8px 10px 2px;
-      margin: 8px 0 16px;
+      margin: 6px 0 14px;
     }
     .chat-box::-webkit-scrollbar { width: 6px; }
     .chat-box::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 4px; }
@@ -401,21 +417,39 @@
   <header>
     <div class="badge-row">
       <a class="badge" href="https://huggingface.co/pipecat-ai/phonellm-alpha-1" target="_blank">🎙️ PhoneLLM Alpha 1</a>
-      <span class="badge mint">⚡ Pipecat Engine</span>
+      <span class="badge mint" id="device-cap-badge">⚡ Device Check: WASM / WebGPU</span>
       <a class="badge cyan" href="https://xkcd.hemanth.deno.net/" target="_blank">🌐 xkcd.hemanth.deno.net</a>
     </div>
     <h1>XKCD Comic Voice Agent</h1>
-    <p class="sub">Talk or type naturally. PhoneLLM finds the strip and reads the punchline!</p>
+    <p class="sub">Comic interface with lightweight on-device neural TTS (Kokoro-82M) & live XKCD tools.</p>
   </header>
 
   <main class="main-grid">
     <!-- Left Voice & Speech Bubble Panel -->
     <div class="panel">
-      <div class="panel-header-strip">
-        <span>🔊 <strong>ON-DEVICE VOICE:</strong></span>
-        <select id="voice-select">
-          <option value="default">Loading neural voices...</option>
-        </select>
+      <!-- TTS Engine & Voice Config -->
+      <div class="tts-controls-box">
+        <div class="tts-row">
+          <span>🧠 <strong>TTS Engine:</strong></span>
+          <select id="tts-engine-select">
+            <option value="kokoro">Kokoro-82M Neural Model (On-Device)</option>
+            <option value="system">Native System Speech (Instant)</option>
+          </select>
+        </div>
+        <div class="tts-row" id="voice-row">
+          <span>🎭 <strong>Voice Profile:</strong></span>
+          <select id="voice-select">
+            <option value="af_heart">Heart (Female US - Warm)</option>
+            <option value="af_bella">Bella (Female US - Energetic)</option>
+            <option value="am_michael">Michael (Male US - Narrator)</option>
+            <option value="bf_emma">Emma (Female UK)</option>
+            <option value="bm_george">George (Male UK)</option>
+          </select>
+        </div>
+        <div class="model-loader-bar" id="loader-bar">
+          <div class="model-loader-fill" id="loader-fill"></div>
+        </div>
+        <span class="tts-status-label" id="loader-label">⚡ Loading Kokoro 82M Neural Weights...</span>
       </div>
 
       <div class="orb-container">
@@ -451,7 +485,9 @@
     </div>
   </main>
 
-  <script>
+  <script type="module">
+    import { KokoroTTS } from "https://cdn.jsdelivr.net/npm/kokoro-js@1.2.1";
+
     const XKCD_API_BASE = "https://xkcd.hemanth.deno.net";
     const orb = document.getElementById('voice-orb');
     const statusBadge = document.getElementById('status-badge');
@@ -459,12 +495,133 @@
     const userInput = document.getElementById('user-input');
     const sendBtn = document.getElementById('send-btn');
     const comicCard = document.getElementById('comic-card');
+    const ttsEngineSelect = document.getElementById('tts-engine-select');
     const voiceSelect = document.getElementById('voice-select');
+    const loaderBar = document.getElementById('loader-bar');
+    const loaderFill = document.getElementById('loader-fill');
+    const loaderLabel = document.getElementById('loader-label');
+    const deviceCapBadge = document.getElementById('device-cap-badge');
 
     let isListening = false;
     let recognition = null;
-    let selectedVoice = null;
-    let availableVoices = [];
+    let kokoroModel = null;
+    let isLoadingKokoro = false;
+    let currentAudio = null;
+
+    // Detect Device Hardware Acceleration Capability
+    async function checkDeviceCapability() {
+      const hasWebGPU = !!navigator.gpu;
+      const deviceLabel = hasWebGPU ? "🚀 Hardware: WebGPU Accelerated" : "⚡ Hardware: WASM SIMD Mode";
+      deviceCapBadge.textContent = deviceLabel;
+      console.log("Device Capability:", deviceLabel);
+    }
+    checkDeviceCapability();
+
+    // Initialize Kokoro-82M Lightweight On-Device Neural Model
+    async function initKokoroModel() {
+      if (kokoroModel || isLoadingKokoro) return;
+      isLoadingKokoro = true;
+      loaderBar.style.display = "block";
+      loaderLabel.style.display = "block";
+      loaderLabel.textContent = "⚡ Initializing Kokoro-82M ONNX in-browser...";
+
+      try {
+        const device = navigator.gpu ? "webgpu" : "wasm";
+        kokoroModel = await KokoroTTS.from_pretrained("onnx-community/Kokoro-82M-v1.0-ONNX", {
+          dtype: "q8", // 8-bit quantized: fast, small footprint, cached in browser!
+          device: device,
+          progress_callback: (progress) => {
+            if (progress.status === "progress" && progress.total) {
+              const pct = Math.round((progress.loaded / progress.total) * 100);
+              loaderFill.style.width = pct + "%";
+              loaderLabel.textContent = `⚡ Loading Kokoro weights: ${pct}% (${(progress.loaded / 1024 / 1024).toFixed(1)}MB)`;
+            }
+          }
+        });
+
+        loaderFill.style.width = "100%";
+        loaderLabel.textContent = "✅ Kokoro-82M Neural Model Ready On-Device!";
+        setTimeout(() => {
+          loaderBar.style.display = "none";
+          loaderLabel.style.display = "none";
+        }, 2500);
+      } catch (err) {
+        console.warn("Kokoro on-device load error, fallback to system TTS:", err);
+        loaderLabel.textContent = "⚠️ On-device model fallback to System TTS";
+        ttsEngineSelect.value = "system";
+      } finally {
+        isLoadingKokoro = false;
+      }
+    }
+
+    // Pre-warm on-device model if device is capable
+    initKokoroModel();
+
+    // High-Fidelity Audio Synthesizer
+    async function speak(text) {
+      if (currentAudio) {
+        currentAudio.pause();
+        currentAudio = null;
+      }
+      if ('speechSynthesis' in window) {
+        window.speechSynthesis.cancel();
+      }
+
+      orb.classList.remove('listening');
+      orb.classList.add('speaking');
+      statusBadge.textContent = "🔊 Speaking response...";
+
+      const engine = ttsEngineSelect.value;
+      const chosenVoice = voiceSelect.value || "af_heart";
+
+      // 1. Try On-Device Kokoro-82M Neural TTS if loaded or loading
+      if (engine === "kokoro" && kokoroModel) {
+        try {
+          statusBadge.textContent = "🧠 Neural synthesizing on-device...";
+          const audioOutput = await kokoroModel.generate(text, {
+            voice: chosenVoice,
+            speed: 1.05
+          });
+
+          const blob = audioOutput.toBlob();
+          const audioUrl = URL.createObjectURL(blob);
+          currentAudio = new Audio(audioUrl);
+
+          currentAudio.onended = () => {
+            orb.classList.remove('speaking');
+            statusBadge.textContent = "Ready!";
+          };
+          currentAudio.onerror = () => {
+            orb.classList.remove('speaking');
+            statusBadge.textContent = "Ready!";
+          };
+
+          await currentAudio.play();
+          return;
+        } catch (e) {
+          console.warn("Kokoro synthesis error, falling back to System Speech:", e);
+        }
+      }
+
+      // 2. System Speech Fallback
+      if ('speechSynthesis' in window) {
+        const utterance = new SpeechSynthesisUtterance(text);
+        const voices = window.speechSynthesis.getVoices();
+        const preferredVoice = voices.find(v => v.lang.startsWith('en') && (v.name.includes('Natural') || v.name.includes('Samantha') || v.name.includes('Google') || v.name.includes('Siri')));
+        if (preferredVoice) utterance.voice = preferredVoice;
+        utterance.rate = 1.05;
+
+        utterance.onend = () => {
+          orb.classList.remove('speaking');
+          statusBadge.textContent = "Ready!";
+        };
+        utterance.onerror = () => {
+          orb.classList.remove('speaking');
+          statusBadge.textContent = "Ready!";
+        };
+        window.speechSynthesis.speak(utterance);
+      }
+    }
 
     // Topic Knowledge Index for iconic XKCD comics
     const TOPIC_INDEX = {
@@ -503,65 +660,6 @@
       "kernel": 272
     };
 
-    // Initialize High-Quality On-Device TTS Voices
-    function loadVoices() {
-      if (!('speechSynthesis' in window)) return;
-      availableVoices = window.speechSynthesis.getVoices();
-      if (!availableVoices.length) return;
-
-      voiceSelect.innerHTML = '';
-      
-      const preferred = availableVoices.filter(v => 
-        v.lang.startsWith('en') && 
-        (v.name.includes('Natural') || v.name.includes('Neural') || v.name.includes('Samantha') || v.name.includes('Google') || v.name.includes('Siri') || v.name.includes('Daniel') || v.name.includes('Karen') || v.name.includes('Alex'))
-      );
-
-      const voicesToShow = preferred.length > 0 ? preferred : availableVoices.filter(v => v.lang.startsWith('en'));
-
-      voicesToShow.forEach((v, idx) => {
-        const opt = document.createElement('option');
-        opt.value = idx;
-        opt.textContent = `${v.name} (${v.lang})`;
-        voiceSelect.appendChild(opt);
-      });
-
-      selectedVoice = voicesToShow[0] || availableVoices[0];
-      voiceSelect.onchange = () => {
-        selectedVoice = voicesToShow[voiceSelect.value] || availableVoices[0];
-      };
-    }
-
-    if ('speechSynthesis' in window) {
-      speechSynthesis.onvoiceschanged = loadVoices;
-      loadVoices();
-    }
-
-    // High-Fidelity Speech Synthesis
-    function speak(text) {
-      if (!('speechSynthesis' in window)) return;
-      window.speechSynthesis.cancel();
-
-      orb.classList.remove('listening');
-      orb.classList.add('speaking');
-      statusBadge.textContent = "🔊 Speaking response...";
-
-      const utterance = new SpeechSynthesisUtterance(text);
-      if (selectedVoice) utterance.voice = selectedVoice;
-      utterance.rate = 1.02;
-      utterance.pitch = 1.0;
-
-      utterance.onend = () => {
-        orb.classList.remove('speaking');
-        statusBadge.textContent = "Ready!";
-      };
-      utterance.onerror = () => {
-        orb.classList.remove('speaking');
-        statusBadge.textContent = "Ready!";
-      };
-
-      window.speechSynthesis.speak(utterance);
-    }
-
     // Live XKCD API Tool Functions
     async function toolGetLatestXkcd() {
       const res = await fetch(`${XKCD_API_BASE}/`);
@@ -603,7 +701,7 @@
 
       const numMatch = lower.match(/\b(?:comic|number|#)?\s*(\d+)\b/);
 
-      // Check for topic queries first (e.g. "comic on Python", "about git", "database comic")
+      // Check for topic queries first
       let matchedTopic = null;
       for (const key of Object.keys(TOPIC_INDEX)) {
         if (lower.includes(key)) {
@@ -725,7 +823,8 @@
       if (isListening) {
         recognition.stop();
       } else {
-        window.speechSynthesis.cancel();
+        if (currentAudio) currentAudio.pause();
+        if ('speechSynthesis' in window) window.speechSynthesis.cancel();
         orb.classList.remove('speaking');
         recognition.start();
       }
@@ -733,7 +832,7 @@
 
     // Initial greeting
     setTimeout(() => {
-      addMessage("🗯️ Hey! I am your XKCD voice bot powered by PhoneLLM Alpha 1. Ask me for comics on Python, Git, SQL, or say 'Random'!", "agent");
+      addMessage("🗯️ Hey! I am your XKCD voice bot powered by PhoneLLM Alpha 1 with on-device Kokoro TTS. Ask me for comics on Python, Git, SQL, or say 'Random'!", "agent");
     }, 400);
   </script>
 </body>