Update index.html

index.html

@@ -10,15 +10,24 @@
     <style>
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #1a1a1a;
+            color: #f0f0f0;
+        }
+        .container {
             max-width: 800px;
             margin: 0 auto;
-            padding: 20px;
-            background-color: #f0f0f0;
-            color: #333;
         }
         h1 {
+            color: #ffd700;
+            text-align: center;
+            margin-bottom: 10px;
+        }
+        .subtitle {
             text-align: center;
-            color: #2c3e50;
+            color: #ffd700;
+            margin-bottom: 20px;
         }
         #chat-container {
             display: flex;
@@ -27,48 +36,47 @@
         }
         #conversation {
             flex-grow: 1;
-            border: 1px solid #ccc;
+            border: 1px solid #444;
             padding: 10px;
             overflow-y: scroll;
-            background-color: white;
+            background-color: #2a2a2a;
             border-radius: 5px;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+            margin-bottom: 20px;
         }
         #controls {
             display: flex;
             justify-content: center;
-            margin-top: 20px;
+            margin-bottom: 20px;
         }
         button {
             font-size: 18px;
             padding: 10px 20px;
-            margin: 0 10px;
-            background-color: #3498db;
-            color: white;
+            background-color: #ffd700;
+            color: #1a1a1a;
             border: none;
             border-radius: 5px;
             cursor: pointer;
             transition: background-color 0.3s;
         }
         button:hover {
-            background-color: #2980b9;
+            background-color: #ffec8b;
         }
         button:disabled {
-            background-color: #bdc3c7;
+            background-color: #666;
             cursor: not-allowed;
         }
         #visualizer {
             width: 100%;
             height: 100px;
-            background-color: #34495e;
-            margin-top: 20px;
+            background-color: #2a2a2a;
             border-radius: 5px;
             overflow: hidden;
+            margin-bottom: 20px;
         }
         .bar {
             width: 5px;
             height: 100%;
-            background-color: #3498db;
+            background-color: #ffd700;
             display: inline-block;
             margin-right: 1px;
         }
@@ -78,7 +86,7 @@
             left: 0;
             width: 100%;
             height: 100%;
-            background-color: rgba(0, 0, 0, 0.5);
+            background-color: rgba(0, 0, 0, 0.8);
             display: flex;
             justify-content: center;
             align-items: center;
@@ -88,7 +96,7 @@
             width: 50px;
             height: 50px;
             border: 5px solid #f3f3f3;
-            border-top: 5px solid #3498db;
+            border-top: 5px solid #ffd700;
             border-radius: 50%;
             animation: spin 1s linear infinite;
         }
@@ -96,20 +104,67 @@
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
+        #configuration {
+            margin-bottom: 20px;
+        }
+        select {
+            width: 100%;
+            padding: 10px;
+            font-size: 16px;
+            background-color: #2a2a2a;
+            color: #f0f0f0;
+            border: 1px solid #444;
+            border-radius: 5px;
+        }
+        #model-info {
+            margin-top: 10px;
+            font-size: 14px;
+            color: #aaa;
+        }
+        #logs {
+            background-color: #2a2a2a;
+            border: 1px solid #444;
+            border-radius: 5px;
+            padding: 10px;
+            height: 200px;
+            overflow-y: scroll;
+            font-family: monospace;
+            font-size: 14px;
+        }
+        #clear-logs {
+            margin-top: 10px;
+            font-size: 14px;
+            padding: 5px 10px;
+        }
     </style>
 </head>
 <body>
     <div id="loading">
         <div class="spinner"></div>
     </div>
-    <h1>Voice Chat Bot</h1>
-    <div id="chat-container">
-        <div id="conversation"></div>
-        <div id="visualizer"></div>
-        <div id="controls">
-            <button id="startButton" disabled>Start Listening</button>
-            <button id="stopButton" disabled>Stop Listening</button>
+    <div class="container">
+        <h1>Voice Chat Bot Demo</h1>
+        <p class="subtitle">For best results, use headphones.</p>
+        <div id="chat-container">
+            <div id="controls">
+                <button id="startButton" disabled>Begin Call</button>
+            </div>
+            <div id="configuration">
+                <select id="configSelect">
+                    <option value="fastest">Fastest</option>
+                    <option value="balanced">Balanced</option>
+                    <option value="quality">Highest Quality</option>
+                </select>
+                <div id="model-info">
+                    TTS: Xenova/mms-tts-eng / STT: Xenova/whisper-tiny.en / LLM: Placeholder
+                </div>
+            </div>
+            <div id="visualizer"></div>
+            <div id="conversation"></div>
         </div>
