talking-head-studio 0.4.9 → 0.4.11

package/dist/voice/useVoicePreview.d.ts

@@ -0,0 +1,7 @@
+export declare function configureVoicePreviewBaseUrl(url: string): void;
+export declare function useVoicePreview(): {
+    activeVoiceId: string | null;
+    loadingVoiceId: string | null;
+    previewVoice: (voiceId: string) => Promise<void>;
+    stopPreview: () => void;
+};

package/dist/voice/useVoicePreview.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.configureVoicePreviewBaseUrl = configureVoicePreviewBaseUrl;
+exports.useVoicePreview = useVoicePreview;
+const react_1 = require("react");
+const expo_audio_1 = require("expo-audio");
+const studioApi_1 = require("../api/studioApi");
+let _baseUrl = process.env.EXPO_PUBLIC_BACKEND_URL ?? '';
+function configureVoicePreviewBaseUrl(url) {
+    _baseUrl = url;
+}
+async function fetchFirstSampleUrl(voiceId) {
+    const samples = await (0, studioApi_1.getVoiceProfileSamples)(voiceId);
+    if (!samples || samples.length === 0)
+        return null;
+    return `${_baseUrl}/samples/${samples[0].id}`;
+}
+function useVoicePreview() {
+    const playerRef = (0, react_1.useRef)(null);
+    const [player, setPlayer] = (0, react_1.useState)(null);
+    const [activeVoiceId, setActiveVoiceId] = (0, react_1.useState)(null);
+    const [loadingVoiceId, setLoadingVoiceId] = (0, react_1.useState)(null);
+    const status = (0, expo_audio_1.useAudioPlayerStatus)(player);
+    (0, react_1.useEffect)(() => {
+        if (status?.didJustFinish) {
+            setActiveVoiceId(null);
+        }
+    }, [status?.didJustFinish]);
+    const stopPreview = (0, react_1.useCallback)(() => {
+        if (playerRef.current) {
+            playerRef.current.pause();
+            playerRef.current.remove();
+            playerRef.current = null;
+        }
+        setPlayer(null);
+        setActiveVoiceId(null);
+        setLoadingVoiceId(null);
+    }, []);
+    const previewVoice = (0, react_1.useCallback)(async (voiceId) => {
+        if (!voiceId || loadingVoiceId === voiceId)
+            return;
+        if (activeVoiceId === voiceId) {
+            stopPreview();
+            return;
+        }
+        setLoadingVoiceId(voiceId);
+        stopPreview();
+        try {
+            const sampleUrl = await fetchFirstSampleUrl(voiceId);
+            if (!sampleUrl) {
+                setLoadingVoiceId(null);
+                return;
+            }
+            await (0, expo_audio_1.setAudioModeAsync)({
+                playsInSilentMode: true,
+                allowsRecording: false,
+                shouldPlayInBackground: false,
+                interruptionMode: 'mixWithOthers',
+            });
+            const newPlayer = (0, expo_audio_1.createAudioPlayer)(sampleUrl);
+            playerRef.current = newPlayer;
+            setPlayer(newPlayer);
+            newPlayer.play();
+            setLoadingVoiceId(null);
+            setActiveVoiceId(voiceId);
+        }
+        catch (err) {
+            console.error('[useVoicePreview] Failed to play sample:', err);
+            setLoadingVoiceId(null);
+            setActiveVoiceId(null);
+        }
+    }, [activeVoiceId, loadingVoiceId, stopPreview]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            playerRef.current?.pause();
+            playerRef.current?.remove();
+            playerRef.current = null;
+        };
+    }, []);
+    return { activeVoiceId, loadingVoiceId, previewVoice, stopPreview };
+}

package/dist/wardrobe/index.d.ts

@@ -1,2 +1,4 @@
 export * from './wardrobeStore';
 export { useAvatarWardrobeHydration } from './useAvatarWardrobeHydration';
+export { useStudioAvatar } from './useStudioAvatar';
+export type { UseStudioAvatarOptions, UseStudioAvatarResult } from './useStudioAvatar';

package/dist/wardrobe/index.js

@@ -14,7 +14,9 @@ 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.useAvatarWardrobeHydration = void 0;
+exports.useStudioAvatar = exports.useAvatarWardrobeHydration = void 0;
 __exportStar(require("./wardrobeStore"), exports);
 var useAvatarWardrobeHydration_1 = require("./useAvatarWardrobeHydration");
 Object.defineProperty(exports, "useAvatarWardrobeHydration", { enumerable: true, get: function () { return useAvatarWardrobeHydration_1.useAvatarWardrobeHydration; } });
+var useStudioAvatar_1 = require("./useStudioAvatar");
+Object.defineProperty(exports, "useStudioAvatar", { enumerable: true, get: function () { return useStudioAvatar_1.useStudioAvatar; } });

package/dist/wardrobe/useAvatarWardrobeHydration.js

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

package/dist/wardrobe/useStudioAvatar.d.ts

