Spaces:

AiDeveloper1
/

voice

Sleeping

App Files Files Community

AiDeveloper1 commited on Jun 24

Commit

bd0f463

verified ·

1 Parent(s): 541e2d5

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +134 -106

templates/index.html CHANGED Viewed

@@ -2,74 +2,69 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Text Translator</title>
     <style>
-        body {
-            font-family: Arial, sans-serif;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            padding: 20px;
-        }
-        select, input, button {
-            margin: 10px;
-            padding: 8px;
-            font-size: 16px;
-        }
-        #output {
-            margin-top: 20px;
             padding: 10px;
             border: 1px solid #ccc;
-            min-height: 50px;
-            width: 80%;
-            max-width: 600px;
         }
-        #speak-btn {
-            background-color: #4CAF50;
-            color: white;
-            border: none;
-            padding: 10px 20px;
-            cursor: pointer;
         }
-        #speak-btn:hover {
-            background-color: #45a049;
         }
     </style>
 </head>
 <body>
-    <h1>Text Translator</h1>
-    <select id="language" name="language">
-        <option value="English (US)">English (US)</option>
-        <option value="Hindi (India)">Hindi (India)</option>
-        <option value="Spanish (Spain)">Spanish (Spain)</option>
-        <option value="French (France)">French (France)</option>
-        <option value="German (Germany)">German (Germany)</option>
-        <option value="Arabic (Saudi Arabia)">Arabic (Saudi Arabia)</option>
-    </select>
-    <input type="text" id="input-text" placeholder="Enter text or use speech input" style="width: 300px;">
-    <button id="speak-btn">Tap to Speak</button>
-    <button id="submit-btn">Submit</button>
-    <div id="output">Translated response will appear here</div>
     <script>
-        // Speech recognition setup
-        const speakBtn = document.getElementById('speak-btn');
-        const inputText = document.getElementById('input-text');
-        const languageSelect = document.getElementById('language');
-        const submitBtn = document.getElementById('submit-btn');
-        const outputDiv = document.getElementById('output');
-        // Check if browser supports Web Speech API
-        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-        let recognition = null;
-        if (SpeechRecognition) {
-            recognition = new SpeechRecognition();
-            recognition.continuous = false;
-            recognition.interimResults = false;
-            // Map language dropdown values to Web Speech API language codes
             const speechLangMap = {
                 'English (US)': 'en-US',
                 'Hindi (India)': 'hi-IN',
@@ -79,73 +74,106 @@
                 'Arabic (Saudi Arabia)': 'ar-SA'
             };
-            // Update recognition language when dropdown changes
-            languageSelect.addEventListener('change', () => {
-                recognition.lang = speechLangMap[languageSelect.value] || 'en-US';
-            });
-            // Set initial language
-            recognition.lang = speechLangMap[languageSelect.value] || 'en-US';
-            // Handle speech recognition
-            speakBtn.addEventListener('click', () => {
-                recognition.start();
-                speakBtn.textContent = 'Listening...';
-            });
             recognition.onresult = (event) => {
-                const transcript = event.results[0][0].transcript;
-                inputText.value = transcript;
-                speakBtn.textContent = 'Tap to Speak';
             };
-            recognition.onend = () => {
-                speakBtn.textContent = 'Tap to Speak';
             };
-            recognition.onerror = (event) => {
-                outputDiv.textContent = `Speech recognition error: ${event.error}`;
-                speakBtn.textContent = 'Tap to Speak';
             };
-        } else {
-            speakBtn.disabled = true;
-            speakBtn.textContent = 'Speech Not Supported';
         }
-        // Handle form submission
-        submitBtn.addEventListener('click', async () => {
-            const text = inputText.value.trim();
-            const language = languageSelect.value;
-            if (!text) {
-                outputDiv.textContent = 'Please enter or speak some text';
                 return;
             }
-            const payload = {
-                text: text,
-                language: language
             };
-            try {
-                const response = await fetch('/api/process_text', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify(payload)
-                });
-                const result = await response.json();
-                if (response.ok) {
-                    outputDiv.textContent = `Response (${result.language}): ${result.response}`;
-                } else {
-                    outputDiv.textContent = `Error: ${result.error}`;
                 }
-            } catch (error) {
-                outputDiv.textContent = `Request failed: ${error.message}`;
-            }
-        });
     </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="English (US)">English (US)</option>
+            <option value="Hindi (India)">Hindi (India)</option>
+            <option value="Spanish (Spain)">Spanish (Spain)</option>
+            <option value="French (France)">French (France)</option>
+            <option value="German (Germany)">German (Germany)</option>
+            <option value="Arabic (Saudi Arabia)">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: 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');
+            // Map language names to speech recognition language codes
             const speechLangMap = {
                 'English (US)': 'en-US',
                 'Hindi (India)': 'hi-IN',
                 'Arabic (Saudi Arabia)': 'ar-SA'
             };
+            let recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+            recognition.lang = speechLangMap[selectedLang] || '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, selectedLang);
             };
+            recognition.onerror = (event) => {
+                action.innerHTML = "Error: " + event.error;
             };
+            recognition.onend = () => {
+                action.innerHTML = "";
             };
+            recognition.start();
         }
+        function sendMessage(message, language) {
+            showUserMessage(message);
+            sendToFlaskAPI(message, language);
+        }
+        function sendToFlaskAPI(message, language) {
+            fetch('/api/process_text', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ text: message, language: language })
+            })
+            .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);
+                showBotMessage('Error: Unable to process request');
+            });
+        }
+        function handleResponse(data) {
+            if (data.error) {
+                showBotMessage(data.error);
                 return;
             }
+            showBotMessage(data.response);
+            speakResponse(data.response, data.language);
+        }
+        function showUserMessage(message) {
+            var chatBox = document.getElementById('chat-box');
+            var userMessageHTML = '<div class="user-message">' + message + '</div>';
+            chatBox.innerHTML += userMessageHTML;
+            chatBox.scrollTop = chatBox.scrollHeight; // Auto-scroll to bottom
+        }
+        function showBotMessage(message) {
+            var chatBox = document.getElementById('chat-box');
+            var botMessageHTML = '<div class="bot-message">' + message + '</div>';
+            chatBox.innerHTML += botMessageHTML;
+            chatBox.scrollTop = chatBox.scrollHeight; // Auto-scroll to bottom
+        }
+        function speakResponse(response, language) {
+            // Map language names to speech synthesis language codes
+            const speechLangMap = {
+                'English (US)': 'en-US',
+                'Hindi (India)': 'hi-IN',
+                'Spanish (Spain)': 'es-ES',
+                'French (France)': 'fr-FR',
+                'German (Germany)': 'de-DE',
+                'Arabic (Saudi Arabia)': 'ar-SA'
             };
+            var utterance = new SpeechSynthesisUtterance(response);
+            utterance.lang = speechLangMap[language] || 'en-US';
+            synth.speak(utterance);
+            // Cancel speech on page unload or new speech input
+            window.addEventListener('beforeunload', () => {
+                if (synth.speaking) {
+                    synth.cancel();
                 }
+            });
+            document.getElementById('speech').addEventListener('click', () => {
+                if (synth.speaking) {
+                    synth.cancel();
+                }
+            });
+        }
     </script>
 </body>
 </html>