Spaces:

AiDeveloper1
/

linkedinvoice

Running

App Files Files Community

AiDeveloper1 commited on Jun 27

Commit

df23fbf

verified ·

1 Parent(s): 6b59d11

Update index.html

Browse files

Files changed (1) hide show

index.html +139 -125

index.html CHANGED Viewed

@@ -1,136 +1,150 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <title>Japanese Voice Agent</title>
-  <style>
-    body {
-      font-family: Arial, sans-serif;
-      text-align: center;
-      margin-top: 60px;
-    }
-    #speakButton {
-      padding: 15px 30px;
-      font-size: 18px;
-      background: #007bff;
-      color: white;
-      border: none;
-      border-radius: 5px;
-      cursor: pointer;
-    }
-    #speakButton:hover {
-      background: #0056b3;
-    }
-    #status {
-      margin-top: 20px;
-      font-size: 16px;
-      color: #333;
-    }
-  </style>
 </head>
 <body>
-  <h2>Japanese Voice Agent</h2>
-  <p>Click the button and speak in Japanese. The system will repeat what you said.</p>
-  <button id="speakButton">Tap to Speak</button>
-  <div id="status">Loading voice...</div>
-  <script>
-    const speakButton = document.getElementById("speakButton");
-    const statusDiv = document.getElementById("status");
-    const synth = window.speechSynthesis;
-    let voices = [];
-    function loadVoices() {
-      return new Promise((resolve) => {
-        voices = synth.getVoices();
-        if (voices.length) return resolve(voices);
-        synth.onvoiceschanged = () => {
-          voices = synth.getVoices();
-          resolve(voices);
-        };
-      });
-    }
-    // Unlock Japanese TTS on startup
-    async function unlockJapaneseTTS() {
-      await loadVoices();
-      const testUtter = new SpeechSynthesisUtterance("準備ができました");
-      const jpVoice = voices.find(v => v.lang === "ja-JP");
-      if (jpVoice) {
-        testUtter.voice = jpVoice;
-        testUtter.lang = "ja-JP";
-      } else {
-        testUtter.lang = "ja-JP";
-      }
-      testUtter.volume = 0;
-      synth.speak(testUtter); // Silent utterance to unlock audio in Safari
-      statusDiv.textContent = "Ready. Tap the button and speak in Japanese.";
-    }
-    // Speak Japanese text
-    async function speakJapanese(text) {
-      await loadVoices();
-      const utterance = new SpeechSynthesisUtterance(text);
-      const jpVoice = voices.find(v => v.lang === "ja-JP");
-      if (jpVoice) {
-        utterance.voice = jpVoice;
-        utterance.lang = "ja-JP";
-      } else {
-        utterance.lang = "ja-JP";
-      }
-      synth.cancel();
-      synth.speak(utterance);
-    }
-    // When user clicks the button: request mic, then listen
-    async function handleSpeak() {
-      try {
-        await navigator.mediaDevices.getUserMedia({ audio: true });
-      } catch (err) {
-        statusDiv.textContent = "Microphone permission denied.";
-        return;
-      }
-      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-      if (!SpeechRecognition) {
-        statusDiv.textContent = "Speech recognition not supported.";
-        return;
-      }
-      const recognition = new SpeechRecognition();
-      recognition.lang = "ja-JP";
-      recognition.interimResults = false;
-      recognition.onstart = () => {
-        statusDiv.textContent = "Listening...";
-      };
-      recognition.onresult = (event) => {
-        const transcript = event.results[0][0].transcript;
-        statusDiv.textContent = `You said: "${transcript}"`;
-        speakJapanese(transcript);
-      };
-      recognition.onerror = (event) => {
-        statusDiv.textContent = `Error: ${event.error}`;
-      };
-      recognition.onend = () => {
-        if (!synth.speaking) {
-          statusDiv.textContent += " | Tap again to speak.";
         }
-      };
-      recognition.start();
-    }
-    // On load: unlock Japanese TTS only
-    window.onload = () => {
-      unlockJapaneseTTS();
-    };
-    speakButton.addEventListener("click", handleSpeak);
-  </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 {
+            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>
+            <!-- Add more as needed -->
+        </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: 0; 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 selectedLang = document.getElementById("languageSelector").value;
+            const action = document.getElementById('action');
+            let recognition = new webkitSpeechRecognition();
+            recognition.lang = selectedLang;
+            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) {
+            var chatBox = document.getElementById('chat-box');
+            var userMessageHTML = '<div class="user-message">' + message + '</div>';
+            chatBox.innerHTML += userMessageHTML;
+        }
+        function showBotMessage(message) {
+            var chatBox = document.getElementById('chat-box');
+            var botMessageHTML = '<div class="bot-message">' + message + '</div>';
+            chatBox.innerHTML += botMessageHTML;
+        }
+        function speakResponse(response) {
+            var utterance = new SpeechSynthesisUtterance(response);
+            speechSynthesis.speak(utterance);
+            window.addEventListener('beforeunload', function () {
+                if (synth.speaking) {
+                    synth.cancel();
+                }
+            });
+            document.getElementById('speech').addEventListener('click', function () {
+                if (synth.speaking) {
+                    synth.cancel();
+                }
+            });
+        }
+    </script>
 </body>
+</html>