Update app.py

app.py

@@ -1,17 +1,13 @@
 """
 Avatar Chatbot - HuggingFace Spaces Edition
-Phase 1: Chat UI + Idle Video Loop + LLM (Groq) + TTS (Groq)
-Phase 2: FLOAT lipsync (to be added)
+Single response per message: LLM → TTS → FLOAT lipsync → play
 """
 from fastapi import FastAPI, HTTPException, Request
 from fastapi.responses import HTMLResponse, StreamingResponse, JSONResponse
-from fastapi.staticfiles import StaticFiles
 from pathlib import Path
 import mimetypes
 import os
 import logging
-import asyncio
-import time
 import subprocess
 
 logging.basicConfig(level=logging.INFO)
@@ -19,19 +15,16 @@ logger = logging.getLogger(__name__)
 
 app = FastAPI()
 
-# --- Config ---
 VIDEOS_DIR = Path("/tmp/videos")
 TTS_DIR = Path("/tmp/tts_output")
 LIPSYNC_DIR = Path("/tmp/lipsync_output")
 REPO_ID = os.environ.get("SPACE_ID", "ffbeqwbe/AvatarChatbot")
-
 FLOAT_ENABLED = os.environ.get("FLOAT_ENABLED", "true").lower() == "true"
 
 for d in [VIDEOS_DIR, TTS_DIR, LIPSYNC_DIR]:
     d.mkdir(parents=True, exist_ok=True)
 
 
-# --- Startup: download idle videos + init FLOAT ---
 @app.on_event("startup")
 async def startup():
     await download_videos()
@@ -40,102 +33,59 @@ async def startup():
 
 
 async def init_float():
-    """Initialize FLOAT lipsync model (runs once at startup)."""
     import torch
     logger.info(f"[STARTUP] CUDA available: {torch.cuda.is_available()}")
     if not torch.cuda.is_available():
-        logger.warning("[STARTUP] No GPU detected - FLOAT lipsync disabled")
+        logger.warning("[STARTUP] No GPU - FLOAT disabled")
         return
-
     try:
         from float_lipsync import get_lipsync
-        from huggingface_hub import hf_hub_download
+        from huggingface_hub import hf_hub_download, snapshot_download
         import shutil
 
-        checkpoints_dir = Path("/app/checkpoints")
-        checkpoints_dir.mkdir(parents=True, exist_ok=True)
+        ckpt = Path("/app/checkpoints")
+        ckpt.mkdir(parents=True, exist_ok=True)
 
-        # Download wav2vec2-base-960h from HuggingFace
-        w2v_dir = checkpoints_dir / "wav2vec2-base-960h"
-        if not w2v_dir.exists():
+        w2v = ckpt / "wav2vec2-base-960h"
+        if not w2v.exists():
             logger.info("[STARTUP] Downloading wav2vec2-base-960h...")
-            from huggingface_hub import snapshot_download
-            snapshot_download(
-                repo_id="facebook/wav2vec2-base-960h",
-                local_dir=str(w2v_dir),
-            )
-            logger.info("[STARTUP] wav2vec2-base-960h downloaded")
-
-        # Download wav2vec-english-speech-emotion-recognition
-        emo_dir = checkpoints_dir / "wav2vec-english-speech-emotion-recognition"
-        if not emo_dir.exists():
-            logger.info("[STARTUP] Downloading emotion recognition model...")
-            from huggingface_hub import snapshot_download
-            snapshot_download(
-                repo_id="r-f/wav2vec-english-speech-emotion-recognition",
-                local_dir=str(emo_dir),
-            )
-            logger.info("[STARTUP] Emotion model downloaded")
-
-        # Check for float.pth - download from repo if not present (xet storage)
-        float_ckpt = checkpoints_dir / "float.pth"
-        if not float_ckpt.exists() or float_ckpt.stat().st_size < 1024:
-            logger.info("[STARTUP] Downloading float.pth from repo...")
-            try:
-                downloaded = hf_hub_download(
-                    repo_id=REPO_ID, repo_type="space",
-                    filename="app/checkpoints/float.pth",
-                    local_dir="/tmp/hf_download",
-                )
-                shutil.copy2(downloaded, float_ckpt)
-                logger.info(f"[STARTUP] float.pth downloaded: {float_ckpt.stat().st_size / 1e6:.1f} MB")
-            except Exception as e:
-                logger.warning(f"[STARTUP] Could not download float.pth: {e}")
-                logger.warning("[STARTUP] Upload it to your Space repo under app/checkpoints/float.pth")
-                logger.warning("[STARTUP] FLOAT lipsync will be disabled until checkpoint is available")
-                return
-
-        # Check for reference image - download from repo if needed
-        assets_dir = Path("/app/assets")
-        assets_dir.mkdir(parents=True, exist_ok=True)
-        ref_image = assets_dir / "ref.png"
-        if not ref_image.exists() or ref_image.stat().st_size < 1024:
-            logger.info("[STARTUP] Looking for reference image in repo...")
-            try:
-                # Try common image extensions
-                for ext in ["ref.png", "ref.jpg", "ref.jpeg", "main2.png"]:
-                    try:
-                        downloaded = hf_hub_download(
-                            repo_id=REPO_ID, repo_type="space",
-                            filename=f"app/assets/{ext}",
-                            local_dir="/tmp/hf_download",
-                        )
-                        dest = assets_dir / ext
-                        shutil.copy2(downloaded, dest)
-                        ref_image = dest
-                        logger.info(f"[STARTUP] Reference image downloaded: {ext}")
-                        break
-                    except Exception:
-                        continue
-                else:
-                    logger.warning("[STARTUP] No reference image found in app/assets/")
-                    logger.warning("[STARTUP] Upload a face image as app/assets/ref.png")
-                    return
-            except Exception as e:
-                logger.warning(f"[STARTUP] Could not download reference image: {e}")
-                return
-
-        # Initialize FLOAT
-        lipsync = get_lipsync()
-        config = {
-            "ref_path": str(ref_image),
-            "ckpt_path": str(float_ckpt),
-            "wav2vec_model_path": str(w2v_dir),
-            "audio2emotion_path": str(emo_dir),
-        }
-        lipsync.initialize(config)
-        logger.info("[STARTUP] ✓ FLOAT lipsync system ready!")
+            snapshot_download(repo_id="facebook/wav2vec2-base-960h", local_dir=str(w2v))
+
+        emo = ckpt / "wav2vec-english-speech-emotion-recognition"
+        if not emo.exists():
+            logger.info("[STARTUP] Downloading emotion model...")
+            snapshot_download(repo_id="r-f/wav2vec-english-speech-emotion-recognition", local_dir=str(emo))
+
+        fp = ckpt / "float.pth"
+        if not fp.exists() or fp.stat().st_size < 1024:
+            logger.info("[STARTUP] Downloading float.pth...")
+            dl = hf_hub_download(repo_id=REPO_ID, repo_type="space",
+                                 filename="app/checkpoints/float.pth", local_dir="/tmp/hf_download")
+            shutil.copy2(dl, fp)
+            logger.info(f"[STARTUP] float.pth: {fp.stat().st_size/1e6:.1f} MB")
+
+        assets = Path("/app/assets")
+        assets.mkdir(parents=True, exist_ok=True)
+        ref = assets / "ref.png"
+        if not ref.exists() or ref.stat().st_size < 1024:
+            for name in ["ref.png", "ref.jpg", "main2.png"]:
+                try:
+                    dl = hf_hub_download(repo_id=REPO_ID, repo_type="space",
+                                         filename=f"app/assets/{name}", local_dir="/tmp/hf_download")
+                    shutil.copy2(dl, assets / name)
+                    ref = assets / name
+                    break
+                except Exception:
+                    continue
+            else:
+                logger.warning("[STARTUP] No ref image found"); return
 
