w commited on
Commit
f9ae20c
ยท
1 Parent(s): 2bb462d

chore: update UI style and fix layout

Browse files
app.py CHANGED
@@ -207,364 +207,145 @@ EXAMPLE_HTML = """<!DOCTYPE html>
207
  </html>"""
208
 
209
 
210
- # Custom CSS for better aesthetics - Matched with L3 Generator
211
  custom_css = """
212
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
213
 
214
  :root {
215
- --primary-color: #6366f1;
216
- --text-light: #f8fafc;
217
- --text-gray: #cbd5e1;
218
- --panel-bg: rgba(15, 23, 42, 0.6);
 
 
 
 
219
  }
220
 
221
  body {
222
- background-color: #0f172a;
223
- color: var(--text-light);
224
  }
225
 
226
  .gradio-container {
227
  font-family: 'Inter', sans-serif !important;
228
- background: radial-gradient(circle at top left, #1e1b4b, #0f172a) !important;
229
- max-width: 95% !important; /* Increased width for better split view */
230
- }
231
-
232
- /* Force all text to be light by default to combat Gradio's light theme defaults */
233
- .gradio-container * {
234
- color: var(--text-light);
235
- }
236
-
237
- /* ... (keep existing styles) ... */
238
-
239
- /* Output Box Styling - Fixed Height */
240
- .output-textbox, .markdown-box {
241
- height: 600px !important;
242
- max-height: 600px !important;
243
- overflow-y: auto !important;
244
- background-color: #1e293b !important;
245
- border: 1px solid #64748b !important;
246
- border-radius: 8px !important;
247
- padding: 1rem !important;
248
- }
249
-
250
- .output-textbox textarea {
251
- background-color: transparent !important;
252
- border: none !important;
253
- box-shadow: none !important;
254
- height: 100% !important;
255
- color: #ffffff !important;
256
- }
257
-
258
- .markdown-box {
259
- background-color: #f8fafc !important; /* Light background for markdown readability */
260
- color: #0f172a !important; /* Dark text for markdown */
261
  }
262
 
263
- .markdown-box * {
264
- color: #0f172a !important;
265
- }
266
  .main-title {
267
- font-family: 'Inter', sans-serif !important;
268
- font-weight: 800 !important;
269
- font-size: 3rem !important;
270
- background: linear-gradient(to right, #818cf8, #c084fc, #f472b6) !important;
271
- -webkit-background-clip: text !important;
272
- -webkit-text-fill-color: transparent !important;
273
  text-align: center !important;
274
- margin-bottom: 0.5rem !important;
275
- /* Reset color for gradient text */
276
- color: transparent !important;
 
277
  }
278
 
279
  .subtitle {
280
  text-align: center !important;
281
- color: var(--text-gray) !important;
282
- font-size: 1.1rem !important;
283
- margin-bottom: 3rem !important;
284
- font-weight: 300 !important;
285
  }
286
 
287
- /* Panels */
288
  .glass-panel {
289
- background: var(--panel-bg) !important;
290
- backdrop-filter: blur(12px) !important;
291
- border: 1px solid rgba(255, 255, 255, 0.1) !important;
292
  border-radius: 16px !important;
293
- padding: 24px !important;
294
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
295
  }
296
 
297
- /* Labels - High Contrast, Clean Black */
298
- .block > label > span,
299
- .form > label > span,
300
- .gr-form > label > span,
301
- .label-wrap > span {
302
- color: #000000 !important; /* Pure Black */
303
  font-weight: 700 !important;
304
- font-size: 1rem !important;
305
- margin-bottom: 0.5rem !important;
306
- text-shadow: 0 0 2px #ffffff, 0 0 4px #ffffff !important; /* White glow/outline for visibility */
307
- background-color: transparent !important;
308
- padding: 0 !important;
309
- }
310
-
311
- /* Info Text (Description) */
312
- span.description, .description {
313
- color: #000000 !important;
314
- font-weight: 600 !important;
315
- text-shadow: 0 0 2px #ffffff !important;
316
- opacity: 1 !important;
317
  }
318
 
319
- /* Fix Radio/Checkbox alignment & styling */
320
- fieldset label span {
321
- margin-bottom: 0 !important;
 
 
 
 
322
  text-shadow: none !important;
323
- font-weight: 600 !important;
324
- color: #0f172a !important; /* Dark text for unselected options (white background) */
325
- display: flex !important;
326
- align-items: center !important;
327
  }
328
 
329
- /* Selected radio button text should be white */
330
- fieldset label.selected span {
331
- color: #ffffff !important;
332
- }
333
-
334
- /* Radio group title (e.g., Difficulty Level) */
335
  fieldset legend, fieldset legend span,
336
- .gr-radio > label, .gr-radio > label span,
337
- .gradio-container .label-wrap, .gradio-container .label-wrap span {
338
- color: #000000 !important;
339
- font-weight: 700 !important;
340
- text-shadow: 0 0 2px #ffffff, 0 0 4px #ffffff !important;
341
  }
342
 
343
- /* Inputs & Textareas - Dark Grey Background for Contrast */
344
  .gr-input, textarea, input, .gr-box, .gr-check-radio, .gr-dropdown {
345
  font-family: 'JetBrains Mono', monospace !important;
346
- background-color: #1e293b !important; /* Slate 800 - Lighter than bg, darker than text */
347
- border: 1px solid #64748b !important; /* Visible Slate Border */
348
- color: #ffffff !important;
349
  box-shadow: none !important;
350
  }
351
 
352
- /* Focus state */
353
  .gr-input:focus, textarea:focus, input:focus {
354
- border-color: #ffffff !important; /* White border on focus */
355
- background-color: #334155 !important; /* Slightly lighter on focus */
356
- }
357
-
358
- /* Override default block backgrounds */
359
- .gradio-container .block, .gradio-container .panel {
360
- background-color: transparent !important;
361
- border: none !important;
362
- }
363
-
364
- /* Fix for dropdown options background */
365
- ul.options, .gr-dropdown-options {
366
- background-color: #1e293b !important;
367
- color: #ffffff !important;
368
- border: 1px solid #64748b !important;
369
- }
370
-
371
- /* Markdown prose */
372
- .prose, .prose p, .prose h1, .prose h2, .prose h3, .prose strong, .prose li {
373
- color: var(--text-light) !important;
374
- }
375
-
376
- /* Buttons */
377
- .gr-button-primary {
378
- background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
379
- border: none !important;
380
- color: white !important;
381
- font-weight: 600 !important;
382
- border-radius: 8px !important;
383
- transition: transform 0.2s, box-shadow 0.2s !important;
384
- }
385
-
386
- .gr-button-primary:hover {
387
- transform: translateY(-1px) !important;
388
- box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3) !important;
389
- }
390
-
391
- .gr-button-secondary {
392
- background: rgba(30, 41, 59, 0.8) !important;
393
- border: 1px solid rgba(148, 163, 184, 0.3) !important;
394
- color: var(--text-gray) !important;
395
- border-radius: 8px !important;
396
- }
397
-
398
- .gr-button-secondary:hover {
399
- background: rgba(51, 65, 85, 0.8) !important;
400
- color: var(--text-light) !important;
401
  }
402
 
403
- /* Tabs */
404
  .tabs {
405
  border: none !important;
406
- background: transparent !important;
407
- margin-bottom: 2rem !important;
408
  }
409
 
410
  .tab-nav {
411
- border-bottom: 1px solid rgba(148, 163, 184, 0.2) !important;
412
  justify-content: center !important;
 
413
  }
414
 
415
  .tab-nav button {
416
  font-weight: 600 !important;
417
- font-size: 1rem !important;
418
- color: var(--text-gray) !important;
419
- transition: all 0.3s ease !important;
420
- }
421
-
422
- .tab-nav button.selected {
423
- color: #818cf8 !important;
424
- border-bottom: 2px solid #818cf8 !important;
425
- }
426
-
427
- /* Section Header */
428
- .section-header {
429
- color: #818cf8 !important;
430
- font-weight: 700 !important;
431
- font-size: 1.5rem !important;
432
- margin-bottom: 1.5rem !important;
433
- padding-bottom: 0.5rem !important;
434
- border-bottom: 2px solid rgba(129, 140, 248, 0.3) !important;
435
- text-shadow: 0 2px 4px rgba(0,0,0,0.3);
436
- }
437
-
438
- /* Footer */
439
- .footer-text {
440
- text-align: center;
441
- margin-top: 4rem;
442
- padding: 2rem;
443
- color: var(--text-gray);
444
- font-size: 0.9rem;
445
- border-top: 1px solid rgba(148, 163, 184, 0.1);
446
- }
447
- .footer-text a {
448
- color: #818cf8 !important;
449
- }
450
-
451
- /* Accordion */
452
- .gr-accordion {
453
- background-color: rgba(30, 41, 59, 0.4) !important;
454
- border: 1px solid rgba(148, 163, 184, 0.2) !important;
455
- }
456
-
457
- /* ===== Tech Refresh (Cleaner + Single Box Output) ===== */
458
- :root {
459
- --bg: #0b1020;
460
- --surface: #0f172a;
461
- --surface-2: #111827;
462
- --border: #1f2937;
463
- --text: #e5e7eb;
464
- --muted: #94a3b8;
465
- --accent: #38bdf8;
466
- --accent-2: #8b5cf6;
467
- }
468
-
469
- body {
470
- background-color: var(--bg) !important;
471
- color: var(--text) !important;
472
- }
473
-
474
- .gradio-container {
475
- background:
476
- radial-gradient(circle at 15% 10%, rgba(56, 189, 248, 0.08), transparent 40%),
477
- radial-gradient(circle at 85% 20%, rgba(139, 92, 246, 0.08), transparent 45%),
478
- linear-gradient(180deg, #0b1020 0%, #0b1020 100%) !important;
479
- background-size: auto, auto, auto !important;
480
- }
481
-
482
- .main-title {
483
- background: linear-gradient(90deg, #e5e7eb, #c7d2fe, #38bdf8) !important;
484
- -webkit-background-clip: text !important;
485
- -webkit-text-fill-color: transparent !important;
486
- }
487
-
488
- .subtitle {
489
  color: var(--muted) !important;
 
 
 
490
  }
491
 
492
- .glass-panel {
493
- background: linear-gradient(180deg, rgba(15, 23, 42, 0.95), rgba(17, 24, 39, 0.95)) !important;
494
- border: 1px solid rgba(56, 189, 248, 0.15) !important;
495
- box-shadow:
496
- 0 0 0 1px rgba(139, 92, 246, 0.12),
497
- 0 20px 40px rgba(2, 6, 23, 0.55) !important;
498
- }
499
-
500
- .section-header {
501
- color: var(--text) !important;
502
- border-bottom: 1px solid rgba(56, 189, 248, 0.2) !important;
503
- text-shadow: none !important;
504
- }
505
-
506
- /* Labels & descriptions */
507
- .block > label > span,
508
- .form > label > span,
509
- .gr-form > label > span,
510
- .label-wrap > span {
511
- color: var(--text) !important;
512
- text-shadow: none !important;
513
- }
514
-
515
- span.description, .description {
516
- color: var(--muted) !important;
517
- text-shadow: none !important;
518
- }
519
-
520
- /* Inputs */
521
- .gr-input, textarea, input, .gr-box, .gr-check-radio, .gr-dropdown {
522
- background-color: var(--surface-2) !important;
523
- border: 1px solid var(--border) !important;
524
- color: var(--text) !important;
525
- }
526
-
527
- .gr-input:focus, textarea:focus, input:focus {
528
- border-color: var(--accent) !important;
529
- box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.15) !important;
530
  }
531
 
532
- /* Buttons */
533
  .gr-button-primary {
534
- background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%) !important;
535
- box-shadow: 0 8px 20px rgba(37, 99, 235, 0.2) !important;
 
 
 
 
536
  }
537
 
538
  .gr-button-primary:hover {
539
- background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%) !important;
540
  }
541
 
542
  .gr-button-secondary {
543
- background: transparent !important;
544
- border: 1px solid rgba(148, 163, 184, 0.35) !important;
545
- color: var(--text) !important;
546
- }
547
-
548
- /* Tabs */
549
- .tab-nav button {
550
- color: var(--muted) !important;
551
- }
552
-
553
- .tab-nav button.selected {
554
  color: var(--text) !important;
555
- border-bottom: 2px solid var(--accent) !important;
556
  }
557
 
558
- /* Output: single box + auto height */
559
- .output-textbox {
560
- background-color: var(--surface-2) !important;
561
- border: 1px solid var(--border) !important;
562
  border-radius: 12px !important;
563
- padding: 12px !important;
564
- min-height: 220px !important;
565
- max-height: 560px !important;
566
- height: auto !important;
567
- overflow-y: auto !important;
568
  }
569
 
570
  .output-textbox textarea {
@@ -572,163 +353,56 @@ span.description, .description {
572
  border: none !important;
573
  box-shadow: none !important;
574
  color: var(--text) !important;
575
- min-height: 200px !important;
576
- max-height: 520px !important;
577
- height: auto !important;
578
- overflow-y: auto !important;
579
- }
580
-
581
- .markdown-box {
582
- background: transparent !important;
583
- border: none !important;
584
- padding: 0 !important;
585
  }
586
 
587
  .markdown-box .prose {
588
- background-color: var(--surface-2) !important;
589
- border: 1px solid var(--border) !important;
590
- border-radius: 12px !important;
591
- padding: 16px !important;
592
- min-height: 220px !important;
593
- max-height: 560px !important;
594
- overflow-y: auto !important;
595
- }
596
-
597
- .markdown-box, .markdown-box * {
598
- color: var(--text) !important;
599
- }
600
-
601
- .markdown-box code, .markdown-box pre {
602
- background: #1f2937 !important;
603
- }
604
-
605
- /* === Premium Clean Overrides === */
606
- :root {
607
- --bg: #0b1120;
608
- --surface: #111827;
609
- --surface-2: #0f172a;
610
- --border: #1f2937;
611
- --text: #e5e7eb;
612
- --muted: #94a3b8;
613
- --accent: #6366f1;
614
- }
615
-
616
- body {
617
- background-color: var(--bg) !important;
618
- color: var(--text) !important;
619
- }
620
-
621
- .gradio-container {
622
- background: var(--bg) !important;
623
- width: 95vw !important;
624
- max-width: 1400px !important;
625
- margin: 0 auto !important;
626
- }
627
-
628
- .main-title {
629
- background: none !important;
630
- -webkit-text-fill-color: unset !important;
631
- color: var(--text) !important;
632
- font-size: 2.4rem !important;
633
- letter-spacing: -0.01em !important;
634
- }
635
-
636
- .subtitle {
637
- color: var(--muted) !important;
638
- margin-bottom: 2rem !important;
639
- }
640
-
641
- .glass-panel {
642
- background: linear-gradient(180deg, rgba(17, 24, 39, 0.95), rgba(15, 23, 42, 0.95)) !important;
643
- border: 1px solid var(--border) !important;
644
- box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35) !important;
645
- }
646
-
647
- .section-header {
648
  color: var(--text) !important;
649
- border-bottom: 1px solid var(--border) !important;
650
- text-shadow: none !important;
651
- }
652
-
653
- /* Labels & descriptions */
654
- .block > label > span,
655
- .form > label > span,
656
- .gr-form > label > span,
657
- .label-wrap > span,
658
- span.description,
659
- .description {
660
- color: var(--muted) !important;
661
- text-shadow: none !important;
662
- }
663
-
664
- /* Inputs */
665
- .gr-input, textarea, input, .gr-box, .gr-check-radio, .gr-dropdown {
666
- background-color: var(--surface-2) !important;
667
- border: 1px solid var(--border) !important;
668
- color: var(--text) !important;
669
- }
670
-
671
- .gr-input:focus, textarea:focus, input:focus {
672
- border-color: var(--accent) !important;
673
- background-color: #111827 !important;
674
- }
675
-
676
- /* Buttons */
677
- .gr-button-primary {
678
- background: var(--accent) !important;
679
  box-shadow: none !important;
680
- color: #ffffff !important;
681
- }
682
-
683
- .gr-button-primary:hover {
684
- background: #4f46e5 !important;
685
  }
686
 
687
- .gr-button-secondary {
 
 
 
 
 
 
 
 
 
 
 
688
  background: transparent !important;
689
- border: 1px solid var(--border) !important;
690
- color: var(--text) !important;
691
  }
692
 
693
- .gr-button-secondary:hover {
694
- background: rgba(31, 41, 55, 0.6) !important;
 
 
 
695
  }
696
 
697
- /* Tabs */
698
- .tab-nav button {
 
 
699
  color: var(--muted) !important;
700
- }
701
-
702
- .tab-nav button.selected {
703
- color: var(--text) !important;
704
- border-bottom: 2px solid var(--accent) !important;
705
- }
706
-
707
- /* Output */
708
- .output-textbox, .markdown-box {
709
- background-color: var(--surface-2) !important;
710
- border: 1px solid var(--border) !important;
711
- height: 560px !important;
712
- max-height: 560px !important;
713
- }
714
-
715
- .markdown-box, .markdown-box * {
716
- color: var(--text) !important;
717
- }
718
-
719
- .markdown-box code, .markdown-box pre {
720
- background: #1f2937 !important;
721
  }
722
  """
