Hugging Face's logo

Spaces:
redfernstech
/
voicechatbot
Sleeping

App Files Community
srinuksv commited on
Commit
f924031
·
verified ·
1 Parent(s): 943c8bf

Update static/voice.html

Browse files
Files changed (1) hide show
  1. static/voice.html +50 -84
static/voice.html CHANGED
@@ -13,131 +13,97 @@
13
  padding: 0;
14
  }
15
  #chat-container {
16
- max-width: 400px;
17
- margin: 50px auto;
18
  padding: 25px;
19
  border-radius: 15px;
20
  background-color: #fff;
21
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
22
  position: relative;
23
- text-align: center;
24
  }
25
- .message {
26
- padding: 15px;
27
- margin: 10px 0;
28
- border-radius: 15px;
29
- font-size: 1em;
30
- line-height: 1.4em;
31
- background-color: #e0f7fa;
32
- color: #00796b;
33
- text-align: left;
34
- }
35
- .user-message {
36
- margin-left: auto;
37
- background-color: #80cbc4;
38
- color: #004d40;
39
- }
40
- .bot-message {
41
- margin-right: auto;
42
- background-color: #ffccbc;
43
- color: #bf360c;
44
- }
45
- #mic-button, #send-button {
46
- background-color: #00796b;
47
  color: white;
48
  border-radius: 8px;
49
- padding: 12px 15px;
50
  border: none;
51
  cursor: pointer;
52
  font-size: 1.1em;
53
  transition: background-color 0.3s;
54
- margin: 10px;
55
  }
56
- #mic-button:hover, #send-button:hover {
57
- background-color: #004d40;
58
  }
59
  </style>
60
- <title>Voice Chatbot</title>
61
  </head>
62
  <body>
63
  <div id="chat-container">
64
- <div id="response-container"></div>
65
- <button id="mic-button" class="btn"><i class="fas fa-microphone"></i></button>
66
- <button id="send-button" class="btn"><i class="fas fa-paper-plane"></i></button>
 
67
  </div>
68
 
69
  <script>
70
  const synth = window.speechSynthesis;
71
- let currentLanguage = "en-US"; // Default language
72
-
73
- // Handle language selection
74
- document.getElementById("language-selector").addEventListener("change", (event) => {
75
- currentLanguage = event.target.value;
76
- });
77
 
78
- // Add message to response container
79
- function addMessage(message, className) {
80
- const responseContainer = document.getElementById("response-container");
81
- const messageElement = document.createElement("div");
82
- messageElement.className = `message ${className}`;
83
- messageElement.innerHTML = message;
84
- responseContainer.appendChild(messageElement);
85
- responseContainer.scrollTop = responseContainer.scrollHeight;
 
 
 
 
 
 
86
  }
87
 
88
  // Send message to server
89
  async function sendMessage(message) {
90
- if (!message) return;
91
- addMessage(`<strong>User:</strong> ${message}`, "user-message");
92
- // Simulate bot typing
93
- const botTyping = document.createElement("div");
94
- botTyping.className = "typing-indicator";
95
- botTyping.textContent = "Bot is typing...";
96
- document.getElementById("response-container").appendChild(botTyping);
97
  try {
98
- const response = await fetch("/chat/", {
99
- method: "POST",
100
- headers: { "Content-Type": "application/json" },
101
- body: JSON.stringify({ message, language: currentLanguage })
102
- });
103
- const data = await response.json();
104
- botTyping.remove();
105
- const botMessage = data.response;
106
- addMessage(`<strong>Bot:</strong> ${botMessage}`, "bot-message");
107
- speak(botMessage, currentLanguage);
108
  } catch (error) {
109
- botTyping.remove();
110
  console.error("Error:", error);
111
  const errorMessage = "Sorry, something went wrong.";
112
- addMessage(`<strong>Bot:</strong> ${errorMessage}`, "bot-message");
113
- speak(errorMessage, currentLanguage);
114
  }
115
  }
116
 
117
  // Text-to-Speech function
118
- function speak(text, lang) {
119
  const utterance = new SpeechSynthesisUtterance(text);
120
- utterance.lang = lang;
121
  utterance.pitch = 1;
122
  utterance.rate = 1;
123
  synth.speak(utterance);
124
  }
