Hugging Face's logo

Spaces:
akhaliq
/
vid-transcript
Running

App Files Community
akhaliq HF Staff commited on
Commit
8783545
·
verified ·
1 Parent(s): 7da38e2

Upload style.css with huggingface_hub

Browse files
Files changed (1) hide show
  1. style.css +372 -43
style.css CHANGED
@@ -1,76 +1,405 @@
1
  * {
2
- box-sizing: border-box;
3
- padding: 0;
4
  margin: 0;
5
- font-family: sans-serif;
 
6
  }
7
 
8
- html,
9
  body {
10
- height: 100%;
 
 
 
11
  }
12
 
13
- body {
14
- padding: 32px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  }
16
 
17
- body,
18
- #container {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  display: flex;
20
- flex-direction: column;
21
  justify-content: center;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
22
  align-items: center;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23
  }
24
 
25
- #container {
26
- position: relative;
27
- gap: 0.4rem;
 
28
 
29
- width: 640px;
30
- height: 640px;
31
- max-width: 100%;
32
- max-height: 100%;
 
 
33
 
34
- border: 2px dashed #D1D5DB;
 
35
  border-radius: 0.75rem;
36
  overflow: hidden;
37
- cursor: pointer;
38
- margin: 1rem;
39
 
40
- background-size: 100% 100%;
41
- background-position: center;
42
- background-repeat: no-repeat;
43
- font-size: 18px;
44
  }
45
 
46
- #upload {
47
- display: none;
 
 
 
 
48
  }
49
 
50
- svg {
51
- pointer-events: none;
 
52
  }
53
 
54
- #example {
55
- font-size: 14px;
56
- text-decoration: underline;
57
- cursor: pointer;
58
  }
59
 
60
- #example:hover {
61
- color: #2563EB;
 
62
  }
63
 
64
- .bounding-box {
65
- position: absolute;
66
- box-sizing: border-box;
67
- border: solid 2px;
68
  }
69
 
70
- .bounding-box-label {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
71
  color: white;
72
- position: absolute;
73
- font-size: 12px;
74
- margin: -16px 0 0 -2px;
75
- padding: 1px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
76
  }
 
1
  * {
 
 
2
  margin: 0;
3
+ padding: 0;
4
+ box-sizing: border-box;
5
  }
6
 
 
7
  body {
8
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
9
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
10
+ min-height: 100vh;
11
+ color: #1f2937;
12
  }
13
 
14
+ .container {
15
+ max-width: 1200px;
16
+ margin: 0 auto;
17
+ padding: 1rem;
18
+ }
19
+
20
+ header {
21
+ text-align: center;
22
+ padding: 2rem 1rem;
23
+ color: white;
24
+ }
25
+
26
+ .header-content h1 {
27
+ font-size: 2.5rem;
28
+ font-weight: 700;
29
+ margin-bottom: 0.5rem;
30
+ }
31
+
32
+ .header-content p {
33
+ font-size: 1.125rem;
34
+ opacity: 0.95;
35
+ }
36
+
37
+ main {
38
+ background: white;
39
+ border-radius: 1rem;
40
+ padding: 2rem;
41
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
42
+ }
43
+
44
+ .upload-section {
45
+ display: grid;
46
+ grid-template-columns: 1fr 300px;
47
+ gap: 2rem;
48
+ margin-bottom: 2rem;
49
+ }
50
+
51
+ .upload-card {
52
+ text-align: center;
53
+ padding: 3rem 2rem;
54
+ border: 2px dashed #d1d5db;
55
+ border-radius: 0.75rem;
56
+ background: #f9fafb;
57
+ }
58
+
59
+ .upload-icon {
60
+ width: 4rem;
61
+ height: 4rem;
62
+ color: #9ca3af;
63
+ margin: 0 auto 1rem;
64
+ }
65
+
66
+ .upload-card h2 {
67
+ font-size: 1.5rem;
68
+ margin-bottom: 0.5rem;
69
+ color: #374151;
70
+ }
71
+
72
+ .upload-card p {
73
+ color: #6b7280;
74
+ margin-bottom: 1.5rem;
75
+ }
76
+
77
+ .settings-card {
78
+ padding: 1.5rem;
79
+ background: #f3f4f6;
80
+ border-radius: 0.75rem;
81
+ }
82
+
83
+ .settings-card h3 {
84
+ margin-bottom: 1rem;
85
+ color: #374151;
86
+ }
87
+
88
+ .setting-item {
89
+ margin-bottom: 1rem;
90
  }
