Update app.py

app.py

@@ -1,11 +1,10 @@
 """
 Avatar Chatbot - HuggingFace Spaces Edition
 Phase 1: Chat UI + Idle Video Loop + LLM (Groq) + TTS (Groq)
-Phase 2: FLOAT lipsync (to be added)
+Phase 2: FLOAT lipsync (async background generation)
 """
 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
@@ -13,6 +12,8 @@ import logging
 import asyncio
 import time
 import subprocess
+import uuid
+import threading
 
 logging.basicConfig(level=logging.INFO)
 logger = logging.getLogger(__name__)
@@ -24,14 +25,19 @@ 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)
 
+# --- Background job tracking ---
+# job_id -> {"status": "pending"|"done"|"error", "result": {...}}
+lipsync_jobs = {}
+
 
-# --- Startup: download idle videos + init FLOAT ---
+# ======================================================================
+# STARTUP
+# ======================================================================
 @app.on_event("startup")
 async def startup():
     await download_videos()
@@ -55,29 +61,23 @@ async def init_float():
         checkpoints_dir = Path("/app/checkpoints")
         checkpoints_dir.mkdir(parents=True, exist_ok=True)
 
-        # Download wav2vec2-base-960h from HuggingFace
+        # Download wav2vec2-base-960h
         w2v_dir = checkpoints_dir / "wav2vec2-base-960h"
         if not w2v_dir.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),
-            )
+            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
+        # Download emotion recognition model
         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),
-            )
+            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)
+        # Download float.pth from repo (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...")
@@ -91,38 +91,29 @@ async def init_float():
                 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
+        # Download reference image from repo
         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}")
+            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/")
                 return
 
         # Initialize FLOAT
@@ -143,7 +134,6 @@ 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")
@@ -153,7 +143,6 @@ async def download_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
@@ -170,7 +159,10 @@ async def download_videos():
         logger.error(f"Error downloading videos: {e}")
 
 
-# --- API: list idle videos ---
+# ======================================================================
+# API ENDPOINTS
+# ======================================================================
+
 @app.get("/api/videos")
 async def list_videos():
     if not VIDEOS_DIR.exists():
@@ -182,17 +174,14 @@ async def list_videos():
     return JSONResponse({"videos": videos})
 
 
-# --- 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")
 
@@ -205,13 +194,11 @@ async def stream_video(filename: str):
                 yield chunk
 
     return StreamingResponse(
-        iter_file(),
-        media_type=mime_type,
+        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
@@ -227,73 +214,36 @@ async def stream_audio(filename: str):
                 yield chunk
 
     return StreamingResponse(
-        iter_file(),
-        media_type=mime_type,
+        iter_file(), media_type=mime_type,
         headers={"Content-Length": str(file_size)},
     )
 
 
-# --- API: chat endpoint (returns text immediately, then streams lipsync chunks) ---
+# --- Chat: returns LLM text + TTS audio immediately, kicks off lipsync in background ---
 @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")
 
     logger.info(f"[CHAT] User: {user_text}")
 
-    # 1. LLM
+    # 1. LLM (fast)
     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
+    # 2. TTS (fast ~1-2s)
     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}"
-
         try:
             result = subprocess.run(
                 ["ffprobe", "-v", "quiet", "-show_entries", "format=duration",
@@ -304,31 +254,65 @@ async def chat_generate(request: Request):
         except Exception:
             audio_duration = 3.0
 
-    # 2. Lipsync
-    lipsync_video_url = None
+    # 3. Kick off lipsync in background thread (slow ~20s, don't block)
+    job_id = 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}")
+                job_id = str(uuid.uuid4())[:8]
+                lipsync_jobs[job_id] = {"status": "pending"}
+                # Run in background thread so this response returns immediately
+                thread = threading.Thread(
+                    target=_run_lipsync_job,
+                    args=(job_id, audio_path),
+                    daemon=True
+                )
+                thread.start()
+                logger.info(f"[CHAT] Lipsync job started: {job_id}")
         except Exception as e:
-            logger.error(f"[GEN] Lipsync failed: {e}", exc_info=True)
+            logger.error(f"[CHAT] Lipsync setup failed: {e}")
 
     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,
+        "lipsync_job_id": job_id,  # Frontend polls this
     })
 
 