125
 
126
- // Speech-to-Text function
127
- function startListening() {
128
- const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
129
- recognition.lang = currentLanguage;
130
- recognition.interimResults = false;
131
- recognition.onresult = (event) => {
132
- const transcript = event.results[0][0].transcript;
133
- sendMessage(transcript);
134
- };
135
- recognition.onerror = (event) => {
136
- console.error("Speech recognition error:", event.error);
137
- addMessage("<strong>Bot:</strong> Sorry, I couldn't understand you.", "bot-message");
138
- speak("Sorry, I couldn't understand you.", currentLanguage);
139
- };
140
- recognition.start();
141
  }
142
 
143
  // Event Listeners
 
13
  padding: 0;
14
  }
15
  #chat-container {
16
+ max-width: 500px;
17
+ margin: auto;
18
  padding: 25px;
19
  border-radius: 15px;
20
  background-color: #fff;
21
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
22
  position: relative;
 
23
  }
24
+ .btn-mic, .btn-send {
25
+ background-color: #007bff;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
26
  color: white;
27
  border-radius: 8px;
28
+ padding: 10px 15px;
29
  border: none;
30
  cursor: pointer;
31
  font-size: 1.1em;
32
  transition: background-color 0.3s;
 
33
  }
34
+ .btn-mic:hover, .btn-send:hover {
35
+ background-color: #0056b3;
36
  }
37
  </style>
38
+ <title>Voice-based ChatGPT</title>
39
  </head>
40
  <body>
41
  <div id="chat-container">
42
+ <div class="input-group">
43
+ <button id="mic-button" class="btn-mic"><i class="fas fa-microphone"></i></button>
44
+ <button id="send-button" class="btn-send"><i class="fas fa-paper-plane"></i></button>
45
+ </div>
46
  </div>
47
 
48
  <script>
49
  const synth = window.speechSynthesis;
 
 
 
 
 
 
50
 
51
+ // Speech-to-Text function
52
+ function startListening() {
53
+ const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
54
+ recognition.lang = "en-US";
55
+ recognition.interimResults = false;
56
+ recognition.onresult = (event) => {
57
+ const transcript = event.results[0][0].transcript;
58
+ sendMessage(transcript);
59
+ };
60
+ recognition.onerror = (event) => {
61
+ console.error("Speech recognition error:", event.error);
62
+ speak("Sorry, I couldn't understand you.");
63
+ };
64
+ recognition.start();
65
  }
66
 
67
  // Send message to server
68
  async function sendMessage(message) {
69
+ if (!message.trim()) return;
70
+ addMessage("User", message, "user-message");
71
+
 
 
 
 
72
  try {
73
+ // Simulate bot typing
74
+ const botMessage = "Bot is typing...";
75
+ addMessage("Bot", botMessage, "bot-message");
76
+
77
+ // Simulate a server response (replace with actual server request)
78
+ const response = await new Promise(resolve => setTimeout(() => resolve({ response: "Hello! How can I assist you today?" }), 1000));
79
+ const botMessageContent = response.response;
80
+
81
+ addMessage("Bot", botMessageContent, "bot-message");
82
+ speak(botMessageContent);
83
  } catch (error) {
 
84
  console.error("Error:", error);
85
  const errorMessage = "Sorry, something went wrong.";
86
+ addMessage("Bot", errorMessage, "bot-message");
87
+ speak(errorMessage);
88
  }
89
  }
90
 
91
  // Text-to-Speech function
92
+ function speak(text) {
93
  const utterance = new SpeechSynthesisUtterance(text);
94
+ utterance.lang = "en-US";
95
  utterance.pitch = 1;
96
  utterance.rate = 1;
97
  synth.speak(utterance);
98
  }
99
 
100
+ // Add message to chat history
101
+ function addMessage(sender, message, className) {
102
+ const chatHistory = document.getElementById("chat-container");
103
+ const messageElement = document.createElement("div");
104
+ messageElement.className = `message ${className}`;
105
+ messageElement.innerHTML = `<strong>${sender}:</strong> ${message}`;
106
+ chatHistory.appendChild(messageElement);
 
 
 
 
 
 
 
 
107
  }
108
 
109
  // Event Listeners