+        lipsync = get_lipsync()
+        lipsync.initialize({
+            "ref_path": str(ref), "ckpt_path": str(fp),
+            "wav2vec_model_path": str(w2v), "audio2emotion_path": str(emo),
+        })
+        logger.info("[STARTUP] ✓ FLOAT ready!")
     except Exception as e:
         logger.error(f"[STARTUP] FLOAT init failed: {e}", exc_info=True)
 
@@ -143,192 +93,110 @@ async def init_float():
 async def download_videos():
     from huggingface_hub import HfApi, hf_hub_download
     import shutil
-
     try:
         api = HfApi()
         files = api.list_repo_files(repo_id=REPO_ID, repo_type="space")
-        video_files = [
-            f for f in files
-            if f.startswith("app/videos/")
-            and any(f.endswith(ext) for ext in (".mp4", ".webm", ".mkv", ".mov"))
-        ]
-        logger.info(f"Found {len(video_files)} video files in repo")
-
-        for vf in video_files:
-            filename = Path(vf).name
-            dest = VIDEOS_DIR / filename
-            if dest.exists() and dest.stat().st_size > 1024:
-                continue
+        vids = [f for f in files if f.startswith("app/videos/") and f.endswith((".mp4",".webm",".mkv",".mov"))]
+        logger.info(f"Found {len(vids)} video files")
+        for vf in vids:
+            dest = VIDEOS_DIR / Path(vf).name
+            if dest.exists() and dest.stat().st_size > 1024: continue
             logger.info(f"Downloading {vf}...")
-            downloaded = hf_hub_download(
-                repo_id=REPO_ID, repo_type="space", filename=vf,
-                local_dir="/tmp/hf_download",
-            )
-            shutil.copy2(downloaded, dest)
-            logger.info(f"Downloaded {filename}: {dest.stat().st_size} bytes")
+            dl = hf_hub_download(repo_id=REPO_ID, repo_type="space", filename=vf, local_dir="/tmp/hf_download")
+            shutil.copy2(dl, dest)
+            logger.info(f"Downloaded {dest.name}: {dest.stat().st_size} bytes")
     except Exception as e:
         logger.error(f"Error downloading videos: {e}")
 
 
-# --- API: list idle videos ---
 @app.get("/api/videos")
 async def list_videos():
-    if not VIDEOS_DIR.exists():
-        return JSONResponse({"videos": []})
-    videos = []
-    for f in sorted(VIDEOS_DIR.iterdir()):
-        if f.suffix.lower() in (".mp4", ".webm", ".mkv", ".mov") and f.stat().st_size > 1024:
-            videos.append({"name": f.stem, "filename": f.name})
-    return JSONResponse({"videos": videos})
+    if not VIDEOS_DIR.exists(): return JSONResponse({"videos": []})
+    return JSONResponse({"videos": [
+        {"name": f.stem, "filename": f.name}
+        for f in sorted(VIDEOS_DIR.iterdir())
+        if f.suffix.lower() in (".mp4",".webm",".mkv",".mov") and f.stat().st_size > 1024
+    ]})
 
 
-# --- API: stream a video file ---
 @app.get("/api/stream/{filename}")
 async def stream_video(filename: str):
