Update app.py

app.py

@@ -1,470 +1,1689 @@
-# app.py
-# Production script for the FastLLM Space.
-# Required dependencies: pip install gradio transformers torch spaces accelerate
+import gradio as gr
+import spaces
 import os
+import sys
 import json
+import re
+import zipfile
+import asyncio
+import tempfile
+import base64
+import threading
+import time
+import random
+from pathlib import Path
+import subprocess
+
+# ── Install deps ──────────────────────────────────────────────────────────────
+def install_packages():
+    packages = [
+        "transformers>=4.40.0",
+        "torch>=2.1.0",
+        "accelerate>=0.27.0",
+        "edge-tts",
+        "sentencepiece",
+        "bitsandbytes",
+    ]
+    for pkg in packages:
+        subprocess.run([sys.executable, "-m", "pip", "install", pkg, "-q"], check=False)
+
+install_packages()
+
 import torch
-import spaces
-import gradio as gr
-from threading import Thread
-from typing import Generator
-from fastapi.responses import HTMLResponse
-from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStreamer
-
-# --- 1. LOCAL MODEL SPECIFICATION AND INITIAL CRITICAL CPU LOADING ---
-# Selection of Qwen2.5-1.5B fits the <4B parameters Tiny Titan bracket
-MODEL_ID = "Qwen/Qwen2.5-1.5B-Instruct"
-
-# Initialize tokenizer and load base model onto system RAM (CPU) to prevent cold startup allocation errors
-tokenizer = AutoTokenizer.from_pretrained(MODEL_ID)
-model = AutoModelForCausalLM.from_pretrained(
-    MODEL_ID,
-    torch_dtype=torch.float16,
-    device_map="cpu"
-)
-
-# --- 2. THE QUEUED ASYNC SERVERLESS INFERENCE PIPELINE ---
-@spaces.GPU(duration=30)
-def run_inference(message: str, history_str: str) -> Generator[str, None, None]:
-    """
-    Spins up the GPU model instance and runs real-time text streaming
-    by executing within the ephemeral ZeroGPU scheduling boundary.
-    """
-    # Move model parameters to physical GPU context inside the execution function
-    model.to("cuda")
+from transformers import AutoTokenizer, AutoModelForCausalLM, TextIteratorStreamer
+import edge_tts
+
+# ── Constants ─────────────────────────────────────────────────────────────────
+MODEL_ID = "google/gemma-2-2b-it"
+VRM_PATH = "model/Ani.vrm"
+ANIM_ZIP = "animation/all_vrma.zip"
+TTS_VOICE = "en-US-AriaNeural"          # fallback if XiaoyiNeural unavailable
+TTS_VOICE_PRIMARY = "zh-CN-XiaoyiNeural"
+
+EMOTIONS_MAP = {
+    "happy":     {"blinking": True,  "description": "joyful, positive"},
+    "sad":       {"blinking": True,  "description": "sorrowful, melancholic"},
+    "angry":     {"blinking": False, "description": "furious, irritated"},
+    "surprised": {"blinking": False, "description": "shocked, astonished"},
+    "fearful":   {"blinking": True,  "description": "scared, anxious"},
+    "disgusted": {"blinking": False, "description": "revolted, displeased"},
+    "neutral":   {"blinking": True,  "description": "calm, normal"},
+    "excited":   {"blinking": True,  "description": "enthusiastic, energetic"},
+    "confused":  {"blinking": True,  "description": "puzzled, uncertain"},
+    "thinking":  {"blinking": True,  "description": "contemplating, processing"},
+    "laughing":  {"blinking": False, "description": "amused, giggling"},
+    "crying":    {"blinking": False, "description": "weeping, tears"},
+    "love":      {"blinking": True,  "description": "affectionate, caring"},
+    "shy":       {"blinking": True,  "description": "bashful, embarrassed"},
+    "bored":     {"blinking": True,  "description": "uninterested, tired"},
+    "sleepy":    {"blinking": False, "description": "drowsy, fatigued"},
+    "determined":{"blinking": True,  "description": "resolute, focused"},
+    "proud":     {"blinking": True,  "description": "accomplished, confident"},
+    "embarrassed":{"blinking":True,  "description": "flustered, awkward"},
+    "grateful":  {"blinking": True,  "description": "thankful, appreciative"},
+    "playful":   {"blinking": True,  "description": "mischievous, fun"},
+    "serious":   {"blinking": True,  "description": "solemn, focused"},
+}
+
+# ── Extract VRMA list ─────────────────────────────────────────────────────────
+def get_vrma_list():
+    vrma_files = []
+    if os.path.exists(ANIM_ZIP):
+        with zipfile.ZipFile(ANIM_ZIP, 'r') as z:
+            vrma_files = [f for f in z.namelist() if f.endswith('.vrma')]
+    return vrma_files
+
+VRMA_LIST = get_vrma_list()
+
+# ── Model loading ─────────────────────────────────────────────────────────────
+tokenizer = None
+model = None
+model_lock = threading.Lock()
+
+def load_model():
+    global tokenizer, model
+    if model is not None:
+        return
+    with model_lock:
+        if model is not None:
+            return
+        print(f"Loading {MODEL_ID}...")
+        tokenizer = AutoTokenizer.from_pretrained(MODEL_ID)
+        model = AutoModelForCausalLM.from_pretrained(
+            MODEL_ID,
+            torch_dtype=torch.bfloat16,
+            device_map="auto",
+            low_cpu_mem_usage=True,
+        )
+        model.eval()
+        print("Model loaded!")
+
+# ── AI inference ──────────────────────────────────────────────────────────────
+SYSTEM_PROMPT = """You are Ani, a helpful and expressive AI anime companion.
+Respond ONLY with valid JSON in this exact format:
+{{
+  "response": "your conversational reply here",
+  "emotion": "one emotion from the list",
+  "animation": "one vrma filename from the list or null",
+  "intensity": 0.8
+}}
+
+Available emotions: {emotions}
+Available animations: {animations}
+
+Choose the most fitting emotion and animation based on context.
+Keep responses friendly, natural, and concise (1-3 sentences)."""
+
+@spaces.GPU(duration=60)
+def generate_response(user_message: str, chat_history: list) -> dict:
+    load_model()
     
-    # Establish base system context and constraints
-    messages =
+    emotions_str = ", ".join(EMOTIONS_MAP.keys())
+    animations_str = ", ".join(VRMA_LIST[:30]) if VRMA_LIST else "null"
     
-    # Parse and append past conversational context
-    if history_str:
-        try:
-            history = json.loads(history_str)
-            for turn in history:
-                if isinstance(turn, list) and len(turn) == 2:
-                    messages.append({"role": "user", "content": turn})
-                    messages.append({"role": "assistant", "content": turn})
-        except Exception:
-            pass
-            
-    # Append the current prompt
-    messages.append({"role": "user", "content": message})
+    system = SYSTEM_PROMPT.format(
+        emotions=emotions_str,
+        animations=animations_str
+    )
     
-    # Process text sequences, utilizing return_dict to prevent sequence shape errors
-    inputs = tokenizer.apply_chat_template(
-        messages,
-        tokenize=True,
-        add_generation_prompt=True,
-        return_tensors="pt",
-        return_dict=True
-    ).to("cuda")
+    messages = [{"role": "system", "content": system}]
+    for human, assistant in chat_history[-4:]:
+        if human:
+            messages.append({"role": "user", "content": human})
+        if assistant:
+            try:
+                parsed = json.loads(assistant)
+                messages.append({"role": "assistant", "content": parsed.get("response", assistant)})
+            except:
+                messages.append({"role": "assistant", "content": assistant})
+    messages.append({"role": "user", "content": user_message})
     
-    # Set up streaming generators
-    streamer = TextIteratorStreamer(tokenizer, skip_prompt=True, skip_special_tokens=True)
-    generation_kwargs = dict(
-        **inputs,
-        streamer=streamer,
-        max_new_tokens=192,
-        do_sample=True,
-        temperature=0.7,
-        top_p=0.9,
-    )
+    text = tokenizer.apply_chat_template(messages, tokenize=False, add_generation_prompt=True)
+    inputs = tokenizer(text, return_tensors="pt").to(model.device)
     
-    # Execute model forward pass on a dedicated worker thread
-    thread = Thread(target=model.generate, kwargs=generation_kwargs)
-    thread.start()
+    with torch.no_grad():
+        outputs = model.generate(
+            **inputs,
+            max_new_tokens=256,
+            temperature=0.7,
+            top_p=0.9,
+            do_sample=True,
+            pad_token_id=tokenizer.eos_token_id,
+        )
     