-# --- API: reset conversation ---
+def _run_lipsync_job(job_id: str, audio_path: str):
+    """Runs FLOAT inference in a background thread."""
+    try:
+        from float_lipsync import get_lipsync
+        lipsync = get_lipsync()
+        logger.info(f"[LIPSYNC-{job_id}] Starting generation...")
+        lipsync_path = lipsync.generate(audio_path)
+        if lipsync_path and os.path.exists(lipsync_path):
+            lipsync_filename = os.path.basename(lipsync_path)
+            lipsync_jobs[job_id] = {
+                "status": "done",
+                "lipsync_video_url": f"/api/stream/{lipsync_filename}",
+            }
+            logger.info(f"[LIPSYNC-{job_id}] Done: {lipsync_filename}")
+        else:
+            lipsync_jobs[job_id] = {"status": "error", "message": "No output file"}
+    except Exception as e:
+        logger.error(f"[LIPSYNC-{job_id}] Failed: {e}", exc_info=True)
+        lipsync_jobs[job_id] = {"status": "error", "message": str(e)}
+
+
+# --- Poll for lipsync job result ---
+@app.get("/api/lipsync/{job_id}")
+async def poll_lipsync(job_id: str):
+    job = lipsync_jobs.get(job_id)
+    if not job:
+        raise HTTPException(status_code=404, detail="Job not found")
+    return JSONResponse(job)
+
+
 @app.post("/api/reset")
 async def reset_chat():
     from llm import reset_conversation
@@ -336,7 +320,9 @@ async def reset_chat():
     return JSONResponse({"status": "ok"})
 
 
-# --- Main page ---
+# ======================================================================
+# MAIN PAGE
+# ======================================================================
 @app.get("/", response_class=HTMLResponse)
 async def index():
     return HTML_PAGE
@@ -362,7 +348,6 @@ HTML_PAGE = """\
     overflow: hidden;
   }
 
-  /* --- LAYOUT --- */
   .app-container {
     display: flex;
     flex-direction: column;
@@ -374,7 +359,7 @@ HTML_PAGE = """\
     gap: 0.75rem;
   }
 