-    # Check both idle videos and lipsync output
-    video_path = None
-    for search_dir in [VIDEOS_DIR, LIPSYNC_DIR, TTS_DIR]:
-        candidate = search_dir / filename
-        if candidate.exists() and candidate.is_file():
-            video_path = candidate
-            break
-
-    if not video_path:
-        raise HTTPException(status_code=404, detail="Video not found")
+    path = None
+    for d in [VIDEOS_DIR, LIPSYNC_DIR, TTS_DIR]:
+        c = d / filename
+        if c.exists() and c.is_file(): path = c; break
+    if not path: raise HTTPException(404, "Not found")
+    mime = mimetypes.guess_type(filename)[0] or "video/mp4"
+    def gen():
+        with open(path, "rb") as f:
+            while chunk := f.read(1024*1024): yield chunk
+    return StreamingResponse(gen(), media_type=mime,
+        headers={"Content-Length": str(path.stat().st_size), "Accept-Ranges": "bytes"})
 
-    mime_type = mimetypes.guess_type(filename)[0] or "video/mp4"
-    file_size = video_path.stat().st_size
 
-    def iter_file():
-        with open(video_path, "rb") as f:
-            while chunk := f.read(1024 * 1024):
-                yield chunk
-
-    return StreamingResponse(
-        iter_file(),
-        media_type=mime_type,
-        headers={"Content-Length": str(file_size), "Accept-Ranges": "bytes"},
-    )
-
-
-# --- API: stream audio file ---
 @app.get("/api/audio/{filename}")
 async def stream_audio(filename: str):
-    audio_path = TTS_DIR / filename
-    if not audio_path.exists():
-        raise HTTPException(status_code=404, detail="Audio not found")
-
-    mime_type = mimetypes.guess_type(filename)[0] or "audio/wav"
-    file_size = audio_path.stat().st_size
+    path = TTS_DIR / filename
+    if not path.exists(): raise HTTPException(404, "Not found")
+    mime = mimetypes.guess_type(filename)[0] or "audio/wav"
+    def gen():
+        with open(path, "rb") as f:
+            while chunk := f.read(1024*1024): yield chunk
+    return StreamingResponse(gen(), media_type=mime,
+        headers={"Content-Length": str(path.stat().st_size)})
 
-    def iter_file():
-        with open(audio_path, "rb") as f:
-            while chunk := f.read(1024 * 1024):
-                yield chunk
 
-    return StreamingResponse(
-        iter_file(),
-        media_type=mime_type,
-        headers={"Content-Length": str(file_size)},
-    )
-
-
-# --- API: chat endpoint (returns text immediately, then streams lipsync chunks) ---
 @app.post("/api/chat")
 async def chat(request: Request):
-    """
-    Step 1: LLM generates full response text.
-    Step 2: Returns text immediately so frontend can show it.
-    Step 3: Frontend then calls /api/chat/generate to get lipsync chunks via SSE.
-    """
     body = await request.json()
     user_text = body.get("text", "").strip()
-
-    if not user_text:
-        raise HTTPException(status_code=400, detail="No text provided")
+    if not user_text: raise HTTPException(400, "No text")
 
     logger.info(f"[CHAT] User: {user_text}")
 
-    # 1. LLM
     from llm import generate_darwin_response
     llm_result = generate_darwin_response(user_text)
     reply_text = llm_result['text']
     logger.info(f"[CHAT] Darwin: {reply_text}")
 
-    # Split into sentences (by period only, not commas)
-    import re
-    raw_sentences = re.split(r'(?<=\.)\s+', reply_text)
-    sentences = [s.strip() for s in raw_sentences if s.strip()]
-    # If no periods found, treat whole text as one chunk
-    if not sentences:
-        sentences = [reply_text]
-
-    return JSONResponse({
-        "text": reply_text,
-        "emotion": llm_result.get('emotion', 'neutral'),
-        "sentences": sentences,
-    })
-
-
-@app.post("/api/chat/generate")
-async def chat_generate(request: Request):
-    """
-    SSE endpoint: receives a sentence, generates TTS + lipsync, returns result.
-    Called once per sentence by the frontend.
-    """
-    body = await request.json()
-    sentence = body.get("sentence", "").strip()
-
-    if not sentence:
-        raise HTTPException(status_code=400, detail="No sentence provided")
-
-    logger.info(f"[GEN] Sentence: {sentence[:60]}...")
-
-    # 1. TTS
     from tts import generate_audio
-    audio_path = generate_audio(sentence)
+    audio_path = generate_audio(reply_text)
     audio_url = None
     audio_duration = 0
-
     if audio_path and os.path.exists(audio_path):
-        audio_filename = os.path.basename(audio_path)
-        audio_url = f"/api/audio/{audio_filename}"
-
+        audio_url = f"/api/audio/{os.path.basename(audio_path)}"
         try:
-            result = subprocess.run(
-                ["ffprobe", "-v", "quiet", "-show_entries", "format=duration",
-                 "-of", "csv=p=0", audio_path],
-                capture_output=True, text=True, check=True
-            )
-            audio_duration = float(result.stdout.strip())
+            r = subprocess.run(["ffprobe","-v","quiet","-show_entries","format=duration",
+                                "-of","csv=p=0",audio_path], capture_output=True, text=True, check=True)
+            audio_duration = float(r.stdout.strip())
         except Exception:
             audio_duration = 3.0
 
-    # 2. Lipsync
     lipsync_video_url = None
     if FLOAT_ENABLED and audio_path and os.path.exists(audio_path):
         try:
             from float_lipsync import get_lipsync
             lipsync = get_lipsync()
             if lipsync.ready:
