Delete app.py

app.py

@@ -1,958 +0,0 @@
-"""
-Avatar Chatbot - HuggingFace Spaces Edition
-Phase 1: Chat UI + Idle Video Loop + LLM (Groq) + TTS (Groq)
-Phase 2: FLOAT lipsync (to be added)
-"""
-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)
-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()
-    if FLOAT_ENABLED:
-        await init_float()
-
-
-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")
-        return
-
-    try:
-        from float_lipsync import get_lipsync
-        from huggingface_hub import hf_hub_download
-        import shutil
-
-        checkpoints_dir = Path("/app/checkpoints")
-        checkpoints_dir.mkdir(parents=True, exist_ok=True)
-
-        # Download wav2vec2-base-960h from HuggingFace
-        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),
-            )
-            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!")
-
-    except Exception as e:
-        logger.error(f"[STARTUP] FLOAT init failed: {e}", exc_info=True)
-
-
-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
-            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")
-    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})
-
-
-# --- 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")
-
-    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
-
-    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")
-
-    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_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",
-                 "-of", "csv=p=0", audio_path],
-                capture_output=True, text=True, check=True
-            )
-            audio_duration = float(result.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}")
-        except Exception as e:
-            logger.error(f"[GEN] Lipsync failed: {e}", exc_info=True)
-
-    return JSONResponse({
-        "sentence": sentence,
-        "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
-    reset_conversation()
-    return JSONResponse({"status": "ok"})
-
-
-# --- Main page ---
-@app.get("/", response_class=HTMLResponse)
-async def index():
-    return HTML_PAGE
-
-
-HTML_PAGE = """\
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<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); }
-</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>
-      <video id="videoB" muted autoplay playsinline></video>
-    </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" />
-      <button class="btn-send" id="btnSend">Send</button>
-      <button class="btn-reset" id="btnReset" title="Reset conversation">↻</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) {
-        console.log('[VIDEO] Already transitioning, queuing retry...');
-        setTimeout(() => crossfadeTo(videoUrl, isMuted), 200);
-        return;
-    }
-    isTransitioning = true;
-
-    const prev = getActiveVideo();
-    const next = getInactiveVideo();
-
-    // Set muted state
-    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(() => {
-            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
-            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 failed:', e);
-                isTransitioning = false;
-                // Fallback: just play next idle after a delay
-                setTimeout(() => playNextIdle(), 1000);
-            });
-        });
-    };
-
-    next.onerror = function() {
-        console.error('[VIDEO] Load failed:', videoUrl);
-        isTransitioning = false;
-        // Don't freeze — play next idle
-        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);
-    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 → 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();
-    }
-}
-
-// ======================================================================
-// 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 };
-}
-
-function addTypingIndicator() {
-    const { id, contentEl, bubbleEl } = addMessage('bot', '', 'typing');
-    contentEl.className = 'content typing-dots';
-    contentEl.textContent = 'thinking';
-    return { id, contentEl, bubbleEl };
-}
-
-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);
-}
-
-// ======================================================================
-// 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
-    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 })
-        });
-
-        if (!res.ok) throw new Error(`HTTP ${res.status}`);
-        const data = await res.json();
-
-        // Show the 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);
-            }
-        }
-
-    } 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;
-    }
-}
-
-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?');
-});
-
-// ======================================================================
-// 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
-        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;
-    }
-}
-
-init();
-</script>
-</body>
-</html>
-"""