style: soft pastel theme and enhanced neural on-device TTS engine with voice selection

index.html

@@ -6,152 +6,259 @@
   <title>PhoneLLM + Pipecat XKCD Voice Agent</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap" rel="stylesheet">
   <style>
     :root {
-      --bg: #090a0f;
-      --card-bg: #12151f;
-      --card-raised: #181d2c;
-      --accent: #6366f1;
-      --accent-glow: rgba(99, 102, 241, 0.4);
-      --text: #f8fafc;
-      --text-muted: #94a3b8;
-      --border: #23293e;
-      --green: #10b981;
-      --gold: #f59e0b;
+      /* Soft Pastel Color Palette */
+      --bg-gradient-1: #fbf9fe;
+      --bg-gradient-2: #f4f0fb;
+      --bg-gradient-3: #edf2fb;
+      --card-bg: rgba(255, 255, 255, 0.85);
+      --card-raised: #ffffff;
+      --border-pastel: #e2daf0;
+      --border-soft: #ede6f6;
+      
+      --pastel-lavender: #8b5cf6;
+      --pastel-lavender-soft: #ede9fe;
+      --pastel-lavender-border: #ddd6fe;
+      
+      --pastel-mint: #059669;
+      --pastel-mint-soft: #d1fae5;
+      --pastel-mint-border: #a7f3d0;
+      
+      --pastel-peach: #ea580c;
+      --pastel-peach-soft: #ffedd5;
+      --pastel-peach-border: #fed7aa;
+      
+      --pastel-rose: #e11d48;
+      --pastel-rose-soft: #ffe4e6;
+      --pastel-rose-border: #fecdd3;
+      
+      --pastel-sky: #0284c7;
+      --pastel-sky-soft: #e0f2fe;
+      --pastel-sky-border: #bae6fd;
+
+      --text-main: #2e2640;
+      --text-muted: #6b6280;
+      --shadow-pastel: 0 12px 34px -8px rgba(139, 92, 246, 0.12), 0 4px 16px -2px rgba(0, 0, 0, 0.04);
+      --shadow-card: 0 20px 40px -12px rgba(112, 90, 160, 0.14), 0 2px 10px rgba(0, 0, 0, 0.03);
     }
+
     * { box-sizing: border-box; margin: 0; padding: 0; }
