srinuksv commited on
Commit
99fa0a2
·
verified ·
1 Parent(s): c626ca9

Update static/index.html

Browse files
Files changed (1) hide show
  1. 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
- .typing-indicator {
83
- font-style: italic;
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 = "en-US";
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 = "en-US";
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();