Update app.py

app.py

@@ -22,7 +22,6 @@ def install_packages():
         "accelerate>=0.27.0",
         "edge-tts",
         "sentencepiece",
-        "bitsandbytes",
     ]
     for pkg in packages:
         subprocess.run([sys.executable, "-m", "pip", "install", pkg, "-q"], check=False)
@@ -30,39 +29,39 @@ def install_packages():
 install_packages()
 
 import torch
-from transformers import AutoTokenizer, AutoModelForCausalLM, TextIteratorStreamer
+from transformers import AutoTokenizer, AutoModelForCausalLM
 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"
+TTS_VOICE_FALLBACK = "en-US-AriaNeural"
 
 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"},
+    "happy":      {"blinking": True,  "icon": "😊"},
+    "sad":        {"blinking": True,  "icon": "😢"},
+    "angry":      {"blinking": False, "icon": "😠"},
+    "surprised":  {"blinking": False, "icon": "😲"},
+    "fearful":    {"blinking": True,  "icon": "😨"},
+    "disgusted":  {"blinking": False, "icon": "🤢"},
+    "neutral":    {"blinking": True,  "icon": "😐"},
+    "excited":    {"blinking": True,  "icon": "🤩"},
+    "confused":   {"blinking": True,  "icon": "😕"},
+    "thinking":   {"blinking": True,  "icon": "🤔"},
+    "laughing":   {"blinking": False, "icon": "😄"},
+    "crying":     {"blinking": False, "icon": "😭"},
+    "love":       {"blinking": True,  "icon": "🥰"},
+    "shy":        {"blinking": True,  "icon": "😊"},
+    "bored":      {"blinking": True,  "icon": "😑"},
+    "sleepy":     {"blinking": False, "icon": "😴"},
+    "determined": {"blinking": True,  "icon": "💪"},
+    "proud":      {"blinking": True,  "icon": "🎉"},
+    "embarrassed":{"blinking": True,  "icon": "😳"},
+    "grateful":   {"blinking": True,  "icon": "🙏"},
+    "playful":    {"blinking": True,  "icon": "😜"},
+    "serious":    {"blinking": True,  "icon": "😤"},
 }
 
 # ── Extract VRMA list ─────────────────────────────────────────────────────────
@@ -98,8 +97,11 @@ def load_model():
         model.eval()
         print("Model loaded!")
 
-# ── AI inference ──────────────────────────────────────────────────────────────
-SYSTEM_PROMPT = """You are Ani, a helpful and expressive AI anime companion.
+# ── System prompt ─────────────────────────────────────────────────────────────
+def build_system_prompt():
+    emotions_str = ", ".join(EMOTIONS_MAP.keys())
+    anims_str = ", ".join(VRMA_LIST[:40]) if VRMA_LIST else "null"
+    return f"""You are Ani, a helpful and expressive AI anime companion.
 Respond ONLY with valid JSON in this exact format:
 {{
   "response": "your conversational reply here",
@@ -108,25 +110,19 @@ Respond ONLY with valid JSON in this exact format:
   "intensity": 0.8
 }}
 
-Available emotions: {emotions}
-Available animations: {animations}
+Available emotions: {emotions_str}
+Available animations: {anims_str}
 
-Choose the most fitting emotion and animation based on context.
-Keep responses friendly, natural, and concise (1-3 sentences)."""
+Choose the most fitting emotion and animation. Keep responses friendly and concise (1-3 sentences)."""
 
+# ── AI inference ──────────────────────────────────────────────────────────────
 @spaces.GPU(duration=60)
 def generate_response(user_message: str, chat_history: list) -> dict:
     load_model()
-    
-    emotions_str = ", ".join(EMOTIONS_MAP.keys())
-    animations_str = ", ".join(VRMA_LIST[:30]) if VRMA_LIST else "null"
-    
-    system = SYSTEM_PROMPT.format(
-        emotions=emotions_str,
-        animations=animations_str
-    )
-    
+
+    system = build_system_prompt()
     messages = [{"role": "system", "content": system}]
+
     for human, assistant in chat_history[-4:]:
         if human:
             messages.append({"role": "user", "content": human})
@@ -134,13 +130,14 @@ def generate_response(user_message: str, chat_history: list) -> dict:
             try:
                 parsed = json.loads(assistant)
                 messages.append({"role": "assistant", "content": parsed.get("response", assistant)})
-            except:
+            except Exception:
                 messages.append({"role": "assistant", "content": assistant})
+
     messages.append({"role": "user", "content": user_message})
-    
+
     text = tokenizer.apply_chat_template(messages, tokenize=False, add_generation_prompt=True)
     inputs = tokenizer(text, return_tensors="pt").to(model.device)
-    
+
     with torch.no_grad():
         outputs = model.generate(
             **inputs,
@@ -150,11 +147,10 @@ def generate_response(user_message: str, chat_history: list) -> dict:
             do_sample=True,
             pad_token_id=tokenizer.eos_token_id,
         )
-    
+
     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:
@@ -166,13 +162,12 @@ def generate_response(user_message: str, chat_history: list) -> dict:
             "response": raw if raw else "Hello! How can I help you?",
             "emotion": "neutral",
             "animation": None,
-            "intensity": 0.7
+            "intensity": 0.7,
         }
-    
-    # Validate
+
     if result.get("emotion") not in EMOTIONS_MAP:
         result["emotion"] = "neutral"
-    
+
     return result
 
 # ── TTS ───────────────────────────────────────────────────────────────────────
@@ -180,16 +175,19 @@ 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:
+def run_tts(text: str):
     tmp = tempfile.NamedTemporaryFile(suffix=".mp3", delete=False)
     tmp.close()
-    for voice in [TTS_VOICE_PRIMARY, TTS_VOICE]:
+    for voice in [TTS_VOICE_PRIMARY, TTS_VOICE_FALLBACK]:
         try:
             asyncio.run(_tts_async(text, voice, tmp.name))
-            if os.path.getsize(tmp.name) > 0:
+            if os.path.exists(tmp.name) and os.path.getsize(tmp.name) > 0:
                 with open(tmp.name, "rb") as f:
                     audio_b64 = base64.b64encode(f.read()).decode()
-                os.unlink(tmp.name)
+                try:
+                    os.unlink(tmp.name)
+                except Exception:
+                    pass
                 return audio_b64
         except Exception as e:
             print(f"TTS failed with {voice}: {e}")
@@ -200,20 +198,18 @@ 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
+    return ""
 
 def get_vrma_base64(vrma_name: str):
-    if not os.path.exists(ANIM_ZIP):
-        return None
+    if not vrma_name or not os.path.exists(ANIM_ZIP):
+        return ""
     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
