npm - talking-head-studio - Versions diffs - 0.2.0 - Mend

talking-head-studio 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (112) hide show

package/LICENSE +21 -0
package/README.md +459 -0
package/dist/TalkingHead.d.ts +35 -0
package/dist/TalkingHead.d.ts.map +1 -0
package/dist/TalkingHead.js +107 -0
package/dist/TalkingHead.web.d.ts +35 -0
package/dist/TalkingHead.web.d.ts.map +1 -0
package/dist/TalkingHead.web.js +117 -0
package/dist/__tests__/TalkingHead.test.d.ts +2 -0
package/dist/__tests__/TalkingHead.test.d.ts.map +1 -0
package/dist/__tests__/TalkingHead.test.js +23 -0
package/dist/__tests__/sketchfab.test.d.ts +2 -0
package/dist/__tests__/sketchfab.test.d.ts.map +1 -0
package/dist/__tests__/sketchfab.test.js +21 -0
package/dist/appearance/apply.d.ts +7 -0
package/dist/appearance/apply.d.ts.map +1 -0
package/dist/appearance/apply.js +56 -0
package/dist/appearance/index.d.ts +5 -0
package/dist/appearance/index.d.ts.map +1 -0
package/dist/appearance/index.js +3 -0
package/dist/appearance/matchers.d.ts +3 -0
package/dist/appearance/matchers.d.ts.map +1 -0
package/dist/appearance/matchers.js +32 -0
package/dist/appearance/schema.d.ts +9 -0
package/dist/appearance/schema.d.ts.map +1 -0
package/dist/appearance/schema.js +20 -0
package/dist/editor/AvatarCanvas.d.ts +16 -0
package/dist/editor/AvatarCanvas.d.ts.map +1 -0
package/dist/editor/AvatarCanvas.js +85 -0
package/dist/editor/AvatarCanvasErrorBoundary.d.ts +17 -0
package/dist/editor/AvatarCanvasErrorBoundary.d.ts.map +1 -0
package/dist/editor/AvatarCanvasErrorBoundary.js +41 -0
package/dist/editor/AvatarModel.d.ts +12 -0
package/dist/editor/AvatarModel.d.ts.map +1 -0
package/dist/editor/AvatarModel.js +31 -0
package/dist/editor/RigidAccessory.d.ts +15 -0
package/dist/editor/RigidAccessory.d.ts.map +1 -0
package/dist/editor/RigidAccessory.js +76 -0
package/dist/editor/SkinnedClothing.d.ts +7 -0
package/dist/editor/SkinnedClothing.d.ts.map +1 -0
package/dist/editor/SkinnedClothing.js +88 -0
package/dist/editor/index.d.ts +6 -0
package/dist/editor/index.d.ts.map +1 -0
package/dist/editor/index.js +4 -0
package/dist/editor/types.d.ts +28 -0
package/dist/editor/types.d.ts.map +1 -0
package/dist/editor/types.js +1 -0
package/dist/html.d.ts +13 -0
package/dist/html.d.ts.map +1 -0
package/dist/html.js +560 -0
package/dist/index.d.ts +4 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +2 -0
package/dist/index.web.d.ts +4 -0
package/dist/index.web.d.ts.map +1 -0
package/dist/index.web.js +2 -0
package/dist/sketchfab/api.d.ts +12 -0
package/dist/sketchfab/api.d.ts.map +1 -0
package/dist/sketchfab/api.js +52 -0
package/dist/sketchfab/categories.d.ts +5 -0
package/dist/sketchfab/categories.d.ts.map +1 -0
package/dist/sketchfab/categories.js +124 -0
package/dist/sketchfab/index.d.ts +7 -0
package/dist/sketchfab/index.d.ts.map +1 -0
package/dist/sketchfab/index.js +3 -0
package/dist/sketchfab/types.d.ts +51 -0
package/dist/sketchfab/types.d.ts.map +1 -0
package/dist/sketchfab/types.js +1 -0
package/dist/sketchfab/useSketchfabSearch.d.ts +19 -0
package/dist/sketchfab/useSketchfabSearch.d.ts.map +1 -0
package/dist/sketchfab/useSketchfabSearch.js +78 -0
package/dist/voice/convertToWav.d.ts +6 -0
package/dist/voice/convertToWav.d.ts.map +1 -0
package/dist/voice/convertToWav.js +74 -0
package/dist/voice/index.d.ts +6 -0
package/dist/voice/index.d.ts.map +1 -0
package/dist/voice/index.js +3 -0
package/dist/voice/useAudioPlayer.d.ts +11 -0
package/dist/voice/useAudioPlayer.d.ts.map +1 -0
package/dist/voice/useAudioPlayer.js +61 -0
package/dist/voice/useAudioRecording.d.ts +14 -0
package/dist/voice/useAudioRecording.d.ts.map +1 -0
package/dist/voice/useAudioRecording.js +162 -0
package/package.json +120 -0
package/src/TalkingHead.tsx +207 -0
package/src/TalkingHead.web.tsx +210 -0
package/src/__tests__/TalkingHead.test.tsx +32 -0
package/src/__tests__/sketchfab.test.ts +24 -0
package/src/appearance/apply.ts +94 -0
package/src/appearance/index.ts +4 -0
package/src/appearance/matchers.ts +43 -0
package/src/appearance/schema.ts +35 -0
package/src/editor/AvatarCanvas.tsx +167 -0
package/src/editor/AvatarCanvasErrorBoundary.tsx +64 -0
package/src/editor/AvatarModel.tsx +49 -0
package/src/editor/RigidAccessory.tsx +130 -0
package/src/editor/SkinnedClothing.tsx +114 -0
package/src/editor/index.ts +5 -0
package/src/editor/r3f-shim.d.ts +34 -0
package/src/editor/types.ts +30 -0
package/src/html.ts +572 -0
package/src/index.ts +8 -0
package/src/index.web.ts +8 -0
package/src/sketchfab/api.ts +82 -0
package/src/sketchfab/categories.ts +127 -0
package/src/sketchfab/index.ts +6 -0
package/src/sketchfab/types.ts +40 -0
package/src/sketchfab/useSketchfabSearch.ts +110 -0
package/src/voice/convertToWav.ts +87 -0
package/src/voice/index.ts +7 -0
package/src/voice/useAudioPlayer.ts +78 -0
package/src/voice/useAudioRecording.ts +207 -0