-    # Yield incremental text updates as they are generated
-    accumulated_text = ""
-    for new_text in streamer:
-        accumulated_text += new_text
-        yield accumulated_text
-
-# --- 3. THE 98% CUSTOM FRONTEND SYSTEM (FRONTEND_HTML) ---
-FRONTEND_HTML = """
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>FastLLM Companion</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-    <style>
-        body {
-            background-color: #ffe082; /* Gold/yellow background from specifications */
-            margin: 0;
-            overflow: hidden;
-            font-family: system-ui, -apple-system, sans-serif;
-            -webkit-user-select: none;
-            user-select: none;
-            -webkit-tap-highlight-color: transparent;
+    generated = outputs[0][inputs["input_ids"].shape[1]:]
+    raw = tokenizer.decode(generated, skip_special_tokens=True).strip()
+    
+    # Parse JSON
+    try:
+        json_match = re.search(r'\{.*\}', raw, re.DOTALL)
+        if json_match:
+            result = json.loads(json_match.group())
+        else:
+            raise ValueError("No JSON found")
+    except Exception:
+        result = {
+            "response": raw if raw else "Hello! How can I help you?",
+            "emotion": "neutral",
+            "animation": None,
+            "intensity": 0.7
         }
-        #c {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: 1;
+    
+    # Validate
+    if result.get("emotion") not in EMOTIONS_MAP:
+        result["emotion"] = "neutral"
+    
+    return result
+
+# ── TTS ───────────────────────────────────────────────────────────────────────
+async def _tts_async(text: str, voice: str, output_path: str):
+    communicate = edge_tts.Communicate(text, voice)
+    await communicate.save(output_path)
+
+def run_tts(text: str) -> str | None:
+    tmp = tempfile.NamedTemporaryFile(suffix=".mp3", delete=False)
+    tmp.close()
+    for voice in [TTS_VOICE_PRIMARY, TTS_VOICE]:
+        try:
+            asyncio.run(_tts_async(text, voice, tmp.name))
+            if os.path.getsize(tmp.name) > 0:
+                with open(tmp.name, "rb") as f:
+                    audio_b64 = base64.b64encode(f.read()).decode()
+                os.unlink(tmp.name)
+                return audio_b64
+        except Exception as e:
+            print(f"TTS failed with {voice}: {e}")
+    return None
+
+# ── VRM/VRMA helpers ──────────────────────────────────────────────────────────
+def get_vrm_base64():
+    if os.path.exists(VRM_PATH):
+        with open(VRM_PATH, "rb") as f:
+            return base64.b64encode(f.read()).decode()
+    return None
+
+def get_vrma_base64(vrma_name: str):
+    if not os.path.exists(ANIM_ZIP):
+        return None
+    with zipfile.ZipFile(ANIM_ZIP, 'r') as z:
+        for name in z.namelist():
+            if name.endswith(vrma_name) or name == vrma_name:
+                data = z.read(name)
+                return base64.b64encode(data).decode()
+    return None
+
+def get_idle_animation():
+    """Get natural2.vrma or fallback"""
+    priorities = ["natural2.vrma", "natural.vrma", "idle.vrma", "stand.vrma"]
+    for p in priorities:
+        b64 = get_vrma_base64(p)
+        if b64:
+            return b64, p
+    if VRMA_LIST:
+        name = VRMA_LIST[0]
+        b64 = get_vrma_base64(name)
+        return b64, name
+    return None, None
+
+VRM_B64 = get_vrm_base64()
+IDLE_ANIM_B64, IDLE_ANIM_NAME = get_idle_animation()
+
+# ── Chat processing ───────────────────────────────────────────────────────────
+def process_chat(user_message: str, chat_history: list, state: dict):
+    if not user_message.strip():
+        return chat_history, state, None, "{}"
+
+    # Generate AI response
+    try:
+        result = generate_response(user_message, chat_history)
+    except Exception as e:
+        result = {
+            "response": f"Sorry, I encountered an error: {str(e)[:100]}",
+            "emotion": "sad",
+            "animation": None,
+            "intensity": 0.5
         }
-       .glass-panel {
-            background: rgba(8, 10, 22, 0.93);
-            backdrop-filter: blur(12px);
-            -webkit-backdrop-filter: blur(12px);
-            border: 1px solid rgba(255, 255, 255, 0.08);
+
+    response_text = result.get("response", "...")
+    emotion = result.get("emotion", "neutral")
+    animation = result.get("animation")
+    intensity = result.get("intensity", 0.7)
+
+    # TTS
+    audio_b64 = run_tts(response_text)
+
+    # Animation data
+    anim_b64 = None
+    if animation:
+        anim_b64 = get_vrma_base64(animation)
+
+    # Build update payload
+    emotion_data = EMOTIONS_MAP.get(emotion, EMOTIONS_MAP["neutral"])
+    payload = json.dumps({
+        "type": "chat_response",
+        "emotion": emotion,
+        "blinking": emotion_data["blinking"],
+        "animation_b64": anim_b64,
+        "animation_name": animation,
+        "audio_b64": audio_b64,
+        "intensity": intensity,
+        "response": response_text,
+    })
+
+    new_history = chat_history + [[user_message, response_text]]
+    return new_history, state, audio_b64, payload
+
+
+# ── Gradio UI ─────────────────────────────────────────────────────────────────
+CSS = """
+/* ── Reset & base ── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body, .gradio-container {
+    background: #0a0a0f !important;
+    font-family: 'Segoe UI', system-ui, sans-serif;
+    color: #e8e8f0;
+    overflow: hidden;
+    height: 100vh;
+    width: 100vw;
+}
+
+/* Hide default Gradio chrome */
+.gradio-container > .main > .wrap { padding: 0 !important; }
+footer, .built-with { display: none !important; }
+#component-0 { height: 100vh !important; padding: 0 !important; }
+
+/* ── Layout ── */
+#ani-root {
+    display: grid;
+    grid-template-columns: 1fr 380px;
+    grid-template-rows: 100vh;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    position: fixed;
+    top: 0; left: 0;
+}
+
+/* ── VRM Canvas Side ── */
+#vrm-side {
+    position: relative;
+    background: linear-gradient(135deg, #0d0d1a 0%, #0a0a14 50%, #0d0d1a 100%);
+    overflow: hidden;
+}
+
+#vrm-side::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background:
+        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(99,102,241,0.12) 0%, transparent 70%),
+        radial-gradient(ellipse 40% 30% at 20% 80%, rgba(139,92,246,0.08) 0%, transparent 60%);
+    pointer-events: none;
+    z-index: 1;
+}
+
+/* Floor reflection */
+#vrm-side::after {
+    content: '';
+    position: absolute;
+    bottom: 0; left: 0; right: 0;
+    height: 35%;
+    background: linear-gradient(to top, rgba(99,102,241,0.06) 0%, transparent 100%);
+    pointer-events: none;
+    z-index: 1;
+}
+
+#vrm-canvas-wrap {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+}
+
+#vrm-canvas-wrap canvas {
+    width: 100% !important;
+    height: 100% !important;
+    display: block;
+}
+
+/* Ambient particles */
+.particle {
+    position: absolute;
+    border-radius: 50%;
+    pointer-events: none;
+    animation: float-particle linear infinite;
+    z-index: 3;
+}
+@keyframes float-particle {
+    0%   { transform: translateY(100vh) scale(0); opacity: 0; }
+    10%  { opacity: 1; }
+    90%  { opacity: 0.6; }
+    100% { transform: translateY(-10vh) scale(1); opacity: 0; }
+}
+
+/* ── Status bar ── */
+#status-bar {
+    position: absolute;
+    top: 20px; left: 20px;
+    display: flex; align-items: center; gap: 10px;
+    z-index: 10;
+    background: rgba(10,10,20,0.6);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: 24px;
+    padding: 8px 16px;
+}
+
+#status-dot {
+    width: 8px; height: 8px;
+    border-radius: 50%;
+    background: #4ade80;
+    box-shadow: 0 0 8px #4ade80;
+    animation: pulse-dot 2s ease-in-out infinite;
+}
+@keyframes pulse-dot {
+    0%, 100% { box-shadow: 0 0 8px #4ade80; }
+    50%       { box-shadow: 0 0 16px #4ade80, 0 0 24px rgba(74,222,128,0.4); }
+}
+
+#status-text {
+    font-size: 12px;
+    color: rgba(255,255,255,0.7);
+    letter-spacing: 0.5px;
+}
+
+/* ── Emotion badge ── */
+#emotion-badge {
+    position: absolute;
+    bottom: 24px; left: 24px;
+    z-index: 10;
+    background: rgba(10,10,20,0.7);
+    backdrop-filter: blur(16px);
+    border: 1px solid rgba(99,102,241,0.3);
+    border-radius: 16px;
+    padding: 10px 18px;
+    display: flex; align-items: center; gap: 10px;
+    transition: all 0.4s ease;
+}
+
+#emotion-icon { font-size: 22px; transition: all 0.3s ease; }
+#emotion-label {
+    font-size: 13px;
+    font-weight: 600;
+    color: rgba(255,255,255,0.9);
+    text-transform: capitalize;
+    letter-spacing: 0.5px;
+}
+
+/* Waveform visualizer */
+#audio-visualizer {
+    position: absolute;
+    bottom: 24px; right: 24px;
+    z-index: 10;
+    display: flex; align-items: center; gap: 3px;
+    height: 40px;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+#audio-visualizer.active { opacity: 1; }
+.wave-bar {
+    width: 3px;
+    background: linear-gradient(to top, #6366f1, #a78bfa);
+    border-radius: 2px;
+    animation: wave-anim 0.6s ease-in-out infinite alternate;
+}
+@keyframes wave-anim {
+    from { transform: scaleY(0.2); }
+    to   { transform: scaleY(1); }
+}
+
+/* ── Chat Side ── */
+#chat-side {
+    display: flex;
+    flex-direction: column;
+    background: rgba(8,8,16,0.95);
+    border-left: 1px solid rgba(255,255,255,0.06);
+    backdrop-filter: blur(20px);
+    position: relative;
+    overflow: hidden;
+}
+
+/* Top glow */
+#chat-side::before {
+    content: '';
+    position: absolute;
+    top: -60px; left: 50%;
+    transform: translateX(-50%);
+    width: 200px; height: 120px;
+    background: radial-gradient(ellipse, rgba(99,102,241,0.3) 0%, transparent 70%);
+    pointer-events: none;
+    z-index: 0;
+}
+
+/* ── Chat Header ── */
+#chat-header {
+    position: relative;
+    z-index: 5;
+    padding: 20px 24px 16px;
+    border-bottom: 1px solid rgba(255,255,255,0.06);
+    background: rgba(12,12,24,0.8);
+    flex-shrink: 0;
+}
+
+#chat-title {
+    font-size: 18px;
+    font-weight: 700;
+    background: linear-gradient(135deg, #a78bfa, #6366f1, #60a5fa);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    letter-spacing: 0.5px;
+}
+
+#chat-subtitle {
+    font-size: 11px;
+    color: rgba(255,255,255,0.4);
+    margin-top: 3px;
+    letter-spacing: 0.5px;
+}
+
+#model-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    margin-top: 8px;
+    background: rgba(99,102,241,0.15);
+    border: 1px solid rgba(99,102,241,0.3);
+    border-radius: 20px;
+    padding: 3px 10px;
+    font-size: 10px;
+    color: #a78bfa;
+}
+
+/* ── Messages ── */
+#messages-wrap {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    position: relative;
+    z-index: 2;
+    scroll-behavior: smooth;
+}
+
+#messages-wrap::-webkit-scrollbar { width: 4px; }
+#messages-wrap::-webkit-scrollbar-track { background: transparent; }
+#messages-wrap::-webkit-scrollbar-thumb {
+    background: rgba(99,102,241,0.3);
+    border-radius: 2px;
+}
+
+.msg-row {
+    display: flex;
+    gap: 10px;
+    animation: msg-in 0.3s ease;
+}
+@keyframes msg-in {
+    from { opacity: 0; transform: translateY(8px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
+.msg-row.user { flex-direction: row-reverse; }
+
+.msg-avatar {
+    width: 30px; height: 30px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 14px;
+}
+
+.msg-avatar.ai {
+    background: linear-gradient(135deg, #6366f1, #a78bfa);
+    box-shadow: 0 0 12px rgba(99,102,241,0.4);
+}
+
+.msg-avatar.user-av {
+    background: linear-gradient(135deg, #374151, #4b5563);
+}
+
+.msg-bubble {
+    max-width: 82%;
+    padding: 10px 14px;
+    border-radius: 16px;
+    font-size: 13.5px;
+    line-height: 1.6;
+    position: relative;
+}
+
+.msg-bubble.ai {
+    background: rgba(99,102,241,0.12);
+    border: 1px solid rgba(99,102,241,0.2);
+    border-radius: 4px 16px 16px 16px;
+    color: rgba(255,255,255,0.9);
+}
+
+.msg-bubble.user {
+    background: linear-gradient(135deg, rgba(99,102,241,0.25), rgba(139,92,246,0.2));
+    border: 1px solid rgba(139,92,246,0.25);
+    border-radius: 16px 4px 16px 16px;
+    color: rgba(255,255,255,0.95);
+}
+
+.msg-time {
+    font-size: 10px;
+    color: rgba(255,255,255,0.3);
+    margin-top: 4px;
+    text-align: right;
+}
+
+/* Typing indicator */
+#typing-indicator {
+    display: none;
+    align-items: center;
+    gap: 10px;
+    padding: 4px 0;
+}
+#typing-indicator.visible { display: flex; }
+.typing-dot {
+    width: 6px; height: 6px;
+    border-radius: 50%;
+    background: #6366f1;
+    animation: typing-bounce 1.2s ease-in-out infinite;
+}
+.typing-dot:nth-child(2) { animation-delay: 0.2s; }
+.typing-dot:nth-child(3) { animation-delay: 0.4s; }
+@keyframes typing-bounce {
+    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
+    30% { transform: translateY(-6px); opacity: 1; }
+}
+
+/* ── Input Area ── */
+#input-area {
+    position: relative;
+    z-index: 5;
+    padding: 16px;
+    border-top: 1px solid rgba(255,255,255,0.06);
+    background: rgba(10,10,20,0.9);
+    flex-shrink: 0;
+}
+
+#input-row {
+    display: flex;
+    gap: 10px;
+    align-items: flex-end;
+}
+
+#user-input-wrap {
+    flex: 1;
+    position: relative;
+}
+
+#user-input {
+    width: 100%;
+    background: rgba(255,255,255,0.05);
+    border: 1px solid rgba(255,255,255,0.1);
+    border-radius: 20px;
+    padding: 12px 18px;
+    color: rgba(255,255,255,0.9);
+    font-size: 14px;
+    resize: none;
+    outline: none;
+    font-family: inherit;
+    line-height: 1.5;
+    max-height: 120px;
+    transition: border-color 0.2s, box-shadow 0.2s;
+    min-height: 46px;
+}
+
+#user-input:focus {
+    border-color: rgba(99,102,241,0.5);
+    box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
+}
+
+#user-input::placeholder { color: rgba(255,255,255,0.3); }
+
+#send-btn {
+    width: 46px; height: 46px;
+    border-radius: 50%;
+    border: none;
+    background: linear-gradient(135deg, #6366f1, #8b5cf6);
+    color: white;
+    font-size: 18px;
+    cursor: pointer;
+    display: flex; align-items: center; justify-content: center;
+    flex-shrink: 0;
+    transition: all 0.2s;
+    box-shadow: 0 4px 12px rgba(99,102,241,0.4);
+}
+
+#send-btn:hover {
+    transform: scale(1.05);
+    box-shadow: 0 6px 20px rgba(99,102,241,0.6);
+}
+
+#send-btn:active { transform: scale(0.95); }
+#send-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+}
+
+/* Loading overlay */
+#loading-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(8,8,16,0.97);
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 24px;
+    transition: opacity 0.8s ease;
+}
+
+#loading-overlay.hidden {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.loading-logo {
+    font-size: 64px;
+    animation: logo-pulse 2s ease-in-out infinite;
+}
+@keyframes logo-pulse {
+    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(99,102,241,0.6)); }
+    50% { transform: scale(1.05); filter: drop-shadow(0 0 40px rgba(167,139,250,0.8)); }
+}
+
+.loading-title {
+    font-size: 28px;
+    font-weight: 700;
+    background: linear-gradient(135deg, #a78bfa, #6366f1, #60a5fa);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.loading-bar-wrap {
+    width: 200px;
+    height: 3px;
+    background: rgba(255,255,255,0.1);
+    border-radius: 2px;
+    overflow: hidden;
+}
+
+.loading-bar {
+    height: 100%;
+    background: linear-gradient(90deg, #6366f1, #a78bfa, #60a5fa);
+    border-radius: 2px;
+    animation: loading-sweep 1.8s ease-in-out infinite;
+}
+@keyframes loading-sweep {
+    0%   { width: 0%; margin-left: 0%; }
+    50%  { width: 60%; margin-left: 20%; }
+    100% { width: 0%; margin-left: 100%; }
+}
+
+.loading-status {
+    font-size: 13px;
+    color: rgba(255,255,255,0.5);
+    letter-spacing: 0.5px;
+}
+
+/* Gradio hidden elements */
+#hidden-output, #hidden-payload { display: none !important; }
+.gradio-chatbot { display: none !important; }
+
+/* Audio player hidden */
+#hidden-audio { display: none !important; }
+
+/* Lip sync ring */
+#lipsync-ring {
+    position: absolute;
+    bottom: 70px; right: 20px;
+    width: 50px; height: 50px;
+    border-radius: 50%;
+    border: 2px solid rgba(99,102,241,0.3);
+    display: flex; align-items: center; justify-content: center;
+    z-index: 10;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+#lipsync-ring.active { opacity: 1; }
+#lipsync-ring::before {
+    content: '🎙';
+    font-size: 20px;
+    animation: mic-pulse 0.5s ease-in-out infinite alternate;
+}
+@keyframes mic-pulse {
+    from { transform: scale(0.9); }
+    to   { transform: scale(1.1); }
+}
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+    #ani-root {
+        grid-template-columns: 1fr;
+        grid-template-rows: 50vh 50vh;
+    }
+    #chat-side { border-left: none; border-top: 1px solid rgba(255,255,255,0.06); }
+}
+"""
+
+# ── Three.js + @pixiv/three-vrm HTML ─────────────────────────────────────────
+VRM_JS = """
+<script type="importmap">
+{
+  "imports": {
+    "three": "https://cdn.jsdelivr.net/npm/three@0.168.0/build/three.module.js",
+    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.168.0/examples/jsm/",
+    "@pixiv/three-vrm": "https://cdn.jsdelivr.net/npm/@pixiv/three-vrm@3.1.3/lib/three-vrm.module.js",
+    "@pixiv/three-vrm-animation": "https://cdn.jsdelivr.net/npm/@pixiv/three-vrm-animation@3.1.3/lib/three-vrm-animation.module.js"
+  }
+}
+</script>
+
+<script type="module">
+import * as THREE from 'three';
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+import { VRMLoaderPlugin, VRMUtils } from '@pixiv/three-vrm';
+import { VRMAnimationLoaderPlugin, createVRMAnimationClip } from '@pixiv/three-vrm-animation';
+
+// ── Globals ──────────────────────────────────────────────────────────────────
+let renderer, scene, camera, clock;
+let currentVRM = null;
+let currentMixer = null;
+let currentAction = null;
+let idleAction = null;
+let blinkInterval = null;
+let isBlinking = false;
+let autoBlinkEnabled = true;
+let currentEmotion = 'neutral';
+let isProcessing = false;
+let lipSyncActive = false;
+let lipSyncInterval = null;
+let audioCtx = null;
+let audioAnalyser = null;
+let audioSource = null;
+
+const EMOTION_EXPRESSIONS = {
+    happy:      { name: 'happy',    weight: 1.0 },
+    sad:        { name: 'sad',      weight: 1.0 },
+    angry:      { name: 'angry',    weight: 1.0 },
+    surprised:  { name: 'surprised',weight: 1.0 },
+    fearful:    { name: 'sad',      weight: 0.8 },
+    disgusted:  { name: 'angry',    weight: 0.7 },
+    neutral:    { name: 'neutral',  weight: 0.0 },
+    excited:    { name: 'happy',    weight: 1.0 },
+    confused:   { name: 'surprised',weight: 0.6 },
+    thinking:   { name: 'neutral',  weight: 0.0 },
+    laughing:   { name: 'happy',    weight: 1.0 },
+    crying:     { name: 'sad',      weight: 1.0 },
+    love:       { name: 'happy',    weight: 0.9 },
+    shy:        { name: 'happy',    weight: 0.5 },
+    bored:      { name: 'neutral',  weight: 0.0 },
+    sleepy:     { name: 'relaxed',  weight: 0.8 },
+    determined: { name: 'angry',    weight: 0.4 },
+    proud:      { name: 'happy',    weight: 0.8 },
+    embarrassed:{ name: 'sad',      weight: 0.5 },
+    grateful:   { name: 'happy',    weight: 0.7 },
+    playful:    { name: 'happy',    weight: 0.9 },
+    serious:    { name: 'neutral',  weight: 0.0 },
+};
+
+const BLINK_DISABLED_EMOTIONS = new Set([
+    'angry', 'surprised', 'laughing', 'crying', 'sleepy'
+]);
+
+// ── Init Three.js ─────────────────────────────────────────────────────────────
+function initThree() {
+    const wrap = document.getElementById('vrm-canvas-wrap');
+    if (!wrap) return;
+
+    renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    renderer.setPixelRatio(window.devicePixelRatio);
+    renderer.setSize(wrap.clientWidth, wrap.clientHeight);
+    renderer.outputColorSpace = THREE.SRGBColorSpace;
+    renderer.shadowMap.enabled = true;
+    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+    wrap.appendChild(renderer.domElement);
+
+    scene = new THREE.Scene();
+    scene.fog = new THREE.Fog(0x0a0a14, 8, 20);
+
+    // Camera
+    camera = new THREE.PerspectiveCamera(30, wrap.clientWidth / wrap.clientHeight, 0.1, 100);
+    camera.position.set(0, 1.4, 3.2);
+    camera.lookAt(0, 1.0, 0);
+
+    // Lights
+    const ambient = new THREE.AmbientLight(0x6366f1, 0.4);
+    scene.add(ambient);
+
+    const keyLight = new THREE.DirectionalLight(0xffffff, 1.2);
+    keyLight.position.set(2, 3, 2);
+    keyLight.castShadow = true;
+    scene.add(keyLight);
+
+    const fillLight = new THREE.DirectionalLight(0xa78bfa, 0.5);
+    fillLight.position.set(-2, 2, 1);
+    scene.add(fillLight);
+
+    const rimLight = new THREE.DirectionalLight(0x60a5fa, 0.4);
+    rimLight.position.set(0, 2, -3);
+    scene.add(rimLight);
+
+    const pointLight = new THREE.PointLight(0x6366f1, 0.6, 5);
+    pointLight.position.set(0, 0.5, 1.5);
+    scene.add(pointLight);
+
+    // Floor
+    const floorGeo = new THREE.PlaneGeometry(10, 10);
+    const floorMat = new THREE.MeshStandardMaterial({
+        color: 0x0d0d1a,
+        roughness: 0.8,
+        metalness: 0.1,
+        transparent: true,
+        opacity: 0.6,
+    });
+    const floor = new THREE.Mesh(floorGeo, floorMat);
+    floor.rotation.x = -Math.PI / 2;
+    floor.receiveShadow = true;
+    scene.add(floor);
+
+    // Grid helper
+    const grid = new THREE.GridHelper(8, 20, 0x6366f1, 0x1a1a2e);
+    grid.material.opacity = 0.15;
+    grid.material.transparent = true;
+    scene.add(grid);
+
+    clock = new THREE.Clock();
+
+    // Resize handler
+    window.addEventListener('resize', () => {
+        if (!wrap) return;
+        camera.aspect = wrap.clientWidth / wrap.clientHeight;
+        camera.updateProjectionMatrix();
+        renderer.setSize(wrap.clientWidth, wrap.clientHeight);
+    });
+
+    animate();
+}
+
+// ── Load VRM ──────────────────────────────────────────────────────────────────
+function loadVRMFromBase64(b64) {
+    const bytes = Uint8Array.from(atob(b64), c => c.charCodeAt(0));
+    const blob = new Blob([bytes], { type: 'application/octet-stream' });
+    const url = URL.createObjectURL(blob);
+
+    const loader = new GLTFLoader();
+    loader.register(parser => new VRMLoaderPlugin(parser));
+    loader.register(parser => new VRMAnimationLoaderPlugin(parser));
+
+    loader.load(url, (gltf) => {
+        const vrm = gltf.userData.vrm;
+        if (!vrm) { console.error('No VRM found'); return; }
+
+        VRMUtils.removeUnnecessaryJoints(vrm.scene);
+        VRMUtils.removeUnnecessaryVertices(vrm.scene);
+
+        if (currentVRM) {
+            scene.remove(currentVRM.scene);
+            VRMUtils.deepDispose(currentVRM.scene);
+        }
+
+        currentVRM = vrm;
+        scene.add(vrm.scene);
+
+        // Face camera
+        vrm.scene.rotation.y = Math.PI;
+
+        // Center model
+        const box = new THREE.Box3().setFromObject(vrm.scene);
+        const center = box.getCenter(new THREE.Vector3());
+        vrm.scene.position.sub(center);
+        vrm.scene.position.y = 0;
+
+        URL.revokeObjectURL(url);
+
+        setStatus('Ani is ready ✨');
+        hideLoadingOverlay();
+        startAutoBlink();
+
+        // Load idle animation via JS custom event
+        document.dispatchEvent(new CustomEvent('vrm-load-idle'));
+
+    }, undefined, (err) => {
+        console.error('VRM load error:', err);
+        setStatus('VRM load failed');
+        hideLoadingOverlay();
+    });
+}
+
+// ── Load VRMA ─────────────────────────────────────────────────────────────────
+function loadVRMAFromBase64(b64, loop = true, onDone = null) {
+    if (!currentVRM) return;
+
+    const bytes = Uint8Array.from(atob(b64), c => c.charCodeAt(0));
+    const blob = new Blob([bytes], { type: 'application/octet-stream' });
+    const url = URL.createObjectURL(blob);
+
+    const loader = new GLTFLoader();
+    loader.register(parser => new VRMAnimationLoaderPlugin(parser));
+
+    loader.load(url, (gltf) => {
+        const vrmAnimations = gltf.userData.vrmAnimations;
+        if (!vrmAnimations || vrmAnimations.length === 0) {
+            URL.revokeObjectURL(url);
+            return;
+        }
+
+        const clip = createVRMAnimationClip(vrmAnimations[0], currentVRM);
+
+        if (currentMixer) {
+            currentMixer.stopAllAction();
         }
-    </style>
+        currentMixer = new THREE.AnimationMixer(currentVRM.scene);
+        currentAction = currentMixer.clipAction(clip);
+        currentAction.setLoop(loop ? THREE.LoopRepeat : THREE.LoopOnce, Infinity);
+        currentAction.clampWhenFinished = !loop;
+        currentAction.play();
+
+        if (onDone && !loop) {
+            currentMixer.addEventListener('finished', () => {
+                onDone();
+                URL.revokeObjectURL(url);
+            });
+        } else {
+            URL.revokeObjectURL(url);
+        }
+
+    }, undefined, (err) => {
+        console.error('VRMA load error:', err);
+        URL.revokeObjectURL(url);
+    });
+}
+
+// ── Auto Blink ────────────────────────────────────────────────────────────────
+function startAutoBlink() {
+    if (blinkInterval) clearInterval(blinkInterval);
+    blinkInterval = setInterval(() => {
+        if (!autoBlinkEnabled || !currentVRM || isBlinking) return;
+        doBlink();
+    }, 2500 + Math.random() * 2000);
+}
+
+function doBlink() {
+    if (!currentVRM || isBlinking) return;
+    const expr = currentVRM.expressionManager;
+    if (!expr) return;
+
+    isBlinking = true;
+    const blinkName = 'blink';
+
+    let t = 0;
+    const dur = 120;
+    const step = 16;
+
+    const blink = setInterval(() => {
+        t += step;
+        const prog = t / dur;
+        const w = prog < 0.5
+            ? Math.sin(prog * Math.PI * 2)
+            : Math.sin(prog * Math.PI * 2);
+        const weight = Math.max(0, Math.sin(prog * Math.PI));
+        try { expr.setValue(blinkName, weight); } catch(e){}
+        if (t >= dur) {
+            clearInterval(blink);
+            try { expr.setValue(blinkName, 0); } catch(e){}
+            isBlinking = false;
+        }
+    }, step);
+}
+
+// ── Emotion ───────────────────────────────────────────────────────────────────
+function applyEmotion(emotionName, intensity = 1.0) {
+    if (!currentVRM) return;
+    const expr = currentVRM.expressionManager;
+    if (!expr) return;
+
+    // Reset all
+    const allExprs = ['happy','sad','angry','surprised','relaxed','neutral'];
+    allExprs.forEach(e => { try { expr.setValue(e, 0); } catch(ex){} });
+
+    const mapping = EMOTION_EXPRESSIONS[emotionName] || EMOTION_EXPRESSIONS.neutral;
+    if (mapping.weight > 0) {
+        try { expr.setValue(mapping.name, mapping.weight * intensity); } catch(e){}
+    }
+
+    // Blink control
+    autoBlinkEnabled = !BLINK_DISABLED_EMOTIONS.has(emotionName);
+
+    // Update badge
+    updateEmotionBadge(emotionName);
+    currentEmotion = emotionName;
+}
+
+const EMOTION_ICONS = {
+    happy:'😊', sad:'😢', angry:'😠', surprised:'😲', fearful:'😨',
+    disgusted:'🤢', neutral:'😐', excited:'🤩', confused:'😕', thinking:'🤔',
+    laughing:'😄', crying:'😭', love:'🥰', shy:'😊', bored:'😑',
+    sleepy:'😴', determined:'💪', proud:'🎉', embarrassed:'😳',
+    grateful:'🙏', playful:'😜', serious:'😤',
+};
+
+function updateEmotionBadge(emotion) {
+    const icon = document.getElementById('emotion-icon');
+    const label = document.getElementById('emotion-label');
+    if (icon) icon.textContent = EMOTION_ICONS[emotion] || '😐';
+    if (label) label.textContent = emotion;
+}
+
+// ── Lip Sync ──────────────────────────────────────────────────────────────────
+function startLipSync(audioBuffer) {
+    if (!currentVRM) return;
+    const expr = currentVRM.expressionManager;
+    if (!expr) return;
+
+    stopLipSync();
+
+    // Create audio context and analyse
+    if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+    audioCtx.decodeAudioData(audioBuffer.slice(0), (decoded) => {
+        audioSource = audioCtx.createBufferSource();
+        audioSource.buffer = decoded;
+
+        audioAnalyser = audioCtx.createAnalyser();
+        audioAnalyser.fftSize = 256;
+
+        audioSource.connect(audioAnalyser);
+        audioAnalyser.connect(audioCtx.destination);
+        audioSource.start(0);
+
+        const dataArray = new Uint8Array(audioAnalyser.frequencyBinCount);
+        const ringEl = document.getElementById('lipsync-ring');
+        const vizEl = document.getElementById('audio-visualizer');
+        if (ringEl) ringEl.classList.add('active');
+        if (vizEl) vizEl.classList.add('active');
+
+        lipSyncInterval = setInterval(() => {
+            audioAnalyser.getByteFrequencyData(dataArray);
+            // Voice frequencies ~300-3000Hz
+            const voiceBins = dataArray.slice(2, 20);
+            const avg = voiceBins.reduce((a,b) => a+b, 0) / voiceBins.length;
+            const mouth = Math.min(1.0, avg / 80);
+
+            try { expr.setValue('aa', mouth * 0.8); } catch(e){}
+            try { expr.setValue('oh', mouth * 0.3); } catch(e){}
+
+            // Disable auto blink during speaking
+            autoBlinkEnabled = false;
+
+        }, 33);
+
+        audioSource.addEventListener('ended', () => {
+            stopLipSync();
+            autoBlinkEnabled = !BLINK_DISABLED_EMOTIONS.has(currentEmotion);
+        });
+    }, () => {
+        // Fallback: manual lip sync
+        manualLipSync();
+    });
+}
+
+function manualLipSync() {
+    if (!currentVRM) return;
+    const expr = currentVRM.expressionManager;
+    if (!expr) return;
+
+    let t = 0;
+    const ringEl = document.getElementById('lipsync-ring');
+    const vizEl = document.getElementById('audio-visualizer');
+    if (ringEl) ringEl.classList.add('active');
+    if (vizEl) vizEl.classList.add('active');
+
+    lipSyncInterval = setInterval(() => {
+        t += 0.1;
+        const mouth = 0.3 + 0.5 * Math.abs(Math.sin(t * 8)) * Math.abs(Math.sin(t * 3));
+        try { expr.setValue('aa', mouth); } catch(e){}
+    }, 50);
+}
+
+function stopLipSync() {
+    if (lipSyncInterval) { clearInterval(lipSyncInterval); lipSyncInterval = null; }
+    if (audioSource) { try { audioSource.stop(); } catch(e){} audioSource = null; }
+
+    if (currentVRM) {
+        const expr = currentVRM.expressionManager;
+        if (expr) {
+            try { expr.setValue('aa', 0); } catch(e){}
+            try { expr.setValue('oh', 0); } catch(e){}
+        }
+    }
+    const ringEl = document.getElementById('lipsync-ring');
+    const vizEl = document.getElementById('audio-visualizer');
+    if (ringEl) ringEl.classList.remove('active');
+    if (vizEl) vizEl.classList.remove('active');
+}
+
+// ── Animate loop ──────────────────────────────────────────────────────────────
+function animate() {
+    requestAnimationFrame(animate);
+    const delta = clock.getDelta();
+
+    if (currentMixer) currentMixer.update(delta);
+    if (currentVRM) {
+        // Gentle breathing / idle movement
+        const t = clock.getElapsedTime();
+        if (currentVRM.humanoid) {
+            try {
+                const spine = currentVRM.humanoid.getNormalizedBoneNode('spine');
+                if (spine) {
+                    spine.rotation.z = Math.sin(t * 0.5) * 0.01;
+                    spine.rotation.x = Math.sin(t * 0.3) * 0.008;
+                }
+                const head = currentVRM.humanoid.getNormalizedBoneNode('head');
+                if (head) {
+                    head.rotation.y = Math.sin(t * 0.4) * 0.03;
+                    head.rotation.x = Math.sin(t * 0.25) * 0.015;
+                }
+            } catch(e){}
+        }
+        currentVRM.update(delta);
+    }
+
+    renderer.render(scene, camera);
+}
+
+// ── UI helpers ────────────────────────────────────────────────────────────────
+function setStatus(text) {
+    const el = document.getElementById('status-text');
+    if (el) el.textContent = text;
+}
+
+function hideLoadingOverlay() {
+    const overlay = document.getElementById('loading-overlay');
+    if (overlay) {
+        setTimeout(() => overlay.classList.add('hidden'), 500);
+    }
+}
+
+// ── Gradio bridge ─────────────────────────────────────────────────────────────
+function handlePayload(payload) {
+    if (!payload) return;
+    let data;
+    try { data = JSON.parse(payload); } catch(e) { return; }
+    if (!data || data.type !== 'chat_response') return;
+
+    // Emotion
+    if (data.emotion) applyEmotion(data.emotion, data.intensity || 0.8);
+
+    // Animation
+    if (data.animation_b64) {
+        loadVRMAFromBase64(data.animation_b64, false, () => {
+            // Return to idle
+            document.dispatchEvent(new CustomEvent('vrm-load-idle'));
+        });
+    }
+
+    // Audio + lip sync
+    if (data.audio_b64) {
+        const binary = atob(data.audio_b64);
+        const bytes = new Uint8Array(binary.length);
+        for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+        startLipSync(bytes.buffer);
+    }
+}
+
+// Watch for payload changes via MutationObserver on hidden element
+function watchPayload() {
+    const el = document.getElementById('payload-output');
+    if (!el) { setTimeout(watchPayload, 500); return; }
+
+    let lastVal = '';
+    setInterval(() => {
+        const val = el.textContent || el.value || '';
+        if (val && val !== lastVal) {
+            lastVal = val;
+            handlePayload(val);
+        }
+    }, 200);
+}
+
+// ── Boot ──────────────────────────────────────────────────────────────────────
+document.addEventListener('DOMContentLoaded', () => {
+    initThree();
+    watchPayload();
+    createParticles();
+
+    // Wait for VRM base64 from hidden element
+    const waitVRM = setInterval(() => {
+        const el = document.getElementById('vrm-data');
+        if (el && el.textContent && el.textContent.length > 100) {
+            clearInterval(waitVRM);
+            setStatus('Loading Ani...');
+            loadVRMFromBase64(el.textContent.trim());
+        }
+    }, 300);
+});
+
+// Load idle animation when requested
+document.addEventListener('vrm-load-idle', () => {
+    const el = document.getElementById('idle-anim-data');
+    if (el && el.textContent && el.textContent.length > 100) {
+        loadVRMAFromBase64(el.textContent.trim(), true);
+    }
+});
+
+// Particles
+function createParticles() {
+    const side = document.getElementById('vrm-side');
+    if (!side) return;
+    const colors = ['rgba(99,102,241,', 'rgba(139,92,246,', 'rgba(96,165,250,'];
+    for (let i = 0; i < 15; i++) {
+        const p = document.createElement('div');
+        p.className = 'particle';
+        const size = 2 + Math.random() * 4;
+        const color = colors[Math.floor(Math.random() * colors.length)];
+        p.style.cssText = `
+            width:${size}px; height:${size}px;
+            left:${Math.random()*100}%;
+            background:${color}${0.3 + Math.random()*0.4});
+            box-shadow:0 0 ${size*2}px ${color}0.6);
+            animation-duration:${8 + Math.random()*12}s;
+            animation-delay:${Math.random()*10}s;
+        `;
+        side.appendChild(p);
+    }
+}
+
+// Wave bars
+document.addEventListener('DOMContentLoaded', () => {
+    const viz = document.getElementById('audio-visualizer');
+    if (viz) {
+        for (let i = 0; i < 8; i++) {
+            const bar = document.createElement('div');
+            bar.className = 'wave-bar';
+            bar.style.height = (15 + Math.random()*25) + 'px';
+            bar.style.animationDelay = (i * 0.08) + 's';
+            bar.style.animationDuration = (0.4 + Math.random()*0.3) + 's';
+            viz.appendChild(bar);
+        }
+    }
+});
+</script>
+"""
+
+# ── Build HTML for VRM viewer side ────────────────────────────────────────────
+VRM_B64_SAFE = VRM_B64 or ""
+IDLE_B64_SAFE = IDLE_ANIM_B64 or ""
+
+CUSTOM_HTML = f"""
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>Ani – AI Companion</title>
+<style>
+{CSS}
+/* Extra scoped styles */
+#vrm-canvas-wrap canvas {{ border-radius: 0; }}
+</style>
 </head>