+            if name == vrma_name or name.endswith("/" + vrma_name) or os.path.basename(name) == vrma_name:
+                return base64.b64encode(z.read(name)).decode()
+    return ""
 
 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)
@@ -223,1467 +219,988 @@ def get_idle_animation():
         name = VRMA_LIST[0]
         b64 = get_vrma_base64(name)
         return b64, name
-    return None, None
+    return "", ""
 
-VRM_B64 = get_vrm_base64()
+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):
+def process_chat(user_message: str, history: list):
     if not user_message.strip():
-        return chat_history, state, None, "{}"
+        return history, "{}", None
 
-    # Generate AI response
     try:
-        result = generate_response(user_message, chat_history)
+        result = generate_response(user_message, history)
     except Exception as e:
         result = {
-            "response": f"Sorry, I encountered an error: {str(e)[:100]}",
+            "response": f"Sorry, I encountered an error. Please try again.",
             "emotion": "sad",
             "animation": None,
-            "intensity": 0.5
+            "intensity": 0.5,
         }
 
     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)
+    emotion       = result.get("emotion", "neutral")
+    animation     = result.get("animation")
+    intensity     = result.get("intensity", 0.7)
 
-    # Animation data
-    anim_b64 = None
-    if animation:
-        anim_b64 = get_vrma_base64(animation)
+    audio_b64  = run_tts(response_text) or ""
+    anim_b64   = get_vrma_base64(animation) if animation else ""
+    blink_flag = EMOTIONS_MAP.get(emotion, EMOTIONS_MAP["neutral"])["blinking"]
 
-    # Build update payload
-    emotion_data = EMOTIONS_MAP.get(emotion, EMOTIONS_MAP["neutral"])
     payload = json.dumps({
-        "type": "chat_response",
-        "emotion": emotion,
-        "blinking": emotion_data["blinking"],
+        "type":          "chat_response",
+        "response":      response_text,
+        "emotion":       emotion,
+        "blinking":      blink_flag,
         "animation_b64": anim_b64,
-        "animation_name": animation,
-        "audio_b64": audio_b64,
-        "intensity": intensity,
-        "response": response_text,
+        "animation_name":animation,
+        "audio_b64":     audio_b64,
+        "intensity":     intensity,
     })
 
-    new_history = chat_history + [[user_message, response_text]]
-    return new_history, state, audio_b64, payload
+    new_history = history + [[user_message, json.dumps(result)]]
+    return new_history, payload, audio_b64 or None
 
-
-# ── Gradio UI ─────────────────────────────────────────────────────────────────
-CSS = """
-/* ── Reset & base ── */
+# ── CSS ───────────────────────────────────────────────────────────────────────
+APP_CSS = """
+/* ── Reset ── */
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
-body, .gradio-container {
+html, body { width: 100%; height: 100%; overflow: hidden; }
+
+.gradio-container {
     background: #0a0a0f !important;
-    font-family: 'Segoe UI', system-ui, sans-serif;
-    color: #e8e8f0;
-    overflow: hidden;
-    height: 100vh;
-    width: 100vw;
+    font-family: 'Segoe UI', system-ui, sans-serif !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    max-width: 100% !important;
+    width: 100vw !important;
+    height: 100vh !important;
+    overflow: hidden !important;
 }
 
-/* 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; }
+footer { display: none !important; }
+.built-with { display: none !important; }
 
-/* ── Layout ── */
+/* Hide all default gradio chrome we don't need */
+#hidden-controls { position: fixed; bottom: -9999px; left: -9999px; opacity: 0; pointer-events: none; }
+
+/* ── Root 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;
+    background: #0a0a0f;
 }
 
-/* ── VRM Canvas Side ── */
+/* ── VRM side ── */
 #vrm-side {
     position: relative;
-    background: linear-gradient(135deg, #0d0d1a 0%, #0a0a14 50%, #0d0d1a 100%);
+    background: linear-gradient(160deg, #0d0d1a 0%, #080810 60%, #0d0d1a 100%);
     overflow: hidden;
 }
 
 #vrm-side::before {
     content: '';
-    position: absolute;
-    inset: 0;
+    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%);
+        radial-gradient(ellipse 70% 50% at 50% 110%, rgba(99,102,241,0.14) 0%, transparent 70%),
+        radial-gradient(ellipse 40% 30% at 15% 85%, rgba(139,92,246,0.09) 0%, transparent 60%);
     pointer-events: none;
     z-index: 1;
 }
 
 #vrm-canvas-wrap {
-    position: absolute;
-    inset: 0;
-    z-index: 2;
+    position: absolute; inset: 0; z-index: 2;
 }
-
 #vrm-canvas-wrap canvas {
     width: 100% !important;
     height: 100% !important;
     display: block;
 }
 
-/* Ambient particles */
+/* Particles */
 .particle {
     position: absolute;
     border-radius: 50%;
     pointer-events: none;
-    animation: float-particle linear infinite;
+    animation: float-up 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; }
+@keyframes float-up {
+    0%   { transform: translateY(110vh) scale(0); opacity: 0; }
+    8%   { opacity: 1; }
+    92%  { opacity: 0.5; }
+    100% { transform: translateY(-10vh) scale(1.2); opacity: 0; }
 }
 
-/* ── Status bar ── */
+/* Status bar */
 #status-bar {
-    position: absolute;
-    top: 20px; left: 20px;
-    display: flex; align-items: center; gap: 10px;
+    position: absolute; top: 18px; left: 18px;
+    display: flex; align-items: center; gap: 8px;
     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;
+    background: rgba(8,8,18,0.65);
+    backdrop-filter: blur(14px);
+    border: 1px solid rgba(255,255,255,0.07);
+    border-radius: 20px;
+    padding: 7px 14px;
 }
-
 #status-dot {
-    width: 8px; height: 8px;
+    width: 7px; height: 7px;
     border-radius: 50%;
     background: #4ade80;
     box-shadow: 0 0 8px #4ade80;
-    animation: pulse-dot 2s ease-in-out infinite;
+    animation: dot-pulse 2.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); }
+@keyframes dot-pulse {
+    0%,100% { box-shadow: 0 0 6px #4ade80; }
+    50%     { box-shadow: 0 0 14px #4ade80, 0 0 22px rgba(74,222,128,0.4); }
 }
+#status-text { font-size: 11.5px; color: rgba(255,255,255,0.65); letter-spacing: 0.4px; }
 
-#status-text {
-    font-size: 12px;
-    color: rgba(255,255,255,0.7);
-    letter-spacing: 0.5px;
-}
-
-/* ── Emotion badge ── */
+/* Emotion badge */
 #emotion-badge {
-    position: absolute;
-    bottom: 24px; left: 24px;
+    position: absolute; bottom: 22px; left: 22px;
     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;
+    background: rgba(8,8,18,0.7);
+    backdrop-filter: blur(14px);
+    border: 1px solid rgba(99,102,241,0.28);
+    border-radius: 14px;
+    padding: 9px 16px;
+    display: flex; align-items: center; gap: 9px;
     transition: all 0.4s ease;
 }
+#emotion-icon  { font-size: 20px; transition: all 0.3s; }
+#emotion-label { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.88); text-transform: capitalize; letter-spacing: 0.4px; }
 
-#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;
+/* Audio visualizer */
+#audio-viz {
+    position: absolute; bottom: 22px; right: 22px;
     z-index: 10;
     display: flex; align-items: center; gap: 3px;
-    height: 40px;
+    height: 36px;
     opacity: 0;
     transition: opacity 0.3s;
 }
-#audio-visualizer.active { opacity: 1; }
-.wave-bar {
+#audio-viz.active { opacity: 1; }
+.wbar {
     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); }
+    transform-origin: bottom;
+    animation: wbar-anim ease-in-out infinite alternate;
 }
+@keyframes wbar-anim { from { transform: scaleY(0.15); } to { transform: scaleY(1); } }
 
-/* ── Chat Side ── */
+/* ── 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;
+    background: rgba(7,7,15,0.97);
+    border-left: 1px solid rgba(255,255,255,0.055);
     overflow: hidden;
+    position: relative;
 }
-
-/* 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;
+    top: -50px; left: 50%; transform: translateX(-50%);
+    width: 180px; height: 100px;
+    background: radial-gradient(ellipse, rgba(99,102,241,0.28) 0%, transparent 70%);
+    pointer-events: none; z-index: 0;
 }
 
-/* ── Chat Header ── */
+/* 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);
+    position: relative; z-index: 5;
+    padding: 18px 22px 14px;
+    border-bottom: 1px solid rgba(255,255,255,0.055);
+    background: rgba(10,10,20,0.85);
     flex-shrink: 0;
 }
-
 #chat-title {
-    font-size: 18px;
-    font-weight: 700;
+    font-size: 17px; 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;
+    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+    background-clip: text; letter-spacing: 0.5px;
 }
-
+#chat-subtitle { font-size: 10.5px; color: rgba(255,255,255,0.38); margin-top: 3px; letter-spacing: 0.4px; }
 #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;
+    display: inline-flex; align-items: center; gap: 5px;
+    margin-top: 7px;
+    background: rgba(99,102,241,0.13);
+    border: 1px solid rgba(99,102,241,0.28);
+    border-radius: 18px; padding: 2px 9px;
+    font-size: 9.5px; color: #a78bfa;
 }
 
-/* ── Messages ── */
+/* Messages */
 #messages-wrap {
     flex: 1;
     overflow-y: auto;
-    padding: 20px 16px;
-    display: flex;
-    flex-direction: column;
-    gap: 14px;
-    position: relative;
-    z-index: 2;
+    padding: 18px 14px;
+    display: flex; flex-direction: column; gap: 13px;
+    position: relative; z-index: 2;
     scroll-behavior: smooth;
 }
+#messages-wrap::-webkit-scrollbar { width: 3px; }
+#messages-wrap::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.28); border-radius: 2px; }
 
-#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-row { display: flex; gap: 9px; animation: msg-slide 0.28s ease; }
+.msg-row.user-row { flex-direction: row-reverse; }
+@keyframes msg-slide { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
 
 .msg-avatar {
-    width: 30px; height: 30px;
-    border-radius: 50%;
-    flex-shrink: 0;
+    width: 28px; height: 28px; border-radius: 50%;
     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);
+    font-size: 13px; flex-shrink: 0;
 }
+.msg-avatar.ai-av   { background: linear-gradient(135deg,#6366f1,#a78bfa); box-shadow: 0 0 10px rgba(99,102,241,0.4); }
+.msg-avatar.user-av { background: linear-gradient(135deg,#374151,#4b5563); }
 
-.msg-avatar.user-av {
-    background: linear-gradient(135deg, #374151, #4b5563);
-}
+.msg-wrap { display: flex; flex-direction: column; max-width: 83%; }
+.user-row .msg-wrap { align-items: flex-end; }
 
 .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 ── */
+    padding: 9px 13px;
+    font-size: 13px; line-height: 1.6;
+    word-break: break-word;
+}
+.msg-bubble.ai-bubble {
+    background: rgba(99,102,241,0.11);
+    border: 1px solid rgba(99,102,241,0.18);
+    border-radius: 3px 14px 14px 14px;
+    color: rgba(255,255,255,0.88);
+}
+.msg-bubble.user-bubble {
+    background: linear-gradient(135deg,rgba(99,102,241,0.22),rgba(139,92,246,0.18));
+    border: 1px solid rgba(139,92,246,0.22);
+    border-radius: 14px 3px 14px 14px;
+    color: rgba(255,255,255,0.93);
+}
+.msg-time { font-size: 9.5px; color: rgba(255,255,255,0.28); margin-top: 3px; }
+
+/* Typing */
+#typing-row { display: none; gap: 9px; }
+#typing-row.show { display: flex; }
+.tydot {
+    width: 6px; height: 6px; border-radius: 50%; background: #6366f1;
+    animation: ty-bounce 1.1s ease-in-out infinite;
+}
+.tydot:nth-child(2){animation-delay:.18s;} .tydot:nth-child(3){animation-delay:.36s;}
+@keyframes ty-bounce { 0%,60%,100%{transform:translateY(0);opacity:.4;} 30%{transform:translateY(-5px);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);
+    position: relative; z-index: 5;
+    padding: 14px;
+    border-top: 1px solid rgba(255,255,255,0.055);
+    background: rgba(8,8,18,0.92);
     flex-shrink: 0;
 }
-
-#input-row {
-    display: flex;
-    gap: 10px;
-    align-items: flex-end;
-}
-
-#user-input-wrap {
-    flex: 1;
-    position: relative;
-}
+#input-row { display: flex; gap: 9px; align-items: flex-end; }
 
 #user-input {
-    width: 100%;
+    flex: 1;
     background: rgba(255,255,255,0.05);
-    border: 1px solid rgba(255,255,255,0.1);
-    border-radius: 20px;
-    padding: 12px 18px;
+    border: 1px solid rgba(255,255,255,0.09);
+    border-radius: 18px;
+    padding: 11px 16px;
     color: rgba(255,255,255,0.9);
-    font-size: 14px;
-    resize: none;
-    outline: none;
-    font-family: inherit;
-    line-height: 1.5;
-    max-height: 120px;
+    font-size: 13.5px; font-family: inherit;
+    resize: none; outline: none;
+    line-height: 1.5; min-height: 44px; max-height: 110px;
     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);
+    border-color: rgba(99,102,241,0.48);
+    box-shadow: 0 0 0 3px rgba(99,102,241,0.09);
 }
-
-#user-input::placeholder { color: rgba(255,255,255,0.3); }
+#user-input::placeholder { color: rgba(255,255,255,0.28); }
 
 #send-btn {
-    width: 46px; height: 46px;
-    border-radius: 50%;
-    border: none;
-    background: linear-gradient(135deg, #6366f1, #8b5cf6);
-    color: white;
-    font-size: 18px;
-    cursor: pointer;
+    width: 44px; height: 44px; border-radius: 50%;
+    border: none; cursor: pointer; flex-shrink: 0;
+    background: linear-gradient(135deg,#6366f1,#8b5cf6);
+    color: #fff; font-size: 16px;
     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;
+    box-shadow: 0 3px 10px rgba(99,102,241,0.4);
 }
+#send-btn:hover:not(:disabled) { transform: scale(1.07); box-shadow: 0 5px 18px rgba(99,102,241,0.6); }
+#send-btn:active:not(:disabled){ transform: scale(0.94); }
+#send-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; }
 
 /* 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;
+    position: fixed; inset: 0;
+    background: rgba(7,7,14,0.97);
+    z-index: 9999;
+    display: flex; flex-direction: column;
+    align-items: center; justify-content: center; gap: 20px;
+    transition: opacity 0.9s ease;
+}
+#loading-overlay.gone { opacity: 0; pointer-events: none; }
+
+.ld-logo  { font-size: 60px; animation: ld-pulse 2s ease-in-out infinite; }
+@keyframes ld-pulse {
+    0%,100%{ transform:scale(1);   filter:drop-shadow(0 0 18px rgba(99,102,241,0.6)); }
+    50%    { transform:scale(1.06);filter:drop-shadow(0 0 34px rgba(167,139,250,0.8)); }
+}
+.ld-title {
+    font-size: 26px; font-weight: 700;
+    background: linear-gradient(135deg,#a78bfa,#6366f1,#60a5fa);
+    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+    background-clip: text;
 }
-
-.loading-logo {
-    font-size: 64px;
-    animation: logo-pulse 2s ease-in-out infinite;
+.ld-bar-wrap { width: 180px; height: 2px; background: rgba(255,255,255,0.09); border-radius: 1px; overflow: hidden; }
+.ld-bar {
+    height: 100%;
+    background: linear-gradient(90deg,#6366f1,#a78bfa,#60a5fa);
+    border-radius: 1px;
+    animation: ld-sweep 1.7s 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)); }
+@keyframes ld-sweep {
+    0%  { width:0%;  margin-left:0%;   }
+    50% { width:55%; margin-left:22%;  }
+    100%{ width:0%;  margin-left:100%; }
 }
+.ld-status { font-size: 12px; color: rgba(255,255,255,0.45); letter-spacing: 0.4px; }
 
-.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;
+/* Mobile */
+@media(max-width:700px){
+    #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.055); }
 }
+"""
 
-.loading-bar-wrap {
-    width: 200px;
-    height: 3px;
-    background: rgba(255,255,255,0.1);
-    border-radius: 2px;
-    overflow: hidden;
-}
+# ── Three.js / VRM viewer HTML ────────────────────────────────────────────────
+VRM_VIEWER_HTML = f"""
+<div id="loading-overlay">
+  <div class="ld-logo">🌸</div>
+  <div class="ld-title">Ani AI Companion</div>
+  <div class="ld-bar-wrap"><div class="ld-bar"></div></div>
+  <div class="ld-status" id="ld-status">Initializing…</div>
+</div>
 
-.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%; }
-}
+<div id="ani-root">
 
-.loading-status {
-    font-size: 13px;
-    color: rgba(255,255,255,0.5);
-    letter-spacing: 0.5px;
-}
+  <!-- VRM viewer -->
+  <div id="vrm-side">
+    <div id="vrm-canvas-wrap"></div>
+    <div id="status-bar">
+      <div id="status-dot"></div>
+      <span id="status-text">Loading…</span>
+    </div>
+    <div id="emotion-badge">
+      <span id="emotion-icon">😐</span>
+      <span id="emotion-label">neutral</span>
+    </div>
+    <div id="audio-viz"></div>
+  </div>
 
-/* Gradio hidden elements */
-#hidden-output, #hidden-payload { display: none !important; }
-.gradio-chatbot { display: none !important; }
+  <!-- Chat panel -->
+  <div id="chat-side">
+    <div id="chat-header">
+      <div id="chat-title">✨ Ani</div>
+      <div id="chat-subtitle">AI Anime Companion</div>
+      <div id="model-tag">🤖 Gemma 2B · ZeroGPU</div>
+    </div>
 
-/* Audio player hidden */
-#hidden-audio { display: none !important; }
+    <div id="messages-wrap">
+      <div class="msg-row">
+        <div class="msg-avatar ai-av">🌸</div>
+        <div class="msg-wrap">
+          <div class="msg-bubble ai-bubble">Hello! I'm Ani, your AI companion ✨ How can I help you today?</div>
+          <div class="msg-time">just now</div>
+        </div>
+      </div>
+    </div>
 