package/dist/html.js ADDED Viewed

@@ -0,0 +1,560 @@
+export function buildAvatarHtml(config) {
+    return `
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { background: transparent; overflow: hidden; width: 100vw; height: 100vh; }
+  #avatar { width: 100%; height: 100%; }
+</style>
+<script type="importmap">
+{
+  "imports": {
+    "three": "https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.module.js",
+    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.180.0/examples/jsm/",
+    "talkinghead": "https://cdn.jsdelivr.net/gh/met4citizen/TalkingHead@1.7/modules/talkinghead.mjs"
+  }
+}
+</script>
+</head>
+<body>
+<div id="avatar"></div>
+<script type="module">
+const AUTH_TOKEN = ${JSON.stringify(config.authToken ?? null)};
+const TALKING_HEAD_URL = 'https://cdn.jsdelivr.net/gh/met4citizen/TalkingHead@1.7/modules/talkinghead.mjs';
+const HEAD_AUDIO_URL = 'https://cdn.jsdelivr.net/gh/met4citizen/HeadAudio@main/dist/headaudio.min.mjs';
+const HEAD_AUDIO_WORKLET = 'https://cdn.jsdelivr.net/gh/met4citizen/HeadAudio@main/dist/headworklet.min.mjs';
+const HEAD_AUDIO_MODEL = 'https://cdn.jsdelivr.net/gh/met4citizen/HeadAudio@main/dist/model-en-mixed.bin';
+const AVATAR_URL = ${JSON.stringify(config.avatarUrl)};
+const INITIAL_MOOD = ${JSON.stringify(config.mood)};
+const CAMERA_VIEW = ${JSON.stringify(config.cameraView)};
+const CAMERA_DISTANCE = ${config.cameraDistance};
+let HAIR_COLOR = ${JSON.stringify(config.initialHairColor ?? null)};
+let SKIN_COLOR = ${JSON.stringify(config.initialSkinColor ?? null)};
+let EYE_COLOR = ${JSON.stringify(config.initialEyeColor ?? null)};
+const container = document.getElementById('avatar');
+let head = null;
+let headaudio = null;
+let mouthMeshes = [];
+let staticModel = null;
+function log(msg) {
+  window.ReactNativeWebView?.postMessage(JSON.stringify({ type: 'log', message: msg }));
+}
+async function loadWithAuth(url) {
+  if (AUTH_TOKEN && !url.startsWith('https://cdn.jsdelivr.net')) {
+    log('Fetching authenticated model: ' + url);
+    const resp = await fetch(url, { headers: { 'Authorization': 'Bearer ' + AUTH_TOKEN } });
+    if (!resp.ok) throw new Error('Failed to fetch model: ' + resp.status + ' ' + resp.statusText);
+    const blob = await resp.blob();
+    return URL.createObjectURL(blob);
+  }
+  return url;
+}
+function applyColorOverrides() {
+  const root = (head && head.armature) ? head.armature : staticModel;
+  if (!root) return;
+  root.traverse((child) => {
+    if (!child.isMesh || !child.material) return;
+    const mats = Array.isArray(child.material) ? child.material : [child.material];
+    mats.forEach((mat) => {
+      const name = (mat.name || '').toLowerCase();
+      if (HAIR_COLOR && (name.includes('hair') || name.includes('fur'))) {
+        mat.color?.set(HAIR_COLOR);
+      }
+      if (SKIN_COLOR && (name.includes('skin') || name.includes('body') || name.includes('face'))) {
+        mat.color?.set(SKIN_COLOR);
+      }
+      if (EYE_COLOR && (name.includes('eye') || name.includes('iris'))) {
+        mat.color?.set(EYE_COLOR);
+      }
+    });
+  });
+}
+let staticMixer = null;
+async function loadStaticFallback(loadedAvatarUrl) {
+  try {
+    const THREE = await import('three');
+    const { GLTFLoader } = await import('three/addons/loaders/GLTFLoader.js');
+    const { OrbitControls } = await import('three/addons/controls/OrbitControls.js');
+    container.innerHTML = '';
+    head = null;
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
+    camera.position.set(0, 0, 3);
+    const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.setPixelRatio(window.devicePixelRatio);
+    container.appendChild(renderer.domElement);
+    const controls = new OrbitControls(camera, renderer.domElement);
+    controls.enableDamping = true;
+    controls.dampingFactor = 0.05;
+    const ambientLight = new THREE.AmbientLight(0xffffff, 2);
+    scene.add(ambientLight);
+    const dirLight = new THREE.DirectionalLight(0xffffff, 3);
+    dirLight.position.set(1, 1, 2);
+    scene.add(dirLight);
+    const clock = new THREE.Clock();
+    const loader = new GLTFLoader();
+    loader.load(loadedAvatarUrl, (gltf) => {
+      staticModel = gltf.scene;
+      applyColorOverrides();
+      scene.add(staticModel);
+      // Play any embedded animations (walk cycles, idle, etc.)
+      if (gltf.animations && gltf.animations.length > 0) {
+        staticMixer = new THREE.AnimationMixer(staticModel);
+        for (const clip of gltf.animations) {
+          staticMixer.clipAction(clip).play();
+        }
+        log('Playing ' + gltf.animations.length + ' animation(s)');
+      }
+      // Collect morph targets for amplitude-driven jaw/mouth
+      staticModel.traverse((child) => {
+        if (child.isMesh && child.morphTargetDictionary && child.morphTargetInfluences) {
+          mouthMeshes.push(child);
+        }
+      });
+      if (mouthMeshes.length > 0) {
+        log('Found ' + mouthMeshes.length + ' mesh(es) with morph targets');
+      }
+      // Auto-frame the model
+      const box = new THREE.Box3().setFromObject(staticModel);
+      const size = box.getSize(new THREE.Vector3());
+      const maxDim = Math.max(size.x, size.y, size.z);
+      if (maxDim > 0 && maxDim !== Infinity) {
+        const scale = 1.5 / maxDim;
+        staticModel.scale.set(scale, scale, scale);
+      }
+      const scaledBox = new THREE.Box3().setFromObject(staticModel);
+      const scaledCenter = scaledBox.getCenter(new THREE.Vector3());
+      staticModel.position.sub(scaledCenter);
+      applyAccessories(pendingAccessoriesList);
+      window.ReactNativeWebView?.postMessage(JSON.stringify({ type: 'ready' }));
+      window.addEventListener('resize', () => {
+        camera.aspect = window.innerWidth / window.innerHeight;
+        camera.updateProjectionMatrix();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+      });
+      renderer.setAnimationLoop(() => {
+        const delta = clock.getDelta();
+        if (staticMixer) staticMixer.update(delta);
+        controls.update();
+        renderer.render(scene, camera);
+      });
+    }, (ev) => {
+      if (ev.lengthComputable) {
+        const pct = Math.round((ev.loaded / ev.total) * 100);
+        log('Fallback Loading: ' + pct + '%');
+      }
+    }, (err) => {
+      log('Fallback Error: ' + err.message);
+      window.ReactNativeWebView?.postMessage(JSON.stringify({ type: 'error', message: err.message }));
+    });
+  } catch (err) {
+    log('Fallback setup error: ' + err.message);
+    window.ReactNativeWebView?.postMessage(JSON.stringify({ type: 'error', message: err.message }));
+  }
+}
+async function init() {
+  try {
+    log('Loading TalkingHead...');
+    const module = await import(TALKING_HEAD_URL);
+    head = new module.TalkingHead(container, {
+      ttsEndpoint: null,
+      lipsyncModules: ['en'],
+      cameraView: CAMERA_VIEW,
+      cameraDistance: CAMERA_DISTANCE,
+      cameraRotateEnable: false,
+      cameraZoomEnable: false,
+      lightAmbientIntensity: 2,
+      lightDirectIntensity: 10,
+    });
+    log('Loading avatar model...');
+    let avatarLoaded = false;
+    let loadedAvatarUrl = AVATAR_URL;
+    try {
+      loadedAvatarUrl = await loadWithAuth(AVATAR_URL);
+    } catch (err) {
+      log('Failed to fetch avatar blob: ' + err.message);
+    }
+    try {
+      await head.showAvatar({
+        url: loadedAvatarUrl,
+        body: 'F',
+        avatarMood: INITIAL_MOOD,
+        lipsyncLang: 'en',
+      }, (ev) => {
+        if (ev.lengthComputable) {
+          const pct = Math.round((ev.loaded / ev.total) * 100);
+          log('Loading: ' + pct + '%');
+        }
+      });
+      if (loadedAvatarUrl.startsWith('blob:')) URL.revokeObjectURL(loadedAvatarUrl);
+      avatarLoaded = true;
+    } catch (avatarErr) {
+      // Non-rigged avatars (no Armature) are expected — fall back to static viewer silently
+      log('No armature found, using static viewer: ' + avatarErr.message);
+      await loadStaticFallback(loadedAvatarUrl);
+      if (loadedAvatarUrl.startsWith('blob:')) URL.revokeObjectURL(loadedAvatarUrl);
+      return; // fallback posts 'ready' itself; don't post 'error'
+    }
+    if (avatarLoaded) {
+      head.armature?.traverse((child) => {
+        if (child.isMesh && child.morphTargetDictionary && child.morphTargetInfluences) {
+          mouthMeshes.push(child);
+        }
+      });
+      applyColorOverrides();
+      log('Initializing HeadAudio...');
+      try {
+        const haModule = await import(HEAD_AUDIO_URL);
+        if (haModule.HeadAudio && head.audioCtx) {
+          await head.audioCtx.audioWorklet.addModule(HEAD_AUDIO_WORKLET);
+          headaudio = new haModule.HeadAudio(head.audioCtx);
+          await headaudio.loadModel(HEAD_AUDIO_MODEL);
+          if (head.audioSpeechGainNode) {
+            head.audioSpeechGainNode.connect(headaudio);
+          }
+          headaudio.onvalue = (key, value) => {
+            if (head.mtAvatar && head.mtAvatar[key]) {
+              Object.assign(head.mtAvatar[key], { newvalue: value, needsUpdate: true });
+            }
+          };
+          head.opt.update = headaudio.update.bind(headaudio);
+          log('HeadAudio ready (phoneme lip sync)');
+        }
+      } catch (err) {
+        log('HeadAudio unavailable, amplitude fallback active: ' + err.message);
+      }
+      startAudioInterception();
+      log('[ACC] init() complete, calling applyAccessories with ' + pendingAccessoriesList.length + ' pending items');
+      applyAccessories(pendingAccessoriesList);
+      window.ReactNativeWebView?.postMessage(JSON.stringify({ type: 'ready' }));
+    }
+  } catch (err) {
+    log('Error: ' + err.message);
+    window.ReactNativeWebView?.postMessage(JSON.stringify({ type: 'error', message: err.message }));
+  }
+}
+function startAudioInterception() {
+  if (!head?.audioCtx || !head?.audioSpeechGainNode) return;
+  const audioCtx = head.audioCtx;
+  const gainNode = head.audioSpeechGainNode;
+  const connected = new WeakSet();
+  const pending = new Set();
+  function tryConnect(el) {
+    const stream = el.srcObject;
+    if (!stream || connected.has(stream)) return !!stream;
+    connected.add(stream);
+    try {
+      audioCtx.createMediaStreamSource(stream).connect(gainNode);
+    } catch (e) {
+      log('Audio routing error: ' + e);
+    }
+    return true;
+  }
+  function track(el) {
+    if (!tryConnect(el)) pending.add(el);
+    // Listen for play events which happen when stream is ready to avoid polling
+    const onReady = () => {
+      if (tryConnect(el)) pending.delete(el);
+    };
+    el.addEventListener('play', onReady);
+    el.addEventListener('playing', onReady);
+    el.addEventListener('loadedmetadata', onReady);
+  }
+  document.querySelectorAll('audio').forEach((el) => track(el));
+  new MutationObserver((mutations) => {
+    for (const mut of mutations) {
+      for (const node of mut.addedNodes) {
+        if (node instanceof HTMLAudioElement) track(node);
+        if (node instanceof HTMLElement) node.querySelectorAll('audio').forEach(track);
+      }
+    }
+  }).observe(document.body, { childList: true, subtree: true });
+}
+let amplitudeDecay = 0;
+let THREE_REF = null;
+let gltfLoaderInstance = null;
+const currentAccessories = {}; // { [id]: { model: THREE.Group | null, url, bone, position, rotation, scale, isLoading: boolean, latestData: any } }
+let pendingAccessoriesList = [];
+function disposeHierarchy(node) {
+  if (!node) return;
+  node.traverse((child) => {
+    if (child.isMesh) {
+      if (child.geometry) child.geometry.dispose();
+      if (child.material) {
+        const materials = Array.isArray(child.material) ? child.material : [child.material];
+        materials.forEach(mat => {
+          if (mat.map) mat.map.dispose();
+          if (mat.lightMap) mat.lightMap.dispose();
+          if (mat.bumpMap) mat.bumpMap.dispose();
+          if (mat.normalMap) mat.normalMap.dispose();
+          if (mat.specularMap) mat.specularMap.dispose();
+          if (mat.envMap) mat.envMap.dispose();
+          mat.dispose();
+        });
+      }
+    }
+  });
+}
+async function ensureThree() {
+  if (!THREE_REF) {
+    THREE_REF = await import('three');
+    const { GLTFLoader } = await import('three/addons/loaders/GLTFLoader.js');
+    const { DRACOLoader } = await import('three/addons/loaders/DRACOLoader.js');
+    gltfLoaderInstance = new GLTFLoader();
+    const dracoLoader = new DRACOLoader();
+    dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.6/');
+    gltfLoaderInstance.setDRACOLoader(dracoLoader);
+  }
+}
+async function applyAccessories(accessoriesList) {
+  log('[ACC] applyAccessories called with ' + accessoriesList.length + ' items');
+  pendingAccessoriesList = accessoriesList;
+  await ensureThree();
+  const root = (head && head.armature) ? head.armature : staticModel;
+  log('[ACC] root=' + (root ? root.constructor.name + '/' + root.name : 'NULL') + ' head=' + !!head + ' head.armature=' + !!(head && head.armature) + ' staticModel=' + !!staticModel);
+  if (!root) { log('[ACC] ABORT: no root'); return; }
+  // Debug: list all bones in the root
+  const boneNames = [];
+  root.traverse((child) => { if (child.isBone) boneNames.push(child.name); });
+  log('[ACC] Bones found: ' + boneNames.join(', '));
+  const newAccessoryIds = new Set(accessoriesList.map(a => a.id));
+  // Remove old ones
+  for (const id in currentAccessories) {
+    if (!newAccessoryIds.has(id)) {
+      const acc = currentAccessories[id];
+      if (acc.model) {
+        if (acc.model.parent) {
+          acc.model.parent.remove(acc.model);
+        }
+        disposeHierarchy(acc.model);
+      }
+      delete currentAccessories[id];
+      log('[ACC] Removed old accessory: ' + id);
+    }
+  }
+  // Add or update
+  for (const accData of accessoriesList) {
+    log('[ACC] Processing: id=' + accData.id + ' url=' + accData.url + ' bone=' + accData.bone);
+    const existing = currentAccessories[accData.id];
+    // If URL changed or it's new, we need to load it
+    if (!existing || existing.url !== accData.url) {
+      if (existing && existing.model) {
+        if (existing.model.parent) {
+          existing.model.parent.remove(existing.model);
+        }
+        disposeHierarchy(existing.model);
+      }
+      // Mark as loading and store the latest transform data
+      currentAccessories[accData.id] = { ...accData, model: null, isLoading: true, latestData: accData };
+      log('[ACC] Starting GLB load: ' + accData.url);
+      // Use an IIFE to handle the async load with auth
+      (async () => {
+        try {
+          const loadedUrl = await loadWithAuth(accData.url);
+          gltfLoaderInstance.load(loadedUrl, (gltf) => {
+            if (loadedUrl.startsWith('blob:')) URL.revokeObjectURL(loadedUrl);
+            log('[ACC] GLB loaded OK for ' + accData.id);
+            const model = gltf.scene;
+            // Grab the *latest* data that might have arrived while we were loading
+            const latestData = currentAccessories[accData.id]?.latestData || accData;
+            let targetBone = null;
+            // Exact match first, then prefix match for Sketchfab exports (e.g. Head_5)
+            let prefixCandidate = null;
+            root.traverse((child) => {
+              if (child.isBone && child.name === latestData.bone) {
+                targetBone = child;
+              } else if (!prefixCandidate && child.name.replace(/_\\d+$/, '') === latestData.bone) {
+                prefixCandidate = child;
+              }
+            });
+            if (!targetBone && prefixCandidate) {
+              targetBone = prefixCandidate;
+              log('[ACC] Exact bone "' + accData.bone + '" not found, using prefix match: ' + targetBone.name);
+            }
+            // Prevent frustum culling from making the accessory disappear when bone moves
+            model.traverse((child) => {
+              if (child.isMesh) {
+                child.frustumCulled = false;
+              }
+            });
+            if (!targetBone) {
+              log('[ACC] Bone not found: ' + latestData.bone + '. Falling back to root.');
+              targetBone = root;
+            } else {
+              log('[ACC] Found bone: ' + targetBone.name);
+            }
+            // Apply scale and position directly from stored data.
+            // Filament editor is the single source of truth for placement.
+            const modelScale = latestData.scale !== undefined ? latestData.scale : 1.0;
+            model.scale.set(modelScale, modelScale, modelScale);
+            model.position.set(
+              latestData.position ? latestData.position[0] : 0,
+              latestData.position ? latestData.position[1] : 0,
+              latestData.position ? latestData.position[2] : 0
+            );
+            if (latestData.rotation) {
+              model.rotation.set(...latestData.rotation);
+            }
+            log('[ACC] Final pos=' + model.position.x.toFixed(3) + ',' + model.position.y.toFixed(3) + ',' + model.position.z.toFixed(3) + ' scale=' + model.scale.x.toFixed(3));
+            // Ensure the accessory wasn't removed or changed while loading
+            if (!currentAccessories[accData.id] || currentAccessories[accData.id].url !== accData.url) {
+              log('[ACC] Aborting attachment: ' + accData.id + ' was removed or changed while loading.');
+              return;
+            }
+            targetBone.add(model);
+            log('[ACC] Model attached to bone ' + targetBone.name + '. Children count: ' + targetBone.children.length);
+            currentAccessories[accData.id].model = model;
+            currentAccessories[accData.id].isLoading = false;
+          }, (progress) => {
+            if (progress.lengthComputable) {
+              // log('[ACC] Load progress ' + accData.id + ': ' + Math.round((progress.loaded / progress.total) * 100) + '%');
+            }
+          }, (err) => {
+            if (loadedUrl.startsWith('blob:')) URL.revokeObjectURL(loadedUrl);
+            log('[ACC] FAILED to load accessory ' + accData.id + ': ' + err.message);
+            if (currentAccessories[accData.id]) {
+              currentAccessories[accData.id].isLoading = false;
+            }
+          });
+        } catch (authErr) {
+          log('[ACC] FAILED to fetch accessory blob ' + accData.id + ': ' + authErr.message);
+          if (currentAccessories[accData.id]) {
+            currentAccessories[accData.id].isLoading = false;
+          }
+        }
+      })();
+    } else if (existing && existing.isLoading) {
+      // It's already loading, just update the latestData so when it finishes it uses these transforms
+      log('[ACC] Still loading ' + accData.id + '... buffering latest transforms');
+      existing.latestData = accData;
+    } else if (existing && existing.model) {
+      log('[ACC] Updating existing model for ' + accData.id);
+      // Just update transform if model already loaded
+      const model = existing.model;
+      // Apply scale and position directly from stored data.
+      const accScale = accData.scale !== undefined ? accData.scale : 1.0;
+      model.scale.set(accScale, accScale, accScale);
+      model.position.set(
+        accData.position ? accData.position[0] : 0,
+        accData.position ? accData.position[1] : 0,
+        accData.position ? accData.position[2] : 0
+      );
+      if (accData.rotation) {
+        model.rotation.set(...accData.rotation);
+      }
+    }
+  }
+}
+function onIncomingMessage(event) {
+  try {
+    const msg = JSON.parse(event.data);
+    if (msg.type === 'amplitude' && mouthMeshes.length > 0) {
+      const val = Math.min(1, msg.value * 2.5);
+      amplitudeDecay = Math.max(amplitudeDecay * 0.7, val);
+      for (const mesh of mouthMeshes) {
+        if (!mesh.morphTargetDictionary) continue;
+        const keys = Object.keys(mesh.morphTargetDictionary);
+        const jawKey = keys.find((k) => {
+          const lk = k.toLowerCase();
+          return lk.includes('jawopen') || lk.includes('jaw_open') ||
+                 lk.includes('mouthopen') || lk.includes('mouth_open') ||
+                 lk.includes('viseme_aa') || lk === 'aa';
+        });
+        if (jawKey !== undefined) {
+          mesh.morphTargetInfluences[mesh.morphTargetDictionary[jawKey]] = amplitudeDecay;
+        }
+      }
+    } else if (msg.type === 'mood' && head) {
+      head.setMood(msg.value);
+    } else if (msg.type === 'hair_color') {
+      HAIR_COLOR = msg.value;
+      applyColorOverrides();
+    } else if (msg.type === 'skin_color') {
+      SKIN_COLOR = msg.value;
+      applyColorOverrides();
+    } else if (msg.type === 'eye_color') {
+      EYE_COLOR = msg.value;
+      applyColorOverrides();
+    } else if (msg.type === 'set_accessories') {
+      log('[ACC] Received set_accessories message with ' + (msg.accessories ? msg.accessories.length : 0) + ' items');
+      applyAccessories(msg.accessories || []);
+    }
+  } catch (err) {
+    log('Message parse error: ' + err);
+  }
+}
+window.addEventListener('message', onIncomingMessage);
+document.addEventListener('message', onIncomingMessage);
+init();
+</script>
+</body>
+</html>
+`;
+}

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export type { TalkingHeadAccessory, TalkingHeadMood, TalkingHeadProps, TalkingHeadRef, } from './TalkingHead';
+export { TalkingHead } from './TalkingHead';
+export * from './appearance';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EAChB,cAAc,GACf,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,cAAc,cAAc,CAAC"}

