Hugging Face's logo

Spaces:
adititewari
/
SoundScripter
Sleeping

App Files Community
Aditi Tewari commited on
Commit
f5dfcf5
·
1 Parent(s): 285d2cf

Update Code

Browse files
Files changed (5) hide show
  1. Dockerfile +1 -1
  2. run.sh +1 -1
  3. soundscripter.html +246 -2
  4. soundscripter_flaskAPI.py → soundscripter_fastAPI.py +0 -0
  5. ss_flaskAPI.py → ss_fastAPI.py +0 -0
Dockerfile CHANGED
@@ -21,4 +21,4 @@ EXPOSE 7860
21
  ENV PYTHONUNBUFFERED 1
22
 
23
  # Command to run the application
24
- CMD ["uvicorn", "soundscripter_flaskAPI:app", "--host", "0.0.0.0", "--port", "7860"]
 
21
  ENV PYTHONUNBUFFERED 1
22
 
23
  # Command to run the application
24
+ CMD ["uvicorn", "soundscripter_fastAPI:app", "--host", "0.0.0.0", "--port", "7860"]
run.sh CHANGED
@@ -1 +1 @@
1
- python -m uvicorn soundscripter_flaskAPI:app --reload
 
1
+ python -m uvicorn soundscripter_fastAPI:app --reload
soundscripter.html CHANGED
@@ -6,23 +6,113 @@
6
  <title>SoundScripter</title>
7
  <!-- Add Bootstrap CSS link here -->
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css">
 
9
  <style>
10
  * {
11
  margin: 10px;
12
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
13
  </style>
14
  </head>
 
15
  <body style="background-color:#daeaf7";>
16
 
 
 
 
 
 
 
 
 
17
  <nav class="navbar" style="background-color:whitesmoke; height:98px; border-radius:30px" >
18
- <div>
19
- <img src="https://huggingface.co/spaces/adititewari/SoundScripter/blob/main/images/wave.jpg" alt="SoundScripter" width="60" height="70" style="margin-top:-5px">
20
  <span class="navbar-brand" style="font-size:35px;"><b>SoundScripter</b></span>
21
  </div>
22
  <h5>Automatic Speech Recognition</h5>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23
  </nav>
24
 
25
  <div class="container mt-5">
 
 
26
  <div class="form-group">
27
  <input type="file" class="form-control" id="audioUpload" style="height: 40px; width: 50%; max-width: 300px;">
28
 
@@ -36,11 +126,125 @@
36
  <textarea class="form-control" id="outputText" rows="5" style="border-radius:15px; margin-top:5%" readonly></textarea>
37
  </div>
38
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
39
 
40
  <!-- Add Bootstrap JS link and any other required scripts here -->
41
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
42
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.min.js"></script>
 
43
  <script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
44
  let isRecording = false;
45
  let recordedChunks = [];
46
  let uploadedFile;
@@ -179,6 +383,46 @@
179
  outputText.value = "Please upload an audio file or record.";
180
  }
181
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
182
  </script>
183
  </body>
184
  </html>
 
6
  <title>SoundScripter</title>
7
  <!-- Add Bootstrap CSS link here -->
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css">
9
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
10
  <style>
11
  * {
12
  margin: 10px;
13
  }
14
+
15
+ body, html {
16
+ margin: 0;
17
+ padding: 0;
18
+ height: 100%;
19
+ }
20
+ .hidden {
21
+ display: none;
22
+ }
23
+
24
+ .container_fp {
25
+ display: flex;
26
+ justify-content: center;
27
+ align-items: center;
28
+ height: 100%;
29
+ }
30
+
31
+ #soundScripter {
32
+ font-family: Arial, sans-serif;
33
+ font-size: 3rem;
34
+ color: #333;
35
+ animation: animateText 3s infinite alternate;
36
+ }
37
+
38
+ @keyframes animateText {
39
+ 0% {
40
+ transform: scale(1);
41
+ }
42
+ 100% {
43
+ transform: scale(1.1);
44
+ }
45
+ }
46
  </style>
47
  </head>
48
+
49
  <body style="background-color:#daeaf7";>
50
 
51
+ <div class="container_fp" id="firstPage">
52
+ <h1 id="soundScripter"><b>SoundScripter</b></h1>
53
+
54
+ <button class="btn btn-danger" id="proceedButton" style="border-radius:30px; position: absolute; top: 55%;}"><b>PROCEED</b></button>
55
+
56
+ </div>
57
+
58
+ <div id="mainPage" class="hidden">
59
  <nav class="navbar" style="background-color:whitesmoke; height:98px; border-radius:30px" >