91
 
92
+ .setting-item label {
93
+ display: block;
94
+ margin-bottom: 0.5rem;
95
+ font-size: 0.875rem;
96
+ color: #4b5563;
97
+ font-weight: 500;
98
+ }
99
+
100
+ .setting-item input,
101
+ .setting-item select {
102
+ width: 100%;
103
+ padding: 0.5rem;
104
+ border: 1px solid #d1d5db;
105
+ border-radius: 0.375rem;
106
+ font-size: 0.875rem;
107
+ }
108
+
109
+ .btn-primary {
110
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
111
+ color: white;
112
+ border: none;
113
+ padding: 0.75rem 2rem;
114
+ border-radius: 0.5rem;
115
+ font-weight: 500;
116
+ cursor: pointer;
117
+ transition: transform 0.2s, box-shadow 0.2s;
118
+ }
119
+
120
+ .btn-primary:hover {
121
+ transform: translateY(-2px);
122
+ box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
123
+ }
124
+
125
+ .btn-primary:disabled {
126
+ opacity: 0.5;
127
+ cursor: not-allowed;
128
+ }
129
+
130
+ .btn-secondary {
131
+ background: white;
132
+ color: #4b5563;
133
+ border: 1px solid #d1d5db;
134
+ padding: 0.75rem 1.5rem;
135
+ border-radius: 0.5rem;
136
+ font-weight: 500;
137
+ cursor: pointer;
138
+ transition: background 0.2s;
139
+ }
140
+
141
+ .btn-secondary:hover {
142
+ background: #f9fafb;
143
+ }
144
+
145
+ .btn-analyze {
146
  display: flex;
147
+ align-items: center;
148
  justify-content: center;
149
+ width: 100%;
150
+ padding: 1rem;
151
+ font-size: 1.125rem;
152
+ margin: 2rem 0;
153
+ }
154
+
155
+ .spinner {
156
+ width: 20px;
157
+ height: 20px;
158
+ border: 2px solid #ffffff40;
159
+ border-top-color: white;
160
+ border-radius: 50%;
161
+ animation: spin 0.8s linear infinite;
162
+ margin-left: 0.5rem;
163
+ }
164
+
165
+ @keyframes spin {
166
+ to { transform: rotate(360deg); }
167
+ }
168
+
169
+ .video-info {
170
+ margin-top: 1rem;
171
+ }
172
+
173
+ .file-info {
174
+ display: flex;
175
+ justify-content: space-between;
176
+ padding: 0.75rem;
177
+ background: white;
178
+ border-radius: 0.5rem;
179
+ font-size: 0.875rem;
180
+ }
181
+
182
+ .file-name {
183
+ font-weight: 500;
184
+ color: #374151;
185
+ }
186
+
187
+ .file-size {
188
+ color: #6b7280;
189
+ }
190
+
191
+ .video-preview {
192
+ margin-bottom: 2rem;
193
+ }
194
+
195
+ .video-preview h3 {
196
+ margin-bottom: 1rem;
197
+ color: #374151;
198
+ }
199
+
200
+ .video-preview video {
201
+ width: 100%;
202
+ max-height: 400px;
203
+ border-radius: 0.75rem;
204
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
205
+ }
206
+
207
+ .progress-section {
208
+ padding: 2rem;
209
+ background: #f9fafb;
210
+ border-radius: 0.75rem;
211
+ margin-bottom: 2rem;
212
+ }
213
+
214
+ .progress-header {
215
+ display: flex;
216
+ justify-content: space-between;
217
  align-items: center;
218
+ margin-bottom: 1rem;
219
+ }
220
+
221
+ .progress-header h3 {
222
+ color: #374151;
223
+ }
224
+
225
+ .progress-bar {
226
+ height: 8px;
227
+ background: #e5e7eb;
228
+ border-radius: 4px;
229
+ overflow: hidden;
230
+ margin-bottom: 1rem;
231
+ }
232
+
233
+ .progress-fill {
234
+ height: 100%;
235
+ background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
236
+ transition: width 0.3s ease;
237
+ }
238
+
239
+ .current-status {
240
+ font-size: 0.875rem;
241
+ color: #6b7280;
242
+ }
243
+
244
+ .results-section {
245
+ margin-top: 2rem;
246
  }