-<body class="text-white relative w-screen h-screen">
+<body>
 
-    <canvas id="c"></canvas>
-    
-    <div id="drop" class="absolute inset-0 flex flex-col items-center justify-center border-4 border-dashed border-cyan-500/50 m-10 rounded-3xl z-10 pointer-events-none transition-opacity duration-300 opacity-0">
-        <h2 class="text-3xl font-extrabold text-[#6cf] mb-2">Drop VRM Model</h2>
-        <p class="text-sm text-gray-100 opacity-60">Upload custom characters directly into viewport</p>
-    </div>
-    
-    <div id="vrmPanel" class="absolute top-20 left-4 w-80 glass-panel p-4 rounded-2xl z-20 hidden flex-col gap-3">
-        <h3 class="font-bold text-sm text-cyan-400 uppercase tracking-widest">Available Companions</h3>
-        <div id="vrmList" class="flex-grow overflow-y-auto max-h-48 pr-1">
-            <div class="vrmItem flex items-center justify-between p-2 hover:bg-slate-800/60 rounded-xl cursor-pointer">
-                <span class="text-xs">Procedural Cyber-Core v1.0</span>
-                <span class="dot w-2 h-2 rounded-full bg-emerald-500 shadow-md"></span>
-            </div>
-        </div>
-        <button id="vrmPanelClose" class="text-center text-xs py-2 bg-slate-800 hover:bg-slate-700 rounded-xl mt-2 transition-all">Close Panel</button>
+<!-- Loading overlay -->
+<div id="loading-overlay">
+  <div class="loading-logo">🌸</div>
+  <div class="loading-title">Ani AI Companion</div>
+  <div class="loading-bar-wrap"><div class="loading-bar"></div></div>
+  <div class="loading-status" id="loading-status-text">Initializing...</div>
+</div>
+
+<!-- Hidden data elements for JS -->
+<div id="vrm-data" style="display:none">{VRM_B64_SAFE}</div>
+<div id="idle-anim-data" style="display:none">{IDLE_B64_SAFE}</div>
+<div id="payload-output" style="display:none"></div>
+
+<!-- Main Layout -->
+<div id="ani-root">
+
+  <!-- VRM Viewer -->
+  <div id="vrm-side">
+    <div id="vrm-canvas-wrap"></div>
+
+    <!-- Status bar -->
+    <div id="status-bar">
+      <div id="status-dot"></div>
+      <span id="status-text">Loading model...</span>
     </div>
 
