Spaces:

AiDeveloper1
/

linkedinvoice

Running

App Files Files Community

AiDeveloper1 commited on Jun 27, 2025

Commit

5842128

verified ·

1 Parent(s): 709b524

Update index.html

Browse files

Files changed (1) hide show

index.html +146 -154

index.html CHANGED Viewed

@@ -1,162 +1,154 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <title>Voice Command | Chatbot</title>
-    <style>
-        .chat-container {
-            max-width: 400px;
-            margin: 20px auto;
-            padding: 10px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            font-family: Arial, sans-serif;
-        }
-        .user-message {
-            background-color: #f0f0f0;
-            border-radius: 5px;
-            padding: 5px 10px;
-            margin: 5px 0;
-            text-align: right;
-        }
-        .bot-message {
-            background-color: #d3e9ff;
-            border-radius: 5px;
-            padding: 5px 10px;
-            margin: 5px 0;
-        }
-        #languageSelector {
-            width: 100%;
-            margin-top: 10px;
-            padding: 5px;
-            border-radius: 5px;
-            border: 1px solid #ccc;
-        }
-    </style>
 </head>
 <body>
-    <div class="chat-container">
-        <div id="chat-box"></div>
-        <!-- Language Selection -->
-        <select id="languageSelector">
-            <option value="en-US">English (US)</option>
-            <option value="hi-IN">Hindi (India)</option>
-            <option value="es-ES">Spanish (Spain)</option>
-            <option value="fr-FR">French (France)</option>
-            <option value="de-DE">German (Germany)</option>
-            <option value="ar-SA">Arabic (Saudi Arabia)</option>
-        </select>
-        <div class="speaker" style="display: flex; justify-content: space-between; width: 100%; box-shadow: 0 0 13px #0000003d; border-radius: 5px; margin-top: 10px;">
-            <p id="action" style="color: grey; font-weight: 800; padding-left: 2rem;"></p>
-            <button id="speech" onclick="runSpeechRecog()" style="border: transparent; padding: 0 0.5rem;">
-                Tap to Speak
-            </button>
-        </div>
     </div>
-    <script>
-        let synth = window.speechSynthesis;
-        function runSpeechRecog() {
-            const action = document.getElementById('action');
-            const recognition = new webkitSpeechRecognition();
-            // Always recognize speech in English
-            recognition.lang = "en-US";
-            recognition.interimResults = false;
-            recognition.continuous = false;
-            recognition.onstart = () => {
-                action.innerHTML = "Listening...";
-            };
-            recognition.onresult = (event) => {
-                var transcript = event.results[0][0].transcript;
-                action.innerHTML = "";
-                sendMessage(transcript);
-            };
-            recognition.onerror = (event) => {
-                action.innerHTML = "Error: " + event.error;
-            };
-            recognition.onend = () => {
-                action.innerHTML = "";
-            };
-            recognition.start();
-        }
-        function sendMessage(message) {
-            showUserMessage(message);
-            sendToFlaskAPI(message);
-        }
-        function sendToFlaskAPI(message) {
-            fetch('/api/process_text', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({ text: message })
-            })
-            .then(response => response.json())
-            .then(data => {
-                console.log('Response from Flask API:', data);
-                handleResponse(data);
-            })
-            .catch(error => {
-                console.error('Error sending data to Flask API:', error);
-            });
-        }
-        function handleResponse(data) {
-            showBotMessage(data);
-            speakResponse(data);
-        }
-        function showUserMessage(message) {
-            const chatBox = document.getElementById('chat-box');
-            chatBox.innerHTML += <div class="user-message">${message}</div>;
-        }
-        function showBotMessage(message) {
-            const chatBox = document.getElementById('chat-box');
-            chatBox.innerHTML += <div class="bot-message">${message}</div>;
-        }
-        function speakResponse(responseText) {
-            const selectedLang = document.getElementById("languageSelector").value;
-            const utterance = new SpeechSynthesisUtterance(responseText);
-            // Set voice language based on selected option
-            utterance.lang = selectedLang;
-            const voices = synth.getVoices();
-            const matchingVoice = voices.find(voice => voice.lang === selectedLang);
-            if (matchingVoice) {
-                utterance.voice = matchingVoice;
-            }
-            synth.speak(utterance);
-            window.addEventListener('beforeunload', function () {
-                if (synth.speaking) synth.cancel();
-            });
-            document.getElementById('speech').addEventListener('click', function () {
-                if (synth.speaking) synth.cancel();
-            });
-        }
-        // Load voices early for compatibility
-        window.speechSynthesis.onvoiceschanged = () => {
-            speechSynthesis.getVoices();
-        };
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8" />
+  <title>Voice Command | Chatbot</title>
+  <style>
+    .chat-container {
+      max-width: 400px;
+      margin: 20px auto;
+      padding: 10px;
+      border: 1px solid #ccc;
+      border-radius: 5px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+      font-family: Arial, sans-serif;
+    }
+    .user-message, .bot-message {
+      border-radius: 5px;
+      padding: 5px 10px;
+      margin: 5px 0;
+    }
+    .user-message {
+      background-color: #f0f0f0;
+      text-align: right;
+    }
+    .bot-message {
+      background-color: #d3e9ff;
+    }
+    #languageSelector {
+      width: 100%;
+      margin-top: 10px;
+      padding: 5px;
+      border-radius: 5px;
+      border: 1px solid #ccc;
+    }
+    .speaker {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      box-shadow: 0 0 13px #0000003d;
+      border-radius: 5px;
+      margin-top: 10px;
+    }
+    #speech {
+      border: transparent;
+      padding: 0 0.5rem;
+      cursor: pointer;
+    }
+  </style>
 </head>
 <body>
