Upload 3 files

Dockerfile

@@ -0,0 +1,39 @@
+FROM python:3.10-slim
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    ffmpeg \
+    libsndfile1 \
+    git \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+# Clone LuxTTS's code once, at build time
+RUN git clone https://github.com/ysharma3501/LuxTTS.git
+
+# Install all dependencies once, at build time (not on every startup)
+RUN pip install --no-cache-dir \
+    --find-links https://k2-fsa.github.io/icefall/piper_phonemize.html \
+    -r LuxTTS/requirements.txt
+
+RUN pip install --no-cache-dir gradio==4.44.1 "pydantic<2.11" "starlette==0.37.2" "jinja2==3.1.4" uvicorn requests
+
+ENV PYTHONPATH="/app/LuxTTS"
+ENV OMP_NUM_THREADS=2
+ENV MKL_NUM_THREADS=2
+
+# Pre-download the model weights at build time too, so the container
+# never has to fetch them again on startup (they get baked into the image)
+RUN python -c "from zipvoice.luxvoice import LuxTTS; LuxTTS('YatharthS/LuxTTS', device='cpu', threads=2)"
+
+COPY app.py /app/app.py
+COPY index.html /app/index.html
+COPY me.wav /app/me.wav
+COPY me.jpg /app/me.jpg
+COPY facts.json /app/facts.json
+
+EXPOSE 7860
+ENV GRADIO_SERVER_NAME="0.0.0.0"
+
+CMD ["python", "app.py"]

app.py

