Update index.html

index.html

@@ -20,7 +20,10 @@
     <button id="stopButton" disabled>Stop Listening</button>
 
     <script type="module">
-        import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';
+        import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';
+
+        // Set the local directory for caching models
+        env.localModelPath = './models';
 
         const conversationDiv = document.getElementById('conversation');
         const startButton = document.getElementById('startButton');
@@ -31,12 +34,22 @@
         let ttsPipeline;
 
         async function initializePipelines() {
-            sttPipeline = await pipeline('automatic-speech-recognition', 'Xenova/whisper-tiny.en');
-            ttsPipeline = await pipeline('text-to-speech', 'Xenova/speecht5_tts');
+            try {
+                sttPipeline = await pipeline('automatic-speech-recognition', 'Xenova/whisper-tiny.en');
+                ttsPipeline = await pipeline('text-to-speech', 'Xenova/speecht5_tts');
+                addMessage('System', 'Voice Chat Bot initialized. Click "Start Listening" to begin.');
+            } catch (error) {
+                console.error('Error initializing pipelines:', error);
+                addMessage('System', 'Error initializing Voice Chat Bot. Please check the console for details.');
+            }
         }
 
         async function processSpeech(audio) {
             try {
+                if (!sttPipeline || !ttsPipeline) {
+                    throw new Error('Pipelines not initialized');
+                }
+
                 const transcription = await sttPipeline(audio);
                 addMessage('User', transcription.text);
                 
@@ -44,10 +57,11 @@
                 const botResponse = `I heard you say: "${transcription.text}". This is a placeholder response.`;
                 addMessage('Bot', botResponse);
 
-                const speechOutput = await ttsPipeline(botResponse);
+                const speechOutput = await ttsPipeline(botResponse, { speaker_id: 0 });
                 playAudio(speechOutput.audio);
             } catch (error) {
                 console.error('Error processing speech:', error);
+                addMessage('System', 'Error processing speech. Please try again.');
             }
         }
 
@@ -83,12 +97,13 @@
                 addMessage('System', 'Listening...');
             } catch (error) {
                 console.error('Error starting VAD:', error);
+                addMessage('System', 'Error starting voice detection. Please check your microphone and try again.');
             }
         }
 
         function stopListening() {
             if (myvad) {
-                myvad.stop();
+                myvad.pause();
                 startButton.disabled = false;
                 stopButton.disabled = true;
                 addMessage('System', 'Stopped listening.');
@@ -99,9 +114,7 @@
         stopButton.addEventListener('click', stopListening);
 
         // Initialize pipelines when the page loads
-        initializePipelines().then(() => {
-            addMessage('System', 'Voice Chat Bot initialized. Click "Start Listening" to begin.');
-        });
+        initializePipelines();
     </script>
 </body>
 </html>