Spaces:
Sleeping
Sleeping
Update static/index.html
Browse files- static/index.html +14 -19
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" 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,7 +104,7 @@
|
|
| 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) => {
|
|
@@ -130,6 +130,7 @@
|
|
| 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,21 +142,12 @@
|
|
| 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);
|
|
@@ -164,23 +156,26 @@
|
|
| 164 |
}
|
| 165 |
}
|
| 166 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 167 |
// Speech-to-Text function
|
| 168 |
function startListening() {
|
| 169 |
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
|
| 170 |
recognition.lang = currentLanguage;
|
| 171 |
recognition.interimResults = false;
|
| 172 |
-
|
| 173 |
recognition.onresult = (event) => {
|
| 174 |
const transcript = event.results[0][0].transcript;
|
| 175 |
document.getElementById("user-input").value = transcript;
|
| 176 |
sendMessage();
|
| 177 |
};
|
| 178 |
-
|
| 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();
|
| 185 |
}
|
| 186 |
|
|
|
|
| 88 |
<body>
|
| 89 |
<div id="chat-container">
|
| 90 |
<select id="language-selector" class="form-control">
|
| 91 |
+
<option value="en-US" selected>English</option>
|
| 92 |
+
<option value="hi-IN">Hindi</option>
|
| 93 |
+
<option value="es-ES">Spanish</option>
|
| 94 |
+
<option value="fr-FR">French</option>
|
| 95 |
+
<option value="te-IN">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-US"; // Default language
|
| 108 |
|
| 109 |
// Handle language selection
|
| 110 |
document.getElementById("language-selector").addEventListener("change", (event) => {
|
|
|
|
| 130 |
chatHistoryArray.push({ sender: "User", message });
|
| 131 |
input.value = "";
|
| 132 |
|
| 133 |
+
// Simulate bot typing
|
| 134 |
const botTyping = document.createElement("div");
|
| 135 |
botTyping.className = "typing-indicator";
|
| 136 |
botTyping.textContent = "Bot is typing...";
|
|
|
|
| 142 |
headers: { "Content-Type": "application/json" },
|
| 143 |
body: JSON.stringify({ message, language: currentLanguage })
|
| 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 |
+
playAudio(data.audioUrl);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 151 |
} catch (error) {
|
| 152 |
botTyping.remove();
|
| 153 |
console.error("Error:", error);
|
|
|
|
| 156 |
}
|
| 157 |
}
|
| 158 |
|
| 159 |
+
// Play audio from gTTS
|
| 160 |
+
function playAudio(url) {
|
| 161 |
+
const audio = new Audio(url);
|
| 162 |
+
audio.play();
|
| 163 |
+
}
|
| 164 |
+
|
| 165 |
// Speech-to-Text function
|
| 166 |
function startListening() {
|
| 167 |
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
|
| 168 |
recognition.lang = currentLanguage;
|
| 169 |
recognition.interimResults = false;
|
|
|
|
| 170 |
recognition.onresult = (event) => {
|
| 171 |
const transcript = event.results[0][0].transcript;
|
| 172 |
document.getElementById("user-input").value = transcript;
|
| 173 |
sendMessage();
|
| 174 |
};
|
|
|
|
| 175 |
recognition.onerror = (event) => {
|
| 176 |
console.error("Speech recognition error:", event.error);
|
| 177 |
addMessage("Bot", "Sorry, I couldn't understand you.", "bot-message");
|
| 178 |
};
|
|
|
|
| 179 |
recognition.start();
|
| 180 |
}
|
| 181 |
|