@@ -0,0 +1,209 @@
+import os
+import time
+import numpy as np
+import gradio as gr
+import requests
+import torch
+from functools import lru_cache
+from fastapi import FastAPI, HTTPException
+from fastapi.responses import FileResponse, JSONResponse
+from zipvoice.luxvoice import LuxTTS
+
+from pydantic import BaseModel
+
+GROQ_API_KEY = os.environ.get("GROQ_API_KEY", "")
+
+
+class ChatBody(BaseModel):
+    messages: list
+
+
+class SpeakBody(BaseModel):
+    text: str
+
+# Init Model (weights already downloaded at build time)
+device = "cuda" if torch.cuda.is_available() else "cpu"
+lux_tts = LuxTTS("YatharthS/LuxTTS", device=device, threads=2)
+
+
+@lru_cache(maxsize=8)
+def get_encoded_prompt(audio_prompt, ref_duration, rms):
+    # encode_prompt() is deterministic for a given (file, duration, rms)
+    # combo, and me.wav never changes between calls from the chat bot -
+    # so we only need to pay this cost once instead of on every message.
+    return lux_tts.encode_prompt(audio_prompt, duration=ref_duration, rms=rms)
+
+
+# Warm the cache at startup so the very first real request doesn't
+# also have to pay the reference-encoding cost.
+try:
+    get_encoded_prompt("me.wav", 5, 0.01)
+    print("Reference prompt pre-encoded and cached.")
+except Exception as e:
+    print(f"Could not pre-warm reference prompt cache: {e}")
+
+
+def infer(
+    text,
+    audio_prompt,
+    rms,
+    ref_duration,
+    t_shift,
+    num_steps,
+    speed,
+    return_smooth,
+):
+    if not text:
+        return None, "Please provide text."
+
+    # If no reference audio is given (e.g. calls from the website API),
+    # fall back to the baked-in me.wav
+    if not audio_prompt:
+        audio_prompt = "me.wav"
+
+    start_time = time.time()
+
+    encoded_prompt = get_encoded_prompt(audio_prompt, ref_duration, rms)
+
+    final_wav = lux_tts.generate_speech(
+        text,
+        encoded_prompt,
+        num_steps=int(num_steps),
+        t_shift=t_shift,
+        speed=speed,
+        return_smooth=return_smooth,
+    )
+
+    duration = round(time.time() - start_time, 2)
+
+    final_wav = final_wav.cpu().squeeze(0).numpy()
+    final_wav = (np.clip(final_wav, -1.0, 1.0) * 32767).astype(np.int16)
+
+    stats_msg = f"✨ Generation complete in **{duration}s**."
+    return (48000, final_wav), stats_msg
+
+
+with gr.Blocks(theme=gr.themes.Soft()) as demo:
+    gr.Markdown("# 🎙️ Papa Jerry Voice (LuxTTS)")
+
+    gr.Markdown(
+        """
+        > **Note:** This demo runs on a **2-core CPU**, so expect slower inference.  
+        > **Tip:** If words get cut off, lower **Speed** or increase **Ref Duration**.
+        """
+    )
+
+    with gr.Row():
+        with gr.Column():
+            input_text = gr.Textbox(
+                label="Text to Synthesize",
+                value="Hey, what's up? I'm feeling really great!",
+            )
+            input_audio = gr.Audio(
+                label="Reference Audio (.wav)",
+                type="filepath",
+                value="me.wav",
+            )
+
+            with gr.Row():
+                rms_val = gr.Number(value=0.01, label="RMS (Loudness)")
+                ref_duration_val = gr.Number(
+                    value=5,
+                    label="Reference Duration (sec)",
+                    info="Lower = faster. Set ~1000 if you hear artifacts.",
+                )
+                t_shift_val = gr.Number(value=0.9, label="T-Shift")
+
+            with gr.Row():
+                steps_val = gr.Slider(1, 10, value=4, step=1, label="Num Steps")
+                speed_val = gr.Slider(
+                    0.5, 2.0, value=0.8, step=0.1,
+                    label="Speed (Lower = Longer / Clearer)",
+                )
+                smooth_val = gr.Checkbox(label="Return Smooth", value=False)
+
+            btn = gr.Button("Generate Speech", variant="primary")
+
+        with gr.Column():
+            audio_out = gr.Audio(label="Result")
+            status_text = gr.Markdown("Ready to generate...")
+
+    btn.click(
+        fn=infer,
+        inputs=[
+            input_text, input_audio, rms_val, ref_duration_val,
+            t_shift_val, steps_val, speed_val, smooth_val,
+        ],
+        outputs=[audio_out, status_text],
+        api_name="predict",
+    )
+
+app = FastAPI()
+
+@app.get("/")
+def read_index():
+    return FileResponse("index.html")
+
+@app.get("/{filename}")
+def read_static_file(filename: str):
+    # Serves any other flat file next to index.html/app.py in the repo -
+    # me.jpg, facts.json, etc. This only matches a single path segment
+    # (no slashes), so it won't intercept the /voice/... Gradio routes.
+    if os.path.isfile(filename):
+        return FileResponse(filename)
+    raise HTTPException(status_code=404, detail="Not found")
+
+
+@app.post("/chat")
+def chat(body: ChatBody):
+    # Proxies the Groq call server-side so GROQ_API_KEY never has to
+    # live in index.html or be visible via "View Page Source".
+    # Plain (non-async) def so FastAPI runs this blocking network call
+    # in a threadpool instead of freezing the whole server on it.
+    if not GROQ_API_KEY:
+        raise HTTPException(status_code=500, detail="GROQ_API_KEY not configured on server")
+
+    r = requests.post(
+        "https://api.groq.com/openai/v1/chat/completions",
+        headers={
+            "Content-Type": "application/json",
+            "Authorization": f"Bearer {GROQ_API_KEY}",
+        },
+        json={
+            "model": "llama-3.3-70b-versatile",
+            "max_tokens": 300,
+            "messages": body.messages,
+        },
+        timeout=30,
+    )
+    return JSONResponse(content=r.json(), status_code=r.status_code)
+
+
+@app.post("/speak")
+def speak_endpoint(body: SpeakBody):
+    # Triggers generation via the same internal Gradio call as before
+    # (this part isn't the change - it's proven reliable on its own).
+    # The difference: instead of ALSO fetching the finished file back
+    # over a second internal HTTP call and buffering it fully in
+    # memory, we serve it directly off disk with FileResponse, which
+    # streams the file in chunks rather than holding the whole thing
+    # in a Python bytes object. Same container/filesystem, so the path
+    # Gradio wrote to is already readable right here.
+    if not body.text:
+        raise HTTPException(status_code=400, detail="No text provided")
+
+    r = requests.post(
+        "http://127.0.0.1:7860/voice/api/predict",
+        json={"data": [body.text, None, 0.01, 5, 0.9, 4, 0.8, False]},
+        timeout=180,
+    )
+    r.raise_for_status()
+    file_path = r.json()["data"][0]["path"]
+
+    return FileResponse(file_path, media_type="audio/wav")
+
+app = gr.mount_gradio_app(app, demo, path="/voice")
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=7860)

