lmz radames commited on
Commit
e521042
1 Parent(s): 1bd2f52

minor ui change (#2)

Browse files

- minor ui change (66e7980a07d45615c41b7d2ad195f454121bd78e)


Co-authored-by: Radamés Ajna <radames@users.noreply.huggingface.co>

Files changed (1) hide show
  1. index.html +11 -6
index.html CHANGED
@@ -141,7 +141,9 @@
141
  const { output } = result;
142
  const text = output.map((segment) => segment.dr.text).join(" ");
143
  console.log(text);
144
- document.getElementById("output").textContent = text;
 
 
145
  })
146
  .catch((error) => {
147
  console.error(error);
@@ -295,18 +297,21 @@
295
  <button
296
  id="detect"
297
  disabled
298
- class="bg-orange-900 hover:bg-orange-800 text-white font-normal py-2 px-4 rounded disabled:opacity-75 disabled:cursor-not-allowed"
299
  >
300
  Transcribe Audio
301
  </button>
302
  </div>
303
  <div>
304
  <h3 class="font-medium">Transcription:</h3>
305
-
306
  <div
307
- id="output"
308
- class="min-h-[100px] bg-slate-500 text-white p-4 rounded-md"
309
- ></div>
 
 
 
 
310
  </div>
311
  </main>
312
  </body>
 
141
  const { output } = result;
142
  const text = output.map((segment) => segment.dr.text).join(" ");
143
  console.log(text);
144
+ document.querySelector("#output-status").hidden = true;
145
+ document.querySelector("#output-generation").hidden = false;
146
+ document.querySelector("#output-generation").textContent = text;
147
  })
148
  .catch((error) => {
149
  console.error(error);
 
297
  <button
298
  id="detect"
299
  disabled
300
+ class="bg-gray-700 hover:bg-gray-800 text-white font-normal py-2 px-4 rounded disabled:bg-gray-300 disabled:cursor-not-allowed"
301
  >
302
  Transcribe Audio
303
  </button>
304
  </div>
305
  <div>
306
  <h3 class="font-medium">Transcription:</h3>
 
307
  <div
308
+ class="min-h-[250px] bg-slate-100 text-gray-500 p-4 rounded-md flex flex-col gap-2"
309
+ >
310
+ <p hidden id="output-generation" class="grid-rows-2"></p>
311
+ <span id="output-status" class="m-auto font-light"
312
+ >No transcription results yet</span
313
+ >
314
+ </div>
315
  </div>
316
  </main>
317
  </body>