ultron-ai-sdk 1.0.0 → 1.0.2

package/README.md

@@ -16,35 +16,37 @@ npm install ultron-ai-sdk
 
 ```javascript
 // Import the SDK
-import {SceneCanvas, Character} from './dist/index.mjs';
+    import {SceneCanvas, Character} from 'ultron-ai-sdk';        
         
-        let devices  = await navigator.mediaDevices.enumerateDevices();
-        console.log(devices)
-        let sceneCanvas
-        let character
-        
-        const init = async() => {
-            sceneCanvas = new SceneCanvas('target-html-element')
-            const initializationSetting= {
-                avatarId: "AVATAR_ID/REQUEST_ID",
-                config:{
-                    accessToken : "ACCESS_TOKEN",
-                    refreshToken : "REFRESH_TOKEN",
-                    // sessionId : "426536db-25a4-4682-9bb4-4e93530f84a0",
-                    apiKey: "YOUR_ULTRON_API_KEY"
-                },
-                options:{
-                    alwaysListen: false // For Push to talk conversation
-                }
+    let sceneCanvas
+    let character
+    
+    const init = async() => {
+        sceneCanvas = new SceneCanvas('target-html-element')
+        const initializationSetting= {
+            avatarId: "AVATAR_ID",       // AvatarId and Request Id are same
+            config:{
+                accessToken: 'YOUR_CURRENT_AUTH_TOKEN',   // Can be accessed from your app.ultronai.me localstorage data
+                apiKey: "YOUR_ULTRON_API_KEY"
+            },
+            options:{
+                alwaysListen: false // For Push to talk conversation
             }
-            await sceneCanvas.init(initializationSetting)
-            character = sceneCanvas.character
-                      
         }
-        init()
+        await sceneCanvas.init(initializationSetting)
+        character = sceneCanvas.character
+                    
+    }
+    init()
 
 ```
 
