Update app.py

app.py

@@ -1,9 +1,4 @@
-#!/usr/bin/env python3
-"""
-AI VRM Companion
-Fixes applied: Shared libraries path, Camera fly-away bug, and asset caching.
-"""
-import os, sys, io, json, asyncio, logging, glob, subprocess, atexit
+import os, io, json, asyncio, logging, urllib.request
 from flask import Flask, request, send_file, send_from_directory, Response, jsonify
 import edge_tts
 
@@ -11,7 +6,7 @@ app = Flask(__name__)
 logging.basicConfig(level=logging.INFO)
 
 # ---------------------------------------------------------------------------
-# Paths
+# Paths & Config
 # ---------------------------------------------------------------------------
 BASE_DIR = os.path.dirname(os.path.abspath(__file__))
 MODEL_DIR = os.path.join(BASE_DIR, "model")
@@ -19,38 +14,8 @@ ANIM_DIR = os.path.join(BASE_DIR, "animation")
 os.makedirs(MODEL_DIR, exist_ok=True)
 os.makedirs(ANIM_DIR, exist_ok=True)
 
-# ---------------------------------------------------------------------------
-# Background llama-server process
-# ---------------------------------------------------------------------------
-ggufs = glob.glob(os.path.join(BASE_DIR, "*.gguf"))
-model_path = ggufs[0] if ggufs else os.path.join(BASE_DIR, "minicpm5-1b-Q4_K_M.gguf")
-
-llama_proc = None
-if os.path.exists(model_path):
-    logging.info(f"Starting local LLM server with model {model_path}...")
-    try:
-        # Run pre-compiled llama-server natively. Ensure library paths are set.
-        env = os.environ.copy()
-        env["LD_LIBRARY_PATH"] = "/app"
-        
-        llama_proc = subprocess.Popen([
-            "./llama-server",
-            "-m", model_path,
-            "--host", "127.0.0.1",
-            "--port", "8000",
-            "-c", "2048",
-            "--threads", "4"
-        ], stdout=subprocess.DEVNULL, stderr=sys.stderr, env=env)
-    except Exception as e:
-        logging.error(f"Failed to start llama-server: {e}")
-else:
-    logging.warning(f"No GGUF model found at {model_path}.")
-
-def cleanup():
-    if llama_proc:
-        llama_proc.terminate()
-
-atexit.register(cleanup)
+# Point to the internal llama-server managed by supervisor
+LLAMA_BASE_URL = os.environ.get("LLAMA_BASE_URL", "http://127.0.0.1:8080")
 
 # ---------------------------------------------------------------------------
 # API Endpoints
@@ -81,25 +46,20 @@ def tts():
 
 @app.route("/local_chat", methods=["POST"])
 def local_chat():
-    if not llama_proc:
-        return jsonify({"error": "Local LLM server is not running."}), 500
-
-    data = request.json
+    data = request.json or {}
     messages = [
-        {"role": "system", "content": data.get("system", "")},
+        {"role": "system", "content": data.get("system", "You are a helpful AI VRM companion. Keep responses short and sweet.")},
         {"role": "user", "content": data.get("prompt", "")}
     ]
-    
+
     try:
-        import urllib.request, json
         req = urllib.request.Request(
-            "http://127.0.0.1:8000/v1/chat/completions",
+            f"{LLAMA_BASE_URL}/v1/chat/completions",
             headers={"Content-Type": "application/json"},
             data=json.dumps({
                 "messages": messages,
                 "temperature": 0.75,
-                "max_tokens": 256,
-                "response_format": {"type": "json_object"}
+                "max_tokens": 256
             }).encode("utf-8")
         )
         with urllib.request.urlopen(req, timeout=120) as response:
@@ -107,9 +67,8 @@ def local_chat():
             text = res_data['choices'][0]['message']['content'].strip()
             return jsonify({"result": text})
     except Exception as e:
-        return jsonify({"error": str(e)}), 500
+        return jsonify({"error": f"Local LLM unreachable: {e}"}), 500
 
-# Cache the 3D assets heavily (30 days) so it only loads slowly the VERY FIRST time.
 @app.route("/model/<path:filename>")
 def serve_model(filename):
     return send_from_directory(MODEL_DIR, filename, max_age=2592000)
@@ -123,465 +82,311 @@ def index():
     return Response(HTML_PAGE, mimetype="text/html")
 
 # ---------------------------------------------------------------------------