-    <div id="speakDot" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10 hidden flex items-center gap-1.5 bg-cyan-950/90 px-5 py-2.5 rounded-full border border-cyan-500/30">
-        <span class="text-xs text-cyan-400 mr-2 font-mono uppercase tracking-widest">Active</span>
-        <div class="sdot w-2 h-2 rounded-full bg-cyan-400 animate-bounce"></div>
-        <div class="sdot w-2 h-2 rounded-full bg-cyan-400 animate-bounce" style="animation-delay: 0.15s"></div>
-        <div class="sdot w-2 h-2 rounded-full bg-cyan-400 animate-bounce" style="animation-delay: 0.3s"></div>
+    <!-- Emotion badge -->
+    <div id="emotion-badge">
+      <span id="emotion-icon">😐</span>
+      <span id="emotion-label">neutral</span>
     </div>
-    
-    <div class="absolute bottom-24 left-1/2 -translate-x-1/2 z-10 w-[90%] max-w-2xl px-6 py-4 rounded-2xl glass-panel text-center hidden pointer-events-auto border-t-2 border-cyan-500/20 shadow-lg" id="subtitle-panel">
-        <p id="subtitle-text" class="text-sm text-gray-100 leading-relaxed text-left"></p>
+
+    <!-- Audio visualizer -->
+    <div id="audio-visualizer"></div>
+
+    <!-- Lip sync ring -->
+    <div id="lipsync-ring"></div>
+  </div>
+
+  <!-- Chat Panel -->
+  <div id="chat-side">
+    <div id="chat-header">
+      <div id="chat-title">✨ Ani</div>
+      <div id="chat-subtitle">Your AI Anime Companion</div>
+      <div id="model-tag">🤖 Gemma 2B · ZeroGPU</div>
     </div>
 
