Spaces:

fernandopruebas
/

avatar-tts-lipsync

Running

App Files Files Community

fernandopruebas commited on Aug 29, 2025

Commit

529b413

verified ·

1 Parent(s): 52149a5

Upload 2 files

Browse files

Files changed (3) hide show

.gitattributes +1 -0
index.html +188 -19
persona.glb +3 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+persona.glb filter=lfs diff=lfs merge=lfs -text

index.html CHANGED Viewed

@@ -1,19 +1,188 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!doctype html>
+<html lang="es">
+<head>
+  <meta charset="utf-8" />
+  <title>Avatar 3D con Voz + Lipsync (Hugging Face Space)</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <style>
+    html, body { margin:0; height:100%; background:#0b0d12; color:#e8e8e8; font-family:system-ui, Arial; }
+    #ui {
+      position: fixed; top: 12px; left: 12px; right: 12px; z-index: 10;
+      display: grid; gap: 8px; grid-template-columns: 1fr auto auto;
+      background: rgba(20,22,30,0.8); backdrop-filter: blur(8px);
+      border: 1px solid #2a2f3a; border-radius: 12px; padding: 12px;
+    }
+    #text { grid-column: 1 / -1; padding: 10px; border-radius: 8px; border: 1px solid #2a2f3a; background:#111522; color:#eee; }
+    .btn {
+      padding: 10px 14px; border: 1px solid #2a2f3a; background:#131827; color:#fff; border-radius: 10px;
+      cursor: pointer; font-weight: 600;
+    }
+    #canvas-wrap { position: absolute; inset:0; }
+    #help { position: fixed; bottom: 12px; left:12px; right:12px; color:#aeb3c2; font-size:12px; opacity:.9 }
+  </style>
+</head>
+<body>
+  <div id="ui">
+    <input id="text" placeholder="Escribe algo..." value="Hola, soy tu avatar 3D con lipsync desde Hugging Face." />
+    <button id="speak" class="btn"▶️ Hablar</button>
+    <button id="stop" class="btn">⏹️ Detener</button>
+  </div>
+  <div id="canvas-wrap"></div>
+  <div id="help">
+    Asegúrate de subir también <code>avatar.glb</code> al Space.
+  </div>
+  <!-- Three.js -->
+  <script src="https://unpkg.com/three@0.159.0/build/three.min.js"></script>
+  <script src="https://unpkg.com/three@0.159.0/examples/js/controls/OrbitControls.js"></script>
+  <script src="https://unpkg.com/three@0.159.0/examples/js/loaders/GLTFLoader.js"></script>
+  <script>
+  // ======= Escena =======
+  let scene, camera, renderer, controls;
+  let avatar, jawBone = null, mouthTargets = [];
+  let audioCtx, analyser, dataArray, srcNode, audioEl, rafLip;
+  init3D();
+  loadAvatar('avatar.glb');
+  function init3D() {
+    scene = new THREE.Scene();
+    scene.background = new THREE.Color(0x0b0d12);
+    camera = new THREE.PerspectiveCamera(50, innerWidth/innerHeight, 0.1, 200);
+    camera.position.set(0, 1.6, 2.8);
+    renderer = new THREE.WebGLRenderer({ antialias: true });
+    renderer.setPixelRatio(devicePixelRatio);
+    renderer.setSize(innerWidth, innerHeight);
+    document.getElementById('canvas-wrap').appendChild(renderer.domElement);
+    controls = new THREE.OrbitControls(camera, renderer.domElement);
+    controls.target.set(0, 1.5, 0);
+    controls.update();
+    const hemi = new THREE.HemisphereLight(0xffffff, 0x222233, 1.0);
+    scene.add(hemi);
+    const dir = new THREE.DirectionalLight(0xffffff, 1.0);
+    dir.position.set(3,5,3);
+    scene.add(dir);
+    animate();
+    addEventListener('resize', onResize);
+  }
+  function onResize() {
+    camera.aspect = innerWidth/innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(innerWidth, innerHeight);
+  }
+  function animate() {
+    requestAnimationFrame(animate);
+    renderer.render(scene, camera);
+  }
+  function loadAvatar(url) {
+    new THREE.GLTFLoader().load(url, (gltf) => {
+      avatar = gltf.scene;
+      scene.add(avatar);
+      // busca hueso mandíbula
+      avatar.traverse(o => {
+        if (o.isBone) {
+          const n = o.name.toLowerCase();
+          if (n.includes('jaw') || n.includes('mandible')) jawBone = o;
+        }
+      });
+      // busca morph targets de boca
+      avatar.traverse(o => {
+        if (o.isMesh && o.morphTargetDictionary) {
+          for (const [name, idx] of Object.entries(o.morphTargetDictionary)) {
+            if (name.toLowerCase().includes('mouth') || name.toLowerCase().includes('viseme'))
+              mouthTargets.push({ mesh:o, index:idx });
+          }
+        }
+      });
+    });
+  }
+  // ======= TTS directo con HF Inference API =======
+  const HF_TTS_URL = "https://api-inference.huggingface.co/models/facebook/mms-tts-spa";
+  async function tts(text) {
+    const r = await fetch(HF_TTS_URL, {
+      method: 'POST',
+      headers: { 'Content-Type':'application/json' },
+      body: JSON.stringify({ inputs: text })
+    });
+    if (!r.ok) throw new Error(await r.text());
+    return await r.blob();
+  }
+  // ======= Lipsync =======
+  function setupAnalyser(streamEl) {
+    audioCtx = audioCtx || new (window.AudioContext || window.webkitAudioContext)();
+    analyser = audioCtx.createAnalyser();
+    analyser.fftSize = 2048;
+    dataArray = new Uint8Array(analyser.frequencyBinCount);
+    if (srcNode) srcNode.disconnect();
+    srcNode = audioCtx.createMediaElementSource(streamEl);
+    srcNode.connect(analyser);
+    analyser.connect(audioCtx.destination);
+  }
+  function startLipsync() {
+    cancelAnimationFrame(rafLip);
+    const loop = () => {
+      rafLip = requestAnimationFrame(loop);
+      analyser.getByteTimeDomainData(dataArray);
+      let sum = 0;
+      for (let i=0;i<dataArray.length;i++) {
+        const v = (dataArray[i]-128)/128;
+        sum += v*v;
+      }
+      const rms = Math.sqrt(sum/dataArray.length);
+      applyMouth(rms);
+    };
+    loop();
+  }
+  function stopLipsync() {
+    cancelAnimationFrame(rafLip);
+    applyMouth(0);
+  }
+  function applyMouth(power) {
+    const open = Math.min(1.0, power*6);
+    if (mouthTargets.length) {
+      mouthTargets.forEach(mt => mt.mesh.morphTargetInfluences[mt.index] = open);
+    } else if (jawBone) {
+      jawBone.rotation.x = -open*0.4;
+    }
+  }
+  function stopAllAudio() {
+    if (audioEl) { audioEl.pause(); audioEl.src = ''; audioEl = null; }
+    if (srcNode) { try{srcNode.disconnect();}catch(e){}; srcNode = null; }
+    stopLipsync();
+  }
+  // ======= UI =======
+  const elText = document.getElementById('text');
+  document.getElementById('speak').onclick = async () => {
+    try {
+      stopAllAudio();
+      const blob = await tts(elText.value.trim() || "Hola, probando voz y lipsync.");
+      audioEl = new Audio(URL.createObjectURL(blob));
+      audioEl.onplay = () => { setupAnalyser(audioEl); startLipsync(); };
+      audioEl.onended = stopAllAudio;
+      await audioEl.play();
+    } catch (e) { alert("Error TTS: " + e.message); }
+  };
+  document.getElementById('stop').onclick = stopAllAudio;
+  </script>
+</body>
+</html>

persona.glb ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:9b707d6cd9dfe6ea094abb30a75af22b34c8d41146c958baee28106126276626
+size 2057600