Hugging Face's logo

Spaces:
jebin2
/
STT
Running

App Files Community
github-actions[bot] commited on
Commit
eec3fb0
·
1 Parent(s): 7f595cd

Auto-deploy from GitHub: f4f6fcb399b97caa19261b1ca5de7b2ca94e5939

Browse files
Files changed (1) hide show
  1. index.html +66 -32
index.html CHANGED
@@ -1,5 +1,6 @@
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">
@@ -38,7 +39,7 @@
38
  left: 0;
39
  width: 100%;
40
  height: 100%;
41
- background:
42
  radial-gradient(circle at 20% 50%, rgba(0, 255, 136, 0.1) 0%, transparent 50%),
43
  radial-gradient(circle at 80% 80%, rgba(255, 0, 255, 0.1) 0%, transparent 50%),
44
  radial-gradient(circle at 40% 20%, rgba(0, 212, 255, 0.1) 0%, transparent 50%);
@@ -65,6 +66,7 @@
65
  opacity: 0;
66
  transform: translateY(-50px);
67
  }
 
68
  to {
69
  opacity: 1;
70
  transform: translateY(0);
@@ -98,8 +100,15 @@
98
  }
99
 
100
  @keyframes glow {
101
- 0%, 100% { opacity: 0.5; }
102
- 50% { opacity: 1; }
 
 
 
 
 
 
 
103
  }
104
 
105
  .subtitle {
@@ -124,6 +133,7 @@
124
  opacity: 0;
125
  transform: translateY(50px);
126
  }
 
127
  to {
128
  opacity: 1;
129
  transform: translateY(0);
@@ -244,8 +254,13 @@
244
  }
245
 
246
  @keyframes fadeIn {
247
- from { opacity: 0; }
248
- to { opacity: 1; }
 
 
 
 
 
249
  }
250
 
251
  tbody tr:hover {
@@ -281,8 +296,15 @@
281
  }
282
 
283
  @keyframes pulse {
284
- 0%, 100% { opacity: 1; }
285
- 50% { opacity: 0.6; }
 
 
 
 
 
 
 
286
  }
287
 
288
  .status-completed {
@@ -362,8 +384,13 @@
362
  }
363
 
364
  @keyframes spin {
365
- 0% { transform: rotate(0deg); }
366
- 100% { transform: rotate(360deg); }
 
 
 
 
 
367
  }
368
 
369
  .loader-text {
@@ -415,6 +442,7 @@
415
  opacity: 0;
416
  transform: translateY(-50px) scale(0.9);
417
  }
 
418
  to {
419
  opacity: 1;
420
  transform: translateY(0) scale(1);
@@ -462,7 +490,7 @@
462
  .code-block {
463
  background: var(--bg);
464
  border: 3px solid var(--accent);
465
- padding: 4rem 1.5rem 1.5rem 1.5rem;
466
  border-radius: 0;
467
  overflow-y: auto;
468
  margin: 1.5rem 2rem 2rem 2rem;
@@ -480,9 +508,9 @@
480
  }
481
 
482
  .copy-btn {
483
- position: absolute;
484
  top: 0.5rem;
485
- right: 0.5rem;
486
  background: var(--accent);
487
  color: var(--bg);
488
  border: 3px solid var(--bg);
@@ -509,11 +537,13 @@
509
  padding: 1rem;
510
  }
511
 
512
- .upload-section, .table-wrapper {
 
513
  box-shadow: 4px 4px 0 var(--primary);
514
  }
515
 
516
- th, td {
 
517
  padding: 1rem 0.5rem;
518
  font-size: 0.9rem;
519
  }
@@ -554,6 +584,7 @@
554
  transform: translateX(400px);
555
  opacity: 0;
556
  }
 
557
  to {
558
  transform: translateX(0);
559
  opacity: 1;
@@ -568,6 +599,7 @@
568
  }
569
  </style>
570
  </head>
 
571
  <body>
572
  <div class="container">
573
  <header>
@@ -602,7 +634,8 @@
602
  </thead>
603
  <tbody id="filesTable">
604
  <tr>
605
- <td colspan="5" class="empty-state">No files uploaded yet. Start by uploading an audio file!</td>
 
606
  </tr>
607
  </tbody>
608
  </table>
@@ -694,7 +727,7 @@
694
  });
695
 
696
  const data = await response.json();