60
+ <!-- <div>
61
+ <img src="wave.png" alt="SoundScripter" width="60" height="70" style="margin-top:-5px">
62
  <span class="navbar-brand" style="font-size:35px;"><b>SoundScripter</b></span>
63
  </div>
64
  <h5>Automatic Speech Recognition</h5>
65
+ <button class="btn btn-danger" id="LiveASRButton" style="border-radius:30px; position: absolute; top: 55%;}"><b>LIVE ASR</b></button>
66
+
67
+ <li class="nav-item dropdown">
68
+ <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
69
+ Dropdown
70
+ </a>
71
+ <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
72
+ <li><a class="dropdown-item" href="#">Action</a></li>
73
+ <li><a class="dropdown-item" href="#">Another action</a></li>
74
+ <li><hr class="dropdown-divider"></li>
75
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
76
+ </ul>
77
+ </li> -->
78
+
79
+
80
+
81
+ <div style="
82
+ width: 100%;
83
+ display: flex;
84
+ justify-content: space-between; margin-top: -2px;">
85
+ <div>
86
+ <img src="wave.png" alt="SoundScripter" width="60" height="70" style="margin-top:-5px">
87
+ <span class="navbar-brand" style="font-size:35px;"><b>SoundScripter</b></span>
88
+ </div>
89
+ <div style="display: flex;">
90
+
91
+ <div style=" margin-top: 17px;">
92
+ <h5>Automatic Speech Recognition</h5>
93
+ </div>
94
+ <div style="margin-top: 0px;>
95
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0">
96
+ <li style="list-style-type: none;" class="nav-item dropdown">
97
+ <a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
98
+ <b>ASR</b>
99
+ </a>
100
+ <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
101
+ <li><a class="dropdown-item">Static ASR</a></li>
102
+ <li><hr class="dropdown-divider"></li>
103
+ <li><a class="dropdown-item" id="LiveASRButton">Live ASR</a></li>
104
+ </ul>
105
+ </li>
106
+ </ul>
107
+
108
+ </div>
109
+
110
+ </div>
111
  </nav>
112
 
113
  <div class="container mt-5">
114
+ <h1><center><b>STATIC ASR</b></center><h1>
115
+ <span/>
116
  <div class="form-group">
117
  <input type="file" class="form-control" id="audioUpload" style="height: 40px; width: 50%; max-width: 300px;">
118
 
 
126
  <textarea class="form-control" id="outputText" rows="5" style="border-radius:15px; margin-top:5%" readonly></textarea>
127
  </div>
128
  </div>
129
+ </div>
130
+
131
+ <!--Live ASR-->
132
+
133
+ <div id="liveASRPage" class="hidden">
134
+ <nav class="navbar" style="background-color:whitesmoke; height:98px; border-radius:30px" >
135
+ <div style="
136
+ width: 100%;
137
+ display: flex;
138
+ justify-content: space-between; margin-top: -2px;">
139
+ <div>
140
+ <img src="wave.png" alt="SoundScripter" width="60" height="70" style="margin-top:-5px">
141
+ <span class="navbar-brand" style="font-size:35px;"><b>SoundScripter</b></span>
142
+ </div>
143
+ <div style="display: flex;">
144
+
145
+ <div style=" margin-top: 17px;">
146
+ <h5>Automatic Speech Recognition</h5>
147
+ </div>
148
+ <div style="margin-top: 0px;>
149
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0">
150
+ <li style="list-style-type: none;" class="nav-item dropdown">
151
+ <a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
152
+ <b>ASR</b>
153
+ </a>
154
+ <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
155
+ <li><a class="dropdown-item" id="StaticASRButton">Static ASR</a></li>
156
+ <li><hr class="dropdown-divider"></li>
157
+ <li><a class="dropdown-item">Live ASR</a></li>
158
+ </ul>
159
+ </li>
160
+ </ul>
161
+
162
+ </div>
163
+
164
+ </div>
165
+ </nav>
166
+
167
+ <div class="container mt-5">
168
+ <h1><center><b>LIVE ASR</b></center><h1>
169
+ <span/>
170
+ <div class="form-group">
171
+
172
+ <button class="btn" id="startButton" style="background-color: white; border-radius:30px; height:50px; width:150px;"><h3>Record</h3></button>
173
+ </div>
174
+
175
+ <div class="form-group">
176
+ <textarea class="form-control" id="output" rows="5" style="border-radius:15px; margin-top:5%" readonly></textarea>
177
+ </div>
178
+ </div>
179
+ </div>
180
 
