fixes typing in meld example project

HumeAI · Aug 27, 2024 · f6b483f · f6b483f
1 parent 38b8fda
commit f6b483f
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 64 deletions.
diff --git a/meld/src/components/Avatars/index.tsx b/meld/src/components/Avatars/index.tsx
@@ -17,7 +17,7 @@ const Avatars: FC = () => {
     <div className="flex gap-32">
       {avatars.map(({ name, visual, prosody }, index) => {
         const isActive = activeAvatar === name;
-        const topProsody = prosody ? Object.keys(prosody)[0] : 'Neutral';
+        const topProsody = prosody ? Object.keys(prosody)[0] : 'neutral';
         const face = getFaceByEmotion(topProsody);
 
         return (
@@ -48,7 +48,10 @@ const Avatars: FC = () => {
                   initial={{ scale: 1 }}
                   animate={{ scale: isActive ? activeScale : inactiveScale }}
                   transition={{ duration: 0.5 }}
-                  className={cn('relative bg-inherit rounded-full opacity-20 size-48', visual)}
+                  className={cn(
+                    'relative bg-inherit rounded-full opacity-20 size-48',
+                    visual,
+                  )}
                 ></motion.div>
               </div>
             </div>

diff --git a/meld/src/store/AvatarProvider/index.tsx b/meld/src/store/AvatarProvider/index.tsx
@@ -1,3 +1,4 @@
+import { Hume } from 'hume';
 import { useVoice } from '@humeai/voice-react';
 import {
   FC,
@@ -17,7 +18,7 @@ type AvatarConfig = {
   name: string;
   prompt?: string;
   visual?: string;
-  prosody: Record<string, number> | undefined;
+  prosody: Hume.empathicVoice.EmotionScores | undefined;
 };
 
 const AvatarContext = createContext<AvatarContextType | null>(null);
@@ -26,20 +27,31 @@ export const useAvatars = () => useContext(AvatarContext) as AvatarContextType;
 
 export const AvatarProvider: FC<PropsWithChildren> = ({ children }) => {
   const { lastVoiceMessage } = useVoice();
-  const prosody = lastVoiceMessage?.models.prosody?.scores ?? {};
   const [activeAvatar, setActiveAvatar] = useState<string | null>(null);
   const [avatars, setAvatars] = useState<AvatarConfig[]>([
-    { name: 'Challenger', visual: 'bg-green-500', prosody: {} },
-    { name: 'Optimist', visual: 'bg-yellow-500', prosody: {} },
-    { name: 'Synthesizer', visual: 'bg-purple-500', prosody: {} },
+    {
+      name: 'Challenger',
+      visual: 'bg-green-500',
+      prosody: undefined,
+    },
+    {
+      name: 'Optimist',
+      visual: 'bg-yellow-500',
+      prosody: undefined,
+    },
+    {
+      name: 'Synthesizer',
+      visual: 'bg-purple-500',
+      prosody: undefined,
+    },
   ]);
 
   useEffect(() => {
     if (!lastVoiceMessage) return;
 
     const { content } = lastVoiceMessage.message;
     const regex = /^\[([^\]]+)\]:/;
-    const match = content.match(regex);
+    const match = content?.match(regex);
 
     if (match) {
       const avatarName = match[1];
@@ -53,15 +65,16 @@ export const AvatarProvider: FC<PropsWithChildren> = ({ children }) => {
     avatars.forEach((avatar: AvatarConfig) => {
       if (avatar.name !== name) return;
 
-      avatar.prosody = Object.entries(prosody)
+      const prosody = lastVoiceMessage?.models.prosody?.scores;
+
+      avatar.prosody = Object.entries(
+        prosody as Hume.empathicVoice.EmotionScores,
+      )
         .sort((a, b) => b[1] - a[1])
-        .reduce(
-          (obj, [key, value]) => {
-            obj[key as keyof typeof obj] = value;
-            return obj;
-          },
-          {} as Record<string, number>,
-        );
+        .reduce((obj, [key, value]) => {
+          obj[key as keyof typeof obj] = value;
+          return obj;
+        }, {} as Hume.empathicVoice.EmotionScores);
 
       setAvatars([...avatars]);
     });

diff --git a/meld/src/utils/emotionFaces.tsx b/meld/src/utils/emotionFaces.tsx
@@ -1,53 +1,53 @@
 /* eslint-disable react-refresh/only-export-components */
 export const emotionMappings = {
-  Admiration: 'smile',
-  Adoration: 'smile',
-  'Aesthetic Appreciation': 'smile',
-  Amusement: 'smile',
-  Awe: 'smile',
-  Boredom: 'smile',
-  Calmness: 'smile',
-  Contemplation: 'smile',
-  Confusion: 'smile',
-  Contentment: 'smile',
-  Craving: 'smile',
-  Disappointment: 'smile',
-  Entrancement: 'smile',
-  Guilt: 'smile',
-  Joy: 'smile',
-  Love: 'smile',
-  Nostalgia: 'smile',
-  Relief: 'smile',
-  Romance: 'smile',
-  Sadness: 'smile',
-  Satisfaction: 'smile',
-  'Sexual Desire': 'smile',
-  Shame: 'smile',
-  Sympathy: 'smile',
-  Tiredness: 'smile',
-  Anger: 'frown',
-  Anxiety: 'frown',
-  Awkwardness: 'frown',
-  Contempt: 'frown',
-  Distress: 'frown',
-  Ecstasy: 'frown',
-  Embarrassment: 'frown',
-  'Empathic Pain': 'frown',
-  Envy: 'frown',
-  Excitement: 'frown',
-  Fear: 'frown',
-  Horror: 'frown',
-  Interest: 'frown',
-  Pain: 'frown',
-  Realization: 'frown',
-  'Surprise (negative)': 'frown',
-  'Surprise (positive)': 'frown',
-  Triumph: 'frown',
-  Concentration: 'neutral',
-  Determination: 'neutral',
-  Disgust: 'neutral',
-  Doubt: 'neutral',
-  Pride: 'neutral',
+  admiration: 'smile',
+  adoration: 'smile',
+  aestheticAppreciation: 'smile',
+  amusement: 'smile',
+  awe: 'smile',
+  boredom: 'smile',
+  calmness: 'smile',
+  contemplation: 'smile',
+  confusion: 'smile',
+  contentment: 'smile',
+  craving: 'smile',
+  disappointment: 'smile',
+  entrancement: 'smile',
+  guilt: 'smile',
+  joy: 'smile',
+  love: 'smile',
+  nostalgia: 'smile',
+  relief: 'smile',
+  romance: 'smile',
+  sadness: 'smile',
+  satisfaction: 'smile',
+  sexualDesire: 'smile',
+  shame: 'smile',
+  sympathy: 'smile',
+  tiredness: 'smile',
+  anger: 'frown',
+  anxiety: 'frown',
+  awkwardness: 'frown',
+  contempt: 'frown',
+  distress: 'frown',
+  ecstasy: 'frown',
+  embarrassment: 'frown',
+  empathicPain: 'frown',
+  envy: 'frown',
+  excitement: 'frown',
+  fear: 'frown',
+  horror: 'frown',
+  interest: 'frown',
+  pain: 'frown',
+  realization: 'frown',
+  surpriseNegative: 'frown',
+  surprisePositive: 'frown',
+  triumph: 'frown',
+  concentration: 'neutral',
+  determination: 'neutral',
+  disgust: 'neutral',
+  doubt: 'neutral',
+  pride: 'neutral',
 };
 
 const Frown = () => {