Hugging Face's logo

Spaces:
Kazel
/
demo
Runtime error

App Files Community
Kazel commited on
Commit
0a118c2
·
verified ·
1 Parent(s): 37c70c9

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +0 -242
app.py CHANGED
@@ -231,248 +231,6 @@ def create_ui():
231
  display: none !important;
232
  }
233
  """) as demo:
234
- # Overlay HTML and CSS
235
- gr.HTML("""
236
- <style>
237
- #hello-overlay {
238
- position: fixed;
239
- z-index: 9999;
240
- top: 0; left: 0; right: 0; bottom: 0;
241
- width: 100vw; height: 100vh;
242
- background: #000;
243
- display: flex; flex-direction: column; align-items: center; justify-content: center;
244
- transition: opacity 0.5s;
245
- }
246
- /* Hide the checkbox */
247
- #hello-overlay input[type=checkbox] {
248
- display: none;
249
- }
250
- /* Delayed overlay fadeout to match loading bar duration */
251
- #hello-overlay:has(input[type=checkbox]:checked) {
252
- animation: overlay-fadeout 0.3s forwards;
253
- pointer-events: none;
254
- }
255
- @keyframes overlay-fadeout {
256
- 0% { opacity: 1; }
257
- 99% { opacity: 1; }
258
- 100% { opacity: 0; }
259
- }
260
- .grid-particles {
261
- display: grid;
262
- grid-template-columns: repeat(38, 1vw);
263
- grid-template-rows: repeat(8, 1vw);
264
- gap: 0.25vw;
265
- justify-content: center;
266
- align-items: center;
267
- }
268
- .particle {
269
- width: 1.3vw;
270
- height: 1.3vw;
271
- opacity: 0;
272
- border-radius: 50%;
273
- box-shadow: none;
274
- }
275
- /* Letter color order: #164194, #00976f, #ec6608 */
276
- .particle.letter-h,
277
- .particle.letter-d {
278
- background: linear-gradient(135deg, #164194, #164194);
279
- }
280
- .particle.letter-e,
281
- .particle.letter-l1,
282
- .particle.letter-l2,
283
- .particle.letter-s,
284
- .particle.letter-t {
285
- background: linear-gradient(135deg, #00976f, #00976f);
286
- }
287
- .particle.letter-o,
288
- .particle.letter-a {
289
- background: linear-gradient(135deg, #ec6608, #ec6608);
290
- }
291
- /* Animation timing for particles */
292
- .letter-h.particle { animation: fadein 6.8s linear infinite; animation-delay: 0.0s !important; }
293
- .letter-e.particle { animation: fadein 6.8s linear infinite; animation-delay: 0.5s !important; }
294
- .letter-l1.particle { animation: fadein 6.8s linear infinite; animation-delay: 1.0s !important; }
295
- .letter-l2.particle { animation: fadein 6.8s linear infinite; animation-delay: 1.5s !important; }
296
- .letter-o.particle { animation: fadein 6.8s linear infinite; animation-delay: 2.0s !important; }
297
- .letter-d.particle { animation: fadein 6.8s linear infinite; animation-delay: 2.5s !important; }
298
- .letter-s.particle { animation: fadein 6.8s linear infinite; animation-delay: 3.0s !important; }
299
- .letter-t.particle { animation: fadein 6.8s linear infinite; animation-delay: 3.5s !important; }
300
- .letter-a.particle { animation: fadein 6.8s linear infinite; animation-delay: 4.0s !important; }
301
-
302
- @keyframes fadein {
303
- 0% { opacity: 0; transform: scale(0.2);}
304
- 11.76% { opacity: 1; transform: scale(1);}
305
- 73.53% { opacity: 1; transform: scale(1);}
306
- 100% { opacity: 0; transform: scale(0.2);}
307
- }
308
-
309
- label[for="enter-app-toggle"] {
310
- margin-top:4vw;
311
- padding:1.2rem 3rem;
312
- font-size:2rem;
313
- border:none;
314
- border-radius:2.5rem;
315
- background: linear-gradient(90deg, #164194, #00976f, #ec6608, #164194);
316
- background-size: 300% 300%;
317
- background-position: 0% 50%;
318
- color: #fff;
319
- font-weight: 700;
320
- box-shadow: 0 8px 40px 0 #00976fcc, 0 2px 8px 0 #16419488;
321
- cursor: pointer;
322
- transition: background 0.3s, transform 0.2s, width 0.2s, padding 0.2s;
323
- display: inline-block;
324
- animation: gradient-move 3s linear infinite;
325
- z-index: 2;
326
- position: relative;
327
- transform: none;
328
- }
329
- @keyframes gradient-move {
330
- 0% { background-position: 0% 50%; }
331
- 100% { background-position: 100% 50%; }
332
- }
333
- label[for="enter-app-toggle"]:hover {
334
- transform: scale(1.08);
335
- padding-left: 3.5rem;
336
- padding-right: 3.5rem;
337
- }
338
-
339
- /* Loading bar styles */
340
- .loading-bar-container {
341
- width: 320px;
342
- margin: 2vw auto 0 auto;
343
- height: 18px;
344
- background: #151515;
345
- border-radius: 10px;
346
- box-shadow: 0 2px 8px #000a inset;
347
- overflow: hidden;
348
- position: relative;
349
- z-index: 3;
350
- opacity: 1;
351
- transition: opacity 0.4s;
352
- display: none;
353
- }
354
- .loading-bar {
355
- height: 100%;
356
- width: 0%;
357
- background: linear-gradient(90deg, #22ffde, #2196f3 80%);
358
- border-radius: 10px;
359
- transition: none;
360
- }
361
-
362
- /* Show loading bar and animate when button is pressed (focus/active) */
363
- label[for="enter-app-toggle"]:focus ~ .loading-bar-container,
364
- label[for="enter-app-toggle"]:active ~ .loading-bar-container {
365
- display: block;
366
- }
367
- label[for="enter-app-toggle"]:focus ~ .loading-bar-container .loading-bar,
368
- label[for="enter-app-toggle"]:active ~ .loading-bar-container .loading-bar {
369
- animation: loading-bar-fill 0.3s linear forwards;
370
- }
371
- @keyframes loading-bar-fill {
372
- 0% { width: 0%; }
373
- 100% { width: 100%; }
374
- }
375
- </style>
376
- <div id="hello-overlay">
377
- <input type="checkbox" id="enter-app-toggle"/>
378
- <div style="display: flex; flex-direction: column; align-items: center;">
379
- <div class="grid-particles">
380
- <!-- H -->
381
- <div class="particle letter-h" style="grid-column:2;grid-row:2"></div>
382
- <div class="particle letter-h" style="grid-column:2;grid-row:3"></div>
383
- <div class="particle letter-h" style="grid-column:2;grid-row:4"></div>
384
- <div class="particle letter-h" style="grid-column:2;grid-row:5"></div>
385
- <div class="particle letter-h" style="grid-column:2;grid-row:6"></div>
386
- <div class="particle letter-h" style="grid-column:3;grid-row:4"></div>
387
- <div class="particle letter-h" style="grid-column:4;grid-row:2"></div>
388
- <div class="particle letter-h" style="grid-column:4;grid-row:3"></div>
389
- <div class="particle letter-h" style="grid-column:4;grid-row:4"></div>
390
- <div class="particle letter-h" style="grid-column:4;grid-row:5"></div>
391
- <div class="particle letter-h" style="grid-column:4;grid-row:6"></div>
392
- <!-- E -->
393
- <div class="particle letter-e" style="grid-column:6;grid-row:2"></div>
394
- <div class="particle letter-e" style="grid-column:6;grid-row:3"></div>
395
- <div class="particle letter-e" style="grid-column:6;grid-row:4"></div>
396
- <div class="particle letter-e" style="grid-column:6;grid-row:5"></div>
397
- <div class="particle letter-e" style="grid-column:6;grid-row:6"></div>
398
- <div class="particle letter-e" style="grid-column:7;grid-row:2"></div>
399
- <div class="particle letter-e" style="grid-column:7;grid-row:4"></div>
400
- <div class="particle letter-e" style="grid-column:7;grid-row:6"></div>
401
- <div class="particle letter-e" style="grid-column:8;grid-row:2"></div>
402
- <div class="particle letter-e" style="grid-column:8;grid-row:6"></div>
403
- <!-- L -->
404
- <div class="particle letter-l1" style="grid-column:10;grid-row:2"></div>
405
- <div class="particle letter-l1" style="grid-column:10;grid-row:3"></div>
406
- <div class="particle letter-l1" style="grid-column:10;grid-row:4"></div>
407
- <div class="particle letter-l1" style="grid-column:10;grid-row:5"></div>
408
- <div class="particle letter-l1" style="grid-column:10;grid-row:6"></div>
409
- <div class="particle letter-l1" style="grid-column:11;grid-row:6"></div>
410
- <!-- L -->
411
- <div class="particle letter-l2" style="grid-column:13;grid-row:2"></div>
412
- <div class="particle letter-l2" style="grid-column:13;grid-row:3"></div>
413
- <div class="particle letter-l2" style="grid-column:13;grid-row:4"></div>
414
- <div class="particle letter-l2" style="grid-column:13;grid-row:5"></div>
415
- <div class="particle letter-l2" style="grid-column:13;grid-row:6"></div>
416
- <div class="particle letter-l2" style="grid-column:14;grid-row:6"></div>
417
- <!-- O -->
418
- <div class="particle letter-o" style="grid-column:16;grid-row:3"></div>
419
- <div class="particle letter-o" style="grid-column:16;grid-row:4"></div>
420
- <div class="particle letter-o" style="grid-column:16;grid-row:5"></div>
421
- <div class="particle letter-o" style="grid-column:17;grid-row:2"></div>
422
- <div class="particle letter-o" style="grid-column:17;grid-row:6"></div>
423
- <div class="particle letter-o" style="grid-column:18;grid-row:3"></div>
424
- <div class="particle letter-o" style="grid-column:18;grid-row:4"></div>
425
- <div class="particle letter-o" style="grid-column:18;grid-row:5"></div>
426
- <!-- D -->
427
- <div class="particle letter-d" style="grid-column:23;grid-row:2"></div>
428
- <div class="particle letter-d" style="grid-column:23;grid-row:3"></div>
429
- <div class="particle letter-d" style="grid-column:23;grid-row:4"></div>
430
- <div class="particle letter-d" style="grid-column:23;grid-row:5"></div>
431
- <div class="particle letter-d" style="grid-column:23;grid-row:6"></div>
432
- <div class="particle letter-d" style="grid-column:24;grid-row:2"></div>
433
- <div class="particle letter-d" style="grid-column:24;grid-row:6"></div>
434
- <div class="particle letter-d" style="grid-column:25;grid-row:3"></div>
435
- <div class="particle letter-d" style="grid-column:25;grid-row:4"></div>
436
- <div class="particle letter-d" style="grid-column:25;grid-row:5"></div>
437
- <!-- S -->
438
- <div class="particle letter-s" style="grid-column:27;grid-row:2"></div>
439
- <div class="particle letter-s" style="grid-column:28;grid-row:2"></div>
440
- <div class="particle letter-s" style="grid-column:29;grid-row:2"></div>
441
- <div class="particle letter-s" style="grid-column:27;grid-row:3"></div>
442
- <div class="particle letter-s" style="grid-column:27;grid-row:4"></div>
443
- <div class="particle letter-s" style="grid-column:28;grid-row:4"></div>
444
- <div class="particle letter-s" style="grid-column:29;grid-row:4"></div>
445
- <div class="particle letter-s" style="grid-column:29;grid-row:5"></div>
446
- <div class="particle letter-s" style="grid-column:27;grid-row:6"></div>
447
- <div class="particle letter-s" style="grid-column:28;grid-row:6"></div>
448
- <div class="particle letter-s" style="grid-column:29;grid-row:6"></div>
449
- <!-- T -->
450
- <div class="particle letter-t" style="grid-column:31;grid-row:2"></div>
451
- <div class="particle letter-t" style="grid-column:32;grid-row:2"></div>
452
- <div class="particle letter-t" style="grid-column:33;grid-row:2"></div>
453
- <div class="particle letter-t" style="grid-column:32;grid-row:3"></div>
454
- <div class="particle letter-t" style="grid-column:32;grid-row:4"></div>
455
- <div class="particle letter-t" style="grid-column:32;grid-row:5"></div>
456
- <div class="particle letter-t" style="grid-column:32;grid-row:6"></div>
457
- <!-- A -->
458
- <div class="particle letter-a" style="grid-column:36;grid-row:2"></div>
459
- <div class="particle letter-a" style="grid-column:35;grid-row:3"></div>
460
- <div class="particle letter-a" style="grid-column:37;grid-row:3"></div>
461
- <div class="particle letter-a" style="grid-column:35;grid-row:4"></div>
462
- <div class="particle letter-a" style="grid-column:36;grid-row:4"></div>
463
- <div class="particle letter-a" style="grid-column:37;grid-row:4"></div>
464
- <div class="particle letter-a" style="grid-column:35;grid-row:5"></div>
465
- <div class="particle letter-a" style="grid-column:37;grid-row:5"></div>
466
- <div class="particle letter-a" style="grid-column:35;grid-row:6"></div>
467
- <div class="particle letter-a" style="grid-column:37;grid-row:6"></div>
468
- </div>
469
- <label for="enter-app-toggle" tabindex="0">Begin Demo</label>
470
- <div class="loading-bar-container">
471
- <div class="loading-bar"></div>
472
- </div>
473
- </div>
474
- </div>
475
- """)
476
  state = gr.State(value={"user_uuid": None})
477
 
478
 
 
231
  display: none !important;
232
  }
233
  """) as demo:
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
234
  state = gr.State(value={"user_uuid": None})
235
 
236