723
 
724
  # Build Gradio interface
725
  with gr.Blocks(title="UltraData Math Parser", css=custom_css, theme=gr.themes.Soft()) as demo:
726
- gr.HTML('<h1 class="main-title">๐Ÿ“ UltraData Math Parser</h1>')
727
  gr.HTML('<p class="subtitle">Unified HTML Parser for Mathematical Content Extraction</p>')
728
 
729
  with gr.Row():
730
  with gr.Column(scale=1, elem_classes=["glass-panel"]):
731
- gr.HTML('<div class="section-header">๐Ÿ“ฅ Input</div>')
732
 
733
  with gr.Tabs():
734
  with gr.TabItem("๐Ÿ”— URL"):
@@ -739,7 +413,7 @@ with gr.Blocks(title="UltraData Math Parser", css=custom_css, theme=gr.themes.So
739
  max_lines=5,
740
  value="https://math.stackexchange.com/questions/5120625/ode-problem-of-yt-sqrtyt-with-the-inital-value-y0-1-t-geq-0",
741
  )
742
- fetch_btn = gr.Button("๐Ÿ“ฅ Fetch & Parse", variant="primary", size="lg")
743
 
744
  with gr.TabItem("๐Ÿ“ HTML"):
745
  pass # HTML input will be below, shared between tabs
