Hugging Face's logo

Spaces:
usmanyousaf
/
Smart-Audio-Grammar-Tool
Sleeping

App Files Community
usmanyousaf commited on
Commit
2e2bb25
·
verified ·
1 Parent(s): 7918102

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +82 -49
templates/index.html CHANGED
@@ -3,82 +3,99 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Audio Transcription with Grammar and Vocabulary Check</title>
7
  <style>
8
  body {
9
  background-color: black;
10
- font-family: 'Arial', sans-serif;
11
  color: white;
 
12
  padding: 20px;
13
  }
14
- h1, h2, h3 {
15
- color: white;
16
- margin-bottom: 20px;
 
 
 
 
 
 
 
17
  }
 
18
  .container {
19
  max-width: 800px;
20
  margin: 0 auto;
21
  }
22
- .form-label, #recording-status {
23
- color: white;
 
 
 
 
24
  }
25
- select, button, input[type="text"] {
26
- background-color: black;
27
- color: white;
 
 
28
  border: 1px solid lightgray;
29
- padding: 10px;
30
  border-radius: 4px;
31
- transition: all 0.3s ease;
32
- }
33
- select:hover, button:hover, input[type="text"]:hover {
34
- border-color: white;
35
  }
 
36
  .btn {
37
- color: white;
38
  background-color: green;
39
- border: 1px solid lightgray;
40
  padding: 10px 20px;
 
41
  border-radius: 4px;
42
  cursor: pointer;
43
  margin-top: 10px;
 
44
  }
 
45
  .btn:hover {
46
- background-color: #0f9d58;
47
- }
48
- .feedback-section {
49
- margin-top: 30px;
50
- border: 1px solid lightgray;
51
- padding: 15px;
52
- border-radius: 8px;
53
  }
54
- #transcription-result, #grammar-feedback, #vocabulary-feedback {
55
- background-color: black;
56
- border: 1px solid lightgray;
57
  padding: 10px;
 
58
  border-radius: 4px;
59
- min-height: 50px;
60
- color: white;
61
- }
62
- .recording-bar {
63
- width: 0;
64
- height: 5px;
65
- background-color: green;
66
- margin-top: 10px;
67
- border-radius: 2px;
68
- transition: width 0.5s;
69
  }
 
70
  #recording-status {
71
  margin-top: 10px;
72
  font-weight: bold;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
73
  }
74
  </style>
75
  </head>
76
  <body>
77
  <div class="container">
78
- <h1 style="text-align: center;">Audio Transcription with Grammar and Vocabulary Check</h1>
79
-
80
- <!-- Language Selection -->
81
- <div>
82
  <label for="language-select" class="form-label">Select Language:</label>
83
  <select id="language-select" class="form-select">
84
  <option value="en">English</option>
@@ -92,14 +109,15 @@
92
  </select>
93
  </div>
94
 
95
- <!-- Recording Controls -->
96
  <h2>Record Audio</h2>
97
  <button id="start-recording" class="btn">Start Recording</button>
98
  <button id="stop-recording" class="btn" disabled>Stop Recording</button>
99
  <div id="recording-status"></div>
100
- <div id="recording-bar" class="recording-bar"></div>
 
 
 
101
 
102
- <!-- Feedback Sections -->
103
  <div class="feedback-section">
104
  <h3>Transcription Result:</h3>
105
  <div id="transcription-result"></div>
@@ -119,9 +137,9 @@
119
  </div>
120
 
121
  <script>
122
- // JavaScript logic as provided by the user
123
  let mediaRecorder;
124
  let audioChunks = [];
 
