Spaces:

AiDeveloper1
/

linkedinvoice

Running

App Files Files Community

AiDeveloper1 commited on Jun 27

Commit

709b524

verified ·

1 Parent(s): 494cf76

Update index.html

Browse files

Files changed (1) hide show

index.html +124 -36

index.html CHANGED Viewed

@@ -2,73 +2,161 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Speech to Text Demo</title>
     <style>
-        .container {
             max-width: 400px;
-            margin: 30px auto;
-            padding: 20px;
             border: 1px solid #ccc;
-            border-radius: 8px;
-            box-shadow: 0 0 10px rgba(0,0,0,0.1);
-            font-family: sans-serif;
         }
-        #output {
-            margin-top: 20px;
-            font-size: 18px;
-            color: #333;
-            background: #f0f0f0;
-            padding: 10px;
             border-radius: 5px;
-            min-height: 40px;
         }
     </style>
 </head>
 <body>
-    <div class="container">
-        <h3>Speech to Text</h3>
-        <!-- Language Selector -->
         <select id="languageSelector">
             <option value="en-US">English (US)</option>
             <option value="hi-IN">Hindi (India)</option>
-            <option value="es-ES">Spanish</option>
-            <option value="fr-FR">French</option>
         </select>
-        <!-- Button to Start Speech -->
-        <button onclick="startRecognition()">Tap to Speak</button>
-        <!-- Display Result -->
-        <div id="output"></div>
     </div>
     <script>
-        function startRecognition() {
-            const lang = document.getElementById('languageSelector').value;
-            const output = document.getElementById('output');
-            const recognition = new webkitSpeechRecognition(); // works in Chrome
-            recognition.lang = lang;
-            recognition.continuous = false;
             recognition.interimResults = false;
             recognition.onstart = () => {
-                output.textContent = "Listening...";
             };
             recognition.onerror = (event) => {
-                output.textContent = "Error: " + event.error;
             };
-            recognition.onresult = (event) => {
-                const transcript = event.results[0][0].transcript;
-                output.textContent = transcript;
-                console.log("Recognized Text:", transcript); // Print to console
             };
             recognition.start();
         }
     </script>
 </body>
 </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>