Update index.html

index.html

@@ -6,7 +6,7 @@
     <title>Voice Assistant Demo</title>
     <style>
         body {
-            font-family: system-ui, -apple-system, sans-serif;
+            font-family: system-ui, sans-serif;
             max-width: 800px;
             margin: 0 auto;
             padding: 20px;
@@ -40,9 +40,7 @@
             cursor: pointer;
             font-size: 16px;
         }
-        button:hover {
-            background: #1976D2;
-        }
+        button:hover { background: #1976D2; }
         button:disabled {
             background: #ccc;
             cursor: not-allowed;
@@ -58,9 +56,7 @@
             background: #f8f9fa;
             border-radius: 4px;
         }
-        .setting-group {
-            margin: 10px 0;
-        }
+        .setting-group { margin: 10px 0; }
         label {
             display: inline-block;
             width: 100px;
@@ -114,28 +110,22 @@
     </div>
 
     <script>
-        // Check if speech recognition is supported
         if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) {
             document.getElementById('error').style.display = 'block';
             document.getElementById('error').textContent = 'Speech recognition is not supported in this browser. Please try Chrome.';
             document.getElementById('startBtn').disabled = true;
         }
 
-        // Initialize speech recognition
         const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
         const recognition = new SpeechRecognition();
-        
-        // Configure recognition
         recognition.continuous = false;
         recognition.lang = 'en-US';
         recognition.interimResults = false;
         recognition.maxAlternatives = 1;
 
-        // Initialize speech synthesis
         const synth = window.speechSynthesis;
         let voices = [];
 
-        // DOM elements
         const startBtn = document.getElementById('startBtn');
         const stopBtn = document.getElementById('stopBtn');
         const status = document.getElementById('status');
@@ -147,7 +137,6 @@
         const pitchValue = document.getElementById('pitchValue');
         const errorDiv = document.getElementById('error');
 
-        // Populate voice list
         function populateVoices() {
             voices = synth.getVoices();
             voiceSelect.innerHTML = '';
@@ -164,7 +153,6 @@
             speechSynthesis.onvoiceschanged = populateVoices;
         }
 
-        // Speech synthesis function
         function speak(text) {
             if (synth.speaking) {
                 console.error('speechSynthesis.speaking');
@@ -178,7 +166,6 @@
             synth.speak(utterance);
         }
 
-        // Handle commands
         function handleCommand(command) {
             command = command.toLowerCase();
             let response = '';
@@ -192,7 +179,7 @@
                 const facts = [
                     'The shortest war in history was between Britain and Zanzibar on August 27, 1896. Zanzibar surrendered after just 38 minutes.',
                     'Honey never spoils. Archaeologists have found pots of honey in ancient Egyptian tombs that are over 3,000 years old and still perfectly good to eat.',
-                    'The first oranges weren't orange. The original oranges from Southeast Asia were actually green.',
+                    'The first oranges weren't orange. The original oranges from Southeast Asia were actually green.'
                 ];
                 response = facts[Math.floor(Math.random() * facts.length)];
             } else {
@@ -203,7 +190,6 @@
             speak(response);
         }
 
-        // Event listeners
         startBtn.addEventListener('click', () => {
             errorDiv.style.display = 'none';
             try {
@@ -259,7 +245,6 @@
             stopBtn.disabled = true;
         };
 
-        // Voice setting controls
         rate.addEventListener('input', () => {
             rateValue.textContent = rate.value;
         });
@@ -268,5 +253,6 @@
             pitchValue.textContent = pitch.value;
         });
     </script>
+</div>
 </body>
 </html>