Spaces:
Running
Running
Update static/index.html
Browse files- static/index.html +22 -12
static/index.html
CHANGED
@@ -79,16 +79,20 @@
|
|
79 |
.btn-send:hover, .btn-mic:hover {
|
80 |
background-color: #0056b3;
|
81 |
}
|
82 |
-
|
83 |
-
|
84 |
-
color: #888;
|
85 |
-
margin-top: 10px;
|
86 |
}
|
87 |
</style>
|
88 |
-
<title>Voice Chatbot</title>
|
89 |
</head>
|
90 |
<body>
|
91 |
<div id="chat-container">
|
|
|
|
|
|
|
|
|
|
|
|
|
92 |
<div id="chat-history"></div>
|
93 |
<div class="input-group">
|
94 |
<textarea id="user-input" class="form-control" rows="1" placeholder="Type or speak your message..." aria-label="Message input"></textarea>
|
@@ -100,6 +104,12 @@
|
|
100 |
<script>
|
101 |
const chatHistoryArray = [];
|
102 |
const synth = window.speechSynthesis;
|
|
|
|
|
|
|
|
|
|
|
|
|
103 |
|
104 |
// Add message to chat history
|
105 |
function addMessage(sender, message, className) {
|
@@ -131,7 +141,7 @@
|
|
131 |
const response = await fetch("/chat/", {
|
132 |
method: "POST",
|
133 |
headers: { "Content-Type": "application/json" },
|
134 |
-
body: JSON.stringify({ message })
|
135 |
});
|
136 |
const data = await response.json();
|
137 |
|
@@ -139,20 +149,20 @@
|
|
139 |
const botMessage = data.response;
|
140 |
addMessage("Bot", botMessage, "bot-message");
|
141 |
chatHistoryArray.push({ sender: "Bot", message: botMessage });
|
142 |
-
speak(botMessage);
|
143 |
} catch (error) {
|
144 |
botTyping.remove();
|
145 |
console.error("Error:", error);
|
146 |
const errorMessage = "Sorry, something went wrong.";
|
147 |
addMessage("Bot", errorMessage, "bot-message");
|
148 |
-
speak(errorMessage);
|
149 |
}
|
150 |
}
|
151 |
|
152 |
// Text-to-Speech function
|
153 |
-
function speak(text) {
|
154 |
const utterance = new SpeechSynthesisUtterance(text);
|
155 |
-
utterance.lang =
|
156 |
utterance.pitch = 1;
|
157 |
utterance.rate = 1;
|
158 |
synth.speak(utterance);
|
@@ -161,7 +171,7 @@
|
|
161 |
// Speech-to-Text function
|
162 |
function startListening() {
|
163 |
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
|
164 |
-
recognition.lang =
|
165 |
recognition.interimResults = false;
|
166 |
|
167 |
recognition.onresult = (event) => {
|
@@ -173,7 +183,7 @@
|
|
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.");
|
177 |
};
|
178 |
|
179 |
recognition.start();
|
|
|
79 |
.btn-send:hover, .btn-mic:hover {
|
80 |
background-color: #0056b3;
|
81 |
}
|
82 |
+
#language-selector {
|
83 |
+
margin-bottom: 10px;
|
|
|
|
|
84 |
}
|
85 |
</style>
|
86 |
+
<title>Multilanguage Voice Chatbot</title>
|
87 |
</head>
|
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 |
+
</select>
|
96 |
<div id="chat-history"></div>
|
97 |
<div class="input-group">
|
98 |
<textarea id="user-input" class="form-control" rows="1" placeholder="Type or speak your message..." aria-label="Message input"></textarea>
|
|
|
104 |
<script>
|
105 |
const chatHistoryArray = [];
|
106 |
const synth = window.speechSynthesis;
|
107 |
+
let currentLanguage = "en-US"; // Default language
|
108 |
+
|
109 |
+
// Handle language selection
|
110 |
+
document.getElementById("language-selector").addEventListener("change", (event) => {
|
111 |
+
currentLanguage = event.target.value;
|
112 |
+
});
|
113 |
|
114 |
// Add message to chat history
|
115 |
function addMessage(sender, message, className) {
|
|
|
141 |
const response = await fetch("/chat/", {
|
142 |
method: "POST",
|
143 |
headers: { "Content-Type": "application/json" },
|
144 |
+
body: JSON.stringify({ message, language: currentLanguage })
|
145 |
});
|
146 |
const data = await response.json();
|
147 |
|
|
|
149 |
const botMessage = data.response;
|
150 |
addMessage("Bot", botMessage, "bot-message");
|
151 |
chatHistoryArray.push({ sender: "Bot", message: botMessage });
|
152 |
+
speak(botMessage, currentLanguage);
|
153 |
} catch (error) {
|
154 |
botTyping.remove();
|
155 |
console.error("Error:", error);
|
156 |
const errorMessage = "Sorry, something went wrong.";
|
157 |
addMessage("Bot", errorMessage, "bot-message");
|
158 |
+
speak(errorMessage, currentLanguage);
|
159 |
}
|
160 |
}
|
161 |
|
162 |
// Text-to-Speech function
|
163 |
+
function speak(text, lang) {
|
164 |
const utterance = new SpeechSynthesisUtterance(text);
|
165 |
+
utterance.lang = lang;
|
166 |
utterance.pitch = 1;
|
167 |
utterance.rate = 1;
|
168 |
synth.speak(utterance);
|
|
|
171 |
// Speech-to-Text function
|
172 |
function startListening() {
|
173 |
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
|
174 |
+
recognition.lang = currentLanguage;
|
175 |
recognition.interimResults = false;
|
176 |
|
177 |
recognition.onresult = (event) => {
|
|
|
183 |
recognition.onerror = (event) => {
|
184 |
console.error("Speech recognition error:", event.error);
|
185 |
addMessage("Bot", "Sorry, I couldn't understand you.", "bot-message");
|
186 |
+
speak("Sorry, I couldn't understand you.", currentLanguage);
|
187 |
};
|
188 |
|
189 |
recognition.start();
|