181
  <!-- Add Bootstrap JS link and any other required scripts here -->
182
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
183
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.min.js"></script>
184
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
185
  <script>
186
+
187
+
188
+ let proceedClicked = false;
189
+ let liveASRClicked = false;
190
+ let firstPageClicked = false;
191
+ let staticASRClicked = false;
192
+
193
+ function removeFirstPage() {
194
+ const firstPage = document.getElementById('firstPage');
195
+ firstPage.parentNode.removeChild(firstPage);
196
+ }
197
+
198
+ function toggleContent() {
199
+ if (!proceedClicked) {
200
+ removeFirstPage();
201
+ document.getElementById('mainPage').classList.remove('hidden');
202
+ proceedClicked = true;
203
+ }
204
+ }
205
+
206
+ function toggleContent_sa() {
207
+ if (!staticASRClicked) {
208
+ removeMainPage();
209
+ document.getElementById('mainPage').classList.remove('hidden');
210
+ staticASRClicked = true;
211
+ liveASRClicked = false;
212
+ }
213
+ }
214
+
215
+ function removeMainPage() {
216
+ const mainPage = document.getElementById('mainPage');
217
+ mainPage.classList.add('hidden');
218
+ }
219
+
220
+ function toggleContent_la() {
221
+ if (!liveASRClicked) {
222
+ removeMainPage();
223
+ document.getElementById('liveASRPage').classList.remove('hidden');
224
+ liveASRClicked = true;
225
+ staticASRClicked = false;
226
+ }
227
+ }
228
+
229
+ function removeLiveASRPage() {
230
+ const liveASRPage = document.getElementById('liveASRPage');
231
+ liveASRPage.classList.add('hidden');
232
+ }
233
+
234
+ function toggleContent_fp() {
235
+ if (!firstPageClicked) {
236
+ removeLiveASRPage();
237
+ document.getElementById('firstPage').classList.remove('hidden');
238
+ firstPageClicked = true;
239
+ liveASRClicked = false;
240
+ }
241
+ }
242
+
243
+ document.getElementById('proceedButton').addEventListener('click', toggleContent);
244
+ document.getElementById('LiveASRButton').addEventListener('click', toggleContent_la);
245
+ document.getElementById('StaticASRButton').addEventListener('click', toggleContent_sa);
246
+ document.getElementById('StaticASRButton').addEventListener('click', toggleContent_fp);
247
+
248
  let isRecording = false;
249
  let recordedChunks = [];
250
  let uploadedFile;
 
383
  outputText.value = "Please upload an audio file or record.";
384
  }
385
  });
386
+
387
+
388
+
389
+ if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
390
+ const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
391
+ recognition.lang = 'hi-IN'; // Set language to Hindi (India)
392
+
393
+ recognition.continuous = true;
394
+ recognition.interimResults = true;
395
+
396
+ const output = document.getElementById('output');
397
+ const startButton = document.getElementById('startButton');
398
+
399
+ recognition.onresult = (event) => {
400
+ const transcript = Array.from(event.results)
401
+ .map(result => result[0].transcript)
402
+ .join('');
403
+
404
+ // Display the Hindi text
405
+ output.innerText = transcript;
406
+ };
407
+
408
+ startButton.addEventListener('click', () => {
409
+ if (startButton.innerText === 'Stop Recording') {
410
+ recognition.stop();
411
+ startButton.innerText = 'RECORD';
412
+ } else {
413
+ if (recognition.start) {
414
+ recognition.start();
415
+ startButton.innerText = 'Stop Recording';
416
+ } else {
417
+ startButton.innerText = 'Speech Recognition not supported';
418
+ }
419
+ }
420
+ });
421
+ } else {
422
+ document.getElementById('output').innerText = 'Speech Recognition not supported';
423
+ }
424
+
425
+
426
  </script>
427
  </body>
428
  </html>
soundscripter_flaskAPI.py → soundscripter_fastAPI.py RENAMED
File without changes
ss_flaskAPI.py → ss_fastAPI.py RENAMED
File without changes