Hugging Face's logo

Spaces:
redfernstech
/
voicechatbot
Sleeping

App Files Community
redfernstech commited on
Commit
32d08b3
·
verified ·
1 Parent(s): 55ddb0c

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +20 -112
static/index.html CHANGED
@@ -88,58 +88,11 @@
88
  <body>
89
  <div id="chat-container">
90
  <select id="language-selector" class="form-control">
91
-
92
- <option value="en-US" selected>English</option>
93
- <option value="hi-IN">हिंदी (Hindi)</option>
94
- <option value="es-ES">Español (Spanish)</option>
95
- <option value="fr-FR">Français (French)</option>
96
- <option value="te-IN">తెలుగు (Telugu)</option>
97
- <option value="ta-IN">தமிழ் (Tamil)</option>
98
- <option value="kn-IN">ಕನ್ನಡ (Kannada)</option>
99
- <option value="ml-IN">മലയാളം (Malayalam)</option>
100
- <option value="mr-IN">मराठी (Marathi)</option>
101
- <option value="gu-IN">ગુજરાતી (Gujarati)</option>
102
- <option value="bn-IN">বাংলা (Bengali)</option>
103
- <option value="pa-IN">ਪੰਜਾਬੀ (Punjabi)</option>
104
- <option value="ur-IN">اردو (Urdu)</option>
105
- <option value="zh-CN">简体中文 (Chinese Simplified)</option>
106
- <option value="zh-TW">繁體中文 (Chinese Traditional)</option>
107
- <option value="ja-JP">日本語 (Japanese)</option>
108
- <option value="ko-KR">한국어 (Korean)</option>
109
- <option value="de-DE">Deutsch (German)</option>
110
- <option value="it-IT">Italiano (Italian)</option>
111
- <option value="pt-PT">Português (Portuguese)</option>
112
- <option value="pt-BR">Português (Brasil) (Portuguese Brazil)</option>
113
- <option value="ru-RU">Русский (Russian)</option>
114
- <option value="ar-SA">العربية (Arabic)</option>
115
- <option value="id-ID">Bahasa Indonesia (Indonesian)</option>
116
- <option value="vi-VN">Tiếng Việt (Vietnamese)</option>
117
- <option value="th-TH">ไทย (Thai)</option>
118
- <option value="tr-TR">Türkçe (Turkish)</option>
119
- <option value="pl-PL">Polski (Polish)</option>
120
- <option value="nl-NL">Nederlands (Dutch)</option>
121
- <option value="sv-SE">Svenska (Swedish)</option>
122
- <option value="da-DK">Dansk (Danish)</option>
123
- <option value="fi-FI">Suomi (Finnish)</option>
124
- <option value="no-NO">Norsk (Norwegian)</option>
125
- <option value="cs-CZ">Čeština (Czech)</option>
126
- <option value="hu-HU">Magyar (Hungarian)</option>
127
- <option value="el-GR">Ελληνικά (Greek)</option>
128
- <option value="ro-RO">Română (Romanian)</option>
129
- <option value="sk-SK">Slovenčina (Slovak)</option>
130
- <option value="uk-UA">Українська (Ukrainian)</option>
131
- <option value="hr-HR">Hrvatski (Croatian)</option>
132
- <option value="sr-RS">Српски (Serbian)</option>
133
- <option value="bg-BG">Български (Bulgarian)</option>
134
- <option value="lt-LT">Lietuvių (Lithuanian)</option>
135
- <option value="lv-LV">Latviešu (Latvian)</option>
136
- <option value="et-EE">Eesti (Estonian)</option>
137
- <option value="sl-SI">Slovenščina (Slovenian)</option>
138
- <option value="mt-MT">Malti (Maltese)</option>
139
- <option value="sq-AL">Shqip (Albanian)</option>
140
- <option value="mk-MK">Македонски (Macedonian)</option>
141
- <option value="bs-BA">Bosanski (Bosnian)</option>
142
- <option value="is-IS">Íslenska (Icelandic)</option>
143
  </select>
144
  <div id="chat-history"></div>
145
  <div class="input-group">
@@ -151,13 +104,12 @@
151
 
152
  <script>
153
  const chatHistoryArray = [];
 
154
  let currentLanguage = "en-US"; // Default language
155
-
156
  // Handle language selection
157
  document.getElementById("language-selector").addEventListener("change", (event) => {
158
  currentLanguage = event.target.value;
159
  });
160
-
161
  // Add message to chat history
162
  function addMessage(sender, message, className) {
163
  const chatHistory = document.getElementById("chat-history");
@@ -167,7 +119,6 @@
167
  chatHistory.appendChild(messageElement);
168
  chatHistory.scrollTop = chatHistory.scrollHeight;
169
  }
170
-
171
  // Send message to server