-                logger.info(f"[GEN] Running FLOAT lipsync...")
-                lipsync_path = lipsync.generate(audio_path)
-                if lipsync_path and os.path.exists(lipsync_path):
-                    lipsync_filename = os.path.basename(lipsync_path)
-                    lipsync_video_url = f"/api/stream/{lipsync_filename}"
-                    logger.info(f"[GEN] Lipsync video: {lipsync_video_url}")
+                logger.info("[CHAT] Running FLOAT lipsync...")
+                lp = lipsync.generate(audio_path)
+                if lp and os.path.exists(lp):
+                    lipsync_video_url = f"/api/stream/{os.path.basename(lp)}"
+                    logger.info(f"[CHAT] Lipsync: {lipsync_video_url}")
+            else:
+                logger.info("[CHAT] FLOAT not ready")
         except Exception as e:
-            logger.error(f"[GEN] Lipsync failed: {e}", exc_info=True)
+            logger.error(f"[CHAT] Lipsync failed: {e}", exc_info=True)
 
     return JSONResponse({
-        "sentence": sentence,
+        "text": reply_text,
+        "emotion": llm_result.get('emotion','neutral'),
         "audio_url": audio_url,
         "audio_duration": audio_duration,
         "lipsync_video_url": lipsync_video_url,
     })
 
 
-# --- API: reset conversation ---
 @app.post("/api/reset")
 async def reset_chat():
     from llm import reset_conversation
@@ -336,7 +204,6 @@ async def reset_chat():
     return JSONResponse({"status": "ok"})
 
 
-# --- Main page ---
 @app.get("/", response_class=HTMLResponse)
 async def index():
     return HTML_PAGE
