Hugging Face's logo

Spaces:
Kazel
/
demo
Running on Zero

App Files Community
Kazel commited on
Commit
0842249
·
verified ·
1 Parent(s): 28642b1

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +205 -1
app.py CHANGED
@@ -226,7 +226,211 @@ class PDFSearchApp:
226
  def create_ui():
227
  app = PDFSearchApp()
228
 
229
- with gr.Blocks(theme=gr.themes.Ocean(),css ="footer{display:none !important}") as demo:
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
230
  state = gr.State(value={"user_uuid": None})
231
 
232
 
 
226
  def create_ui():
227
  app = PDFSearchApp()
228
 
229
+ with gr.Blocks(theme=gr.themes.Ocean(), css ="""
230
+ footer a[href*="gradio.app"] {
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
+ #hello-overlay input[type=checkbox] {
247
+ display: none;
248
+ }
249
+ #hello-overlay:has(input[type=checkbox]:checked) {
250
+ opacity: 0;
251
+ pointer-events: none;
252
+ transition: opacity 0.5s;
253
+ }
254
+ .grid-particles {
255
+ display: grid;
256
+ grid-template-columns: repeat(36, 1vw);
257
+ grid-template-rows: repeat(8, 1vw);
258
+ gap: 0.25vw;
259
+ justify-content: center;
260
+ align-items: center;
261
+ }
262
+ .particle {
263
+ width: 1.3vw;
264
+ height: 1.3vw;
265
+ opacity: 0;
266
+ border-radius: 50%;
267
+ box-shadow: none;
268
+ }
269
+ /* Letter color order: #164194, #00976f, #ec6608 */
270
+ .particle.letter-h,
271
+ .particle.letter-d {
272
+ background: linear-gradient(135deg, #164194, #164194);
273
+ }
274
+ .particle.letter-e,
275
+ .particle.letter-l1,
276
+ .particle.letter-l2,
277
+ .particle.letter-s,
278
+ .particle.letter-t {
279
+ background: linear-gradient(135deg, #00976f, #00976f);
280
+ }
281
+ .particle.letter-o,
282
+ .particle.letter-a {
283
+ background: linear-gradient(135deg, #ec6608, #ec6608);
284
+ }
285
+ /* Animation timing:
286
+ - Each letter appears one by one (0.5s delay between groups, 0.8s duration)
287
+ - After last letter appears (at 4.0s + 0.8s = 4.8s), all stay visible for 2s (so total 6.8s)
288
+ - Animation duration: 6.8s
289
+ */
290
+ .letter-h.particle { animation: fadein 6.8s linear infinite; animation-delay: 0.0s !important; }
291
+ .letter-e.particle { animation: fadein 6.8s linear infinite; animation-delay: 0.5s !important; }
292
+ .letter-l1.particle { animation: fadein 6.8s linear infinite; animation-delay: 1.0s !important; }
293
+ .letter-l2.particle { animation: fadein 6.8s linear infinite; animation-delay: 1.5s !important; }
294
+ .letter-o.particle { animation: fadein 6.8s linear infinite; animation-delay: 2.0s !important; }
295
+ .letter-d.particle { animation: fadein 6.8s linear infinite; animation-delay: 2.5s !important; }
296
+ .letter-s.particle { animation: fadein 6.8s linear infinite; animation-delay: 3.0s !important; }
297
+ .letter-t.particle { animation: fadein 6.8s linear infinite; animation-delay: 3.5s !important; }
298
+ .letter-a.particle { animation: fadein 6.8s linear infinite; animation-delay: 4.0s !important; }
299
+
300
+ @keyframes fadein {
301
+ 0% { opacity: 0; transform: scale(0.2);}
302
+ 11.76% { opacity: 1; transform: scale(1);} /* 0.8s/6.8s = 11.76% */
303
+ 73.53% { opacity: 1; transform: scale(1);} /* 5.0s/6.8s = 73.53% (all letters visible for 2s after last appears) */
304
+ 100% { opacity: 0; transform: scale(0.2);}
305
+ }
306
+
307
+ label[for="enter-app-toggle"] {
308
+ margin-top:4vw;
309
+ padding:1.2rem 3rem;
310
+ font-size:2rem;
311
+ border:none;
312
+ border-radius:2.5rem;
313
+ background: linear-gradient(90deg, #164194, #00976f, #ec6608, #164194);
314
+ background-size: 300% 300%;
315
+ background-position: 0% 50%;
316
+ color: #fff;
317
+ font-weight: 700;
318
+ box-shadow: 0 8px 40px 0 #00976fcc, 0 2px 8px 0 #16419488;
319
+ cursor: pointer;
320
+ transition: background 0.3s, transform 0.2s, width 0.2s, padding 0.2s;
321
+ display: inline-block;
322
+ animation: gradient-move 3s linear infinite;
323
+ }
324
+
325
+ @keyframes gradient-move {
326
+ 0% { background-position: 0% 50%; }
327
+ 100% { background-position: 100% 50%; }
328
+ }
329
+
330
+ label[for="enter-app-toggle"]:hover {
331
+ transform: scale(1.08);
332
+ padding-left: 3.5rem;
333
+ padding-right: 3.5rem;
334
+ }
335
+ </style>
336
+ <div id="hello-overlay">
337
+ <input type="checkbox" id="enter-app-toggle"/>
338
+ <div style="display: flex; flex-direction: column; align-items: center;">
339
+ <div class="grid-particles">
340
+ <!-- H -->
341
+ <div class="particle letter-h" style="grid-column:2;grid-row:2"></div>
342
+ <div class="particle letter-h" style="grid-column:2;grid-row:3"></div>
343
+ <div class="particle letter-h" style="grid-column:2;grid-row:4"></div>
344
+ <div class="particle letter-h" style="grid-column:2;grid-row:5"></div>
345
+ <div class="particle letter-h" style="grid-column:2;grid-row:6"></div>
346
+ <div class="particle letter-h" style="grid-column:3;grid-row:4"></div>
347
+ <div class="particle letter-h" style="grid-column:4;grid-row:2"></div>
348
+ <div class="particle letter-h" style="grid-column:4;grid-row:3"></div>
349
+ <div class="particle letter-h" style="grid-column:4;grid-row:4"></div>
350
+ <div class="particle letter-h" style="grid-column:4;grid-row:5"></div>
351
+ <div class="particle letter-h" style="grid-column:4;grid-row:6"></div>
352
+ <!-- E -->
353
+ <div class="particle letter-e" style="grid-column:6;grid-row:2"></div>
354
+ <div class="particle letter-e" style="grid-column:6;grid-row:3"></div>
355
+ <div class="particle letter-e" style="grid-column:6;grid-row:4"></div>
356
+ <div class="particle letter-e" style="grid-column:6;grid-row:5"></div>
357
+ <div class="particle letter-e" style="grid-column:6;grid-row:6"></div>
358
+ <div class="particle letter-e" style="grid-column:7;grid-row:2"></div>
359
+ <div class="particle letter-e" style="grid-column:7;grid-row:4"></div>
360
+ <div class="particle letter-e" style="grid-column:7;grid-row:6"></div>
361
+ <div class="particle letter-e" style="grid-column:8;grid-row:2"></div>
362
+ <div class="particle letter-e" style="grid-column:8;grid-row:6"></div>
363
+ <!-- L -->
364
+ <div class="particle letter-l1" style="grid-column:10;grid-row:2"></div>
365
+ <div class="particle letter-l1" style="grid-column:10;grid-row:3"></div>
366
+ <div class="particle letter-l1" style="grid-column:10;grid-row:4"></div>
367
+ <div class="particle letter-l1" style="grid-column:10;grid-row:5"></div>
368
+ <div class="particle letter-l1" style="grid-column:10;grid-row:6"></div>
369
+ <div class="particle letter-l1" style="grid-column:11;grid-row:6"></div>
370
+ <!-- L -->
371
+ <div class="particle letter-l2" style="grid-column:13;grid-row:2"></div>
372
+ <div class="particle letter-l2" style="grid-column:13;grid-row:3"></div>
373
+ <div class="particle letter-l2" style="grid-column:13;grid-row:4"></div>
374
+ <div class="particle letter-l2" style="grid-column:13;grid-row:5"></div>
375
+ <div class="particle letter-l2" style="grid-column:13;grid-row:6"></div>
376
+ <div class="particle letter-l2" style="grid-column:14;grid-row:6"></div>
377
+ <!-- O -->
378
+ <div class="particle letter-o" style="grid-column:16;grid-row:3"></div>
379
+ <div class="particle letter-o" style="grid-column:16;grid-row:4"></div>
380
+ <div class="particle letter-o" style="grid-column:16;grid-row:5"></div>
381
+ <div class="particle letter-o" style="grid-column:17;grid-row:2"></div>
382
+ <div class="particle letter-o" style="grid-column:17;grid-row:6"></div>
383
+ <div class="particle letter-o" style="grid-column:18;grid-row:3"></div>
384
+ <div class="particle letter-o" style="grid-column:18;grid-row:4"></div>
385
+ <div class="particle letter-o" style="grid-column:18;grid-row:5"></div>
386
+ <!-- space -->
387
+ <!-- D -->
388
+ <div class="particle letter-d" style="grid-column:21;grid-row:2"></div>
389
+ <div class="particle letter-d" style="grid-column:21;grid-row:3"></div>
390
+ <div class="particle letter-d" style="grid-column:21;grid-row:4"></div>
391
+ <div class="particle letter-d" style="grid-column:21;grid-row:5"></div>
392
+ <div class="particle letter-d" style="grid-column:21;grid-row:6"></div>
393
+ <div class="particle letter-d" style="grid-column:22;grid-row:2"></div>
394
+ <div class="particle letter-d" style="grid-column:22;grid-row:6"></div>
395
+ <div class="particle letter-d" style="grid-column:23;grid-row:3"></div>
396
+ <div class="particle letter-d" style="grid-column:23;grid-row:4"></div>
397
+ <div class="particle letter-d" style="grid-column:23;grid-row:5"></div>
398
+ <!-- S -->
399
+ <div class="particle letter-s" style="grid-column:25;grid-row:2"></div>
400
+ <div class="particle letter-s" style="grid-column:26;grid-row:2"></div>
401
+ <div class="particle letter-s" style="grid-column:27;grid-row:2"></div>
402
+ <div class="particle letter-s" style="grid-column:25;grid-row:3"></div>
403
+ <div class="particle letter-s" style="grid-column:25;grid-row:4"></div>
404
+ <div class="particle letter-s" style="grid-column:26;grid-row:4"></div>
405
+ <div class="particle letter-s" style="grid-column:27;grid-row:4"></div>
406
+ <div class="particle letter-s" style="grid-column:27;grid-row:5"></div>
407
+ <div class="particle letter-s" style="grid-column:25;grid-row:6"></div>
408
+ <div class="particle letter-s" style="grid-column:26;grid-row:6"></div>
409
+ <div class="particle letter-s" style="grid-column:27;grid-row:6"></div>
410
+ <!-- T -->
411
+ <div class="particle letter-t" style="grid-column:29;grid-row:2"></div>
412
+ <div class="particle letter-t" style="grid-column:30;grid-row:2"></div>
413
+ <div class="particle letter-t" style="grid-column:31;grid-row:2"></div>
414
+ <div class="particle letter-t" style="grid-column:30;grid-row:3"></div>
415
+ <div class="particle letter-t" style="grid-column:30;grid-row:4"></div>
416
+ <div class="particle letter-t" style="grid-column:30;grid-row:5"></div>
417
+ <div class="particle letter-t" style="grid-column:30;grid-row:6"></div>
418
+ <!-- A -->
419
+ <div class="particle letter-a" style="grid-column:34;grid-row:2"></div>
420
+ <div class="particle letter-a" style="grid-column:33;grid-row:3"></div>
421
+ <div class="particle letter-a" style="grid-column:35;grid-row:3"></div>
422
+ <div class="particle letter-a" style="grid-column:33;grid-row:4"></div>
423
+ <div class="particle letter-a" style="grid-column:34;grid-row:4"></div>
424
+ <div class="particle letter-a" style="grid-column:35;grid-row:4"></div>
425
+ <div class="particle letter-a" style="grid-column:33;grid-row:5"></div>
426
+ <div class="particle letter-a" style="grid-column:35;grid-row:5"></div>
427
+ <div class="particle letter-a" style="grid-column:33;grid-row:6"></div>
428
+ <div class="particle letter-a" style="grid-column:35;grid-row:6"></div>
429
+ </div>
430
+ <label for="enter-app-toggle">Begin Demo</label>
431
+ </div>
432
+ </div>
433
+ """)
434
  state = gr.State(value={"user_uuid": None})
435
 
436