voicechatbot

Sleeping

App Files Files Community

srinuksv commited on Dec 15, 2024

Commit

99fa0a2

verified ·

1 Parent(s): c626ca9

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +22 -12

static/index.html CHANGED Viewed

@@ -79,16 +79,20 @@
         .btn-send:hover, .btn-mic:hover {
             background-color: #0056b3;
         }
-        .typing-indicator {
-            font-style: italic;
-            color: #888;
-            margin-top: 10px;
         }
     </style>
-    <title>Voice Chatbot</title>
 </head>
 <body>
     <div id="chat-container">
         <div id="chat-history"></div>
         <div class="input-group">
             <textarea id="user-input" class="form-control" rows="1" placeholder="Type or speak your message..." aria-label="Message input"></textarea>
@@ -100,6 +104,12 @@
     <script>
         const chatHistoryArray = [];
         const synth = window.speechSynthesis;
         // Add message to chat history
         function addMessage(sender, message, className) {
@@ -131,7 +141,7 @@
                 const response = await fetch("/chat/", {
                     method: "POST",
                     headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({ message })
                 });
                 const data = await response.json();
@@ -139,20 +149,20 @@
                 const botMessage = data.response;
                 addMessage("Bot", botMessage, "bot-message");
                 chatHistoryArray.push({ sender: "Bot", message: botMessage });
-                speak(botMessage);
             } catch (error) {
                 botTyping.remove();
                 console.error("Error:", error);
                 const errorMessage = "Sorry, something went wrong.";
                 addMessage("Bot", errorMessage, "bot-message");
-                speak(errorMessage);
             }
         }
         // Text-to-Speech function
-        function speak(text) {
             const utterance = new SpeechSynthesisUtterance(text);
-            utterance.lang = "en-US";
             utterance.pitch = 1;
             utterance.rate = 1;
             synth.speak(utterance);
@@ -161,7 +171,7 @@
         // Speech-to-Text function
         function startListening() {
             const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
-            recognition.lang = "en-US";
             recognition.interimResults = false;
             recognition.onresult = (event) => {
@@ -173,7 +183,7 @@
             recognition.onerror = (event) => {
                 console.error("Speech recognition error:", event.error);
                 addMessage("Bot", "Sorry, I couldn't understand you.", "bot-message");
-                speak("Sorry, I couldn't understand you.");
             };
             recognition.start();

         .btn-send:hover, .btn-mic:hover {
             background-color: #0056b3;
         }
+        #language-selector {
+            margin-bottom: 10px;
         }
     </style>
+    <title>Multilanguage Voice Chatbot</title>
 </head>
 <body>
     <div id="chat-container">
+        <select id="language-selector" class="form-control">
+            <option value="en-US" selected>English</option>
+            <option value="hi-IN">Hindi</option>
+            <option value="es-ES">Spanish</option>
+            <option value="fr-FR">French</option>
+        </select>
         <div id="chat-history"></div>
         <div class="input-group">
             <textarea id="user-input" class="form-control" rows="1" placeholder="Type or speak your message..." aria-label="Message input"></textarea>
     <script>
         const chatHistoryArray = [];
         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 chat history
         function addMessage(sender, message, className) {
                 const response = await fetch("/chat/", {
                     method: "POST",
                     headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ message, language: currentLanguage })
                 });
                 const data = await response.json();
                 const botMessage = data.response;
                 addMessage("Bot", botMessage, "bot-message");
                 chatHistoryArray.push({ sender: "Bot", message: botMessage });
+                speak(botMessage, currentLanguage);
             } catch (error) {
                 botTyping.remove();
                 console.error("Error:", error);
                 const errorMessage = "Sorry, something went wrong.";
                 addMessage("Bot", 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) => {
             recognition.onerror = (event) => {
                 console.error("Speech recognition error:", event.error);
                 addMessage("Bot", "Sorry, I couldn't understand you.", "bot-message");
+                speak("Sorry, I couldn't understand you.", currentLanguage);
             };
             recognition.start();