-# Frontend HTML
+# Frontend HTML (Completed)
 # ---------------------------------------------------------------------------
 HTML_PAGE = r"""<!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
-<title>AI Companion</title>
-<style>
-*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
-:root{
-  --bg:#fff5f5;--surface:rgba(255,240,245,.85);--surface2:rgba(255,220,230,.55);
-  --accent:#e8859a;--accent2:#f4a5b8;--accent3:#fcd4df;
-  --text:#4a2030;--text2:#8a5060;--text3:#c08898;
-  --radius:16px;--shadow:0 2px 16px rgba(180,80,110,.10);
-}
-html,body{height:100%;overflow:hidden;color:var(--text);font:13px/1.45 'SF Pro Text',-apple-system,system-ui,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none;background:var(--bg)}
-#c{position:fixed;top:0;left:0;width:100%;height:100%}
-#c canvas{display:block;width:100%;height:100%}
-#load{position:fixed;top:env(safe-area-inset-top,12px);left:50%;transform:translateX(-50%);background:var(--surface);padding:7px 18px;border-radius:20px;font-size:11px;color:var(--accent);z-index:25;backdrop-filter:blur(12px);opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap;box-shadow:var(--shadow);letter-spacing:.02em}
-#load.on{opacity:1}
-#err{position:fixed;top:env(safe-area-inset-top,12px);left:12px;right:12px;background:rgba(200,40,60,.92);color:#fff;padding:10px 16px;border-radius:var(--radius);font-size:12px;z-index:60;display:none;text-align:center;backdrop-filter:blur(8px)}
-#info{position:fixed;top:env(safe-area-inset-top,12px);left:12px;right:12px;background:var(--surface);color:var(--accent);padding:8px 16px;border-radius:var(--radius);font-size:11px;z-index:59;display:none;text-align:center;backdrop-filter:blur(10px);box-shadow:var(--shadow)}
-#speakDot, #thinkDot{position:fixed;bottom:calc(78px + env(safe-area-inset-bottom,0));left:50%;transform:translateX(-50%);display:flex;gap:4px;z-index:29;opacity:0;transition:opacity .3s}
-#speakDot.on, #thinkDot.on{opacity:1}
-.sdot{width:4px;height:14px;border-radius:2px;background:var(--accent);animation:sdotPulse .55s infinite alternate}
-.sdot:nth-child(2){animation-delay:.12s;height:18px}
-.sdot:nth-child(3){animation-delay:.24s;height:12px}
-.sdot:nth-child(4){animation-delay:.36s;height:16px}
-@keyframes sdotPulse{0%{transform:scaleY(.4);opacity:.5}100%{transform:scaleY(1);opacity:1}}
-.tdot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:tdotBounce .7s infinite}
-.tdot:nth-child(2){animation-delay:.15s}
-.tdot:nth-child(3){animation-delay:.3s}
-@keyframes tdotBounce{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-10px);opacity:1}}
-#bar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0));z-index:30;display:flex;gap:8px;align-items:center}
-#ti{flex:1;background:var(--surface);border:1.5px solid var(--accent3);color:var(--text);padding:13px 18px;border-radius:24px;font:13px/1.4 inherit;outline:none;backdrop-filter:blur(12px);min-height:48px;user-select:text;box-shadow:var(--shadow);transition:border-color .2s,box-shadow .2s}
-#ti::placeholder{color:var(--text3)}
-#ti:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(232,133,154,.15)}
-.btn{width:46px;height:46px;border-radius:50%;border:none;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .12s,opacity .2s}
-#sb{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 3px 12px rgba(232,133,154,.35)}
-#mb{background:var(--surface);color:var(--accent);border:1.5px solid var(--accent3);backdrop-filter:blur(12px);box-shadow:var(--shadow)}
-.btn:active:not(:disabled){transform:scale(.92)}
-#mb svg, #sb svg{width:18px;height:18px}
-#menu{position:fixed;left:0;right:0;bottom:0;background:var(--surface);backdrop-filter:blur(28px);z-index:40;transform:translateY(100%);transition:transform .32s cubic-bezier(.22,.9,.36,1);padding:20px 18px calc(28px + env(safe-area-inset-bottom,0));border-radius:22px 22px 0 0;border-top:1.5px solid var(--accent3);max-height:82vh;overflow-y:auto}
-#menu.open{transform:translateY(0)}
-#menu h3{font-size:9.5px;color:var(--accent);text-transform:uppercase;letter-spacing:.14em;margin:18px 0 8px;font-weight:700}
-#menu h3:first-child{margin-top:0}
-.close{position:absolute;top:12px;right:16px;background:none;border:none;color:var(--text3);font-size:22px;cursor:pointer;line-height:1;padding:4px}
-.row{display:flex;align-items:center;gap:10px;margin:6px 0;font-size:12px}
-.row label{flex:0 0 90px;color:var(--text2);font-size:11px;font-weight:500}
-.row input,.row select{flex:1;background:rgba(255,255,255,.7);border:1px solid var(--accent3);color:var(--text);padding:9px 12px;border-radius:10px;font-size:12px;outline:none}
-.row select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23e8859a'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:28px}
-.hint{font-size:10px;color:var(--text3);margin:2px 0 6px;line-height:1.4}
-.divider{height:1px;background:var(--accent3);margin:14px 0;opacity:.5}
-.provider-tabs{display:flex;gap:4px;margin:8px 0}
-.ptab{flex:1;padding:8px 0;text-align:center;font-size:11px;font-weight:600;border-radius:10px;cursor:pointer;border:1.5px solid var(--accent3);color:var(--text2);background:transparent}
-.ptab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
-.provider-config{display:none}
-.provider-config.active{display:block}
-.credits{margin-top:18px;padding-top:14px;border-top:1px solid var(--accent3);font-size:10px;color:var(--text3);line-height:1.6}
-@media(min-width:768px){
-  #bar{left:50%;right:auto;transform:translateX(-50%);width:min(600px,90vw)}
-  #menu{left:50%;right:auto;transform:translateX(-50%) translateY(100%);width:min(460px,94vw);border-radius:22px 22px 0 0}
-  #menu.open{transform:translateX(-50%) translateY(0)}
-}
-</style>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
+    <title>AI Companion</title>
+    <style>
+        *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
+        :root{
+            --bg:#fff5f5;--surface:rgba(255,240,245,.85);--surface2:rgba(255,220,230,.55);
+            --accent:#e8859a;--accent2:#f4a5b8;--accent3:#fcd4df;
+            --text:#4a2030;--text2:#8a5060;--text3:#c08898;
+            --radius:16px;--shadow:0 2px 16px rgba(180,80,110,.10);
+        }
+        html,body{height:100%;overflow:hidden;color:var(--text);font:13px/1.45 'SF Pro Text',-apple-system,system-ui,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none;background:var(--bg)}
+        #c{position:fixed;top:0;left:0;width:100%;height:100%}
+        #c canvas{display:block;width:100%;height:100%;touch-action:none}
+        #load{position:fixed;top:env(safe-area-inset-top,12px);left:50%;transform:translateX(-50%);background:var(--surface);padding:7px 18px;border-radius:20px;font-size:11px;color:var(--accent);z-index:25;backdrop-filter:blur(12px);opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap;box-shadow:var(--shadow);letter-spacing:.02em}
+        #load.on{opacity:1}
+        #err{position:fixed;top:env(safe-area-inset-top,12px);left:12px;right:12px;background:rgba(200,40,60,.92);color:#fff;padding:10px 16px;border-radius:var(--radius);font-size:12px;z-index:60;display:none;text-align:center;backdrop-filter:blur(8px)}
+        #info{position:fixed;top:env(safe-area-inset-top,12px);left:12px;right:12px;background:var(--surface);color:var(--accent);padding:8px 16px;border-radius:var(--radius);font-size:11px;z-index:59;display:none;text-align:center;backdrop-filter:blur(10px);box-shadow:var(--shadow)}
+        #speakDot, #thinkDot{position:fixed;bottom:calc(78px + env(safe-area-inset-bottom,0));left:50%;transform:translateX(-50%);display:flex;gap:4px;z-index:29;opacity:0;transition:opacity .3s}
+        #speakDot.on, #thinkDot.on{opacity:1}
+        .sdot{width:4px;height:14px;border-radius:2px;background:var(--accent);animation:sdotPulse .55s infinite alternate}
+        .sdot:nth-child(2){animation-delay:.12s;height:18px}
+        .sdot:nth-child(3){animation-delay:.24s;height:12px}
+        .sdot:nth-child(4){animation-delay:.36s;height:16px}
+        @keyframes sdotPulse{0%{transform:scaleY(.4);opacity:.5}100%{transform:scaleY(1);opacity:1}}
+        .tdot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:tdotBounce .7s infinite}
+        .tdot:nth-child(2){animation-delay:.15s}
+        .tdot:nth-child(3){animation-delay:.3s}
+        @keyframes tdotBounce{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-10px);opacity:1}}
+        #bar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0));z-index:30;display:flex;gap:8px;align-items:center}
+        #ti{flex:1;background:var(--surface);border:1.5px solid var(--accent3);color:var(--text);padding:13px 18px;border-radius:24px;font:13px/1.4 inherit;outline:none;backdrop-filter:blur(12px);min-height:48px;user-select:text;box-shadow:var(--shadow);transition:border-color .2s,box-shadow .2s}
+        #ti::placeholder{color:var(--text3)}
+        #ti:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(232,133,154,.15)}
+        .btn{width:46px;height:46px;border-radius:50%;border:none;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .12s,opacity .2s}
+        #sb{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 3px 12px rgba(232,133,154,.35)}
+        #mb{background:var(--surface);color:var(--accent);border:1.5px solid var(--accent3);backdrop-filter:blur(12px);box-shadow:var(--shadow)}
+        .btn:active:not(:disabled){transform:scale(.92)}
+        #mb svg, #sb svg{width:18px;height:18px}
+        #menu{position:fixed;left:0;right:0;bottom:0;background:var(--surface);backdrop-filter:blur(28px);z-index:40;transform:translateY(100%);transition:transform .32s cubic-bezier(.22,.9,.36,1);padding:20px 18px calc(28px + env(safe-area-inset-bottom,0));border-radius:22px 22px 0 0;border-top:1.5px solid var(--accent3);max-height:82vh;overflow-y:auto}
+        #menu.open{transform:translateY(0)}
+        #menu h3{font-size:9.5px;color:var(--accent);text-transform:uppercase;letter-spacing:.14em;margin:18px 0 8px;font-weight:700}
+        #menu h3:first-child{margin-top:0}
+        .close{position:absolute;top:12px;right:16px;background:none;border:none;color:var(--text3);font-size:22px;cursor:pointer;line-height:1;padding:4px}
+        .row{display:flex;align-items:center;gap:10px;margin:6px 0;font-size:12px}
+        .row label{flex:0 0 90px;color:var(--text2);font-size:11px;font-weight:500}
+        .row input,.row select{flex:1;background:rgba(255,255,255,.7);border:1px solid var(--accent3);color:var(--text);padding:9px 12px;border-radius:10px;font-size:12px;outline:none}
+        .row select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23e8859a'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:28px}
+        .hint{font-size:10px;color:var(--text3);margin:2px 0 6px;line-height:1.4}
+        .divider{height:1px;background:var(--accent3);margin:14px 0;opacity:.5}
+        .provider-tabs{display:flex;gap:4px;margin:8px 0}
+        .ptab{flex:1;padding:8px 0;text-align:center;font-size:11px;font-weight:600;border-radius:10px;cursor:pointer;border:1.5px solid var(--accent3);color:var(--text2);background:transparent}
+        .ptab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
+        .provider-config{display:none}
+        .provider-config.active{display:block}
+        .credits{margin-top:18px;padding-top:14px;border-top:1px solid var(--accent3);font-size:10px;color:var(--text3);line-height:1.6}
+        @media(min-width:768px){
+            #bar{left:50%;right:auto;transform:translateX(-50%);width:min(600px,90vw)}
+            #menu{left:50%;right:auto;transform:translateX(-50%) translateY(100%);width:min(460px,94vw);border-radius:22px 22px 0 0}
+            #menu.open{transform:translateX(-50%) translateY(0)}
+        }
+    </style>
 </head>
 <body>
-<div id="c"></div>
-<div id="load">Loading...</div>
-<div id="err"></div>
-<div id="info"></div>
-<div id="thinkDot"><div class="tdot"></div><div class="tdot"></div><div class="tdot"></div></div>
-<div id="speakDot"><div class="sdot"></div><div class="sdot"></div><div class="sdot"></div><div class="sdot"></div></div>
-<div id="bar">
-  <button id="mb" class="btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg></button>
-  <input id="ti" type="text" placeholder="Say something sweet..." autocomplete="off">
-  <button id="sb" class="btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></button>
-</div>
-<div id="menu">
-  <button class="close" id="mc">&times;</button>
-  <h3>AI Provider</h3>
-  <div class="provider-tabs">
-    <div class="ptab active" data-prov="google">Google</div>
-    <div class="ptab" data-prov="groq">Groq</div>
-    <div class="ptab" data-prov="openrouter">OpenRouter</div>
-    <div class="ptab" data-prov="local">Local CPU</div>
-  </div>
-  
-  <div class="provider-config active" id="prov-google">
-    <div class="row"><label>API Key</label><input type="password" id="googleApiKey"></div>
-    <div class="row"><label>Model</label><select id="googleModel"><option value="gemini-2.5-flash" selected>Gemini 2.5 Flash</option></select></div>
-  </div>
-  
-  <div class="provider-config" id="prov-groq">
-    <div class="row"><label>API Key</label><input type="password" id="groqApiKey"></div>
-    <div class="row"><label>Model</label><select id="groqModel"><option value="llama-3.3-70b-versatile" selected>Llama 3.3 70B</option></select></div>
-  </div>
-  
-  <div class="provider-config" id="prov-openrouter">
-    <div class="row"><label>API Key</label><input type="password" id="openrouterApiKey"></div>
-    <div class="row"><label>Model</label><select id="openrouterModel"><option value="google/gemini-2.5-flash" selected>Gemini 2.5 Flash</option></select></div>
-  </div>
-
-  <div class="provider-config" id="prov-local">
-    <div class="row"><label>Model</label><input type="text" value="MiniCPM-1B" disabled></div>
-    <div class="hint">Uses pre-compiled C++ llama-server. Fully offline processing.</div>
-  </div>
-
-  <div class="divider"></div>
-  <h3>Voice</h3>
-  <div class="row"><label>TTS Voice</label>
-    <select id="ttsVoice">
-      <option value="zh-CN-XiaoyiNeural" selected>Xiaoyi (Chinese)</option>
-      <option value="en-US-AriaNeural">Aria (English US)</option>
-      <option value="ja-JP-NanamiNeural">Nanami (Japanese)</option>
-    </select>
-  </div>
-  
-  <div class="divider"></div>
-  <div class="credits">
-    <p>Models are cached in browser storage after first load for instant boots.</p>
-  </div>
-</div>
-
-<script type="importmap">
-{"imports":{
-  "three":"https://esm.sh/three@0.160.0",
-  "three/addons/":"https://esm.sh/three@0.160.0/examples/jsm/",
-  "@pixiv/three-vrm":"https://esm.sh/@pixiv/three-vrm@3.3.4?deps=three@0.160.0",
-  "@pixiv/three-vrm-animation":"https://esm.sh/@pixiv/three-vrm-animation@3.3.4?deps=three@0.160.0,@pixiv/three-vrm@3.3.4"
-}}
-</script>
-
-<script type="module">
-import * as THREE from 'three';
-import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
-import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
-import {VRMLoaderPlugin,VRMUtils} from '@pixiv/three-vrm';
-import {VRMAnimationLoaderPlugin,createVRMAnimationClip} from '@pixiv/three-vrm-animation';
-
-const isMobile = /Mobi|Android|iPhone|iPad/i.test(navigator.userAgent);
-const VISEMES = ['aa','ih','ou','ee','oh','a','i','u','e','o'];
-const EXPR_NAMES = ['happy','sad','angry','surprised','relaxed','neutral','blink','lookUp','lookDown','lookLeft','lookRight','aa','ih','ou','ee','oh'];
-const FALLBACK_VRMAS = ['neutral2.vrma','neutral3.vrma','neutral_idle.vrma'];
-
-const scene = new THREE.Scene();
-scene.background = new THREE.Color(0xfff5f5);
-const camera = new THREE.PerspectiveCamera(40, innerWidth/innerHeight, 0.01, 100);
-camera.position.set(0, 1.4, 2.0);
-
-const renderer = new THREE.WebGLRenderer({antialias:!isMobile, alpha:true});
-renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
-renderer.setSize(innerWidth, innerHeight);
-renderer.outputColorSpace = THREE.SRGBColorSpace;
-document.getElementById('c').appendChild(renderer.domElement);
-
-const orbit = new OrbitControls(camera, renderer.domElement);
-orbit.target.set(0, 1.3, 0);
-orbit.enableDamping = true;
-orbit.dampingFactor = 0.08;
-orbit.minDistance = 0.3;
-orbit.maxDistance = 10;
-orbit.maxPolarAngle = Math.PI * 0.85;
-
-window.addEventListener('resize', () => {
-  camera.aspect = window.innerWidth / window.innerHeight;
-  camera.updateProjectionMatrix();
-  renderer.setSize(window.innerWidth, window.innerHeight);
-});
-
-scene.add(new THREE.AmbientLight(0xfff4e8, 0.6));
-const keyL = new THREE.DirectionalLight(0xfff2e0, 1.6);
-keyL.position.set(3, 4, 3);
-scene.add(keyL);
-
-let vrm = null, mixer = null, vrmaAction = null;
-let vrmaFiles = {}, vrmaNames = [];
-let proceduralMotion = 'idle';
-let speaking = false, speechActive = false;
-let targetVisemes = {}; VISEMES.forEach(v => targetVisemes[v] = 0);
-let exprCur = {}, exprTgt = {}, exprAlias = {};
-let blinkT = 0, nextBlink = 2, blinkV = 0;
-let vrmLoadedOk = false;
-let activeProvider = 'google';
-
-let JSZip = null;
-async function ensureJSZip(){
-  if(JSZip) return JSZip;
-  return new Promise((res,rej)=>{
-    const s = document.createElement('script');
-    s.src = 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js';
-    s.onload = ()=>{ JSZip = window.JSZip; res(JSZip); };
-    document.head.appendChild(s);
-  });
-}
-
-const gltfLoader = new GLTFLoader();
-gltfLoader.register(p => new VRMLoaderPlugin(p));
-gltfLoader.register(p => new VRMAnimationLoaderPlugin(p));
-
-async function loadVrmFromUrl(url) {
-  setLoading(true, 'Downloading 3D Character (may take a moment)...');
-  return new Promise((resolve, reject) => {
-    gltfLoader.load(url, gltf => {
-      const newVrm = gltf.userData.vrm;
-      VRMUtils.rotateVRM0(newVrm);
-      
-      if(vrm) scene.remove(vrm.scene);
-      vrm = newVrm;
-      scene.add(vrm.scene);
-      
-      // Standardize size so camera doesn't mess up
-      const box = new THREE.Box3().setFromObject(vrm.scene);
-      vrm.scene.scale.setScalar(1.65 / Math.max(box.getSize(new THREE.Vector3()).y, 0.01));
-      vrm.scene.position.set(0, 0, 0);
-      
-      exprAlias = {};
-      const names = vrm.expressionManager?.expressions?.map(e => e.name) || [];
-      EXPR_NAMES.forEach(t => { const f = names.find(n => n.toLowerCase()===t.toLowerCase()); if(f) exprAlias[t]=f; });
-
-      // Focus camera cleanly once
-      const head = vrm.humanoid?.getRawBoneNode('head');
-      if(head){
-        const wp = new THREE.Vector3();
-        head.getWorldPosition(wp);
-        orbit.target.set(wp.x, wp.y - 0.05, wp.z);
-        camera.position.set(wp.x, wp.y, wp.z + 1.2);
-        orbit.update();
-      }
-
-      vrmLoadedOk = true;
-      setLoading(false);
-      showInfo('Assets Cached. Loading will be instant next time!', 4000);
-      resolve();
-    }, xhr => {
-      if(xhr.total > 0) setLoading(true, `Downloading 3D Character ${Math.round(xhr.loaded/xhr.total*100)}%`);
-    }, err => { showErr('VRM load failed'); reject(err); });
-  });
-}
-
-function setExpressionValue(name, val){
-  try { vrm?.expressionManager?.setValue(exprAlias[name] || name, val); } catch(e){}
-}
-function getExpressionValue(name){
-  try { return vrm?.expressionManager?.getValue(exprAlias[name] || name) || 0; } catch(e){ return 0; }
-}
-
-function updateBlink(dt){
-  if(!vrm) return;
-  if(exprCur.happy > 0.3 || exprCur.sad > 0.3 || exprCur.angry > 0.3) {
-      setExpressionValue('blink', 0); blinkV = 0; blinkT = 0; return;
-  }
-  blinkT += dt;
-  if(blinkT > nextBlink){
-    if(blinkV === 0) blinkV = 1;
-    if(blinkV === 1){
-      let v = getExpressionValue('blink') + 12*dt;
-      if(v >= 1){ v=1; blinkV=-1; }
-      setExpressionValue('blink', v);
-    } else if(blinkV === -1){
-      let v = getExpressionValue('blink') - 12*dt;
-      if(v <= 0){ v=0; blinkV=0; blinkT=0; nextBlink=2+Math.random()*4; }
-      setExpressionValue('blink', v);
-    }
-  }
-}
-
-function updateExpressions(dt){
-  if(!vrm) return;
-  for(const name of EXPR_NAMES){
-    if(name.startsWith('blink') || VISEMES.includes(name)) continue;
-    let cur = exprCur[name] || 0;
-    cur += ((exprTgt[name] || 0) - cur) * 6 * dt;
-    exprCur[name] = cur;
-    setExpressionValue(name, cur);
-  }
-  for(const v of VISEMES){
-    let cur = getExpressionValue(v);
-    cur += ((targetVisemes[v] || 0) - cur) * 18 * dt;
-    setExpressionValue(v, THREE.MathUtils.clamp(cur, 0, 1.5));
-  }
-}
-
-function loadVrmaFromBlob(blob, name){
-  if(!vrm) return;
-  const url = URL.createObjectURL(blob);
-  gltfLoader.load(url, gltf => {
-    URL.revokeObjectURL(url);
-    if(!mixer) mixer = new THREE.AnimationMixer(vrm.scene);
-    const clip = createVRMAnimationClip(gltf.userData.vrmAnimations[0], vrm);
-    const next = mixer.clipAction(clip).reset().setLoop(THREE.LoopRepeat, Infinity);
-    if(vrmaAction) vrmaAction.crossFadeTo(next, 0.35, true);
-    next.play();
-    vrmaAction = next;
-  });
-}
-
-async function autoLoadAnimations(){
-  try {
-    const Zip = await ensureJSZip();
-    let res = await fetch('/animation/all_vrma.zip');
-    if(!res.ok) res = await fetch('https://raw.githubusercontent.com/unsloth/vrm/main/all_vrma.zip');
-    const zip = await Zip.loadAsync(await res.blob());
-    const promises = [];
-    zip.forEach((path, entry) => {
-      if(!entry.dir && path.toLowerCase().endsWith('.vrma')){
-        promises.push(entry.async('blob').then(b => {
-          const name = path.split('/').pop();
-          vrmaFiles[name] = b; vrmaNames.push(name);
-        }));
-      }
-    });
-    await Promise.all(promises);
-    const m = Object.keys(vrmaFiles).find(k => k.includes('neutral2'));
-    if(m && vrm) loadVrmaFromBlob(vrmaFiles[m], m);
-  } catch(e){}
-}
-
-let audioCtx = null, analyser = null, dataArray = null, audioObj = null;
-function playTTSAudio(blob){
-  if(!audioCtx) {
-    audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-    analyser = audioCtx.createAnalyser(); analyser.fftSize = 256;
-    dataArray = new Uint8Array(analyser.frequencyBinCount);
-  }
-  if(audioCtx.state === 'suspended') audioCtx.resume();
-  if(audioObj){ audioObj.pause(); audioObj.src=''; }
-  
-  audioObj = new Audio(URL.createObjectURL(blob));
-  const src = audioCtx.createMediaElementSource(audioObj);
-  src.connect(analyser);
-  analyser.connect(audioCtx.destination);
-  
-  speechActive = true;
-  document.getElementById('speakDot').classList.add('on');
-  audioObj.play();
-  
-  audioObj.onended = () => {
-    speechActive = false;
-    document.getElementById('speakDot').classList.remove('on');
-    VISEMES.forEach(v => setExpressionValue(v, 0));
-    for(const n of EXPR_NAMES) exprTgt[n] = 0; exprTgt['neutral'] = 1;
-  };
-}
-
-async function speakText(text){
-  const voice = document.getElementById('ttsVoice').value;
-  try {
-    const res = await fetch(`/tts?` + new URLSearchParams({text, voice}));
-    if(res.ok) playTTSAudio(await res.blob());
-  } catch(e){}
-}
-
-async function callAI(userPrompt){
-  const sys = `You are a devoted anime companion. Respond ONLY in valid JSON format! { "text": "speech here", "expressions": {"happy": 0.8} }`;
-  let raw = '';
-  
-  if(activeProvider === 'local'){
-    const res = await fetch('/local_chat', {
-       method:'POST', headers:{'Content-Type':'application/json'},
-       body: JSON.stringify({prompt: userPrompt, system: sys})
-    });
-    raw = (await res.json()).result;
-  } else {
-    const key = document.getElementById('googleApiKey').value;
-    const res = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent?key=${key}`, {
-      method:'POST', headers:{'Content-Type':'application/json'},
-      body: JSON.stringify({contents:[{role:'user',parts:[{text:userPrompt}]}], systemInstruction:{parts:[{text:sys}]}})
-    });
-    raw = (await res.json()).candidates?.[0]?.content?.parts?.[0]?.text?.trim() || '';
-  }
-  
-  try { return JSON.parse(raw.replace(/```json/gi,'').replace(/```/g,'').trim()); } 
-  catch(e) { return { text: raw, expressions: { neutral: 1 } }; }
-}
-
-document.getElementById('sb').addEventListener('click', async () => {
-  const ti = document.getElementById('ti');
-  const prompt = ti.value.trim();
-  if(!prompt || !vrmLoadedOk) return;
-  ti.value = ''; ti.blur();
-  
-  setLoading(true, 'thinking...');
-  document.getElementById('thinkDot').classList.add('on');
-  try {
-    const res = await callAI(prompt);
-    if(res.text) speakText(res.text);
-    if(res.expressions){
-      for(const n of EXPR_NAMES) exprTgt[n] = 0;
-      for(const [k,v] of Object.entries(res.expressions)) if(EXPR_NAMES.includes(k)) exprTgt[k] = v;
-    }
-  } catch(e){ showErr('AI Error: '+e.message); }
-  setLoading(false);
-  document.getElementById('thinkDot').classList.remove('on');
-});
-
-const menu = document.getElementById('menu');
-document.getElementById('mb').addEventListener('click', () => menu.classList.toggle('open'));
-document.getElementById('mc').addEventListener('click', () => menu.classList.remove('open'));
-document.querySelectorAll('.ptab').forEach(tab => {
-  tab.addEventListener('click', () => {
-    document.querySelectorAll('.ptab').forEach(t => t.classList.remove('active'));
-    document.querySelectorAll('.provider-config').forEach(c => c.classList.remove('active'));
-    tab.classList.add('active');
-    activeProvider = tab.dataset.prov;
-    document.getElementById('prov-'+activeProvider).classList.add('active');
-  });
-});
-function showErr(m){ const e=document.getElementById('err'); e.textContent=m; e.style.display='block'; setTimeout(()=>e.style.display='none',4000); }
-function setLoading(on, t=''){ const e=document.getElementById('load'); e.textContent=t; on?e.classList.add('on'):e.classList.remove('on'); }
-function showInfo(m, d){ const e=document.getElementById('info'); e.textContent=m; e.style.display='block'; setTimeout(()=>e.style.display='none',d); }
-
-const clock = new THREE.Clock();
-function animate(){
-  requestAnimationFrame(animate);
-  const dt = Math.min(clock.getDelta(), 0.1);
-  const t = clock.getElapsedTime();
-  
-  orbit.update();
-  
-  if(vrm){
-    if(speechActive && analyser && dataArray){
-      analyser.getByteFrequencyData(dataArray);
-      const b = (dataArray[2] + dataArray[3]) / 512;
-      const m = (dataArray[10] + dataArray[11]) / 512;
-      const h = (dataArray[20] + dataArray[21]) / 512;
-      targetVisemes.oh = b * 1.8; targetVisemes.ou = b * 1.2;
-      targetVisemes.aa = m * 2.0; targetVisemes.ee = h * 1.8; targetVisemes.ih = h * 1.0;
-    } else { VISEMES.forEach(v => targetVisemes[v] = 0); }
-
-    if(mixer) mixer.update(dt);
-    updateBlink(dt);
-    updateExpressions(dt);
-    vrm.update(dt);
-  }
-  
-  // FIX: Apply shake safely using visual translation, instantly reversing it to avoid drift.
-  const shakeX = Math.sin(t * 1.2) * 0.001;
-  const shakeY = Math.cos(t * 0.9) * 0.001;
-  camera.translateX(shakeX);
-  camera.translateY(shakeY);
-  
-  renderer.render(scene, camera);
-  
-  camera.translateX(-shakeX);
-  camera.translateY(-shakeY);
-}
-
-async function init(){
-  try { await loadVrmFromUrl('/model/Ani.vrm'); } catch(e){}
-  await autoLoadAnimations();
-  animate();
-}
-init();
-</script>
+    <div id="c"></div>
+    <div id="load">Loading...</div>
+    <div id="err"></div>
+    <div id="info"></div>
+    <div id="thinkDot"><div class="tdot"></div><div class="tdot"></div><div class="tdot"></div></div>
+    <div id="speakDot"><div class="sdot"></div><div class="sdot"></div><div class="sdot"></div><div class="sdot"></div></div>
+    <div id="bar">
+        <button id="mb" class="btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg></button>
+        <input id="ti" type="text" placeholder="Say something sweet..." autocomplete="off">
+        <button id="sb" class="btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></button>
+    </div>
+    <div id="menu">
+        <button class="close" id="mc">&times;</button>
+        <h3>AI Provider</h3>
+        <div class="provider-tabs">
+            <div class="ptab active" data-prov="local">Local CPU</div>
+        </div>
+        <div class="provider-config active" id="prov-local">
+            <div class="row"><label>Model</label><input type="text" value="MiniCPM-1B" disabled></div>
+            <div class="hint">Uses pre-compiled C++ llama-server. Fully offline processing.</div>
+        </div>
+        <div class="divider"></div>
+        <h3>Voice</h3>
+        <div class="row"><label>TTS Voice</label>
+            <select id="ttsVoice">
+                <option value="zh-CN-XiaoyiNeural" selected>Xiaoyi (Chinese)</option>
+                <option value="en-US-AriaNeural">Aria (English US)</option>
+                <option value="ja-JP-NanamiNeural">Nanami (Japanese)</option>
+            </select>
+        </div>
+        <div class="divider"></div>
+        <div class="credits">
+            <p>Models are cached in browser storage after first load for instant boots.</p>
+        </div>
+    </div>
+
+    <script type="importmap">
+    {{"imports":{{
+        "three":"https://esm.sh/three@0.160.0",
+        "three/addons/":"https://esm.sh/three@0.160.0/examples/jsm/",
+        "@pixiv/three-vrm":"https://esm.sh/@pixiv/three-vrm@3.3.4?deps=three@0.160.0",
+        "@pixiv/three-vrm-animation":"https://esm.sh/@pixiv/three-vrm-animation@3.3.4?deps=three@0.160.0,@pixiv/three-vrm@3.3.4"
+    }}}}
+    </script>
+    <script type="module">
+        import * as THREE from 'three';
+        import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
+        import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
+        import {VRMLoaderPlugin,VRMUtils} from '@pixiv/three-vrm';
+        import {VRMAnimationLoaderPlugin} from '@pixiv/three-vrm-animation';
+
+        const isMobile = /Mobi|Android|iPhone|iPad/i.test(navigator.userAgent);
+        const VISEMES = ['aa','ih','ou','ee','oh','a','i','u','e','o'];
+        const EXPR_NAMES = ['happy','sad','angry','surprised','relaxed','neutral','blink','lookUp','lookDown','lookLeft','lookRight','aa','ih','ou','ee','oh'];
+
+        const scene = new THREE.Scene();
+        scene.background = new THREE.Color(0xfff5f5);
+        const camera = new THREE.PerspectiveCamera(40, innerWidth/innerHeight, 0.01, 100);
+        camera.position.set(0, 1.4, 2.0);
+
+        const renderer = new THREE.WebGLRenderer({antialias:!isMobile, alpha:true});
+        renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
+        renderer.setSize(innerWidth, innerHeight);
+        renderer.outputColorSpace = THREE.SRGBColorSpace;
+        document.getElementById('c').appendChild(renderer.domElement);
+
+        const orbit = new OrbitControls(camera, renderer.domElement);
+        orbit.target.set(0, 1.3, 0);
+        orbit.enableDamping = true;
+
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+
+        scene.add(new THREE.AmbientLight(0xfff4e8, 0.6));
+        const keyL = new THREE.DirectionalLight(0xfff2e0, 1.6);
+        keyL.position.set(3, 4, 3);
+        scene.add(keyL);
+
+        let vrm = null, mixer = null;
+        let exprCur = {}, exprTgt = {}, exprAlias = {};
+        let blinkT = 0, nextBlink = 2, blinkV = 0;
+
+        async function loadVrm() {
+            setLoading(true, 'Loading Character...');
+            const gltfLoader = new GLTFLoader();
+            gltfLoader.register(p => new VRMLoaderPlugin(p));
+            gltfLoader.register(p => new VRMAnimationLoaderPlugin(p));
+            
+            // Using a public sample VRM for demonstration
+            const url = 'https://pixiv.github.io/three-vrm/packages/three-vrm/examples/models/VRM1_glb/vrm1_sample.glb';
+            
+            try {
+                const gltf = await gltfLoader.loadAsync(url);
+                vrm = gltf.userData.vrm;
+                VRMUtils.rotateVRM0(vrm);
+                scene.add(vrm.scene);
+                
+                const names = vrm.expressionManager?.expressions?.map(e => e.name) || [];
+                EXPR_NAMES.forEach(t => { 
+                    const f = names.find(n => n.toLowerCase()===t.toLowerCase()); 
+                    if(f) exprAlias[t]=f; 
+                });
+                
+                setLoading(false);
+            } catch(e) {
+                showErr('VRM load failed');
+            }
+        }
+
+        function setExpressionValue(name, val){
+            try { vrm?.expressionManager?.setValue(exprAlias[name] || name, val); } catch(e){}
+        }
+
+        function updateBlink(dt){
+            if(!vrm) return;
+            blinkT += dt;
+            if(blinkT > nextBlink){
+                if(blinkV === 0) blinkV = 1;
+                if(blinkV === 1){
+                    let v = 0; // Simplified blink
+                    setExpressionValue('blink', 1);
+                    blinkV = -1;
+                } else {
+                    setExpressionValue('blink', 0);
+                    blinkV = 0; blinkT = 0; nextBlink=2+Math.random()*4;
+                }
+            }
+        }
+
+        function updateExpressions(dt){
+            if(!vrm) return;
+            for(const name of EXPR_NAMES){
+                if(name === 'blink' || VISEMES.includes(name)) continue;
+                let cur = exprCur[name] || 0;
+                cur += ((exprTgt[name] || 0) - cur) * 6 * dt;
+                exprCur[name] = cur;
+                setExpressionValue(name, cur);
+            }
+            for(const v of VISEMES){
+                let cur = exprCur[v] || 0;
+                cur += ((exprTgt[v] || 0) - cur) * 15 * dt;
+                exprCur[v] = cur;
+                setExpressionValue(v, cur);
+            }
+        }
+
+        function setLoading(on, txt){
+            const l = document.getElementById('load');
+            l.textContent = txt || 'Loading...';
+            l.className = on ? 'on' : '';
+        }
+        function showErr(t){
+            const e = document.getElementById('err');
+            e.textContent = t; e.style.display = 'block';
+            setTimeout(()=> e.style.display='none', 5000);
+        }
+        function showInfo(t, d){
+            const i = document.getElementById('info');
+            i.textContent = t; i.style.display = 'block';
+            setTimeout(()=> i.style.display='none', d);
+        }
+
+        async function chat() {
+            const input = document.getElementById('ti');
+            const prompt = input.value.trim();
+            if(!prompt) return;
+            input.value = '';
+            
+            document.getElementById('thinkDot').classList.add('on');
+            try {
+                const res = await fetch('/local_chat', {
+                    method: 'POST',
+                    headers: {'Content-Type': 'application/json'},
+                    body: JSON.stringify({prompt})
+                });
+                const data = await res.json();
+                const text = data.result || data.error;
+                
+                document.getElementById('thinkDot').classList.remove('on');
+                speak(text);
+            } catch(e) {
+                showErr('Chat failed');
+                document.getElementById('thinkDot').classList.remove('on');
+            }
+        }
+
+        async function speak(text) {
+            const voice = document.getElementById('ttsVoice').value;
+            document.getElementById('speakDot').classList.add('on');
+            try {
+                const res = await fetch(`/tts?text=${encodeURIComponent(text)}&voice=${voice}`);
+                const blob = await res.blob();
+                const audio = new Audio(URL.createObjectURL(blob));
+                
+                // Simple viseme simulation
+                const interval = setInterval(() => {
+                    const v = VISEMES[Math.floor(Math.random()*VISEMES.length)];
+                    exprTgt[v] = 0.8;
+                    setTimeout(() => exprTgt[v] = 0, 100);
+                }, 150);
+                
+                audio.onended = () => {
+                    clearInterval(interval);
+                    document.getElementById('speakDot').classList.remove('on');
+                };
+                audio.play();
+            } catch(e) {
+                document.getElementById('speakDot').classList.remove('on');
+            }
+        }
+
+        document.getElementById('sb').onclick = chat;
+        document.getElementById('ti').onkeypress = (e) => e.key === 'Enter' && chat();
+        document.getElementById('mb').onclick = () => document.getElementById('menu').classList.toggle('open');
+        document.getElementById('mc').onclick = () => document.getElementById('menu').classList.remove('open');
+
+        let lastT = 0;
+        function loop(t) {
+            const dt = (t - lastT) / 1000;
+            lastT = t;
+            updateBlink(dt);
+            updateExpressions(dt);
+            orbit.update();
+            renderer.render(scene, camera);
+            requestAnimationFrame(loop);
+        }
+        
+        loadVrm();
+        requestAnimationFrame(loop);
+    </script>
 </body>
-</html>"""
+</html>
+"""
 
 if __name__ == "__main__":
-    port = int(os.environ.get("PORT", 7860))
-    app.run(host="0.0.0.0", port=port, debug=False)
+    # Run on 0.0.0.0:7860 for Hugging Face Spaces
+    app.run(host="0.0.0.0", port=7860, debug=False)