package/dist/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { TalkingHead } from './TalkingHead';
2	+ export * from './appearance';

package/dist/index.web.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export type { TalkingHeadAccessory, TalkingHeadMood, TalkingHeadProps, TalkingHeadRef, } from './TalkingHead.web';
+export { TalkingHead } from './TalkingHead.web';
+export * from './appearance';
+//# sourceMappingURL=index.web.d.ts.map

package/dist/index.web.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../src/index.web.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EAChB,cAAc,GACf,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,cAAc,cAAc,CAAC"}

package/dist/index.web.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { TalkingHead } from './TalkingHead.web';
2	+ export * from './appearance';

package/dist/sketchfab/api.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import type { SketchfabModel, SketchfabResponse } from './types';
+export interface SketchfabSearchOptions {
+    apiKey: string;
+    query?: string;
+    cursor?: string;
+    count?: number;
+}
+export declare function searchSketchfab(options: SketchfabSearchOptions): Promise<SketchfabResponse>;
+export declare function getDownloadUrl(uid: string, apiKey: string): Promise<string | null>;
+export declare function downloadModel(uid: string, name: string, apiKey: string): Promise<File>;
+export declare function getBestThumbnail(thumbnails: SketchfabModel['thumbnails'], targetWidth?: number): string;
+//# sourceMappingURL=api.d.ts.map