125
  document.getElementById("start-recording").onclick = async () => {
126
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
127
  mediaRecorder = new MediaRecorder(stream);
@@ -129,17 +147,26 @@
129
  document.getElementById("recording-status").textContent = "Recording...";
130
  document.getElementById("start-recording").disabled = true;
131
  document.getElementById("stop-recording").disabled = false;
 
132
  let recordingInterval = setInterval(() => {
133
- const currentWidth = parseFloat(document.getElementById("recording-bar").style.width) || 0;
134
- document.getElementById("recording-bar").style.width = Math.min(currentWidth + 5, 100) + '%';
 
 
 
 
135
  }, 1000);
136
- mediaRecorder.ondataavailable = (event) => audioChunks.push(event.data);
 
 
137
  mediaRecorder.onstop = async () => {
138
  clearInterval(recordingInterval);
139
  document.getElementById("recording-bar").style.width = '0%';
140
  const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
141
  const formData = new FormData();
142
  formData.append('audio_data', audioBlob, 'audio.wav');
 
 
143
  const response = await fetch('/transcribe', {
144
  method: 'POST',
145
  body: formData
@@ -153,11 +180,17 @@
153
  document.getElementById("stop-recording").disabled = true;
154
  };
155
  };
156
- document.getElementById("stop-recording").onclick = () => mediaRecorder.stop();
 
 
 
 
157
  document.getElementById("check-grammar").onclick = async () => {
158
  const transcription = document.getElementById("transcription-result").textContent;
159
  const formData = new FormData();
160
  formData.append('transcription', transcription);
 
 
161
  const response = await fetch('/check_grammar', {
162
  method: 'POST',
163
  body: formData
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Live Grammar and Vocabulary Test</title>
7
  <style>
8
  body {
9
  background-color: black;
 
10
  color: white;
11
+ font-family: 'Arial', sans-serif;
12
  padding: 20px;
13
  }
14
+
15
+ h1 {
16
+ text-align: center;
17
+ font-weight: bold;
18
+ margin-bottom: 40px;
19
+ }
20
+
21
+ h2, h3 {
22
+ margin-top: 20px;
23
+ margin-bottom: 10px;
24
  }
25
+
26
  .container {
27
  max-width: 800px;
28
  margin: 0 auto;
29
  }
30
+
31
+ .recording-bar {
32
+ width: 0;
33
+ height: 5px;
34
+ background-color: #4caf50;
35
+ transition: width 0.5s;
36
  }
37
+
38
+ #transcription-result, #grammar-feedback, #vocabulary-feedback {
39
+ background-color: white;
40
+ color: black;
41
+ padding: 15px;
42
  border: 1px solid lightgray;
 
43
  border-radius: 4px;
44
+ margin-bottom: 20px;
45
+ min-height: 50px;
 
 
46
  }
47
+
48
  .btn {
 
49
  background-color: green;
50
+ color: white;
51
  padding: 10px 20px;
52
+ border: none;
53
  border-radius: 4px;
54
  cursor: pointer;
55
  margin-top: 10px;
56
+ transition: background-color 0.3s, transform 0.2s;
57
  }
58
+
59
  .btn:hover {
60
+ transform: scale(1.05);
61
+ background-color: darkgreen;
 
 
 
 
 
62
  }
63
+
64
+ .form-select, input[type="text"] {
 
65
  padding: 10px;
66
+ border: 1px solid lightgray;
67
  border-radius: 4px;
68
+ margin-bottom: 20px;
69
+ width: 100%;
 
 
 
 
 
 
 
 
70
  }
71
+
72
  #recording-status {
73
  margin-top: 10px;
74
  font-weight: bold;
75
+ color: #4caf50;
76
+ }
77
+
78
+ .recording-container {
79
+ margin-top: 10px;
80
+ width: 100%;
81
+ height: 10px;
82
+ background-color: lightgray;
83
+ border-radius: 5px;
84
+ }
85
+
86
+ .feedback-section {
87
+ margin-top: 40px;
88
+ }
89
+
90
+ .feedback-section p {
91
+ margin: 5px 0;
92
  }
93
  </style>
94
  </head>
95
  <body>
96
  <div class="container">
97
+ <h1>Live Grammar and Vocabulary Test</h1>
98
+ <div class="mb-3">
 
 
99
  <label for="language-select" class="form-label">Select Language:</label>
100
  <select id="language-select" class="form-select">
101
  <option value="en">English</option>
 
109
  </select>
110
  </div>
111
 
 
112
  <h2>Record Audio</h2>
113
  <button id="start-recording" class="btn">Start Recording</button>
114
  <button id="stop-recording" class="btn" disabled>Stop Recording</button>
115
  <div id="recording-status"></div>
116
+
117
+ <div class="recording-container">
118
+ <div id="recording-bar" class="recording-bar"></div>
119
+ </div>
120
 
 
121
  <div class="feedback-section">
122
  <h3>Transcription Result:</h3>
123
  <div id="transcription-result"></div>
 
137
  </div>
138
 
139
  <script>
 
140
  let mediaRecorder;
141
  let audioChunks = [];
142
+
143
  document.getElementById("start-recording").onclick = async () => {
144
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
145
  mediaRecorder = new MediaRecorder(stream);
 
147
  document.getElementById("recording-status").textContent = "Recording...";
148
  document.getElementById("start-recording").disabled = true;
149
  document.getElementById("stop-recording").disabled = false;
150
+ document.getElementById("recording-bar").style.width = '0%';
151
  let recordingInterval = setInterval(() => {
152
+ const currentWidth = parseFloat(document.getElementById("recording-bar").style.width);
153
+ const newWidth = Math.min(currentWidth + 5, 100);
154
+ document.getElementById("recording-bar").style.width = newWidth + '%';
155
+ if (newWidth >= 100) {
156
+ clearInterval(recordingInterval);
157
+ }
158
  }, 1000);
159
+ mediaRecorder.ondataavailable = (event) => {
160
+ audioChunks.push(event.data);
161
+ };
162
  mediaRecorder.onstop = async () => {
163
  clearInterval(recordingInterval);
164
  document.getElementById("recording-bar").style.width = '0%';
165
  const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
166
  const formData = new FormData();
167
  formData.append('audio_data', audioBlob, 'audio.wav');
168
+ const selectedLanguage = document.getElementById("language-select").value;
169
+ formData.append('language', selectedLanguage);
170
  const response = await fetch('/transcribe', {
171
  method: 'POST',
172
  body: formData
 
180
  document.getElementById("stop-recording").disabled = true;
181
  };
182
  };
183
+
184
+ document.getElementById("stop-recording").onclick = () => {
185
+ mediaRecorder.stop();
186
+ };
187
+
188
  document.getElementById("check-grammar").onclick = async () => {
189
  const transcription = document.getElementById("transcription-result").textContent;
190
  const formData = new FormData();
191
  formData.append('transcription', transcription);
192
+ const selectedLanguage = document.getElementById("language-select").value;
193
+ formData.append('language', selectedLanguage);
194
  const response = await fetch('/check_grammar', {
195
  method: 'POST',
196
  body: formData