@@ -346,197 +213,44 @@ HTML_PAGE = """\
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <title>Darwin Avatar Chatbot</title>
 <style>
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    background: #0a0f1c;
-    color: #e2e8f0;
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-  /* --- LAYOUT --- */
-  .app-container {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    max-width: 900px;
-    margin: 0 auto;
-    width: 100%;
-    padding: 1rem;
-    gap: 0.75rem;
-  }
-  /* --- VIDEO PLAYER --- */
-  .video-section {
-    position: relative;
-    width: 100%;
-    min-height: 300px;
-    max-height: 45vh;
-    background: #000;
-    border-radius: 12px;
-    overflow: hidden;
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .video-container {
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-  .video-container video {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    display: block;
-  }
-  #videoA, #videoB {
-    position: absolute;
-    top: 0; left: 0;
-    width: 100%; height: 100%;
-    object-fit: contain;
-    transition: opacity 0.25s ease;
-  }
-  #videoA { z-index: 1; opacity: 1; }
-  #videoB { z-index: 0; opacity: 0; }
-  .video-status {
-    position: absolute;
-    bottom: 8px;
-    right: 12px;
-    font-size: 0.7rem;
-    color: rgba(255,255,255,0.4);
-    background: rgba(0,0,0,0.5);
-    padding: 2px 8px;
-    border-radius: 4px;
-    z-index: 10;
-  }
-  /* --- CHAT LOG --- */
-  .chat-section {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-    background: rgba(15, 23, 42, 0.6);
-    border: 1px solid rgba(59, 130, 246, 0.15);
-    border-radius: 12px;
-    overflow: hidden;
-  }
-  .chat-log {
-    flex: 1;
-    overflow-y: auto;
-    padding: 1rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-  .chat-log::-webkit-scrollbar { width: 6px; }
-  .chat-log::-webkit-scrollbar-track { background: transparent; }
-  .chat-log::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
-  /* Message bubbles */
-  .msg { display: flex; width: 100%; }
-  .msg.user { justify-content: flex-end; }
-  .msg.bot { justify-content: flex-start; }
-  .bubble {
-    max-width: 85%;
-    padding: 10px 14px;
-    border-radius: 12px;
-    word-wrap: break-word;
-    font-size: 0.9rem;
-    line-height: 1.4;
-  }
-  .bubble.user {
-    background: linear-gradient(135deg, #1e40af, #3b82f6);
-    color: #fff;
-    border-bottom-right-radius: 4px;
-  }
-  .bubble.bot {
-    background: rgba(30, 41, 59, 0.8);
-    border: 1px solid rgba(59, 130, 246, 0.2);
-    color: #e2e8f0;
-    border-bottom-left-radius: 4px;
-  }
-  .bubble.bot .label { color: #60a5fa; font-weight: 600; font-size: 0.8rem; margin-bottom: 2px; }
-  .bubble.user .label { color: rgba(255,255,255,0.7); font-weight: 600; font-size: 0.8rem; margin-bottom: 2px; }
-  .bubble.typing {
-    color: #64748b;
-    font-style: italic;
-  }
-  .bubble.error {
-    background: rgba(127, 29, 29, 0.5);
-    border-color: rgba(239, 68, 68, 0.3);
-    color: #fca5a5;
-  }
-  @keyframes dots {
-    0%, 20% { content: ''; }
-    40% { content: '.'; }
-    60% { content: '..'; }
-    80%, 100% { content: '...'; }
-  }
-  .typing-dots::after {
-    content: '';
-    animation: dots 1.5s infinite;
-  }
-  .streaming-cursor::after {
-    content: '▊';
-    animation: blink 0.7s infinite;
-    color: #60a5fa;
-  }
-  @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
-  /* --- INPUT BAR --- */
-  .input-bar {
-    display: flex;
-    gap: 0.5rem;
-    padding: 0.75rem 1rem;
-    background: rgba(15, 23, 42, 0.8);
-    border-top: 1px solid rgba(59, 130, 246, 0.1);
-  }
-  .input-bar input {
-    flex: 1;
-    background: rgba(30, 41, 59, 0.8);
-    border: 1px solid rgba(59, 130, 246, 0.25);
-    border-radius: 8px;
-    padding: 10px 14px;
-    color: #e2e8f0;
-    font-size: 0.9rem;
-    outline: none;
-    transition: border-color 0.2s;
-  }
-  .input-bar input:focus {
-    border-color: #3b82f6;
-  }
-  .input-bar input::placeholder { color: #64748b; }
-  .input-bar button {
-    padding: 10px 20px;
-    border: none;
-    border-radius: 8px;
-    font-size: 0.9rem;
-    cursor: pointer;
-    transition: all 0.15s;
-    font-weight: 500;
-  }
-  .btn-send {
-    background: #3b82f6;
-    color: #fff;
-  }
-  .btn-send:hover { background: #2563eb; }
-  .btn-send:disabled { background: #334155; color: #64748b; cursor: not-allowed; }
-  .btn-reset {
-    background: rgba(100, 116, 139, 0.3);
-    color: #94a3b8;
-    border: 1px solid rgba(100, 116, 139, 0.3);
-  }
-  .btn-reset:hover { background: rgba(100, 116, 139, 0.5); }
+*{margin:0;padding:0;box-sizing:border-box}
+body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#0a0f1c;color:#e2e8f0;height:100vh;display:flex;flex-direction:column;overflow:hidden}
+.app-container{display:flex;flex-direction:column;height:100vh;max-width:900px;margin:0 auto;width:100%;padding:1rem;gap:.75rem}
+.video-section{position:relative;width:100%;min-height:300px;max-height:45vh;background:#000;border-radius:12px;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center}
+.video-container{position:relative;width:100%;height:100%}
+.video-container video{width:100%;height:100%;object-fit:contain;display:block}
+#videoA,#videoB{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;transition:opacity .25s ease}
+#videoA{z-index:1;opacity:1}#videoB{z-index:0;opacity:0}
+.video-status{position:absolute;bottom:8px;right:12px;font-size:.7rem;color:rgba(255,255,255,.4);background:rgba(0,0,0,.5);padding:2px 8px;border-radius:4px;z-index:10}
+.chat-section{flex:1;display:flex;flex-direction:column;min-height:0;background:rgba(15,23,42,.6);border:1px solid rgba(59,130,246,.15);border-radius:12px;overflow:hidden}
+.chat-log{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.5rem}
+.chat-log::-webkit-scrollbar{width:6px}.chat-log::-webkit-scrollbar-track{background:transparent}.chat-log::-webkit-scrollbar-thumb{background:#334155;border-radius:3px}
+.msg{display:flex;width:100%}.msg.user{justify-content:flex-end}.msg.bot{justify-content:flex-start}
+.bubble{max-width:85%;padding:10px 14px;border-radius:12px;word-wrap:break-word;font-size:.9rem;line-height:1.4}
+.bubble.user{background:linear-gradient(135deg,#1e40af,#3b82f6);color:#fff;border-bottom-right-radius:4px}
+.bubble.bot{background:rgba(30,41,59,.8);border:1px solid rgba(59,130,246,.2);color:#e2e8f0;border-bottom-left-radius:4px}
+.bubble.bot .label{color:#60a5fa;font-weight:600;font-size:.8rem;margin-bottom:2px}
+.bubble.user .label{color:rgba(255,255,255,.7);font-weight:600;font-size:.8rem;margin-bottom:2px}
+.bubble.typing{color:#64748b;font-style:italic}
+.bubble.error{background:rgba(127,29,29,.5);border-color:rgba(239,68,68,.3);color:#fca5a5}
+@keyframes dots{0%,20%{content:''}40%{content:'.'}60%{content:'..'}80%,100%{content:'...'}}
+.typing-dots::after{content:'';animation:dots 1.5s infinite}
+.streaming-cursor::after{content:'\\25CA';animation:blink .7s infinite;color:#60a5fa}
+@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
+.input-bar{display:flex;gap:.5rem;padding:.75rem 1rem;background:rgba(15,23,42,.8);border-top:1px solid rgba(59,130,246,.1)}
+.input-bar input{flex:1;background:rgba(30,41,59,.8);border:1px solid rgba(59,130,246,.25);border-radius:8px;padding:10px 14px;color:#e2e8f0;font-size:.9rem;outline:none;transition:border-color .2s}
+.input-bar input:focus{border-color:#3b82f6}.input-bar input::placeholder{color:#64748b}
+.input-bar button{padding:10px 20px;border:none;border-radius:8px;font-size:.9rem;cursor:pointer;transition:all .15s;font-weight:500}
+.btn-send{background:#3b82f6;color:#fff}.btn-send:hover{background:#2563eb}.btn-send:disabled{background:#334155;color:#64748b;cursor:not-allowed}
+.btn-reset{background:rgba(100,116,139,.3);color:#94a3b8;border:1px solid rgba(100,116,139,.3)}.btn-reset:hover{background:rgba(100,116,139,.5)}
 </style>
 </head>
 <body>
 <div class="app-container">
-  <!-- VIDEO PLAYER with crossfade -->
   <div class="video-section">
     <div class="video-container">
       <video id="videoA" muted autoplay playsinline></video>
@@ -544,306 +258,161 @@ HTML_PAGE = """\
     </div>
     <div class="video-status" id="videoStatus">Loading...</div>
   </div>
-  <!-- CHAT -->
   <div class="chat-section">
     <div class="chat-log" id="chatLog"></div>
     <div class="input-bar">
