@sage-rsc/talking-head-react 1.3.4 → 1.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sage-rsc/talking-head-react",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "description": "A reusable React component for 3D talking avatars with lip-sync and text-to-speech",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

package/src/components/SimpleTalkingAvatar.jsx

@@ -86,22 +86,27 @@ const SimpleTalkingAvatar = forwardRef(({
     const loadManifestAnimations = async () => {
       if (animations.manifest) {
         try {
+          console.log('🔄 Loading animations from manifest:', animations.manifest);
           const manifestAnimations = await loadAnimationsFromManifest(animations.manifest);
           setLoadedAnimations(manifestAnimations);
-          console.log('Loaded animations from manifest:', manifestAnimations);
+          console.log('✅ Animations loaded and set:', manifestAnimations);
           
           // Log gender-specific groups if available
           if (manifestAnimations._genderSpecific) {
-            console.log('Gender-specific animations detected:', {
+            console.log('👥 Gender-specific animations detected:', {
               male: Object.keys(manifestAnimations._genderSpecific.male || {}),
-              female: Object.keys(manifestAnimations._genderSpecific.female || {})
+              female: Object.keys(manifestAnimations._genderSpecific.female || {}),
+              shared: Object.keys(manifestAnimations._genderSpecific.shared || {})
             });
+          } else {
+            console.log('⚠️ No gender-specific animations found in manifest');
           }
         } catch (error) {
-          console.error('Failed to load animation manifest:', error);
+          console.error('❌ Failed to load animation manifest:', error);
           setLoadedAnimations(animations);
         }
       } else {
+        console.log('📝 Using animations from props (no manifest):', animations);
         setLoadedAnimations(animations);
       }
     };
@@ -260,11 +265,12 @@ const SimpleTalkingAvatar = forwardRef(({
 
   // Helper function to get random animation from a group (with gender support)
   const getRandomAnimation = useCallback((groupName) => {
-    if (!loadedAnimations || !loadedAnimations[groupName]) {
+    if (!loadedAnimations) {
+      console.warn('No animations loaded');
       return null;
     }
     
-    let group = loadedAnimations[groupName];
+    let group = null;
     
     // Check if gender-specific animations are available
     if (loadedAnimations._genderSpecific) {
@@ -272,16 +278,34 @@ const SimpleTalkingAvatar = forwardRef(({
       const genderKey = avatarGender === 'M' ? 'male' : 'female';
       const genderGroups = loadedAnimations._genderSpecific[genderKey];
       
-      // Try gender-specific first, fallback to shared
+      // Try gender-specific first
       if (genderGroups && genderGroups[groupName]) {
         group = genderGroups[groupName];
-        console.log(`Using ${genderKey} animations for "${groupName}"`);
-      } else if (loadedAnimations._genderSpecific.shared && loadedAnimations._genderSpecific.shared[groupName]) {
+        console.log(`Using ${genderKey} animations for "${groupName}":`, group);
+      } 
+      // Fallback to shared gender-specific animations
+      else if (loadedAnimations._genderSpecific.shared && loadedAnimations._genderSpecific.shared[groupName]) {
         group = loadedAnimations._genderSpecific.shared[groupName];
-        console.log(`Using shared animations for "${groupName}"`);
+        console.log(`Using shared animations for "${groupName}":`, group);
       }
     }
     
+    // Fallback to root-level animations if gender-specific not found
+    if (!group && loadedAnimations[groupName]) {
+      group = loadedAnimations[groupName];
+      console.log(`Using root-level animations for "${groupName}":`, group);
+    }
+    
+    if (!group) {
+      console.warn(`Animation group "${groupName}" not found. Available groups:`, Object.keys(loadedAnimations).filter(k => k !== '_genderSpecific'));
+      if (loadedAnimations._genderSpecific) {
+        const avatarGender = avatarBody?.toUpperCase() || 'F';
+        const genderKey = avatarGender === 'M' ? 'male' : 'female';
+        console.warn(`Gender-specific groups (${genderKey}):`, Object.keys(loadedAnimations._genderSpecific[genderKey] || {}));
+      }
+      return null;
+    }
+    
     // If it's an array, randomly select one
     if (Array.isArray(group) && group.length > 0) {
       const randomIndex = Math.floor(Math.random() * group.length);
@@ -293,21 +317,29 @@ const SimpleTalkingAvatar = forwardRef(({
       return group;
     }
     
+    console.warn(`Animation group "${groupName}" is not a valid format (expected array or string):`, group);
     return null;
   }, [loadedAnimations, avatarBody]);
 
   // Helper function to play random animation from a group
   const playRandomAnimation = useCallback((groupName, disablePositionLock = false) => {
+    if (!talkingHeadRef.current) {
+      console.warn('TalkingHead not initialized yet');
+      return null;
+    }
+    
     const animationPath = getRandomAnimation(groupName);
-    if (animationPath && talkingHeadRef.current) {
+    if (animationPath) {
       try {
         talkingHeadRef.current.playAnimation(animationPath, null, 10, 0, 0.01, disablePositionLock);
-        console.log(`Playing random animation from "${groupName}" group:`, animationPath);
+        console.log(`✅ Playing random animation from "${groupName}" group:`, animationPath);
         return animationPath;
       } catch (error) {
-        console.warn(`Failed to play random animation from "${groupName}" group:`, error);
+        console.error(`❌ Failed to play random animation from "${groupName}" group:`, error);
         return null;
       }
+    } else {
+      console.warn(`⚠️ No animation found for group "${groupName}"`);
     }
     return null;
   }, [getRandomAnimation]);
@@ -331,7 +363,11 @@ const SimpleTalkingAvatar = forwardRef(({
     // Check both autoAnimationGroup prop and options.animationGroup
     const animationGroup = options.animationGroup || autoAnimationGroup;
     if (animationGroup && !options.skipAnimation) {
+      console.log(`🎬 Attempting to play animation from group: "${animationGroup}"`);
+      console.log(`📊 Current avatarBody: "${avatarBody}", loadedAnimations:`, loadedAnimations);
       playRandomAnimation(animationGroup);
+    } else {
+      console.log(`⏭️ Skipping animation (group: ${animationGroup}, skipAnimation: ${options.skipAnimation})`);
     }
 
     // Reset speech progress tracking

package/src/lib/talkinghead.mjs

@@ -1608,6 +1608,34 @@ class TalkingHead {
         }
       }
     }
+    
+    // Apply shoulder adjustment to lower shoulders
+    this.applyShoulderAdjustment();
+  }
+  
+  /**
+   * Apply shoulder adjustment to lower shoulders to a more natural position
+   */
+  applyShoulderAdjustment() {
+    // Shoulder adjustment: reduce X-axis rotation by ~0.35 radians (20 degrees) to lower shoulders
+    const shoulderAdjustment = -0.35; // Negative to lower shoulders
+    const tempEuler = new THREE.Euler();
+    
+    // Adjust left shoulder
+    if (this.poseAvatar.props['LeftShoulder.quaternion']) {
+      const leftShoulder = this.poseAvatar.props['LeftShoulder.quaternion'];
+      tempEuler.setFromQuaternion(leftShoulder, 'XYZ');
+      tempEuler.x += shoulderAdjustment; // Reduce X rotation to lower shoulder
+      leftShoulder.setFromEuler(tempEuler, 'XYZ');
+    }
+    
+    // Adjust right shoulder
+    if (this.poseAvatar.props['RightShoulder.quaternion']) {
+      const rightShoulder = this.poseAvatar.props['RightShoulder.quaternion'];
+      tempEuler.setFromQuaternion(rightShoulder, 'XYZ');
+      tempEuler.x += shoulderAdjustment; // Reduce X rotation to lower shoulder
+      rightShoulder.setFromEuler(tempEuler, 'XYZ');
+    }
   }
 
   /**

package/src/utils/animationLoader.js

@@ -11,11 +11,28 @@
  */
 export async function loadAnimationsFromManifest(manifestPath) {
   try {
+    console.log(`📥 Loading animation manifest from: ${manifestPath}`);
     const response = await fetch(manifestPath);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch manifest: ${response.status} ${response.statusText}`);
+    }
     const manifest = await response.json();
-    return manifest.animations || {};
+    console.log('📦 Raw manifest loaded:', manifest);
+    
+    const animations = manifest.animations || {};
+    console.log('✅ Processed animations object:', animations);
+    
+    if (animations._genderSpecific) {
+      console.log('👥 Gender-specific structure detected:', {
+        male: Object.keys(animations._genderSpecific.male || {}),
+        female: Object.keys(animations._genderSpecific.female || {}),
+        shared: Object.keys(animations._genderSpecific.shared || {})
+      });
+    }
+    
+    return animations;
   } catch (error) {
-    console.error('Failed to load animation manifest:', error);
+    console.error('❌ Failed to load animation manifest:', error);
     return {};
   }
 }