Hugging Face's logo

Spaces:
Neurolingua
/
Aiducation-Edtech-GenAI
Running

App Files Community
6
Neurolingua commited on
Commit
a6062cc
•
1 Parent(s): 7fb13b9

Update templates/student_speakai.html

Browse files
Files changed (1) hide show
  1. templates/student_speakai.html +352 -354
templates/student_speakai.html CHANGED
@@ -1,354 +1,352 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>SmartLearn - AI Voice Chat</title>
7
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
- <style>
9
- @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
10
-
11
- :root {
12
- --primary-color: #4e54c8;
13
- --secondary-color: #8f94fb;
14
- --accent-color: #ff6b6b;
15
- --text-color: #333;
16
- --bg-color: rgba(255, 255, 255, 0.8);
17
- }
18
-
19
- body {
20
- font-family: 'Poppins', sans-serif;
21
- margin: 0;
22
- padding: 0;
23
- line-height: 1.6;
24
- overflow: hidden;
25
- position: relative;
26
- }
27
-
28
- video {
29
- position: absolute;
30
- top: 50%;
31
- left: 50%;
32
- min-width: 100%;
33
- min-height: 100%;
34
- width: auto;
35
- height: auto;
36
- z-index: -1;
37
- transform: translateX(-50%) translateY(-50%);
38
- background-size: cover;
39
- transition: 1s opacity;
40
- }
41
-
42
- .container {
43
- max-width: 800px;
44
- margin: 0 auto;
45
- padding: 20px;
46
- background-color: var(--bg-color);
47
- border-radius: 10px;
48
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
49
- display: flex;
50
- flex-direction: column;
51
- align-items: center;
52
- }
53
-
54
- header {
55
- background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
56
- padding: 15px 0;
57
- position: sticky;
58
- top: 0;
59
- z-index: 1000;
60
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
61
- text-align: center;
62
- }
63
-
64
- .header-content {
65
- display: flex;
66
- justify-content: center;
67
- align-items: center;
68
- max-width: 1200px;
69
- margin: 0 auto;
70
- padding: 0 20px;
71
- }
72
-
73
- .logo {
74
- font-size: 28px;
75
- font-weight: 700;
76
- color: #fff;
77
- text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
78
- display: flex;
79
- align-items: center;
80
- }
81
-
82
- .logo img {
83
- height: 40px;
84
- margin-right: 10px;
85
- }
86
-
87
- .nav-bar {
88
- background-color: #fff;
89
- padding: 10px 0;
90
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
91
- }
92
-
93
- .nav-bar ul {
94
- list-style-type: none;
95
- margin: 0;
96
- padding: 0;
97
- display: flex;
98
- justify-content: center;
99
- align-items: center;
100
- }
101
-
102
- .nav-bar li {
103
- margin: 0 10px;
104
- }
105
-
106
- .nav-bar a {
107
- text-decoration: none;
108
- color: var(--text-color);
109
- font-weight: 600;
110
- transition: all 0.3s ease;
111
- display: flex;
112
- align-items: center;
113
- }
114
-
115
- .nav-bar a img {
116
- height: 24px;
117
- margin-right: 5px;
118
- }
119
-
120
- .nav-bar a:hover {
121
- color: var(--primary-color);
122
- }
123
-
124
- h1 {
125
- color: #fff;
126
- margin: 0;
127
- }
128
-
129
- #chat-log {
130
- width: 100%;
131
- height: 400px;
132
- border: 1px solid #ccc;
133
- border-radius: 10px;
134
- overflow-y: scroll;
135
- padding: 20px;
136
- margin-bottom: 20px;
137
- background-color: #fff;
138
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
139
- }
140
-
141
- #user-input {
142
- width: 100%;
143
- padding: 15px;
144
- margin-bottom: 15px;
145
- border: 1px solid #ccc;
146
- border-radius: 5px;
147
- font-size: 16px;
148
- }
149
-
150
- .button-group {
151
- width: 100%;
152
- display: flex;
153
- justify-content: space-between;
154
- }
155
-
156
- button {
157
- padding: 12px 25px;
158
- border: none;
159
- border-radius: 5px;
160
- cursor: pointer;
161
- font-weight: 600;
162
- transition: all 0.3s ease;
163
- }
164
-
165
- #start-voice {
166
- background-color: var(--primary-color);
167
- color: #fff;
168
- }
169
-
170
- #send-text {
171
- background-color: var(--accent-color);
172
- color: #fff;
173
- }
174
-
175
- button:hover {
176
- transform: translateY(-3px);
177
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
178
- }
179
-
180
- .message {
181
- margin-bottom: 15px;
182
- padding: 10px 15px;
183
- border-radius: 10px;
184
- max-width: 80%;
185
- }
186
-
187
- .user-message {
188
- background-color: #e6f3ff;
189
- align-self: flex-end;
190
- margin-left: auto;
191
- }
192
-
193
- .ai-message {
194
- background-color: #f0f0f0;
195
- align-self: flex-start;
196
- }
197
-
198
- #listening-indicator {
199
- display: none;
200
- color: var(--primary-color);
201
- font-weight: bold;
202
- text-align: center;
203
- margin-top: 10px;
204
- }
205
-
206
- .pulse {
207
- animation: pulse 1.5s infinite;
208
- }
209
-
210
- @keyframes pulse {
211
- 0% {
212
- opacity: 0.5;
213
- }
214
- 50% {
215
- opacity: 1;
216
- }
217
- 100% {
218
- opacity: 0.5;
219
- }
220
- }
221
- </style>
222
- </head>
223
- <body>
224
- <video autoplay muted loop id="bg-video">
225
- <source src="../static/Voice-chat.mp4" type="video/mp4">
226
- Your browser does not support HTML5 video.
227
- </video>
228
-
229
- <header>
230
- <div class="header-content">
231
- <div class="logo"><img src="../static/smart-learn.jpeg" alt="" style="text-align: left;">SmartLearn </div>
232
-
233
- <h1>AI Voice Chat</h1></div>
234
- <nav class="nav-bar">
235
- <ul>
236
- <li><a href="{{ url_for('student') }}"><img src="https://cdn-icons-png.flaticon.com/512/1946/1946488.png" alt="Home">Home</a></li>
237
- <li><a href="{{ url_for('student') }}#ai-powered-tools"><img src="https://www.kalupurbank.com/wp-content/uploads/2023/02/robot-chatbot-icon-sign-free-vector.webp" alt="Home">Ai Tools</a></li>
238
- <li><a href="{{ url_for('homework') }}"><img src="https://cdn-icons-png.flaticon.com/512/1828/1828919.png" alt="Homework">Homework</a></li>
239
- <li><a href="{{ url_for('student_courses') }}"><img src="https://cdn-icons-png.flaticon.com/512/1048/1048953.png" alt="Courses">Courses</a></li>
240
- <li><a href="{{ url_for('speak') }}"><img src="https://cdn-icons-png.flaticon.com/512/4712/4712026.png" alt="Speak With AI">Speak With AI</a></li>
241
- <li><a href="{{ url_for('summarise_video') }}"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/YouTube_full-color_icon_%282017%29.svg/1280px-YouTube_full-color_icon_%282017%29.svg.png" alt="Ssummarise_video">summarise_video</a></li>
242
- </ul>
243
- </nav>
244
- </header>
245
-
246
- <div class="container">
247
- <div id="chat-log">
248
- <div class="message ai-message"><strong>AI:</strong> I'm a speaking Assistant, interact with me to enhance your speaking skills.</div>
249
- </div>
250
- <textarea id="user-input" rows="3" placeholder="Type your message here or click 'Start Voice Input' to speak..."></textarea>
251
- <div class="button-group">
252
- <button id="start-voice"><i class="fas fa-microphone"></i> Start Voice Input</button>
253
- <button id="send-text"><i class="fas fa-paper-plane"></i> Send Text</button>
254
- </div>
255
- <div id="listening-indicator">Listening... Speak now</div>
256
- </div>
257
-
258
- <script>
259
- const chatLog = document.getElementById('chat-log');
260
- const userInput = document.getElementById('user-input');
261
- const startVoiceBtn = document.getElementById('start-voice');
262
- const sendTextBtn = document.getElementById('send-text');
263
- const listeningIndicator = document.getElementById('listening-indicator');
264
-
265
- let recognition;
266
-
267
- if ('webkitSpeechRecognition' in window) {
268
- recognition = new webkitSpeechRecognition();
269
- recognition.continuous = false;
270
- recognition.interimResults = true;
271
- recognition.lang = 'en-US';
272
-
273
- recognition.onstart = function() {
274
- listeningIndicator.style.display = 'block';
275
- listeningIndicator.classList.add('pulse');
276
- startVoiceBtn.disabled = true;
277
- };
278
-
279
- recognition.onend = function() {
280
- listeningIndicator.style.display = 'none';
281
- listeningIndicator.classList.remove('pulse');
282
- startVoiceBtn.disabled = false;
283
- };
284
-
285
- recognition.onresult = function(event) {
286
- const transcript = Array.from(event.results)
287
- .map(result => result[0].transcript)
288
- .join('');
289
-
290
- userInput.value = transcript;
291
-
292
- if (event.results[0].isFinal) {
293
- sendMessage(transcript);
294
- recognition.stop();
295
- }
296
- };
297
-
298
- recognition.onerror = function(event) {
299
- console.error('Speech recognition error:', event.error);
300
- listeningIndicator.style.display = 'none';
301
- listeningIndicator.classList.remove('pulse');
302
- startVoiceBtn.disabled = false;
303
- };
304
- } else {
305
- console.log('Speech recognition not supported');
306
- startVoiceBtn.disabled = true;
307
- }
308
-
309
- startVoiceBtn.addEventListener('click', () => {
310
- recognition.start();
311
- });
312
-
313
- sendTextBtn.addEventListener('click', () => {
314
- sendMessage(userInput.value);
315
- });
316
-
317
- function sendMessage(message) {
318
- if (message.trim() === '') return;
319
-
320
- appendToChatLog('You', message);
321
-
322
- fetch('/chat', {
323
- method: 'POST',
324
- headers: {
325
- 'Content-Type': 'application/json',
326
- },
327
- body: JSON.stringify({ message: message }),
328
- })
329
- .then(response => response.json())
330
- .then(data => {
331
- appendToChatLog('AI', data.response);
332
- speakResponse(data.response);
333
- })
334
- .catch(error => console.error('Error:', error));
335
-
336
- userInput.value = '';
337
- }
338
-
339
- function appendToChatLog(sender, message) {
340
- const messageElement = document.createElement('div');
341
- messageElement.classList.add('message', sender === 'You' ? 'user-message' : 'ai-message');
342
- messageElement.innerHTML = `<strong>${sender}:</strong> ${message}`;
343
- chatLog.appendChild(messageElement);
344
- chatLog.scrollTop = chatLog.scrollHeight;
345
- }
346
-
347
- function speakResponse(message) {
348
- const speech = new SpeechSynthesisUtterance(message);
349
- speech.lang = 'en-US';
350
- window.speechSynthesis.speak(speech);
351
- }
352
- </script>
353
- </body>
354
- </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SmartLearn - AI Voice Chat</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
10
+
11
+ :root {
12
+ --primary-color: #4e54c8;
13
+ --secondary-color: #8f94fb;
14
+ --accent-color: #ff6b6b;
15
+ --text-color: #333;
16
+ --bg-color: rgba(255, 255, 255, 0.8);
17
+ }
18
+
19
+ body {
20
+ font-family: 'Poppins', sans-serif;
21
+ margin: 0;
22
+ padding: 0;
23
+ line-height: 1.6;
24
+ overflow: hidden;
25
+ position: relative;
26
+ }
27
+
28
+ video {
29
+ position: absolute;
30
+ top: 0;
31
+ left: 0;
32
+ width: 100%;
33
+ height: 100%;
34
+ z-index: -1;
35
+ object-fit: cover;
36
+ transition: 1s opacity;
37
+ }
38
+
39
+ .container {
40
+ max-width: 800px;
41
+ margin: 0 auto;
42
+ padding: 20px;
43
+ background-color: var(--bg-color);
44
+ border-radius: 10px;
45
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
46
+ display: flex;
47
+ flex-direction: column;
48
+ align-items: center;
49
+ }
50
+
51
+ header {
52
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
53
+ padding: 15px 0;
54
+ position: sticky;
55
+ top: 0;
56
+ z-index: 1000;
57
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
58
+ text-align: center;
59
+ }
60
+
61
+ .header-content {
62
+ display: flex;
63
+ justify-content: center;
64
+ align-items: center;
65
+ max-width: 1200px;
66
+ margin: 0 auto;
67
+ padding: 0 20px;
68
+ }
69
+
70
+ .logo {
71
+ font-size: 28px;
72
+ font-weight: 700;
73
+ color: #fff;
74
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
75
+ display: flex;
76
+ align-items: center;
77
+ }
78
+
79
+ .logo img {
80
+ height: 40px;
81
+ margin-right: 10px;
82
+ }
83
+
84
+ .nav-bar {
85
+ background-color: #fff;
86
+ padding: 10px 0;
87
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
88
+ }
89
+
90
+ .nav-bar ul {
91
+ list-style-type: none;
92
+ margin: 0;
93
+ padding: 0;
94
+ display: flex;
95
+ justify-content: center;
96
+ align-items: center;
97
+ }
98
+
99
+ .nav-bar li {
100
+ margin: 0 10px;
101
+ }
102
+
103
+ .nav-bar a {
104
+ text-decoration: none;
105
+ color: var(--text-color);
106
+ font-weight: 600;
107
+ transition: all 0.3s ease;
108
+ display: flex;
109
+ align-items: center;
110
+ }
111
+
112
+ .nav-bar a img {
113
+ height: 24px;
114
+ margin-right: 5px;
115
+ }
116
+
117
+ .nav-bar a:hover {
118
+ color: var(--primary-color);
119
+ }
120
+
121
+ h1 {
122
+ color: #fff;
123
+ margin: 0;
124
+ }
125
+
126
+ #chat-log {
127
+ width: 100%;
128
+ height: 400px;
129
+ border: 1px solid #ccc;
130
+ border-radius: 10px;
131
+ overflow-y: scroll;
132
+ padding: 20px;
133
+ margin-bottom: 20px;
134
+ background-color: #fff;
135
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
136
+ }
137
+
138
+ #user-input {
139
+ width: 100%;
140
+ padding: 15px;
141
+ margin-bottom: 15px;
142
+ border: 1px solid #ccc;
143
+ border-radius: 5px;
144
+ font-size: 16px;
145
+ }
146
+
147
+ .button-group {
148
+ width: 100%;
149
+ display: flex;
150
+ justify-content: space-between;
151
+ }
152
+
153
+ button {
154
+ padding: 12px 25px;
155
+ border: none;
156
+ border-radius: 5px;
157
+ cursor: pointer;
158
+ font-weight: 600;
159
+ transition: all 0.3s ease;
160
+ }
161
+
162
+ #start-voice {
163
+ background-color: var(--primary-color);
164
+ color: #fff;
165
+ }
166
+
167
+ #send-text {
168
+ background-color: var(--accent-color);
169
+ color: #fff;
170
+ }
171
+
172
+ button:hover {
173
+ transform: translateY(-3px);
174
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
175
+ }
176
+
177
+ .message {
178
+ margin-bottom: 15px;
179
+ padding: 10px 15px;
180
+ border-radius: 10px;
181
+ max-width: 80%;
182
+ }
183
+
184
+ .user-message {
185
+ background-color: #e6f3ff;
186
+ align-self: flex-end;
187
+ margin-left: auto;
188
+ }
189
+
190
+ .ai-message {
191
+ background-color: #f0f0f0;
192
+ align-self: flex-start;
193
+ }
194
+
195
+ #listening-indicator {
196
+ display: none;
197
+ color: var(--primary-color);
198
+ font-weight: bold;
199
+ text-align: center;
200
+ margin-top: 10px;
201
+ }
202
+
203
+ .pulse {
204
+ animation: pulse 1.5s infinite;
205
+ }
206
+
207
+ @keyframes pulse {
208
+ 0% {
209
+ opacity: 0.5;
210
+ }
211
+ 50% {
212
+ opacity: 1;
213
+ }
214
+ 100% {
215
+ opacity: 0.5;
216
+ }
217
+ }
218
+ </style>
219
+ </head>
220
+ <body>
221
+ <video autoplay muted loop id="bg-video">
222
+ <source src="../static/Voice-chat.mp4" type="video/mp4">
223
+ Your browser does not support HTML5 video.
224
+ </video>
225
+
226
+ <header>
227
+ <div class="header-content">
228
+ <div class="logo"><img src="../static/smart-learn.jpeg" alt="" style="text-align: left;">SmartLearn</div>
229
+ <h1>AI Voice Chat</h1>
230
+ </div>
231
+ <nav class="nav-bar">
232
+ <ul>
233
+ <li><a href="{{ url_for('student') }}"><img src="https://cdn-icons-png.flaticon.com/512/1946/1946488.png" alt="Home">Home</a></li>
234
+ <li><a href="{{ url_for('student') }}#ai-powered-tools"><img src="https://www.kalupurbank.com/wp-content/uploads/2023/02/robot-chatbot-icon-sign-free-vector.webp" alt="Home">Ai Tools</a></li>
235
+ <li><a href="{{ url_for('homework') }}"><img src="https://cdn-icons-png.flaticon.com/512/1828/1828919.png" alt="Homework">Homework</a></li>
236
+ <li><a href="{{ url_for('student_courses') }}"><img src="https://cdn-icons-png.flaticon.com/512/1048/1048953.png" alt="Courses">Courses</a></li>
237
+ <li><a href="{{ url_for('speak') }}"><img src="https://cdn-icons-png.flaticon.com/512/4712/4712026.png" alt="Speak With AI">Speak With AI</a></li>
238
+ <li><a href="{{ url_for('summarise_video') }}"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/YouTube_full-color_icon_%282017%29.svg/1280px-YouTube_full-color_icon_%282017%29.svg.png" alt="Ssummarise_video">summarise_video</a></li>
239
+ </ul>
240
+ </nav>
241
+ </header>
242
+
243
+ <div class="container">
244
+ <div id="chat-log">
245
+ <div class="message ai-message"><strong>AI:</strong> I'm a speaking Assistant, interact with me to enhance your speaking skills.</div>
246
+ </div>
247
+ <textarea id="user-input" rows="3" placeholder="Type your message here or click 'Start Voice Input' to speak..."></textarea>
248
+ <div class="button-group">
249
+ <button id="start-voice"><i class="fas fa-microphone"></i> Start Voice Input</button>
250
+ <button id="send-text"><i class="fas fa-paper-plane"></i> Send Text</button>
251
+ </div>
252
+ <div id="listening-indicator">Listening... Speak now</div>
253
+ </div>
254
+
255
+ <script>
256
+ const chatLog = document.getElementById('chat-log');
257
+ const userInput = document.getElementById('user-input');
258
+ const startVoiceBtn = document.getElementById('start-voice');
259
+ const sendTextBtn = document.getElementById('send-text');
260
+ const listeningIndicator = document.getElementById('listening-indicator');
261
+
262
+ let recognition;
263
+
264
+ if ('webkitSpeechRecognition' in window) {
265
+ recognition = new webkitSpeechRecognition();
266
+ recognition.continuous = false;
267
+ recognition.interimResults = true;
268
+ recognition.lang = 'en-US';
269
+
270
+ recognition.onstart = function() {
271
+ listeningIndicator.style.display = 'block';
272
+ listeningIndicator.classList.add('pulse');
273
+ startVoiceBtn.disabled = true;
274
+ };
275
+
276
+ recognition.onend = function() {
277
+ listeningIndicator.style.display = 'none';
278
+ listeningIndicator.classList.remove('pulse');
279
+ startVoiceBtn.disabled = false;
280
+ };
281
+
282
+ recognition.onresult = function(event) {
283
+ const transcript = Array.from(event.results)
284
+ .map(result => result[0].transcript)
285
+ .join('');
286
+
287
+ userInput.value = transcript;
288
+
289
+ if (event.results[0].isFinal) {
290
+ sendMessage(transcript);
291
+ recognition.stop();
292
+ }
293
+ };
294
+
295
+ recognition.onerror = function(event) {
296
+ console.error('Speech recognition error:', event.error);
297
+ listeningIndicator.style.display = 'none';
298
+ listeningIndicator.classList.remove('pulse');
299
+ startVoiceBtn.disabled = false;
300
+ };
301
+ } else {
302
+ console.log('Speech recognition not supported');
303
+ startVoiceBtn.disabled = true;
304
+ }
305
+
306
+ startVoiceBtn.addEventListener('click', () => {
307
+ recognition.start();
308
+ });
309
+
310
+ sendTextBtn.addEventListener('click', () => {
311
+ sendMessage(userInput.value);
312
+ });
313
+
314
+ function sendMessage(message) {
315
+ if (message.trim() === '') return;
316
+
317
+ appendToChatLog('You', message);
318
+
319
+ fetch('/chat', {
320
+ method: 'POST',
321
+ headers: {
322
+ 'Content-Type': 'application/json',
323
+ },
324
+ body: JSON.stringify({ message: message }),
325
+ })
326
+ .then(response => response.json())
327
+ .then(data => {
328
+ appendToChatLog('AI', data.response);
329
+ speakResponse(data.response);
330
+ })
331
+ .catch(error => console.error('Error:', error));
332
+
333
+ userInput.value = '';
334
+ }
335
+
336
+ function appendToChatLog(sender, message) {
337
+ const messageElement = document.createElement('div');
338
+ messageElement.classList.add('message', sender === 'You' ? 'user-message' : 'ai-message');
339
+ messageElement.innerHTML = `<strong>${sender}:</strong> ${message}`;
340
+ chatLog.appendChild(messageElement);
341
+ chatLog.scrollTop = chatLog.scrollHeight;
342
+ }
343
+
344
+ function speakResponse(message) {
345
+ const speech = new SpeechSynthesisUtterance(message);
346
+ speech.lang = 'en-US';
347
+ window.speechSynthesis.speak(speech);
348
+ }
349
+
350
+ </script>
351
+ </body>
352
+ </html>