Hugging Face's logo

Spaces:
akpande2
/
Aurator_test
Paused

App Files Community
akpande2 commited on
Commit
2da1bfd
·
verified ·
1 Parent(s): d6711ee

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +450 -0
index.html ADDED
@@ -0,0 +1,450 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Aurator - AI Speech Coach</title>
7
+ <style>
8
+ * { margin: 0; padding: 0; box-sizing: border-box; }
9
+
10
+ body {
11
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
12
+ background: linear-gradient(135deg, #1A1A2E 0%, #16213E 50%, #0F3460 100%);
13
+ color: white;
14
+ min-height: 100vh;
15
+ padding: 20px;
16
+ }
17
+
18
+ .container {
19
+ max-width: 900px;
20
+ margin: 0 auto;
21
+ padding: 40px;
22
+ background: rgba(22, 33, 62, 0.9);
23
+ border-radius: 24px;
24
+ box-shadow: 0 8px 32px rgba(0,0,0,0.4);
25
+ }
26
+
27
+ h1 {
28
+ text-align: center;
29
+ font-size: 2.5em;
30
+ margin-bottom: 10px;
31
+ background: linear-gradient(135deg, #E94560, #FF6B9D);
32
+ -webkit-background-clip: text;
33
+ -webkit-text-fill-color: transparent;
34
+ background-clip: text;
35
+ }
36
+
37
+ .subtitle {
38
+ text-align: center;
39
+ color: rgba(255,255,255,0.7);
40
+ margin-bottom: 40px;
41
+ font-size: 1.1em;
42
+ }
43
+
44
+ .avatar-selector {
45
+ display: flex;
46
+ gap: 20px;
47
+ justify-content: center;
48
+ margin: 30px 0;
49
+ }
50
+
51
+ .avatar-option {
52
+ flex: 1;
53
+ max-width: 200px;
54
+ padding: 30px 20px;
55
+ border: 3px solid rgba(255,255,255,0.1);
56
+ border-radius: 20px;
57
+ cursor: pointer;
58
+ transition: all 0.3s ease;
59
+ text-align: center;
60
+ background: rgba(255,255,255,0.05);
61
+ }
62
+
63
+ .avatar-option:hover {
64
+ transform: translateY(-5px);
65
+ border-color: rgba(255, 107, 157, 0.5);
66
+ }
67
+
68
+ .avatar-option.selected {
69
+ border-color: #FF6B9D;
70
+ background: linear-gradient(135deg, rgba(233, 69, 96, 0.2), rgba(255, 107, 157, 0.2));
71
+ box-shadow: 0 0 30px rgba(255, 107, 157, 0.3);
72
+ }
73
+
74
+ .avatar-icon { font-size: 3em; margin-bottom: 10px; }
75
+ .avatar-name { font-size: 1.3em; font-weight: bold; margin-bottom: 5px; }
76
+ .avatar-desc { font-size: 0.9em; color: rgba(255,255,255,0.6); }
77
+
78
+ .recording-section {
79
+ text-align: center;
80
+ margin: 40px 0;
81
+ padding: 30px;
82
+ background: rgba(0,0,0,0.2);
83
+ border-radius: 20px;
84
+ }
85
+
86
+ .button-group {
87
+ display: flex;
88
+ gap: 15px;
89
+ justify-content: center;
90
+ flex-wrap: wrap;
91
+ margin: 20px 0;
92
+ }
93
+
94
+ button {
95
+ background: linear-gradient(135deg, #E94560, #FF6B9D);
96
+ color: white;
97
+ border: none;
98
+ padding: 18px 35px;
99
+ font-size: 16px;
100
+ font-weight: 600;
101
+ border-radius: 12px;
102
+ cursor: pointer;
103
+ transition: all 0.3s ease;
104
+ box-shadow: 0 4px 15px rgba(233, 69, 96, 0.3);
105
+ }
106
+
107
+ button:hover:not(:disabled) {
108
+ transform: translateY(-2px);
109
+ box-shadow: 0 6px 20px rgba(233, 69, 96, 0.4);
110
+ }
111
+
112
+ button:disabled {
113
+ opacity: 0.5;
114
+ cursor: not-allowed;
115
+ background: #555;
116
+ }
117
+
118
+ button.stop { background: linear-gradient(135deg, #FFA500, #FFB84D); }
119
+ button.secondary { background: linear-gradient(135deg, #4A90E2, #5FA8FF); }
120
+
121
+ #status {
122
+ margin: 25px 0;
123
+ padding: 20px;
124
+ background: rgba(255,255,255,0.1);
125
+ border-radius: 12px;
126
+ font-size: 1.1em;
127
+ border-left: 4px solid #FF6B9D;
128
+ }
129
+
130
+ .loading {
131
+ display: inline-block;
132
+ width: 20px;
133
+ height: 20px;
134
+ border: 3px solid rgba(255,255,255,0.3);
135
+ border-radius: 50%;
136
+ border-top-color: #FF6B9D;
137
+ animation: spin 1s ease-in-out infinite;
138
+ }
139
+
140
+ @keyframes spin { to { transform: rotate(360deg); } }
141
+
142
+ #results {
143
+ margin-top: 40px;
144
+ padding: 30px;
145
+ background: rgba(255,255,255,0.05);
146
+ border-radius: 20px;
147
+ display: none;
148
+ }
149
+
150
+ .score-card {
151
+ text-align: center;
152
+ padding: 30px;
153
+ margin: 20px 0;
154
+ background: linear-gradient(135deg, rgba(233, 69, 96, 0.2), rgba(255, 107, 157, 0.1));
155
+ border-radius: 20px;
156
+ border: 2px solid rgba(255, 107, 157, 0.3);
157
+ }
158
+
159
+ .score-number {
160
+ font-size: 4em;
161
+ font-weight: bold;
162
+ background: linear-gradient(135deg, #50C878, #5FDC8A);
163
+ -webkit-background-clip: text;
164
+ -webkit-text-fill-color: transparent;
165
+ }
166
+
167
+ .metrics-grid {
168
+ display: grid;
169
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
170
+ gap: 15px;
171
+ margin: 25px 0;
172
+ }
173
+
174
+ .metric-card {
175
+ padding: 20px;
176
+ background: rgba(0,0,0,0.3);
177
+ border-radius: 12px;
178
+ border-left: 4px solid #4A90E2;
179
+ }
180
+
181
+ .metric-label {
182
+ font-size: 0.9em;
183
+ color: rgba(255,255,255,0.6);
184
+ margin-bottom: 5px;
185
+ }
186
+
187
+ .metric-value {
188
+ font-size: 1.5em;
189
+ font-weight: bold;
190
+ color: #4A90E2;
191
+ }
192
+
193
+ .section { margin: 30px 0; }
194
+
195
+ .section-title {
196
+ font-size: 1.5em;
197
+ margin-bottom: 15px;
198
+ color: #FF6B9D;
199
+ }
200
+
201
+ .transcript-box {
202
+ background: rgba(0,0,0,0.3);
203
+ padding: 20px;
204
+ border-radius: 12px;
205
+ line-height: 1.8;
206
+ }
207
+
208
+ .improved-box {
209
+ background: linear-gradient(135deg, rgba(80, 200, 120, 0.2), rgba(95, 220, 138, 0.1));
210
+ padding: 20px;
211
+ border-radius: 12px;
212
+ border: 2px solid rgba(80, 200, 120, 0.3);
213
+ line-height: 1.8;
214
+ }
215
+
216
+ .tips-list {
217
+ list-style: none;
218
+ padding: 0;
219
+ }
220
+
221
+ .tips-list li {
222
+ padding: 15px 15px 15px 50px;
223
+ margin: 10px 0;
224
+ background: rgba(0,0,0,0.3);
225
+ border-radius: 12px;
226
+ border-left: 4px solid #FFA500;
227
+ position: relative;
228
+ }
229
+
230
+ .tips-list li::before {
231
+ content: attr(data-number);
232
+ position: absolute;
233
+ left: 15px;
234
+ top: 50%;
235
+ transform: translateY(-50%);
236
+ width: 25px;
237
+ height: 25px;
238
+ background: #FFA500;
239
+ border-radius: 50%;
240
+ display: flex;
241
+ align-items: center;
242
+ justify-content: center;
243
+ font-weight: bold;
244
+ }
245
+
246
+ audio {
247
+ width: 100%;
248
+ margin: 15px 0;
249
+ border-radius: 12px;
250
+ }
251
+
252
+ @media (max-width: 768px) {
253
+ .container { padding: 20px; }
254
+ h1 { font-size: 2em; }
255
+ .avatar-selector { flex-direction: column; }
256
+ .avatar-option { max-width: 100%; }
257
+ button { width: 100%; }
258
+ }
259
+ </style>
260
+ </head>
261
+ <body>
262
+ <div class="container">
263
+ <h1>🎤 Aurator</h1>
264
+ <div class="subtitle">AI-Powered Speech Coach</div>
265
+
266
+ <div class="avatar-selector">
267
+ <div class="avatar-option selected" onclick="selectAvatar('male')" id="alex">
268
+ <div class="avatar-icon">👨</div>
269
+ <div class="avatar-name">Alex</div>
270
+ <div class="avatar-desc">Energetic & Clear</div>
271
+ </div>
272
+ <div class="avatar-option" onclick="selectAvatar('female')" id="maya">
273
+ <div class="avatar-icon">👩</div>
274
+ <div class="avatar-name">Maya</div>
275
+ <div class="avatar-desc">Warm & Encouraging</div>
276
+ </div>
277
+ </div>
278
+
279
+ <div class="recording-section">
280
+ <div class="button-group">
281
+ <button onclick="startRecording()" id="recordBtn">🎙️ Start Recording</button>
282
+ <button onclick="stopRecording()" id="stopBtn" class="stop" disabled>⏹️ Stop Recording</button>
283
+ <button onclick="analyzeAudio()" id="analyzeBtn" class="secondary" disabled>🎯 Analyze Speech</button>
284
+ </div>
285
+ <div id="status">Ready to record. Click "Start Recording" and speak!</div>
286
+ </div>
287
+
288
+ <div id="results"></div>
289
+ </div>
290
+
291
+ <script>
292
+ let mediaRecorder;
293
+ let audioChunks = [];
294
+ let audioBlob;
295
+ let selectedAvatar = 'male';
296
+
297
+ function selectAvatar(gender) {
298
+ selectedAvatar = gender;
299
+ document.getElementById('alex').classList.remove('selected');
300
+ document.getElementById('maya').classList.remove('selected');
301
+ document.getElementById(gender === 'male' ? 'alex' : 'maya').classList.add('selected');
302
+ document.getElementById('status').innerHTML = `✅ ${gender === 'male' ? 'Alex' : 'Maya'} selected as your coach!`;
303
+ }
304
+
305
+ async function startRecording() {
306
+ try {
307
+ const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
308
+ mediaRecorder = new MediaRecorder(stream);
309
+ audioChunks = [];
310
+
311
+ mediaRecorder.ondataavailable = (event) => {
312
+ audioChunks.push(event.data);
313
+ };
314
+
315
+ mediaRecorder.onstop = () => {
316
+ audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
317
+ stream.getTracks().forEach(track => track.stop());
318
+ document.getElementById('analyzeBtn').disabled = false;
319
+ document.getElementById('status').innerHTML = '✅ Recording complete! Click "Analyze Speech" to get feedback.';
320
+ };
321
+
322
+ mediaRecorder.start();
323
+ document.getElementById('recordBtn').disabled = true;
324
+ document.getElementById('stopBtn').disabled = false;
325
+ document.getElementById('status').innerHTML = '🎙️ <strong>Recording...</strong> Speak clearly!';
326
+
327
+ } catch (err) {
328
+ document.getElementById('status').innerHTML = '❌ Microphone access denied!';
329
+ }
330
+ }
331
+
332
+ function stopRecording() {
333
+ if (mediaRecorder && mediaRecorder.state !== 'inactive') {
334
+ mediaRecorder.stop();
335
+ document.getElementById('recordBtn').disabled = false;
336
+ document.getElementById('stopBtn').disabled = true;
337
+ }
338
+ }
339
+
340
+ async function analyzeAudio() {
341
+ const formData = new FormData();
342
+ formData.append('audio_file', audioBlob, 'recording.webm');
343
+ formData.append('avatar_gender', selectedAvatar);
344
+
345
+ document.getElementById('status').innerHTML = '<span class="loading"></span> Analyzing... This may take 30-60 seconds.';
346
+ document.getElementById('analyzeBtn').disabled = true;
347
+
348
+ try {
349
+ const response = await fetch('/analyze', {
350
+ method: 'POST',
351
+ body: formData
352
+ });
353
+
354
+ if (!response.ok) throw new Error(`Server error: ${response.status}`);
355
+ const data = await response.json();
356
+ displayResults(data);
357
+
358
+ } catch (err) {
359
+ document.getElementById('status').innerHTML = '❌ Analysis failed! ' + err.message;
360
+ }
361
+
362
+ document.getElementById('analyzeBtn').disabled = false;
363
+ }
364
+
365
+ function displayResults(data) {
366
+ const score = (data.overall_score * 10).toFixed(1);
367
+ let message = '💪 Keep Practicing!';
368
+ if (score >= 85) message = '🎉 Outstanding!';
369
+ else if (score >= 70) message = '👏 Great Job!';
370
+
371
+ document.getElementById('results').innerHTML = `
372
+ <div class="score-card">
373
+ <div style="font-size: 2em;">${message}</div>
374
+ <div class="score-number">${score}</div>
375
+ <div style="color: rgba(255,255,255,0.7); margin-top: 10px;">Overall Score</div>
376
+ </div>
377
+
378
+ <div class="section">
379
+ <div class="section-title">🎯 Vocal Delivery</div>
380
+ <div class="metrics-grid">
381
+ <div class="metric-card">
382
+ <div class="metric-label">Pacing</div>
383
+ <div class="metric-value">${data.pacing.words_per_minute.toFixed(0)} WPM</div>
384
+ <div class="metric-label">${data.pacing.category}</div>
385
+ </div>
386
+ <div class="metric-card" style="border-left-color: #9D4EDD;">
387
+ <div class="metric-label">Prosody</div>
388
+ <div class="metric-value" style="color: #9D4EDD;">${data.prosody.category}</div>
389
+ </div>
390
+ <div class="metric-card" style="border-left-color: #FFA500;">
391
+ <div class="metric-label">Filler Words</div>
392
+ <div class="metric-value" style="color: #FFA500;">${Object.values(data.filler_words).reduce((a,b)=>a+b,0)}</div>
393
+ </div>
394
+ <div class="metric-card" style="border-left-color: #E94560;">
395
+ <div class="metric-label">Pauses</div>
396
+ <div class="metric-value" style="color: #E94560;">${data.silence_detection.count}</div>
397
+ </div>
398
+ </div>
399
+ </div>
400
+
401
+ <div class="section">
402
+ <div class="section-title">📝 Content</div>
403
+ <div class="metrics-grid">
404
+ <div class="metric-card" style="border-left-color: #50C878;">
405
+ <div class="metric-label">Vocabulary</div>
406
+ <div class="metric-value" style="color: #50C878;">${data.vocabulary.score}/100</div>
407
+ </div>
408
+ <div class="metric-card" style="border-left-color: #4A90E2;">
409
+ <div class="metric-label">Flow</div>
410
+ <div class="metric-value" style="color: #4A90E2;">${data.logical_flow.score}/100</div>
411
+ </div>
412
+ <div class="metric-card" style="border-left-color: #FF6B9D;">
413
+ <div class="metric-label">Coherence</div>
414
+ <div class="metric-value" style="color: #FF6B9D;">${data.coherence.score}/100</div>
415
+ </div>
416
+ </div>
417
+ </div>
418
+
419
+ <div class="section">
420
+ <div class="section-title">📖 Transcript</div>
421
+ <div class="transcript-box">${data.transcription}</div>
422
+ </div>
423
+
424
+ <div class="section">
425
+ <div class="section-title">✨ Improved Version</div>
426
+ <div class="improved-box">${data.improved_transcript}</div>
427
+ ${data.improved_audio_url ? `<audio controls src="${data.improved_audio_url}"></audio>` : ''}
428
+ </div>
429
+
430
+ <div class="section">
431
+ <div class="section-title">💡 Coaching Tips</div>
432
+ <ul class="tips-list">
433
+ ${data.personalized_tips.map((tip, i) => `<li data-number="${i+1}">${tip}</li>`).join('')}
434
+ </ul>
435
+ ${data.avatar_audio_url ? `
436
+ <div style="margin-top: 20px;">
437
+ <div class="section-title">🎙️ Your Coach</div>
438
+ <audio controls src="${data.avatar_audio_url}"></audio>
439
+ </div>
440
+ ` : ''}
441
+ </div>
442
+ `;
443
+
444
+ document.getElementById('results').style.display = 'block';
445
+ document.getElementById('status').innerHTML = '✅ Analysis complete!';
446
+ document.getElementById('results').scrollIntoView({ behavior: 'smooth' });
447
+ }
448
+ </script>
449
+ </body>
450
+ </html>