697
-
698
  if (response.ok) {
699
  showNotification('File uploaded successfully! 🎉');
700
  selectedFile = null;
@@ -717,27 +750,27 @@
717
  try {
718
  const response = await fetch(`${API_URL}/files`);
719
  const files = await response.json();
720
-
721
  const tbody = document.getElementById('filesTable');
722
-
723
  if (files.length === 0) {
724
  tbody.innerHTML = '<tr><td colspan="5" class="empty-state">No files uploaded yet. Start by uploading an audio file!</td></tr>';
725
  return;
726
  }
727
-
728
  tbody.innerHTML = files.map(file => {
729
- const captionPreview = file.caption ?
730
- (file.caption.length > 50 ? file.caption.substring(0, 50) + '...' : file.caption) :
731
  '—';
732
-
733
  return `
734
  <tr>
735
  <td><strong>${file.filename}</strong></td>
736
  <td><span class="status status-${file.status}">${file.status.replace('_', ' ')}</span></td>
737
  <td class="caption-cell">
738
- ${file.caption ?
739
- `<button class="btn btn-small btn-secondary" onclick='showCaption(${JSON.stringify(file.caption)})' style="margin-left: 0.5rem;">Show</button>`
740
- : '—'}
741
  </td>
742
  <td>${new Date(file.created_at).toLocaleString()}</td>
743
  <td>${file.processed_at ? new Date(file.processed_at).toLocaleString() : '—'}</td>
@@ -753,7 +786,7 @@
753
  function showCaption(caption) {
754
  const modal = document.getElementById('captionModal');
755
  const codeBlock = document.getElementById('captionCode');
756
-
757
  // Parse JSON if it's a string
758
  let formattedCaption = caption;
759
  try {
@@ -763,7 +796,7 @@
763
  // If not JSON, use as is
764
  formattedCaption = caption;
765
  }
766
-
767
  codeBlock.textContent = formattedCaption;
768
  modal.classList.add('active');
769
  }
@@ -776,12 +809,12 @@
776
  function copyCaption() {
777
  const codeBlock = document.getElementById('captionCode');
778
  const copyBtn = event.target;
779
-
780
  navigator.clipboard.writeText(codeBlock.textContent).then(() => {
781
  const originalText = copyBtn.textContent;
782
  copyBtn.textContent = '✓ Copied!';
783
  copyBtn.classList.add('copied');
784
-
785
  setTimeout(() => {
786
  copyBtn.textContent = originalText;
787
  copyBtn.classList.remove('copied');
@@ -814,13 +847,13 @@
814
  const notification = document.createElement('div');
815
  notification.className = 'notification';
816
  notification.textContent = message;
817
-
818
  if (type === 'error') {
819
  notification.style.background = 'var(--error)';
820
  }
821
-
822
  document.body.appendChild(notification);
823
-
824
  setTimeout(() => {
825
  notification.remove();
826
  }, 4000);
@@ -830,4 +863,5 @@
830
  loadFiles();
831
  </script>
832
  </body>
 
833
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
+
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
39
  left: 0;
40
  width: 100%;
41
  height: 100%;
42
+ background:
43
  radial-gradient(circle at 20% 50%, rgba(0, 255, 136, 0.1) 0%, transparent 50%),
44
  radial-gradient(circle at 80% 80%, rgba(255, 0, 255, 0.1) 0%, transparent 50%),
45
  radial-gradient(circle at 40% 20%, rgba(0, 212, 255, 0.1) 0%, transparent 50%);
 
66
  opacity: 0;
67
  transform: translateY(-50px);
68
  }
69
+
70
  to {
71
  opacity: 1;
72
  transform: translateY(0);
 
100
  }
101
 
102
  @keyframes glow {
103
+
104
+ 0%,
105
+ 100% {
106
+ opacity: 0.5;
107
+ }
108
+
109
+ 50% {
110
+ opacity: 1;
111
+ }
112
  }
113
 
114
  .subtitle {
 
133
  opacity: 0;
134
  transform: translateY(50px);
135
  }
136
+
137
  to {
138
  opacity: 1;
139
  transform: translateY(0);
 
254
  }
255
 
256
  @keyframes fadeIn {
257
+ from {
258
+ opacity: 0;
259
+ }
260
+
261
+ to {
262
+ opacity: 1;
263
+ }
264
  }
265
 
266
  tbody tr:hover {
 
296
  }
297
 
298
  @keyframes pulse {
299
+
300
+ 0%,
301
+ 100% {
302
+ opacity: 1;
303
+ }
304
+
305
+ 50% {
306
+ opacity: 0.6;
307
+ }
308
  }
309
 
310
  .status-completed {
 
384
  }
385
 
386
  @keyframes spin {
387
+ 0% {
388
+ transform: rotate(0deg);
389
+ }
390
+
391
+ 100% {
392
+ transform: rotate(360deg);
393
+ }
394
  }
395
 
396
  .loader-text {
 
442
  opacity: 0;
443
  transform: translateY(-50px) scale(0.9);
444
  }
445
+
446
  to {
447
  opacity: 1;
448
  transform: translateY(0) scale(1);
 
490
  .code-block {
491
  background: var(--bg);
492
  border: 3px solid var(--accent);
493
+ padding: 1.5rem 1.5rem 1.5rem 1.5rem;
494
  border-radius: 0;
495
  overflow-y: auto;
496
  margin: 1.5rem 2rem 2rem 2rem;
 
508
  }
509
 
510
  .copy-btn {
511
+ position: sticky;
512
  top: 0.5rem;
513
+ float: right;
514
  background: var(--accent);
515
  color: var(--bg);
516
  border: 3px solid var(--bg);
 
537
  padding: 1rem;
538
  }
539
 
540
+ .upload-section,
541
+ .table-wrapper {
542
  box-shadow: 4px 4px 0 var(--primary);
543
  }
544
 
545
+ th,
546
+ td {
547
  padding: 1rem 0.5rem;
548
  font-size: 0.9rem;
549
  }
 
584
  transform: translateX(400px);
585
  opacity: 0;
586
  }
587
+
588
  to {
589
  transform: translateX(0);
590
  opacity: 1;
 
599
  }
600
  </style>
601
  </head>
602
+
603
  <body>
604
  <div class="container">
605
  <header>
 
634
  </thead>
635
  <tbody id="filesTable">
636
  <tr>
637
+ <td colspan="5" class="empty-state">No files uploaded yet. Start by uploading an audio file!
638
+ </td>
639
  </tr>
640
  </tbody>
641
  </table>
 
727
  });
728
 
729
  const data = await response.json();
730
+
731
  if (response.ok) {
732
  showNotification('File uploaded successfully! 🎉');
733
  selectedFile = null;
 
750
  try {
751
  const response = await fetch(`${API_URL}/files`);
752
  const files = await response.json();
753
+
754
  const tbody = document.getElementById('filesTable');
755
+
756
  if (files.length === 0) {
757
  tbody.innerHTML = '<tr><td colspan="5" class="empty-state">No files uploaded yet. Start by uploading an audio file!</td></tr>';
758
  return;
759
  }
760
+
761
  tbody.innerHTML = files.map(file => {
762
+ const captionPreview = file.caption ?
763
+ (file.caption.length > 50 ? file.caption.substring(0, 50) + '...' : file.caption) :
764
  '—';
765
+
766
  return `
767
  <tr>
768
  <td><strong>${file.filename}</strong></td>
769
  <td><span class="status status-${file.status}">${file.status.replace('_', ' ')}</span></td>
770
  <td class="caption-cell">
771
+ ${file.caption ?
772
+ `<button class="btn btn-small btn-secondary" onclick='showCaption(${JSON.stringify(file.caption)})' style="margin-left: 0.5rem;">Show</button>`
773
+ : '—'}
774
  </td>
775
  <td>${new Date(file.created_at).toLocaleString()}</td>
776
  <td>${file.processed_at ? new Date(file.processed_at).toLocaleString() : '—'}</td>
 
786
  function showCaption(caption) {
787
  const modal = document.getElementById('captionModal');
788
  const codeBlock = document.getElementById('captionCode');
789
+
790
  // Parse JSON if it's a string
791
  let formattedCaption = caption;
792
  try {
 
796
  // If not JSON, use as is
797
  formattedCaption = caption;
798
  }
799
+
800
  codeBlock.textContent = formattedCaption;
801
  modal.classList.add('active');
802
  }
 
809
  function copyCaption() {
810
  const codeBlock = document.getElementById('captionCode');
811
  const copyBtn = event.target;
812
+
813
  navigator.clipboard.writeText(codeBlock.textContent).then(() => {
814
  const originalText = copyBtn.textContent;
815
  copyBtn.textContent = '✓ Copied!';
816
  copyBtn.classList.add('copied');
817
+
818
  setTimeout(() => {
819
  copyBtn.textContent = originalText;
820
  copyBtn.classList.remove('copied');
 
847
  const notification = document.createElement('div');
848
  notification.className = 'notification';
849
  notification.textContent = message;
850
+
851
  if (type === 'error') {
852
  notification.style.background = 'var(--error)';
853
  }
854
+
855
  document.body.appendChild(notification);
856
+
857
  setTimeout(() => {
858
  notification.remove();
859
  }, 4000);
 
863
  loadFiles();
864
  </script>
865
  </body>
866
+
867
  </html>