-    <div id="vrmaQueue" class="absolute bottom-28 right-4 w-64 max-h-32 overflow-y-auto glass-panel p-2 rounded-xl text-[10px] font-mono text-gray-400 hidden flex flex-col gap-1 z-10">
-        <div class="qitem border-b border-gray-800/30 pb-1">Queue: Syncing bones...</div>
+    <div id="messages-wrap" id="messages-container">
+      <!-- Welcome message -->
+      <div class="msg-row">
+        <div class="msg-avatar ai">🌸</div>
+        <div>
+          <div class="msg-bubble ai">
+            Hello! I'm Ani, your AI companion! ✨ How can I help you today?
+          </div>
+          <div class="msg-time">just now</div>
+        </div>
+      </div>
     </div>
 
-    <div id="bar" class="absolute left-1/2 -translate-x-1/2 z-10 w-[95%] max-w-4xl p-2 rounded-3xl glass-panel flex items-center gap-2 pointer-events-auto shadow-2xl">
-        <button id="mb" class="p-3 rounded-2xl bg-slate-800/80 hover:bg-slate-700 border border-slate-700 text-cyan-400 transition-all flex-shrink-0 flex items-center justify-center" onclick="toggleMenu()">
-            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
-        </button>
-        
-        <input type="text" id="ti" class="flex-1 py-3 px-4 rounded-2xl bg-slate-900/95 border border-slate-700/60 text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 transition-all" placeholder="Enter message to local AI...">
-        
-        <button id="sb" class="p-3 rounded-2xl bg-gradient-to-r from-[#6cf] to-[#3ae] hover:opacity-95 text-white font-semibold transition-all flex-shrink-0" onclick="handleSend()">
-            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
-        </button>
+    <div id="typing-indicator">
+      <div class="msg-avatar ai">🌸</div>
+      <div style="display:flex;align-items:center;gap:8px;padding:10px 14px;background:rgba(99,102,241,0.1);border:1px solid rgba(99,102,241,0.2);border-radius:4px 16px 16px 16px;">
+        <div class="typing-dot"></div>
+        <div class="typing-dot"></div>
+        <div class="typing-dot"></div>
+      </div>
     </div>