-      <input type="text" id="chatInput" placeholder="Ask Darwin something..."
-             autocomplete="off" />
+      <input type="text" id="chatInput" placeholder="Ask Darwin something..." autocomplete="off"/>
       <button class="btn-send" id="btnSend">Send</button>
-      <button class="btn-reset" id="btnReset" title="Reset conversation">↻</button>
+      <button class="btn-reset" id="btnReset" title="Reset conversation">&#8635;</button>
     </div>
   </div>
 </div>
 <script>
-// ======================================================================
-// STATE
-// ======================================================================
-let videos = [];
-let currentVideo = 'A';
-let isTransitioning = false;
-let isProcessing = false;
-let lastPlayed = null;
-const videoA = document.getElementById('videoA');
-const videoB = document.getElementById('videoB');
-const videoStatus = document.getElementById('videoStatus');
-const chatLog = document.getElementById('chatLog');
-const chatInput = document.getElementById('chatInput');
-const btnSend = document.getElementById('btnSend');
-const btnReset = document.getElementById('btnReset');
-// ======================================================================
-// VIDEO: Crossfade System
-// ======================================================================
-function getActiveVideo() { return currentVideo === 'A' ? videoA : videoB; }
-function getInactiveVideo() { return currentVideo === 'A' ? videoB : videoA; }
-function crossfadeTo(videoUrl, isMuted) {
-    if (isTransitioning) return;
-    isTransitioning = true;
-    const prev = getActiveVideo();
-    const next = getInactiveVideo();
-    // Set muted state (idle=muted, lipsync=unmuted if audio separate)
-    next.muted = (isMuted !== false);
-    next.src = videoUrl;
-    next.load();
-    next.onloadeddata = function() {
-        next.style.zIndex = '2';
-        prev.style.zIndex = '1';
-        next.style.opacity = '0';
-        next.play().then(() => {
-            // Fade in the new video
-            next.style.opacity = '1';
-            setTimeout(() => {
-                prev.style.opacity = '0';
-                prev.pause();
-                prev.src = '';
-                prev.style.zIndex = '0';
-                next.style.zIndex = '1';
-                currentVideo = currentVideo === 'A' ? 'B' : 'A';
-                isTransitioning = false;
-            }, 300);
-        }).catch(err => {
-            console.error('[VIDEO] Play failed:', err);
-            isTransitioning = false;
-            // Retry once on autoplay failure
-            next.muted = true;
-            next.play().then(() => {
-                next.style.opacity = '1';
-                setTimeout(() => {
-                    prev.style.opacity = '0';
-                    prev.pause();
-                    prev.src = '';
-                    prev.style.zIndex = '0';
-                    next.style.zIndex = '1';
-                    currentVideo = currentVideo === 'A' ? 'B' : 'A';
-                    isTransitioning = false;
-                }, 300);
-            }).catch(e => {
-                console.error('[VIDEO] Muted retry also failed:', e);
-                isTransitioning = false;
-            });
+let videos=[], currentVideo='A', isTransitioning=false, isProcessing=false, lastPlayed=null, msgCounter=0;
+const videoA=document.getElementById('videoA'), videoB=document.getElementById('videoB');
+const videoStatus=document.getElementById('videoStatus'), chatLog=document.getElementById('chatLog');
+const chatInput=document.getElementById('chatInput'), btnSend=document.getElementById('btnSend');
+const btnReset=document.getElementById('btnReset');
+
+function getActiveVideo(){return currentVideo==='A'?videoA:videoB}
+function getInactiveVideo(){return currentVideo==='A'?videoB:videoA}
+
+function crossfadeTo(url, muted){
+    if(isTransitioning) return;
+    isTransitioning=true;
+    const prev=getActiveVideo(), next=getInactiveVideo();
+    next.muted=(muted!==false);
+    next.src=url; next.load();
+    next.onloadeddata=function(){
+        next.style.zIndex='2'; prev.style.zIndex='1'; next.style.opacity='0';
+        next.play().then(()=>{
+            next.style.opacity='1';
+            setTimeout(()=>{
+                prev.style.opacity='0'; prev.pause(); prev.src='';
+                prev.style.zIndex='0'; next.style.zIndex='1';
+                currentVideo=currentVideo==='A'?'B':'A';
+                isTransitioning=false;
+            },300);
+        }).catch(()=>{
+            next.muted=true;
+            next.play().then(()=>{
+                next.style.opacity='1';
+                setTimeout(()=>{
+                    prev.style.opacity='0'; prev.pause(); prev.src='';
+                    prev.style.zIndex='0'; next.style.zIndex='1';
+                    currentVideo=currentVideo==='A'?'B':'A';
+                    isTransitioning=false;
+                },300);
+            }).catch(()=>{ isTransitioning=false; });
         });
     };
-    next.onerror = function() {
-        console.error('[VIDEO] Load failed:', videoUrl);
-        isTransitioning = false;
-    };
+    next.onerror=function(){ isTransitioning=false; };
 }
-function pickRandomIdle() {
-    if (videos.length === 0) return null;
-    if (videos.length === 1) return videos[0];
-    let pick;
-    do {
-        pick = videos[Math.floor(Math.random() * videos.length)];
-    } while (pick.filename === lastPlayed && videos.length > 1);
-    return pick;
-}
-function playNextIdle() {
-    const clip = pickRandomIdle();
-    if (!clip) return;
-    lastPlayed = clip.filename;
-    videoStatus.textContent = 'idle: ' + clip.name;
-    crossfadeTo('/api/stream/' + encodeURIComponent(clip.filename), true);
-}
-// When active video ends → play next idle OR next queued lipsync
-videoA.addEventListener('ended', () => { if (currentVideo === 'A') onVideoEnded(); });
-videoB.addEventListener('ended', () => { if (currentVideo === 'B') onVideoEnded(); });
-let lipsyncQueue = [];
-let playingLipsync = false;
-function onVideoEnded() {
-    if (lipsyncQueue.length > 0 && !playingLipsync) {
-        playNextLipsync();
-    } else if (!playingLipsync) {
-        playNextIdle();
-    }
+
+function pickRandomIdle(){
+    if(!videos.length) return null;
+    if(videos.length===1) return videos[0];
+    let p; do{ p=videos[Math.floor(Math.random()*videos.length)]; }while(p.filename===lastPlayed&&videos.length>1);
+    return p;
 }
-function playNextLipsync() {
-    if (lipsyncQueue.length === 0) {
-        playingLipsync = false;
-        playNextIdle();
-        return;
-    }
-    playingLipsync = true;
-    const item = lipsyncQueue.shift();
-    videoStatus.textContent = 'speaking...';
-    // Play audio
-    if (item.audio_url) {
-        const audio = new Audio(item.audio_url);
-        audio.play().catch(e => console.warn('[AUDIO] Play failed:', e));
-    }
-    if (item.lipsync_video_url) {
-        crossfadeTo(item.lipsync_video_url, true);
-        // The 'ended' event on the video will trigger onVideoEnded → playNextLipsync
-        // But we need to set playingLipsync=false when THIS lipsync video ends
-        const checkEnd = () => {
-            const active = getActiveVideo();
-            // Wait for crossfade to complete, then listen for ended
-            setTimeout(() => {
-                const nowActive = getActiveVideo();
-                const onEnd = () => {
-                    nowActive.removeEventListener('ended', onEnd);
-                    playingLipsync = false;
-                    onVideoEnded(); // chain to next
-                };
-                nowActive.addEventListener('ended', onEnd);
-            }, 500);
-        };
-        checkEnd();
-    } else {
-        // No lipsync video, just play audio over idle, then move to next
-        if (item.audio_url) {
-            const waitMs = (item.audio_duration || 3) * 1000;
-            setTimeout(() => {
-                playingLipsync = false;
-                onVideoEnded();
-            }, waitMs);
-        } else {
-            playingLipsync = false;
-            onVideoEnded();
-        }
-    }
+
+function playNextIdle(){
+    const c=pickRandomIdle(); if(!c) return;
+    lastPlayed=c.filename;
+    videoStatus.textContent='idle: '+c.name;
+    crossfadeTo('/api/stream/'+encodeURIComponent(c.filename), true);
 }
-// ======================================================================
-// CHAT: Message rendering
-// ======================================================================
-let msgCounter = 0;
-function addMessage(role, text, extraClass = '') {
-    const id = `msg_${msgCounter++}`;
-    const wrapper = document.createElement('div');
-    wrapper.className = `msg ${role}`;
-    const bubble = document.createElement('div');
-    bubble.className = `bubble ${role} ${extraClass}`;
-    bubble.id = id;
-    const label = document.createElement('div');
-    label.className = 'label';
-    label.textContent = role === 'user' ? 'You' : 'Darwin';
-    const content = document.createElement('div');
-    content.className = 'content';
-    content.textContent = text;
-    bubble.appendChild(label);
-    bubble.appendChild(content);
-    wrapper.appendChild(bubble);
-    chatLog.appendChild(wrapper);
-    chatLog.scrollTop = chatLog.scrollHeight;
-    return { id, contentEl: content, bubbleEl: bubble };
+
+videoA.addEventListener('ended',()=>{ if(currentVideo==='A'&&!isProcessing) playNextIdle(); });
+videoB.addEventListener('ended',()=>{ if(currentVideo==='B'&&!isProcessing) playNextIdle(); });
+
+function addMessage(role, text, extra){
+    const id='msg_'+(msgCounter++);
+    const w=document.createElement('div'); w.className='msg '+role;
+    const b=document.createElement('div'); b.className='bubble '+role+(extra?' '+extra:''); b.id=id;
+    const l=document.createElement('div'); l.className='label'; l.textContent=role==='user'?'You':'Darwin';
+    const c=document.createElement('div'); c.className='content'; c.textContent=text;
+    b.appendChild(l); b.appendChild(c); w.appendChild(b);
+    chatLog.appendChild(w); chatLog.scrollTop=chatLog.scrollHeight;
+    return {id:id, contentEl:c, bubbleEl:b};
 }
-function addTypingIndicator() {
-    const { id, contentEl, bubbleEl } = addMessage('bot', '', 'typing');
-    contentEl.className = 'content typing-dots';
-    contentEl.textContent = 'thinking';
-    return { id, contentEl, bubbleEl };
+
+function addTypingIndicator(){
+    const r=addMessage('bot','','typing');
+    r.contentEl.className='content typing-dots'; r.contentEl.textContent='thinking';
+    return r;
 }
-function streamText(contentEl, text, durationMs) {
-    contentEl.className = 'content streaming-cursor';
-    contentEl.textContent = '';
-    let i = 0;
-    const delay = durationMs / text.length;
-    const interval = setInterval(() => {
-        if (i < text.length) {
-            contentEl.textContent += text[i];
-            i++;
-            chatLog.scrollTop = chatLog.scrollHeight;
-        } else {
-            clearInterval(interval);
-            contentEl.classList.remove('streaming-cursor');
-        }
-    }, delay);
+
+function streamText(el, text, ms){
+    el.className='content streaming-cursor'; el.textContent='';
+    let i=0; const d=ms/text.length;
+    const iv=setInterval(()=>{
+        if(i<text.length){ el.textContent+=text[i]; i++; chatLog.scrollTop=chatLog.scrollHeight; }
+        else{ clearInterval(iv); el.classList.remove('streaming-cursor'); }
+    }, d);
 }
-// ======================================================================
-// CHAT: Send message
-// ======================================================================
-async function sendMessage() {
-    const text = chatInput.value.trim();
-    if (!text || isProcessing) return;
-    isProcessing = true;
-    btnSend.disabled = true;
-    chatInput.value = '';
-    // Show user message
+
+async function sendMessage(){
+    const text=chatInput.value.trim();
+    if(!text||isProcessing) return;
+    isProcessing=true; btnSend.disabled=true; chatInput.value='';
     addMessage('user', text);
-    // Show typing indicator
-    const typing = addTypingIndicator();
-    try {
-        // Step 1: Get LLM response (fast - just text)
-        const res = await fetch('/api/chat', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ text })
+    const typing=addTypingIndicator();
+
+    try{
+        const res=await fetch('/api/chat',{
+            method:'POST', headers:{'Content-Type':'application/json'},
+            body:JSON.stringify({text:text})
         });
-        if (!res.ok) throw new Error(`HTTP ${res.status}`);
-        const data = await res.json();
-        // Show the text immediately
+        if(!res.ok) throw new Error('HTTP '+res.status);
+        const data=await res.json();
+
         typing.bubbleEl.classList.remove('typing');
         typing.contentEl.classList.remove('typing-dots');
-        typing.contentEl.textContent = data.text;
-        // Re-enable input immediately so user can keep chatting
-        isProcessing = false;
-        btnSend.disabled = false;
-        chatInput.focus();
-        // Step 2: Generate TTS + lipsync for each sentence in background
-        const sentences = data.sentences || [data.text];
-        for (const sentence of sentences) {
-            try {
-                const genRes = await fetch('/api/chat/generate', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ sentence })
-                });
-                if (!genRes.ok) continue;
-                const chunk = await genRes.json();
-                // Queue the lipsync chunk
-                lipsyncQueue.push(chunk);
-                // If nothing is currently playing lipsync, start
-                if (!playingLipsync) {
-                    playNextLipsync();
-                }
-            } catch (e) {
-                console.error('[CHAT] Chunk generation failed:', e);
-            }
+        const dur=data.audio_duration?data.audio_duration*1000:2000;
+        streamText(typing.contentEl, data.text, dur);
+
+        if(data.audio_url){
+            const audio=new Audio(data.audio_url);
+            audio.play().catch(e=>console.warn('[AUDIO]',e));
+        }
+
+        if(data.lipsync_video_url){
+            videoStatus.textContent='speaking...';
+            crossfadeTo(data.lipsync_video_url, true);
+            setTimeout(()=>{
+                const active=getActiveVideo();
+                const onEnd=()=>{ active.removeEventListener('ended',onEnd); playNextIdle(); };
+                active.addEventListener('ended',onEnd);
+            },500);
         }
-    } catch (err) {
+    }catch(err){
         typing.bubbleEl.classList.remove('typing');
         typing.bubbleEl.classList.add('error');
         typing.contentEl.classList.remove('typing-dots');
-        typing.contentEl.textContent = 'Error: ' + err.message;
-        isProcessing = false;
-        btnSend.disabled = false;
+        typing.contentEl.textContent='Error: '+err.message;
     }
+    isProcessing=false; btnSend.disabled=false; chatInput.focus();
 }
+
 btnSend.addEventListener('click', sendMessage);
-chatInput.addEventListener('keydown', (e) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-        e.preventDefault();
-        sendMessage();
-    }
-});
-btnReset.addEventListener('click', async () => {
-    await fetch('/api/reset', { method: 'POST' });
-    chatLog.innerHTML = '';
-    addMessage('bot', 'Ah, a fresh start! How may I assist you, my good fellow?');
+chatInput.addEventListener('keydown', e=>{ if(e.key==='Enter'&&!e.shiftKey){ e.preventDefault(); sendMessage(); }});
+btnReset.addEventListener('click', async()=>{
+    await fetch('/api/reset',{method:'POST'});
+    chatLog.innerHTML='';
+    addMessage('bot','Ah, a fresh start! How may I assist you, my good fellow?');
 });
-// ======================================================================
-// INIT
-// ======================================================================
-async function init() {
-    try {
-        const res = await fetch('/api/videos');
-        const data = await res.json();
-        if (data.videos.length === 0) {
-            videoStatus.textContent = 'Downloading idle videos...';
-            setTimeout(init, 3000);
-            return;
-        }
-        videos = data.videos;
-        videoStatus.textContent = videos.length + ' idle clips loaded';
-        // Start idle loop
+
+async function init(){
+    try{
+        const res=await fetch('/api/videos');
+        const data=await res.json();
+        if(!data.videos.length){ videoStatus.textContent='Downloading...'; setTimeout(init,3000); return; }
+        videos=data.videos;
+        videoStatus.textContent=videos.length+' idle clips loaded';
         playNextIdle();
-        // Welcome message
-        addMessage('bot',
-            'Good day! I am Charles Darwin, er, recreated in this curious digital form. ' +
-            'Do feel free to ask me anything, umm, about the natural world or otherwise.'
-        );
-    } catch (e) {
-        videoStatus.textContent = 'Error: ' + e.message;
-    }
+        addMessage('bot','Good day! I am Charles Darwin, er, recreated in this curious digital form. Do feel free to ask me anything, umm, about the natural world or otherwise.');
+    }catch(e){ videoStatus.textContent='Error: '+e.message; }
 }
 init();
 </script>