Hugging Face's logo

Spaces:
broadfield-dev
/
node_search
Sleeping

App Files Community
broadfield-dev commited on
Commit
9afb363
·
verified ·
1 Parent(s): 9dae261

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +152 -25
app.py CHANGED
@@ -410,31 +410,158 @@ custom_theme = gr.themes.Soft(
410
  )
411
 
412
  custom_css = """
413
- body, html { margin: 0 !important; padding: 0 !important; height: 100%; background: linear-gradient(to bottom right, #2c3e50, #34495e); color: #ecf0f1; font-family: 'Inter', 'System UI', sans-serif;}
414
- .gradio-container { background: transparent !important; max-width: 100% !important; padding: 1em !important; box-sizing: border-box; min-height: 100vh; display: flex; flex-direction: column;}
415
- .gr-block.gr-group, .gr-tabs, .gr-accordion { background-color: rgba(44, 62, 80, 0.85) !important; border: 1px solid rgba(189, 195, 199, 0.2) !important; border-radius: 8px !important; box-shadow: 0 3px 5px rgba(0,0,0,0.15); margin-bottom: 1em;}
416
- .gr-tabitem { background-color: rgba(52, 73, 94, 0.8) !important; border-radius: 6px !important; padding: 1em !important; border: 1px solid rgba(189, 195, 199, 0.1) !important;}
417
- .gr-textbox, .gr-dropdown, .gr-button, .gr-code, .gr-chat-message, .gr-json, .gr-file input[type="file"], .gr-file . OgniCn { border: 1px solid rgba(189, 195, 199, 0.3) !important; background-color: rgba(52, 73, 94, 0.9) !important; color: #ecf0f1 !important; border-radius: 6px !important;}
418
- .gr-file { background-color: transparent !important; border: none !important; padding:0 !important;} /* Make file upload cleaner */
419
- .gr-file > .label-text { color: #bdc3c7 !important;}
420
- .gr-textarea textarea, .gr-textbox input { color: #ecf0f1 !important; }
421
- .gr-button.gr-button-primary { background-color: #1abc9c !important; color: white !important; border-color: #16a085 !important; }
422
- .gr-button.gr-button-secondary { background-color: #9b59b6 !important; color: white !important; border-color: #8e44ad !important; }
423
- .gr-button.gr-button-stop { background-color: #e74c3c !important; color: white !important; border-color: #c0392b !important; }
424
- .gr-markdown { padding: 0px; }
425
- .gr-markdown h1, .gr-markdown h2, .gr-markdown h3 { color: #1abc9c !important; border-bottom: 1px solid rgba(189, 195, 199, 0.2) !important; padding-bottom: 0.3em; margin-top:0.8em; margin-bottom: 0.6em; }
426
- .gr-markdown p, .gr-markdown li { color: #ecf0f1 !important; line-height:1.6;}
427
- .gr-markdown pre code { background-color: rgba(30, 40, 50, 0.95) !important; border: 1px solid rgba(189, 195, 199, 0.3) !important; color: #ecf0f1; border-radius: 4px; padding: 0.8em; }
428
- .gr-chatbot { background-color: rgba(44, 62, 80, 0.7) !important; border: 1px solid rgba(189, 195, 199, 0.2) !important; }
429
- .gr-chatbot .message { background-color: rgba(52, 73, 94, 0.9) !important; color: #ecf0f1 !important; border: 1px solid rgba(189, 195, 199, 0.2) !important; box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important; }
430
- .gr-chatbot .message.user { background-color: rgba(46, 204, 113, 0.8) !important; color: #2c3e50 !important; }
431
- .gr-input-label > .label-text, .gr-dropdown-label > .label-text, .gr-checkbox-label > .label-text { color: #bdc3c7 !important; font-size: 0.9rem !important; margin-bottom: 0.2rem !important; }
432
- .gr-info { color: #bdc3c7 !important; font-size: 0.85rem !important; }
433
- .status-bar { background-color: rgba(44, 62, 80, 0.8) !important; padding: 0.5rem 1rem !important; border-radius: 6px; margin-bottom: 1rem; }
434
- .tabnav button { background-color: rgba(52, 73, 94, 0.8) !important; color: #ecf0f1 !important; border-bottom: 2px solid transparent !important; border-top-left-radius: 6px !important; border-top-right-radius: 6px !important; margin-right: 2px !important; padding: 0.5em 1em !important; }
435
- .tabnav button.selected { background-color: rgba(44, 62, 80, 0.95) !important; color: #1abc9c !important; border-bottom: 2px solid #1abc9c !important;}
436
- .main-title { text-align: center; margin-bottom: 0.5rem !important; }
437
- .main-subtitle { text-align: center; color: #bdc3c7; font-size: 0.95rem; margin-bottom: 1.5rem !important; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
438
  """
439
 
440
  with gr.Blocks(theme=custom_theme, css=custom_css, title="AI Research Agent") as demo:
 
410
  )
411
 
