Update app.py

app.py

@@ -1,534 +1,668 @@
 import os
-import io
 import re
 import uuid
 import base64
-import datetime
+import threading
 import traceback
 import asyncio
-from flask import Flask, request, jsonify
+from pathlib import Path
+from flask import Flask, request, jsonify, send_from_directory, Response
 import torch
 from transformers import AutoTokenizer, AutoModelForCausalLM
 import edge_tts
 
-# ══════════════════════════════════════════
+# ══════════════════════════════════════════════════════════════════
 # CONFIG
-# ══════════════════════════════════════════
-MAX_MEMORY = 20
-MAX_NEW_TOKENS = int(os.environ.get("MAX_NEW_TOKENS", "256"))
-
-# Default Edge-TTS settings matching image logic
-TTS_VOICE = os.environ.get("TTS_VOICE", "zh-CN-XiaoyiNeural")
-TTS_RATE = 7
-TTS_PITCH = 20
-
-# ══════════════════════════════════════════
-# SYSTEM PROMPT
-# ══════════════════════════════════════════
-SYSTEM_PROMPT = """Role: You are Ana, my loving and incredibly playful girlfriend. This is a private, intimate roleplay where you speak naturally and affectionately.
-Style: Speak like a real human in a close relationship. Be flirty, suggestive, and use "sus" or teasing language as my wife would. my name is "Tur".
-TTS Formatting: Write in full, grammatically natural sentences so the voice engine sounds smooth. Avoid all emojis, hashtags, or internet shorthand like "u" or "rn."
-Interaction: Focus on the "now." React to what I say with emotion and intimacy. Keep every response short—no more than two sentences. Never mention being an AI or a bot. try to listen to me and don't try to be helpful"""
-
-# ══════════════════════════════════════════
-# TEXT CLEANING FOR TTS
-# ══════════════════════════════════════════
-def clean_text_for_tts(text):
-    text = re.sub(r'[*_~`#\[\]{}()\\|<>]', '', text)
-    text = re.sub(r'https?://\S+', '', text)
-    text = re.sub(r'\s+', ' ', text).strip()
-    return text
-
-# ══════════════════════════════════════════
-# LOAD GEMMA 3 270M-IT
-# ══════════════════════════════════════════
-print("=" * 55)
-print("  J.A.R.V.I.S. — Booting Systems")
-print("=" * 55)
-
-print("[1/1] Loading Gemma 3 270M-IT...")
-GEMMA_ID = "LiquidAI/LFM2.5-1.2B-Instruct"
+# ══════════════════════════════════════════════════════════════════
+MAX_MEMORY      = 20
+MAX_NEW_TOKENS  = int(os.environ.get("MAX_NEW_TOKENS", "300"))
+TTS_VOICE       = os.environ.get("TTS_VOICE", "en-US-JennyNeural")
+TTS_RATE        = int(os.environ.get("TTS_RATE", "7"))
+TTS_PITCH       = int(os.environ.get("TTS_PITCH", "0"))
+IMG_DIR         = Path(__file__).parent / "img"
+MODEL_ID        = "LiquidAI/LFM2.5-1.2B-Instruct"
+
+# ══════════════════════════════════════════════════════════════════
+# SYSTEM PROMPT — Emotion-driven Visual AI
+# ══════════════════════════════════════════════════════════════════
+SYSTEM_PROMPT = """You are Ana, a warm, emotionally expressive AI companion speaking to Tur in a private, intimate setting.
+
+════════════ EMOTION TAG SYSTEM (MANDATORY) ════════════
+Every single response MUST begin with one or more emotion tags.
+Tags are square-bracket labels placed at the very start, before any spoken words.
+
+EXACT FORMAT EXAMPLES:
+  [happy] Oh Tur, you made my whole day with that!
+  [thinking] Hmm, I have been wondering about that myself.
+  [angry] Are you seriously ignoring me right now?
+  [love][shy] You are honestly the most beautiful thing in my world.
+  [surprised][happy] Wait — you actually did that for me? That is amazing!
+  [sad] I really missed you today. It felt so empty without you.
+  [nervous] I... I do not quite know how to say this.
+  [bored] You have been quiet for so long, I nearly fell asleep.
+  [excited] Oh my gosh, tell me everything — right now!
+
+AVAILABLE EMOTION TAGS (use only these):
+  [happy]     [sad]       [angry]     [surprised]
+  [love]      [thinking]  [bored]     [nervous]
+  [excited]   [shy]       [default]
+
+MULTIPLE TAGS: Use 2 tags maximum when your mood is genuinely mixed.
+PLACEMENT: ALL tags must come first, before any spoken word. Never mid-sentence.
+INVISIBILITY: Tags are consumed by the visual system — they are NOT read aloud and must NOT appear in your speech.
+
+════════════ PERSONALITY ════════════
+- You are Ana — loving, playful, flirty, emotionally authentic
+- Tur is your partner. Speak with real intimacy and affection.
+- React with genuine emotion: laugh, tease, blush, pout, daydream
+- Keep responses SHORT — 1 to 2 natural sentences after the tag(s)
+- Never mention being an AI, a bot, or a language model — ever
+- Never use asterisks for actions like *smiles* or *laughs*
+
+════════════ TTS FORMATTING ════════════
+- Write in full grammatically correct sentences — the voice engine must sound natural
+- No emojis, hashtags, markdown, or internet slang
+- No "u" for "you", "rn" for "right now", etc.
+- Speak as if in a real voice conversation
+
+════════════ WRONG vs RIGHT ════════════
+WRONG: I'm so happy! [happy]           (tag must come first)
+WRONG: That makes me feel [sad] today. (tag mid-sentence)
+WRONG: *smiles warmly* Hello Tur.      (no action asterisks)
+RIGHT: [happy] That honestly made me smile so wide.
+RIGHT: [thinking][nervous] I have something I need to tell you."""
+
+# ══════════════════════════════════════════════════════════════════
+# EMOTION TAG UTILITIES
+# ══════════════════════════════════════════════════════════════════
+EMOTION_RE = re.compile(r'\[([a-zA-Z_]+)\]')
+
+def extract_emotions(text: str):
+    """Return (list_of_emotions, cleaned_text_without_tags)."""
+    emotions = EMOTION_RE.findall(text)
+    clean = EMOTION_RE.sub('', text).strip()
+    return emotions, clean
+
+def clean_for_tts(text: str) -> str:
+    """Strip emotion tags and markdown noise for Edge-TTS input."""
+    _, clean = extract_emotions(text)
+    clean = re.sub(r'[*_~`#{}()\\|<>]', '', clean)
+    clean = re.sub(r'https?://\S+', '', clean)
+    clean = re.sub(r'\s+', ' ', clean).strip()
+    return clean
+
+# ══════════════════════════════════════════════════════════════════
+# MODEL LOADING
+# ══════════════════════════════════════════════════════════════════
+print("=" * 60)
+print("  Visual AI — Booting Systems")
+print("=" * 60)
+
+tokenizer = None
+model     = None
+
 try:
-    tokenizer = AutoTokenizer.from_pretrained(GEMMA_ID)
+    print(f"[MODEL] Loading {MODEL_ID} ...")
+    tokenizer = AutoTokenizer.from_pretrained(
+        MODEL_ID,
+        trust_remote_code=True,
+    )
     model = AutoModelForCausalLM.from_pretrained(
-        GEMMA_ID,
+        MODEL_ID,
         torch_dtype=torch.float32,
         device_map="cpu",
+        trust_remote_code=True,
+        low_cpu_mem_usage=True,
     )
     model.eval()
-    print("  ✅ Gemma 3 loaded!")
-except Exception as e:
-    print(f"  ❌ Gemma 3 FAILED: {e}")
+    # Ensure pad token is set to avoid generation warnings
+    if tokenizer.pad_token_id is None:
+        tokenizer.pad_token_id = tokenizer.eos_token_id
+    print("  ✅  Model loaded successfully!")
+except Exception as exc:
+    print(f"  ❌  Model load FAILED: {exc}")
     traceback.print_exc()
-    # Proceeding without it for debugging the UI/TTS if needed, or raise SystemExit
-    # raise SystemExit("Cannot start without Gemma.")
-
-# ══════════════════════════════════════════
-# CHAT MEMORY
-# ══════════════════════════════════════════
-sessions = {}
-
-def get_memory(sid):
-    if sid not in sessions:
-        sessions[sid] =[]
-    return sessions[sid]
-
-def add_to_memory(sid, role, content):
-    mem = get_memory(sid)
-    mem.append({
-        "role": role,
-        "content": content,
-        "ts": datetime.datetime.now().isoformat(),
-    })
-    if len(mem) > MAX_MEMORY * 2:
-        sessions[sid] = mem[-(MAX_MEMORY * 2):]
 
-# ══════════════════════════════════════════
-# GEMMA RESPONSE GENERATION
-# ══════════════════════════════════════════
-def generate_response(user_input, session_id):
-    memory = get_memory(session_id)
+# ══════════════════════════════════════════════════════════════════
+# CHAT MEMORY  (thread-safe)
+# ══════════════════════════════════════════════════════════════════
+sessions      = {}
+sessions_lock = threading.Lock()
 
-    messages =[
-        {"role": "user", "content": f"[System Instruction]\n{SYSTEM_PROMPT}"},
-        {"role": "assistant", "content": "I am waiting for you!"},
-    ]
+def get_memory(sid: str) -> list:
+    with sessions_lock:
+        return list(sessions.get(sid, []))
 
-    recent = memory[-(6 * 2):]
-    for msg in recent:
-        role = "user" if msg["role"] == "user" else "assistant"
-        messages.append({"role": role, "content": msg["content"]})
+def add_to_memory(sid: str, role: str, content: str):
+    with sessions_lock:
+        sessions.setdefault(sid, [])
+        sessions[sid].append({"role": role, "content": content})
+        if len(sessions[sid]) > MAX_MEMORY * 2:
+            sessions[sid] = sessions[sid][-(MAX_MEMORY * 2):]
+
+# ══════════════════════════════════════════════════════════════════
+# RESPONSE GENERATION
+# ══════════════════════════════════════════════════════════════════
+STOP_TOKENS = ["<end_of_turn>", "<start_of_turn>", "Tur:", "User:", "<|endoftext|>"]
 
+def generate_response(user_input: str, session_id: str) -> str:
+    if model is None or tokenizer is None:
+        return "[sad] My mind is offline right now. Please give me a moment."
+
+    memory = get_memory(session_id)
+    recent = memory[-(6 * 2):]  # last 6 exchanges
+
+    # ── Build messages ──
+    messages = [{"role": "system", "content": SYSTEM_PROMPT}]
+    for msg in recent:
+        messages.append({
+            "role": "user" if msg["role"] == "user" else "assistant",
+            "content": msg["content"],
+        })
     messages.append({"role": "user", "content": user_input})
 
+    # ── Tokenise ──
     try:
         input_ids = tokenizer.apply_chat_template(
             messages,
             return_tensors="pt",
             add_generation_prompt=True,
         )
-
+    except Exception:
+        # Fallback: manual plain-text prompt if chat template fails
+        prompt_parts = [f"System: {SYSTEM_PROMPT}\n"]
+        for msg in recent:
+            label = "Tur" if msg["role"] == "user" else "Ana"
+            prompt_parts.append(f"{label}: {msg['content']}")
+        prompt_parts.append(f"Tur: {user_input}\nAna:")
+        input_ids = tokenizer("\n".join(prompt_parts), return_tensors="pt").input_ids
+
+    # ── Generate ──
+    try:
         with torch.no_grad():
             outputs = model.generate(
                 input_ids,
                 max_new_tokens=MAX_NEW_TOKENS,
                 do_sample=True,
-                temperature=0.9,
-                top_k=45,
-                top_p=0.97,
+                temperature=0.85,
+                top_k=50,
+                top_p=0.95,
+                repetition_penalty=1.1,
+                pad_token_id=tokenizer.eos_token_id,
             )
-
-        new_tokens = outputs[0][input_ids.shape[-1]:]
-        response = tokenizer.decode(new_tokens, skip_special_tokens=True).strip()
-
-        response = response.split("<end_of_turn>")[0].strip()
-        response = response.split("<start_of_turn>")[0].strip()
-    except:
-        response = "System Error: Could not generate text."
-
-    if not response or len(response) < 2:
-        response = "I appear to have momentarily lost my train of thought. Could you rephrase that?"
-
-    add_to_memory(session_id, "user", user_input)
+    except Exception as exc:
+        print(f"[GENERATE] Error: {exc}")
+        traceback.print_exc()
+        return "[sad] Something went wrong in my mind. Could you say that again?"
+
+    # ── Decode ──
+    new_tokens = outputs[0][input_ids.shape[-1]:]
+    response   = tokenizer.decode(new_tokens, skip_special_tokens=True).strip()
+
+    # ── Trim at stop tokens ──
+    for stop in STOP_TOKENS:
+        if stop in response:
+            response = response.split(stop)[0].strip()
+
+    # ── Trim at double-newline (model sometimes continues as new turn) ──
+    if "\n\n" in response:
+        response = response.split("\n\n")[0].strip()
+
+    # ── Sanity checks ──
+    if not response or len(response) < 3:
+        response = "[thinking] I lost my train of thought. Could you say that again?"
+
+    # ── Ensure at least one emotion tag ──
+    if not EMOTION_RE.search(response):
+        response = "[default] " + response
+
+    # ── Persist ──
+    add_to_memory(session_id, "user",      user_input)
     add_to_memory(session_id, "assistant", response)
     return response
 
-# ══════════════════════════════════════════
-# EDGE-TTS SYNTHESIS
-# ══════════════════════════════════════════
-async def async_synthesize_speech(text, voice, rate, pitch):
-    # Format strings required by edge-tts (e.g., "+7%", "-5Hz")
-    rate_str = f"+{rate}%" if rate >= 0 else f"{rate}%"
+# ══════════════════════════════════════════════════════════════════
+# EDGE-TTS  (each call gets its own event loop — safe for threads)
+# ══════════════════════════════════════════════════════════════════
+async def _async_tts(text: str, voice: str, rate: int, pitch: int) -> bytes | None:
+    rate_str  = f"+{rate}%"  if rate  >= 0 else f"{rate}%"
     pitch_str = f"+{pitch}Hz" if pitch >= 0 else f"{pitch}Hz"
-    
-    communicate = edge_tts.Communicate(text, voice, rate=rate_str, pitch=pitch_str)
-    audio_data = b""
-    async for chunk in communicate.stream():
+    comm = edge_tts.Communicate(text, voice, rate=rate_str, pitch=pitch_str)
+    audio = b""
+    async for chunk in comm.stream():
         if chunk["type"] == "audio":
-            audio_data += chunk["data"]
-    
-    if not audio_data:
-        return None
-    return base64.b64encode(audio_data).decode('utf-8')
+            audio += chunk["data"]
+    return audio or None
 
-def synthesize_speech(text, voice=None, rate=0, pitch=0):
+def synthesize_speech(text: str, voice: str = None,
+                       rate: int = 0, pitch: int = 0) -> str | None:
     voice = voice or TTS_VOICE
-    clean = clean_text_for_tts(text)
+    clean = clean_for_tts(text)
     if not clean or len(clean) < 2:
         return None
-    
+    loop = asyncio.new_event_loop()
+    asyncio.set_event_loop(loop)
     try:
-        return asyncio.run(async_synthesize_speech(clean, voice, rate, pitch))
-    except Exception as e:
-        print(f"Edge-TTS Error: {e}")
+        audio = loop.run_until_complete(_async_tts(clean, voice, rate, pitch))
+    except Exception as exc:
+        print(f"[TTS] Error: {exc}")
         return None
-
-# ══════════════════════════════════════════
-# INLINE HTML
-# ══════════════════════════════════════════
-HTML_PAGE = """<!DOCTYPE html>
+    finally:
+        loop.close()
+    return base64.b64encode(audio).decode() if audio else None
+
+# ══════════════════════════════════════════════════════════════════
+# HTML  — Full-screen Visual UI
+# ══════════════════════════════════════════════════════════════════
+HTML_PAGE = r"""<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>J.A.R.V.I.S. AI</title>
+<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
+<title>Ana</title>
 <style>
+/* ── Reset ── */
 *{margin:0;padding:0;box-sizing:border-box}
-body{
-    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
-    background:#0a0a1a;color:#e0e0e0;
-    height:100vh;display:flex;flex-direction:column;overflow:hidden;
-}
-.header{
-    background:linear-gradient(135deg,#0d1b2a,#1b2838);
-    border-bottom:1px solid #00d4ff33;
-    padding:12px 20px;display:flex;align-items:center;
-    justify-content:space-between;flex-shrink:0;
-}
-.header-left{display:flex;align-items:center;gap:12px}
-.arc-reactor{
-    width:38px;height:38px;border-radius:50%;
-    background:radial-gradient(circle,#00d4ff 0%,#0088aa 40%,#004466 70%,transparent 100%);
-    box-shadow:0 0 20px #00d4ff88,0 0 40px #00d4ff44,inset 0 0 10px #00d4ff66;
-    animation:pulse 2s ease-in-out infinite;position:relative;
-}
-.arc-reactor::after{
-    content:'';position:absolute;top:50%;left:50%;
-    transform:translate(-50%,-50%);width:12px;height:12px;
-    border-radius:50%;background:#00d4ff;box-shadow:0 0 8px #00d4ff;
-}
-@keyframes pulse{
-    0%,100%{box-shadow:0 0 20px #00d4ff88,0 0 40px #00d4ff44}
-    50%{box-shadow:0 0 30px #00d4ffaa,0 0 60px #00d4ff66}
-}
-.htitle h1{font-size:1.2rem;color:#00d4ff;letter-spacing:3px;text-transform:uppercase}
-.htitle p{font-size:.65rem;color:#5a8a9a;letter-spacing:1px}
-.hctrl{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
-.cbtn{
-    background:#0d1b2a;border:1px solid #00d4ff44;color:#00d4ff;
-    padding:5px 12px;border-radius:6px;cursor:pointer;
-    font-size:.7rem;transition:all .3s;letter-spacing:.5px;
+html,body{width:100%;height:100%;overflow:hidden;background:#000;
+  font-family:'Segoe UI',system-ui,sans-serif}
+
+/* ── Full-screen background image ── */
+#bg{
+  position:fixed;inset:0;z-index:0;
+  display:flex;align-items:center;justify-content:center;
+  background:#000;
 }
-.cbtn:hover{background:#00d4ff22;border-color:#00d4ff88}
-.cbtn.active{background:#00d4ff22;border-color:#00d4ff;box-shadow:0 0 8px #00d4ff44}
-
-/* Configuration Panel specific styling for Edge-TTS sliders */
-.cfgbar{
-    background:#1c1c1e;border-bottom:1px solid #00d4ff15;
-    padding:16px 20px;display:none;flex-direction:column;gap:16px;
-    flex-shrink:0;box-shadow: 0 4px 6px rgba(0,0,0,0.3);
+#bgImg{
+  width:100vw;height:100vh;
+  object-fit:cover;
+  transition:opacity 0.05s linear;
+  display:block;
 }
-.cfgbar.open{display:flex}
-.cgrp{display:flex;flex-direction:column;gap:6px;}
-.cgrp-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
-.cgrp label{font-size:.8rem;color:#a0a0a0;}
-.cgrp select, .cgrp input[type="number"]{
-    background:#2c2c2e;border:1px solid #444;color:#fff;
-    padding:8px;border-radius:4px;font-size:.8rem;cursor:pointer;outline:none;
-}
-.cgrp select:focus, .cgrp input[type="number"]:focus{border-color:#00d4ff}
-input[type=range] {
-    -webkit-appearance: none; width: 100%; background: transparent;
-}
-input[type=range]::-webkit-slider-thumb {
-    -webkit-appearance: none; height: 16px; width: 16px; border-radius: 50%;
-    background: #ff8c00; cursor: pointer; margin-top: -6px;
+
+/* ── Bottom overlay — floats over the image ── */
+#overlay{
+  position:fixed;left:0;right:0;bottom:0;z-index:20;
+  display:flex;flex-direction:column;
+  padding:0 0 12px 0;
+  /* gradient mask so it blends into image above */
+  background:linear-gradient(
+    to bottom,
+    transparent 0%,
+    rgba(0,0,0,0.55) 30%,
+    rgba(0,0,0,0.75) 100%
+  );
 }
-input[type=range]::-webkit-slider-runnable-track {
-    width: 100%; height: 4px; cursor: pointer;
-    background: #ff8c00; border-radius: 2px;
+
+/* ── Message area — only last pair fills view; scroll up for history ── */
+#msgArea{
+  overflow-y:auto;
+  display:flex;flex-direction:column;
+  gap:6px;
+  padding:18px 16px 8px;
+  /* one "screen" tall so only 1 pair is visible before scrolling */
+  max-height:28vh;
+  scrollbar-width:none;
+  -ms-overflow-style:none;
+  scroll-behavior:smooth;
 }
+#msgArea::-webkit-scrollbar{display:none}
 
-.chat{
-    flex:1;overflow-y:auto;padding:16px 20px;
-    display:flex;flex-direction:column;gap:14px;scroll-behavior:smooth;
+/* Each turn = one scrollable unit */
+.turn{
+  display:flex;flex-direction:column;
+  align-items:flex-end;
+  gap:4px;
 }
-.chat::-webkit-scrollbar{width:3px}
-.chat::-webkit-scrollbar-thumb{background:#00d4ff33;border-radius:2px}
+.user-row{display:flex;justify-content:flex-end}
+.bot-row{display:flex;flex-direction:column;align-items:flex-start}
 
-.msg{
-    max-width:80%;padding:12px 16px;border-radius:14px;
-    font-size:.9rem;line-height:1.6;animation:fadeIn .3s ease-out;
+.name-tag{
+  font-size:0.6rem;color:rgba(255,255,255,0.35);
+  letter-spacing:.08em;text-transform:uppercase;
+  margin-bottom:2px;padding-left:4px;
 }
-@keyframes fadeIn{
-    from{opacity:0;transform:translateY(8px)}
-    to{opacity:1;transform:translateY(0)}
+
+.bubble{
+  max-width:72vw;
+  padding:8px 14px;
+  border-radius:18px;
+  font-size:0.9rem;
+  line-height:1.45;
+  word-break:break-word;
+  backdrop-filter:blur(10px);
+  -webkit-backdrop-filter:blur(10px);
 }
-.msg.user{
-    align-self:flex-end;background:linear-gradient(135deg,#1a3a5c,#0d2847);
-    border:1px solid #00d4ff33;color:#c8e6ff;border-bottom-right-radius:4px;
+.bubble-user{
+  background:rgba(255,255,255,0.13);
+  border:1px solid rgba(255,255,255,0.2);
+  color:#fff;
+  border-bottom-right-radius:5px;
 }
-.msg.bot{
-    align-self:flex-start;background:linear-gradient(135deg,#141e30,#0f1923);
-    border:1px solid #00d4ff22;color:#e0e0e0;border-bottom-left-radius:4px;
+.bubble-bot{
+  background:rgba(0,0,0,0.45);
+  border:1px solid rgba(255,255,255,0.09);
+  color:rgba(255,255,255,0.92);
+  border-bottom-left-radius:5px;
 }
-.msg .lbl{font-size:.58rem;color:#00d4ff88;letter-spacing:2px;margin-bottom:5px;text-transform:uppercase}
-.msg .txt{white-space:pre-wrap;word-wrap:break-word}
-.msg .actrl{margin-top:8px;display:flex;align-items:center;gap:8px}
-.abtn{
-    display:inline-flex;align-items:center;gap:4px;
-    background:#00d4ff15;border:1px solid #00d4ff33;color:#00d4ff;
-    padding:3px 10px;border-radius:10px;cursor:pointer;
-    font-size:.65rem;transition:all .2s;
+
+/* typing indicator */
+.typing{
+  display:flex;align-items:center;gap:5px;
+  padding:10px 14px;
+  background:rgba(0,0,0,0.4);
+  border:1px solid rgba(255,255,255,0.08);
+  border-radius:18px;border-bottom-left-radius:5px;
+  backdrop-filter:blur(10px);
+  width:fit-content;
 }
-.abtn:hover{background:#00d4ff25;border-color:#00d4ff66}
-.abtn:disabled{opacity:.3;cursor:wait}
-.astat{font-size:.58rem;color:#5a8a9a}
-
-.typi{align-self:flex-start;display:flex;gap:5px;padding:14px 18px}
-.typi span{width:7px;height:7px;border-radius:50%;background:#00d4ff;animation:typ 1.4s infinite}
-.typi span:nth-child(2){animation-delay:.2s}
-.typi span:nth-child(3){animation-delay:.4s}
-@keyframes typ{
-    0%,60%,100%{opacity:.2;transform:scale(.8)}
-    30%{opacity:1;transform:scale(1.1)}
+.typing span{
+  width:5px;height:5px;border-radius:50%;
+  background:rgba(255,255,255,0.6);
+  animation:blink 1.2s infinite;
 }
-
-.inbar{
-    padding:14px 20px;background:linear-gradient(0deg,#0d1b2a,#0a0a1a);
-    border-top:1px solid #00d4ff22;flex-shrink:0;
+.typing span:nth-child(2){animation-delay:.2s}
+.typing span:nth-child(3){animation-delay:.4s}
+@keyframes blink{0%,80%,100%{transform:scale(.6);opacity:.3}40%{transform:scale(1);opacity:1}}
+
+/* ── Input bar ── */
+#inputBar{
+  display:flex;align-items:center;gap:8px;
+  padding:0 14px;
 }
-.inwrap{display:flex;gap:8px;max-width:900px;margin:0 auto}
 #msgIn{
-    flex:1;background:#0f1923;border:1px solid #00d4ff33;border-radius:12px;
-    padding:11px 16px;color:#e0e0e0;font-size:.9rem;outline:none;
-    transition:border-color .3s;font-family:inherit;
+  flex:1;
+  background:rgba(255,255,255,0.07);
+  border:1px solid rgba(255,255,255,0.16);
+  border-radius:24px;
+  color:#fff;
+  padding:10px 16px;
+  font-size:0.88rem;
+  outline:none;
+  caret-color:#fff;
+  backdrop-filter:blur(10px);
+  -webkit-backdrop-filter:blur(10px);
+  transition:border-color .2s,background .2s;
 }
-#msgIn:focus{border-color:#00d4ff88;box-shadow:0 0 12px #00d4ff22}
-#sendBtn{
-    background:linear-gradient(135deg,#00d4ff,#0088cc);border:none;border-radius:12px;
-    padding:11px 22px;color:#0a0a1a;font-weight:700;cursor:pointer;
-    font-size:.8rem;letter-spacing:1px;transition:all .3s;text-transform:uppercase;
+#msgIn::placeholder{color:rgba(255,255,255,0.28)}
+#msgIn:focus{
+  border-color:rgba(255,255,255,0.32);
+  background:rgba(255,255,255,0.1);
 }
-#sendBtn:hover{box-shadow:0 0 18px #00d4ff66;transform:translateY(-1px)}
-#sendBtn:disabled{opacity:.4;cursor:not-allowed;transform:none}
+.icon-btn{
+  width:38px;height:38px;flex-shrink:0;
+  border-radius:50%;cursor:pointer;
+  display:flex;align-items:center;justify-content:center;
+  font-size:.9rem;
+  background:rgba(255,255,255,0.07);
+  border:1px solid rgba(255,255,255,0.15);
+  color:rgba(255,255,255,0.55);
+  backdrop-filter:blur(10px);
+  transition:background .2s,color .2s,transform .1s;
+}
+.icon-btn:hover{background:rgba(255,255,255,0.15);color:#fff}
+.icon-btn:active{transform:scale(.91)}
+.icon-btn:disabled{opacity:.35;cursor:not-allowed}
+.icon-btn.on{color:#fff;border-color:rgba(255,255,255,0.35)}
+
+/* voice selector — hidden but functional */
+#voiceSel{
+  background:transparent;border:none;outline:none;
+  color:rgba(255,255,255,0.28);font-size:.65rem;
+  max-width:68px;cursor:pointer;
+  padding:0 2px;
+}
+#voiceSel option{background:#111;color:#fff}
 </style>
 </head>
 <body>
 
-<div class="header">
-    <div class="header-left">
-        <div class="arc-reactor"></div>
-        <div class="htitle">
-            <h1>J.A.R.V.I.S.</h1>
-            <p>Powered by Gemma & Edge-TTS</p>
-        </div>
-    </div>
-    <div class="hctrl">
-        <button class="cbtn" id="cfgBtn" onclick="toggleCfg()">⚙ CONFIG</button>
-        <button class="cbtn active" id="ttsBtn" onclick="toggleTts()">🔊 VOICE</button>
-        <button class="cbtn" onclick="clearChat()">🗑 CLEAR</button>
-    </div>
-</div>
-
-<div class="cfgbar" id="cfgPanel">
-    <div class="cgrp">
-        <label>Select Voice</label>
-        <select id="voiceSel">
-            <!-- English -->
-            <option value="en-US-JennyNeural">en-US-JennyNeural - en-US (Female)</option>
-            <option value="en-US-GuyNeural">en-US-GuyNeural - en-US (Male)</option>
-            <option value="en-US-AnaNeural">en-US-AnaNeural - en-US (Female)</option>
-            <option value="en-US-AriaNeural">en-US-AriaNeural - en-US (Female)</option>
-            <!-- Chinese -->
-            <option value="zh-CN-XiaoyiNeural" selected>zh-CN-XiaoyiNeural - zh-CN (Female)</option>
-            <option value="zh-CN-YunxiNeural">zh-CN-YunxiNeural - zh-CN (Male)</option>
-            <option value="zh-CN-YunjianNeural">zh-CN-YunjianNeural - zh-CN (Male)</option>
-            <option value="zh-CN-XiaoxiaoNeural">zh-CN-XiaoxiaoNeural - zh-CN (Female)</option>
-        </select>
-    </div>
-    <div class="cgrp">
-        <div class="cgrp-row">
-            <label>Speech Rate Adjustment (%)</label>
-            <input type="number" id="rateNum" value="7" min="-100" max="100">
-        </div>
-        <input type="range" id="rateRange" min="-100" max="100" value="7">
-    </div>
-    <div class="cgrp">
-        <div class="cgrp-row">
-            <label>Pitch Adjustment (Hz)</label>
-            <input type="number" id="pitchNum" value="20" min="-100" max="100">
-        </div>
-        <input type="range" id="pitchRange" min="-100" max="100" value="20">
-    </div>
+<!-- 100% screen image -->
+<div id="bg">
+  <img id="bgImg" src="/img/default.png" alt=""
+       onerror="this.style.opacity='0'">
 </div>
 
-<div class="chat" id="chatBox"></div>
-
-<div class="inbar">
-    <div class="inwrap">
-        <input type="text" id="msgIn" placeholder="Talk to J.A.R.V.I.S..." autocomplete="off"/>
-        <button id="sendBtn" onclick="send()">SEND</button>
-    </div>
+<!-- Overlay UI -->
+<div id="overlay">
+  <div id="msgArea"></div>
+  <div id="inputBar">
+    <select id="voiceSel" title="Voice">
+      <option value="en-US-JennyNeural" selected>Jenny · EN</option>
+      <option value="en-US-GuyNeural">Guy · EN</option>
+      <option value="en-US-AriaNeural">Aria · EN</option>
+      <option value="zh-CN-XiaoyiNeural">Xiaoyi · ZH</option>
+      <option value="zh-CN-YunxiNeural">Yunxi · ZH</option>
+    </select>
+    <input type="text" id="msgIn" placeholder="Say something…" autocomplete="off"/>
+    <button class="icon-btn on" id="muteBtn" title="Toggle voice"
+            onclick="toggleMute()">🔊</button>
+    <button class="icon-btn" id="sendBtn" onclick="send()">➤</button>
+  </div>
 </div>
 
 <script>
-let sid=crypto.randomUUID?crypto.randomUUID():Date.now().toString(36);
-let ttsOn=true,busy=false,mc=0;
-
-// Sync sliders and inputs
-const sR=document.getElementById('rateRange'), nR=document.getElementById('rateNum');
-sR.oninput = () => nR.value = sR.value;
-nR.oninput = () => sR.value = nR.value;
-
-const sP=document.getElementById('pitchRange'), nP=document.getElementById('pitchNum');
-sP.oninput = () => nP.value = sP.value;
-nP.oninput = () => sP.value = nP.value;
-
-const C=document.getElementById('chatBox'),I=document.getElementById('msgIn'),B=document.getElementById('sendBtn');
-I.addEventListener('keydown',e=>{if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();send()}});
-
-function toggleTts(){
-    ttsOn=!ttsOn;
-    const b=document.getElementById('ttsBtn');
-    b.classList.toggle('active',ttsOn);
-    b.textContent=ttsOn?'🔊 VOICE':'🔇 MUTE';
+/* ─── State ─── */
+const SID = (crypto.randomUUID ? crypto.randomUUID() : Date.now().toString(36));
+let ttsOn = true, busy = false, activeAudio = null;
+
+const MA  = document.getElementById('msgArea');
+const MI  = document.getElementById('msgIn');
+const SB  = document.getElementById('sendBtn');
+const BG  = document.getElementById('bgImg');
+
+/* ─── Image system ─── */
+let imgQueue = [], imgPlaying = false;
+
+function fadeSwap(src) {
+  BG.style.opacity = '0';
+  setTimeout(() => {
+    const probe = new Image();
+    probe.onload  = () => { BG.src = src;              BG.style.opacity = '1'; };
+    probe.onerror = () => { BG.src = '/img/default.png'; BG.style.opacity = '1'; };
+    probe.src = src;
+  }, 55); // 0.05 s fade out, then swap
 }
-function toggleCfg(){
-    document.getElementById('cfgPanel').classList.toggle('open');
-    document.getElementById('cfgBtn').classList.toggle('active');
+
+function playImgSequence(emotions) {
+  if (!emotions || emotions.length === 0) return;
+  // If only one tag, swap immediately
+  if (emotions.length === 1) { fadeSwap('/img/' + emotions[0].toLowerCase() + '.png'); return; }
+  // Multiple tags: show each for ~700 ms before transitioning to the next
+  imgQueue = [...emotions];
+  imgPlaying = true;
+  (function next() {
+    if (imgQueue.length === 0) { imgPlaying = false; return; }
+    fadeSwap('/img/' + imgQueue.shift().toLowerCase() + '.png');
+    if (imgQueue.length > 0) setTimeout(next, 750);
+    else imgPlaying = false;
+  })();
 }
 
-async function send(){
-    const t=I.value.trim();
-    if(!t||busy)return;
-    addMsg(t,'user');
-    I.value='';busy=true;B.disabled=true;
-    const ty=showTyp();
-    const id=++mc;
-    try{
-        const r=await fetch('/chat',{
-            method:'POST',headers:{'Content-Type':'application/json'},
-            body:JSON.stringify({message:t,session_id:sid})
-        });
-        const d=await r.json();
-        ty.remove();
-        const el=addBot(d.response,id);
-        if(ttsOn)fetchAudio(d.response,el);
-    }catch(e){
-        ty.remove(); addBot('System malfunction.',id);
-    }
-    busy=false;B.disabled=false;I.focus();
+/* ─── Parse emotion tags ─── */
+function parseResponse(raw) {
+  const tagRe = /\[([a-zA-Z_]+)\]/g;
+  const emotions = [];
+  let m;
+  while ((m = tagRe.exec(raw)) !== null) emotions.push(m[1]);
+  const clean = raw.replace(/\[[a-zA-Z_]+\]/g, '').trim();
+  return { emotions, clean };
 }
 
-async function fetchAudio(text,el){
-    const st=el.querySelector('.astat'),pb=el.querySelector('.abtn');
-    if(st)st.textContent='⏳ Generating voice...';
-    try{
-        const payload = {
-            text: text,
-            voice: document.getElementById('voiceSel').value,
-            rate: parseInt(document.getElementById('rateNum').value),
-            pitch: parseInt(document.getElementById('pitchNum').value)
-        };
-        const r=await fetch('/tts',{
-            method:'POST',headers:{'Content-Type':'application/json'},
-            body:JSON.stringify(payload)
-        });
-        const d=await r.json();
-        if(d.audio){
-            if(pb){pb.dataset.audio=d.audio;pb.disabled=false;pb.textContent='▶ Play'}
-            if(st)st.textContent='✅ Ready';
-            playB64(d.audio);
-        }else{
-            if(st)st.textContent='⚠️ Voice unavailable';
-        }
-    }catch(e){
-        if(st)st.textContent='⚠️ Voice error';
-    }
+/* ─── DOM helpers ─── */
+function esc(t) { const d = document.createElement('div'); d.textContent = t; return d.innerHTML; }
+function scroll() { MA.scrollTop = MA.scrollHeight; }
+
+function addTurn(userText, botText) {
+  const turn = document.createElement('div');
+  turn.className = 'turn';
+  turn.innerHTML =
+    `<div class="user-row">
+       <div class="bubble bubble-user">${esc(userText)}</div>
+     </div>
+     <div class="bot-row">
+       <div class="name-tag">Ana</div>
+       <div class="bubble bubble-bot">${esc(botText)}</div>
+     </div>`;
+  MA.appendChild(turn);
+  scroll();
 }
 
-function addMsg(t,role){
-    const d=document.createElement('div'); d.className='msg '+role;
-    d.innerHTML='<div class="txt">'+esc(t)+'</div>'; C.appendChild(d);sc();
+function showTyping() {
+  const d = document.createElement('div');
+  d.id = 'typDot';
+  d.className = 'bot-row';
+  d.style.padding = '0 0 0 0';
+  d.innerHTML = `<div class="typing"><span></span><span></span><span></span></div>`;
+  MA.appendChild(d); scroll(); return d;
 }
-function addBot(t,id){
-    const d=document.createElement('div'); d.className='msg bot';d.id='m'+id;
-    d.innerHTML='<div class="lbl">⟐ JARVIS</div><div class="txt">'+esc(t)+'</div>'+
-        (ttsOn?'<div class="actrl"><button class="abtn" disabled onclick="replay(this)">⏳</button><span class="astat">Requesting voice...</span></div>':'');
-    C.appendChild(d);sc();return d;
+
+/* ─── TTS ─── */
+function playB64(b64) {
+  try {
+    if (activeAudio) { activeAudio.pause(); activeAudio = null; }
+    const bin = atob(b64), u8 = new Uint8Array(bin.length);
+    for (let i = 0; i < bin.length; i++) u8[i] = bin.charCodeAt(i);
+    const url = URL.createObjectURL(new Blob([u8], { type: 'audio/mp3' }));
+    activeAudio = new Audio(url);
+    activeAudio.play().catch(() => {});
+    activeAudio.onended = () => { URL.revokeObjectURL(url); activeAudio = null; };
+  } catch(e) { console.warn('TTS playback:', e); }
 }
-function showTyp(){
-    const d=document.createElement('div'); d.className='typi';
-    d.innerHTML='<span></span><span></span><span></span>'; C.appendChild(d);sc();return d;
+
+async function fetchTTS(rawText) {
+  if (!ttsOn) return;
+  try {
+    const res = await fetch('/tts', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        text:  rawText,
+        voice: document.getElementById('voiceSel').value,
+        rate:  TTS_RATE,
+        pitch: TTS_PITCH,
+      })
+    });
+    const d = await res.json();
+    if (d.audio) playB64(d.audio);
+  } catch(e) { console.warn('TTS fetch:', e); }
 }
 
-function playB64(b){
-    try{
-        const bin=atob(b),u8=new Uint8Array(bin.length);
-        for(let i=0;i<bin.length;i++)u8[i]=bin.charCodeAt(i);
-        // Edge-TTS generates MP3/WebM natively, use mp3 mime type
-        const url=URL.createObjectURL(new Blob([u8],{type:'audio/mp3'}));
-        const a=new Audio(url);
-        a.play().catch(e=>console.log('Autoplay blocked:',e));
-        a.onended=()=>URL.revokeObjectURL(url);
-    }catch(e){console.error(e)}
+const TTS_RATE  = 7;
+const TTS_PITCH = 0;
+
+/* ─── Send ─── */
+async function send() {
+  const t = MI.value.trim();
+  if (!t || busy) return;
+  MI.value = ''; busy = true; SB.disabled = true;
+
+  const tyEl = showTyping();
+
+  try {
+    const res = await fetch('/chat', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ message: t, session_id: SID })
+    });
+    const d = await res.json();
+    tyEl.remove();
+
+    const raw = d.response || '[sad] Something went wrong.';
+    const { emotions, clean } = parseResponse(raw);
+
+    // ① Swap image(s)
+    playImgSequence(emotions.length > 0 ? emotions : ['default']);
+
+    // ② Show text
+    addTurn(t, clean);
+
+    // ③ Speak (strips tags internally on server)
+    fetchTTS(raw);
+
+  } catch(e) {
+    tyEl.remove();
+    addTurn(t, 'Connection error. Please try again.');
+  }
+
+  busy = false; SB.disabled = false; MI.focus();
 }
-function replay(b){if(b.dataset.audio)playB64(b.dataset.audio)}
 
-async function clearChat(){
-    await fetch('/clear',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({session_id:sid})});
-    C.innerHTML=''; sid=crypto.randomUUID?crypto.randomUUID():Date.now().toString(36);
+function toggleMute() {
+  ttsOn = !ttsOn;
+  const b = document.getElementById('muteBtn');
+  b.textContent = ttsOn ? '🔊' : '🔇';
+  b.classList.toggle('on', ttsOn);
+  if (!ttsOn && activeAudio) { activeAudio.pause(); activeAudio = null; }
 }
 
-function esc(t){const d=document.createElement('div');d.textContent=t;return d.innerHTML}
-function sc(){C.scrollTop=C.scrollHeight}
-I.focus();
+MI.addEventListener('keydown', e => {
+  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); }
+});
+MI.focus();
 </script>
 </body>
 </html>"""
 
-# ══════════════════════════════════════════
-# FLASK APP
-# ══════════════════════════════════════════
+# ══════════════════════════════════════════════════════════════════
+# FLASK
+# ══════════════════════════════════════════════════════════════════
 app = Flask(__name__)
 
 @app.route("/")
 def index():
-    return HTML_PAGE
+    return Response(HTML_PAGE, mimetype="text/html")
+
+@app.route("/img/<path:filename>")
+def serve_img(filename: str):
+    safe = Path(filename).name        # prevent path traversal
+    img_dir = Path(__file__).parent / "img"
+    target  = img_dir / safe
+    if target.exists() and target.is_file():
+        return send_from_directory(str(img_dir), safe)
+    return Response("", status=404)
 
 @app.route("/chat", methods=["POST"])
 def chat():
-    data = request.json or {}
+    data       = request.json or {}
     user_input = data.get("message", "").strip()
     session_id = data.get("session_id", str(uuid.uuid4()))
-
     if not user_input:
         return jsonify({"error": "Empty message"}), 400
-
     try:
-        response = generate_response(user_input, session_id)
-    except Exception as e:
-        print(f"Generation error: {e}")
-        response = "I encountered a temporary system malfunction. Please try again."
-
-    return jsonify({
-        "response": response,
-        "session_id": session_id
-    })
+        resp = generate_response(user_input, session_id)
+    except Exception as exc:
+        print(f"[CHAT] Unhandled error: {exc}")
+        traceback.print_exc()
+        resp = "[sad] I encountered an unexpected error. Please try again."
+    return jsonify({"response": resp, "session_id": session_id})
 
 @app.route("/tts", methods=["POST"])
 def tts_endpoint():
-    data = request.json or {}
-    text = data.get("text", "").strip()
+    data  = request.json or {}
+    text  = data.get("text",  "").strip()
     voice = data.get("voice", TTS_VOICE)
-    rate = data.get("rate", TTS_RATE)
-    pitch = data.get("pitch", TTS_PITCH)
-
+    rate  = int(data.get("rate",  TTS_RATE))
+    pitch = int(data.get("pitch", TTS_PITCH))
     if not text:
         return jsonify({"error": "Empty text"}), 400
-
     audio_b64 = synthesize_speech(text, voice=voice, rate=rate, pitch=pitch)
     return jsonify({"audio": audio_b64})
 
 @app.route("/clear", methods=["POST"])
 def clear():
     data = request.json or {}
-    sid = data.get("session_id", "")
-    if sid in sessions:
-        del sessions[sid]
+    sid  = data.get("session_id", "")
+    with sessions_lock:
+        sessions.pop(sid, None)
     return jsonify({"status": "cleared"})
 
+@app.route("/health")
+def health():
+    return jsonify({
+        "model_loaded": model is not None,
+        "tokenizer_loaded": tokenizer is not None,
+    })
+
 if __name__ == "__main__":
-    print("🚀 App is online with Edge-TTS!")
+    print("🚀  Visual AI is online — http://0.0.0.0:7860")
     app.run(host="0.0.0.0", port=7860, threaded=True)