Spaces:
Sleeping
Sleeping
| import gradio as gr | |
| import spaces | |
| import os | |
| import sys | |
| import json | |
| import re | |
| import zipfile | |
| import asyncio | |
| import tempfile | |
| import base64 | |
| import threading | |
| from pathlib import Path | |
| import subprocess | |
| # ── Install deps ────────────────────────────────────────────────────────────── | |
| def install_packages(): | |
| packages = [ | |
| "transformers>=4.40.0", | |
| "torch>=2.1.0", | |
| "accelerate>=0.27.0", | |
| "edge-tts", | |
| "sentencepiece", | |
| ] | |
| for pkg in packages: | |
| subprocess.run( | |
| [sys.executable, "-m", "pip", "install", pkg, "-q"], | |
| check=False, | |
| ) | |
| install_packages() | |
| import torch | |
| from transformers import AutoTokenizer, AutoModelForCausalLM | |
| import edge_tts | |
| # ── Constants ───────────────────────────────────────────────────────────────── | |
| MODEL_ID = "Qwen/Qwen2.5-0.5B-Instruct" # small, fast, reliable | |
| VRM_PATH = "model/Ani.vrm" | |
| ANIM_ZIP = "animation/all_vrma.zip" | |
| TTS_VOICE = "en-US-AriaNeural" # reliable fallback | |
| TTS_VOICE2 = "zh-CN-XiaoyiNeural" | |
| EMOTIONS_MAP = { | |
| "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": "😤"}, | |
| } | |
| # ── VRMA list ───────────────────────────────────────────────────────────────── | |
| def get_vrma_list(): | |
| if not os.path.exists(ANIM_ZIP): | |
| return [] | |
| with zipfile.ZipFile(ANIM_ZIP, "r") as z: | |
| return [f for f in z.namelist() if f.endswith(".vrma")] | |
| VRMA_LIST = get_vrma_list() | |
| # ── Model ───────────────────────────────────────────────────────────────────── | |
| _tokenizer = None | |
| _model = None | |
| _lock = threading.Lock() | |
| def load_model(): | |
| global _tokenizer, _model | |
| if _model is not None: | |
| return | |
| with _lock: | |
| if _model is not None: | |
| return | |
| print(f"[ANI] Loading {MODEL_ID} …") | |
| _tokenizer = AutoTokenizer.from_pretrained(MODEL_ID) | |
| _model = AutoModelForCausalLM.from_pretrained( | |
| MODEL_ID, | |
| torch_dtype=torch.float16, | |
| device_map="auto", | |
| low_cpu_mem_usage=True, | |
| ) | |
| _model.eval() | |
| print("[ANI] Model ready.") | |
| def build_system_prompt(): | |
| emo_str = ", ".join(EMOTIONS_MAP.keys()) | |
| anim_str = ", ".join(VRMA_LIST[:30]) if VRMA_LIST else "null" | |
| return ( | |
| "You are Ani, a friendly AI anime companion.\n" | |
| "Reply ONLY with valid JSON – no markdown, no extra text:\n" | |
| '{"response":"...", "emotion":"...", "animation":"...", "intensity":0.8}\n' | |
| f"Emotions: {emo_str}\n" | |
| f"Animations: {anim_str}\n" | |
| "Pick the best emotion and animation. Keep replies to 1-3 sentences." | |
| ) | |
| def generate_response(user_message: str, history: list) -> dict: | |
| load_model() | |
| system = build_system_prompt() | |
| messages = [{"role": "system", "content": system}] | |
| for h, a in history[-4:]: | |
| if h: | |
| messages.append({"role": "user", "content": h}) | |
| if a: | |
| try: | |
| messages.append({"role": "assistant", | |
| "content": json.loads(a).get("response", a)}) | |
| except Exception: | |
| messages.append({"role": "assistant", "content": a}) | |
| 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(): | |
| out = _model.generate( | |
| **inputs, | |
| max_new_tokens=200, | |
| temperature=0.7, | |
| top_p=0.9, | |
| do_sample=True, | |
| pad_token_id=_tokenizer.eos_token_id, | |
| ) | |
| raw = _tokenizer.decode( | |
| out[0][inputs["input_ids"].shape[1]:], skip_special_tokens=True | |
| ).strip() | |
| try: | |
| m = re.search(r"\{.*\}", raw, re.DOTALL) | |
| result = json.loads(m.group()) if m else {} | |
| except Exception: | |
| result = {} | |
| result.setdefault("response", raw or "Hello!") | |
| result.setdefault("emotion", "neutral") | |
| result.setdefault("animation", None) | |
| result.setdefault("intensity", 0.7) | |
| if result["emotion"] not in EMOTIONS_MAP: | |
| result["emotion"] = "neutral" | |
| return result | |
| # ── TTS ─────────────────────────────────────────────────────────────────────── | |
| async def _tts(text, voice, path): | |
| await edge_tts.Communicate(text, voice).save(path) | |
| def run_tts(text: str) -> str: | |
| tmp = tempfile.NamedTemporaryFile(suffix=".mp3", delete=False) | |
| tmp.close() | |
| for voice in [TTS_VOICE2, TTS_VOICE]: | |
| try: | |
| asyncio.run(_tts(text, voice, tmp.name)) | |
| if os.path.getsize(tmp.name) > 0: | |
| with open(tmp.name, "rb") as f: | |
| b64 = base64.b64encode(f.read()).decode() | |
| os.unlink(tmp.name) | |
| return b64 | |
| except Exception as e: | |
| print(f"[TTS] {voice} failed: {e}") | |
| return "" | |
| # ── VRM helpers ─────────────────────────────────────────────────────────────── | |
| def get_vrm_b64() -> str: | |
| if os.path.exists(VRM_PATH): | |
| with open(VRM_PATH, "rb") as f: | |
| return base64.b64encode(f.read()).decode() | |
| return "" | |
| def get_vrma_b64(name: str) -> str: | |
| if not name or not os.path.exists(ANIM_ZIP): | |
| return "" | |
| with zipfile.ZipFile(ANIM_ZIP, "r") as z: | |
| for n in z.namelist(): | |
| if n == name or os.path.basename(n) == name: | |
| return base64.b64encode(z.read(n)).decode() | |
| return "" | |
| def get_idle_b64(): | |
| for p in ["natural2.vrma", "natural.vrma", "idle.vrma", "stand.vrma"]: | |
| b = get_vrma_b64(p) | |
| if b: | |
| return b | |
| if VRMA_LIST: | |
| return get_vrma_b64(VRMA_LIST[0]) | |
| return "" | |
| VRM_B64 = get_vrm_b64() | |
| IDLE_B64 = get_idle_b64() | |
| # ── Chat handler ────────────────────────────────────────────────────────────── | |
| def chat(user_msg: str, history: list): | |
| if not user_msg.strip(): | |
| return history, "{}" | |
| try: | |
| result = generate_response(user_msg, history) | |
| except Exception as e: | |
| result = {"response": f"Sorry, error: {e}", "emotion": "sad", | |
| "animation": None, "intensity": 0.5} | |
| text = result.get("response", "…") | |
| emotion = result.get("emotion", "neutral") | |
| animation = result.get("animation") | |
| intensity = result.get("intensity", 0.7) | |
| audio_b64 = run_tts(text) | |
| anim_b64 = get_vrma_b64(animation) if animation else "" | |
| blinking = EMOTIONS_MAP.get(emotion, EMOTIONS_MAP["neutral"])["blinking"] | |
| payload = json.dumps({ | |
| "type": "chat_response", | |
| "response": text, | |
| "emotion": emotion, | |
| "blinking": blinking, | |
| "animation_b64": anim_b64, | |
| "audio_b64": audio_b64, | |
| "intensity": intensity, | |
| }) | |
| new_history = history + [[user_msg, json.dumps(result)]] | |
| return new_history, payload | |
| # ══════════════════════════════════════════════════════════════════════════════ | |
| # HTML for the iframe-like inner panel | |
| # ══════════════════════════════════════════════════════════════════════════════ | |
| INNER_CSS = """ | |
| <style> | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| background: #0d0d18; | |
| font-family: 'Segoe UI', system-ui, sans-serif; | |
| color: #e8e8f0; | |
| height: 100%; | |
| overflow: hidden; | |
| } | |
| #app { | |
| display: grid; | |
| grid-template-columns: 1fr 340px; | |
| height: 600px; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| border: 1px solid rgba(255,255,255,0.07); | |
| } | |
| /* ── VRM side ── */ | |
| #vrm-side { | |
| position: relative; | |
| background: linear-gradient(160deg,#0d0d1e,#080812,#0d0d1e); | |
| overflow: hidden; | |
| } | |
| #vrm-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; } | |
| #status-bar { | |
| position:absolute; top:12px; left:12px; | |
| display:flex; align-items:center; gap:7px; | |
| background:rgba(8,8,18,.7); backdrop-filter:blur(10px); | |
| border:1px solid rgba(255,255,255,.07); border-radius:18px; | |
| padding:6px 13px; z-index:10; | |
| } | |
| #sdot { | |
| width:7px; height:7px; border-radius:50%; background:#4ade80; | |
| box-shadow:0 0 7px #4ade80; | |
| animation:dpulse 2s ease-in-out infinite; | |
| } | |
| @keyframes dpulse{0%,100%{box-shadow:0 0 6px #4ade80}50%{box-shadow:0 0 14px #4ade80,0 0 22px rgba(74,222,128,.4)}} | |
| #stext { font-size:11px; color:rgba(255,255,255,.6); } | |
| #emo-badge { | |
| position:absolute; bottom:16px; left:16px; | |
| background:rgba(8,8,18,.75); backdrop-filter:blur(10px); | |
| border:1px solid rgba(99,102,241,.28); border-radius:12px; | |
| padding:8px 14px; display:flex; align-items:center; gap:8px; z-index:10; | |
| } | |
| #emo-icon { font-size:18px; } | |
| #emo-label { font-size:12px; font-weight:600; color:rgba(255,255,255,.85); text-transform:capitalize; } | |
| .particle { | |
| position:absolute; border-radius:50%; pointer-events:none; | |
| animation:fup linear infinite; z-index:3; | |
| } | |
| @keyframes fup{0%{transform:translateY(110%) scale(0);opacity:0}8%{opacity:1}92%{opacity:.5}100%{transform:translateY(-10%) scale(1.2);opacity:0}} | |
| /* loader */ | |
| #loader { | |
| position:absolute; inset:0; z-index:20; | |
| background:rgba(8,8,18,.95); | |
| display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; | |
| transition:opacity .8s; | |
| } | |
| #loader.gone{opacity:0;pointer-events:none;} | |
| .ld-logo{font-size:48px;animation:lpulse 2s ease-in-out infinite;} | |
| @keyframes lpulse{0%,100%{filter:drop-shadow(0 0 14px rgba(99,102,241,.6))}50%{filter:drop-shadow(0 0 28px rgba(167,139,250,.8))}} | |
| .ld-title{font-size:20px;font-weight:700;background:linear-gradient(135deg,#a78bfa,#6366f1,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} | |
| .ld-bar{width:140px;height:2px;background:rgba(255,255,255,.09);border-radius:1px;overflow:hidden;} | |
| .ld-fill{height:100%;background:linear-gradient(90deg,#6366f1,#a78bfa);border-radius:1px;animation:lsweep 1.6s ease-in-out infinite;} | |
| @keyframes lsweep{0%{width:0;margin-left:0}50%{width:50%;margin-left:25%}100%{width:0;margin-left:100%}} | |
| .ld-status{font-size:11px;color:rgba(255,255,255,.4);} | |
| /* ── Chat side ── */ | |
| #chat-side { | |
| display:flex; flex-direction:column; | |
| background:rgba(7,7,15,.97); | |
| border-left:1px solid rgba(255,255,255,.055); | |
| } | |
| #chat-header { | |
| padding:16px 18px 12px; | |
| border-bottom:1px solid rgba(255,255,255,.055); | |
| background:rgba(10,10,20,.9); flex-shrink:0; | |
| } | |
| #chat-title{font-size:16px;font-weight:700;background:linear-gradient(135deg,#a78bfa,#6366f1,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} | |
| #chat-sub{font-size:10px;color:rgba(255,255,255,.35);margin-top:2px;} | |
| #model-chip{display:inline-flex;align-items:center;gap:4px;margin-top:6px;background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.25);border-radius:16px;padding:2px 9px;font-size:9px;color:#a78bfa;} | |
| #msgs { | |
| flex:1; overflow-y:auto; padding:14px 12px; | |
| display:flex; flex-direction:column; gap:11px; | |
| scroll-behavior:smooth; | |
| } | |
| #msgs::-webkit-scrollbar{width:3px;} | |
| #msgs::-webkit-scrollbar-thumb{background:rgba(99,102,241,.25);border-radius:2px;} | |
| .mrow{display:flex;gap:8px;animation:min .25s ease;} | |
| .mrow.urow{flex-direction:row-reverse;} | |
| @keyframes min{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} | |
| .mav{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;} | |
| .mav.aav{background:linear-gradient(135deg,#6366f1,#a78bfa);box-shadow:0 0 8px rgba(99,102,241,.4);} | |
| .mav.uav{background:linear-gradient(135deg,#374151,#4b5563);} | |
| .mwrap{display:flex;flex-direction:column;max-width:85%;} | |
| .urow .mwrap{align-items:flex-end;} | |
| .mbub{padding:8px 12px;font-size:12.5px;line-height:1.6;word-break:break-word;} | |
| .mbub.abub{background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.17);border-radius:3px 13px 13px 13px;color:rgba(255,255,255,.87);} | |
| .mbub.ubub{background:linear-gradient(135deg,rgba(99,102,241,.2),rgba(139,92,246,.16));border:1px solid rgba(139,92,246,.2);border-radius:13px 3px 13px 13px;color:rgba(255,255,255,.92);} | |
| .mtime{font-size:9px;color:rgba(255,255,255,.25);margin-top:2px;} | |
| #typing{display:none;gap:8px;} | |
| #typing.show{display:flex;} | |
| .td{width:5px;height:5px;border-radius:50%;background:#6366f1;animation:tb 1.1s ease-in-out infinite;} | |
| .td:nth-child(2){animation-delay:.17s;}.td:nth-child(3){animation-delay:.34s;} | |
| @keyframes tb{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}} | |
| #input-area{padding:12px;border-top:1px solid rgba(255,255,255,.055);background:rgba(8,8,18,.9);flex-shrink:0;} | |
| #irow{display:flex;gap:8px;align-items:flex-end;} | |
| #uinput{ | |
| flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09); | |
| border-radius:16px;padding:10px 14px;color:rgba(255,255,255,.9); | |
| font-size:13px;font-family:inherit;resize:none;outline:none; | |
| line-height:1.5;min-height:42px;max-height:100px; | |
| transition:border-color .2s,box-shadow .2s; | |
| } | |
| #uinput:focus{border-color:rgba(99,102,241,.45);box-shadow:0 0 0 2px rgba(99,102,241,.08);} | |
| #uinput::placeholder{color:rgba(255,255,255,.25);} | |
| #sbtn{ | |
| width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;flex-shrink:0; | |
| background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;font-size:15px; | |
| display:flex;align-items:center;justify-content:center; | |
| transition:all .2s;box-shadow:0 3px 9px rgba(99,102,241,.4); | |
| } | |
| #sbtn:hover:not(:disabled){transform:scale(1.08);box-shadow:0 4px 16px rgba(99,102,241,.6);} | |
| #sbtn:active:not(:disabled){transform:scale(.93);} | |
| #sbtn:disabled{opacity:.4;cursor:not-allowed;} | |
| </style> | |
| """ | |
| INNER_JS = """ | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "three": "https://cdn.jsdelivr.net/npm/three@0.168.0/build/three.module.js", | |
| "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.168.0/examples/jsm/", | |
| "@pixiv/three-vrm": "https://cdn.jsdelivr.net/npm/@pixiv/three-vrm@3.1.3/lib/three-vrm.module.js", | |
| "@pixiv/three-vrm-animation":"https://cdn.jsdelivr.net/npm/@pixiv/three-vrm-animation@3.1.3/lib/three-vrm-animation.module.js" | |
| } | |
| } | |
| </script> | |
| <script type="module"> | |
| import * as THREE from 'three'; | |
| import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; | |
| import { VRMLoaderPlugin, VRMUtils } from '@pixiv/three-vrm'; | |
| import { VRMAnimationLoaderPlugin, createVRMAnimationClip } from '@pixiv/three-vrm-animation'; | |
| let renderer, scene, camera, clock; | |
| let vrm=null, mixer=null; | |
| let autoBlinkOn=true, isBlinking=false, blinkTimer=null; | |
| let lipInterval=null, audioCtx=null, curEmo='neutral'; | |
| let idleB64=''; | |
| const EMO_EXPR={ | |
| happy:{n:'happy',w:1},sad:{n:'sad',w:1},angry:{n:'angry',w:1}, | |
| surprised:{n:'surprised',w:1},fearful:{n:'sad',w:.8},disgusted:{n:'angry',w:.7}, | |
| neutral:{n:'neutral',w:0},excited:{n:'happy',w:1},confused:{n:'surprised',w:.6}, | |
| thinking:{n:'neutral',w:0},laughing:{n:'happy',w:1},crying:{n:'sad',w:1}, | |
| love:{n:'happy',w:.9},shy:{n:'happy',w:.5},bored:{n:'neutral',w:0}, | |
| sleepy:{n:'relaxed',w:.8},determined:{n:'angry',w:.4},proud:{n:'happy',w:.8}, | |
| embarrassed:{n:'sad',w:.5},grateful:{n:'happy',w:.7},playful:{n:'happy',w:.9},serious:{n:'neutral',w: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:'😤'}; | |
| function setSt(t){const e=document.getElementById('stext');if(e)e.textContent=t;} | |
| function setLd(t){const e=document.getElementById('ldst');if(e)e.textContent=t;} | |
| function hideLoader(){const e=document.getElementById('loader');if(e)setTimeout(()=>e.classList.add('gone'),600);} | |
| function initThree(){ | |
| const wrap=document.getElementById('vrm-side'); | |
| const canvas=document.getElementById('vrm-canvas'); | |
| renderer=new THREE.WebGLRenderer({canvas,antialias:true,alpha:true}); | |
| renderer.setPixelRatio(Math.min(devicePixelRatio,2)); | |
| renderer.setSize(wrap.clientWidth,wrap.clientHeight); | |
| renderer.outputColorSpace=THREE.SRGBColorSpace; | |
| renderer.shadowMap.enabled=true; | |
| scene=new THREE.Scene(); | |
| scene.fog=new THREE.Fog(0x0a0a14,10,22); | |
| camera=new THREE.PerspectiveCamera(28,wrap.clientWidth/wrap.clientHeight,.1,100); | |
| camera.position.set(0,1.38,3.0); | |
| camera.lookAt(0,1.0,0); | |
| scene.add(new THREE.AmbientLight(0x6366f1,.45)); | |
| const kl=new THREE.DirectionalLight(0xffffff,1.1);kl.position.set(2,3,2);kl.castShadow=true;scene.add(kl); | |
| const fl=new THREE.DirectionalLight(0xa78bfa,.5);fl.position.set(-2,2,1);scene.add(fl); | |
| const rl=new THREE.DirectionalLight(0x60a5fa,.4);rl.position.set(0,2,-3);scene.add(rl); | |
| const pt=new THREE.PointLight(0x6366f1,.55,5);pt.position.set(0,.5,1.5);scene.add(pt); | |
| const floor=new THREE.Mesh(new THREE.PlaneGeometry(10,10), | |
| new THREE.MeshStandardMaterial({color:0x0d0d1a,roughness:.85,metalness:.1,transparent:true,opacity:.55})); | |
| floor.rotation.x=-Math.PI/2;floor.receiveShadow=true;scene.add(floor); | |
| const grid=new THREE.GridHelper(8,20,0x6366f1,0x1a1a2e); | |
| grid.material.opacity=.12;grid.material.transparent=true;scene.add(grid); | |
| clock=new THREE.Clock(); | |
| new ResizeObserver(()=>{ | |
| camera.aspect=wrap.clientWidth/wrap.clientHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(wrap.clientWidth,wrap.clientHeight); | |
| }).observe(wrap); | |
| animate(); | |
| } | |
| function animate(){ | |
| requestAnimationFrame(animate); | |
| const dt=clock.getDelta(); | |
| if(mixer)mixer.update(dt); | |
| if(vrm){ | |
| const t=clock.getElapsedTime(); | |
| try{ | |
| const sp=vrm.humanoid.getNormalizedBoneNode('spine'); | |
| if(sp){sp.rotation.z=Math.sin(t*.5)*.01;sp.rotation.x=Math.sin(t*.3)*.008;} | |
| const hd=vrm.humanoid.getNormalizedBoneNode('head'); | |
| if(hd){hd.rotation.y=Math.sin(t*.4)*.03;hd.rotation.x=Math.sin(t*.25)*.014;} | |
| }catch(e){} | |
| vrm.update(dt); | |
| } | |
| renderer.render(scene,camera); | |
| } | |
| function b64Blob(b64,mime='application/octet-stream'){ | |
| const by=Uint8Array.from(atob(b64),c=>c.charCodeAt(0)); | |
| return new Blob([by],{type:mime}); | |
| } | |
| function loadVRM(b64){ | |
| if(!b64||b64.length<100){setSt('No VRM file');hideLoader();return;} | |
| const url=URL.createObjectURL(b64Blob(b64)); | |
| 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){setSt('Invalid VRM');hideLoader();URL.revokeObjectURL(url);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 c=box.getCenter(new THREE.Vector3()); | |
| vrm.scene.position.sub(c); vrm.scene.position.y=0; | |
| URL.revokeObjectURL(url); | |
| setSt('Ani is ready ✨'); hideLoader(); startBlink(); | |
| if(idleB64)loadVRMA(idleB64,true); | |
| },undefined,e=>{console.error(e);setSt('VRM error');hideLoader();URL.revokeObjectURL(url);}); | |
| } | |
| function loadVRMA(b64,loop=true,onDone=null){ | |
| if(!vrm||!b64||b64.length<10)return; | |
| const url=URL.createObjectURL(b64Blob(b64)); | |
| const loader=new GLTFLoader(); | |
| 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 act=mixer.clipAction(clip); | |
| act.setLoop(loop?THREE.LoopRepeat:THREE.LoopOnce,Infinity); | |
| act.clampWhenFinished=!loop; act.play(); | |
| if(onDone&&!loop)mixer.addEventListener('finished',()=>{onDone();URL.revokeObjectURL(url);}); | |
| else URL.revokeObjectURL(url); | |
| },undefined,()=>URL.revokeObjectURL(url)); | |
| } | |
| function startBlink(){ | |
| if(blinkTimer)clearInterval(blinkTimer); | |
| blinkTimer=setInterval(()=>{if(autoBlinkOn&&vrm&&!isBlinking)doBlink();},2200+Math.random()*2200); | |
| } | |
| 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.max(0,Math.sin((t/dur)*Math.PI)); | |
| try{em.setValue('blink',w);}catch(e){} | |
| if(t>=dur){clearInterval(id);try{em.setValue('blink',0);}catch(e){}isBlinking=false;} | |
| },step); | |
| } | |
| function applyEmotion(name,intensity=1){ | |
| 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); curEmo=name; | |
| const ic=document.getElementById('emo-icon');const lb=document.getElementById('emo-label'); | |
| if(ic)ic.textContent=EMO_ICON[name]||'😐'; | |
| if(lb)lb.textContent=name; | |
| } | |
| function startLip(arrayBuf){ | |
| stopLip(); | |
| if(!audioCtx)audioCtx=new(window.AudioContext||window.webkitAudioContext)(); | |
| audioCtx.decodeAudioData(arrayBuf,decoded=>{ | |
| const src=audioCtx.createBufferSource();src.buffer=decoded; | |
| const an=audioCtx.createAnalyser();an.fftSize=256; | |
| src.connect(an);an.connect(audioCtx.destination);src.start(0); | |
| const d=new Uint8Array(an.frequencyBinCount); | |
| lipInterval=setInterval(()=>{ | |
| an.getByteFrequencyData(d); | |
| const v=d.slice(2,22),avg=v.reduce((a,b)=>a+b,0)/v.length; | |
| const mw=Math.min(1,avg/75); | |
| if(vrm){const em=vrm.expressionManager;if(em)try{em.setValue('aa',mw*.85);}catch(e){}} | |
| },33); | |
| src.addEventListener('ended',()=>{stopLip();autoBlinkOn=!NO_BLINK.has(curEmo);}); | |
| },()=>fallbackLip()); | |
| } | |
| function fallbackLip(){ | |
| let t=0; | |
| lipInterval=setInterval(()=>{ | |
| t+=.1;const m=.25+.45*Math.abs(Math.sin(t*7))*Math.abs(Math.sin(t*2.7)); | |
| if(vrm){const em=vrm.expressionManager;if(em)try{em.setValue('aa',m);}catch(e){}} | |
| },50); | |
| setTimeout(stopLip,4000); | |
| } | |
| function stopLip(){ | |
| if(lipInterval){clearInterval(lipInterval);lipInterval=null;} | |
| if(vrm){const em=vrm.expressionManager;if(em){try{em.setValue('aa',0);}catch(e){}}} | |
| } | |
| // Exposed to window for cross-script access | |
| window._vrmHandlePayload=function(payload){ | |
| if(!payload||payload==='{}')return; | |
| let d;try{d=JSON.parse(payload);}catch(e){return;} | |
| if(!d||d.type!=='chat_response')return; | |
| if(d.emotion)applyEmotion(d.emotion,d.intensity||.8); | |
| if(d.animation_b64&&d.animation_b64.length>10) | |
| loadVRMA(d.animation_b64,false,()=>{if(idleB64)loadVRMA(idleB64,true);}); | |
| if(d.audio_b64&&d.audio_b64.length>10){ | |
| const bin=atob(d.audio_b64),buf=new Uint8Array(bin.length); | |
| for(let i=0;i<bin.length;i++)buf[i]=bin.charCodeAt(i); | |
| startLip(buf.buffer.slice(0)); | |
| // Play audio | |
| try{new Audio('data:audio/mp3;base64,'+d.audio_b64).play().catch(()=>{});}catch(e){} | |
| } | |
| }; | |
| function mkParticles(){ | |
| 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<12;i++){ | |
| const p=document.createElement('div');p.className='particle'; | |
| const sz=2+Math.random()*3,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()*12}s;animation-delay:${Math.random()*10}s;`; | |
| side.appendChild(p); | |
| } | |
| } | |
| (function boot(){ | |
| initThree(); mkParticles(); | |
| setLd('Loading 3D model…'); | |
| const vb=document.getElementById('__vrm_b64__'); | |
| const ib=document.getElementById('__idle_b64__'); | |
| idleB64=(ib&&ib.textContent.trim().length>100)?ib.textContent.trim():''; | |
| if(vb&&vb.textContent.trim().length>100){ | |
| loadVRM(vb.textContent.trim()); | |
| }else{ | |
| setSt('model/Ani.vrm not found'); hideLoader(); | |
| } | |
| })(); | |
| </script> | |
| <script> | |
| // Chat UI — plain script (no module needed) | |
| (function(){ | |
| const msgs = document.getElementById('msgs'); | |
| const input = document.getElementById('uinput'); | |
| const btn = document.getElementById('sbtn'); | |
| const typing = document.getElementById('typing'); | |
| let lastPayload=''; | |
| function now(){const d=new Date();return d.getHours().toString().padStart(2,'0')+':'+d.getMinutes().toString().padStart(2,'0');} | |
| function addMsg(text,role){ | |
| const row=document.createElement('div');row.className='mrow'+(role==='user'?' urow':''); | |
| const av=document.createElement('div');av.className='mav '+(role==='user'?'uav':'aav');av.textContent=role==='user'?'👤':'🌸'; | |
| const mw=document.createElement('div');mw.className='mwrap'; | |
| const b=document.createElement('div');b.className='mbub '+(role==='user'?'ubub':'abub');b.textContent=text; | |
| const t=document.createElement('div');t.className='mtime';t.textContent=now(); | |
| mw.appendChild(b);mw.appendChild(t); | |
| if(role==='user'){row.appendChild(mw);row.appendChild(av);}else{row.appendChild(av);row.appendChild(mw);} | |
| msgs.insertBefore(row,document.getElementById('typing')); | |
| msgs.scrollTop=msgs.scrollHeight; | |
| } | |
| function showTyping(on){typing.classList.toggle('show',on);msgs.scrollTop=msgs.scrollHeight;} | |
| input.addEventListener('input',()=>{input.style.height='auto';input.style.height=Math.min(input.scrollHeight,100)+'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); | |
| // Talk to Gradio via parent window postMessage | |
| window.parent.postMessage({type:'ani_chat',message:txt},'*'); | |
| } | |
| // Receive payload from parent | |
| window.addEventListener('message',e=>{ | |
| const d=e.data; | |
| if(!d||d.type!=='ani_payload')return; | |
| const p=d.payload; | |
| if(!p||p===lastPayload)return; | |
| lastPayload=p; | |
| showTyping(false); | |
| btn.disabled=false; | |
| try{ | |
| const obj=JSON.parse(p); | |
| if(obj.response)addMsg(obj.response,'ai'); | |
| if(window._vrmHandlePayload)window._vrmHandlePayload(p); | |
| }catch(ex){} | |
| }); | |
| })(); | |
| </script> | |
| """ | |
| def build_inner_html(): | |
| vrm_b64_escaped = VRM_B64 if VRM_B64 else "" | |
| idle_b64_escaped = IDLE_B64 if IDLE_B64 else "" | |
| return f"""<!DOCTYPE html> | |
| <html lang="en"> | |
| <head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/> | |
| {INNER_CSS} | |
| </head> | |
| <body> | |
| <div id="__vrm_b64__" style="display:none">{vrm_b64_escaped}</div> | |
| <div id="__idle_b64__" style="display:none">{idle_b64_escaped}</div> | |
| <div id="app"> | |
| <div id="vrm-side"> | |
| <canvas id="vrm-canvas"></canvas> | |
| <div id="loader"> | |
| <div class="ld-logo">🌸</div> | |
| <div class="ld-title">Ani</div> | |
| <div class="ld-bar"><div class="ld-fill"></div></div> | |
| <div class="ld-status" id="ldst">Starting…</div> | |
| </div> | |
| <div id="status-bar"><div id="sdot"></div><span id="stext">Loading…</span></div> | |
| <div id="emo-badge"><span id="emo-icon">😐</span><span id="emo-label">neutral</span></div> | |
| </div> | |
| <div id="chat-side"> | |
| <div id="chat-header"> | |
| <div id="chat-title">✨ Ani</div> | |
| <div id="chat-sub">AI Anime Companion</div> | |
| <div id="model-chip">🤖 Qwen2.5-0.5B · ZeroGPU</div> | |
| </div> | |
| <div id="msgs"> | |
| <div class="mrow"> | |
| <div class="mav aav">🌸</div> | |
| <div class="mwrap"> | |
| <div class="mbub abub">Hello! I'm Ani ✨ How can I help you today?</div> | |
| <div class="mtime">just now</div> | |
| </div> | |
| </div> | |
| <div id="typing"> | |
| <div class="mav aav">🌸</div> | |
| <div class="mwrap"> | |
| <div class="mbub abub" style="display:flex;align-items:center;gap:5px;padding:9px 12px;"> | |
| <div class="td"></div><div class="td"></div><div class="td"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="input-area"> | |
| <div id="irow"> | |
| <textarea id="uinput" placeholder="Talk to Ani…" rows="1"></textarea> | |
| <button id="sbtn">➤</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| {INNER_JS} | |
| </body> | |
| </html>""" | |
| INNER_HTML = build_inner_html() | |
| # ══════════════════════════════════════════════════════════════════════════════ | |
| # Gradio app | |
| # ══════════════════════════════════════════════════════════════════════════════ | |
| GRADIO_CSS = """ | |
| .gradio-container { max-width: 100% !important; padding: 8px !important; background: #0a0a0f !important; } | |
| footer { display: none !important; } | |
| #ani-iframe { width:100%; border:none; border-radius:12px; height:608px; display:block; } | |
| #payload-box textarea { display:none !important; } | |
| #payload-box { display:none !important; } | |
| #chat-hist { display:none !important; } | |
| """ | |
| with gr.Blocks(title="Ani AI Companion") as demo: | |
| gr.HTML("<style>" + GRADIO_CSS.replace("<style>","").replace("</style>","") + "</style>") | |
| chat_history = gr.State([]) | |
| payload_store = gr.State("{}") | |
| # ── Iframe holding the full custom UI ── | |
| iframe_html = f""" | |
| <iframe id="ani-iframe" | |
| srcdoc="{INNER_HTML.replace(chr(34), '"').replace(chr(39), ''')}" | |
| sandbox="allow-scripts allow-same-origin" | |
| style="width:100%;height:608px;border:none;border-radius:12px;display:block;" | |
| ></iframe> | |
| <script> | |
| // Bridge: receive messages from iframe, call Gradio, send payload back | |
| window.addEventListener('message', function(e) {{ | |
| if (!e.data || e.data.type !== 'ani_chat') return; | |
| const msg = e.data.message; | |
| if (!msg) return; | |
| // Trigger Gradio submit | |
| const inp = document.querySelector('#gr-msg-input textarea') || | |
| document.querySelector('#gr-msg-input input'); | |
| if (inp) {{ | |
| const nv = Object.getOwnPropertyDescriptor( | |
| inp.tagName === 'TEXTAREA' ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype, | |
| 'value' | |
| ); | |
| if (nv && nv.set) nv.set.call(inp, msg); | |
| inp.dispatchEvent(new Event('input', {{bubbles: true}})); | |
| }} | |
| setTimeout(() => {{ | |
| const gb = document.getElementById('gr-submit-btn'); | |
| if (gb) gb.click(); | |
| }}, 60); | |
| }}); | |
| // Watch payload textbox and forward to iframe | |
| function watchPayload() {{ | |
| const sel = [ | |
| '#gr-payload-out textarea', | |
| '#gr-payload-out input', | |
| ]; | |
| let last = ''; | |
| setInterval(() => {{ | |
| let val = ''; | |
| for (const s of sel) {{ | |
| const el = document.querySelector(s); | |
| if (el && el.value && el.value !== '{{}}') {{ val = el.value; break; }} | |
| }} | |
| if (!val || val === last) return; | |
| last = val; | |
| const iframe = document.getElementById('ani-iframe'); | |
| if (iframe && iframe.contentWindow) {{ | |
| iframe.contentWindow.postMessage({{type:'ani_payload', payload:val}}, '*'); | |
| }} | |
| }}, 300); | |
| }} | |
| watchPayload(); | |
| </script> | |
| """ | |
| gr.HTML(iframe_html) | |
| # ── Hidden Gradio controls ── | |
| with gr.Row(visible=False): | |
| gr_msg = gr.Textbox(value="", label="msg", elem_id="gr-msg-input") | |
| gr_btn = gr.Button("go", elem_id="gr-submit-btn") | |
| gr_pay = gr.Textbox(value="{}", label="payload",elem_id="gr-payload-out") | |
| gr_hist = gr.Chatbot(value=[], label="history", elem_id="gr-chat-hist") | |
| # ── Backend ── | |
| def on_submit(message: str, history: list): | |
| if not message or not message.strip(): | |
| return history, "{}" | |
| new_history, payload = chat(message, history)[:2] | |
| return new_history, payload | |
| gr_btn.click( | |
| fn=on_submit, | |
| inputs=[gr_msg, chat_history], | |
| outputs=[chat_history, gr_pay], | |
| ) | |
| # Sync state → chatbot widget (hidden but keeps history) | |
| chat_history.change( | |
| fn=lambda h: h, | |
| inputs=[chat_history], | |
| outputs=[gr_hist], | |
| ) | |
| # JS: whenever gr_pay changes, the watchPayload loop above picks it up automatically | |
| if __name__ == "__main__": | |
| demo.launch(server_name="0.0.0.0", server_port=7860) |