health-assistant

Sleeping

App Files Files Community

srinuksv commited on Dec 15, 2024

Commit

943c8bf

verified ·

1 Parent(s): b634735

Create voice.html

Browse files

Files changed (1) hide show

static/voice.html +148 -0

static/voice.html ADDED Viewed

	@@ -0,0 +1,148 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: #f4f7fb;
+            margin: 0;
+            padding: 0;
+        }
+        #chat-container {
+            max-width: 400px;
+            margin: 50px auto;
+            padding: 25px;
+            border-radius: 15px;
+            background-color: #fff;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            position: relative;
+            text-align: center;
+        }
+        .message {
+            padding: 15px;
+            margin: 10px 0;
+            border-radius: 15px;
+            font-size: 1em;
+            line-height: 1.4em;
+            background-color: #e0f7fa;
+            color: #00796b;
+            text-align: left;
+        }
+        .user-message {
+            margin-left: auto;
+            background-color: #80cbc4;
+            color: #004d40;
+        }
+        .bot-message {
+            margin-right: auto;
+            background-color: #ffccbc;
+            color: #bf360c;
+        }
+        #mic-button, #send-button {
+            background-color: #00796b;
+            color: white;
+            border-radius: 8px;
+            padding: 12px 15px;
+            border: none;
+            cursor: pointer;
+            font-size: 1.1em;
+            transition: background-color 0.3s;
+            margin: 10px;
+        }
+        #mic-button:hover, #send-button:hover {
+            background-color: #004d40;
+        }
+    </style>
+    <title>Voice Chatbot</title>
+</head>
+<body>
+    <div id="chat-container">
+        <div id="response-container"></div>
+        <button id="mic-button" class="btn"><i class="fas fa-microphone"></i></button>
+        <button id="send-button" class="btn"><i class="fas fa-paper-plane"></i></button>
+    </div>
+    <script>
+        const synth = window.speechSynthesis;
+        let currentLanguage = "en-US"; // Default language
+        // Handle language selection
+        document.getElementById("language-selector").addEventListener("change", (event) => {
+            currentLanguage = event.target.value;
+        });
+        // Add message to response container
+        function addMessage(message, className) {
+            const responseContainer = document.getElementById("response-container");
+            const messageElement = document.createElement("div");
+            messageElement.className = `message ${className}`;
+            messageElement.innerHTML = message;
+            responseContainer.appendChild(messageElement);
+            responseContainer.scrollTop = responseContainer.scrollHeight;
+        }
+        // Send message to server
+        async function sendMessage(message) {
+            if (!message) return;
+            addMessage(`<strong>User:</strong> ${message}`, "user-message");
+            // Simulate bot typing
+            const botTyping = document.createElement("div");
+            botTyping.className = "typing-indicator";
+            botTyping.textContent = "Bot is typing...";
+            document.getElementById("response-container").appendChild(botTyping);
+            try {
+                const response = await fetch("/chat/", {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ message, language: currentLanguage })
+                });
+                const data = await response.json();
+                botTyping.remove();
+                const botMessage = data.response;
+                addMessage(`<strong>Bot:</strong> ${botMessage}`, "bot-message");
+                speak(botMessage, currentLanguage);
+            } catch (error) {
+                botTyping.remove();
+                console.error("Error:", error);
+                const errorMessage = "Sorry, something went wrong.";
+                addMessage(`<strong>Bot:</strong> ${errorMessage}`, "bot-message");
+                speak(errorMessage, currentLanguage);
+            }
+        }
+        // Text-to-Speech function
+        function speak(text, lang) {
+            const utterance = new SpeechSynthesisUtterance(text);
+            utterance.lang = lang;
+            utterance.pitch = 1;
+            utterance.rate = 1;
+            synth.speak(utterance);
+        }
+        // Speech-to-Text function
+        function startListening() {
+            const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+            recognition.lang = currentLanguage;
+            recognition.interimResults = false;
+            recognition.onresult = (event) => {
+                const transcript = event.results[0][0].transcript;
+                sendMessage(transcript);
+            };
+            recognition.onerror = (event) => {
+                console.error("Speech recognition error:", event.error);
+                addMessage("<strong>Bot:</strong> Sorry, I couldn't understand you.", "bot-message");
+                speak("Sorry, I couldn't understand you.", currentLanguage);
+            };
+            recognition.start();
+        }
+        // Event Listeners
+        document.getElementById("send-button").addEventListener("click", startListening);
+        document.getElementById("mic-button").addEventListener("click", startListening);
+    </script>
+</body>
+</html>