Spaces:
Running
Running
Gopikanth123
commited on
Update templates/index.html
Browse files- templates/index.html +220 -494
templates/index.html
CHANGED
@@ -347,526 +347,252 @@
|
|
347 |
</div>
|
348 |
|
349 |
<script>
|
350 |
-
|
351 |
-
|
352 |
-
|
353 |
-
|
354 |
-
|
355 |
-
|
356 |
|
357 |
-
//
|
358 |
-
|
359 |
-
|
360 |
-
|
361 |
-
|
362 |
-
|
363 |
-
|
364 |
-
|
365 |
|
366 |
-
//
|
367 |
-
|
368 |
|
369 |
-
//
|
370 |
-
|
371 |
-
|
372 |
-
|
373 |
-
|
374 |
-
|
375 |
-
|
376 |
-
|
377 |
-
|
378 |
-
|
379 |
-
|
380 |
-
|
381 |
-
|
382 |
-
|
383 |
-
|
384 |
-
|
385 |
-
|
386 |
-
|
387 |
-
|
388 |
-
|
389 |
-
|
390 |
|
391 |
-
//
|
392 |
-
|
393 |
-
|
394 |
-
|
395 |
-
|
396 |
|
397 |
-
//
|
398 |
-
|
399 |
-
|
400 |
-
|
401 |
-
|
402 |
-
|
403 |
|
404 |
-
//
|
405 |
-
|
406 |
-
|
407 |
-
|
408 |
|
409 |
-
//
|
410 |
-
|
411 |
-
|
412 |
-
|
413 |
|
414 |
-
//
|
415 |
-
|
416 |
-
|
417 |
-
|
418 |
-
|
419 |
-
|
420 |
-
|
421 |
|
422 |
-
//
|
423 |
-
|
424 |
-
|
425 |
|
426 |
-
|
427 |
-
|
428 |
-
|
429 |
-
|
430 |
-
|
431 |
-
|
432 |
-
|
433 |
-
|
434 |
-
|
435 |
-
|
436 |
-
|
437 |
-
|
438 |
-
|
439 |
-
|
440 |
-
|
441 |
-
|
442 |
-
|
443 |
-
|
444 |
-
|
445 |
-
|
446 |
-
|
447 |
-
|
448 |
|
449 |
-
// //
|
450 |
-
//
|
451 |
-
//
|
452 |
-
//
|
453 |
-
//
|
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 |
-
// //
|
475 |
-
//
|
476 |
-
//
|
477 |
-
//
|
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 |
-
//
|
495 |
-
// //
|
|
|
|
|
|
|
|
|
|
|
496 |
|
497 |
-
//
|
498 |
-
//
|
499 |
-
//
|
500 |
-
//
|
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 |
-
// //
|
519 |
-
// function
|
520 |
-
//
|
521 |
-
//
|
522 |
-
//
|
523 |
-
//
|
524 |
-
//
|
525 |
-
//
|
526 |
-
//
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
527 |
|
528 |
-
//
|
529 |
-
//
|
530 |
-
// // const voices = await initializeVoices();
|
531 |
-
// // const selectedVoice = getVoiceForLanguage(lang, voices);
|
532 |
|
533 |
-
// //
|
534 |
-
//
|
535 |
-
//
|
536 |
-
//
|
537 |
-
//
|
538 |
-
//
|
539 |
-
//
|
540 |
-
//
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
541 |
|
542 |
-
//
|
543 |
-
|
544 |
-
|
545 |
-
|
|
|
|
|
|
|
|
|
|
|
546 |
|
547 |
-
//
|
548 |
-
|
549 |
-
|
550 |
-
|
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 |
-
|
568 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
569 |
|
570 |
-
|
571 |
-
|
572 |
-
|
573 |
-
|
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 |
-
//
|
582 |
-
|
583 |
-
|
584 |
-
|
585 |
-
|
586 |
-
|
587 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
588 |
|
589 |
-
|
590 |
-
|
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 |
-
//
|
638 |
-
|
639 |
-
|
640 |
-
|
641 |
-
|
642 |
-
//
|
643 |
-
|
644 |
-
|
645 |
-
|
646 |
-
|
647 |
-
|
648 |
-
|
649 |
-
|
650 |
-
|
651 |
|
652 |
-
//
|
653 |
-
|
654 |
-
|
655 |
-
|
656 |
-
|
657 |
-
|
658 |
|
659 |
-
//
|
660 |
-
|
661 |
-
|
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>
|
|
|
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 |
+
// Event listeners for buttons
|
576 |
+
sendBtn.addEventListener('click', () => {
|
577 |
+
const message = userInput.value.trim();
|
578 |
+
if (message) {
|
579 |
+
addMessage('user-message', message);
|
580 |
+
sendUserMessage(message);
|
581 |
+
userInput.value = ''; // Clear input field after sending
|
582 |
+
}
|
583 |
+
});
|
584 |
|
585 |
+
// Handle pressing 'Enter' key for sending messages
|
586 |
+
userInput.addEventListener('keypress', (e) => {
|
587 |
+
if (e.key === 'Enter') {
|
588 |
+
sendBtn.click(); // Trigger button click
|
589 |
+
}
|
590 |
+
});
|
591 |
|
592 |
+
// Update theme when selected from dropdown
|
593 |
+
themeSelect.addEventListener('change', (e) => {
|
594 |
+
changeTheme(e.target.value);
|
595 |
+
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
596 |
</script>
|
597 |
</body>
|
598 |
</html>
|