-    
-    <div id="load" class="absolute top-20 left-1/2 -translate-x-1/2 glass-panel px-4 py-2 rounded-full text-xs text-amber-400 font-mono tracking-widest uppercase transition-opacity duration-300 opacity-0 z-20">Syncing Local Engine...</div>
-    <div id="err" class="absolute top-4 left-4 right-4 bg-red-950/90 border border-red-500/30 text-red-200 px-4 py-2 rounded-xl text-xs font-mono text-center hidden z-30">GPU assignment latency detected. Retrying connection...</div>
-    <div id="info" class="absolute top-20 right-4 w-72 glass-panel p-3 rounded-xl border border-blue-500/20 text-xs text-blue-200 hidden z-20">Notice: Running local weights on serverless hardware.</div>
-    <div id="fps" class="absolute top-4 right-4 text-xs font-mono text-emerald-400 bg-slate-950/90 px-3 py-1.5 rounded border border-emerald-500/20 z-20">FPS: --</div>
-
-    <div id="menu" class="absolute bottom-0 left-0 right-0 glass-panel p-6 rounded-t-3xl z-30 transform translate-y-full transition-transform duration-300 max-h-[60vh] overflow-y-auto">
-        <div class="flex justify-between items-center mb-4 border-b border-gray-800 pb-2">
-            <h3 class="font-bold text-cyan-400 uppercase tracking-widest text-sm">Customization Panel</h3>
-            <button class="text-gray-500 hover:text-white text-xl" onclick="toggleMenu()">&times;</button>
-        </div>
-        <div class="flex flex-col gap-4">
-            <div class="row flex justify-between items-center text-sm">
-                <span class="text-gray-300">Ambient Lighting</span>
-                <input type="range" min="0.5" max="3" step="0.1" value="1.5" class="accent-cyan-500" oninput="updateGlowIntensity(this.value)">
-            </div>
-            <div class="row flex justify-between items-center text-sm">
-                <span class="text-gray-300">Companion Eye Tint</span>
-                <input type="color" value="#06b6d4" class="w-8 h-8 rounded border-none bg-transparent cursor-pointer" onchange="updateEyeColor(this.value)">
-            </div>
-            <div class="row flex justify-between items-center text-sm">
-                <span class="text-gray-300">Key Registration</span>
-                <input type="password" placeholder="Key token..." class="bg-slate-900 border border-slate-700 rounded px-2 py-1 text-xs text-white">
-            </div>
-            <div class="row flex justify-between items-center text-sm">
-                <span class="text-gray-300">Mesh Designation</span>
-                <input type="text" value="Aya-Companion" class="bg-slate-900 border border-slate-700 rounded px-2 py-1 text-xs text-white">
-            </div>
-            <div class="row flex justify-between items-center text-sm">
-                <span class="text-gray-300">Interaction Node</span>
-                <select class="bg-slate-900 border border-slate-700 rounded px-2 py-1 text-xs text-white">
-                    <option>Empathetic</option>
-                    <option>Analytical</option>
-                </select>
-            </div>
-            <div class="chips flex gap-2 flex-wrap">
-                <span class="chip bg-cyan-950 text-cyan-300 px-3 py-1 rounded-full text-xs cursor-pointer border border-cyan-500/20">Voice Sync</span>
-                <span class="chip bg-slate-800 text-slate-300 px-3 py-1 rounded-full text-xs cursor-pointer">Local Text</span>
-            </div>
-            <div class="fbtn flex gap-2 mt-2">
-                <button class="flex-1 py-2 bg-rose-950/50 hover:bg-rose-950 border border-rose-500/30 text-rose-300 rounded-xl text-xs font-semibold">Clear Profile</button>
-                <button class="flex-1 py-2 bg-cyan-950/50 hover:bg-cyan-950 border border-cyan-500/30 text-cyan-300 rounded-xl text-xs font-semibold">Save Profile</button>
-            </div>
+
+    <div id="input-area">
+      <div id="input-row">
+        <div id="user-input-wrap">
+          <textarea
+            id="user-input"
+            placeholder="Talk to Ani..."
+            rows="1"
+          ></textarea>
         </div>
