Spaces:

bep40
/

gemma-avatar

Paused

App Files Files Community

bep40 commited on 26 days ago

Commit

3a3c80c

verified ·

1 Parent(s): 6d9ce55

Upload add-arkit-browser.html

Browse files

Files changed (1) hide show

add-arkit-browser.html +183 -0

add-arkit-browser.html ADDED Viewed

	@@ -0,0 +1,183 @@

+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Add ARKit Viseme to GLB - Browser Tool</title>
+  <script type="module">
+    // Import glTF-Transform từ CDN
+    import { Document, NodeIO } from 'https://cdn.skypack.dev/@gltf-transform/core';
+    import { dedup, prune } from 'https://cdn.skypack.dev/@gltf-transform/functions';
+    // ARKit 52 blendshape names
+    const ARKIT_NAMES = [
+      'jawOpen', 'jawForward', 'jawLeft', 'jawRight',
+      'mouthClose', 'mouthDimpleLeft', 'mouthDimpleRight', 'mouthFrownLeft',
+      'mouthFrownRight', 'mouthFunnel', 'mouthLeft', 'mouthRight',
+      'mouthRollLower', 'mouthRollUpper', 'mouthShrugLower', 'mouthShrugUpper',
+      'mouthSmileLeft', 'mouthSmileRight', 'mouthStretchLeft', 'mouthStretchRight',
+      'mouthUpperUpLeft', 'mouthUpperUpRight', 'mouthLowerDownLeft', 'mouthLowerDownRight',
+      'tongueOut',
+      'eyeBlinkLeft', 'eyeBlinkRight', 'eyeSquintLeft', 'eyeSquintRight',
+      'eyeWideLeft', 'eyeWideRight'
+    ];
+    // Viseme chính cho lip-sync
+    const VISEME_NAMES = [
+      'sil', 'PP', 'FF', 'TH', 'DD', 'kk', 'kk', 'CH', 'SS', 'nn',
+      'RR', 'aa', 'E', 'ih', 'oh', 'oo'
+    ];
+    window.runTool = async function() {
+      const statusEl = document.getElementById('status');
+      const outputEl = document.getElementById('output');
+      try {
+        statusEl.textContent = 'Select lisamy.glb file...';
+        const lisamyFile = document.getElementById('lisamy-input').files[0];
+        if (!lisamyFile) throw new Error('Chưa chọn file lisamy.glb');
+        statusEl.textContent = 'Select donor GLB file (vuong.glb hoặc ready_player_me)...';
+        const donorFile = document.getElementById('donor-input').files[0];
+        if (!donorFile) throw new Error('Chưa chọn file donor');
+        const io = new NodeIO();
+        // Load lisamy
+        const lisamyBuffer = await lisamyFile.arrayBuffer();
+        const docLisa = io.read(lisamyBuffer);
+        // Load donor
+        const donorBuffer = await donorFile.arrayBuffer();
+        const docDonor = io.read(donorBuffer);
+        // Find donor morph targets
+        let donorMesh = null, donorPrim = null;
+        for (const mesh of docDonor.getRoot().listMeshes()) {
+          for (const prim of mesh.listPrimitives()) {
+            if (prim.listTargets().length > 0) {
+              donorMesh = mesh; donorPrim = prim; break;
+            }
+          }
+          if (donorPrim) break;
+        }
+        if (!donorPrim) throw new Error('Donor không có morph targets');
+        const donorPos = donorPrim.getAttribute('POSITION');
+        const donorCount = donorPos.getCount();
+        const donorTargets = donorPrim.listTargets();
+        // Find recipient with same topology
+        let recipientMesh = null, recipientPrim = null;
+        for (const mesh of docLisa.getRoot().listMeshes()) {
+          for (const prim of mesh.listPrimitives()) {
+            const pos = prim.getAttribute('POSITION');
+            if (pos && pos.getCount() === donorCount) {
+              recipientMesh = mesh; recipientPrim = prim; break;
+            }
+          }
+          if (recipientPrim) break;
+        }
+        if (recipientPrim) {
+          // Copy morph targets
+          for (const srcTarget of donorTargets) {
+            const name = srcTarget.getName();
+            const disp = srcTarget.getDisplacement();
+            if (!disp) continue;
+            const newTarget = docLisa.createPrimitiveTarget();
+            newTarget.setName(name);
+            newTarget.setDisplacement(new Float32Array(disp.getArray()));
+            const normals = srcTarget.getNormal();
+            if (normals) newTarget.setNormal(new Float32Array(normals.getArray()));
+            recipientPrim.addTarget(newTarget);
+          }
+          recipientMesh.setWeights(new Array(donorTargets.length).fill(0));
+          statusEl.textContent = `Copied ${donorTargets.length} morph targets (same topology)`;
+        } else {
+          // Add empty morph targets
+          let bestMesh = null, bestPrim = null, bestCount = 0;
+          for (const mesh of docLisa.getRoot().listMeshes()) {
+            for (const prim of mesh.listPrimitives()) {
+              const pos = prim.getAttribute('POSITION');
+              if (pos && pos.getCount() > bestCount) {
+                bestCount = pos.getCount();
+                bestMesh = mesh;
+                bestPrim = prim;
+              }
+            }
+          }
+          if (!bestPrim) throw new Error('No mesh found in lisamy.glb');
+          for (const t of donorTargets) {
+            const target = docLisa.createPrimitiveTarget();
+            target.setName(t.getName());
+            target.setDisplacement(new Float32Array(bestCount * 3));
+            bestPrim.addTarget(target);
+          }
+          bestMesh.setWeights(new Array(donorTargets.length).fill(0));
+          statusEl.textContent = `Added ${donorTargets.length} zero-displacement morph targets`;
+        }
+        // Save and download
+        const outputBuffer = await io.writeBuffer(docLisa);
+        const blob = new Blob([outputBuffer], { type: 'model/gltf-binary' });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = 'lisamy_arkit.glb';
+        link.textContent = '⬇️ Download lisamy_arkit.glb';
+        link.style.display = 'block';
+        link.style.marginTop = '10px';
+        outputEl.innerHTML = '';
+        outputEl.appendChild(link);
+      } catch (err) {
+        statusEl.textContent = 'Lỗi: ' + err.message;
+        console.error(err);
+      }
+    };
+    window.loadDonorPresets = function() {
+      // Pre-load donor files
+      document.getElementById('donor-presets').innerHTML = `
+        <p>Donor options (download one):</p>
+        <a href="https://huggingface.co/spaces/bep40/gemma-avatar/resolve/main/public/avatars/vuong.glb" download>vuong.glb</a> |
+        <a href="https://huggingface.co/spaces/bep40/gemma-avatar/resolve/main/public/avatars/ready_player_me_1.glb" download>ready_player_me_1.glb</a>
+      `;
+    };
+  </script>
+</head>
+<body onload="loadDonorPresets()">
+  <h1>Thêm ARKit Viseme Morph Targets vào GLB</h1>
+  <p><b>Tool chạy trên browser</b> - không cần cài đặt</p>
+  <h3>Step 1: Chọn file lisamy.glb</h3>
+  <input type="file" id="lisamy-input" accept=".glb,.gltf">
+  <h3>Step 2: Chọn donor file (có morph targets)</h3>
+  <div id="donor-presets"></div>
+  <input type="file" id="donor-input" accept=".glb,.gltf">
+  <p><small>Donor: để copy morph targets - vuong.glb hoặc ready_player_me_1.glb</small></p>
+  <h3>Step 3: Chạy</h3>
+  <button onclick="runTool()">Thêm Morph Targets</button>
+  <p id="status">Sẵn sàng...</p>
+  <div id="output"></div>
+  <hr>
+  <h3>Lưu ý:</h3>
+  <ul>
+    <li>Nếu donor có cùng số vertices → copy chính xác morph targets</li>
+    <li>Nếu khác → thêm morph targets tên đúng nhưng displacement=0 (cần Blender để sculpt)</li>
+    <li>Kết quả download file <b>lisamy_arkit.glb</b></li>
+  </ul>
+</body>
+</html>