-/* 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); }
-}
+    <div id="typing-row">
+      <div class="msg-avatar ai-av">🌸</div>
+      <div class="msg-wrap">
+        <div class="msg-bubble ai-bubble" style="display:flex;align-items:center;gap:6px;padding:10px 14px;">
+          <div class="tydot"></div><div class="tydot"></div><div class="tydot"></div>
+        </div>
+      </div>
+    </div>
 
-/* 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); }
-}
-"""
+    <div id="input-area">
+      <div id="input-row">
+        <textarea id="user-input" placeholder="Talk to Ani…" rows="1"></textarea>
+        <button id="send-btn" title="Send">➤</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Hidden data stores -->
+<div id="vrm-b64"       style="display:none">{VRM_B64}</div>
+<div id="idle-anim-b64" style="display:none">{IDLE_ANIM_B64}</div>
 
-# ── 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"
-  }
-}
+{{
+  "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';
+import {{ GLTFLoader }}      from 'three/addons/loaders/GLTFLoader.js';
+import {{ VRMLoaderPlugin, VRMUtils }} from '@pixiv/three-vrm';
+import {{ VRMAnimationLoaderPlugin, createVRMAnimationClip }} from '@pixiv/three-vrm-animation';
 
-// ── Globals ──────────────────────────────────────────────────────────────────
+// ─── 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() {
+let vrm = null;
+let mixer = null;
+let idleB64 = '';
+let autoBlinkOn  = true;
+let isBlinking   = false;
+let blinkTimer   = null;
+let lipInterval  = null;
+let audioCtx     = null;
+let currentEmo   = 'neutral';
+
+const EMO_EXPR = {{
+    happy:      {{n:'happy',    w:1.0}},
+    sad:        {{n:'sad',      w:1.0}},
+    angry:      {{n:'angry',    w:1.0}},
+    surprised:  {{n:'surprised',w:1.0}},
+    fearful:    {{n:'sad',      w:0.8}},
+    disgusted:  {{n:'angry',    w:0.7}},
+    neutral:    {{n:'neutral',  w:0.0}},
+    excited:    {{n:'happy',    w:1.0}},
+    confused:   {{n:'surprised',w:0.6}},
+    thinking:   {{n:'neutral',  w:0.0}},
+    laughing:   {{n:'happy',    w:1.0}},
+    crying:     {{n:'sad',      w:1.0}},
+    love:       {{n:'happy',    w:0.9}},
+    shy:        {{n:'happy',    w:0.5}},
+    bored:      {{n:'neutral',  w:0.0}},
+    sleepy:     {{n:'relaxed',  w:0.8}},
+    determined: {{n:'angry',    w:0.4}},
+    proud:      {{n:'happy',    w:0.8}},
+    embarrassed:{{n:'sad',      w:0.5}},
+    grateful:   {{n:'happy',    w:0.7}},
+    playful:    {{n:'happy',    w:0.9}},
+    serious:    {{n:'neutral',  w:0.0}},
+}};
+
+const NO_BLINK = new Set(['angry','surprised','laughing','crying','sleepy','disgusted']);
+
+const EMO_ICON = {{
+    happy:'😊',sad:'😢',angry:'😠',surprised:'😲',fearful:'😨',disgusted:'🤢',
+    neutral:'😐',excited:'🤩',confused:'😕',thinking:'🤔',laughing:'😄',crying:'😭',
+    love:'🥰',shy:'😊',bored:'😑',sleepy:'😴',determined:'💪',proud:'🎉',
+    embarrassed:'😳',grateful:'🙏',playful:'😜',serious:'😤',
+}};
+
+// ─── Three.js setup ──────────────────────────────────────────────────────────
+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 = new THREE.WebGLRenderer({{antialias:true, alpha:true}});
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio,2));
     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);
+    scene.fog = new THREE.Fog(0x0a0a14, 10, 22);
 
-    clock = new THREE.Clock();
+    camera = new THREE.PerspectiveCamera(28, wrap.clientWidth/wrap.clientHeight, 0.1, 100);
+    camera.position.set(0,1.38,3.0);
+    camera.lookAt(0,1.0,0);
 
-    // Resize handler
-    window.addEventListener('resize', () => {
-        if (!wrap) return;
-        camera.aspect = wrap.clientWidth / wrap.clientHeight;
-        camera.updateProjectionMatrix();
-        renderer.setSize(wrap.clientWidth, wrap.clientHeight);
-    });
+    scene.add(new THREE.AmbientLight(0x6366f1, 0.45));
 
-    animate();
-}
+    const key = new THREE.DirectionalLight(0xffffff,1.15);
+    key.position.set(2,3,2); key.castShadow=true; scene.add(key);
 
-// ── 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 fill = new THREE.DirectionalLight(0xa78bfa,0.5);
+    fill.position.set(-2,2,1); scene.add(fill);
 
-    const loader = new GLTFLoader();
-    loader.register(parser => new VRMLoaderPlugin(parser));
-    loader.register(parser => new VRMAnimationLoaderPlugin(parser));
+    const rim = new THREE.DirectionalLight(0x60a5fa,0.4);
+    rim.position.set(0,2,-3); scene.add(rim);
 
-    loader.load(url, (gltf) => {
-        const vrm = gltf.userData.vrm;
-        if (!vrm) { console.error('No VRM found'); return; }
+    const pt = new THREE.PointLight(0x6366f1,0.55,5);
+    pt.position.set(0,0.5,1.5); scene.add(pt);
 
-        VRMUtils.removeUnnecessaryJoints(vrm.scene);
-        VRMUtils.removeUnnecessaryVertices(vrm.scene);
+    const floor = new THREE.Mesh(
+        new THREE.PlaneGeometry(10,10),
+        new THREE.MeshStandardMaterial({{color:0x0d0d1a, roughness:0.85, metalness:0.1, transparent:true, opacity:0.55}})
+    );
+    floor.rotation.x=-Math.PI/2; floor.receiveShadow=true; scene.add(floor);
 
-        if (currentVRM) {
-            scene.remove(currentVRM.scene);
-            VRMUtils.deepDispose(currentVRM.scene);
-        }
+    const grid = new THREE.GridHelper(8,20,0x6366f1,0x1a1a2e);
+    grid.material.opacity=0.13; grid.material.transparent=true; scene.add(grid);
 
-        currentVRM = vrm;
-        scene.add(vrm.scene);
+    clock = new THREE.Clock();
+    window.addEventListener('resize',()=>{{
+        camera.aspect=wrap.clientWidth/wrap.clientHeight;
+        camera.updateProjectionMatrix();
+        renderer.setSize(wrap.clientWidth,wrap.clientHeight);
+    }});
+    animate();
+}}
 
-        // Face camera
-        vrm.scene.rotation.y = Math.PI;
+function animate(){{
+    requestAnimationFrame(animate);
+    const dt = clock.getDelta();
+    if(mixer) mixer.update(dt);
+    if(vrm){{
+        const t = clock.getElapsedTime();
+        try{{
+            const spine = vrm.humanoid.getNormalizedBoneNode('spine');
+            if(spine){{ spine.rotation.z=Math.sin(t*.5)*.01; spine.rotation.x=Math.sin(t*.3)*.008; }}
+            const head = vrm.humanoid.getNormalizedBoneNode('head');
+            if(head){{ head.rotation.y=Math.sin(t*.4)*.03; head.rotation.x=Math.sin(t*.25)*.014; }}
+        }}catch(e){{}}
+        vrm.update(dt);
+    }}
+    renderer.render(scene,camera);
+}}
+
+// ─── Load VRM ────────────────────────────────────────────────────────────────
+function b64ToBlob(b64, mime){{
+    const bytes = Uint8Array.from(atob(b64), c=>c.charCodeAt(0));
+    return new Blob([bytes],{{type:mime}});
+}}
 
-        // Center model
+function loadVRM(b64){{
+    const url = URL.createObjectURL(b64ToBlob(b64,'application/octet-stream'));
+    const loader = new GLTFLoader();
+    loader.register(p=>new VRMLoaderPlugin(p));
+    loader.register(p=>new VRMAnimationLoaderPlugin(p));
+    loader.load(url, gltf=>{{
+        const v = gltf.userData.vrm;
+        if(!v){{ console.error('No VRM'); return; }}
+        VRMUtils.removeUnnecessaryJoints(v.scene);
+        VRMUtils.removeUnnecessaryVertices(v.scene);
+        if(vrm){{ scene.remove(vrm.scene); VRMUtils.deepDispose(vrm.scene); }}
+        vrm = v;
+        scene.add(vrm.scene);
+        vrm.scene.rotation.y = Math.PI;
         const box = new THREE.Box3().setFromObject(vrm.scene);
-        const center = box.getCenter(new THREE.Vector3());
-        vrm.scene.position.sub(center);
+        const c = box.getCenter(new THREE.Vector3());
+        vrm.scene.position.sub(c);
         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);
+        hideLoader();
+        startBlink();
+        // play idle
+        if(idleB64) loadVRMA(idleB64, true);
+    }}, undefined, e=>{{
+        console.error(e);
         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);
+        hideLoader();
+    }});
+}}
 
+function loadVRMA(b64, loop=true, onDone=null){{
+    if(!vrm||!b64) return;
+    const url = URL.createObjectURL(b64ToBlob(b64,'application/octet-stream'));
     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();
-        }
-        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);
-    });
-}
+    loader.register(p=>new VRMAnimationLoaderPlugin(p));
+    loader.load(url, gltf=>{{
+        const anims = gltf.userData.vrmAnimations;
+        if(!anims||!anims.length){{ URL.revokeObjectURL(url); return; }}
+        const clip = createVRMAnimationClip(anims[0], vrm);
+        if(mixer) mixer.stopAllAction();
+        mixer = new THREE.AnimationMixer(vrm.scene);
+        const action = mixer.clipAction(clip);
+        action.setLoop(loop?THREE.LoopRepeat:THREE.LoopOnce, Infinity);
+        action.clampWhenFinished = !loop;
+        action.play();
+        if(onDone&&!loop){{
+            mixer.addEventListener('finished',()=>{{ onDone(); URL.revokeObjectURL(url); }});
+        }}else{{ URL.revokeObjectURL(url); }}
+    }}, undefined, ()=>URL.revokeObjectURL(url));
+}}
 
-// ── Auto Blink ────────────────────────────────────────────────────────────────
-function startAutoBlink() {
-    if (blinkInterval) clearInterval(blinkInterval);
-    blinkInterval = setInterval(() => {
-        if (!autoBlinkEnabled || !currentVRM || isBlinking) return;
+// ─── Blink ───────────────────────────────────────────────────────────────────
+function startBlink(){{
+    if(blinkTimer) clearInterval(blinkTimer);
+    blinkTimer = setInterval(()=>{{
+        if(!autoBlinkOn||!vrm||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;
-}
+    }}, 2200+Math.random()*2200);
+}}
 
-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;
-}
+function doBlink(){{
+    if(!vrm||isBlinking) return;
+    const em = vrm.expressionManager; if(!em) return;
+    isBlinking=true;
+    let t=0; const step=16, dur=130;
+    const id=setInterval(()=>{{
+        t+=step;
+        const w=Math.sin((t/dur)*Math.PI);
+        try{{em.setValue('blink',Math.max(0,w));}}catch(e){{}}
+        if(t>=dur){{
+            clearInterval(id);
+            try{{em.setValue('blink',0);}}catch(e){{}}
+            isBlinking=false;
+        }}
+    }},step);
+}}
 
-// ── Lip Sync ──────────────────────────────────────────────────────────────────
-function startLipSync(audioBuffer) {
-    if (!currentVRM) return;
-    const expr = currentVRM.expressionManager;
-    if (!expr) return;
+// ─── Emotion ──────────────────────────────────────────────────────────────────
+function applyEmotion(name, intensity=1.0){{
+    if(!vrm) return;
+    const em=vrm.expressionManager; if(!em) return;
+    ['happy','sad','angry','surprised','relaxed','neutral'].forEach(e=>{{try{{em.setValue(e,0);}}catch(x){{}}}});
+    const m=EMO_EXPR[name]||EMO_EXPR.neutral;
+    if(m.w>0)try{{em.setValue(m.n, m.w*intensity);}}catch(e){{}}
+    autoBlinkOn = !NO_BLINK.has(name);
+    currentEmo = name;
+    const icon=document.getElementById('emotion-icon');
+    const lbl =document.getElementById('emotion-label');
+    if(icon) icon.textContent = EMO_ICON[name]||'😐';
+    if(lbl)  lbl.textContent  = name;
+}}
 
+// ─── Lip sync ────────────────────────────────────────────────────────────────
+function startLipSync(arrayBuf){{
+    if(!vrm) return;
+    const em=vrm.expressionManager; if(!em) return;
     stopLipSync();
+    if(!audioCtx) audioCtx=new (window.AudioContext||window.webkitAudioContext)();
+    audioCtx.decodeAudioData(arrayBuf, decoded=>{{
+        const src = audioCtx.createBufferSource();
+        src.buffer=decoded;
+        const analyser=audioCtx.createAnalyser(); analyser.fftSize=256;
+        src.connect(analyser); analyser.connect(audioCtx.destination);
+        src.start(0);
+        showViz(true);
+        const data=new Uint8Array(analyser.frequencyBinCount);
+        lipInterval=setInterval(()=>{{
+            analyser.getByteFrequencyData(data);
+            const voice=data.slice(2,22);
+            const avg=voice.reduce((a,b)=>a+b,0)/voice.length;
+            const m=Math.min(1.0,avg/75);
+            try{{em.setValue('aa',m*.85);}}catch(e){{}}
+        }},33);
+        src.addEventListener('ended',()=>{{stopLipSync(); autoBlinkOn=!NO_BLINK.has(currentEmo);}});
+    }}, ()=>fallbackLip());
+}}
 
-    // 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 fallbackLip(){{
+    if(!vrm) return;
+    const em=vrm.expressionManager; if(!em) return;
+    showViz(true); let t=0;
+    lipInterval=setInterval(()=>{{
+        t+=.1;
+        const m=.25+.45*Math.abs(Math.sin(t*7))*Math.abs(Math.sin(t*2.7));
+        try{{em.setValue('aa',m);}}catch(e){{}}
+    }},50);
+}}
 
-function stopLipSync() {
-    if (lipSyncInterval) { clearInterval(lipSyncInterval); lipSyncInterval = null; }
-    if (audioSource) { try { audioSource.stop(); } catch(e){} audioSource = null; }
+function stopLipSync(){{
+    if(lipInterval){{clearInterval(lipInterval);lipInterval=null;}}
+    if(vrm){{const em=vrm.expressionManager;if(em){{try{{em.setValue('aa',0);}}catch(e){{}}}}}}
+    showViz(false);
+}}
 
-    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');
-}
+function showViz(on){{
+    const el=document.getElementById('audio-viz');
+    if(el) on?el.classList.add('active'):el.classList.remove('active');
+}}
 
-// ── Animate loop ──────────────────────────────────────────────────────────────
-function animate() {
-    requestAnimationFrame(animate);
-    const delta = clock.getDelta();
+// ─── Payload handler ─────────────────────────────────────────────────────────
+window._handlePayload = function(payload){{
+    if(!payload||payload==='{{}}') return;
+    let d; try{{d=JSON.parse(payload);}}catch(e){{return;}}
+    if(!d||d.type!=='chat_response') return;
 
-    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);
-    }
+    if(d.emotion) applyEmotion(d.emotion, d.intensity||0.8);
 
-    renderer.render(scene, camera);
-}
+    if(d.animation_b64&&d.animation_b64.length>10){{
+        loadVRMA(d.animation_b64, false, ()=>{{
+            if(idleB64) loadVRMA(idleB64,true);
+        }});
+    }}
 
-// ── UI helpers ────────────────────────────────────────────────────────────────
-function setStatus(text) {
-    const el = document.getElementById('status-text');
-    if (el) el.textContent = text;
-}
+    if(d.audio_b64&&d.audio_b64.length>10){{
+        const bin=atob(d.audio_b64);
+        const buf=new Uint8Array(bin.length);
+        for(let i=0;i<bin.length;i++) buf[i]=bin.charCodeAt(i);
+        startLipSync(buf.buffer.slice(0));
+        // Also play via Audio element as backup
+        try{{
+            const au=new Audio('data:audio/mp3;base64,'+d.audio_b64);
+            au.play().catch(()=>{{}});
+        }}catch(e){{}}
+    }}
+}};
+
+// ─── Gradio output watcher ───────────────────────────────────────────────────
+let _lastPayload='';
+function watchOutput(){{
+    setInterval(()=>{{
+        // Try to read from the Gradio textbox with id gradio-payload-out
+        const selectors=[
+            '#gradio-payload-out textarea',
+            '#gradio-payload-out input',
+            'textarea[data-testid="gradio-payload-out"]',
+        ];
+        let val='';
+        for(const s of selectors){{
+            const el=document.querySelector(s);
+            if(el&&el.value){{val=el.value;break;}}
+        }}
+        if(!val){{
+            // Fallback: look for any textarea with JSON payload
+            document.querySelectorAll('textarea').forEach(t=>{{
+                if(t.value&&t.value.includes('chat_response')) val=t.value;
+            }});
+        }}
+        if(val&&val!==_lastPayload){{
+            _lastPayload=val;
+            window._handlePayload(val);
+        }}
+    }},250);
+}}
 
-function hideLoadingOverlay() {
-    const overlay = document.getElementById('loading-overlay');
-    if (overlay) {
-        setTimeout(() => overlay.classList.add('hidden'), 500);
-    }
-}
+// ─── Boot ───────────────────────────────────────────��────────────────────────
+function setStatus(t){{const el=document.getElementById('status-text');if(el)el.textContent=t;}}
+function setLdStatus(t){{const el=document.getElementById('ld-status');if(el)el.textContent=t;}}
+function hideLoader(){{
+    const el=document.getElementById('loading-overlay');
+    if(el)setTimeout(()=>el.classList.add('gone'),600);
+}}
 
-// ── 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);
-    }
-}
+function createParticles(){{
+    const side=document.getElementById('vrm-side'); if(!side) return;
+    const cols=['rgba(99,102,241,','rgba(139,92,246,','rgba(96,165,250,'];
+    for(let i=0;i<14;i++){{
+        const p=document.createElement('div'); p.className='particle';
+        const sz=2+Math.random()*4, col=cols[i%3];
+        p.style.cssText=`width:${{sz}}px;height:${{sz}}px;left:${{Math.random()*100}}%;`+
+            `background:${{col}}${{.3+Math.random()*.4}});`+
+            `box-shadow:0 0 ${{sz*2}}px ${{col}}.6);`+
+            `animation-duration:${{9+Math.random()*13}}s;animation-delay:${{Math.random()*11}}s;`;
+        side.appendChild(p);
+    }}
+}}
 
-// 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);
-}
+function createVizBars(){{
+    const v=document.getElementById('audio-viz'); if(!v) return;
+    for(let i=0;i<9;i++){{
+        const b=document.createElement('div'); b.className='wbar';
+        b.style.height=(14+Math.random()*24)+'px';
+        b.style.animationDelay=(i*.09)+'s';
+        b.style.animationDuration=(.38+Math.random()*.28)+'s';
+        v.appendChild(b);
+    }}
+}}
 
-// ── Boot ──────────────────────────────────────────────────────────────────────
-document.addEventListener('DOMContentLoaded', () => {
+(function boot(){{
     initThree();
-    watchPayload();
     createParticles();
+    createVizBars();
+    setLdStatus('Loading 3D model…');
+
+    // Read stored base64
+    const vrmEl  = document.getElementById('vrm-b64');
+    const animEl = document.getElementById('idle-anim-b64');
+    idleB64 = (animEl&&animEl.textContent.length>100)?animEl.textContent.trim():'';
+
+    if(vrmEl&&vrmEl.textContent.length>100){{
+        loadVRM(vrmEl.textContent.trim());
+    }}else{{
+        setStatus('No VRM file found');
+        hideLoader();
+    }}
 
-    // 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);
-        }
-    }
-});
+    watchOutput();
+}})();
 </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>
-
-<!-- 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>
-
-    <!-- Emotion badge -->
-    <div id="emotion-badge">
-      <span id="emotion-icon">😐</span>
-      <span id="emotion-label">neutral</span>
-    </div>
-
-    <!-- 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="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="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="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>
-
-{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;
+// ─── Chat UI (vanilla JS, no module) ─────────────────────────���───────────────
+(function(){{
+    const wrap   = document.getElementById('messages-wrap');
+    const input  = document.getElementById('user-input');
+    const btn    = document.getElementById('send-btn');
+    const typing = document.getElementById('typing-row');
+
+    function now(){{
+        const d=new Date();
+        return d.getHours().toString().padStart(2,'0')+':'+d.getMinutes().toString().padStart(2,'0');
+    }}
 
-  const time = document.createElement('div');
-  time.className = 'msg-time';
-  time.textContent = getTime();
+    function addMsg(text,role){{
+        const row=document.createElement('div');
+        row.className='msg-row'+(role==='user'?' user-row':'');
 
-  bWrap.appendChild(bubble);
-  bWrap.appendChild(time);
+        const av=document.createElement('div');
+        av.className='msg-avatar '+(role==='user'?'user-av':'ai-av');
+        av.textContent=role==='user'?'👤':'🌸';
 
-  if (role === 'user') {{
-    row.appendChild(bWrap);
-    row.appendChild(avatar);
-  }} else {{
-    row.appendChild(avatar);
-    row.appendChild(bWrap);
-  }}
+        const mw=document.createElement('div'); mw.className='msg-wrap';
+        const b=document.createElement('div');
+        b.className='msg-bubble '+(role==='user'?'user-bubble':'ai-bubble');
+        b.textContent=text;
+        const t=document.createElement('div'); t.className='msg-time'; t.textContent=now();
+        mw.appendChild(b); mw.appendChild(t);
 
-  messagesWrap.appendChild(row);
-  messagesWrap.scrollTop = messagesWrap.scrollHeight;
-}}
-
-function showTyping() {{
-  typingInd.classList.add('visible');
-  messagesWrap.scrollTop = messagesWrap.scrollHeight;
-}}
-function hideTyping() {{
-  typingInd.classList.remove('visible');
-}}
+        if(role==='user'){{row.appendChild(mw);row.appendChild(av);}}
+        else{{row.appendChild(av);row.appendChild(mw);}}
 
-// 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);
-  }}
+        wrap.insertBefore(row, typing);
+        wrap.scrollTop=wrap.scrollHeight;
+    }}
 
-  // 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) {{}}
+    function showTyping(on){{
+        typing.classList.toggle('show',on);
+        wrap.scrollTop=wrap.scrollHeight;
     }}
-  }});
-
-  // 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;
-      }}
+    input.addEventListener('input',()=>{{
+        input.style.height='auto';
+        input.style.height=Math.min(input.scrollHeight,108)+'px';
+    }});
+    input.addEventListener('keydown',e=>{{
+        if(e.key==='Enter'&&!e.shiftKey){{e.preventDefault();send();}}
+    }});
+    btn.addEventListener('click',send);
+
+    function send(){{
+        const txt=input.value.trim();
+        if(!txt||btn.disabled) return;
+        addMsg(txt,'user');
+        input.value=''; input.style.height='auto';
+        btn.disabled=true; showTyping(true);
+
+        // Push to Gradio hidden textbox
+        const gInput = document.querySelector('#gr-hidden-msg textarea')||
+                       document.querySelector('#gr-hidden-msg input');
+        if(gInput){{
+            const nativeSetter=Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype,'value')||
+                               Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,'value');
+            if(nativeSetter&&nativeSetter.set) nativeSetter.set.call(gInput,txt);
+            gInput.dispatchEvent(new Event('input',{{bubbles:true}}));
+        }}
+        setTimeout(()=>{{
+            const sb=document.getElementById('gr-hidden-btn');
+            if(sb) sb.click();
+        }},80);
+
+        // Watch for response via payload
+        let waited=0;
+        const poll=setInterval(()=>{{
+            waited+=300;
+            const sel=[
+                '#gr-payload-out textarea',
+                '#gr-payload-out input',
+            ];
+            let val='';
+            for(const s of sel){{const el=document.querySelector(s);if(el&&el.value){{val=el.value;break;}}}}
+            if(!val)document.querySelectorAll('textarea').forEach(ta=>{{if(ta.value&&ta.value.includes('chat_response'))val=ta.value;}});
+
+            if(val&&val.includes('chat_response')){{
+                try{{
+                    const data=JSON.parse(val);
+                    if(data.response&&data.response!==window._lastResponse){{
+                        window._lastResponse=data.response;
+                        clearInterval(poll);
+                        showTyping(false);
+                        addMsg(data.response,'ai');
+                        btn.disabled=false;
+                    }}
+                }}catch(e){{}}
+            }}
+            if(waited>65000){{clearInterval(poll);showTyping(false);btn.disabled=false;}}
+        }},300);
     }}
-  }}, 300);
-}}
 
-document.addEventListener('DOMContentLoaded', watchGradioOutput);
+    window._chatAddMsg=addMsg;
+}})();
 </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)
+with gr.Blocks(css=APP_CSS, title="Ani AI Companion") as demo:
+
+    chat_history = gr.State([])
+
+    # ── Custom viewer ──
+    gr.HTML(VRM_VIEWER_HTML)
 
     # ── Hidden Gradio controls ──
-    with gr.Group(elem_id="hidden-controls", visible=True):
+    with gr.Group(visible=True, elem_id="hidden-controls"):
         hidden_msg = gr.Textbox(
-            label="",
-            elem_id="hidden-msg-input",
+            value="",
+            label="msg",
+            elem_id="gr-hidden-msg",
             visible=False,
         )
-        hidden_submit = gr.Button(
-            "Send",
-            elem_id="hidden-submit-btn",
+        hidden_btn = gr.Button(
+            "go",
+            elem_id="gr-hidden-btn",
             visible=False,
         )
         hidden_chatbot = gr.Chatbot(
-            label="",
-            elem_id="hidden-chatbot",
+            value=[],
+            label="history",
+            elem_id="gr-hidden-chatbot",
             visible=False,
         )
-        payload_display = gr.Textbox(
-            label="",
-            elem_id="gradio-payload-display",
+        payload_out = gr.Textbox(
+            value="{}",
+            label="payload",
+            elem_id="gr-payload-out",
             visible=False,
         )
-        audio_out = gr.Audio(
-            label="",
-            elem_id="hidden-audio",
-            visible=False,
-            autoplay=True,
-        )
 
-    # ── Event: submit ──
-    def on_submit(message, history, state):
+    # ── Backend ──
+    def on_submit(message: str, history: list):
         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 history, "{}"
 
-        return new_history, new_state, payload, audio_file
+        new_history, payload, _ = process_chat(message, history)
+        return new_history, payload
 
-    hidden_submit.click(
+    hidden_btn.click(
         fn=on_submit,
-        inputs=[hidden_msg, hidden_chatbot, chat_state],
-        outputs=[hidden_chatbot, chat_state, payload_display, audio_out],
-        api_name="chat",
+        inputs=[hidden_msg, chat_history],
+        outputs=[chat_history, payload_out],
     )
 
-    # JS bridge: copy payload_display → payload-output div
-    payload_display.change(
+    # Forward payload to JS
+    payload_out.change(
         fn=None,
-        inputs=[payload_display],
+        inputs=[payload_out],
         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(e) {}
+        js="""(p) => {
+            if(p && p !== '{}') {
+                if(window._handlePayload) window._handlePayload(p);
             }
-        }
-        """,
+        }""",
     )
 
-    # 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);
-            }
-        }
-        """,
+    # Update chatbot display from history
+    chat_history.change(
+        fn=lambda h: h,
+        inputs=[chat_history],
+        outputs=[hidden_chatbot],
     )
 
 if __name__ == "__main__":
     demo.launch(
         server_name="0.0.0.0",
         server_port=7860,
-        show_api=False,
-        share=False,
     )