Update frontend/app.js

frontend/app.js

@@ -1,62 +1,135 @@
 import * as THREE from "three";
 import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
 
-let mesh, timeline = [];
-let audio, startTime;
+let mesh = null;
+let timeline = [];
+let audio = null;
+let startTime = 0;
 
+// ---------------- SCENE ----------------
 const scene = new THREE.Scene();
-const cam = new THREE.PerspectiveCamera(40, 1, 0.1, 10);
-cam.position.z = 1;
+scene.background = new THREE.Color(0x111111);
 
+// Camera (FRONT OF FACE)
+const camera = new THREE.PerspectiveCamera(35, 1, 0.1, 10);
+camera.position.set(0, 0.05, 0.75);
+
+// Renderer
 const renderer = new THREE.WebGLRenderer({ antialias: true });
-renderer.setSize(500, 500);
+renderer.setSize(520, 520);
+renderer.setPixelRatio(window.devicePixelRatio);
 document.body.appendChild(renderer.domElement);
 
-scene.add(new THREE.AmbientLight(0xffffff, 1));
+// Lights
+scene.add(new THREE.AmbientLight(0xffffff, 0.8));
+const dir = new THREE.DirectionalLight(0xffffff, 0.6);
+dir.position.set(0, 1, 1);
+scene.add(dir);
+
+// ---------------- LOAD MODEL ----------------
+new GLTFLoader().load("facecap.glb", (gltf) => {
+  scene.add(gltf.scene);
 
-new GLTFLoader().load("facecap.glb", g => {
-  scene.add(g.scene);
-  g.scene.traverse(o => {
-    if (o.morphTargetDictionary) mesh = o;
+  gltf.scene.traverse((o) => {
+    if (o.morphTargetDictionary) {
+      mesh = o;
+      console.log("FOUND FACE:", o.name);
+      console.log("MORPHS:", o.morphTargetDictionary);
+    }
   });
+
+  // Center model
+  const box = new THREE.Box3().setFromObject(gltf.scene);
+  const center = box.getCenter(new THREE.Vector3());
+  gltf.scene.position.sub(center);
 });
 
-function applyViseme(v) {
+// ---------------- UI ----------------
+const textInput = document.getElementById("text");
+const speakBtn = document.getElementById("speak");
+
+// ---------------- VISEMES ----------------
+const VISEME_MAP = {
+  A: "jawOpen",
+  E: "mouthSmile_L",
+  O: "mouthFunnel",
+  BMP: "mouthClose",
+  FV: "mouthPucker",
+  neutral: null,
+};
+
+function applyVisemeSmooth(name, strength = 1) {
   if (!mesh) return;
-  mesh.morphTargetInfluences.fill(0);
-  const map = {
-    A: "jawOpen",
-    E: "mouthSmile_L",
-    O: "mouthFunnel",
-    BMP: "mouthClose",
-    FV: "mouthPucker"
-  };
-  const k = map[v];
-  if (k && mesh.morphTargetDictionary[k] !== undefined)
-    mesh.morphTargetInfluences[mesh.morphTargetDictionary[k]] = 1;
+
+  const inf = mesh.morphTargetInfluences;
+  const dict = mesh.morphTargetDictionary;
+
+  // decay all
+  for (let i = 0; i < inf.length; i++) {
+    inf[i] *= 0.75;
+  }
+
+  if (!name) return;
+  const key = VISEME_MAP[name];
+  if (!key || dict[key] === undefined) return;
+
+  inf[dict[key]] = Math.min(1, inf[dict[key]] + 0.6 * strength);
 }
 
-document.getElementById("speak").onclick = async () => {
+// ---------------- SPEAK ----------------
+speakBtn.onclick = async () => {
+  if (!textInput.value.trim()) return;
+
   const res = await fetch("/speak", {
     method: "POST",
-    headers: {"Content-Type":"application/json"},
-    body: JSON.stringify({ text: text.value })
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ text: textInput.value }),
   });
+
   const data = await res.json();
-  timeline = data.timeline;
+  timeline = data.timeline || [];
 
+  if (audio) audio.pause();
   audio = new Audio(data.audio);
   await audio.play();
+
   startTime = performance.now() / 1000;
 };
 
+// ---------------- ANIMATION LOOP ----------------
+let t = 0;
+
 function animate() {
   requestAnimationFrame(animate);
-  if (audio && !audio.paused) {
-    const t = performance.now()/1000 - startTime;
-    const cur = timeline.findLast(x => x.t <= t);
-    if (cur) applyViseme(cur.v);
+
+  // Idle breathing + micro head motion
+  if (mesh) {
+    mesh.rotation.y = Math.sin(t * 0.3) * 0.015;
+    mesh.rotation.x = Math.sin(t * 0.2) * 0.01;
+  }
+
+  // Lip sync
+  if (audio && !audio.paused && timeline.length) {
+    const now = performance.now() / 1000 - startTime;
+    const cur = timeline.findLast((x) => x.t <= now);
+    if (cur) applyVisemeSmooth(cur.v);
   }
-  renderer.render(scene, cam);
+
+  // After speech → gentle smile
+  if (audio && audio.ended && mesh) {
+    applyVisemeSmooth("E", 0.2);
+  }
+
+  renderer.render(scene, camera);
+  t += 0.03;
 }
+
 animate();
+
+// ---------------- RESIZE ----------------
+window.addEventListener("resize", () => {
+  const size = Math.min(window.innerWidth, window.innerHeight) - 40;
+  renderer.setSize(size, size);
+  camera.aspect = 1;
+  camera.updateProjectionMatrix();
+});