+        <h2>Logs</h2>
+        <div id="logs"></div>
+        <button id="clear-logs">Clear</button>
     </div>
 
     <script type="module">
@@ -119,9 +174,10 @@
 
         const conversationDiv = document.getElementById('conversation');
         const startButton = document.getElementById('startButton');
-        const stopButton = document.getElementById('stopButton');
         const visualizer = document.getElementById('visualizer');
         const loadingDiv = document.getElementById('loading');
+        const logsDiv = document.getElementById('logs');
+        const clearLogsButton = document.getElementById('clear-logs');
 
         let myvad;
         let sttPipeline;
@@ -157,12 +213,12 @@
                 ttsPipeline = await pipeline('text-to-speech', 'Xenova/mms-tts-eng', {
                     quantized: false,
                 });
-                addMessage('System', 'Voice Chat Bot initialized. Click "Start Listening" to begin.');
+                addLog('System: Voice Chat Bot initialized. Click "Begin Call" to start.');
                 startButton.disabled = false;
                 loadingDiv.style.display = 'none';
             } catch (error) {
                 console.error('Error initializing pipelines:', error);
-                addMessage('System', 'Error initializing Voice Chat Bot. Please check the console for details.');
+                addLog('System: Error initializing Voice Chat Bot. Please check the console for details.');
                 loadingDiv.style.display = 'none';
             }
         }
@@ -174,24 +230,27 @@
                 }
 
                 const transcription = await sttPipeline(audio);
-                addMessage('User', transcription.text);
+                addLog(`User: ${transcription.text}`);
                 
                 const botResponse = `I heard you say: "${transcription.text}". This is a placeholder response.`;
-                addMessage('Bot', botResponse);
+                addLog(`Bot: ${botResponse}`);
 
                 const speechOutput = await ttsPipeline(botResponse);
                 playAudio(speechOutput.audio);
             } catch (error) {
                 console.error('Error processing speech:', error);
-                addMessage('System', 'Error processing speech. Please try again.');
+                addLog('System: Error processing speech. Please try again.');
             }
         }
 
-        function addMessage(sender, message) {
-            const messageElement = document.createElement('p');
-            messageElement.innerHTML = `<strong>${sender}:</strong> ${message}`;
-            conversationDiv.appendChild(messageElement);
-            conversationDiv.scrollTop = conversationDiv.scrollHeight;
+        function addLog(message) {
+            const now = new Date();
+            const timestamp = now.toLocaleTimeString();
+            const logMessage = `[${timestamp}] ${message}`;
+            const messageElement = document.createElement('div');
+            messageElement.textContent = logMessage;
+            logsDiv.appendChild(messageElement);
+            logsDiv.scrollTop = logsDiv.scrollHeight;
         }
 
         function playAudio(audioArray) {
@@ -215,11 +274,11 @@
 
                 myvad = await vad.MicVAD.new({
                     onSpeechStart: () => {
-                        console.log('Speech started');
+                        addLog('--- vad: speech start');
                         updateVisualizer();
                     },
                     onSpeechEnd: (audio) => {
-                        console.log('Speech ended');
+                        addLog('--- vad: speech end');
                         cancelAnimationFrame(animationId);
                         processSpeech(audio);
                     }
@@ -230,27 +289,30 @@
                 source.connect(analyser);
 
                 await myvad.start();
-                startButton.disabled = true;
-                stopButton.disabled = false;
-                addMessage('System', 'Listening...');
+                startButton.textContent = 'End Call';
+                startButton.onclick = stopListening;
+                addLog('System: Listening...');
             } catch (error) {
                 console.error('Error starting VAD:', error);
-                addMessage('System', 'Error starting voice detection. Please check your microphone and try again.');
+                addLog('System: Error starting voice detection. Please check your microphone and try again.');
             }
         }
 
         function stopListening() {
             if (myvad) {
                 myvad.pause();
-                startButton.disabled = false;
-                stopButton.disabled = true;
-                addMessage('System', 'Stopped listening.');
+                startButton.textContent = 'Begin Call';
+                startButton.onclick = startListening;
+                addLog('System: Stopped listening.');
                 cancelAnimationFrame(animationId);
+                addLog('websocket closed');
             }
         }
 
         startButton.addEventListener('click', startListening);
-        stopButton.addEventListener('click', stopListening);
+        clearLogsButton.addEventListener('click', () => {
+            logsDiv.innerHTML = '';
+        });
 
         createVisualizer();
         initializePipelines();