@sage-rsc/talking-head-react 1.3.3 → 1.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sage-rsc/talking-head-react",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "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/scripts/generate-animation-manifest.js

@@ -20,6 +20,7 @@ const outputFile = path.join(animationsDir, 'manifest.json');
 
 function scanDirectory(dir) {
   const groups = {};
+  const genderGroups = { male: {}, female: {}, shared: {} };
   
   if (!fs.existsSync(dir)) {
     console.error(`Directory does not exist: ${dir}`);
@@ -28,29 +29,101 @@ function scanDirectory(dir) {
 
   const items = fs.readdirSync(dir, { withFileTypes: true });
   
-  for (const item of items) {
-    const fullPath = path.join(dir, item.name);
-    
-    if (item.isDirectory()) {
-      // Scan subdirectory for FBX files
-      const subFiles = fs.readdirSync(fullPath)
-        .filter(file => file.toLowerCase().endsWith('.fbx'))
-        .map(file => `/animations/${item.name}/${file}`);
+  // First pass: Check for gender-specific top-level directories
+  const hasGenderDirs = items.some(item => {
+    if (!item.isDirectory()) return false;
+    const name = item.name.toLowerCase();
+    return name === 'male' || name === 'female' || name === 'm' || name === 'f' ||
+           name.startsWith('male_') || name.startsWith('female_') || 
+           name.startsWith('m_') || name.startsWith('f_');
+  });
+  
+  if (hasGenderDirs) {
+    // Structure: animations/male/talking/, animations/female/talking/
+    for (const item of items) {
+      if (!item.isDirectory()) continue;
+      
+      const dirNameLower = item.name.toLowerCase();
+      let targetGender = null;
+      
+      // Detect gender directory
+      if (dirNameLower === 'male' || dirNameLower === 'm' || dirNameLower.startsWith('male_') || dirNameLower.startsWith('m_')) {
+        targetGender = 'male';
+      } else if (dirNameLower === 'female' || dirNameLower === 'f' || dirNameLower.startsWith('female_') || dirNameLower.startsWith('f_')) {
+        targetGender = 'female';
+      }
       
-      if (subFiles.length > 0) {
-        groups[item.name] = subFiles;
-        console.log(`Found ${subFiles.length} animations in ${item.name}/`);
+      if (targetGender) {
+        // Scan subdirectories within gender directory
+        const genderDir = path.join(dir, item.name);
+        const subItems = fs.readdirSync(genderDir, { withFileTypes: true });
+        
+        for (const subItem of subItems) {
+          if (subItem.isDirectory()) {
+            const subDir = path.join(genderDir, subItem.name);
+            const subFiles = fs.readdirSync(subDir)
+              .filter(file => file.toLowerCase().endsWith('.fbx'))
+              .map(file => `/animations/${item.name}/${subItem.name}/${file}`);
+            
+            if (subFiles.length > 0) {
+              const groupName = subItem.name;
+              if (!genderGroups[targetGender][groupName]) {
+                genderGroups[targetGender][groupName] = [];
+              }
+              genderGroups[targetGender][groupName].push(...subFiles);
+              console.log(`Found ${subFiles.length} ${targetGender} animations in ${item.name}/${subItem.name}/`);
+            }
+          }
+        }
+      } else {
+        // Shared directory - scan normally
+        const fullPath = path.join(dir, item.name);
+        const subFiles = fs.readdirSync(fullPath)
+          .filter(file => file.toLowerCase().endsWith('.fbx'))
+          .map(file => `/animations/${item.name}/${file}`);
+        
+        if (subFiles.length > 0) {
+          groups[item.name] = subFiles;
+          console.log(`Found ${subFiles.length} shared animations in ${item.name}/`);
+        }
       }
-    } else if (item.isFile() && item.name.toLowerCase().endsWith('.fbx')) {
-      // File in root directory - add to a default group or create one
-      const groupName = 'default';
-      if (!groups[groupName]) {
-        groups[groupName] = [];
+    }
+  } else {
+    // Structure: animations/talking/, animations/idle/ (no gender separation)
+    for (const item of items) {
+      const fullPath = path.join(dir, item.name);
+      
+      if (item.isDirectory()) {
+        const subFiles = fs.readdirSync(fullPath)
+          .filter(file => file.toLowerCase().endsWith('.fbx'))
+          .map(file => `/animations/${item.name}/${file}`);
+        
+        if (subFiles.length > 0) {
+          groups[item.name] = subFiles;
+          console.log(`Found ${subFiles.length} animations in ${item.name}/`);
+        }
+      } else if (item.isFile() && item.name.toLowerCase().endsWith('.fbx')) {
+        const groupName = 'default';
+        if (!groups[groupName]) {
+          groups[groupName] = [];
+        }
+        groups[groupName].push(`/animations/${item.name}`);
       }
-      groups[groupName].push(`/animations/${item.name}`);
     }
   }
   
+  // Add gender-specific groups to main groups object if found
+  if (Object.keys(genderGroups.male).length > 0 || Object.keys(genderGroups.female).length > 0) {
+    groups._genderSpecific = {
+      male: genderGroups.male,
+      female: genderGroups.female,
+      shared: genderGroups.shared
+    };
+    console.log(`\n📊 Gender-specific groups:`);
+    console.log(`   Male: ${Object.keys(genderGroups.male).length} groups`);
+    console.log(`   Female: ${Object.keys(genderGroups.female).length} groups`);
+  }
+  
   return groups;
 }
 

package/src/components/SimpleTalkingAvatar.jsx

@@ -86,14 +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:', {
+              male: Object.keys(manifestAnimations._genderSpecific.male || {}),
+              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);
       }
     };
@@ -250,13 +263,48 @@ const SimpleTalkingAvatar = forwardRef(({
     }
   }, []);
 
-  // Helper function to get random animation from a group
+  // 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;
     }
     
-    const group = loadedAnimations[groupName];
+    let group = null;
+    
+    // Check if gender-specific animations are available
+    if (loadedAnimations._genderSpecific) {
+      const avatarGender = avatarBody?.toUpperCase() || 'F';
+      const genderKey = avatarGender === 'M' ? 'male' : 'female';
+      const genderGroups = loadedAnimations._genderSpecific[genderKey];
+      
+      // Try gender-specific first
+      if (genderGroups && genderGroups[groupName]) {
+        group = genderGroups[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}":`, 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) {
@@ -269,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]);
+  }, [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]);
@@ -307,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/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 {};
   }
 }