talking-head-studio 0.3.5 → 0.3.7

package/dist/filament/useAuthedFilamentUri.js

@@ -15,25 +15,15 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAuthedFilamentUri = useAuthedFilamentUri;
+exports.useAuthedFilamentUri = void 0;
 const react_1 = require("react");
 const FileSystem = __importStar(require("expo-file-system/legacy"));
 const studioApi_1 = require("../api/studioApi");
@@ -124,3 +114,4 @@ function useAuthedFilamentUri(remoteUrl) {
     }, [remoteUrl]);
     return result;
 }
+exports.useAuthedFilamentUri = useAuthedFilamentUri;

package/dist/html.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildAvatarHtml = buildAvatarHtml;
+exports.buildAvatarHtml = void 0;
 const UPSTREAM_SAFE_MOOD_MAP = {
     neutral: 'neutral',
     happy: 'happy',
@@ -1138,3 +1138,4 @@ await init();
 </html>
 `;
 }
+exports.buildAvatarHtml = buildAvatarHtml;

package/dist/index.d.ts

@@ -6,8 +6,6 @@ export { normalizeAppearance } from './appearance/schema';
 export type { AppearanceTarget } from './appearance/matchers';
 export * from './api';
 export * from './wardrobe';
-export { TalkingHeadVisualization } from './TalkingHeadVisualization';
-export type { TalkingHeadVisualizationRef } from './TalkingHeadVisualization';
 export { useDirectVisemeStream } from './tts/useDirectVisemeStream';
 export type { VisemeStreamPayload } from './tts/useDirectVisemeStream';
 export { useMotionMarkers } from './tts/useMotionMarkers';

package/dist/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMotionMarkers = exports.useDirectVisemeStream = exports.TalkingHeadVisualization = exports.normalizeAppearance = exports.pickTargetForMaterialName = exports.applyAppearanceToObject3D = exports.TalkingHead = void 0;
+exports.useMotionMarkers = exports.useDirectVisemeStream = exports.normalizeAppearance = exports.pickTargetForMaterialName = exports.applyAppearanceToObject3D = exports.TalkingHead = void 0;
 var TalkingHead_1 = require("./TalkingHead");
 Object.defineProperty(exports, "TalkingHead", { enumerable: true, get: function () { return TalkingHead_1.TalkingHead; } });
 // Export appearance utilities, but exclude AvatarAppearance — the canonical
@@ -27,8 +27,6 @@ var schema_1 = require("./appearance/schema");
 Object.defineProperty(exports, "normalizeAppearance", { enumerable: true, get: function () { return schema_1.normalizeAppearance; } });
 __exportStar(require("./api"), exports);
 __exportStar(require("./wardrobe"), exports);
-var TalkingHeadVisualization_1 = require("./TalkingHeadVisualization");
-Object.defineProperty(exports, "TalkingHeadVisualization", { enumerable: true, get: function () { return TalkingHeadVisualization_1.TalkingHeadVisualization; } });
 var useDirectVisemeStream_1 = require("./tts/useDirectVisemeStream");
 Object.defineProperty(exports, "useDirectVisemeStream", { enumerable: true, get: function () { return useDirectVisemeStream_1.useDirectVisemeStream; } });
 var useMotionMarkers_1 = require("./tts/useMotionMarkers");

package/dist/sketchfab/api.js

@@ -1,9 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.searchSketchfab = searchSketchfab;
-exports.getDownloadUrl = getDownloadUrl;
-exports.downloadModel = downloadModel;
-exports.getBestThumbnail = getBestThumbnail;
+exports.getBestThumbnail = exports.downloadModel = exports.getDownloadUrl = exports.searchSketchfab = void 0;
 const SKETCHFAB_API_BASE = 'https://api.sketchfab.com/v3';
 const PAGE_SIZE = 24;
 async function searchSketchfab(options) {
@@ -26,6 +23,7 @@ async function searchSketchfab(options) {
     }
     return response.json();
 }
+exports.searchSketchfab = searchSketchfab;
 async function getDownloadUrl(uid, apiKey) {
     const response = await fetch(`${SKETCHFAB_API_BASE}/models/${uid}/download`, {
         headers: { Authorization: `Token ${apiKey}` },
@@ -36,6 +34,7 @@ async function getDownloadUrl(uid, apiKey) {
     const data = (await response.json());
     return data?.glb?.url ?? data?.gltf?.url ?? null;
 }
+exports.getDownloadUrl = getDownloadUrl;
 async function downloadModel(uid, name, apiKey) {
     const url = await getDownloadUrl(uid, apiKey);
     if (!url) {
@@ -49,6 +48,7 @@ async function downloadModel(uid, name, apiKey) {
     const cleanName = name.replace(/[^\w\s-]/g, '').trim() || 'model';
     return new File([blob], `${cleanName}.glb`, { type: 'model/gltf-binary' });
 }
+exports.downloadModel = downloadModel;
 function getBestThumbnail(thumbnails, targetWidth = 280) {
     if (!thumbnails?.images?.length) {
         return '';
@@ -56,3 +56,4 @@ function getBestThumbnail(thumbnails, targetWidth = 280) {
     const sorted = [...thumbnails.images].sort((left, right) => Math.abs(left.width - targetWidth) - Math.abs(right.width - targetWidth));
     return sorted[0].url;
 }
+exports.getBestThumbnail = getBestThumbnail;

package/dist/sketchfab/useSketchfabSearch.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSketchfabSearch = useSketchfabSearch;
+exports.useSketchfabSearch = void 0;
 const react_1 = require("react");
 const api_1 = require("./api");
 function useSketchfabSearch({ apiKey, initialQuery = 'character humanoid avatar', debounceMs = 400, }) {
@@ -79,3 +79,4 @@ function useSketchfabSearch({ apiKey, initialQuery = 'character humanoid avatar'
         prevPage,
     };
 }
+exports.useSketchfabSearch = useSketchfabSearch;

package/dist/tts/useDirectVisemeStream.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDirectVisemeStream = useDirectVisemeStream;
+exports.useDirectVisemeStream = void 0;
 const react_1 = require("react");
 const fetch_1 = require("expo/fetch");
 // How long to keep retrying a stream before giving up (ms).
@@ -100,6 +100,7 @@ function useDirectVisemeStream(onVisemes) {
     }, []);
     return { openStream };
 }
+exports.useDirectVisemeStream = useDirectVisemeStream;
 // ─── SSE parser ──────────────────────────────────────────────────────────────
 /**
  * Reads an SSE stream to completion, dispatching `event: visemes` messages.

package/dist/tts/useMotionMarkers.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { TalkingHeadRef } from '../TalkingHead';
 export declare function useMotionMarkers(ref: React.RefObject<TalkingHeadRef | null>): (text: string) => string;

package/dist/tts/useMotionMarkers.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMotionMarkers = useMotionMarkers;
+exports.useMotionMarkers = void 0;
 const react_1 = require("react");
 /**
  * Parses ::marker_name:: tokens out of LLM transcript text, fires the
@@ -22,3 +22,4 @@ function useMotionMarkers(ref) {
         return '';
     }), [ref]);
 }
+exports.useMotionMarkers = useMotionMarkers;

package/dist/utils/avatarUtils.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolveFilamentAssetUri = resolveFilamentAssetUri;
-exports.resolveLocalAssetUrl = resolveLocalAssetUrl;
+exports.resolveLocalAssetUrl = exports.resolveFilamentAssetUri = void 0;
 const expo_asset_1 = require("expo-asset");
 const react_native_1 = require("react-native");
 const expo_file_system_1 = require("expo-file-system");
@@ -22,6 +21,7 @@ async function resolveFilamentAssetUri(module) {
         return null;
     }
 }
+exports.resolveFilamentAssetUri = resolveFilamentAssetUri;
 /**
  * Resolves a local Expo asset module (from require()) into a usable URL string.
  * On web, returns an absolute URL.
@@ -54,3 +54,4 @@ async function resolveLocalAssetUrl(module) {
         return null;
     }
 }
+exports.resolveLocalAssetUrl = resolveLocalAssetUrl;

package/dist/utils/faceLandmarkerToShapeWeights.d.ts

@@ -0,0 +1,44 @@
+/**
+ * faceLandmarkerToShapeWeights
+ *
+ * Runs MediaPipe FaceLandmarker on a photo and returns a
+ * faceShapeWeights Record<string, number> ready to store in
+ * AvatarAppearance. Works with any GLB that has ARKit morph
+ * target names — mesh-agnostic, pure named floats.
+ *
+ * Lazy-loads @mediapipe/tasks-vision on first call (~3MB WASM).
+ * Subsequent calls reuse the same FaceLandmarker instance.
+ *
+ * Apache 2.0 — no API key, no license restrictions.
+ */
+type ImageSource = HTMLImageElement | HTMLVideoElement | HTMLCanvasElement | ImageBitmap;
+export type FaceShapeWeights = Record<string, number>;
+export interface FaceLandmarkerOptions {
+    /**
+     * Minimum score threshold to include a blendshape weight.
+     * Shapes below this are omitted to keep the dict lean.
+     * Default: 0.01
+     */
+    minScore?: number;
+    /**
+     * If true, also includes near-zero weights (useful for
+     * resetting a previously shaped face to neutral).
+     * Default: false
+     */
+    includeNeutral?: boolean;
+}
+/**
+ * Detect face blendshapes from a photo and return a faceShapeWeights
+ * dict compatible with AvatarAppearance.
+ *
+ * @param source  Any image/video/canvas/bitmap element
+ * @param options Optional thresholds
+ * @returns faceShapeWeights Record<string, number>, or null if no face detected
+ */
+export declare function faceLandmarkerToShapeWeights(source: ImageSource, options?: FaceLandmarkerOptions): Promise<FaceShapeWeights | null>;
+/**
+ * Load the FaceLandmarker WASM bundle eagerly — call this on app start
+ * to avoid a cold-start delay when the user first uploads a photo.
+ */
+export declare function prefetchFaceLandmarker(): void;
+export {};

package/dist/utils/faceLandmarkerToShapeWeights.js

@@ -0,0 +1,112 @@
+"use strict";
+/**
+ * faceLandmarkerToShapeWeights
+ *
+ * Runs MediaPipe FaceLandmarker on a photo and returns a
+ * faceShapeWeights Record<string, number> ready to store in
+ * AvatarAppearance. Works with any GLB that has ARKit morph
+ * target names — mesh-agnostic, pure named floats.
+ *
+ * Lazy-loads @mediapipe/tasks-vision on first call (~3MB WASM).
+ * Subsequent calls reuse the same FaceLandmarker instance.
+ *
+ * Apache 2.0 — no API key, no license restrictions.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.prefetchFaceLandmarker = exports.faceLandmarkerToShapeWeights = void 0;
+const MEDIAPIPE_CDN = 'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm';
+// ---------------------------------------------------------------------------
+// Singleton — built once, reused across calls
+// ---------------------------------------------------------------------------
+let _landmarkerPromise = null;
+async function getLandmarker() {
+    if (_landmarkerPromise)
+        return _landmarkerPromise;
+    _landmarkerPromise = (async () => {
+        // Dynamic import so this module is tree-shaken when unused
+        // @mediapipe/tasks-vision is loaded at runtime from CDN — not in node_modules.
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        const vision = await Promise.resolve().then(() => __importStar(require(
+        /* webpackChunkName: "mediapipe-tasks-vision" */
+        '@mediapipe/tasks-vision')));
+        const { FaceLandmarker, FilesetResolver } = vision;
+        const filesetResolver = await FilesetResolver.forVisionTasks(MEDIAPIPE_CDN);
+        const landmarker = await FaceLandmarker.createFromOptions(filesetResolver, {
+            baseOptions: {
+                modelAssetPath: 'https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task',
+                delegate: 'GPU',
+            },
+            outputFaceBlendshapes: true,
+            runningMode: 'IMAGE',
+            numFaces: 1,
+        });
+        return landmarker;
+    })();
+    // Reset on failure so next call retries
+    _landmarkerPromise.catch(() => {
+        _landmarkerPromise = null;
+    });
+    return _landmarkerPromise;
+}
+/**
+ * Detect face blendshapes from a photo and return a faceShapeWeights
+ * dict compatible with AvatarAppearance.
+ *
+ * @param source  Any image/video/canvas/bitmap element
+ * @param options Optional thresholds
+ * @returns faceShapeWeights Record<string, number>, or null if no face detected
+ */
+async function faceLandmarkerToShapeWeights(source, options = {}) {
+    const { minScore = 0.01, includeNeutral = false } = options;
+    const landmarker = await getLandmarker();
+    const result = landmarker.detect(source);
+    const blendshapes = result.faceBlendshapes?.[0]?.categories;
+    if (!blendshapes || blendshapes.length === 0) {
+        return null; // No face detected
+    }
+    const weights = {};
+    for (const { categoryName, score } of blendshapes) {
+        // MediaPipe includes '_neutral' as a catch-all — skip unless requested
+        if (!includeNeutral && categoryName === '_neutral')
+            continue;
+        if (score < minScore)
+            continue;
+        weights[categoryName] = Math.round(score * 1000) / 1000; // 3 dp is plenty
+    }
+    return weights;
+}
+exports.faceLandmarkerToShapeWeights = faceLandmarkerToShapeWeights;
+/**
+ * Load the FaceLandmarker WASM bundle eagerly — call this on app start
+ * to avoid a cold-start delay when the user first uploads a photo.
+ */
+function prefetchFaceLandmarker() {
+    getLandmarker().catch(() => {
+        // Silently ignore prefetch failures — will retry on actual use
+    });
+}
+exports.prefetchFaceLandmarker = prefetchFaceLandmarker;

package/dist/voice/convertToWav.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.convertToWav = convertToWav;
+exports.convertToWav = void 0;
 /**
  * Convert any audio blob to WAV format using the Web Audio API.
  * Handles WebM/opus output from MediaRecorder without requiring ffmpeg.
@@ -19,6 +19,7 @@ async function convertToWav(audioBlob) {
         await audioContext.close();
     }
 }
+exports.convertToWav = convertToWav;
 /**
  * Encode an AudioBuffer as a 16-bit PCM WAV blob.
  */

package/dist/voice/useAudioPlayer.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAudioPlayer = useAudioPlayer;
+exports.useAudioPlayer = void 0;
 const react_1 = require("react");
 function useAudioPlayer({ onError, } = {}) {
     const [isPlaying, setIsPlaying] = (0, react_1.useState)(false);
@@ -62,3 +62,4 @@ function useAudioPlayer({ onError, } = {}) {
         cleanup,
     };
 }
+exports.useAudioPlayer = useAudioPlayer;

package/dist/voice/useAudioRecording.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAudioRecording = useAudioRecording;
+exports.useAudioRecording = void 0;
 const react_1 = require("react");
 const convertToWav_1 = require("./convertToWav");
 function useAudioRecording({ maxDurationSeconds = 29, onRecordingComplete, } = {}) {
@@ -163,3 +163,4 @@ function useAudioRecording({ maxDurationSeconds = 29, onRecordingComplete, } = {
         cancelRecording,
     };
 }
+exports.useAudioRecording = useAudioRecording;

package/dist/wardrobe/useAvatarWardrobeHydration.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAvatarWardrobeHydration = useAvatarWardrobeHydration;
+exports.useAvatarWardrobeHydration = void 0;
 const react_1 = require("react");
 const studioApi_1 = require("../api/studioApi");
 const wardrobeStore_1 = require("./wardrobeStore");
@@ -32,3 +32,4 @@ function useAvatarWardrobeHydration({ avatarId, accessories, }) {
         };
     }, [accessorySignature, avatarId, hydrateFromApi]);
 }
+exports.useAvatarWardrobeHydration = useAvatarWardrobeHydration;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "talking-head-studio",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "description": "Cross-platform 3D avatar component for React Native & web — lip-sync, gestures, accessories, and LLM integration. Powered by TalkingHead + Three.js.",
   "main": "dist/index.web.js",
   "browser": "dist/index.web.js",
@@ -41,6 +41,11 @@
       "react-native": "./dist/filament/index.js",
       "types": "./dist/filament/index.d.ts",
       "default": "./dist/filament/index.js"
+    },
+    "./filament/editor": {
+      "react-native": "./dist/filament/editor/index.js",
+      "types": "./dist/filament/editor/index.d.ts",
+      "default": "./dist/filament/editor/index.js"
     }
   },
   "files": [
@@ -53,7 +58,8 @@
     "lint": "eslint 'src/**/*.{ts,tsx}'",
     "format": "prettier --write 'src/**/*.{ts,tsx}'",
     "test": "jest",
-    "prepublishOnly": "npm run lint && npm run typecheck && npm test -- --runInBand && npm run build"
+    "prepublishOnly": "npm run lint && npm run typecheck && npm test -- --runInBand && npm run build",
+    "build:creator": "vite build --config creator-app/vite.config.ts"
   },
   "keywords": [
     "react-native",
@@ -92,6 +98,7 @@
   },
   "sideEffects": false,
   "dependencies": {
+    "@mediapipe/tasks-vision": "^0.10.34",
     "zustand": "^5.0.12"
   },
   "peerDependencies": {
@@ -139,27 +146,42 @@
     "@babel/core": "^7.29.0",
     "@babel/preset-env": "^7.29.0",
     "@babel/preset-typescript": "^7.28.5",
+    "@expo/vector-icons": "^15.1.1",
     "@react-native/babel-preset": "^0.84.1",
+    "@react-three/drei": "^9.122.0",
+    "@react-three/fiber": "^8.18.0",
     "@testing-library/react-native": "^13.3.3",
     "@types/jest": "^30.0.0",
     "@types/react": "^19.2.14",
+    "@types/react-dom": "^18.3.7",
     "@types/react-native": "^0.73.0",
+    "@types/three": "^0.180.0",
     "@typescript-eslint/eslint-plugin": "^8.56.1",
     "@typescript-eslint/parser": "^8.56.1",
+    "@vitejs/plugin-react": "^4.7.0",
     "babel-jest": "^30.2.0",
     "eslint": "^9.39.3",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-native": "^5.0.0",
+    "expo-haptics": "^55.0.9",
     "express": "^5.2.1",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
     "metro-react-native-babel-preset": "^0.77.0",
+    "moti": "^0.30.0",
     "multer": "^2.1.0",
     "prettier": "^3.8.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-native-gesture-handler": "^2.30.0",
+    "react-native-reanimated": "^4.2.3",
     "react-native-webview": "^13.16.0",
     "react-test-renderer": "^19.2.4",
-    "ts-jest": "^29.4.6"
+    "three": "^0.180.0",
+    "ts-jest": "^29.4.6",
+    "typescript": "^5.3.3",
+    "vite": "^5.4.21"
   }
 }