Hugging Face's logo

Spaces:
Gopikanth123
/
voicechat_XLMR
Runtime error

App Files Community
Gopikanth123 commited on
Commit
462bb29
·
verified ·
1 Parent(s): 62125f9

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +483 -276
templates/index.html CHANGED
@@ -347,319 +347,526 @@
347
  </div>
348
 
349
  <script>
350
- const chatBox = document.getElementById('chat-box');
351
- const voiceBtn = document.getElementById('voice-btn');
352
- const sendBtn = document.getElementById('send-btn');
353
- const userInput = document.getElementById('user-input');
354
- const themeSelect = document.getElementById('theme-select');
355
- const languageSelect = document.getElementById('language-select');
356
 
357
- // Add message to chatbox
358
- function addMessage(sender, text) {
359
- const msgDiv = document.createElement('div');
360
- msgDiv.classList.add('message', sender);
361
- msgDiv.textContent = text;
362
- chatBox.appendChild(msgDiv);
363
- chatBox.scrollTop = chatBox.scrollHeight; // Scroll to the bottom of the chat
364
- }
365
-
366
- // Initialize speech recognition
367
- const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
368
 
369
- // Function to set language for speech recognition
370
- function setRecognitionLanguage() {
371
- const selectedLanguage = languageSelect.value;
372
- switch (selectedLanguage) {
373
- case 'telugu': recognition.lang = 'te-IN'; break;
374
- case 'hindi': recognition.lang = 'hi-IN'; break;
375
- case 'bengali': recognition.lang = 'bn-IN'; break;
376
- case 'marathi': recognition.lang = 'mr-IN'; break;
377
- case 'tamil': recognition.lang = 'ta-IN'; break;
378
- case 'gujarati': recognition.lang = 'gu-IN'; break;
379
- case 'kannada': recognition.lang = 'kn-IN'; break;
380
- case 'malayalam': recognition.lang = 'ml-IN'; break;
381
- case 'punjabi': recognition.lang = 'pa-IN'; break;
382
- case 'odia': recognition.lang = 'or-IN'; break;
383
- case 'urdu': recognition.lang = 'ur-IN'; break;
384
- case 'assamese': recognition.lang = 'as-IN'; break;
385
- case 'sanskrit': recognition.lang = 'sa-IN'; break;
386
- case 'english':
387
- default: recognition.lang = 'en-US'; break; // Default to English
388
- }
389
- }
390
 