+    
     body {
-      background: radial-gradient(circle at 50% 10%, #161a2b 0%, var(--bg) 80%);
-      color: var(--text);
-      font-family: 'Space Grotesk', sans-serif;
+      background: linear-gradient(135deg, var(--bg-gradient-1) 0%, var(--bg-gradient-2) 50%, var(--bg-gradient-3) 100%);
+      color: var(--text-main);
+      font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
       min-height: 100vh;
       display: flex;
       flex-direction: column;
       align-items: center;
-      padding: 24px 16px 48px;
+      padding: 28px 16px 48px;
     }
+
     header {
       text-align: center;
-      max-width: 840px;
-      margin-bottom: 20px;
+      max-width: 860px;
+      margin-bottom: 24px;
     }
+
     .badge-row {
       display: flex;
       gap: 10px;
       justify-content: center;
-      margin-bottom: 12px;
+      margin-bottom: 14px;
       flex-wrap: wrap;
     }
+
     .badge {
-      background: rgba(99, 102, 241, 0.15);
-      border: 1px solid var(--accent);
-      color: #a5b4fc;
-      padding: 4px 12px;
+      background: var(--pastel-lavender-soft);
+      border: 1px solid var(--pastel-lavender-border);
+      color: #6d28d9;
+      padding: 5px 14px;
       border-radius: 9999px;
-      font-size: 0.78rem;
+      font-size: 0.8rem;
       font-family: 'JetBrains Mono', monospace;
       font-weight: 600;
       text-decoration: none;
+      transition: all 0.2s ease;
+      box-shadow: 0 2px 6px rgba(109, 40, 217, 0.06);
+    }
+    .badge:hover {
+      transform: translateY(-1px);
+      background: #e4dcfa;
+    }
+
+    .badge.mint {
+      background: var(--pastel-mint-soft);
+      border-color: var(--pastel-mint-border);
+      color: #047857;
+    }
+    .badge.mint:hover { background: #c2f5dc; }
+
+    .badge.peach {
+      background: var(--pastel-peach-soft);
+      border-color: var(--pastel-peach-border);
+      color: #c2410c;
     }
-    .badge:hover { background: rgba(99, 102, 241, 0.25); }
+    .badge.peach:hover { background: #fde0be; }
+
     h1 {
-      font-size: clamp(1.8rem, 4vw, 2.5rem);
-      font-weight: 700;
-      background: linear-gradient(135deg, #ffffff 0%, #a5b4fc 100%);
+      font-size: clamp(2rem, 4.5vw, 2.75rem);
+      font-weight: 800;
+      letter-spacing: -0.03em;
+      background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 50%, #db2777 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
-      margin-bottom: 6px;
+      margin-bottom: 8px;
     }
+
     p.sub {
       color: var(--text-muted);
-      font-size: 0.95rem;
+      font-size: 1rem;
+      font-weight: 500;
     }
+
+    /* Layout Grid */
     .main-grid {
       display: grid;
       grid-template-columns: 1fr;
-      gap: 20px;
+      gap: 24px;
       width: 100%;
-      max-width: 1100px;
+      max-width: 1120px;
     }
-    @media (min-width: 860px) {
+    @media (min-width: 880px) {
       .main-grid { grid-template-columns: 1.15fr 1fr; }
     }
+
     .panel {
       background: var(--card-bg);
-      border: 1px solid var(--border);
-      border-radius: 16px;
-      padding: 22px;
+      backdrop-filter: blur(16px);
+      border: 1px solid var(--border-pastel);
+      border-radius: 24px;
+      padding: 24px;
       display: flex;
       flex-direction: column;
-      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+      box-shadow: var(--shadow-card);
+      position: relative;
     }
+
+    /* Controls Bar */
+    .controls-bar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background: #ffffff;
+      border: 1px solid var(--border-soft);
+      padding: 8px 14px;
+      border-radius: 14px;
+      margin-bottom: 16px;
+      font-size: 0.82rem;
+      color: var(--text-muted);
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+    .controls-bar select {
+      background: var(--pastel-lavender-soft);
+      border: 1px solid var(--pastel-lavender-border);
+      color: #5b21b6;
+      font-size: 0.8rem;
+      font-weight: 600;
+      padding: 4px 8px;
+      border-radius: 8px;
+      outline: none;
+      cursor: pointer;
+    }
+
     /* Voice Orb */
     .orb-container {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      padding: 16px 0 12px;
+      padding: 14px 0 10px;
       gap: 14px;
     }
+
     .voice-orb {
-      width: 105px;
-      height: 105px;
+      width: 110px;
+      height: 110px;
       border-radius: 50%;
-      background: radial-gradient(circle, #818cf8 0%, #4f46e5 60%, #312e81 100%);
-      box-shadow: 0 0 40px var(--accent-glow);
+      background: radial-gradient(circle at 35% 35%, #c4b5fd 0%, #a78bfa 40%, #7c3aed 100%);
+      box-shadow: 0 10px 30px rgba(124, 58, 237, 0.35), 0 0 0 6px rgba(167, 139, 250, 0.25);
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
-      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+      transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
       position: relative;
     }
-    .voice-orb:hover { transform: scale(1.05); }
+    .voice-orb:hover {
+      transform: scale(1.06);
+      box-shadow: 0 14px 38px rgba(124, 58, 237, 0.45), 0 0 0 8px rgba(167, 139, 250, 0.35);
+    }
     .voice-orb.listening {
-      transform: scale(1.12);
-      box-shadow: 0 0 60px rgba(16, 185, 129, 0.7);
-      background: radial-gradient(circle, #34d399 0%, #059669 60%, #064e3b 100%);
-      animation: pulse 1.4s infinite alternate;
+      transform: scale(1.14);
+      background: radial-gradient(circle at 35% 35%, #6ee7b7 0%, #34d399 40%, #059669 100%);
+      box-shadow: 0 14px 45px rgba(16, 185, 129, 0.5), 0 0 0 10px rgba(52, 211, 153, 0.35);
+      animation: pastelPulse 1.5s infinite alternate ease-in-out;
+    }
+    .voice-orb.speaking {
+      background: radial-gradient(circle at 35% 35%, #fbcfe8 0%, #f472b6 40%, #db2777 100%);
+      box-shadow: 0 14px 45px rgba(219, 39, 119, 0.45), 0 0 0 10px rgba(244, 114, 182, 0.35);
+      animation: speakingPulse 1.2s infinite alternate ease-in-out;
+    }
+
+    @keyframes pastelPulse {
+      0% { transform: scale(1.08); box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4), 0 0 0 6px rgba(52, 211, 153, 0.3); }
+      100% { transform: scale(1.18); box-shadow: 0 18px 50px rgba(16, 185, 129, 0.6), 0 0 0 12px rgba(52, 211, 153, 0.4); }
     }
-    @keyframes pulse {
-      0% { transform: scale(1.06); box-shadow: 0 0 40px rgba(16, 185, 129, 0.5); }
-      100% { transform: scale(1.16); box-shadow: 0 0 70px rgba(16, 185, 129, 0.9); }
+    @keyframes speakingPulse {
+      0% { transform: scale(1.05); box-shadow: 0 10px 30px rgba(219, 39, 119, 0.35), 0 0 0 6px rgba(244, 114, 182, 0.25); }
+      100% { transform: scale(1.12); box-shadow: 0 16px 45px rgba(219, 39, 119, 0.55), 0 0 0 12px rgba(244, 114, 182, 0.4); }
     }
-    .mic-icon { width: 42px; height: 42px; fill: white; pointer-events: none; }
+
+    .mic-icon { width: 44px; height: 44px; fill: white; pointer-events: none; }
+    
     .status-badge {
-      font-size: 0.82rem;
-      color: var(--text-muted);
+      font-size: 0.84rem;
+      color: #5b21b6;
       font-family: 'JetBrains Mono', monospace;
-      background: var(--card-raised);
-      border: 1px solid var(--border);
-      padding: 4px 12px;
+      font-weight: 600;
+      background: #ffffff;
+      border: 1px solid var(--border-soft);
+      padding: 5px 14px;
       border-radius: 9999px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.03);
     }
-    /* Quick prompt chips */
+
+    /* Pastel Action Chips */
     .chips-row {
       display: flex;
       gap: 8px;
       flex-wrap: wrap;
-      margin: 10px 0;
+      margin: 12px 0 14px;
     }
     .chip {
-      background: rgba(255, 255, 255, 0.05);
-      border: 1px solid var(--border);
-      color: #cbd5e1;
-      font-size: 0.78rem;
-      padding: 5px 12px;
+      background: #ffffff;
+      border: 1px solid var(--border-pastel);
+      color: var(--text-main);
+      font-size: 0.8rem;
+      font-weight: 600;
+      padding: 6px 13px;
       border-radius: 9999px;
       cursor: pointer;
-      transition: all 0.2s;
+      transition: all 0.2s ease;
+      box-shadow: 0 2px 5px rgba(0,0,0,0.02);
     }
     .chip:hover {
-      background: rgba(99, 102, 241, 0.2);
-      border-color: var(--accent);
-      color: white;
+      background: var(--pastel-lavender-soft);
+      border-color: var(--pastel-lavender-border);
+      color: #6d28d9;
+      transform: translateY(-1px);
     }
-    /* Chat history */
+
+    /* Chat Messages Box */
     .chat-box {
       flex: 1;
       min-height: 240px;
@@ -161,70 +268,89 @@
       flex-direction: column;
       gap: 12px;
       padding-right: 6px;
-      margin: 12px 0;
+      margin: 8px 0 16px;
     }
-    .chat-box::-webkit-scrollbar { width: 4px; }
-    .chat-box::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+    .chat-box::-webkit-scrollbar { width: 5px; }
+    .chat-box::-webkit-scrollbar-thumb { background: #ddd6fe; border-radius: 4px; }
+
     .msg {
-      padding: 10px 14px;
-      border-radius: 12px;
-      font-size: 0.9rem;
-      line-height: 1.45;
-      max-width: 90%;
+      padding: 12px 16px;
+      border-radius: 16px;
+      font-size: 0.92rem;
+      line-height: 1.5;
+      max-width: 88%;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.03);
     }
     .msg.user {
       align-self: flex-end;
-      background: #3730a3;
-      color: white;
+      background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
+      color: #ffffff;
+      border-bottom-right-radius: 4px;
     }
     .msg.agent {
       align-self: flex-start;
-      background: #1e2438;
-      border: 1px solid var(--border);
-      color: #e2e8f0;
+      background: #ffffff;
+      border: 1px solid var(--border-soft);
+      color: var(--text-main);
+      border-bottom-left-radius: 4px;
     }
+
     .tool-call-pill {
       display: inline-flex;
       align-items: center;
-      gap: 5px;
-      font-size: 0.72rem;
+      gap: 6px;
+      font-size: 0.74rem;
       font-family: 'JetBrains Mono', monospace;
-      color: var(--gold);
-      background: rgba(245, 158, 11, 0.12);
-      border: 1px solid rgba(245, 158, 11, 0.3);
-      padding: 2px 8px;
-      border-radius: 4px;
-      margin-bottom: 6px;
+      font-weight: 600;
+      color: #b45309;
+      background: #fef3c7;
+      border: 1px solid #fde68a;
+      padding: 3px 10px;
+      border-radius: 6px;
+      margin-bottom: 8px;
     }
+
+    /* Input area */
     .input-row {
       display: flex;
-      gap: 8px;
+      gap: 10px;
       margin-top: auto;
     }
     input[type="text"] {
       flex: 1;
-      background: #0d0f17;
-      border: 1px solid var(--border);
-      color: white;
-      padding: 11px 14px;
-      border-radius: 10px;
+      background: #ffffff;
+      border: 1px solid var(--border-pastel);
+      color: var(--text-main);
+      padding: 12px 16px;
+      border-radius: 14px;
       outline: none;
       font-family: inherit;
-      font-size: 0.9rem;
+      font-size: 0.92rem;
+      box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
+      transition: border-color 0.2s ease;
+    }
+    input[type="text"]:focus {
+      border-color: var(--pastel-lavender);
+      box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
     }
-    input[type="text"]:focus { border-color: var(--accent); }
     button.btn-send {
-      background: var(--accent);
+      background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
       color: white;
       border: none;
-      padding: 0 18px;
-      border-radius: 10px;
-      font-weight: 600;
+      padding: 0 22px;
+      border-radius: 14px;
+      font-weight: 700;
+      font-size: 0.92rem;
       cursor: pointer;
-      transition: background 0.2s;
+      transition: all 0.2s ease;
+      box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
+    }
+    button.btn-send:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 6px 18px rgba(124, 58, 237, 0.35);
     }
-    button.btn-send:hover { background: #4f46e5; }
-    /* Comic Card View */
+
+    /* Right Comic Display Card */
     .comic-card {
       display: flex;
       flex-direction: column;
@@ -235,68 +361,78 @@
     }
     .comic-placeholder {
       color: var(--text-muted);
-      font-size: 0.9rem;
-      padding: 40px 20px;
+      font-size: 0.95rem;
+      padding: 48px 20px;
     }
     .comic-title {
-      font-size: 1.25rem;
-      font-weight: 700;
-      color: #ffffff;
-      margin-bottom: 8px;
+      font-size: 1.35rem;
+      font-weight: 800;
+      color: #3b0764;
+      margin-bottom: 10px;
     }
     .comic-img-wrap {
       background: #ffffff;
-      padding: 12px;
-      border-radius: 10px;
+      padding: 16px;
+      border-radius: 16px;
       margin: 12px 0;
       max-width: 100%;
-      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
+      border: 1px solid var(--border-soft);
+      box-shadow: 0 10px 30px rgba(124, 58, 237, 0.08);
     }
     .comic-img {
       max-width: 100%;
-      max-height: 280px;
+      max-height: 290px;
       object-fit: contain;
       display: block;
+      border-radius: 6px;
     }
     .comic-alt {
-      font-size: 0.84rem;
-      color: #cbd5e1;
-      background: rgba(0, 0, 0, 0.45);
-      border-left: 3px solid var(--accent);
-      padding: 10px 14px;
-      border-radius: 0 8px 8px 0;
+      font-size: 0.86rem;
+      color: #4c1d95;
+      background: var(--pastel-lavender-soft);
+      border-left: 4px solid var(--pastel-lavender);
+      padding: 12px 16px;
+      border-radius: 0 12px 12px 0;
       text-align: left;
-      margin-top: 8px;
-      line-height: 1.45;
+      margin-top: 10px;
+      line-height: 1.5;
+      font-weight: 500;
     }
   </style>
 </head>
 <body>
   <header>
     <div class="badge-row">
-      <a class="badge" href="https://huggingface.co/pipecat-ai/phonellm-alpha-1" target="_blank">pipecat-ai/phonellm-alpha-1</a>
-      <span class="badge">Pipecat Voice Engine</span>
-      <a class="badge" href="https://xkcd.hemanth.deno.net/" target="_blank">xkcd.hemanth.deno.net</a>
+      <a class="badge" href="https://huggingface.co/pipecat-ai/phonellm-alpha-1" target="_blank">🎙️ PhoneLLM Alpha 1</a>
+      <span class="badge mint">⚡ Pipecat Voice Engine</span>
+      <a class="badge peach" href="https://xkcd.hemanth.deno.net/" target="_blank">🌐 xkcd.hemanth.deno.net</a>
     </div>
     <h1>PhoneLLM XKCD Voice Agent</h1>
-    <p class="sub">Speak or type naturally. PhoneLLM decides in real-time when to invoke XKCD tool endpoints.</p>
+    <p class="sub">Soft pastel voice interface with high-fidelity on-device neural speech & live XKCD tool calls.</p>
   </header>
 
   <main class="main-grid">
-    <!-- Voice & Chat Panel -->
+    <!-- Left Voice & Conversation Panel -->
     <div class="panel">
+      <div class="controls-bar">
+        <span>🔊 <strong>On-Device Voice:</strong></span>
+        <select id="voice-select">
+          <option value="default">Loading high-quality neural voices...</option>
+        </select>
+      </div>
+
       <div class="orb-container">
         <div id="voice-orb" class="voice-orb" title="Click to Speak / Stop">
           <svg class="mic-icon" viewBox="0 0 24 24"><path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/><path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/></svg>
         </div>
-        <span id="status-badge" class="status-badge">Tap mic orb or type below</span>
+        <span id="status-badge" class="status-badge">Tap mic orb or select a prompt below</span>
       </div>
 
       <div class="chips-row">
-        <button class="chip" onclick="sendQuery('Show me the latest XKCD comic')">Latest Comic</button>
-        <button class="chip" onclick="sendQuery('Give me a random XKCD comic and explain it')">Random Comic</button>
-        <button class="chip" onclick="sendQuery('What is XKCD comic 327 (Little Bobby Tables)?')">Comic #327</button>
-        <button class="chip" onclick="sendQuery('Show comic 300')">Comic #300</button>
+        <button class="chip" onclick="sendQuery('Show me the latest XKCD comic')">✨ Latest Comic</button>
+        <button class="chip" onclick="sendQuery('Give me a random XKCD comic and explain it')">🎲 Random Comic</button>
+        <button class="chip" onclick="sendQuery('What is XKCD comic 327 (Little Bobby Tables)?')">💻 Little Bobby Tables (#327)</button>
+        <button class="chip" onclick="sendQuery('Show comic 300')">📱 Comic #300</button>
       </div>
 
       <div id="chat-box" class="chat-box"></div>
@@ -307,12 +443,12 @@
       </div>
     </div>
 
-    <!-- Live Comic Visual Display -->
+    <!-- Right Live XKCD Display Panel -->
     <div class="panel">
       <div id="comic-card" class="comic-card">
         <div class="comic-placeholder">
-          <svg width="48" height="48" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" style="margin-bottom:8px; opacity:0.6;"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
-          <p>Ask the agent for an XKCD comic to see it rendered live here.</p>
+          <svg width="54" height="54" fill="none" stroke="#a78bfa" stroke-width="1.5" viewBox="0 0 24 24" style="margin-bottom:12px;"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
+          <p>Ask the agent for an XKCD comic to render it live here.</p>
         </div>
       </div>
     </div>
@@ -326,11 +462,75 @@
     const userInput = document.getElementById('user-input');
     const sendBtn = document.getElementById('send-btn');
     const comicCard = document.getElementById('comic-card');
+    const voiceSelect = document.getElementById('voice-select');
 
     let isListening = false;
     let recognition = null;
+    let selectedVoice = null;
+    let availableVoices = [];
+
+    // Initialize High-Quality On-Device TTS Voices
+    function loadVoices() {
+      if (!('speechSynthesis' in window)) return;
+      availableVoices = window.speechSynthesis.getVoices();
+      if (!availableVoices.length) return;
+
+      voiceSelect.innerHTML = '';
+      
+      // Filter for premium / natural English voices (Samantha, Daniel, Siri, Google US, Natural, etc.)
+      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'));
 
-    // XKCD API Tool Functions
+      voicesToShow.forEach((v, idx) => {
+        const opt = document.createElement('option');
+        opt.value = idx;
+        opt.textContent = `${v.name} (${v.lang})`;
+        voiceSelect.appendChild(opt);
+      });
+
+      // Default to the highest quality natural neural voice
+      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}/`);
       const json = await res.json();
@@ -349,7 +549,7 @@
       return json.data || json;
     }
 
-    // PhoneLLM Conversational & Tool Calling Agent
+    // PhoneLLM Conversational & Tool Calling Engine
     async function processPhoneLLMTurn(userText) {
       statusBadge.textContent = "⚡ PhoneLLM Reasoning...";
       addMessage(userText, "user");
@@ -359,7 +559,6 @@
       let toolName = null;
       let replyText = "";
 
-      // Intent & Tool Calling resolution matching PhoneLLM function schema
       const numMatch = lower.match(/\b(?:comic|number|#)?\s*(\d+)\b/);
 
       if (lower.includes("random") || lower.includes("any comic")) {
@@ -382,11 +581,9 @@
         replyText = `I am your XKCD voice assistant powered by PhoneLLM Alpha 1. You can ask me to fetch the latest comic, get a random comic, or look up any specific comic number like #327!`;
       }
 
-      statusBadge.textContent = "🎙️ Speaking response...";
       addMessage(replyText, "agent", toolName);
       if (comic) renderComic(comic);
       speak(replyText);
-      statusBadge.textContent = "Ready";
     }
 
     function addMessage(text, sender, toolName = null) {
@@ -419,15 +616,6 @@
       `;
     }
 
-    function speak(text) {
-      if (!('speechSynthesis' in window)) return;
-      window.speechSynthesis.cancel();
-      const utterance = new SpeechSynthesisUtterance(text);
-      utterance.rate = 1.05;
-      utterance.pitch = 1.0;
-      window.speechSynthesis.speak(utterance);
-    }
-
     window.sendQuery = function(text) {
       if (!text) return;
       processPhoneLLMTurn(text);
@@ -449,6 +637,7 @@
 
       recognition.onstart = () => {
         isListening = true;
+        orb.classList.remove('speaking');
         orb.classList.add('listening');
         statusBadge.textContent = "🎙️ Listening to your voice...";
       };
@@ -467,7 +656,7 @@
       recognition.onerror = () => {
         isListening = false;
         orb.classList.remove('listening');
-        statusBadge.textContent = "Tap orb to speak";
+        statusBadge.textContent = "Tap mic orb to speak";
       };
     }
 
@@ -480,14 +669,15 @@
         recognition.stop();
       } else {
         window.speechSynthesis.cancel();
+        orb.classList.remove('speaking');
         recognition.start();
       }
     });
 
-    // Welcome greeting
+    // Initial greeting
     setTimeout(() => {
-      addMessage("Hello! I am your Pipecat voice assistant powered by PhoneLLM Alpha 1. Tap the glowing mic orb or click a quick prompt below to look up XKCD comics!", "agent");
-    }, 500);
+      addMessage("Hello! I am your Pipecat voice assistant powered by PhoneLLM Alpha 1. Tap the glowing pastel orb or select a prompt below to look up XKCD comics!", "agent");
+    }, 400);
   </script>
 </body>
 </html>