+        <button id="send-btn" title="Send">➤</button>
+      </div>
     </div>
+  </div>
 
-    <div class="voice-locked absolute top-4 left-1/2 -translate-x-1/2 bg-slate-950/90 border border-amber-500/30 text-amber-200 px-4 py-2 rounded-xl text-xs font-mono hidden flex items-center gap-2 z-30 shadow-lg">
-        <svg class="w-4 h-4 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
-        Voice function locked. Upgrade to premium.
-    </div>
+</div>
 
-    <script type="module">
-        import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
-        
-        let client;
-        let isGenerating = false;
-        let chatHistory =;
-        
-        // Setup control bar positioning for mobile Apple safe area inset
-        const inputBar = document.getElementById('bar');
-        inputBar.style.bottom = `calc(16px + env(safe-area-inset-bottom, 0px))`;
-        
-        async function connectEngine() {
-            const loader = document.getElementById('load');
-            loader.style.opacity = '1';
-            try {
-                // Connect utilizing the local window origin to ensure ZeroGPU token handshakes are verified
-                client = await Client.connect(window.location.origin);
-                loader.style.opacity = '0';
-            } catch (err) {
-                console.error("Gradio initialization failure:", err);
-                document.getElementById('err').classList.remove('hidden');
-            }
-        }
-        
-        window.handleSend = async function() {
-            const inputField = document.getElementById('ti');
-            const messageText = inputField.value.trim();
-            if (!messageText || isGenerating) return;
-            
-            inputField.value = '';
-            isGenerating = true;
-            
-            // Show subtitle panel and active speaking indicator
-            const subtitlePanel = document.getElementById('subtitle-panel');
-            const subtitleText = document.getElementById('subtitle-text');
-            const speakIndicator = document.getElementById('speakDot');
-            
-            subtitlePanel.classList.remove('hidden');
-            speakIndicator.classList.remove('hidden');
-            subtitleText.textContent = "Processing message...";
-            
-            try {
-                // Submit request to the local serverless execution queue
-                const job = client.submit("/chat",);
-                
-                job.on("data", (event) => {
-                    const latestChunk = event.data;
-                    subtitleText.textContent = latestChunk;
-                    
-                    // Trigger character jaw scaling based on active streaming
-                    speakingIntensity = 1.0;
-                });
-                
-                job.on("status", (status) => {
-                    if (status.stage === "complete") {
-                        const finalResponse = subtitleText.textContent;
-                        chatHistory.push();
-                        if (chatHistory.length > 8) chatHistory.shift();
-                        
-                        isGenerating = false;
-                        speakIndicator.classList.add('hidden');
-                        
-                        setTimeout(() => {
-                            if (!isGenerating) subtitlePanel.classList.add('hidden');
-                        }, 5000);
+{VRM_JS}
+
+<script>
+// ── Chat UI logic ─────────────────────────────────────────────────────────────
+const messagesWrap = document.getElementById('messages-wrap');
+const userInput = document.getElementById('user-input');
+const sendBtn = document.getElementById('send-btn');
+const typingInd = document.getElementById('typing-indicator');
+
+function getTime() {{
+  const d = new Date();
+  return d.getHours().toString().padStart(2,'0')+':'+d.getMinutes().toString().padStart(2,'0');
+}}
+
+function addMessage(text, role) {{
+  const row = document.createElement('div');
+  row.className = `msg-row ${{role === 'user' ? 'user' : ''}}`;
+
+  const avatar = document.createElement('div');
+  avatar.className = `msg-avatar ${{role === 'user' ? 'user-av' : 'ai'}}`;
+  avatar.textContent = role === 'user' ? '👤' : '🌸';
+
+  const bWrap = document.createElement('div');
+  const bubble = document.createElement('div');
+  bubble.className = `msg-bubble ${{role}}`;
+  bubble.textContent = text;
+
+  const time = document.createElement('div');
+  time.className = 'msg-time';
+  time.textContent = getTime();
+
+  bWrap.appendChild(bubble);
+  bWrap.appendChild(time);
+
+  if (role === 'user') {{
+    row.appendChild(bWrap);
+    row.appendChild(avatar);
+  }} else {{
+    row.appendChild(avatar);
+    row.appendChild(bWrap);
+  }}
+
+  messagesWrap.appendChild(row);
+  messagesWrap.scrollTop = messagesWrap.scrollHeight;
+}}
+
+function showTyping() {{
+  typingInd.classList.add('visible');
+  messagesWrap.scrollTop = messagesWrap.scrollHeight;
+}}
+function hideTyping() {{
+  typingInd.classList.remove('visible');
+}}
+
+// Auto-resize textarea
+userInput.addEventListener('input', () => {{
+  userInput.style.height = 'auto';
+  userInput.style.height = Math.min(userInput.scrollHeight, 120) + 'px';
+}});
+
+// Send on Enter (Shift+Enter = newline)
+userInput.addEventListener('keydown', (e) => {{
+  if (e.key === 'Enter' && !e.shiftKey) {{
+    e.preventDefault();
+    sendMessage();
+  }}
+}});
+
+sendBtn.addEventListener('click', sendMessage);
+
+function sendMessage() {{
+  const text = userInput.value.trim();
+  if (!text || sendBtn.disabled) return;
+
+  addMessage(text, 'user');
+  userInput.value = '';
+  userInput.style.height = 'auto';
+
+  sendBtn.disabled = true;
+  showTyping();
+
+  // Trigger Gradio via the hidden textbox
+  const hiddenInput = document.querySelector('#hidden-msg-input textarea') ||
+                      document.querySelector('#hidden-msg-input input');
+  if (hiddenInput) {{
+    hiddenInput.value = text;
+    hiddenInput.dispatchEvent(new Event('input', {{bubbles:true}}));
+    // Click the hidden submit button
+    setTimeout(() => {{
+      const btn = document.getElementById('hidden-submit-btn');
+      if (btn) btn.click();
+    }}, 50);
+  }}
+
+  // Watch for response
+  const observer = new MutationObserver(() => {{
+    const payloadEl = document.getElementById('payload-output');
+    if (!payloadEl) return;
+    const val = payloadEl.textContent.trim();
+    if (val && val.includes('chat_response')) {{
+      try {{
+        const data = JSON.parse(val);
+        if (data.response) {{
+          hideTyping();
+          addMessage(data.response, 'ai');
+          sendBtn.disabled = false;
+          observer.disconnect();
+        }}
+      }} catch(e) {{}}
+    }}
+  }});
+
+  // Fallback timeout
+  setTimeout(() => {{
+    hideTyping();
+    sendBtn.disabled = false;
+    observer.disconnect();
+  }}, 60000);
+}}
+
+// Watch Gradio output and push to payload-output div
+function watchGradioOutput() {{
+  setInterval(() => {{
+    const el = document.querySelector('#gradio-payload-display') ||
+               document.querySelector('#payload-display');
+    if (!el) return;
+    const txt = el.textContent || el.innerText || '';
+    if (txt && txt.length > 2) {{
+      const pEl = document.getElementById('payload-output');
+      if (pEl && pEl.textContent !== txt) {{
+        pEl.textContent = txt;
+      }}
+    }}
+  }}, 300);
+}}
+
+document.addEventListener('DOMContentLoaded', watchGradioOutput);
+</script>
+
+</body>
+</html>
+"""
+
+# ── Gradio App ────────────────────────────────────────────────────────────────
+with gr.Blocks(
+    css="""
+    .gradio-container { padding: 0 !important; margin: 0 !important; }
+    #hidden-controls { position:fixed; bottom:-200px; left:-200px; opacity:0; pointer-events:none; }
+    """,
+    title="Ani AI Companion",
+    theme=gr.themes.Base(
+        primary_hue="violet",
+        neutral_hue="slate",
+    ),
+) as demo:
+
+    # State
+    chat_state = gr.State([])
+    payload_state = gr.State("{}")
+
+    # ── Main viewer (custom HTML) ──
+    gr.HTML(CUSTOM_HTML)
+
+    # ── Hidden Gradio controls ──
+    with gr.Group(elem_id="hidden-controls", visible=True):
+        hidden_msg = gr.Textbox(
+            label="",
+            elem_id="hidden-msg-input",
+            visible=False,
+        )
+        hidden_submit = gr.Button(
+            "Send",
+            elem_id="hidden-submit-btn",
+            visible=False,
+        )
+        hidden_chatbot = gr.Chatbot(
+            label="",
+            elem_id="hidden-chatbot",
+            visible=False,
+        )
+        payload_display = gr.Textbox(
+            label="",
+            elem_id="gradio-payload-display",
+            visible=False,
+        )
+        audio_out = gr.Audio(
+            label="",
+            elem_id="hidden-audio",
+            visible=False,
+            autoplay=True,
+        )
+
+    # ── Event: submit ──
+    def on_submit(message, history, state):
+        if not message or not message.strip():
+            return history, state, "{}", None
+
+        new_history, new_state, audio_b64, payload = process_chat(
+            message, history, state
+        )
+
+        # Return audio as file if available
+        audio_file = None
+        if audio_b64:
+            tmp = tempfile.NamedTemporaryFile(suffix=".mp3", delete=False)
+            tmp.write(base64.b64decode(audio_b64))
+            tmp.close()
+            audio_file = tmp.name
+
+        return new_history, new_state, payload, audio_file
+
+    hidden_submit.click(
+        fn=on_submit,
+        inputs=[hidden_msg, hidden_chatbot, chat_state],
+        outputs=[hidden_chatbot, chat_state, payload_display, audio_out],
+        api_name="chat",
+    )
+
+    # JS bridge: copy payload_display → payload-output div
+    payload_display.change(
+        fn=None,
+        inputs=[payload_display],
+        outputs=None,
+        js="""
+        (payload) => {
+            const el = document.getElementById('payload-output');
+            if (el && payload) {
+                el.textContent = payload;
+                // Also handle audio in payload
+                try {
+                    const data = JSON.parse(payload);
+                    if (data.audio_b64) {
+                        const audio = new Audio('data:audio/mp3;base64,' + data.audio_b64);
+                        audio.play().catch(e => console.log('Audio play:', e));
                     }
-                });
-            } catch (err) {
-                console.error("Inference execution failure:", err);
-                subtitleText.textContent = "Pipeline error. Retrying...";
-                isGenerating = false;
-                speakIndicator.classList.add('hidden');
-            }
-        };
-        
-        document.getElementById('ti').addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') handleSend();
-        });
-        
-        window.toggleMenu = function() {
-            const menu = document.getElementById('menu');
-            if (menu.style.transform === 'translateY(0%)') {
-                menu.style.transform = 'translateY(100%)';
-            } else {
-                menu.style.transform = 'translateY(0%)';
+                } catch(e) {}
             }
-        };
-
-        // --- 4. PROCEDURAL THREE.JS WEBGL RENDER LOOP ---
-        let scene, camera, renderer;
-        let headMesh, leftEye, rightEye, mouthMesh;
-        let baseEyeColor, targetEyeColor;
-        let mouseX = 0, mouseY = 0;
-        let speakingIntensity = 0;
-        let clock = new THREE.Clock();
-        let fpsLastTime = performance.now();
-        let fpsFrames = 0;
-        
-        function initWebGLScene() {
-            const canvas = document.getElementById('c');
-            scene = new THREE.Scene();
-            scene.fog = new THREE.FogExp2(0xffe082, 0.05);
-            
-            camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 100);
-            camera.position.set(0, 0.2, 4.5);
-            
-            renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true, alpha: true });
-            renderer.setSize(window.innerWidth, window.innerHeight);
-            renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-            renderer.setClearColor(0x000000, 0); // Transparent WebGL overlay
-            
-            // Lighting Configuration
-            const ambient = new THREE.AmbientLight(0xfffbeb, 1.0);
-            scene.add(ambient);
-            
-            const direction = new THREE.DirectionalLight(0x06b6d4, 1.8);
-            direction.position.set(5, 5, 5);
-            scene.add(direction);
-            
-            // Cybernetic companion structure
-            const metalMat = new THREE.MeshStandardMaterial({
-                color: 0x1e293b,
-                roughness: 0.12,
-                metalness: 0.88
-            });
-            
-            headMesh = new THREE.Mesh(new THREE.CylinderGeometry(0.8, 0.6, 1.2, 8), metalMat);
-            headMesh.position.set(0, 0, 0);
-            scene.add(headMesh);
-            
-            // Expressive glowing eye spheres
-            baseEyeColor = new THREE.Color(0x06b6d4);
-            targetEyeColor = new THREE.Color(0x06b6d4);
-            const eyeMat = new THREE.MeshBasicMaterial({ color: baseEyeColor });
-            const eyeGeo = new THREE.SphereGeometry(0.14, 32, 32);
-            
-            leftEye = new THREE.Mesh(eyeGeo, eyeMat);
-            leftEye.position.set(-0.28, 0.15, 0.58);
-            headMesh.add(leftEye);
-            
-            rightEye = new THREE.Mesh(eyeGeo, eyeMat);
-            rightEye.position.set(0.28, 0.15, 0.58);
-            headMesh.add(rightEye);
-            
-            // Dynamic speaking mesh
-            mouthMesh = new THREE.Mesh(new THREE.BoxGeometry(0.35, 0.04, 0.06), new THREE.MeshBasicMaterial({ color: 0x06b6d4 }));
-            mouthMesh.position.set(0, -0.28, 0.61);
-            headMesh.add(mouthMesh);
-            
-            // Floating halo ring
-            const ringGeo = new THREE.TorusGeometry(1.2, 0.03, 8, 48);
-            ringGeo.rotateX(Math.PI / 2);
-            const ringMesh = new THREE.Mesh(ringGeo, new THREE.MeshStandardMaterial({
-                color: 0x06b6d4,
-                emissive: 0x06b6d4,
-                emissiveIntensity: 0.8
-            }));
-            ringMesh.position.y = 0.8;
-            headMesh.add(ringMesh);
-            
-            window.addEventListener('resize', onResize);
-            window.addEventListener('mousemove', (e) => {
-                mouseX = (e.clientX / window.innerWidth) * 2 - 1;
-                mouseY = -(e.clientY / window.innerHeight) * 2 + 1;
-            });
-            
-            connectEngine();
-            animate();
-        }
-        
-        function onResize() {
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
         }