@@ -0,0 +1,29 @@
+import type { Avatar } from '../api/types';
+export interface UseStudioAvatarOptions {
+    avatarId: string;
+}
+export interface UseStudioAvatarResult {
+    avatar: Avatar | null;
+    loading: boolean;
+    error: string | null;
+    name: string;
+    setName: (name: string) => void;
+    description: string;
+    setDescription: (desc: string) => void;
+    isPublic: boolean;
+    setIsPublic: (v: boolean) => void;
+    hairColor: string;
+    setHairColor: (color: string) => void;
+    skinColor: string;
+    setSkinColor: (color: string) => void;
+    eyeColor: string;
+    setEyeColor: (color: string) => void;
+    voiceProfileId: string | null;
+    setVoiceProfileId: (id: string | null) => void;
+    isDirty: boolean;
+    saving: boolean;
+    save: () => Promise<void>;
+    revert: () => void;
+    reload: () => Promise<void>;
+}
+export declare function useStudioAvatar({ avatarId }: UseStudioAvatarOptions): UseStudioAvatarResult;

package/dist/wardrobe/useStudioAvatar.js

@@ -0,0 +1,177 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStudioAvatar = useStudioAvatar;
+const react_1 = require("react");
+const studioApi_1 = require("../api/studioApi");
+const wardrobeStore_1 = require("./wardrobeStore");
+const DEFAULT_HAIR_COLOR = '#4a3728';
+const DEFAULT_SKIN_COLOR = '#f5d0b0';
+const DEFAULT_EYE_COLOR = '#5b7553';
+function extractHairColor(a) {
+    return a?.appearance?.hairColor ?? DEFAULT_HAIR_COLOR;
+}
+function extractSkinColor(a) {
+    return a?.appearance?.skinColor ?? DEFAULT_SKIN_COLOR;
+}
+function extractEyeColor(a) {
+    return a?.appearance?.eyeColor ?? DEFAULT_EYE_COLOR;
+}
+function useStudioAvatar({ avatarId }) {
+    const [avatar, setAvatar] = (0, react_1.useState)(null);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [saving, setSaving] = (0, react_1.useState)(false);
+    const [name, setName] = (0, react_1.useState)('');
+    const [description, setDescription] = (0, react_1.useState)('');
+    const [isPublic, setIsPublic] = (0, react_1.useState)(false);
+    const [hairColor, setHairColor] = (0, react_1.useState)(DEFAULT_HAIR_COLOR);
+    const [skinColor, setSkinColor] = (0, react_1.useState)(DEFAULT_SKIN_COLOR);
+    const [eyeColor, setEyeColor] = (0, react_1.useState)(DEFAULT_EYE_COLOR);
+    const [voiceProfileId, setVoiceProfileId] = (0, react_1.useState)(null);
+    const populateFromAvatar = (0, react_1.useCallback)((a) => {
+        setName(a.name);
+        setDescription(a.description ?? '');
+        setIsPublic(a.is_public);
+        setHairColor(extractHairColor(a));
+        setSkinColor(extractSkinColor(a));
+        setEyeColor(extractEyeColor(a));
+        setVoiceProfileId(a.default_voice_profile_id);
+    }, []);
+    const fetchAvatar = (0, react_1.useCallback)(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const a = await (0, studioApi_1.getAvatar)(avatarId);
+            setAvatar(a);
+            populateFromAvatar(a);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to load avatar');
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [avatarId, populateFromAvatar]);
+    (0, react_1.useEffect)(() => {
+        fetchAvatar();
+    }, [fetchAvatar]);
+    const equipped = (0, wardrobeStore_1.useWardrobeStore)((s) => s.equipped);
+    const placements = (0, wardrobeStore_1.useWardrobeStore)((s) => s.placements);
+    const isDirty = (0, react_1.useMemo)(() => {
+        if (!avatar)
+            return false;
+        if (name !== avatar.name)
+            return true;
+        if (description !== (avatar.description ?? ''))
+            return true;
+        if (isPublic !== avatar.is_public)
+            return true;
+        if (hairColor !== extractHairColor(avatar))
+            return true;
+        if (skinColor !== extractSkinColor(avatar))
+            return true;
+        if (eyeColor !== extractEyeColor(avatar))
+            return true;
+        if (voiceProfileId !== avatar.default_voice_profile_id)
+            return true;
+        const serialized = wardrobeStore_1.useWardrobeStore.getState().serializeForApi();
+        const serverAccs = avatar.appearance?.equippedAccessories ?? [];
+        if (serialized.length !== serverAccs.length)
+            return true;
+        for (const acc of serialized) {
+            const serverMatch = serverAccs.find((sa) => sa.asset_id === acc.asset_id);
+            if (!serverMatch)
+                return true;
+            if (serverMatch.bone !== acc.bone)
+                return true;
+            if (serverMatch.scale !== acc.scale)
+                return true;
+            if (serverMatch.position?.join(',') !== acc.position?.join(','))
+                return true;
+            if (serverMatch.rotation?.join(',') !== acc.rotation?.join(','))
+                return true;
+        }
+        return false;
+    }, [avatar, name, description, isPublic, hairColor, skinColor, eyeColor, voiceProfileId, equipped, placements]);
+    const save = (0, react_1.useCallback)(async () => {
+        if (!avatar)
+            return;
+        setSaving(true);
+        setError(null);
+        try {
+            const update = {};
+            if (name !== avatar.name)
+                update.name = name;
+            if (description !== (avatar.description ?? ''))
+                update.description = description;
+            if (isPublic !== avatar.is_public)
+                update.is_public = isPublic;
+            const equippedAccessories = wardrobeStore_1.useWardrobeStore.getState().serializeForApi();
+            const serverAccs = avatar.appearance?.equippedAccessories ?? [];
+            const accessoriesChanged = equippedAccessories.length !== serverAccs.length ||
+                equippedAccessories.some((acc) => {
+                    const serverMatch = serverAccs.find((sa) => sa.asset_id === acc.asset_id);
+                    if (!serverMatch)
+                        return true;
+                    if (serverMatch.bone !== acc.bone)
+                        return true;
+                    if (serverMatch.scale !== acc.scale)
+                        return true;
+                    if (serverMatch.position?.join(',') !== acc.position?.join(','))
+                        return true;
+                    if (serverMatch.rotation?.join(',') !== acc.rotation?.join(','))
+                        return true;
+                    return false;
+                });
+            if (hairColor !== extractHairColor(avatar) ||
+                skinColor !== extractSkinColor(avatar) ||
+                eyeColor !== extractEyeColor(avatar) ||
+                accessoriesChanged) {
+                const appearance = {
+                    version: 1,
+                    ...(hairColor ? { hairColor } : {}),
+                    ...(skinColor ? { skinColor } : {}),
+                    ...(eyeColor ? { eyeColor } : {}),
+                    equippedAccessories,
+                };
+                update.appearance = appearance;
+            }
+            if (Object.keys(update).length > 0) {
+                await (0, studioApi_1.updateAvatar)(avatarId, update);
+            }
+            const serverVoice = avatar.default_voice_profile_id;
+            if (voiceProfileId !== serverVoice) {
+                if (voiceProfileId) {
+                    await (0, studioApi_1.setDefaultVoice)(avatarId, voiceProfileId);
+                }
+                else {
+                    await (0, studioApi_1.removeDefaultVoice)(avatarId);
+                }
+            }
+            await fetchAvatar();
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to save avatar');
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [avatar, avatarId, name, description, isPublic, hairColor, skinColor, eyeColor, voiceProfileId, fetchAvatar]);
+    const revert = (0, react_1.useCallback)(() => {
+        if (avatar)
+            populateFromAvatar(avatar);
+    }, [avatar, populateFromAvatar]);
+    return {
+        avatar, loading, error,
+        name, setName,
+        description, setDescription,
+        isPublic, setIsPublic,
+        hairColor, setHairColor,
+        skinColor, setSkinColor,
+        eyeColor, setEyeColor,
+        voiceProfileId, setVoiceProfileId,
+        isDirty, saving,
+        save, revert,
+        reload: fetchAvatar,
+    };
+}

package/dist/wgpu/WgpuAvatar.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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;
-};
+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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WgpuAvatar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");

package/dist/wgpu/useAuthedModelUri.js

@@ -15,15 +15,25 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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;
-};
+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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAuthedModelUri = void 0;
+exports.useAuthedModelUri = useAuthedModelUri;
 const react_1 = require("react");
 const FileSystem = __importStar(require("expo-file-system/legacy"));
 const studioApi_1 = require("../api/studioApi");