package/dist/sketchfab/api.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../src/sketchfab/api.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAKjE,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAsB,eAAe,CAAC,OAAO,EAAE,sBAAsB,GAAG,OAAO,CAAC,iBAAiB,CAAC,CAwBjG;AAED,wBAAsB,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAWxF;AAED,wBAAsB,aAAa,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAe5F;AAED,wBAAgB,gBAAgB,CAC9B,UAAU,EAAE,cAAc,CAAC,YAAY,CAAC,EACxC,WAAW,SAAM,GAChB,MAAM,CAUR"}

package/dist/sketchfab/api.js ADDED Viewed

@@ -0,0 +1,52 @@
+const SKETCHFAB_API_BASE = 'https://api.sketchfab.com/v3';
+const PAGE_SIZE = 24;
+export async function searchSketchfab(options) {
+    const { apiKey, query = 'character humanoid avatar', cursor, count = PAGE_SIZE } = options;
+    const params = new URLSearchParams({
+        type: 'models',
+        downloadable: 'true',
+        count: String(count),
+        sort_by: '-likeCount',
+        q: query,
+    });
+    if (cursor) {
+        params.set('cursor', cursor);
+    }
+    const response = await fetch(`${SKETCHFAB_API_BASE}/search?${params}`, {
+        headers: { Authorization: `Token ${apiKey}` },
+    });
+    if (!response.ok) {
+        throw new Error(`Sketchfab API error: ${response.status}`);
+    }
+    return response.json();
+}
+export async function getDownloadUrl(uid, apiKey) {
+    const response = await fetch(`${SKETCHFAB_API_BASE}/models/${uid}/download`, {
+        headers: { Authorization: `Token ${apiKey}` },
+    });
+    if (!response.ok) {
+        return null;
+    }
+    const data = (await response.json());
+    return data?.glb?.url ?? data?.gltf?.url ?? null;
+}
+export async function downloadModel(uid, name, apiKey) {
+    const url = await getDownloadUrl(uid, apiKey);
+    if (!url) {
+        throw new Error(`No download URL available for model ${uid}`);
+    }
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error(`Failed to fetch GLB from Sketchfab: ${response.status}`);
+    }
+    const blob = await response.blob();
+    const cleanName = name.replace(/[^\w\s-]/g, '').trim() || 'model';
+    return new File([blob], `${cleanName}.glb`, { type: 'model/gltf-binary' });
+}
+export function getBestThumbnail(thumbnails, targetWidth = 280) {
+    if (!thumbnails?.images?.length) {
+        return '';
+    }
+    const sorted = [...thumbnails.images].sort((left, right) => Math.abs(left.width - targetWidth) - Math.abs(right.width - targetWidth));
+    return sorted[0].url;
+}

package/dist/sketchfab/categories.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import type { AccessoryCategory } from './types';
+export declare const ACCESSORY_CATEGORIES: AccessoryCategory[];
+/** Tags indicating a humanoid / character model (for badge display in avatar browsers) */
+export declare const HUMANOID_TAGS: readonly ["character", "humanoid", "human", "anime", "avatar", "person", "figure", "girl", "boy", "woman", "man"];
+//# sourceMappingURL=categories.d.ts.map

package/dist/sketchfab/categories.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"categories.d.ts","sourceRoot":"","sources":["../../src/sketchfab/categories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD,eAAO,MAAM,oBAAoB,EAAE,iBAAiB,EA6GnD,CAAC;AAEF,0FAA0F;AAC1F,eAAO,MAAM,aAAa,mHAYhB,CAAC"}