+#### Quick Demo
+
+Check out our website for demo at: [🔗Talk to Avatar in metabrix website](https://dev-website.ultronai.me)
+
+
+
 ---
 
 ## Target HTML Element
@@ -61,8 +63,7 @@ import {SceneCanvas, Character} from './dist/index.mjs';
 
 ```javascript
 const sceneCanvas = new SceneCanvas('target-html-element')
-
-ultronSDK.init(config)
+sceneCanvas.init(config)
 ```
 
 ---
@@ -71,11 +72,27 @@ ultronSDK.init(config)
 
 | Option      | Description |
 |-------------|--------------|
-| `accessToken` | Token recieved on successfull authentication |
-| `refreshToken` |Token recieved on successfull refreshing of existing access token |
+| `accessToken` (optional) | accessToken current logged in Account |
 | `sessionId` (optional) | Session Id obtained using API key |
 | `apiKey` | You ultron key which can be found in your profile in Ultron App |
 
+#### API key (apiKey) 
+
+To get API key of your ultron account follow the steps below
+
+### STEP 1: Click on account at top right corner
+
+![Avatar ID step 1](https://media.ultronai.me/Images/website/apikeysh1.png)
+
+### STEP 2: Select API key from dropdown
+
+![Avatar ID step 1](https://media.ultronai.me/Images/website/apikey2.png)
+
+### STEP 3: Copy your API key
+
+![Avatar ID step 1](https://media.ultronai.me/Images/website/apishe3.png)
+
+
 ---
 
 ## Core Methods
@@ -86,8 +103,24 @@ Loads a specific avatar into the container.
 
 - `avatarId`: **String** - The unique identifier for the avatar
 
----
 
+### AvatarId
+
+To get avatarId follow the steps below
+
+### Step 1: Open the desired avatar in ultron app (app.ultronai.me)
+
+Click share on top right corner
+
+![Avatar ID step 1](https://media.ultronai.me/Images/website/avateridshar1.png)
+
+### Step 1: Open the desired avatar in ultron app (app.ultronai.me)
+
+Step 2: Select the avatar id value as from share url
+
+![Avatar ID step 2](https://media.ultronai.me/Images/website/avartaridshare2.png)
+
+---
 
 ## Audio Input Device Settings
 
@@ -142,25 +175,27 @@ ultronSDK.setAudioInputDevice(myDevice.deviceId)
 ### Basic Implementation
 
 ```javascript
-import CharacterCompanionSDK from './dist/index.mjs';
-
-init=()=>{
-    let sdk = new CharacterCompanionSDK('ultron-model')
-    ultronSDK.init({
-        accessToken : 'YOUR_ACCESS_TOKEN',
-        refreshToken : 'YOUR_REFRESH_TOKEN',
-        sessionId : "SESSIOON_ID", // If you have backend or it will create session from apiKey
-        apiKey: "YOUR_ULTRON_API_KEY"
-    })            
-    const avatarId = 'AVATAR_ID/REQUEST_ID'            
-    await ultronSDK.loadAvatarById(avatarId)
-    ultronSDK.initAudioListener()
-
-    // Load an avatar
-    await ultron.loadAvatar('avatar-id');
-}
-
-init()
+    import {SceneCanvas, Character} from 'ultron-ai-sdk';        
+        
+    let sceneCanvas
+    let character
+    
+    const init = async() => {
+        sceneCanvas = new SceneCanvas('target-html-element')
+        const initializationSetting= {
+            avatarId: "AVATAR_ID/REQUEST_ID",
+            config:{
+                apiKey: "YOUR_ULTRON_API_KEY"
+            },
+            options:{
+                alwaysListen: false // For Push to talk conversation
+            }
+        }
+        await sceneCanvas.init(initializationSetting)
+        character = sceneCanvas.character
+                    
+    }
+    init()
 ```
 
 ---
@@ -168,7 +203,9 @@ init()
 ### Chat with character using AI
 
 ```javascript
-ultronSDK.chat("your text query to AI")
+// once you have the "character" object from sceneCanvas after init() you can use it to chat
+
+character.chat("your text query to AI")
 
 //This will generate a response from AI as per Avatar backstory and character will speak the response
 
@@ -178,7 +215,8 @@ ultronSDK.chat("your text query to AI")
 ### Make the character say
 
 ```javascript
-ultronSDK.say("your text that character will speak")
+
+character.say("your text that character will speak")
 
 // This will simply make the character speak the text you provide
 
@@ -189,11 +227,11 @@ ultronSDK.say("your text that character will speak")
 ```javascript
 //Switch camera to potrait (closer to face)
 
-ultronSDK.switchCameraToPotrait()
+sceneCanvas.switchCameraToPotrait()
 
 //Switch camera to normal position (full body view)
 
-ultronSDK.switchCameraToNormal()
+sceneCanvas.switchCameraToNormal()
 
 
 

package/dist/index.cjs

@@ -43655,6 +43655,7 @@ class AudioListener {
     stopListening() {
         if (this.mediaRecorder && this.mediaRecorder.state === "recording") {
             this.mediaRecorder.stop();
+            
             this.stream.getTracks().forEach(track => {
                 track.stop();
                 
@@ -43693,10 +43694,13 @@ class AudioListener {
        
     }
 
-    detectSilence(silenceThreshold = -50, silenceDuration = 2000) {
+    detectSilence(silenceThreshold = -40, silenceDuration = 700, maxListenDuration = 10) {
         const bufferLength = this.analyser.frequencyBinCount;
         const dataArray = new Uint8Array(bufferLength);
-
+        this.maxkimitTimeout = setTimeout(()=>{
+            console.log("Max time limite reached, stopping recording...");
+            this.stopListening();
+        },maxListenDuration*1000);
         const checkSilence = () => {
             if (!this.mediaRecorder || this.mediaRecorder.state !== "recording") return;
 
@@ -43928,6 +43932,7 @@ class SceneCanvas{
 
     addCharacter=(character)=>{
       this.character = character;
+      this.character.sceneCanvasRef = this;
       this.scene.add(this.character.model);
     }
 
@@ -43959,23 +43964,31 @@ class SceneCanvas{
       
       console.log('adding mic button');
       // Create button element
+      this.voiceElementBlock = document.createElement('div');
+
+      this.voiceElementBlock.style.position = 'absolute';
+      this.voiceElementBlock.style.bottom = '20px';
+      this.voiceElementBlock.style.marginLeft = '50%';
+      this.voiceElementBlock.style.transition = 'background-color 0.2s';
+      this.voiceElementBlock.style.transform = 'translate(-50%, 0%)';
+
       const micButton = document.createElement('button');
+      this.micButton = micButton;
       micButton.id = 'mic-button';
       // Mic emoji (you can replace with SVG if needed)
 
       // Apply styles (round, centered icon, etc.)
-      micButton.style.width = '64px';
-      micButton.style.height = '64px';
+      micButton.style.width = '48px';
+      micButton.style.height = '48px';
       micButton.style.borderRadius = '50%';
       micButton.style.backgroundColor = '#f1f1f1';
-      micButton.style.position = 'absolute';
-      micButton.style.bottom = '20px';
-      micButton.style.marginLeft = '50%';
+      
+      
       
       micButton.style.display = 'flex';
       micButton.style.alignItems = 'center';
       micButton.style.justifyContent = 'center';
-      micButton.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)';
+      micButton.style.boxShadow = '0 4px 8px rgba(0,0,0,0.3)';
       micButton.style.cursor = 'pointer';
       micButton.style.border = 'none';
       micButton.style.fontSize = '24px';
@@ -43987,9 +44000,18 @@ class SceneCanvas{
       const micIcon = document.createElement('img');
       micIcon.src = micUrl;
       micIcon.alt = 'Mic Icon';
-      micIcon.style.width = '36px';
-      micIcon.style.height = '36px';
+      micIcon.style.width = '26px';
+      micIcon.style.height = '26px';
 
+      this.voiceUIText = document.createElement('div');
+      this.voiceUIText.style.display = 'none';
+      this.voiceUIText.style.fontFamily = '"Inter", sans-serif';
+      this.voiceUIText.style.fontSize = '20px';
+      this.voiceUIText.style.color = "white";
+      this.voiceUIText.style.backgroundColor = "#00000030";
+      this.voiceUIText.style.padding = "4px";
+
+      this.voiceUIText.innerHTML = "Listening...";
       // Hover effect
       micButton.onmouseover = () => {
           micButton.style.backgroundColor = '#e5e5e5';
@@ -44006,7 +44028,10 @@ class SceneCanvas{
 
       // Append to target div
       micButton.appendChild(micIcon);
-      this.container.appendChild(micButton);
+      this.voiceElementBlock.append(this.micButton);
+      this.voiceElementBlock.append(this.voiceUIText);
+      
+      this.container.appendChild(this.voiceElementBlock);
   }
 }
 
@@ -44052,10 +44077,23 @@ class Character {
     console.log('initializing audio listener');
     this.continuousConversation = alwaysListen;
     this.audioListener = new AudioListener();
-    this.audioListener.onSpeechStart = () => {console.log('Listening...'); };
+    this.audioListener.onSpeechStart = () => {
+      console.log('Listening...'); 
+      if(this.sceneCanvasRef?.micButton){
+        this.sceneCanvasRef.micButton.style.display = 'none';
+      }  
+      if(this.sceneCanvasRef?.voiceUIText){
+        this.sceneCanvasRef.voiceUIText.style.display = 'block';
+        this.sceneCanvasRef.voiceUIText.innerHTML = "Listening...";
+      }  
+    
+    };
     this.audioListener.onSpeechEnd = (audio) => {
       console.log("audio ended", audio);
-      this.AIServices.currentAudioChunks = [audio];      
+      this.AIServices.currentAudioChunks = [audio];
+      if(this.sceneCanvasRef?.voiceUIText){
+        this.sceneCanvasRef.voiceUIText.innerHTML = "Thinking...";
+      }
       this.handleCurrentAudioMessage();        
     };
     console.log(this.audioListener);
@@ -44093,6 +44131,7 @@ class Character {
       formData.append("lipSync", false);
 
       this.chatHistory.push({ text: 'audio', role: 'user' });
+      // this.playAnimation('listening')
       await this.chat('audio',formData);
     //   this.chatHistory.push({ text: response.text, role: 'assistant' });
   }
@@ -44240,14 +44279,27 @@ class Character {
             }, (duration - 0.5)*1000);
         }
     }
+    if(this.sceneCanvasRef?.voiceUIText){
+      this.sceneCanvasRef.voiceUIText.innerHTML = "Speaking...";
+
+    }
 
   }
 
   onSpeakComplete=()=>{
-    if(this.continuousConversation)
+    if(this.continuousConversation){
     this.startListening();
-    else
-    this.playAnimation('idle');
+    }else {
+      if(this.sceneCanvasRef?.micButton){
+        this.sceneCanvasRef.micButton.style.display = 'flex';
+      }
+      if(this.sceneCanvasRef?.voiceUIText){
+        this.sceneCanvasRef.voiceUIText.style.display = 'none';
+        this.sceneCanvasRef.voiceUIText.innerHTML = "";
+      }  
+      
+      this.playAnimation('idle');
+    }
   }
 
   processLipSync=(lipSyncData)=>{

package/dist/index.mjs

@@ -43653,6 +43653,7 @@ class AudioListener {
     stopListening() {
         if (this.mediaRecorder && this.mediaRecorder.state === "recording") {
             this.mediaRecorder.stop();
+            
             this.stream.getTracks().forEach(track => {
                 track.stop();
                 
@@ -43691,10 +43692,13 @@ class AudioListener {
        
     }
 
-    detectSilence(silenceThreshold = -50, silenceDuration = 2000) {
+    detectSilence(silenceThreshold = -40, silenceDuration = 700, maxListenDuration = 10) {
         const bufferLength = this.analyser.frequencyBinCount;
         const dataArray = new Uint8Array(bufferLength);
-
+        this.maxkimitTimeout = setTimeout(()=>{
+            console.log("Max time limite reached, stopping recording...");
+            this.stopListening();
+        },maxListenDuration*1000);
         const checkSilence = () => {
             if (!this.mediaRecorder || this.mediaRecorder.state !== "recording") return;
 
@@ -43926,6 +43930,7 @@ class SceneCanvas{
 
     addCharacter=(character)=>{
       this.character = character;
+      this.character.sceneCanvasRef = this;
       this.scene.add(this.character.model);
     }
 
@@ -43957,23 +43962,31 @@ class SceneCanvas{
       
       console.log('adding mic button');
       // Create button element
+      this.voiceElementBlock = document.createElement('div');
+
+      this.voiceElementBlock.style.position = 'absolute';
+      this.voiceElementBlock.style.bottom = '20px';
+      this.voiceElementBlock.style.marginLeft = '50%';
+      this.voiceElementBlock.style.transition = 'background-color 0.2s';
+      this.voiceElementBlock.style.transform = 'translate(-50%, 0%)';
+
       const micButton = document.createElement('button');
+      this.micButton = micButton;
       micButton.id = 'mic-button';
       // Mic emoji (you can replace with SVG if needed)
 
       // Apply styles (round, centered icon, etc.)
-      micButton.style.width = '64px';
-      micButton.style.height = '64px';
+      micButton.style.width = '48px';
+      micButton.style.height = '48px';
       micButton.style.borderRadius = '50%';
       micButton.style.backgroundColor = '#f1f1f1';
-      micButton.style.position = 'absolute';
-      micButton.style.bottom = '20px';
-      micButton.style.marginLeft = '50%';
+      
+      
       
       micButton.style.display = 'flex';
       micButton.style.alignItems = 'center';
       micButton.style.justifyContent = 'center';
-      micButton.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)';
+      micButton.style.boxShadow = '0 4px 8px rgba(0,0,0,0.3)';
       micButton.style.cursor = 'pointer';
       micButton.style.border = 'none';
       micButton.style.fontSize = '24px';
@@ -43985,9 +43998,18 @@ class SceneCanvas{
       const micIcon = document.createElement('img');
       micIcon.src = micUrl;
       micIcon.alt = 'Mic Icon';
-      micIcon.style.width = '36px';
-      micIcon.style.height = '36px';
+      micIcon.style.width = '26px';
+      micIcon.style.height = '26px';
 
+      this.voiceUIText = document.createElement('div');
+      this.voiceUIText.style.display = 'none';
+      this.voiceUIText.style.fontFamily = '"Inter", sans-serif';
+      this.voiceUIText.style.fontSize = '20px';
+      this.voiceUIText.style.color = "white";
+      this.voiceUIText.style.backgroundColor = "#00000030";
+      this.voiceUIText.style.padding = "4px";
+
+      this.voiceUIText.innerHTML = "Listening...";
       // Hover effect
       micButton.onmouseover = () => {
           micButton.style.backgroundColor = '#e5e5e5';
@@ -44004,7 +44026,10 @@ class SceneCanvas{
 
       // Append to target div
       micButton.appendChild(micIcon);
-      this.container.appendChild(micButton);
+      this.voiceElementBlock.append(this.micButton);
+      this.voiceElementBlock.append(this.voiceUIText);
+      
+      this.container.appendChild(this.voiceElementBlock);
   }
 }
 
@@ -44050,10 +44075,23 @@ class Character {
     console.log('initializing audio listener');
     this.continuousConversation = alwaysListen;
     this.audioListener = new AudioListener();
-    this.audioListener.onSpeechStart = () => {console.log('Listening...'); };
+    this.audioListener.onSpeechStart = () => {
+      console.log('Listening...'); 
+      if(this.sceneCanvasRef?.micButton){
+        this.sceneCanvasRef.micButton.style.display = 'none';
+      }  
+      if(this.sceneCanvasRef?.voiceUIText){
+        this.sceneCanvasRef.voiceUIText.style.display = 'block';
+        this.sceneCanvasRef.voiceUIText.innerHTML = "Listening...";
+      }  
+    
+    };
     this.audioListener.onSpeechEnd = (audio) => {
       console.log("audio ended", audio);
-      this.AIServices.currentAudioChunks = [audio];      
+      this.AIServices.currentAudioChunks = [audio];
+      if(this.sceneCanvasRef?.voiceUIText){
+        this.sceneCanvasRef.voiceUIText.innerHTML = "Thinking...";
+      }
       this.handleCurrentAudioMessage();        
     };
     console.log(this.audioListener);
@@ -44091,6 +44129,7 @@ class Character {
       formData.append("lipSync", false);
 
       this.chatHistory.push({ text: 'audio', role: 'user' });
+      // this.playAnimation('listening')
       await this.chat('audio',formData);
     //   this.chatHistory.push({ text: response.text, role: 'assistant' });
   }
@@ -44238,14 +44277,27 @@ class Character {
             }, (duration - 0.5)*1000);
         }
     }
+    if(this.sceneCanvasRef?.voiceUIText){
+      this.sceneCanvasRef.voiceUIText.innerHTML = "Speaking...";
+
+    }
 
   }
 
   onSpeakComplete=()=>{
-    if(this.continuousConversation)
+    if(this.continuousConversation){
     this.startListening();
-    else
-    this.playAnimation('idle');
+    }else {
+      if(this.sceneCanvasRef?.micButton){
+        this.sceneCanvasRef.micButton.style.display = 'flex';
+      }
+      if(this.sceneCanvasRef?.voiceUIText){
+        this.sceneCanvasRef.voiceUIText.style.display = 'none';
+        this.sceneCanvasRef.voiceUIText.innerHTML = "";
+      }  
+      
+      this.playAnimation('idle');
+    }
   }
 
   processLipSync=(lipSyncData)=>{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ultron-ai-sdk",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "This package is for integrating Ultron AI Characters as website Companions on a website",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",