+  <div class="chat-container">
+    <div id="chat-box"></div>
+    <select id="languageSelector">
+      <option value="en-US">English (US)</option>
+      <option value="hi-IN">Hindi (India)</option>
+      <option value="es-ES">Spanish (Spain)</option>
+      <option value="fr-FR">French (France)</option>
+      <option value="de-DE">German (Germany)</option>
+      <option value="ar-SA">Arabic (Saudi Arabia)</option>
+    </select>
+    <div class="speaker">
+      <p id="action" style="color: grey; font-weight: 800; padding-left: 2rem;"></p>
+      <button id="speech">Tap to Speak</button>
     </div>
+  </div>
+  <script>
+    const synth = window.speechSynthesis;
+    let recognition;
+    // Event listener for the button
+    document.getElementById("speech").addEventListener("click", () => {
+      runSpeechRecog();
+    });
+    function runSpeechRecog() {
+      const action = document.getElementById("action");
+      // Prevent multiple instances
+      if (recognition) recognition.abort();
+      // Ensure Chrome compatibility
+      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+      if (!SpeechRecognition) {
+        alert("Speech Recognition not supported in this browser. Use Google Chrome.");
+        return;
+      }
+      recognition = new SpeechRecognition();
+      recognition.lang = "en-US"; // Always English for input
+      recognition.interimResults = false;
+      recognition.continuous = false;
+      recognition.onstart = () => {
+        action.innerHTML = "Listening...";
+      };
+      recognition.onresult = (event) => {
+        const transcript = event.results[0][0].transcript;
+        action.innerHTML = "";
+        sendMessage(transcript);
+      };
+      recognition.onerror = (event) => {
+        action.innerHTML = "Error: " + event.error;
+      };
+      recognition.onend = () => {
+        action.innerHTML = "";
+      };
+      recognition.start();
+    }
+    function sendMessage(message) {
+      showUserMessage(message);
+      // Simulating response (replace with your backend call)
+      setTimeout(() => handleResponse("You said: " + message), 500);
+    }
+    function showUserMessage(message) {
+      const chatBox = document.getElementById("chat-box");
+      chatBox.innerHTML += <div class="user-message">${message}</div>;
+    }
+    function handleResponse(message) {
+      showBotMessage(message);
+      speakResponse(message);
+    }
+    function showBotMessage(message) {
+      const chatBox = document.getElementById("chat-box");
+      chatBox.innerHTML += <div class="bot-message">${message}</div>;
+    }
+    function speakResponse(responseText) {
+      const selectedLang = document.getElementById("languageSelector").value;
+      const utterance = new SpeechSynthesisUtterance(responseText);
+      utterance.lang = selectedLang;
+      const voices = synth.getVoices();
+      const match = voices.find(v => v.lang === selectedLang);
+      if (match) utterance.voice = match;
+      synth.speak(utterance);
+    }
+    // Ensure voices are loaded
+    window.speechSynthesis.onvoiceschanged = () => synth.getVoices();
+  </script>
 </body>
 </html>