-        
-        window.updateEyeColor = function(colorHex) {
-            baseEyeColor.set(colorHex);
-            targetEyeColor.set(colorHex);
-            mouthMesh.material.color.set(colorHex);
-        };
-        
-        window.updateGlowIntensity = function(val) {
-            scene.children.forEach(c => {
-                if (c.isDirectionalLight) c.intensity = parseFloat(val);
-            });
-        };
-        
-        function animate() {
-            requestAnimationFrame(animate);
-            const time = clock.getElapsedTime();
-            
-            // Dynamic idle float movements
-            headMesh.position.y = Math.sin(time * 1.8) * 0.06;
-            
-            // Head rotation mechanics
-            const targetRotY = mouseX * 0.35;
-            const targetRotX = -mouseY * 0.18;
-            headMesh.rotation.y += (targetRotY - headMesh.rotation.y) * 0.1;
-            headMesh.rotation.x += (targetRotX - headMesh.rotation.x) * 0.1;
-            
-            // Linear jaw scaling during token streaming
-            if (speakingIntensity > 0.01) {
-                speakingIntensity *= 0.90;
-                const mouthY = 1 + Math.sin(time * 28) * 3.0 * speakingIntensity;
-                mouthMesh.scale.set(1.0, mouthY, 1.0);
-            } else {
-                mouthMesh.scale.set(1.0, 1.0, 1.0);
-            }
-            
-            // Expressive blinks
-            const isBlink = Math.floor(time) % 6 === 0 && (time - Math.floor(time)) < 0.15;
-            leftEye.scale.y = isBlink? 0.15 : 1.0;
-            rightEye.scale.y = isBlink? 0.15 : 1.0;
-            
-            renderer.render(scene, camera);
-            
-            // Track client render metrics
-            fpsFrames++;
-            const now = performance.now();
-            if (now >= fpsLastTime + 1000) {
-                document.getElementById('fps').textContent = `FPS: ${fpsFrames}`;
-                fpsFrames = 0;
-                fpsLastTime = now;
+        """,
+    )
+
+    # Also use audio_out change for audio playback
+    audio_out.change(
+        fn=None,
+        inputs=[],
+        outputs=None,
+        js="""
+        () => {
+            const el = document.getElementById('payload-output');
+            if (el) {
+                const event = new Event('payload-updated');
+                el.dispatchEvent(event);
             }
         }
-        
-        initWebGLScene();
-    </script>
-</body>
-</html>
-"""
+        """,
+    )
 
-# --- 5. SYSTEM REGISTRATION AND COMPOSITION ---
-# Initialize the custom Server Mode FastAPI app
-app = gr.Server()
-
-@app.get("/", response_class=HTMLResponse)
-async def homepage() -> HTMLResponse:
-    """
-    Serves the custom HTML single-page application and its embedded WebGL engine.
-    """
-    return HTMLResponse(content=FRONTEND_HTML, status_code=200)
-
-@app.api(name="chat")
-def chat(message: str, history_str: str) -> Generator[str, None, None]:
-    """
-    API endpoint wrapped in Gradio's serialized concurrency queue, supporting spaces.GPU.
-    """
-    for chunk in run_inference(message, history_str):
-        yield chunk
-
-# Launch the unified server
 if __name__ == "__main__":
-    app.launch()
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        show_api=False,
+        share=False,
+    )