391
- // Event listener for voice input button
392
- voiceBtn.addEventListener('click', () => {
393
- setRecognitionLanguage(); // Set language
394
- recognition.start(); // Start recognition
395
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
396
 
397
- // Handle results from speech recognition
398
- recognition.addEventListener('result', (e) => {
399
- const transcript = e.results[0][0].transcript;
400
- addMessage('user-message', transcript);
401
- sendUserMessage(transcript);
402
- });
403
 
404
- // Handle errors in speech recognition
405
- recognition.addEventListener('error', (event) => {
406
- console.error("Speech recognition error", event);
407
- });
 
 
408
 
409
- // Change the accent color
410
- function changeColor(color) {
411
- document.documentElement.style.setProperty('--accent-color', color);
412
- }
413
 
414
- // Change the theme
415
- function changeTheme(theme) {
416
- document.documentElement.classList.remove('theme-calm-azure', 'theme-elegant-charcoal', 'theme-fresh-greenery', 'theme-soft-lavender', 'theme-bright-summer');
417
- if (theme !== 'default') {
418
- document.documentElement.classList.add('theme-' + theme);
419
- }
420
- }
421
 
422
- // Function to send user input and selected language to backend
423
- function sendUserMessage(message) {
424
- const selectedLanguage = languageSelect.value; // Get the selected language
 
 
 
 
425
 
426
- // Send the message and selected language to the backend
427
- fetch('/chat', {
428
- method: 'POST',
429
- headers: {
430
- 'Content-Type': 'application/json',
431
- },
432
- body: JSON.stringify({
433
- message,
434
- language: selectedLanguage, // Include the selected language in the request body
435
- }),
436
- })
437
- .then(response => response.json())
438
- .then(data => {
439
- const botResponse = data.response;
440
- addMessage('bot-message', botResponse);
441
- speakResponse(botResponse, selectedLanguage);
442
- })
443
- .catch(error => {
444
- console.error("Error:", error);
445
- addMessage('bot-message', "Sorry, I couldn't process that.");
446
- });
447
- }
448
 
449
- // // Function to get the voice list and match the language
450
- // function getVoiceForLanguage(lang) {
451
- // const voices = window.speechSynthesis.getVoices();
452
- // const matchingVoice = voices.find(voice => voice.lang === lang); // Match exact language code
453
- // return matchingVoice || null; // Return first match or null if not found
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
454
  // }
 
 
 
 
 
 
 
455
 
456
- // // Text-to-Speech function
457
- // function speak(text, lang) {
458
- // const utterance = new SpeechSynthesisUtterance(text);
459
- // const selectedVoice = getVoiceForLanguage(lang);
460
 
461
- // if (selectedVoice) {
462
- // utterance.voice = selectedVoice; // Set the matching voice
463
- // utterance.lang = lang; // Set the language
464
- // } else {
465
- // console.warn(`No voice found for language: ${lang}. Falling back to default.`);
466
- // utterance.lang = 'en-US'; // Fallback to English
467
- // }
468
 
469
- // utterance.pitch = 1; // Set pitch
470
- // utterance.rate = 1; // Set rate
471
- // window.speechSynthesis.speak(utterance); // Speak the text
472
- // }
473
 
474
- // // Language Handling Function
475
- // function speakResponse(text, selectedLanguage) {
476
- // let lang;
477
- // switch (selectedLanguage) {
478
- // case 'hindi': lang = 'hi-IN'; break;
479
- // case 'bengali': lang = 'bn-IN'; break;
480
- // case 'telugu': lang = 'te-IN'; break;
481
- // case 'marathi': lang = 'mr-IN'; break;
482
- // case 'tamil': lang = 'ta-IN'; break;
483
- // case 'gujarati': lang = 'gu-IN'; break;
484
- // case 'kannada': lang = 'kn-IN'; break;
485
- // case 'malayalam': lang = 'ml-IN'; break;
486
- // case 'punjabi': lang = 'pa-IN'; break;
487
- // case 'odia': lang = 'or-IN'; break;
488
- // case 'urdu': lang = 'ur-IN'; break;
489
- // case 'assamese': lang = 'as-IN'; break;
490
- // case 'sanskrit': lang = 'sa-IN'; break;
491
- // default: lang = 'en-US'; break; // English (default)
492
- // }
493
 
494
- // speak(text, lang); // Call the speak function with the determined language
495
- // }
496
 
497
- // // Ensure voices are loaded before running the TTS
498
- // window.speechSynthesis.onvoiceschanged = () => {
499
- // const voices = window.speechSynthesis.getVoices();
500
- // voices.forEach(voice => {
501
- // console.log(`Voice: ${voice.name}, Language: ${voice.lang}`);
502
- // });
503
- // };
504
- // Function to initialize and fetch voices
505
- function initializeVoices() {
506
- return new Promise((resolve) => {
507
- const voices = window.speechSynthesis.getVoices();
508
- if (voices.length) {
509
- resolve(voices);
510
- } else {
511
- window.speechSynthesis.onvoiceschanged = () => {
512
- resolve(window.speechSynthesis.getVoices());
513
- };
514
- }
515
- });
516
- }
517
 
518
- // Function to get the voice for a given language
519
- function getVoiceForLanguage(lang, voices) {
520
- const voice = voices.find(voice => voice.lang === lang);
521
- if (voice) {
522
- return voice;
523
- }
524
- console.warn(`No voice found for language: ${lang}.`);
525
- return null;
526
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
527
 
528
- // // Text-to-Speech function
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
529
  // async function speak(text, lang) {
530
- // const voices = await initializeVoices();
531
- // const selectedVoice = getVoiceForLanguage(lang, voices);
 
532
 
533
- // const utterance = new SpeechSynthesisUtterance(text);
534
- // if (selectedVoice) {
535
- // utterance.voice = selectedVoice;
536
- // utterance.lang = selectedVoice.lang;
537
- // } else {
538
- // console.warn(`Falling back to default language.`);
539
- // utterance.lang = 'en-US';
540
  // }
541
-
542
- // utterance.pitch = 1; // Set pitch
543
- // utterance.rate = 1; // Set rate
544
- // window.speechSynthesis.speak(utterance); // Speak the text
545
  // }
546
 
547
  // // Language Handling Function
548
  // function speakResponse(text, selectedLanguage) {
549
  // let lang;
550
  // switch (selectedLanguage.toLowerCase()) {
551
- // case 'hindi': lang = 'hi-IN'; break;
552
- // case 'bengali': lang = 'bn-IN'; break;
553
- // case 'telugu': lang = 'te-IN'; break;
554
- // case 'marathi': lang = 'mr-IN'; break;
555
- // case 'tamil': lang = 'ta-IN'; break;
556
- // case 'gujarati': lang = 'gu-IN'; break;
557
- // case 'kannada': lang = 'kn-IN'; break;
558
- // case 'malayalam': lang = 'ml-IN'; break;
559
- // case 'punjabi': lang = 'pa-IN'; break;
560
- // case 'odia': lang = 'or-IN'; break;
561
- // case 'urdu': lang = 'ur-IN'; break;
562
- // case 'assamese': lang = 'as-IN'; break;
563
- // case 'sanskrit': lang = 'sa-IN'; break;
564
- // default: lang = 'en-US'; break; // English (default)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
565
  // }
566
 
567
  // speak(text, lang); // Call the speak function with the determined language
568
  // }
569
-
570
- // // Test voices and log them
571
- // initializeVoices().then(voices => {
572
- // console.log("Available voices:");
573
- // voices.forEach(voice => console.log(`Voice: ${voice.name}, Language: ${voice.lang}`));
574
- // });
575
- // Text-to-Speech function using free API
576
- async function speak(text, lang) {
577
- const url = `https://translate.google.com/translate_tts?ie=UTF-8&q=${encodeURIComponent(
578
- text
579
- )}&tl=${lang}&client=tw-ob`;
580
-
581
- try {
582
- const audio = new Audio(url); // Create an audio element
583
- audio.play(); // Play the audio
584
- } catch (error) {
585
- console.error("Error playing the audio:", error);
586
- }
587
- }
588
-
589
- // Language Handling Function
590
- function speakResponse(text, selectedLanguage) {
591
- let lang;
592
- switch (selectedLanguage.toLowerCase()) {
593
- case "hindi":
594
- lang = "hi";
595
- break;
596
- case "bengali":
597
- lang = "bn";
598
- break;
599
- case "telugu":
600
- lang = "te";
601
- break;
602
- case "marathi":
603
- lang = "mr";
604
- break;
605
- case "tamil":
606
- lang = "ta";
607
- break;
608
- case "gujarati":
609
- lang = "gu";
610
- break;
611
- case "kannada":
612
- lang = "kn";
613
- break;
614
- case "malayalam":
615
- lang = "ml";
616
- break;
617
- case "punjabi":
618
- lang = "pa";
619
- break;
620
- case "odia":
621
- lang = "or";
622
- break;
623
- case "urdu":
624
- lang = "ur";
625
- break;
626
- case "assamese":
627
- lang = "as";
628
- break;
629
- case "sanskrit":
630
- lang = "sa";
631
- break;
632
- default:
633
- lang = "en"; // Default to English
634
- break;
635
- }
636
-
637
- speak(text, lang); // Call the speak function with the determined language
638
- }
639
 
640
 
641
 
642
- // Event listeners for buttons
643
- sendBtn.addEventListener('click', () => {
644
- const message = userInput.value.trim();
645
- if (message) {
646
- addMessage('user-message', message);
647
- sendUserMessage(message);
648
- userInput.value = ''; // Clear input field after sending
649
- }
650
- });
651
 
652
- // Handle pressing 'Enter' key for sending messages
653
- userInput.addEventListener('keypress', (e) => {
654
- if (e.key === 'Enter') {
655
- sendBtn.click(); // Trigger button click
656
- }
657
- });
658
 
659
- // Update theme when selected from dropdown
660
- themeSelect.addEventListener('change', (e) => {
661
- changeTheme(e.target.value);
662
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
663
  </script>
664
  </body>
665
  </html>
 
347
  </div>
348
 
349
  <script>
350
+ // const chatBox = document.getElementById('chat-box');
351
+ // const voiceBtn = document.getElementById('voice-btn');
352
+ // const sendBtn = document.getElementById('send-btn');
353
+ // const userInput = document.getElementById('user-input');
354
+ // const themeSelect = document.getElementById('theme-select');
355
+ // const languageSelect = document.getElementById('language-select');
356
 
357
+ // // Add message to chatbox
358
+ // function addMessage(sender, text) {
359
+ // const msgDiv = document.createElement('div');
360
+ // msgDiv.classList.add('message', sender);
361
+ // msgDiv.textContent = text;
362
+ // chatBox.appendChild(msgDiv);
363
+ // chatBox.scrollTop = chatBox.scrollHeight; // Scroll to the bottom of the chat
364
+ // }
 
 
 
365
 
366
+ // // Initialize speech recognition
367
+ // const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
368
 
369
+ // // Function to set language for speech recognition
370
+ // function setRecognitionLanguage() {
371
+ // const selectedLanguage = languageSelect.value;
372
+ // switch (selectedLanguage) {
373
+ // case 'telugu': recognition.lang = 'te-IN'; break;
374
+ // case 'hindi': recognition.lang = 'hi-IN'; break;
375
+ // case 'bengali': recognition.lang = 'bn-IN'; break;
376
+ // case 'marathi': recognition.lang = 'mr-IN'; break;
377
+ // case 'tamil': recognition.lang = 'ta-IN'; break;
378
+ // case 'gujarati': recognition.lang = 'gu-IN'; break;
379
+ // case 'kannada': recognition.lang = 'kn-IN'; break;
380
+ // case 'malayalam': recognition.lang = 'ml-IN'; break;
381
+ // case 'punjabi': recognition.lang = 'pa-IN'; break;
382
+ // case 'odia': recognition.lang = 'or-IN'; break;
383
+ // case 'urdu': recognition.lang = 'ur-IN'; break;
384
+ // case 'assamese': recognition.lang = 'as-IN'; break;
385
+ // case 'sanskrit': recognition.lang = 'sa-IN'; break;
386
+ // case 'english':
387
+ // default: recognition.lang = 'en-US'; break; // Default to English
388
+ // }
389
+ // }
390
 
391
+ // // Event listener for voice input button
392
+ // voiceBtn.addEventListener('click', () => {
393
+ // setRecognitionLanguage(); // Set language
394
+ // recognition.start(); // Start recognition
395
+ // });
 
396
 
397
+ // // Handle results from speech recognition
398
+ // recognition.addEventListener('result', (e) => {
399
+ // const transcript = e.results[0][0].transcript;
400
+ // addMessage('user-message', transcript);
401
+ // sendUserMessage(transcript);
402
+ // });
403
 
404
+ // // Handle errors in speech recognition
405
+ // recognition.addEventListener('error', (event) => {
406
+ // console.error("Speech recognition error", event);
407
+ // });
408
 
409
+ // // Change the accent color
410
+ // function changeColor(color) {
411
+ // document.documentElement.style.setProperty('--accent-color', color);
412
+ // }
 
 
 
413
 
414
+ // // Change the theme
415
+ // function changeTheme(theme) {
416
+ // document.documentElement.classList.remove('theme-calm-azure', 'theme-elegant-charcoal', 'theme-fresh-greenery', 'theme-soft-lavender', 'theme-bright-summer');
417
+ // if (theme !== 'default') {
418
+ // document.documentElement.classList.add('theme-' + theme);
419
+ // }
420
+ // }
421
 
422
+ // // Function to send user input and selected language to backend
423
+ // function sendUserMessage(message) {
424
+ // const selectedLanguage = languageSelect.value; // Get the selected language
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
425
 
426
+ // // Send the message and selected language to the backend
427
+ // fetch('/chat', {
428
+ // method: 'POST',
429
+ // headers: {
430
+ // 'Content-Type': 'application/json',
431
+ // },
432
+ // body: JSON.stringify({
433
+ // message,
434
+ // language: selectedLanguage, // Include the selected language in the request body
435
+ // }),
436
+ // })
437
+ // .then(response => response.json())
438
+ // .then(data => {
439
+ // const botResponse = data.response;
440
+ // addMessage('bot-message', botResponse);
441
+ // speakResponse(botResponse, selectedLanguage);
442
+ // })
443
+ // .catch(error => {
444
+ // console.error("Error:", error);
445
+ // addMessage('bot-message', "Sorry, I couldn't process that.");
446
+ // });
447
  // }
448
+
449
+ // // // Function to get the voice list and match the language
450
+ // // function getVoiceForLanguage(lang) {
451
+ // // const voices = window.speechSynthesis.getVoices();
452
+ // // const matchingVoice = voices.find(voice => voice.lang === lang); // Match exact language code
453
+ // // return matchingVoice || null; // Return first match or null if not found
454
+ // // }
455
 
456
+ // // // Text-to-Speech function
457
+ // // function speak(text, lang) {
458
+ // // const utterance = new SpeechSynthesisUtterance(text);
459
+ // // const selectedVoice = getVoiceForLanguage(lang);
460
 
461
+ // // if (selectedVoice) {
462
+ // // utterance.voice = selectedVoice; // Set the matching voice
463
+ // // utterance.lang = lang; // Set the language
464
+ // // } else {
465
+ // // console.warn(`No voice found for language: ${lang}. Falling back to default.`);
466
+ // // utterance.lang = 'en-US'; // Fallback to English
467
+ // // }
468
 
469
+ // // utterance.pitch = 1; // Set pitch
470
+ // // utterance.rate = 1; // Set rate
471
+ // // window.speechSynthesis.speak(utterance); // Speak the text
472
+ // // }
473
 
474
+ // // // Language Handling Function
475
+ // // function speakResponse(text, selectedLanguage) {
476
+ // // let lang;
477
+ // // switch (selectedLanguage) {
478
+ // // case 'hindi': lang = 'hi-IN'; break;
479
+ // // case 'bengali': lang = 'bn-IN'; break;
480
+ // // case 'telugu': lang = 'te-IN'; break;
481
+ // // case 'marathi': lang = 'mr-IN'; break;
482
+ // // case 'tamil': lang = 'ta-IN'; break;
483
+ // // case 'gujarati': lang = 'gu-IN'; break;
484
+ // // case 'kannada': lang = 'kn-IN'; break;
485
+ // // case 'malayalam': lang = 'ml-IN'; break;
486
+ // // case 'punjabi': lang = 'pa-IN'; break;
487
+ // // case 'odia': lang = 'or-IN'; break;
488
+ // // case 'urdu': lang = 'ur-IN'; break;
489
+ // // case 'assamese': lang = 'as-IN'; break;
490
+ // // case 'sanskrit': lang = 'sa-IN'; break;
491
+ // // default: lang = 'en-US'; break; // English (default)
492
+ // // }
493
 
494
+ // // speak(text, lang); // Call the speak function with the determined language
495
+ // // }
496
 
497
+ // // // Ensure voices are loaded before running the TTS
498
+ // // window.speechSynthesis.onvoiceschanged = () => {
499
+ // // const voices = window.speechSynthesis.getVoices();
500
+ // // voices.forEach(voice => {
501
+ // // console.log(`Voice: ${voice.name}, Language: ${voice.lang}`);
502
+ // // });
503
+ // // };
504
+ // // Function to initialize and fetch voices
505
+ // function initializeVoices() {
506
+ // return new Promise((resolve) => {
507
+ // const voices = window.speechSynthesis.getVoices();
508
+ // if (voices.length) {
509
+ // resolve(voices);
510
+ // } else {
511
+ // window.speechSynthesis.onvoiceschanged = () => {
512
+ // resolve(window.speechSynthesis.getVoices());
513
+ // };
514
+ // }
515
+ // });
516
+ // }
517
 
518
+ // // Function to get the voice for a given language
519
+ // function getVoiceForLanguage(lang, voices) {
520
+ // const voice = voices.find(voice => voice.lang === lang);
521
+ // if (voice) {
522
+ // return voice;
523
+ // }
524
+ // console.warn(`No voice found for language: ${lang}.`);
525
+ // return null;
526
+ // }
527
+
528
+ // // // Text-to-Speech function
529
+ // // async function speak(text, lang) {
530
+ // // const voices = await initializeVoices();
531
+ // // const selectedVoice = getVoiceForLanguage(lang, voices);
532
+
533
+ // // const utterance = new SpeechSynthesisUtterance(text);
534
+ // // if (selectedVoice) {
535
+ // // utterance.voice = selectedVoice;
536
+ // // utterance.lang = selectedVoice.lang;
537
+ // // } else {
538
+ // // console.warn(`Falling back to default language.`);
539
+ // // utterance.lang = 'en-US';
540
+ // // }
541
 
542
+ // // utterance.pitch = 1; // Set pitch
543
+ // // utterance.rate = 1; // Set rate
544
+ // // window.speechSynthesis.speak(utterance); // Speak the text
545
+ // // }
546
+
547
+ // // // Language Handling Function
548
+ // // function speakResponse(text, selectedLanguage) {
549
+ // // let lang;
550
+ // // switch (selectedLanguage.toLowerCase()) {
551
+ // // case 'hindi': lang = 'hi-IN'; break;
552
+ // // case 'bengali': lang = 'bn-IN'; break;
553
+ // // case 'telugu': lang = 'te-IN'; break;
554
+ // // case 'marathi': lang = 'mr-IN'; break;
555
+ // // case 'tamil': lang = 'ta-IN'; break;
556
+ // // case 'gujarati': lang = 'gu-IN'; break;
557
+ // // case 'kannada': lang = 'kn-IN'; break;
558
+ // // case 'malayalam': lang = 'ml-IN'; break;
559
+ // // case 'punjabi': lang = 'pa-IN'; break;
560
+ // // case 'odia': lang = 'or-IN'; break;
561
+ // // case 'urdu': lang = 'ur-IN'; break;
562
+ // // case 'assamese': lang = 'as-IN'; break;
563
+ // // case 'sanskrit': lang = 'sa-IN'; break;
564
+ // // default: lang = 'en-US'; break; // English (default)
565
+ // // }
566
+
567
+ // // speak(text, lang); // Call the speak function with the determined language
568
+ // // }
569
+
570
+ // // // Test voices and log them
571
+ // // initializeVoices().then(voices => {
572
+ // // console.log("Available voices:");
573
+ // // voices.forEach(voice => console.log(`Voice: ${voice.name}, Language: ${voice.lang}`));
574
+ // // });
575
+ // // Text-to-Speech function using free API
576
  // async function speak(text, lang) {
577
+ // const url = `https://translate.google.com/translate_tts?ie=UTF-8&q=${encodeURIComponent(
578
+ // text
579
+ // )}&tl=${lang}&client=tw-ob`;
580
 
581
+ // try {
582
+ // const audio = new Audio(url); // Create an audio element
583
+ // audio.play(); // Play the audio
584
+ // } catch (error) {
585
+ // console.error("Error playing the audio:", error);
 
 
586
  // }
 
 
 
 
587
  // }
588
 
589
  // // Language Handling Function
590
  // function speakResponse(text, selectedLanguage) {
591
  // let lang;
592
  // switch (selectedLanguage.toLowerCase()) {
593
+ // case "hindi":
594
+ // lang = "hi";
595
+ // break;
596
+ // case "bengali":
597
+ // lang = "bn";
598
+ // break;
599
+ // case "telugu":
600
+ // lang = "te";
601
+ // break;
602
+ // case "marathi":
603
+ // lang = "mr";
604
+ // break;
605
+ // case "tamil":
606
+ // lang = "ta";
607
+ // break;
608
+ // case "gujarati":
609
+ // lang = "gu";
610
+ // break;
611
+ // case "kannada":
612
+ // lang = "kn";
613
+ // break;
614
+ // case "malayalam":
615
+ // lang = "ml";
616
+ // break;
617
+ // case "punjabi":
618
+ // lang = "pa";
619
+ // break;
620
+ // case "odia":
621
+ // lang = "or";
622
+ // break;
623
+ // case "urdu":
624
+ // lang = "ur";
625
+ // break;
626
+ // case "assamese":
627
+ // lang = "as";
628
+ // break;
629
+ // case "sanskrit":
630
+ // lang = "sa";
631
+ // break;
632
+ // default:
633
+ // lang = "en"; // Default to English
634
+ // break;
635
  // }
636
 
637
  // speak(text, lang); // Call the speak function with the determined language
638
  // }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
639
 
640
 
641
 
642
+ // // Event listeners for buttons
643
+ // sendBtn.addEventListener('click', () => {
644
+ // const message = userInput.value.trim();
645
+ // if (message) {
646
+ // addMessage('user-message', message);
647
+ // sendUserMessage(message);
648
+ // userInput.value = ''; // Clear input field after sending
649
+ // }
650
+ // });
651
 
652
+ // // Handle pressing 'Enter' key for sending messages
653
+ // userInput.addEventListener('keypress', (e) => {
654
+ // if (e.key === 'Enter') {
655
+ // sendBtn.click(); // Trigger button click
656
+ // }
657
+ // });
658
 
659
+ // // Update theme when selected from dropdown
660
+ // themeSelect.addEventListener('change', (e) => {
661
+ // changeTheme(e.target.value);
662
+ // });
663
+
664
+
665
+
666
+
667
+
668
+
669
+
670
+
671
+
672
+
673
+
674
+
675
+
676
+
677
+
678
+
679
+
680
+
681
+
682
+
683
+
684
+ const chatBox = document.getElementById('chat-box');
685
+ const voiceBtn = document.getElementById('voice-btn');
686
+ const sendBtn = document.getElementById('send-btn');
687
+ const userInput = document.getElementById('user-input');
688
+ const themeSelect = document.getElementById('theme-select');
689
+ const languageSelect = document.getElementById('language-select');
690
+
691
+ // Add message to chatbox
692
+ function addMessage(sender, text) {
693
+ const msgDiv = document.createElement('div');
694
+ msgDiv.classList.add('message', sender);
695
+ msgDiv.textContent = text;
696
+ chatBox.appendChild(msgDiv);
697
+ chatBox.scrollTop = chatBox.scrollHeight; // Scroll to the bottom of the chat
698
+ }
699
+
700
+ // Initialize speech recognition
701
+ const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
702
+
703
+ // Function to set language for speech recognition
704
+ function setRecognitionLanguage() {
705
+ const selectedLanguage = languageSelect.value;
706
+ const languageMap = {
707
+ telugu: 'te-IN',
708
+ hindi: 'hi-IN',
709
+ bengali: 'bn-IN',
710
+ marathi: 'mr-IN',
711
+ tamil: 'ta-IN',
712
+ gujarati: 'gu-IN',
713
+ kannada: 'kn-IN',
714
+ malayalam: 'ml-IN',
715
+ punjabi: 'pa-IN',
716
+ odia: 'or-IN',
717
+ urdu: 'ur-IN',
718
+ assamese: 'as-IN',
719
+ sanskrit: 'sa-IN',
720
+ english: 'en-US'
721
+ };
722
+ recognition.lang = languageMap[selectedLanguage] || 'en-US'; // Default to English
723
+ }
724
+
725
+ // Event listener for voice input button
726
+ voiceBtn.addEventListener('click', () => {
727
+ setRecognitionLanguage(); // Set language
728
+ recognition.start(); // Start recognition
729
+ });
730
+
731
+ // Handle results from speech recognition
732
+ recognition.addEventListener('result', (e) => {
733
+ const transcript = e.results[0][0].transcript;
734
+ addMessage('user-message', transcript);
735
+ sendUserMessage(transcript);
736
+ });
737
+
738
+ // Handle errors in speech recognition
739
+ recognition.addEventListener('error', (event) => {
740
+ console.error("Speech recognition error:", event);
741
+ });
742
+
743
+ // Change the accent color
744
+ function changeColor(color) {
745
+ document.documentElement.style.setProperty('--accent-color', color);
746
+ }
747
+
748
+ // Change the theme
749
+ function changeTheme(theme) {
750
+ document.documentElement.classList.remove(
751
+ 'theme-calm-azure',
752
+ 'theme-elegant-charcoal',
753
+ 'theme-fresh-greenery',
754
+ 'theme-soft-lavender',
755
+ 'theme-bright-summer'
756
+ );
757
+ if (theme !== 'default') {
758
+ document.documentElement.classList.add('theme-' + theme);
759
+ }
760
+ }
761
+
762
+ // Function to send user input and selected language to backend
763
+ function sendUserMessage(message) {
764
+ const selectedLanguage = languageSelect.value; // Get the selected language
765
+
766
+ fetch('/chat', {
767
+ method: 'POST',
768
+ headers: {
769
+ 'Content-Type': 'application/json',
770
+ },
771
+ body: JSON.stringify({
772
+ message,
773
+ language: selectedLanguage, // Include the selected language in the request body
774
+ }),
775
+ })
776
+ .then(response => response.json())
777
+ .then(data => {
778
+ const botResponse = data.response;
779
+ addMessage('bot-message', botResponse);
780
+ speakResponse(botResponse, selectedLanguage);
781
+ })
782
+ .catch(error => {
783
+ console.error("Error:", error);
784
+ addMessage('bot-message', "Sorry, I couldn't process that.");
785
+ });
786
+ }
787
+
788
+ // Initialize and fetch voices
789
+ function initializeVoices() {
790
+ return new Promise((resolve) => {
791
+ const voices = window.speechSynthesis.getVoices();
792
+ if (voices.length) {
793
+ resolve(voices);
794
+ } else {
795
+ window.speechSynthesis.onvoiceschanged = () => {
796
+ resolve(window.speechSynthesis.getVoices());
797
+ };
798
+ }
799
+ });
800
+ }
801
+
802
+ // Get the voice for a given language
803
+ function getVoiceForLanguage(lang, voices) {
804
+ const voice = voices.find(voice => voice.lang === lang);
805
+ if (voice) {
806
+ return voice;
807
+ }
808
+ console.warn(`No voice found for language: ${lang}.`);
809
+ return null;
810
+ }
811
+
812
+ // Text-to-Speech function using free API
813
+ async function speak(text, lang) {
814
+ const url = `https://translate.google.com/translate_tts?ie=UTF-8&q=${encodeURIComponent(
815
+ text
816
+ )}&tl=${lang}&client=tw-ob`;
817
+
818
+ try {
819
+ const audio = new Audio(url); // Create an audio element
820
+ audio.play(); // Play the audio
821
+ } catch (error) {
822
+ console.error("Error playing the audio:", error);
823
+ }
824
+ }
825
+
826
+ // Language Handling Function
827
+ function speakResponse(text, selectedLanguage) {
828
+ const languageMap = {
829
+ hindi: 'hi',
830
+ bengali: 'bn',
831
+ telugu: 'te',
832
+ marathi: 'mr',
833
+ tamil: 'ta',
834
+ gujarati: 'gu',
835
+ kannada: 'kn',
836
+ malayalam: 'ml',
837
+ punjabi: 'pa',
838
+ odia: 'or',
839
+ urdu: 'ur',
840
+ assamese: 'as',
841
+ sanskrit: 'sa',
842
+ english: 'en',
843
+ };
844
+ const lang = languageMap[selectedLanguage.toLowerCase()] || 'en'; // Default to English
845
+ speak(text, lang); // Call the speak function with the determined language
846
+ }
847
+
848
+ // Event listeners for buttons
849
+ sendBtn.addEventListener('click', () => {
850
+ const message = userInput.value.trim();
851
+ if (message) {
852
+ addMessage('user-message', message);
853
+ sendUserMessage(message);
854
+ userInput.value = ''; // Clear input field after sending
855
+ }
856
+ });
857
+
858
+ // Handle pressing 'Enter' key for sending messages
859
+ userInput.addEventListener('keypress', (e) => {
860
+ if (e.key === 'Enter') {
861
+ sendBtn.click(); // Trigger button click
862
+ }
863
+ });
864
+
865
+ // Update theme when selected from dropdown
866
+ themeSelect.addEventListener('change', (e) => {
867
+ changeTheme(e.target.value);
868
+ });
869
+
870
  </script>
871
  </body>
872
  </html>