-  /* --- VIDEO PLAYER --- */
+  /* --- VIDEO --- */
   .video-section {
     position: relative;
     width: 100%;
@@ -388,184 +373,95 @@ HTML_PAGE = """\
     align-items: center;
     justify-content: center;
   }
-
-  .video-container {
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-
+  .video-container { position: relative; width: 100%; height: 100%; }
   .video-container video {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    display: block;
+    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;
+    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;
+    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 --- */
   .chat-section {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
+    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;
+    border-radius: 12px; overflow: hidden;
   }
-
   .chat-log {
-    flex: 1;
-    overflow-y: auto;
-    padding: 1rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
+    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;
+    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;
+    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: 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 .label { color: #60a5fa; font-weight: 600; font-size: 0.8rem; margin-bottom: 2px; }
+  .bubble.user .label { color: rgba(255,255,255,0.7); }
+  .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;
+    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;
+    content: '▊'; animation: blink 0.7s infinite; color: #60a5fa;
   }
-  @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
+  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
 
-  /* --- INPUT BAR --- */
+  /* --- INPUT --- */
   .input-bar {
-    display: flex;
-    gap: 0.5rem;
-    padding: 0.75rem 1rem;
+    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;
+    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;
   }
-
+  .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;
+    padding: 10px 20px; border: none; border-radius: 8px;
+    font-size: 0.9rem; cursor: pointer; 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);
+    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); }
+  .btn-reset:hover { background: rgba(100,116,139,0.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>
@@ -573,18 +469,14 @@ 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">&#x21bb;</button>
     </div>
   </div>
-
 </div>
 
 <script>
@@ -596,6 +488,8 @@ let currentVideo = 'A';
 let isTransitioning = false;
 let isProcessing = false;
 let lastPlayed = null;
+let pendingLipsyncUrl = null; // set when lipsync is ready
+let currentAudio = null;
 
 const videoA = document.getElementById('videoA');
 const videoB = document.getElementById('videoB');
@@ -606,24 +500,20 @@ const btnSend = document.getElementById('btnSend');
 const btnReset = document.getElementById('btnReset');
 
 // ======================================================================
-// VIDEO: Crossfade System
+// VIDEO: Crossfade
 // ======================================================================
 function getActiveVideo() { return currentVideo === 'A' ? videoA : videoB; }
 function getInactiveVideo() { return currentVideo === 'A' ? videoB : videoA; }
 
-function crossfadeTo(videoUrl, isMuted) {
+function crossfadeTo(videoUrl, muted) {
     if (isTransitioning) {
-        console.log('[VIDEO] Already transitioning, queuing retry...');
-        setTimeout(() => crossfadeTo(videoUrl, isMuted), 200);
+        setTimeout(() => crossfadeTo(videoUrl, muted), 200);
         return;
     }
     isTransitioning = true;
-
     const prev = getActiveVideo();
     const next = getInactiveVideo();
-
-    // Set muted state
-    next.muted = (isMuted !== false);
+    next.muted = (muted !== false);
     next.src = videoUrl;
     next.load();
 
@@ -631,65 +521,51 @@ function crossfadeTo(videoUrl, isMuted) {
         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';
-
-                // Swap active tracker BEFORE clearing transition flag
                 currentVideo = currentVideo === 'A' ? 'B' : 'A';
                 isTransitioning = false;
-                console.log('[VIDEO] Crossfade done, active=', currentVideo, 'src=', videoUrl.split('/').pop());
             }, 300);
-        }).catch(err => {
-            console.error('[VIDEO] Play failed:', err);
-            // Force muted retry
+        }).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';
+                    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 failed:', e);
-                isTransitioning = false;
-                // Fallback: just play next idle after a delay
-                setTimeout(() => playNextIdle(), 1000);
-            });
+            }).catch(() => { isTransitioning = false; setTimeout(playNextIdle, 500); });
         });
     };
-
-    next.onerror = function() {
-        console.error('[VIDEO] Load failed:', videoUrl);
-        isTransitioning = false;
-        // Don't freeze — play next idle
-        setTimeout(() => playNextIdle(), 500);
-    };
+    next.onerror = function() { isTransitioning = false; setTimeout(playNextIdle, 500); };
 }
 
 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);
+    do { pick = videos[Math.floor(Math.random() * videos.length)]; }
+    while (pick.filename === lastPlayed && videos.length > 1);
     return pick;
 }
 
 function playNextIdle() {
+    // If a lipsync video is ready, play it instead!
+    if (pendingLipsyncUrl) {
+        const url = pendingLipsyncUrl;
+        pendingLipsyncUrl = null;
+        videoStatus.textContent = 'speaking...';
+        crossfadeTo(url, true);
+        return;
+    }
     const clip = pickRandomIdle();
     if (!clip) return;
     lastPlayed = clip.filename;
@@ -697,146 +573,79 @@ function playNextIdle() {
     crossfadeTo('/api/stream/' + encodeURIComponent(clip.filename), true);
 }
 
-// When active video ends → decide what to play next
-videoA.addEventListener('ended', () => onVideoEnded('A'));
-videoB.addEventListener('ended', () => onVideoEnded('B'));
-
-let lipsyncQueue = [];
-let playingLipsync = false;
-let currentAudio = null;
-
-function onVideoEnded(which) {
-    console.log('[VIDEO] ended on', which, 'currentVideo=', currentVideo,
-                'queue=', lipsyncQueue.length, 'playingLipsync=', playingLipsync);
-
-    // Only handle if this is the currently active video
-    if (which !== currentVideo) return;
-
-    if (playingLipsync) {
-        // Current lipsync clip finished — play next or return to idle
-        playingLipsync = false;
-        if (lipsyncQueue.length > 0) {
-            playNextLipsync();
-        } else {
-            videoStatus.textContent = 'idle';
-            playNextIdle();
-        }
-    } else {
-        // Idle clip finished
-        if (lipsyncQueue.length > 0) {
-            playNextLipsync();
-        } else {
-            playNextIdle();
-        }
-    }
-}
-
-function playNextLipsync() {
-    if (lipsyncQueue.length === 0) {
-        playingLipsync = false;
-        playNextIdle();
-        return;
-    }
-
-    const item = lipsyncQueue.shift();
-    console.log('[LIPSYNC] Playing chunk, remaining in queue:', lipsyncQueue.length);
-
-    // Play audio
-    if (item.audio_url) {
-        if (currentAudio) {
-            currentAudio.pause();
-            currentAudio = null;
-        }
-        currentAudio = new Audio(item.audio_url);
-        currentAudio.play().catch(e => console.warn('[AUDIO] Play failed:', e));
-    }
-
-    if (item.lipsync_video_url) {
-        playingLipsync = true;
-        videoStatus.textContent = 'speaking...';
-        // Use crossfade — the ended event will fire onVideoEnded
-        crossfadeTo(item.lipsync_video_url, true);
-    } else {
-        // No lipsync video — just let audio play over idle
-        // Use audio duration as timeout, then check queue again
-        const waitMs = (item.audio_duration || 3) * 1000;
-        playingLipsync = true;
-        videoStatus.textContent = 'speaking (audio only)...';
-        setTimeout(() => {
-            playingLipsync = false;
-            if (lipsyncQueue.length > 0) {
-                playNextLipsync();
-            }
-            // Don't force idle — let current video ended handler do it
-        }, waitMs);
-    }
-}
-
-// External trigger: called when a new chunk arrives and nothing is playing
-function tryStartLipsync() {
-    if (!playingLipsync && lipsyncQueue.length > 0) {
-        playNextLipsync();
-    }
-}
+// When a video ends, play next
+videoA.addEventListener('ended', () => { if (currentVideo === 'A') playNextIdle(); });
+videoB.addEventListener('ended', () => { if (currentVideo === 'B') playNextIdle(); });
 
 // ======================================================================
-// CHAT: Message rendering
+// CHAT
 // ======================================================================
 let msgCounter = 0;
 
-function addMessage(role, text, extraClass = '') {
-    const id = `msg_${msgCounter++}`;
+function addMessage(role, text, extraClass) {
+    const id = 'msg_' + msgCounter++;
     const wrapper = document.createElement('div');
-    wrapper.className = `msg ${role}`;
-
+    wrapper.className = 'msg ' + role;
     const bubble = document.createElement('div');
-    bubble.className = `bubble ${role} ${extraClass}`;
+    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 };
+    return { id: id, contentEl: content, bubbleEl: bubble };
 }
 
-function addTypingIndicator() {
-    const { id, contentEl, bubbleEl } = addMessage('bot', '', 'typing');
-    contentEl.className = 'content typing-dots';
-    contentEl.textContent = 'thinking';
-    return { id, contentEl, bubbleEl };
+function streamText(el, text, ms) {
+    el.className = 'content streaming-cursor';
+    el.textContent = '';
+    let i = 0;
+    const delay = 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'); }
+    }, delay);
 }
 
-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');
+// ======================================================================
+// LIPSYNC POLLING
+// ======================================================================
+async function pollLipsyncJob(jobId) {
+    // Poll every 2 seconds until done
+    for (let attempt = 0; attempt < 30; attempt++) {
+        await new Promise(r => setTimeout(r, 2000));
+        try {
+            const res = await fetch('/api/lipsync/' + jobId);
+            if (!res.ok) break;
+            const job = await res.json();
+            if (job.status === 'done' && job.lipsync_video_url) {
+                console.log('[POLL] Lipsync ready:', job.lipsync_video_url);
+                // Queue it — will play when current idle clip ends
+                pendingLipsyncUrl = job.lipsync_video_url;
+                return;
+            }
+            if (job.status === 'error') {
+                console.warn('[POLL] Lipsync job error:', job.message);
+                return;
+            }
+            // Still pending — keep polling
+        } catch (e) {
+            console.error('[POLL] Error:', e);
+            break;
         }
-    }, delay);
+    }
+    console.warn('[POLL] Lipsync job timed out');
 }
 
 // ======================================================================
-// CHAT: Send message
+// SEND MESSAGE
 // ======================================================================
 async function sendMessage() {
     const text = chatInput.value.trim();
@@ -846,54 +655,38 @@ async function sendMessage() {
     btnSend.disabled = true;
     chatInput.value = '';
 
-    // Show user message
     addMessage('user', text);
-
-    // Show typing indicator
-    const typing = addTypingIndicator();
+    const typing = addMessage('bot', '', 'typing');
+    typing.contentEl.className = 'content typing-dots';
+    typing.contentEl.textContent = 'thinking';
 
     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 })
+            body: JSON.stringify({ text: text })
         });
-
-        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        if (!res.ok) throw new Error('HTTP ' + res.status);
         const data = await res.json();
 
-        // Show the text immediately
+        // Show text immediately
         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
-                tryStartLipsync();
-            } catch (e) {
-                console.error('[CHAT] Chunk generation failed:', e);
-            }
+
+        const streamDuration = data.audio_duration ? data.audio_duration * 1000 : 2000;
+        streamText(typing.contentEl, data.text, streamDuration);
+
+        // Play TTS audio immediately
+        if (data.audio_url) {
+            if (currentAudio) { currentAudio.pause(); currentAudio = null; }
+            currentAudio = new Audio(data.audio_url);
+            currentAudio.play().catch(e => console.warn('[AUDIO] Play blocked:', e));
+        }
+
+        // Poll for lipsync in background (non-blocking)
+        if (data.lipsync_job_id) {
+            pollLipsyncJob(data.lipsync_job_id);
+            // This runs in background — sendMessage returns immediately
         }
 
     } catch (err) {
@@ -901,17 +694,16 @@ async function sendMessage() {
         typing.bubbleEl.classList.add('error');
         typing.contentEl.classList.remove('typing-dots');
         typing.contentEl.textContent = 'Error: ' + err.message;
-        isProcessing = false;
-        btnSend.disabled = false;
     }
+
+    isProcessing = false;
+    btnSend.disabled = false;
+    chatInput.focus();
 }
 
 btnSend.addEventListener('click', sendMessage);
 chatInput.addEventListener('keydown', (e) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-        e.preventDefault();
-        sendMessage();
-    }
+    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); }
 });
 
 btnReset.addEventListener('click', async () => {
@@ -927,25 +719,18 @@ 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
         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;
     }