Spaces:
Sleeping
Sleeping
Update static/index.html
Browse files- static/index.html +16 -22
static/index.html
CHANGED
|
@@ -88,11 +88,11 @@
|
|
| 88 |
<body>
|
| 89 |
<div id="chat-container">
|
| 90 |
<select id="language-selector" class="form-control">
|
| 91 |
-
<option value="en
|
| 92 |
-
<option value="hi
|
| 93 |
-
<option value="es
|
| 94 |
-
<option value="fr
|
| 95 |
-
<option value="te
|
| 96 |
</select>
|
| 97 |
<div id="chat-history"></div>
|
| 98 |
<div class="input-group">
|
|
@@ -104,8 +104,7 @@
|
|
| 104 |
|
| 105 |
<script>
|
| 106 |
const chatHistoryArray = [];
|
| 107 |
-
|
| 108 |
-
let currentLanguage = "en-US"; // Default language
|
| 109 |
|
| 110 |
// Handle language selection
|
| 111 |
document.getElementById("language-selector").addEventListener("change", (event) => {
|
|
@@ -127,12 +126,10 @@
|
|
| 127 |
const input = document.getElementById("user-input");
|
| 128 |
const message = input.value.trim();
|
| 129 |
if (!message) return;
|
| 130 |
-
|
| 131 |
addMessage("User", message, "user-message");
|
| 132 |
chatHistoryArray.push({ sender: "User", message });
|
| 133 |
input.value = "";
|
| 134 |
|
| 135 |
-
// Simulate bot typing
|
| 136 |
const botTyping = document.createElement("div");
|
| 137 |
botTyping.className = "typing-indicator";
|
| 138 |
botTyping.textContent = "Bot is typing...";
|
|
@@ -144,31 +141,29 @@
|
|
| 144 |
headers: { "Content-Type": "application/json" },
|
| 145 |
body: JSON.stringify({ message, language: currentLanguage })
|
| 146 |
});
|
| 147 |
-
const data = await response.json();
|
| 148 |
|
|
|
|
| 149 |
botTyping.remove();
|
| 150 |
const botMessage = data.response;
|
| 151 |
addMessage("Bot", botMessage, "bot-message");
|
| 152 |
chatHistoryArray.push({ sender: "Bot", message: botMessage });
|
| 153 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 154 |
} catch (error) {
|
| 155 |
botTyping.remove();
|
| 156 |
console.error("Error:", error);
|
| 157 |
const errorMessage = "Sorry, something went wrong.";
|
| 158 |
addMessage("Bot", errorMessage, "bot-message");
|
| 159 |
-
speak(errorMessage, currentLanguage);
|
| 160 |
}
|
| 161 |
}
|
| 162 |
|
| 163 |
-
// Text-to-Speech function
|
| 164 |
-
function speak(text, lang) {
|
| 165 |
-
const utterance = new SpeechSynthesisUtterance(text);
|
| 166 |
-
utterance.lang = lang;
|
| 167 |
-
utterance.pitch = 1;
|
| 168 |
-
utterance.rate = 1;
|
| 169 |
-
synth.speak(utterance);
|
| 170 |
-
}
|
| 171 |
-
|
| 172 |
// Speech-to-Text function
|
| 173 |
function startListening() {
|
| 174 |
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
|
|
@@ -184,7 +179,6 @@
|
|
| 184 |
recognition.onerror = (event) => {
|
| 185 |
console.error("Speech recognition error:", event.error);
|
| 186 |
addMessage("Bot", "Sorry, I couldn't understand you.", "bot-message");
|
| 187 |
-
speak("Sorry, I couldn't understand you.", currentLanguage);
|
| 188 |
};
|
| 189 |
|
| 190 |
recognition.start();
|
|
|
|
| 88 |
<body>
|
| 89 |
<div id="chat-container">
|
| 90 |
<select id="language-selector" class="form-control">
|
| 91 |
+
<option value="en" selected>English</option>
|
| 92 |
+
<option value="hi">Hindi</option>
|
| 93 |
+
<option value="es">Spanish</option>
|
| 94 |
+
<option value="fr">French</option>
|
| 95 |
+
<option value="te">Telugu</option>
|
| 96 |
</select>
|
| 97 |
<div id="chat-history"></div>
|
| 98 |
<div class="input-group">
|
|
|
|
| 104 |
|
| 105 |
<script>
|
| 106 |
const chatHistoryArray = [];
|
| 107 |
+
let currentLanguage = "en"; // Default language
|
|
|
|
| 108 |
|
| 109 |
// Handle language selection
|
| 110 |
document.getElementById("language-selector").addEventListener("change", (event) => {
|
|
|
|
| 126 |
const input = document.getElementById("user-input");
|
| 127 |
const message = input.value.trim();
|
| 128 |
if (!message) return;
|
|
|
|
| 129 |
addMessage("User", message, "user-message");
|
| 130 |
chatHistoryArray.push({ sender: "User", message });
|
| 131 |
input.value = "";
|
| 132 |
|
|
|
|
| 133 |
const botTyping = document.createElement("div");
|
| 134 |
botTyping.className = "typing-indicator";
|
| 135 |
botTyping.textContent = "Bot is typing...";
|
|
|
|
| 141 |
headers: { "Content-Type": "application/json" },
|
| 142 |
body: JSON.stringify({ message, language: currentLanguage })
|
| 143 |
});
|
|
|
|
| 144 |
|
| 145 |
+
const data = await response.json();
|
| 146 |
botTyping.remove();
|
| 147 |
const botMessage = data.response;
|
| 148 |
addMessage("Bot", botMessage, "bot-message");
|
| 149 |
chatHistoryArray.push({ sender: "Bot", message: botMessage });
|
| 150 |
+
|
| 151 |
+
// Request TTS from the server
|
| 152 |
+
const audioResponse = await fetch(`/tts?text=${encodeURIComponent(botMessage)}&lang=${currentLanguage}`);
|
| 153 |
+
const audioBlob = await audioResponse.blob();
|
| 154 |
+
const audioUrl = URL.createObjectURL(audioBlob);
|
| 155 |
+
|
| 156 |
+
const audio = new Audio(audioUrl);
|
| 157 |
+
audio.play();
|
| 158 |
+
|
| 159 |
} catch (error) {
|
| 160 |
botTyping.remove();
|
| 161 |
console.error("Error:", error);
|
| 162 |
const errorMessage = "Sorry, something went wrong.";
|
| 163 |
addMessage("Bot", errorMessage, "bot-message");
|
|
|
|
| 164 |
}
|
| 165 |
}
|
| 166 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 167 |
// Speech-to-Text function
|
| 168 |
function startListening() {
|
| 169 |
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
|
|
|
|
| 179 |
recognition.onerror = (event) => {
|
| 180 |
console.error("Speech recognition error:", event.error);
|
| 181 |
addMessage("Bot", "Sorry, I couldn't understand you.", "bot-message");
|
|
|
|
| 182 |
};
|
| 183 |
|
| 184 |
recognition.start();
|