172
  async function sendMessage() {
173
  const input = document.getElementById("user-input");
@@ -176,13 +127,11 @@
176
  addMessage("User", message, "user-message");
177
  chatHistoryArray.push({ sender: "User", message });
178
  input.value = "";
179
-
180
  // Simulate bot typing
181
  const botTyping = document.createElement("div");
182
  botTyping.className = "typing-indicator";
183
  botTyping.textContent = "Bot is typing...";
184
  document.getElementById("chat-history").appendChild(botTyping);
185
-
186
  try {
187
  const response = await fetch("/chat/", {
188
  method: "POST",
@@ -194,84 +143,43 @@
194
  const botMessage = data.response;
195
  addMessage("Bot", botMessage, "bot-message");
196
  chatHistoryArray.push({ sender: "Bot", message: botMessage });
197
- if (data.audioUrl) {
198
- const baseUrl = window.location.origin; // Get the base URL (e.g., http://localhost:8000)
199
- const fullAudioUrl = `${baseUrl}/${data.audioUrl}`; // Append the audio URL to the base
200
- playAudio(fullAudioUrl); // Pass the constructed URL to playAudio
201
- }
202
-
203
  } catch (error) {
204
  botTyping.remove();
205
  console.error("Error:", error);
206
  const errorMessage = "Sorry, something went wrong.";
207
  addMessage("Bot", errorMessage, "bot-message");
 
208
  }
209
  }
210
-
211
- // Play audio from gTTS
212
- // Play audio from server response
213
- function playAudio(url) {
214
- if (!url) {
215
- console.error("Audio URL is missing.");
216
- addMessage("Bot", "Error: Unable to play audio.", "bot-message");
217
- return;
218
- }
219
-
220
- const audio = new Audio(url);
221
-
222
- audio.onerror = () => {
223
- console.error("Error loading audio:", url);
224
- addMessage("Bot", "Error: Unable to load audio.", "bot-message");
225
- };
226
-
227
- audio.oncanplaythrough = () => {
228
- console.log("Playing audio:", url);
229
- audio.play().catch((error) => {
230
- console.error("Error during audio playback:", error);
231
- addMessage("Bot", "Error: Unable to play audio.", "bot-message");
232
- });
233
- };
234
-
235
- audio.load();
236
- }
237
-
238
-
239
  // Speech-to-Text function
240
  function startListening() {
241
- let recognition;
242
- if (window.SpeechRecognition || window.webkitSpeechRecognition) {
243
- recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
244
- } else {
245
- alert("Your browser does not support speech recognition.");
246
- return;
247
- }
248
-
249
  recognition.lang = currentLanguage;
250
  recognition.interimResults = false;
251
-
252
  recognition.onresult = (event) => {
253
  const transcript = event.results[0][0].transcript;
254
  document.getElementById("user-input").value = transcript;
255
  sendMessage();
256
  };
257
-
258
  recognition.onerror = (event) => {
259
  console.error("Speech recognition error:", event.error);
260
- let errorMessage = "Sorry, I couldn't understand you.";
261
- if (event.error === "not-allowed") {
262
- errorMessage = "Microphone access is blocked. Please allow access.";
263
- } else if (event.error === "network") {
264
- errorMessage = "Network error. Please check your connection.";
265
- }
266
- addMessage("Bot", errorMessage, "bot-message");
267
  };
268
-
269
  recognition.start();
270
  }
271
-
272
  // Event Listeners
273
  document.getElementById("send-button").addEventListener("click", sendMessage);
274
  document.getElementById("mic-button").addEventListener("click", startListening);
275
  </script>
276
  </body>
277
- </html>
 
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
+ const synth = window.speechSynthesis;
108
  let currentLanguage = "en-US"; // Default language
 
109
  // Handle language selection
110
  document.getElementById("language-selector").addEventListener("change", (event) => {
111
  currentLanguage = event.target.value;
112
  });
 
113
  // Add message to chat history
114
  function addMessage(sender, message, className) {
115
  const chatHistory = document.getElementById("chat-history");
 
119
  chatHistory.appendChild(messageElement);
120
  chatHistory.scrollTop = chatHistory.scrollHeight;
121
  }
 
122
  // Send message to server
123
  async function sendMessage() {
124
  const input = document.getElementById("user-input");
 
127
  addMessage("User", message, "user-message");
128
  chatHistoryArray.push({ sender: "User", message });
129
  input.value = "";
 
130
  // Simulate bot typing
131
  const botTyping = document.createElement("div");
132
  botTyping.className = "typing-indicator";
133
  botTyping.textContent = "Bot is typing...";
134
  document.getElementById("chat-history").appendChild(botTyping);
 
135
  try {
136
  const response = await fetch("/chat/", {
137
  method: "POST",
 
143
  const botMessage = data.response;
144
  addMessage("Bot", botMessage, "bot-message");
145
  chatHistoryArray.push({ sender: "Bot", message: botMessage });
146
+ speak(botMessage, currentLanguage);
 
 
 
 
 
147
  } catch (error) {
148
  botTyping.remove();
149
  console.error("Error:", error);
150
  const errorMessage = "Sorry, something went wrong.";
151
  addMessage("Bot", errorMessage, "bot-message");
152
+ speak(errorMessage, currentLanguage);
153
  }
154
  }
155
+ // Text-to-Speech function
156
+ function speak(text, lang) {
157
+ const utterance = new SpeechSynthesisUtterance(text);
158
+ utterance.lang = lang;
159
+ utterance.pitch = 1;
160
+ utterance.rate = 1;
161
+ synth.speak(utterance);
162
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
163
  // Speech-to-Text function
164
  function startListening() {
165
+ const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
 
 
 
 
 
 
 
166
  recognition.lang = currentLanguage;
167
  recognition.interimResults = false;
 
168
  recognition.onresult = (event) => {
169
  const transcript = event.results[0][0].transcript;
170
  document.getElementById("user-input").value = transcript;
171
  sendMessage();
172
  };
 
173
  recognition.onerror = (event) => {
174
  console.error("Speech recognition error:", event.error);
175
+ addMessage("Bot", "Sorry, I couldn't understand you.", "bot-message");
176
+ speak("Sorry, I couldn't understand you.", currentLanguage);
 
 
 
 
 
177
  };
 
178
  recognition.start();
179
  }
 
180
  // Event Listeners
181
  document.getElementById("send-button").addEventListener("click", sendMessage);
182
  document.getElementById("mic-button").addEventListener("click", startListening);
183
  </script>
184
  </body>
185
+ </html>