@@ -786,7 +460,7 @@ with gr.Blocks(title="UltraData Math Parser", css=custom_css, theme=gr.themes.So
786
  clear_btn = gr.Button("๐Ÿ—‘๏ธ Clear", variant="secondary", size="lg")
787
 
788
  with gr.Column(scale=1, elem_classes=["glass-panel"]):
789
- gr.HTML('<div class="section-header">๐Ÿ“ค Output</div>')
790
 
791
  title_output = gr.Textbox(
792
  label="Extracted Title",
 
207
  </html>"""
208
 
209
 
210
+ # Custom CSS for a clean, light UI (inspired by the reference screenshot)
211
  custom_css = """
212
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
213
 
214
  :root {
215
+ --bg: #f3f5fb;
216
+ --card: #ffffff;
217
+ --border: #e5e9f2;
218
+ --text: #1f2a44;
219
+ --muted: #6b7280;
220
+ --accent: #5b6ff4;
221
+ --accent-2: #7a8af7;
222
+ --input: #f7f9fc;
223
  }
224
 
225
  body {
226
+ background-color: var(--bg) !important;
227
+ color: var(--text) !important;
228
  }
229
 
230
  .gradio-container {
231
  font-family: 'Inter', sans-serif !important;
232
+ background: var(--bg) !important;
233
+ width: 100% !important;
234
+ max-width: none !important;
235
+ margin: 0 auto !important;
236
+ padding: clamp(12px, 2vw, 28px) clamp(10px, 3vw, 32px) clamp(20px, 3vw, 48px) !important;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
237
  }
238
 
 
 
 
239
  .main-title {
 
 
 
 
 
 
240
  text-align: center !important;
241
+ font-weight: 800 !important;
242
+ font-size: 2.4rem !important;
243
+ color: #3b3fb6 !important;
244
+ margin-bottom: 0.25rem !important;
245
  }
246
 
247
  .subtitle {
248
  text-align: center !important;
249
+ color: var(--muted) !important;
250
+ font-size: 1rem !important;
251
+ margin-bottom: 1.5rem !important;
 
252
  }
253
 
 
254
  .glass-panel {
255
+ background: var(--card) !important;
256
+ border: 1px solid var(--border) !important;
 
257
  border-radius: 16px !important;
258
+ padding: 20px !important;
259
+ box-shadow: 0 10px 24px rgba(31, 42, 68, 0.08) !important;
260
  }
261
 
262
+ .section-header {
263
+ color: var(--text) !important;
 
 
 
 
264
  font-weight: 700 !important;
265
+ font-size: 1.05rem !important;
266
+ margin-bottom: 1rem !important;
267
+ padding-bottom: 0.5rem !important;
268
+ border-bottom: 1px solid var(--border) !important;
 
 
 
 
 
 
 
 
 
269
  }
270
 
271
+ .block > label > span,
272
+ .form > label > span,
273
+ .gr-form > label > span,
274
+ .label-wrap > span,
275
+ span.description,
276
+ .description {
277
+ color: var(--text) !important;
278
  text-shadow: none !important;
 
 
 
 
279
  }
280
 
 
 
 
 
 
 
281
  fieldset legend, fieldset legend span,
282
+ .gr-radio > label, .gr-radio > label span {
283
+ color: var(--text) !important;
284
+ font-weight: 600 !important;
 
 
285
  }
286
 
 
287
  .gr-input, textarea, input, .gr-box, .gr-check-radio, .gr-dropdown {
288
  font-family: 'JetBrains Mono', monospace !important;
289
+ background-color: var(--input) !important;
290
+ border: 1px solid var(--border) !important;
291
+ color: var(--text) !important;
292
  box-shadow: none !important;
293
  }
294
 
 
295
  .gr-input:focus, textarea:focus, input:focus {
296
+ border-color: var(--accent) !important;
297
+ background-color: #ffffff !important;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
298
  }
299
 
 
300
  .tabs {
301
  border: none !important;
302
+ margin-bottom: 1rem !important;
 
303
  }
304
 
305
  .tab-nav {
306
+ border-bottom: 1px solid var(--border) !important;
307
  justify-content: center !important;
308
+ gap: 8px !important;
309
  }
310
 
311
  .tab-nav button {
312
  font-weight: 600 !important;
313
+ font-size: 0.95rem !important;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
314
  color: var(--muted) !important;
315
+ background: transparent !important;
316
+ border-radius: 8px !important;
317
+ padding: 6px 12px !important;
318
  }
319
 
320
+ .tab-nav button.selected {
321
+ color: #ffffff !important;
322
+ background: var(--accent) !important;
323
+ border-bottom: none !important;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
324
  }
325
 
 
326
  .gr-button-primary {
327
+ background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%) !important;
328
+ border: none !important;
329
+ color: #ffffff !important;
330
+ font-weight: 600 !important;
331
+ border-radius: 8px !important;
332
+ box-shadow: 0 6px 14px rgba(91, 111, 244, 0.28) !important;
333
  }
334
 
335
  .gr-button-primary:hover {
336
+ filter: brightness(0.98) !important;
337
  }
338
 
339
  .gr-button-secondary {
340
+ background: #f1f4fb !important;
341
+ border: 1px solid var(--border) !important;
 
 
 
 
 
 
 
 
 
342
  color: var(--text) !important;
343
+ border-radius: 8px !important;
344
  }
345
 
346
+ .output-textbox, .markdown-box {
347
+ background-color: #fbfcff !important;
 
 
348
  border-radius: 12px !important;
 
 
 
 
 
349
  }
350
 
351
  .output-textbox textarea {
 
353
  border: none !important;
354
  box-shadow: none !important;
355
  color: var(--text) !important;
 
 
 
 
 
 
 
 
 
 
356
  }
357
 
358
  .markdown-box .prose {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
359
  color: var(--text) !important;
360
+ border: none !important;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
361
  box-shadow: none !important;
362
+ background: transparent !important;
 
 
 
 
363
  }
364
 
365
+ .markdown-box .prose,
366
+ .markdown-box .prose * ,
367
+ .markdown-box .md,
368
+ .markdown-box .wrap,
369
+ .markdown-box .wrap * ,
370
+ .markdown-box .label-wrap,
371
+ .markdown-box .block,
372
+ .markdown-box .form,
373
+ .markdown-box .container,
374
+ .markdown-box .box {
375
+ border: none !important;
376
+ box-shadow: none !important;
377
  background: transparent !important;
378
+ padding: 0 !important;
 
379
  }
380
 
381
+ /* Target the specific container that usually holds the markdown output */
382
+ .markdown-box > .wrap > .block,
383
+ .markdown-box > .block {
384
+ border: none !important;
385
+ background: transparent !important;
386
  }
387
 
388
+ .footer-text {
389
+ text-align: center !important;
390
+ margin-top: 2rem !important;
391
+ padding-top: 1.5rem !important;
392
  color: var(--muted) !important;
393
+ border-top: 1px solid var(--border) !important;
394
+ font-size: 0.9rem !important;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
395
  }
396
  """
397
 
398
  # Build Gradio interface
399
  with gr.Blocks(title="UltraData Math Parser", css=custom_css, theme=gr.themes.Soft()) as demo:
400
+ gr.HTML('<h1 class="main-title">UltraData Math Parser</h1>')
401
  gr.HTML('<p class="subtitle">Unified HTML Parser for Mathematical Content Extraction</p>')
402
 
403
  with gr.Row():
404
  with gr.Column(scale=1, elem_classes=["glass-panel"]):
405
+ gr.HTML('<div class="section-header">Input</div>')
406
 
407
  with gr.Tabs():
408
  with gr.TabItem("๐Ÿ”— URL"):
 
413
  max_lines=5,
414
  value="https://math.stackexchange.com/questions/5120625/ode-problem-of-yt-sqrtyt-with-the-inital-value-y0-1-t-geq-0",
415
  )
416
+ fetch_btn = gr.Button("Fetch & Parse", variant="primary", size="lg")
417
 
418
  with gr.TabItem("๐Ÿ“ HTML"):
419
  pass # HTML input will be below, shared between tabs
 
460
  clear_btn = gr.Button("๐Ÿ—‘๏ธ Clear", variant="secondary", size="lg")
461
 
462
  with gr.Column(scale=1, elem_classes=["glass-panel"]):
463
+ gr.HTML('<div class="section-header">Output</div>')
464
 
465
  title_output = gr.Textbox(
466
  label="Extracted Title",
ultradata_math_parser/__pycache__/__init__.cpython-313.pyc ADDED
Binary file (6.29 kB). View file
 
ultradata_math_parser/__pycache__/config.cpython-313.pyc ADDED
Binary file (12.5 kB). View file
 
ultradata_math_parser/__pycache__/readability_plus.cpython-313.pyc ADDED
Binary file (22.7 kB). View file
 
ultradata_math_parser/__pycache__/utils.cpython-313.pyc ADDED
Binary file (21 kB). View file
 
ultradata_math_parser/parsers/__pycache__/__init__.cpython-313.pyc ADDED
Binary file (654 Bytes). View file
 
ultradata_math_parser/parsers/__pycache__/article_parser.cpython-313.pyc ADDED
Binary file (3.67 kB). View file
 
ultradata_math_parser/parsers/__pycache__/base_parser.cpython-313.pyc ADDED
Binary file (40.7 kB). View file
 
ultradata_math_parser/parsers/__pycache__/custom_parser.cpython-313.pyc ADDED
Binary file (3.07 kB). View file
 
ultradata_math_parser/parsers/__pycache__/forum_parser.cpython-313.pyc ADDED
Binary file (6.84 kB). View file
 
ultradata_math_parser/parsers/__pycache__/title_parser.cpython-313.pyc ADDED
Binary file (2.86 kB). View file
 
ultradata_math_parser/parsers/__pycache__/unified_parser.cpython-313.pyc ADDED
Binary file (8.17 kB). View file