247
 
248
+ .results-section h2 {
249
+ margin-bottom: 1.5rem;
250
+ color: #374151;
251
+ }
252
 
253
+ .frames-grid {
254
+ display: grid;
255
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
256
+ gap: 1.5rem;
257
+ margin-bottom: 2rem;
258
+ }
259
 
260
+ .frame-card {
261
+ background: #f9fafb;
262
  border-radius: 0.75rem;
263
  overflow: hidden;
264
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
265
+ }
266
 
267
+ .frame-card img {
268
+ width: 100%;
269
+ height: 160px;
270
+ object-fit: cover;
271
  }
272
 
273
+ .frame-info {
274
+ padding: 1rem;
275
+ display: flex;
276
+ justify-content: space-between;
277
+ align-items: center;
278
+ border-bottom: 1px solid #e5e7eb;
279
  }
280
 
281
+ .frame-info h4 {
282
+ font-size: 0.875rem;
283
+ color: #374151;
284
  }
285
 
286
+ .frame-time {
287
+ font-size: 0.75rem;
288
+ color: #9ca3af;
 
289
  }
290
 
291
+ .frame-description {
292
+ padding: 1rem;
293
+ min-height: 100px;
294
  }
295
 
296
+ .frame-description p {
297
+ font-size: 0.875rem;
298
+ line-height: 1.5;
299
+ color: #4b5563;
300
  }
301
 
302
+ .loading-dots {
303
+ color: #9ca3af;
304
+ font-size: 0.875rem;
305
+ }
306
+
307
+ .loading-dots::after {
308
+ content: '...';
309
+ animation: dots 1.5s steps(4, end) infinite;
310
+ }
311
+
312
+ @keyframes dots {
313
+ 0%, 20% { content: '.'; }
314
+ 40% { content: '..'; }
315
+ 60%, 100% { content: '...'; }
316
+ }
317
+
318
+ .summary-card {
319
+ background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
320
+ border: 1px solid #e0e7ff;
321
+ border-radius: 0.75rem;
322
+ padding: 1.5rem;
323
+ margin-bottom: 2rem;
324
+ }
325
+
326
+ .summary-card h3 {
327
+ color: #5b21b6;
328
+ margin-bottom: 1rem;
329
+ }
330
+
331
+ .summary-content {
332
+ color: #374151;
333
+ line-height: 1.6;
334
+ }
335
+
336
+ .actions {
337
+ display: flex;
338
+ gap: 1rem;
339
+ justify-content: center;
340
+ margin-top: 2rem;
341
+ }
342
+
343
+ .error-section {
344
+ text-align: center;
345
+ padding: 2rem;
346
+ }
347
+
348
+ .error-card {
349
+ max-width: 500px;
350
+ margin: 0 auto;
351
+ padding: 2rem;
352
+ background: #fef2f2;
353
+ border: 1px solid #fecaca;
354
+ border-radius: 0.75rem;
355
+ }
356
+
357
+ .error-icon {
358
+ width: 3rem;
359
+ height: 3rem;
360
+ color: #ef4444;
361
+ margin: 0 auto 1rem;
362
+ }
363
+
364
+ .error-card h3 {
365
+ color: #dc2626;
366
+ margin-bottom: 0.5rem;
367
+ }
368
+
369
+ .error-card p {
370
+ color: #7f1d1d;
371
+ margin-bottom: 1.5rem;
372
+ }
373
+
374
+ footer {
375
+ text-align: center;
376
+ padding: 2rem 1rem;
377
  color: white;
378
+ font-size: 0.875rem;
379
+ }
380
+
381
+ .hidden {
382
+ display: none !important;
383
+ }
384
+
385
+ @media (max-width: 768px) {
386
+ .upload-section {
387
+ grid-template-columns: 1fr;
388
+ }
389
+
390
+ .header-content h1 {
391
+ font-size: 2rem;
392
+ }
393
+
394
+ .frames-grid {
395
+ grid-template-columns: 1fr;
396
+ }
397
+
398
+ .actions {
399
+ flex-direction: column;
400
+ }
401
+
402
+ .btn-secondary {
403
+ width: 100%;
404
+ }
405
  }