@@ -114,4 +124,3 @@ function useAuthedModelUri(remoteUrl) {
     }, [remoteUrl]);
     return result;
 }
-exports.useAuthedModelUri = useAuthedModelUri;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "talking-head-studio",
-  "version": "0.4.9",
+  "version": "0.4.11",
   "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",
@@ -55,7 +55,7 @@
     "format": "prettier --write 'src/**/*.{ts,tsx}'",
     "test": "jest",
     "prepublishOnly": "npm run lint && npm run typecheck && npm test -- --runInBand && npm run build",
-    "build:creator": "vite build --config creator-app/vite.config.ts"
+    "build:creator": "vite build --config packages/avatar-creator/vite.config.ts"
   },
   "keywords": [
     "react-native",
@@ -92,6 +92,9 @@
   "bugs": {
     "url": "https://github.com/sitebay/talking-head-studio/issues"
   },
+  "workspaces": [
+    "packages/*"
+  ],
   "sideEffects": false,
   "dependencies": {
     "@mediapipe/tasks-vision": "^0.10.34",
@@ -154,7 +157,7 @@
     "@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-dom": "^19.0.0",
     "@types/react-native": "^0.73.0",
     "@types/three": "^0.180.0",
     "@typescript-eslint/eslint-plugin": "^8.56.1",
@@ -166,6 +169,7 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-native": "^5.0.0",
+    "expo-audio": "^55.0.9",
     "expo-haptics": "^55.0.9",
     "express": "^5.2.1",
     "jest": "^30.2.0",
@@ -183,6 +187,6 @@
     "three": "^0.180.0",
     "ts-jest": "^29.4.6",
     "typescript": "^5.3.3",
-    "vite": "^5.4.21"
+    "vite": "^8.0.3"
   }
 }