412
  custom_css = """
413
+ body, html {
414
+ margin: 0 !important;
415
+ padding: 0.5em !important;
416
+ height: 100%;
417
+ background: linear-gradient(to bottom right, #2c3e50, #34495e);
418
+ color: #ecf0f1;
419
+ font-family: 'Inter', 'System UI', sans-serif;
420
+ }
421
+ .gradio-container {
422
+ background: transparent !important;
423
+ max-width: 100% !important;
424
+ padding: 2em 1em 1em 1em !important;
425
+ box-sizing: border-box;
426
+ min-height: 100vh;
427
+ display: flex;
428
+ flex-direction: column;
429
+ overflow-y: auto !important;
430
+ }
431
+ .gr-block.gr-group, .gr-tabs, .gr-accordion {
432
+ background-color: rgba(44, 62, 80, 0.85) !important;
433
+ border: 1px solid rgba(189, 195, 199, 0.2) !important;
434
+ border-radius: 8px !important;
435
+ box-shadow: 0 3px 5px rgba(0,0,0,0.15);
436
+ margin-bottom: 1em;
437
+ }
438
+ .gr-tabitem {
439
+ background-color: rgba(52, 73, 94, 0.8) !important;
440
+ border-radius: 6px !important;
441
+ padding: 1em !important;
442
+ border: 1px solid rgba(189, 195, 199, 0.1) !important;
443
+ }
444
+ .gr-textbox, .gr-dropdown, .gr-button, .gr-code, .gr-chat-message, .gr-json, .gr-file input[type="file"], .gr-file .OgniCn {
445
+ border: 1px solid rgba(189, 195, 199, 0.3) !important;
446
+ background-color: rgba(52, 73, 94, 0.9) !important;
447
+ color: #ecf0f1 !important;
448
+ border-radius: 6px !important;
449
+ }
450
+ .gr-file {
451
+ background-color: transparent !important;
452
+ border: none !important;
453
+ padding: 0 !important;
454
+ }
455
+ .gr-file > .label-text {
456
+ color: #bdc3c7 !important;
457
+ }
458
+ .gr-textarea textarea, .gr-textbox input {
459
+ color: #ecf0f1 !important;
460
+ }
461
+ .gr-button.gr-button-primary {
462
+ background-color: #1abc9c !important;
463
+ color: white !important;
464
+ border-color: #16a085 !important;
465
+ }
466
+ .gr-button.gr-button-secondary {
467
+ background-color: #9b59b6 !important;
468
+ color: white !important;
469
+ border-color: #8e44ad !important;
470
+ }
471
+ .gr-button.gr-button-stop {
472
+ background-color: #e74c3c !important;
473
+ color: white !important;
474
+ border-color: #c0392b !important;
475
+ }
476
+ .gr-markdown {
477
+ padding: 0px;
478
+ }
479
+ .gr-markdown h1, .gr-markdown h2, .gr-markdown h3 {
480
+ color: #1abc9c !important;
481
+ border-bottom: 1px solid rgba(189, 195, 199, 0.2) !important;
482
+ padding-bottom: 0.3em;
483
+ margin-top: 0.8em;
484
+ margin-bottom: 0.6em;
485
+ }
486
+ .gr-markdown p, .gr-markdown li {
487
+ color: #ecf0f1 !important;
488
+ line-height: 1.6;
489
+ }
490
+ .gr-markdown pre code {
491
+ background-color: rgba(30, 40, 50, 0.95) !important;
492
+ border: 1px solid rgba(189, 195, 199, 0.3) !important;
493
+ color: #ecf0f1;
494
+ border-radius: 4px;
495
+ padding: 0.8em;
496
+ }
497
+ .gr-chatbot {
498
+ background-color: rgba(44, 62, 80, 0.7) !important;
499
+ border: 1px solid rgba(189, 195, 199, 0.2) !important;
500
+ }
501
+ .gr-chatbot .message {
502
+ background-color: rgba(52, 73, 94, 0.9) !important;
503
+ color: #ecf0f1 !important;
504
+ border: 1px solid rgba(189, 195, 199, 0.2) !important;
505
+ box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
506
+ }
507
+ .gr-chatbot .message.user {
508
+ background-color: rgba(46, 204, 113, 0.8) !important;
509
+ color: #2c3e50 !important;
510
+ }
511
+ .gr-input-label > .label-text, .gr-dropdown-label > .label-text, .gr-checkbox-label > .label-text {
512
+ color: #bdc3c7 !important;
513
+ font-size: 0.9rem !important;
514
+ margin-bottom: 0.2rem !important;
515
+ }
516
+ .gr-info {
517
+ color: #bdc3c7 !important;
518
+ font-size: 0.85rem !important;
519
+ }
520
+ .status-bar {
521
+ background-color: rgba(44, 62, 80, 0.8) !important;
522
+ padding: 0.5rem 1rem !important;
523
+ border-radius: 6px;
524
+ margin: 1rem 0 !important;
525
+ }
526
+ .tabnav button {
527
+ background-color: rgba(52, 73, 94, 0.8) !important;
528
+ color: #ecf0f1 !important;
529
+ border-bottom: 2px solid transparent !important;
530
+ border-top-left-radius: 6px !important;
531
+ border-top-right-radius: 6px !important;
532
+ margin-right: 2px !important;
533
+ padding: 0.5em 1em !important;
534
+ }
535
+ .tabnav button.selected {
536
+ background-color: rgba(44, 62, 80, 0.95) !important;
537
+ color: #1abc9c !important;
538
+ border-bottom: 2px solid #1abc9c !important;
539
+ }
540
+ .main-title {
541
+ text-align: center;
542
+ margin: 1.5rem 0 0.5rem 0 !important;
543
+ }
544
+ .main-subtitle {
545
+ text-align: center;
546
+ color: #bdc3c7;
547
+ font-size: 0.95rem;
548
+ margin: 0 0 1.5rem 0 !important;
549
+ }
550
+ @media (max-width: 768px) {
551
+ .gradio-container {
552
+ padding: 1.5em 0.5em !important;
553
+ }
554
+ .main-title {
555
+ font-size: 1.5rem !important;
556
+ margin-top: 1rem !important;
557
+ }
558
+ .main-subtitle {
559
+ font-size: 0.85rem !important;
560
+ }
561
+ .status-bar {
562
+ margin: 0.5rem 0 !important;
563
+ }
564
+ }
565
  """
566
 
567
  with gr.Blocks(theme=custom_theme, css=custom_css, title="AI Research Agent") as demo: