feat: change demo avatars

.npmrc

@@ -1 +1 @@
-package-lock=false
+

README.md

@@ -23,13 +23,13 @@ Feel free to play around with the existing code and please leave any feedback fo
 
 6. Run `npm run dev`
 
-### Using the API Key
+### Difference between Trial Token and Enterprise API Token
 
-Every HeyGen user receives 10 free API Credits when they sign up for HeyGen. You can access your HeyGen API Key at https://app.heygen.com/settings?nav=API
+The HeyGen Trial Token is available to all users, not just Enterprise users, and allows for testing of the Interactive Avatar API, as well as other HeyGen API endpoints.
 
-To see the different amounts of credits that are consumed by different endpoints of the API, visit the Limits page of the API documentation: https://docs.heygen.com/reference/limits
+Each Trial Token is limited to 3 concurrent interactive sessions. However, every interactive session you create with the Trial Token is free of charge, no matter how many tasks are sent to the avatar. Please note that interactive sessions will automatically close after 10 minutes of no tasks sent.
 
-To add more API credits, subscribe to one of HeyGen's API Plans. Pricing and details can be found at https://www.heygen.com/api-pricing
+If you do not 'close' the interactive sessions and try to open more than 3, you will encounter errors including stuttering and freezing of the Interactive Avatar. Please endeavor to only have 3 sessions open at any time while you are testing the Interactive Avatar API with your Trial Token.
 
 ### Starting sessions
 

app/lib/constants.ts

@@ -1,23 +1,23 @@
 export const AVATARS = [
   {
-    avatar_id: "Eric_public_pro2_20230608",
-    name: "Edward in Blue Shirt",
+    avatar_id: "Ann_Therapist_public",
+    name: "Ann Therapist",
   },
   {
-    avatar_id: "Tyler-incasualsuit-20220721",
-    name: "Tyler in Casual Suit",
+    avatar_id: "Shawn_Therapist_public",
+    name: "Shawn Therapist",
   },
   {
-    avatar_id: "Anna_public_3_20240108",
-    name: "Anna in Brown T-shirt",
+    avatar_id: "Bryan_FitnessCoach_public",
+    name: "Bryan Fitness Coach",
   },
   {
-    avatar_id: "Susan_public_2_20240328",
-    name: "Susan in Black Shirt",
+    avatar_id: "Dexter_Doctor_Standing2_public",
+    name: "Dexter Doctor Standing",
   },
   {
-    avatar_id: "josh_lite3_20230714",
-    name: "Joshua Heygen CEO",
+    avatar_id: "Elenora_IT_Sitting_public",
+    name: "Elenora Tech Expert",
   },
 ];
 

components/InteractiveAvatar.tsx

@@ -31,7 +31,7 @@ export default function InteractiveAvatar() {
   const [stream, setStream] = useState<MediaStream>();
   const [debug, setDebug] = useState<string>();
   const [knowledgeId, setKnowledgeId] = useState<string>("");
-  const [avatarId, setAvatarId] = useState<string>("Wayne_20240711");
+  const [avatarId, setAvatarId] = useState<string>("");
   const [language, setLanguage] = useState<string>('en');
 
   const [data, setData] = useState<StartAvatarResponse>();
@@ -64,8 +64,6 @@ export default function InteractiveAvatar() {
 
     avatar.current = new StreamingAvatar({
       token: newToken,
-      basePath: "https://api.heygen.com",
-      userAudioWebsocketPath: "ws://localhost:3001/user-audio-input",
     });
     avatar.current.on(StreamingEvents.AVATAR_START_TALKING, (e) => {
       console.log("Avatar started talking", e);
@@ -93,6 +91,18 @@ export default function InteractiveAvatar() {
       const res = await avatar.current.createStartAvatar({
         quality: AvatarQuality.Low,
         avatarName: avatarId,
+        knowledgeId: knowledgeId, // Or use a custom `knowledgeBase`.
+        voice: {
+          rate: 1.5, // 0.5 ~ 1.5
+          emotion: VoiceEmotion.EXCITED,
+          // elevenlabsSettings: {
+          //   stability: 1,
+          //   similarity_boost: 1,
+          //   style: 1,
+          //   use_speaker_boost: false,
+          // },
+        },
+        language: language,
         disableIdleTimeout: true,
       });
 
@@ -121,7 +131,6 @@ export default function InteractiveAvatar() {
     });
     setIsLoadingRepeat(false);
   }
-  
   async function handleInterrupt() {
     if (!avatar.current) {
       setDebug("Avatar API not initialized");

package.json

@@ -10,20 +10,20 @@
   },
   "dependencies": {
     "@ai-sdk/openai": "^0.0.34",
-    "@heygen/streaming-avatar": "github:HeyGen-Official/StreamingAvatarSDK#realtime-alpha",
-    "@nextui-org/button": "^2.0.34",
+    "@heygen/streaming-avatar": "^2.0.9",
+    "@nextui-org/button": "2.0.34",
     "@nextui-org/chip": "^2.0.32",
-    "@nextui-org/code": "^2.0.29",
-    "@nextui-org/input": "^2.2.2",
-    "@nextui-org/kbd": "^2.0.30",
-    "@nextui-org/link": "^2.0.32",
-    "@nextui-org/listbox": "^2.1.21",
-    "@nextui-org/navbar": "^2.0.33",
+    "@nextui-org/code": "2.0.29",
+    "@nextui-org/input": "2.2.2",
+    "@nextui-org/kbd": "2.0.30",
+    "@nextui-org/link": "2.0.32",
+    "@nextui-org/listbox": "2.1.21",
+    "@nextui-org/navbar": "2.0.33",
     "@nextui-org/react": "^2.4.2",
-    "@nextui-org/snippet": "^2.0.38",
-    "@nextui-org/switch": "^2.0.31",
-    "@nextui-org/system": "^2.2.1",
-    "@nextui-org/theme": "^2.2.5",
+    "@nextui-org/snippet": "2.0.38",
+    "@nextui-org/switch": "2.0.31",
+    "@nextui-org/system": "2.2.1",
+    "@nextui-org/theme": "2.2.5",
     "@phosphor-icons/react": "^2.1.5",
     "@react-aria/ssr": "3.9.4",
     "@react-aria/visually-hidden": "3.8.12",
@@ -32,7 +32,6 @@
     "ahooks": "^3.8.1",
     "ai": "^3.2.15",
     "clsx": "2.1.1",
-    "framer-motion": "^11.5.6",
     "intl-messageformat": "^10.5.0",
     "next": "14.2.4",
     "next-themes": "^0.2.1",