Hugging Face's logo

Spaces:
Gopikanth123
/
deepseek_voice
Runtime error

App Files Community
Gopikanth123 commited on
Commit
5e2c7e2
·
verified ·
1 Parent(s): 22808ba

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +111 -654
templates/index.html CHANGED
@@ -1,661 +1,118 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>TAJ HOTEL CHATBOT</title>
8
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
9
- <script src="https://code.responsivevoice.org/responsivevoice.js?key=q1DbMp6Z"></script>
10
- <style>
11
- :root {
12
- --primary-color: #007bff; /* Default blue */
13
- --bot-message-bg: #f0f2f5; /* Light Gray */
14
- --user-message-bg: #007bff; /* User Blue */
15
- --user-message-text: #fff; /* User Message White */
16
- --accent-color: #6a0dad; /* Default Purple */
17
- --background-color: #fff; /* Default Background White */
18
- --shadow-color: rgba(0, 0, 0, 0.2); /* Default Shadow */
19
- --input-bg: #f0f2f5; /* Default Input Background */
20
- --input-border: #ccc; /* Default Input Border */
21
- }
22
-
23
- /* Themes */
24
- .theme-calm-azure {
25
- --background-color: #E3F2FD;
26
- --bot-message-bg: #BBDEFB;
27
- --user-message-bg: #2196F3;
28
- --user-message-text: #FFFFFF;
29
- --input-bg: #FFFFFF;
30
- --input-border: #BDBDBD;
31
- --accent-color: #1976D2;
32
- }
33
-
34
- .theme-elegant-charcoal {
35
- --background-color: #263238;
36
- --bot-message-bg: #37474F;
37
- --user-message-bg: #FF5722;
38
- --user-message-text: #FFFFFF;
39
- --input-bg: #455A64;
40
- --input-border: #CFD8DC;
41
- --accent-color: #FF9800;
42
- }
43
-
44
- .theme-fresh-greenery {
45
- --background-color: #E8F5E9;
46
- --bot-message-bg: #C8E6C9;
47
- --user-message-bg: #4CAF50;
48
- --user-message-text: #FFFFFF;
49
- --input-bg: #FFFFFF;
50
- --input-border: #A5D6A7;
51
- --accent-color: #388E3C;
52
- }
53
-
54
- .theme-soft-lavender {
55
- --background-color: #F3E5F5;
56
- --bot-message-bg: #E1BEE7;
57
- --user-message-bg: #9C27B0;
58
- --user-message-text: #FFFFFF;
59
- --input-bg: #FFFFFF;
60
- --input-border: #D1C4E9;
61
- --accent-color: #7B1FA2;
62
- }
63
-
64
- .theme-bright-summer {
65
- --background-color: #FFEB3B;
66
- --bot-message-bg: #FFF9C4;
67
- --user-message-bg: #F44336;
68
- --user-message-text: #FFFFFF;
69
- --input-bg: #FFFFFF;
70
- --input-border: #FBC02D;
71
- --accent-color: #C62828;
72
- }
73
-
74
- * {
75
- margin: 0;
76
- padding: 0;
77
- box-sizing: border-box;
78
- }
79
-
80
- body {
81
- font-family: 'Roboto', sans-serif;
82
- background-color: var(--background-color);
83
- transition: background 0.5s ease;
84
- overflow: hidden; /* Prevent scroll on body */
85
- }
86
-
87
- .container {
88
- display: flex;
89
- flex-direction: column;
90
- height: 100vh;
91
- width: 100%;
92
- overflow: hidden; /* Prevent scroll on container */
93
- }
94
-
95
- /* Header */
96
- .header {
97
- background: var(--accent-color);
98
- color: #fff;
99
- font-size: 1.5rem;
100
- font-weight: 700;
101
- text-align: center;
102
- padding: 20px;
103
- box-shadow: 0 4px 8px var(--shadow-color);
104
- position: relative;
105
- z-index: 1000;
106
- }
107
-
108
- /* Chatbox */
109
- .chat-box {
110
- flex: 1;
111
- display: flex;
112
- flex-direction: column;
113
- overflow-y: auto;
114
- padding: 20px;
115
- background: linear-gradient(to bottom right, #f5f7fa, #c3cfe2);
116
- border-radius: 10px;
117
- margin: 20px;
118
- box-shadow: 0 4px 8px var(--shadow-color);
119
- position: relative;
120
- z-index: 10;
121
- }
122
-
123
- .message {
124
- max-width: 75%;
125
- padding: 12px 18px;
126
- border-radius: 20px;
127
- box-shadow: 0 3px 6px var(--shadow-color);
128
- margin-bottom: 10px;
129
- opacity: 0;
130
- animation: fadeIn 0.3s forwards; /* Changed to forwards for delay effect */
131
- }
132
-
133
- .user-message {
134
- align-self: flex-end;
135
- background: var(--user-message-bg);
136
- color: var(--user-message-text);
137
- border-radius: 15px 20px 20px 20px;
138
- animation: slideInRight 0.5s forwards; /* Sliding effect on user message */
139
- }
140
-
141
- .bot-message {
142
- align-self: flex-start;
143
- background: var(--bot-message-bg);
144
- color: #333;
145
- border-radius: 20px 15px 20px 20px;
146
- animation: slideInLeft 0.5s forwards; /* Sliding effect on bot message */
147
- }
148
-
149
- /* Footer */
150
- .footer {
151
- background: #ffffff;
152
- padding: 15px;
153
- display: flex;
154
- justify-content: center;
155
- align-items: center;
156
- box-shadow: 0 -4px 8px var(--shadow-color);
157
- position: relative;
158
- z-index: 1000;
159
- }
160
-
161
- .footer input[type="text"] {
162
- width: 75%;
163
- padding: 15px;
164
- border: 1px solid var(--input-border);
165
- border-radius: 20px;
166
- margin-right: 10px;
167
- box-shadow: 0 2px 4px var(--shadow-color);
168
- transition: border 0.3s, box-shadow 0.3s; /* Added shadow transition */
169
- background-color: var(--input-bg);
170
- outline: none;
171
- }
172
-
173
- .footer input[type="text"]:focus {
174
- border-color: var(--accent-color);
175
- box-shadow: 0 0 10px var(--accent-color);
176
- }
177
-
178
- button {
179
- background: var(--accent-color);
180
- color: #fff;
181
- border: none;
182
- padding: 10px 20px;
183
- border-radius: 20px;
184
- font-size: 1rem;
185
- cursor: pointer;
186
- box-shadow: 0 4px 10px var(--shadow-color);
187
- transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
188
- }
189
-
190
- button:hover {
191
- background: #4b0082;
192
- transform: scale(1.05);
193
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* Shadow effect on hover */
194
- }
195
-
196
- /* Settings */
197
- .settings {
198
- display: flex;
199
- justify-content: space-between;
200
- align-items: center;
201
- padding: 10px;
202
- background: #f0f2f5;
203
- box-shadow: 0 2px 5px var(--shadow-color);
204
- position: relative;
205
- z-index: 1000;
206
- }
207
-
208
- .color-picker,
209
- .theme-toggle {
210
- display: flex;
211
- align-items: center;
212
- position:relative;
213
- }
214
-
215
- .color-circle {
216
- width: 20px;
217
- height: 20px;
218
- border-radius: 50%;
219
- margin: 0 5px;
220
- cursor: pointer;
221
- box-shadow: 0 2px 5px var(--shadow-color);
222
- transition: transform 0.3s; /* Adding circle hover effect */
223
- }
224
-
225
- .color-circle:hover {
226
- transform: scale(1.2); /* Scale up on hover */
227
- }
228
-
229
- /* Animations */
230
- @keyframes fadeIn {
231
- from {
232
- opacity: 0;
233
- transform: translateY(20px);
234
- }
235
-
236
- to {
237
- opacity: 1;
238
- transform: translateY(0);
239
- }
240
- }
241
-
242
- @keyframes slideInRight {
243
- from {
244
- opacity: 0;
245
- transform: translateX(100%);
246
- }
247
- to {
248
- opacity: 1;
249
- transform: translateX(0);
250
- }
251
- }
252
-
253
- @keyframes slideInLeft {
254
- from {
255
- opacity: 0;
256
- transform: translateX(-100%);
257
- }
258
- to {
259
- opacity: 1;
260
- transform: translateX(0);
261
- }
262
- }
263
-
264
- /* Background animation */
265
- @keyframes backgroundAnimate {
266
- 0% {
267
- background-color: rgba(255, 255, 255, 0.05);
268
- }
269
- 50% {
270
- background-color: rgba(255, 255, 255, 0.1);
271
- }
272
- 100% {
273
- background-color: rgba(255, 255, 255, 0.05);
274
- }
275
- }
276
-
277
- /* VFX related styles */
278
- .vfx {
279
- position: absolute;
280
- top: 0;
281
- left: 0;
282
- width: 100%;
283
- height: 100%;
284
- pointer-events: none;
285
- animation: backgroundAnimate 5s infinite; /* Continuously animate background */
286
- z-index: 0; /* Background layer */
287
- }
288
- </style>
289
- </head>
290
-
291
- <body>
292
- <div class="vfx"></div> <!-- Background effects -->
293
-
294
- <div class="container">
295
- <!-- Settings -->
296
- <div class="settings">
297
- <div class="theme-toggle">
298
- <label for="theme-select">Select Theme:</label>
299
- <select id="theme-select">
300
- <option value="default">Default</option>
301
- <option value="calm-azure">Calm Azure</option>
302
- <option value="elegant-charcoal">Elegant Charcoal</option>
303
- <option value="fresh-greenery">Fresh Greenery</option>
304
- <option value="soft-lavender">Soft Lavender</option>
305
- <option value="bright-summer">Bright Summer</option>
306
- </select>
307
- </div>
308
- <div>
309
- <!-- Language dropdown -->
310
- <label for="language-select">Select Language:</label>
311
- <select id="language-select">
312
- <option value="english">English</option>
313
- <option value="hindi">Hindi</option>
314
- <option value="bengali">Bengali</option>
315
- <option value="telugu">Telugu</option>
316
- <option value="marathi">Marathi</option>
317
- <option value="tamil">Tamil</option>
318
- <option value="gujarati">Gujarati</option>
319
- <option value="kannada">Kannada</option>
320
- <option value="malayalam">Malayalam</option>
321
- <option value="punjabi">Punjabi</option>
322
- <option value="odia">Odia</option>
323
- <option value="urdu">Urdu</option>
324
- <option value="assamese">Assamese</option>
325
- <option value="sanskrit">Sanskrit</option>
326
- <option value="arabic">Arabic</option>
327
- <option value="chinese">Chinese</option>
328
- <option value="dutch">Dutch</option>
329
- <option value="french">French</option>
330
- <option value="filipino">Filipino</option>
331
- <option value="greek">Greek</option>
332
- <option value="indonesian">Indonesian</option>
333
- <option value="italian">Italian</option>
334
- <option value="japanese">Japanese</option>
335
- <option value="korean">Korean</option>
336
- <option value="latin">Latin</option>
337
- <option value="nepali">Nepali</option>
338
- <option value="portuguese">Portuguese</option>
339
- <option value="romanian">Romanian</option>
340
- <option value="russian">Russian</option>
341
- <option value="spanish">Spanish</option>
342
- <option value="swedish">Swedish</option>
343
- <option value="thai">Thai</option>
344
- <option value="ukrainian">Ukrainian</option>
345
- <option value="turkish">Turkish</option>
346
- </select>
347
- </div>
348
- <div class="color-picker">
349
- <label>Accent Color:</label>
350
- <div class="color-circle" style="background-color: #6a0dad;" onclick="changeColor('#6a0dad')"></div>
351
- <div class="color-circle" style="background-color: #ff4500;" onclick="changeColor('#ff4500')"></div>
352
- <div class="color-circle" style="background-color: #007bff;" onclick="changeColor('#007bff')"></div>
353
- <div class="color-circle" style="background-color: #28a745;" onclick="changeColor('#28a745')"></div>
354
- </div>
355
- </div>
356
-
357
- <!-- Header -->
358
- <div class="header">TAJ HOTEL CHATBOT</div>
359
-
360
- <!-- Chatbox -->
361
- <div class="chat-box" id="chat-box"></div>
362
-
363
- <!-- Footer -->
364
- <div class="footer">
365
- <input type="text" id="user-input" placeholder="Type your message..." />
366
- <button id="send-btn">Send</button>
367
- <button id="voice-btn">🎤 Start Voice Input</button>
368
-
369
-
370
-
371
- </div>
372
-
373
- </div>
374
 
375
- <script>
376
- const chatBox = document.getElementById('chat-box');
377
- const voiceBtn = document.getElementById('voice-btn');
378
- const sendBtn = document.getElementById('send-btn');
379
- const userInput = document.getElementById('user-input');
380
- const themeSelect = document.getElementById('theme-select');
381
- const languageSelect = document.getElementById('language-select');
382
-
383
- // Add message to chatbox
384
- function addMessage(sender, text) {
385
- const msgDiv = document.createElement('div');
386
- msgDiv.classList.add('message', sender);
387
- msgDiv.textContent = text;
388
- chatBox.appendChild(msgDiv);
389
- chatBox.scrollTop = chatBox.scrollHeight; // Scroll to the bottom of the chat
390
- }
391
-
392
- // Initialize speech recognition
393
- const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
394
-
395
- function setRecognitionLanguage() {
396
- const selectedLanguage = languageSelect.value;
397
- switch (selectedLanguage) {
398
- case 'telugu': recognition.lang = 'te-IN'; break;
399
- case 'hindi': recognition.lang = 'hi-IN'; break;
400
- case 'bengali': recognition.lang = 'bn-IN'; break;
401
- case 'marathi': recognition.lang = 'mr-IN'; break;
402
- case 'tamil': recognition.lang = 'ta-IN'; break;
403
- case 'gujarati': recognition.lang = 'gu-IN'; break;
404
- case 'kannada': recognition.lang = 'kn-IN'; break;
405
- case 'malayalam': recognition.lang = 'ml-IN'; break;
406
- case 'punjabi': recognition.lang = 'pa-IN'; break;
407
- case 'odia': recognition.lang = 'or-IN'; break;
408
- case 'urdu': recognition.lang = 'ur-IN'; break;
409
- case 'assamese': recognition.lang = 'as-IN'; break;
410
- case 'sanskrit': recognition.lang = 'sa-IN'; break;
411
- case 'arabic': recognition.lang = 'ar-SA'; break;
412
- case 'chinese': recognition.lang = 'zh-CN'; break;
413
- case 'dutch': recognition.lang = 'nl-NL'; break;
414
- case 'french': recognition.lang = 'fr-FR'; break;
415
- case 'filipino': recognition.lang = 'fil-PH'; break;
416
- case 'greek': recognition.lang = 'el-GR'; break;
417
- case 'indonesian': recognition.lang = 'id-ID'; break;
418
- case 'italian': recognition.lang = 'it-IT'; break;
419
- case 'japanese': recognition.lang = 'ja-JP'; break;
420
- case 'korean': recognition.lang = 'ko-KR'; break;
421
- case 'latin': recognition.lang = 'la'; break;
422
- case 'nepali': recognition.lang = 'ne-NP'; break;
423
- case 'portuguese': recognition.lang = 'pt-PT'; break;
424
- case 'romanian': recognition.lang = 'ro-RO'; break;
425
- case 'russian': recognition.lang = 'ru-RU'; break;
426
- case 'spanish': recognition.lang = 'es-ES'; break;
427
- case 'swedish': recognition.lang = 'sv-SE'; break;
428
- case 'thai': recognition.lang = 'th-TH'; break;
429
- case 'ukrainian': recognition.lang = 'uk-UA'; break;
430
- case 'turkish': recognition.lang = 'tr-TR'; break;
431
- case 'english':
432
- default: recognition.lang = 'en-US'; break; // Default to English
433
- }
434
  }
435
 
436
-
437
- // Event listener for voice input button
438
- voiceBtn.addEventListener('click', () => {
439
- setRecognitionLanguage(); // Set language
440
- recognition.start(); // Start recognition
441
- });
442
-
443
- // Handle results from speech recognition
444
- recognition.addEventListener('result', (e) => {
445
- const transcript = e.results[0][0].transcript;
446
- addMessage('user-message', transcript);
447
- sendUserMessage(transcript);
448
- });
449
-
450
- // Handle errors in speech recognition
451
- recognition.addEventListener('error', (event) => {
452
- console.error("Speech recognition error", event);
453
- });
454
-
455
- // Change the accent color
456
- function changeColor(color) {
457
- document.documentElement.style.setProperty('--accent-color', color);
458
- }
459
-
460
- // Change the theme
461
- function changeTheme(theme) {
462
- document.documentElement.classList.remove('theme-calm-azure', 'theme-elegant-charcoal', 'theme-fresh-greenery', 'theme-soft-lavender', 'theme-bright-summer');
463
- if (theme !== 'default') {
464
- document.documentElement.classList.add('theme-' + theme);
465
- }
466
- }
467
-
468
- // Function to send user input and selected language to backend
469
- function sendUserMessage(message) {
470
- const selectedLanguage = languageSelect.value; // Get the selected language
471
-
472
- // Send the message and selected language to the backend
473
- fetch('/chat', {
474
- method: 'POST',
475
- headers: {
476
- 'Content-Type': 'application/json',
477
- },
478
- body: JSON.stringify({
479
- message,
480
- language: selectedLanguage, // Include the selected language in the request body
481
- }),
482
- })
483
- .then(response => response.json())
484
- .then(data => {
485
- const botResponse = data.response;
486
- addMessage('bot-message', botResponse);
487
- speakResponse(botResponse, selectedLanguage);
488
- })
489
- .catch(error => {
490
- console.error("Error:", error);
491
- addMessage('bot-message', "Sorry, I couldn't process that.");
492
- });
493
- }
494
-
495
- // // Function to get the voice list and match the language
496
- // function getVoiceForLanguage(lang) {
497
- // const voices = window.speechSynthesis.getVoices();
498
- // const matchingVoice = voices.find(voice => voice.lang === lang); // Match exact language code
499
- // return matchingVoice || null; // Return first match or null if not found
500
- // }
501
-
502
- // // Text-to-Speech function
503
- // function speak(text, lang) {
504
- // const utterance = new SpeechSynthesisUtterance(text);
505
- // const selectedVoice = getVoiceForLanguage(lang);
506
-
507
- // if (selectedVoice) {
508
- // utterance.voice = selectedVoice; // Set the matching voice
509
- // utterance.lang = lang; // Set the language
510
- // } else {
511
- // console.warn(`No voice found for language: ${lang}. Falling back to default.`);
512
- // utterance.lang = 'en-US'; // Fallback to English
513
- // }
514
-
515
- // utterance.pitch = 1; // Set pitch
516
- // utterance.rate = 1; // Set rate
517
- // window.speechSynthesis.speak(utterance); // Speak the text
518
- // }
519
-
520
- // // Language Handling Function
521
- // function speakResponse(text, selectedLanguage) {
522
- // let lang;
523
- // switch (selectedLanguage) {
524
- // case 'hindi': lang = 'hi-IN'; break;
525
- // case 'bengali': lang = 'bn-IN'; break;
526
- // case 'telugu': lang = 'te-IN'; break;
527
- // case 'marathi': lang = 'mr-IN'; break;
528
- // case 'tamil': lang = 'ta-IN'; break;
529
- // case 'gujarati': lang = 'gu-IN'; break;
530
- // case 'kannada': lang = 'kn-IN'; break;
531
- // case 'malayalam': lang = 'ml-IN'; break;
532
- // case 'punjabi': lang = 'pa-IN'; break;
533
- // case 'odia': lang = 'or-IN'; break;
534
- // case 'urdu': lang = 'ur-IN'; break;
535
- // case 'assamese': lang = 'as-IN'; break;
536
- // case 'sanskrit': lang = 'sa-IN'; break;
537
- // default: lang = 'en-US'; break; // English (default)
538
- // }
539
-
540
- // speak(text, lang); // Call the speak function with the determined language
541
- // }
542
-
543
- // // Ensure voices are loaded before running the TTS
544
- // window.speechSynthesis.onvoiceschanged = () => {
545
- // const voices = window.speechSynthesis.getVoices();
546
- // voices.forEach(voice => {
547
- // console.log(`Voice: ${voice.name}, Language: ${voice.lang}`);
548
- // });
549
- // };
550
- // // Function to initialize and fetch voices
551
- // function initializeVoices() {
552
- // return new Promise((resolve) => {
553
- // const voices = window.speechSynthesis.getVoices();
554
- // if (voices.length) {
555
- // resolve(voices);
556
- // } else {
557
- // window.speechSynthesis.onvoiceschanged = () => {
558
- // resolve(window.speechSynthesis.getVoices());
559
- // };
560
- // }
561
- // });
562
- // }
563
-
564
- // // Function to get the voice for a given language
565
- // function getVoiceForLanguage(lang, voices) {
566
- // const voice = voices.find(voice => voice.lang === lang);
567
- // if (voice) {
568
- // return voice;
569
- // }
570
- // console.warn(`No voice found for language: ${lang}.`);
571
- // return null;
572
- // }
573
-
574
- // // Text-to-Speech function
575
- // async function speak(text, lang) {
576
- // const voices = await initializeVoices();
577
- // const selectedVoice = getVoiceForLanguage(lang, voices);
578
-
579
- // const utterance = new SpeechSynthesisUtterance(text);
580
- // if (selectedVoice) {
581
- // utterance.voice = selectedVoice;
582
- // utterance.lang = selectedVoice.lang;
583
- // } else {
584
- // console.warn(`Falling back to default language.`);
585
- // utterance.lang = 'en-US';
586
- // }
587
-
588
- // utterance.pitch = 1; // Set pitch
589
- // utterance.rate = 1; // Set rate
590
- // window.speechSynthesis.speak(utterance); // Speak the text
591
- // }
592
-
593
- // Language Handling Function
594
- function speakResponse(text, selectedLanguage) {
595
- // Dictionary mapping specified languages to their respective voices
596
- const languageVoiceMap = {
597
- hindi: 'Hindi Female',
598
- tamil: 'Tamil Female',
599
- arabic: 'Arabic Female',
600
- chinese: 'Chinese Female',
601
- dutch: 'Dutch Female',
602
- french: 'French Female',
603
- filipino: 'Filipino Female',
604
- greek: 'Greek Female',
605
- indonesian: 'Indonesian Female',
606
- italian: 'Italian Female',
607
- japanese: 'Japanese Female',
608
- korean: 'Korean Female',
609
- portuguese: 'Portuguese Female',
610
- romanian: 'Romanian Female',
611
- russian: 'Russian Female',
612
- spanish: 'Spanish Female',
613
- swedish: 'Swedish Female',
614
- thai: 'Thai Female',
615
- ukrainian: 'Ukrainian Female',
616
- turkish: 'Turkish Female'
617
  };
618
-
619
- // Get the voice for the selected language
620
- const voice = languageVoiceMap[selectedLanguage.toLowerCase()];
621
-
622
- // Check if the language has a specified voice
623
- if (voice) {
624
- responsiveVoice.speak(text, voice);
625
- } else {
626
- // Use default behavior for unspecified languages
627
- responsiveVoice.speak(text);
628
- }
629
- }
630
 
631
-
632
-
633
- // // Test voices and log them
634
- // initializeVoices().then(voices => {
635
- // console.log("Available voices:");
636
- // voices.forEach(voice => console.log(`Voice: ${voice.name}, Language: ${voice.lang}`));
637
- // });
638
- // Event listeners for buttons
639
- sendBtn.addEventListener('click', () => {
640
- const message = userInput.value.trim();
641
- if (message) {
642
- addMessage('user-message', message);
643
- sendUserMessage(message);
644
- userInput.value = ''; // Clear input field after sending
645
- }
646
- });
647
-
648
- // Handle pressing 'Enter' key for sending messages
649
- userInput.addEventListener('keypress', (e) => {
650
- if (e.key === 'Enter') {
651
- sendBtn.click(); // Trigger button click
652
- }
653
- });
654
-
655
- // Update theme when selected from dropdown
656
- themeSelect.addEventListener('change', (e) => {
657
- changeTheme(e.target.value);
658
- });
659
  </script>
660
- </body>
661
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Taj Hotel Chatbot</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ background-color: #f4f4f9;
11
+ margin: 0;
12
+ padding: 0;
13
+ display: flex;
14
+ flex-direction: column;
15
+ align-items: center;
16
+ justify-content: center;
17
+ height: 100vh;
18
+ }
19
+ #chat-box {
20
+ width: 80%;
21
+ max-width: 600px;
22
+ height: 300px;
23
+ overflow-y: auto;
24
+ border: 1px solid #ccc;
25
+ padding: 10px;
26
+ background-color: #fff;
27
+ margin-bottom: 10px;
28
+ }
29
+ #user-input {
30
+ width: 70%;
31
+ padding: 10px;
32
+ font-size: 16px;
33
+ }
34
+ #send-btn, #voice-btn {
35
+ padding: 10px 20px;
36
+ font-size: 16px;
37
+ margin-left: 10px;
38
+ }
39
+ #language-select {
40
+ margin-top: 10px;
41
+ padding: 5px;
42
+ font-size: 16px;
43
+ }
44
+ </style>
45
+ </head>
46
+ <body>
47
+ <h1>Taj Hotel Chatbot</h1>
48
+ <div id="chat-box"></div>
49
+ <input type="text" id="user-input" placeholder="Type your message here...">
50
+ <button id="send-btn">Send</button>
51
+ <button id="voice-btn">🎤 Start Voice Input</button>
52
+ <select id="language-select">
53
+ <option value="english">English</option>
54
+ <option value="hindi">Hindi</option>
55
+ <option value="spanish">Spanish</option>
56
+ <!-- Add more languages as needed -->
57
+ </select>
58
+
59
+ <script>
60
+ const chatBox = document.getElementById('chat-box');
61
+ const userInput = document.getElementById('user-input');
62
+ const sendBtn = document.getElementById('send-btn');
63
+ const voiceBtn = document.getElementById('voice-btn');
64
+ const languageSelect = document.getElementById('language-select');
65
+
66
+ function appendMessage(sender, message, audioUrl = null) {
67
+ const messageDiv = document.createElement('div');
68
+ messageDiv.innerHTML = `<strong>${sender}:</strong> ${message}`;
69
+ chatBox.appendChild(messageDiv);
70
+
71
+ if (audioUrl) {
72
+ const audio = new Audio(audioUrl);
73
+ audio.play();
74
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
75
 
76
+ chatBox.scrollTop = chatBox.scrollHeight;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
77
  }
78
 
79
+ sendBtn.addEventListener('click', () => {
80
+ const message = userInput.value.trim();
81
+ const language = languageSelect.value;
82
+
83
+ if (!message) return;
84
+
85
+ appendMessage('You', message);
86
+
87
+ fetch('/chat', {
88
+ method: 'POST',
89
+ headers: { 'Content-Type': 'application/json' },
90
+ body: JSON.stringify({ message, language })
91
+ })
92
+ .then(response => response.json())
93
+ .then(data => {
94
+ appendMessage('Bot', data.response, data.audio_url);
95
+ });
96
+
97
+ userInput.value = '';
98
+ });
99
+
100
+ // Voice input functionality
101
+ voiceBtn.addEventListener('click', () => {
102
+ const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
103
+ recognition.lang = SUPPORTED_LANGUAGES[languageSelect.value] || 'en-US';
104
+ recognition.start();
105
+
106
+ recognition.onresult = (event) => {
107
+ const message = event.results[0][0].transcript;
108
+ userInput.value = message;
109
+ sendBtn.click();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
110
  };
 
 
 
 
 
 
 
 
 
 
 
 
111
 
112
+ recognition.onerror = (event) => {
113
+ console.error('Speech recognition error:', event.error);
114
+ };
115
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
116
  </script>
117
+ </body>
118
  </html>