Hugging Face's logo

Spaces:
suvradip2000
/
ASR
Sleeping

App Files Community
suvradip2000 commited on
Commit
2773b8c
·
verified ·
1 Parent(s): a9bdab6

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +31 -16
index.html CHANGED
@@ -1,7 +1,7 @@
1
  <!DOCTYPE html>
2
  <html>
3
  <head>
4
- <title>Speech-to-Text Translator</title>
5
  <!-- Add Bootstrap CSS link here -->
6
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css">
7
  <style>
@@ -17,7 +17,7 @@
17
  }
18
 
19
  #header {
20
- background-color: #4D2B8F;
21
  color: #fff;
22
  padding: 20px;
23
  text-align: center;
@@ -63,6 +63,10 @@
63
  border-radius: 5px;
64
  resize: vertical;
65
  }
 
 
 
 
66
 
67
  </style>
68
  </head>
@@ -87,8 +91,9 @@
87
  </div>
88
 
89
  <div class="form-group">
90
- <button class="btn btn-primary" id="recordButton">Start Recording</button>
91
  <button class="btn btn-secondary" id="submitButton">Transcribe</button>
 
92
  </div>
93
 
94
  <div class="form-group">
@@ -109,7 +114,7 @@
109
  const recordButton = document.getElementById("recordButton");
110
  const submitButton = document.getElementById("submitButton");
111
  const languageSelect = document.getElementById("languageSelect");
112
-
113
  const outputText = document.getElementById("outputText");
114
 
115
  recordButton.addEventListener("click", function () {
@@ -162,7 +167,7 @@
162
  formData.append("audio", uploadedFile, uploadedFile.name);
163
  }
164
 
165
- outputText.style.display="block";
166
 
167
  formData.append("language", languageSelect.value);
168
 
@@ -173,7 +178,7 @@ outputText.style.display="block";
173
  .then((response) => response.json())
174
  .then((data) => {
175
  if (data.success) {
176
- outputText.value = "Translated Text : " + data.language;
177
  } else {
178
  outputText.value = data.message;
179
  }
@@ -183,20 +188,30 @@ outputText.style.display="block";
183
  outputText.value = "Backend communication failed.";
184
  });
185
 
186
- if (recordedAudioBlob) {
187
- const downloadLink = document.createElement("a");
188
- downloadLink.href = URL.createObjectURL(recordedAudioBlob);
189
- downloadLink.download = "recorded_audio.wav";
190
- downloadLink.style.display = "none";
191
- document.body.appendChild(downloadLink);
192
- downloadLink.click();
193
- URL.revokeObjectURL(downloadLink.href);
194
- document.body.removeChild(downloadLink);
195
- }
196
  } else {
197
  outputText.value = "Please record audio or upload a file and select a language before submitting.";
198
  }
199
  });
 
 
 
 
 
 
 
 
 
 
200
  </script>
201
  </body>
202
  </html>
 
1
  <!DOCTYPE html>
2
  <html>
3
  <head>
4
+ <title>ASR</title>
5
  <!-- Add Bootstrap CSS link here -->
6
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css">
7
  <style>
 
17
  }
18
 
19
  #header {
20
+ background-color: #101725;
21
  color: #fff;
22
  padding: 20px;
23
  text-align: center;
 
63
  border-radius: 5px;
64
  resize: vertical;
65
  }
66
+
67
+ #playButton {
68
+ color: #fff;
69
+ }
70
 
71
  </style>
72
  </head>
 
91
  </div>
92
 
93
  <div class="form-group">
94
+ <button class="btn btn-danger" id="recordButton">Start Recording</button>
95
  <button class="btn btn-secondary" id="submitButton">Transcribe</button>
96
+ <button class="btn btn-info" id="playButton">Play Recorded Audio</button>
97
  </div>
98
 
99
  <div class="form-group">
 
114
  const recordButton = document.getElementById("recordButton");
115
  const submitButton = document.getElementById("submitButton");
116
  const languageSelect = document.getElementById("languageSelect");
117
+ const playButton = document.getElementById("playButton");
118
  const outputText = document.getElementById("outputText");
119
 
120
  recordButton.addEventListener("click", function () {
 
167
  formData.append("audio", uploadedFile, uploadedFile.name);
168
  }
169
 
170
+ outputText.style.display="block";
171
 
172
  formData.append("language", languageSelect.value);
173
 
 
178
  .then((response) => response.json())
179
  .then((data) => {
180
  if (data.success) {
181
+ outputText.value = "Transcribed Text : " + data.language;
182
  } else {
183
  outputText.value = data.message;
184
  }
 
188
  outputText.value = "Backend communication failed.";
189
  });
190
 
191
+ // if (recordedAudioBlob) {
192
+ // const downloadLink = document.createElement("a");
193
+ // downloadLink.href = URL.createObjectURL(recordedAudioBlob);
194
+ // downloadLink.download = "recorded_audio.wav";
195
+ // downloadLink.style.display = "none";
196
+ // document.body.appendChild(downloadLink);
197
+ // downloadLink.click();
198
+ // URL.revokeObjectURL(downloadLink.href);
199
+ // document.body.removeChild(downloadLink);
200
+ // }
201
  } else {
202
  outputText.value = "Please record audio or upload a file and select a language before submitting.";
203
  }
204
  });
205
+
206
+ playButton.addEventListener("click", function () {
207
+ if (recordedAudioBlob) {
208
+ const audioURL = URL.createObjectURL(recordedAudioBlob);
209
+ const audio = new Audio(audioURL);
210
+ audio.play();
211
+ } else {
212
+ outputText.value = "No recorded audio available.";
213
+ }
214
+ });
215
  </script>
216
  </body>
217
  </html>