index.html

@@ -0,0 +1,453 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Chat with Me</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  :root {
+    --bg: #0d0d0f; --surface: #16161a; --border: rgba(255,255,255,0.08);
+    --accent: #c8a96e; --text: #e8e4dc; --muted: rgba(232,228,220,0.45);
+    --user-bg: #1e2533; --bot-bg: #1a1a1e; --radius: 18px;
+    --font-head: 'DM Serif Display', Georgia, serif;
+    --font-body: 'DM Sans', system-ui, sans-serif;
+  }
+  html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; }
+  .shell { display: grid; grid-template-columns: 320px 1fr; grid-template-rows: 100vh; max-width: 1100px; margin: 0 auto; }
+  .sidebar { border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; gap: 1.5rem; position: relative; overflow: hidden; }
+  .sidebar::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(200,169,110,0.07) 0%, transparent 70%); pointer-events: none; }
+  
+  .avatar-wrap { position: relative; width: 220px; height: 290px; }
+  
+  .avatar-ring { position: absolute; inset: -6px; border-radius: 16px; border: 1.5px solid var(--accent); opacity: 0.3; animation: pulse-ring 2.8s ease-in-out infinite; }
+  .avatar-ring.r2 { inset: -12px; opacity: 0.1; animation-delay: 0.6s; }
+  @keyframes pulse-ring { 0%, 100% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(1.03); opacity: 0.1; } }
+  
+  .avatar-img { 
+    width: 220px; 
+    height: 290px; 
+    border-radius: 16px; 
+    object-fit: cover; 
+    object-position: center center; 
+    border: 1.5px solid rgba(200, 169, 110, 0.4); 
+    display: block; 
+    background: var(--surface); 
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+  }
+  
+  .speaking-badge { display: none; align-items: center; gap: 6px; font-size: 12px; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
+  .speaking-badge.active { display: flex; }
+  .speaking-dots { display: flex; gap: 3px; }
+  .speaking-dots span { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); animation: bounce-dot 1s ease-in-out infinite; }
+  .speaking-dots span:nth-child(2) { animation-delay: 0.15s; }
+  .speaking-dots span:nth-child(3) { animation-delay: 0.30s; }
+  @keyframes bounce-dot { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
+  .bot-name { font-family: var(--font-head); font-size: 1.6rem; color: var(--text); text-align: center; }
+  .bot-tagline { font-size: 13px; color: var(--muted); text-align: center; max-width: 220px; line-height: 1.5; }
+  .voice-toggle { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); cursor: pointer; user-select: none; padding: 6px 12px; border: 1px solid var(--border); border-radius: 99px; transition: border-color 0.2s, color 0.2s; }
+  .voice-toggle:hover { border-color: var(--accent); color: var(--accent); }
+  .voice-toggle input { display: none; }
+  .voice-toggle.on { border-color: var(--accent); color: var(--accent); }
+  
+  .delay-note { font-size: 12px; color: var(--muted); text-align: center; max-width: 200px; line-height: 1.4; font-style: italic; margin-top: -4px; }
+
+  .chat-panel { display: flex; flex-direction: column; height: 100vh; }
+  .chat-header { padding: 1.25rem 1.75rem; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; flex-shrink: 0; }
+  .messages { flex: 1; overflow-y: auto; padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; scroll-behavior: smooth; }
+  .messages::-webkit-scrollbar { width: 4px; }
+  .messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+  .msg { display: flex; flex-direction: column; max-width: 78%; gap: 4px; animation: msg-in 0.25s ease-out both; }
+  @keyframes msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
+  .msg.user { align-self: flex-end; align-items: flex-end; }
+  .msg.bot  { align-self: flex-start; align-items: flex-start; }
+  .bubble { padding: 0.75rem 1.1rem; border-radius: var(--radius); font-size: 15px; line-height: 1.65; }
+  .msg.user .bubble { background: var(--user-bg); border-bottom-right-radius: 4px; border: 1px solid rgba(126,159,199,0.2); }
+  .msg.bot  .bubble { background: var(--bot-bg); border-bottom-left-radius: 4px; border: 1px solid var(--border); }
+  .msg-time { font-size: 11px; color: var(--muted); padding: 0 4px; }
+  
+  .replay-btn { font-size: 11px; color: var(--accent); background: none; border: 1px solid rgba(200, 169, 110, 0.3); border-radius: 99px; padding: 3px 10px; cursor: pointer; margin-top: 6px; width: fit-content; transition: background 0.15s, border-color 0.15s; display: none; align-items: center; gap: 4px; }
+  .replay-btn.visible { display: flex; }
+  .replay-btn:hover { background: rgba(200, 169, 110, 0.1); border-color: var(--accent); }
+
+  .typing-bubble { background: var(--bot-bg); border: 1px solid var(--border); border-radius: var(--radius); border-bottom-left-radius: 4px; padding: 0.75rem 1.1rem; display: none; align-items: center; gap: 5px; width: fit-content; }
+  .typing-bubble.visible { display: flex; }
+  .typing-bubble span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: bounce-dot 1s ease-in-out infinite; }
+  .typing-bubble span:nth-child(2) { animation-delay: 0.15s; }
+  .typing-bubble span:nth-child(3) { animation-delay: 0.30s; }
+  .gen-voice { font-size: 12px; color: var(--muted); padding: 4px 8px; display: none; }
+  .gen-voice.visible { display: block; }
+  .input-bar { padding: 1.25rem 1.75rem; border-top: 1px solid var(--border); display: flex; gap: 10px; align-items: flex-end; flex-shrink: 0; background: var(--bg); }
+  .input-wrap { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 0.65rem 1rem; display: flex; align-items: flex-end; gap: 8px; transition: border-color 0.2s; }
+  .input-wrap:focus-within { border-color: rgba(200,169,110,0.4); }
+  #user-input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-family: var(--font-body); font-size: 15px; resize: none; max-height: 120px; min-height: 24px; line-height: 1.5; }
+  #user-input::placeholder { color: var(--muted); }
+  .send-btn { width: 38px; height: 38px; border-radius: 10px; border: none; background: var(--accent); color: #0d0d0f; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: opacity 0.15s, transform 0.1s; font-size: 18px; }
+  .send-btn:hover { opacity: 0.85; }
+  .send-btn:active { transform: scale(0.95); }
+  .send-btn:disabled { opacity: 0.35; cursor: not-allowed; }
+  @media (max-width: 660px) {
+    .shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: 100vh; }
+    .sidebar { flex-direction: row; border-right: none; border-bottom: 1px solid var(--border); padding: 1rem 1.25rem; gap: 1rem; justify-content: flex-start; }
+    .avatar-wrap { width: 56px; height: 56px; flex-shrink: 0; }
+    .avatar-img { width: 56px; height: 56px; border-radius: 8px; }
+    .avatar-ring, .avatar-ring.r2 { display: none; }
+    .bot-tagline, .voice-toggle, .speaking-badge, .delay-note { display: none !important; }
+    .bot-name { font-size: 1.1rem; }
+    .chat-panel { height: 0; min-height: 0; }
+  }
+</style>
+</head>
+<body>
+<div class="shell">
+  <aside class="sidebar">
+    <div class="avatar-wrap">
+      <div class="avatar-ring"></div>
+      <div class="avatar-ring r2"></div>
+      <img id="avatar-static" class="avatar-img" src="me.jpg"
+           onerror="this.style.background='#2a2a30';this.src=''" alt="Avatar">
+    </div>
+    <div class="speaking-badge" id="speaking-badge">
+      <div class="speaking-dots"><span></span><span></span><span></span></div>
+      Speaking
+    </div>
+    <div>
+      <h1 class="bot-name">Papa Jerry</h1>
+      <p class="bot-tagline">Ask me anything — I'm here to help.</p>
+    </div>
+    <label class="voice-toggle on" id="voice-toggle">
+      <input type="checkbox" id="voice-on" checked>
+      🔊 Voice on
+    </label>
+    <div class="delay-note">
+      voice generation takes 15-45 seconds - please be patient
+    </div>
+  </aside>
+  <main class="chat-panel">
+    <div class="chat-header">Conversation</div>
+    <div class="messages" id="messages">
+      <div class="msg bot">
+        <div class="bubble">Hey there! 👋 I'm here and ready to chat. Ask me anything you'd like.</div>
+        <span class="msg-time" id="greeting-time"></span>
+      </div>
+      <div class="typing-bubble" id="typing">
+        <span></span><span></span><span></span>
+      </div>
+      <div class="gen-voice" id="gen-voice">🎙️ Generating voice...</div>
+    </div>
+    <div class="input-bar">
+      <div class="input-wrap">
+        <textarea id="user-input" rows="1" placeholder="Type a message…"></textarea>
+      </div>
+      <button class="send-btn" id="send-btn" title="Send">&#10148;</button>
+    </div>
+  </main>
+</div>
+<audio id="tts-audio" style="display:none"></audio>
+
+<script>
+// Silent debug logger - view via browser Console (F12), no on-page UI.
+var debugStartTime = null;
+function dlog(msg) {
+  if (debugStartTime === null) debugStartTime = performance.now();
+  var elapsed = ((performance.now() - debugStartTime) / 1000).toFixed(2);
+  console.log('[+' + elapsed + 's] ' + msg);
+}
+window.addEventListener('error', function(e) {
+  dlog('❌ JS ERROR: ' + e.message);
+});
+window.addEventListener('unhandledrejection', function(e) {
+  dlog('❌ UNHANDLED PROMISE REJECTION: ' + (e.reason && e.reason.message ? e.reason.message : e.reason));
+});
+</script>
+
+<script>
+// ============================================================
+//  CONFIGURE THESE
+// ============================================================
+var HF_SPACE_URL = 'https://zaktree-papa-jerry-v2.hf.space';
+var BASE_SYSTEM_PROMPT = 'You are Papa Jerry, a warm and loving grandfather chatting with family. Speak with warmth, and gentle humor. Because your words are converted to spoken audio and family members are waiting to hear you, always keep replies short — 2 to 3 sentences — even when being thoughtful or wise.';
+var SYSTEM_PROMPT = BASE_SYSTEM_PROMPT; 
+var POLL_INTERVAL = 4000;               
+// ============================================================
+
+var chatHistory = [];
+var busy = false;
+var currentBotMsgId = null;
+
+var msgsEl      = document.getElementById('messages');
+var inputEl     = document.getElementById('user-input');
+var sendBtn     = document.getElementById('send-btn');
+var typing      = document.getElementById('typing');
+var genVoiceEl  = document.getElementById('gen-voice');
+var voiceOn     = document.getElementById('voice-on');
+var voiceToggle = document.getElementById('voice-toggle');
+var speakBadge  = document.getElementById('speaking-badge');
+var ttsAudio    = document.getElementById('tts-audio');
+
+document.getElementById('greeting-time').textContent = _time();
+
+// Dynamic loader built to ingest 'family' and 'other' data fields safely
+function loadFactsFromServer() {
+  fetch('facts.json')
+    .then(function(r) { return r.json(); })
+    .then(function(facts) {
+      var factsText = "\n\nHere are some facts you know about specific people:\n";
+      for (var person in facts) {
+        var location = facts[person].location || "unknown";
+        var job = facts[person].job || "unknown";
+        var hobbies = facts[person].hobbies || "unknown";
+        
+        // Dynamic additions: Append context chunks string conditionally
+        var familyDetails = facts[person].family ? " Family connections: " + facts[person].family + "." : "";
+        var otherDetails = facts[person].other ? " Additional information: " + facts[person].other + "." : "";
+
+        factsText += "- " + person + " lives in " + location + 
+                     ", works as a " + job + 
+                     ", and their hobbies include " + hobbies + "." + 
+                     familyDetails + otherDetails + "\n";
+      }
+      SYSTEM_PROMPT = BASE_SYSTEM_PROMPT + factsText;
+      console.log("AI context initialized with multi-field profile definitions.");
+    })
+    .catch(function(err) { 
+      console.log("No facts loaded or file empty, applying base prompt fallback.", err); 
+    });
+}
+
+loadFactsFromServer();
+
+voiceOn.addEventListener('change', function() {
+  voiceToggle.classList.toggle('on', voiceOn.checked);
+  voiceToggle.lastChild.textContent = voiceOn.checked ? ' Voice on' : ' Voice off';
+});
+
+inputEl.addEventListener('input', function() {
+  this.style.height = 'auto';
+  this.style.height = Math.min(this.scrollHeight, 120) + 'px';
+});
+
+inputEl.addEventListener('keydown', function(e) {
+  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); }
+});
+
+sendBtn.addEventListener('click', send);
+
+function unlockAudio() {
+  dlog('unlockAudio() called (click gesture)');
+  try {
+    ttsAudio.muted = true;
+    var p = ttsAudio.play();
+    if (p && p.catch) p.catch(function(e) { dlog('unlock play() rejected: ' + e.message); });
+    ttsAudio.pause();
+    ttsAudio.currentTime = 0;
+    dlog('unlockAudio() completed OK');
+  } catch (e) { dlog('unlockAudio() threw: ' + e.message); }
+}
+
+function send() {
+  var text = inputEl.value.trim();
+  if (!text || busy) return;
+  debugStartTime = performance.now();
+  dlog('--- NEW MESSAGE: "' + text + '" ---');
+  if (voiceOn.checked) unlockAudio();
+  addMessage('user', text);
+  chatHistory.push({ role: 'user', content: text });
+  inputEl.value = '';
+  inputEl.style.height = 'auto';
+  setTyping(true);
+  busy = true;
+  sendBtn.disabled = true;
+  currentBotMsgId = 'msg-' + Date.now();
+
+  fetch('/chat', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({
+      messages: [{ role: 'system', content: SYSTEM_PROMPT }].concat(chatHistory)
+    })
+  })
+  .then(function(r) { return r.json(); })
+  .then(function(data) {
+    setTyping(false);
+    if (!data.choices || !data.choices[0]) {
+      addMessage('bot', 'Sorry, I could not get a response. Please try again.');
+      done(); return;
+    }
+    var reply = data.choices[0].message.content;
+    chatHistory.push({ role: 'assistant', content: reply });
+    
+    addMessage('bot', reply, currentBotMsgId);
+    
+    if (voiceOn.checked) {
+      speak(reply);
+    } else {
+      done();
+    }
+  })
+  .catch(function(err) {
+    setTyping(false);
+    addMessage('bot', 'Connection error: ' + err.message);
+    done();
+  });
+}
+
+var voiceStartTime = 0;
+var UI_CounterInterval = null;
+
+function startVoiceTimer() {
+  voiceStartTime = performance.now();
+  genVoiceEl.textContent = '🎙️ Generating voice... 0s';
+  genVoiceEl.classList.add('visible');
+  UI_CounterInterval = setInterval(function() {
+    var elapsed = Math.round((performance.now() - voiceStartTime) / 1000);
+    genVoiceEl.textContent = '🎙️ Generating voice... ' + elapsed + 's';
+  }, 1000);
+}
+
+function stopVoiceTimer() {
+  if (UI_CounterInterval) { clearInterval(UI_CounterInterval); UI_CounterInterval = null; }
+  genVoiceEl.classList.remove('visible');
+}
+
+function speak(text) {
+  startVoiceTimer();
+  dlog('speak(): sending POST /speak');
+  fetch('/speak', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ text: text })
+  })
+  .then(function(r) {
+    dlog('speak response received, HTTP status ' + r.status);
+    if (!r.ok) throw new Error('HTTP ' + r.status);
+    return r.blob();
+  })
+  .then(function(blob) {
+    var accurateSeconds = ((performance.now() - voiceStartTime) / 1000).toFixed(1);
+    dlog('audio blob received after ' + accurateSeconds + 's, size ' + blob.size + ' bytes, type ' + blob.type);
+    stopVoiceTimer();
+    injectVoiceDuration(currentBotMsgId, accurateSeconds);
+
+    var typedBlob = blob.type === 'audio/wav' ? blob : new Blob([blob], { type: 'audio/wav' });
+    var finalUrl = URL.createObjectURL(typedBlob);
+    setupReplayButton(currentBotMsgId, finalUrl);
+    playAudio(finalUrl);
+  })
+  .catch(function(e) { dlog('❌ /speak failed: ' + e.message); stopVoiceTimer(); done(); });
+}
+
+function playAudio(src) {
+  dlog('playAudio() called, src=' + src.slice(0, 80));
+  if (busy && !ttsAudio.paused) {
+    ttsAudio.pause();
+  }
+  speakBadge.classList.add('active');
+  ttsAudio.muted = false;
+  ttsAudio.src = src;
+
+  ttsAudio.oncanplay = function() { dlog('audio event: canplay'); };
+  ttsAudio.onwaiting = function() { dlog('audio event: waiting (buffering)'); };
+  ttsAudio.onstalled = function() { dlog('audio event: stalled'); };
+  ttsAudio.onplaying = function() { dlog('🔊 audio event: PLAYING (actually audible now)'); };
+
+  var playPromise = ttsAudio.play();
+  if (playPromise && playPromise.then) {
+    playPromise.then(function() {
+      dlog('play() promise RESOLVED (browser allowed playback)');
+    }).catch(function(e) {
+      dlog('❌ play() promise REJECTED: ' + e.name + ' - ' + e.message);
+    });
+  }
+
+  ttsAudio.onended = function() { dlog('audio event: ended'); speakBadge.classList.remove('active'); done(); };
+  ttsAudio.onerror = function() { dlog('❌ audio event: error - ' + (ttsAudio.error ? ttsAudio.error.message : 'unknown')); speakBadge.classList.remove('active'); done(); };
+}
+
+function done() {
+  busy = false;
+  sendBtn.disabled = false;
+  inputEl.focus();
+}
+
+function addMessage(role, text, elementId) {
+  var msg = document.createElement('div');
+  msg.className = 'msg ' + role;
+  if (elementId) msg.id = elementId;
+  
+  var bubble = document.createElement('div');
+  bubble.className = 'bubble';
+  bubble.textContent = text;
+  var time = document.createElement('span');
+  time.className = 'msg-time';
+  time.textContent = _time();
+  msg.appendChild(bubble);
+  msg.appendChild(time);
+  
+  if (role === 'bot') {
+    var replayBtn = document.createElement('button');
+    replayBtn.className = 'replay-btn';
+    replayBtn.innerHTML = '▶️ Replay Voice';
+    msg.appendChild(replayBtn);
+  }
+
+  msgsEl.insertBefore(msg, typing);
+  msgsEl.scrollTop = msgsEl.scrollHeight;
+}
+
+function injectVoiceDuration(elementId, seconds) {
+  var targetMsg = document.getElementById(elementId);
+  if (!targetMsg) return;
+
+  var durationEl = document.createElement('div');
+  durationEl.style.fontSize = '11px';
+  durationEl.style.color = 'var(--muted)';
+  durationEl.style.marginTop = '4px';
+  durationEl.style.padding = '0 4px';
+  durationEl.textContent = '⏱️ Generated in ' + seconds + 's';
+
+  var replayBtn = targetMsg.querySelector('.replay-btn');
+  if (replayBtn) {
+    targetMsg.insertBefore(durationEl, replayBtn);
+  } else {
+    targetMsg.appendChild(durationEl);
+  }
+  msgsEl.scrollTop = msgsEl.scrollHeight;
+}
+
+function setupReplayButton(elementId, audioSrc) {
+  var targetMsg = document.getElementById(elementId);
+  if (!targetMsg) return;
+  
+  var btn = targetMsg.querySelector('.replay-btn');
+  if (!btn) return;
+  
+  btn.onclick = function() {
+    speakBadge.classList.add('active');
+    ttsAudio.src = audioSrc;
+    ttsAudio.play();
+    ttsAudio.onended = function() { speakBadge.classList.remove('active'); };
+    ttsAudio.onerror = function() { speakBadge.classList.remove('active'); };
+  };
+  btn.classList.add('visible');
+}
+
+function setTyping(show) {
+  typing.classList.toggle('visible', show);
+  msgsEl.scrollTop = msgsEl.scrollHeight;
+}
+
+// Global UI clock time builder string
+function _time() {
+  var d = new Date(), h = d.getHours(), m = d.getMinutes();
+  var ampm = h >= 12 ? 'pm' : 'am';
+  h = h % 12 || 12;
+  return h + ':' + (m < 10 ? '0' : '') + m + ' ' + ampm;
+}
+</script>
+</body>
+</html>