Hugging Face's logo

Spaces:
openbmb
/
UltraData-Math-L0-Parser
Running

App Files Community
ZhouChuYue commited on
Commit
2b0def0
·
1 Parent(s): 5d42049

feat: synchronize UI style with L3 Generator (glassmorphism, dark theme)

Browse files
Files changed (1) hide show
  1. app.py +160 -117
app.py CHANGED
@@ -207,190 +207,233 @@ EXAMPLE_HTML = """<!DOCTYPE html>
207
  </html>"""
208
 
209
 
210
- # Custom CSS for better aesthetics
211
  custom_css = """
212
- @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');
 
 
 
 
 
 
 
 
 
 
 
 
213
 
214
  .gradio-container {
215
- font-family: 'Space Grotesk', sans-serif !important;
216
- background: linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #0f0f23 100%) !important;
217
- min-height: 100vh;
218
  }
219
 
 
 
 
 
 
 
220
  .main-title {
221
- font-family: 'Space Grotesk', sans-serif !important;
222
- font-weight: 700 !important;
223
- font-size: 2.5rem !important;
224
- background: linear-gradient(90deg, #00d4ff, #7c3aed, #f472b6) !important;
225
  -webkit-background-clip: text !important;
226
  -webkit-text-fill-color: transparent !important;
227
- background-clip: text !important;
228
  text-align: center !important;
229
  margin-bottom: 0.5rem !important;
 
 
230
  }
231
 
232
  .subtitle {
233
  text-align: center !important;
234
- color: #94a3b8 !important;
235
  font-size: 1.1rem !important;
236
- margin-bottom: 2rem !important;
237
- }
238
-
239
- .gr-box {
240
- border-radius: 12px !important;
241
- border: 1px solid rgba(124, 58, 237, 0.3) !important;
242
- background: rgba(15, 15, 35, 0.8) !important;
243
- backdrop-filter: blur(10px) !important;
244
  }
245
 
246
- .gr-input, .gr-textarea {
247
- font-family: 'JetBrains Mono', monospace !important;
248
- background: rgba(30, 30, 60, 0.6) !important;
249
- border: 1px solid rgba(124, 58, 237, 0.4) !important;
250
- border-radius: 8px !important;
251
- color: #e2e8f0 !important;
 
 
252
  }
253
 
254
- .gr-button-primary {
255
- background: linear-gradient(135deg, #7c3aed 0%, #00d4ff 100%) !important;
256
- border: none !important;
257
- font-weight: 600 !important;
 
 
 
258
  font-size: 1rem !important;
259
- padding: 12px 32px !important;
260
- border-radius: 8px !important;
261
- transition: all 0.3s ease !important;
262
- text-transform: uppercase !important;
263
- letter-spacing: 1px !important;
264
- }
265
-
266
- .gr-button-primary:hover {
267
- transform: translateY(-2px) !important;
268
- box-shadow: 0 8px 25px rgba(124, 58, 237, 0.4) !important;
269
  }
270
 
271
- .gr-button-secondary {
272
- background: transparent !important;
273
- border: 2px solid rgba(124, 58, 237, 0.5) !important;
274
- color: #a78bfa !important;
275
- font-weight: 500 !important;
276
- border-radius: 8px !important;
277
  }
278
 
279
- .section-header {
280
- color: #00d4ff !important;
 
 
281
  font-weight: 600 !important;
282
- font-size: 1.2rem !important;
283
- margin-bottom: 1rem !important;
284
- padding-bottom: 0.5rem !important;
285
- border-bottom: 2px solid rgba(0, 212, 255, 0.3) !important;
286
  }
287
 
288
- .output-box {
289
- background: rgba(20, 20, 45, 0.9) !important;
290
- border: 1px solid rgba(0, 212, 255, 0.3) !important;
291
- border-radius: 12px !important;
292
- padding: 1rem !important;
293
  }
294
 
295
- .gr-markdown {
296
- color: #e2e8f0 !important;
 
 
 
 
 
297
  }
298
 
299
- .gr-markdown code {
300
- background: rgba(124, 58, 237, 0.2) !important;
301
- padding: 2px 6px !important;
302
- border-radius: 4px !important;
303
  font-family: 'JetBrains Mono', monospace !important;
 
 
 
 
304
  }
305
 
306
- footer {
307
- display: none !important;
 
 
308
  }
309
 
310
- .gr-accordion {
311
- border: 1px solid rgba(124, 58, 237, 0.3) !important;
312
- border-radius: 8px !important;
313
- background: rgba(20, 20, 45, 0.6) !important;
314
  }
315
 
316
- .gr-check-radio {
317
- accent-color: #7c3aed !important;
 
 
 
318
  }
319
 
320
- label {
321
- color: #cbd5e1 !important;
 
322
  }
323
 
324
- /* Fixed height textbox with scrollbar */
325
- .gr-textbox textarea {
326
- overflow-y: auto !important;
327
- resize: vertical !important;
 
 
 
 
328
  }
329
 
330
- /* Output textbox styling - match markdown box height */
331
- .output-textbox textarea {
332
- min-height: 560px !important;
333
- max-height: 580px !important;
334
- overflow-y: auto !important;
335
  }
336
 
337
- /* Markdown box styling */
338
- .markdown-box {
339
- background: rgba(255, 255, 255, 0.95) !important;
340
- border: 1px solid rgba(124, 58, 237, 0.3) !important;
341
  border-radius: 8px !important;
342
- padding: 16px !important;
343
- min-height: 580px !important;
344
- max-height: 580px !important;
345
- overflow-y: auto !important;
346
- color: #1a1a2e !important;
347
  }
348
 
349
- .markdown-box * {
350
- color: #1a1a2e !important;
 
351
  }
352
 
353
- .markdown-box code {
354
- background: rgba(124, 58, 237, 0.1) !important;
355
- padding: 2px 6px !important;
356
- border-radius: 4px !important;
 
 
 
 
 
 
357
  }
358
 
359
- .markdown-box pre {
360
- background: #f4f4f8 !important;
361
- padding: 12px !important;
362
- border-radius: 6px !important;
363
- overflow-x: auto !important;
364
  }
365
 
366
- /* Custom scrollbar styling */
367
- .gr-textbox textarea::-webkit-scrollbar {
368
- width: 8px;
369
  }
370
 
371
- .gr-textbox textarea::-webkit-scrollbar-track {
372
- background: rgba(30, 30, 60, 0.4);
373
- border-radius: 4px;
 
 
 
 
 
 
374
  }
375
 
376
- .gr-textbox textarea::-webkit-scrollbar-thumb {
377
- background: rgba(124, 58, 237, 0.6);
378
- border-radius: 4px;
 
 
 
 
 
 
 
 
379
  }
380
 
381
- .gr-textbox textarea::-webkit-scrollbar-thumb:hover {
382
- background: rgba(124, 58, 237, 0.8);
 
 
383
  }
384
  """
385
 
386
  # Build Gradio interface
387
- with gr.Blocks(title="UltraData Math Parser") as demo:
388
- gr.HTML(f'<style>{custom_css}</style>')
389
  gr.HTML('<h1 class="main-title">📐 UltraData Math Parser</h1>')
390
  gr.HTML('<p class="subtitle">Unified HTML Parser for Mathematical Content Extraction</p>')
391
 
392
  with gr.Row():
393
- with gr.Column(scale=1):
394
  gr.HTML('<div class="section-header">📥 Input</div>')
395
 
396
  with gr.Tabs():
@@ -448,7 +491,7 @@ with gr.Blocks(title="UltraData Math Parser") as demo:
448
  parse_btn = gr.Button("🚀 Parse HTML", variant="primary", size="lg")
449
  clear_btn = gr.Button("🗑️ Clear", variant="secondary", size="lg")
450
 
451
- with gr.Column(scale=1):
452
  gr.HTML('<div class="section-header">📤 Output</div>')
453
 
454
  title_output = gr.Textbox(
@@ -511,7 +554,7 @@ with gr.Blocks(title="UltraData Math Parser") as demo:
511
 
512
  # Footer info
513
  gr.HTML("""
514
- <div style="text-align: center; margin-top: 2rem; padding: 1rem; color: #64748b; font-size: 0.9rem;">
515
  <p>🔬 <strong>UltraData Math Parser</strong> - Part of the UltraData-Math Project</p>
516
  <p>Specialized in extracting mathematical content from web pages with MathML, LaTeX, and formula support.</p>
517
  </div>
 
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: 1200px !important;
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
+ /* Title & Header */
238
  .main-title {
239
+ font-family: 'Inter', sans-serif !important;
240
+ font-weight: 800 !important;
241
+ font-size: 3rem !important;
242
+ background: linear-gradient(to right, #818cf8, #c084fc, #f472b6) !important;
243
  -webkit-background-clip: text !important;
244
  -webkit-text-fill-color: transparent !important;
 
245
  text-align: center !important;
246
  margin-bottom: 0.5rem !important;
247
+ /* Reset color for gradient text */
248
+ color: transparent !important;
249
  }
250
 
251
  .subtitle {
252
  text-align: center !important;
253
+ color: var(--text-gray) !important;
254
  font-size: 1.1rem !important;
255
+ margin-bottom: 3rem !important;
256
+ font-weight: 300 !important;
 
 
 
 
 
 
257
  }
258
 
259
+ /* Panels */
260
+ .glass-panel {
261
+ background: var(--panel-bg) !important;
262
+ backdrop-filter: blur(12px) !important;
263
+ border: 1px solid rgba(255, 255, 255, 0.1) !important;
264
+ border-radius: 16px !important;
265
+ padding: 24px !important;
266
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
267
  }
268
 
269
+ /* Labels - High Contrast, Clean Black */
270
+ .block > label > span,
271
+ .form > label > span,
272
+ .gr-form > label > span,
273
+ .label-wrap > span {
274
+ color: #000000 !important; /* Pure Black */
275
+ font-weight: 700 !important;
276
  font-size: 1rem !important;
277
+ margin-bottom: 0.5rem !important;
278
+ text-shadow: 0 0 2px #ffffff, 0 0 4px #ffffff !important; /* White glow/outline for visibility */
279
+ background-color: transparent !important;
280
+ padding: 0 !important;
 
 
 
 
 
 
281
  }
282
 
283
+ /* Info Text (Description) */
284
+ span.description, .description {
285
+ color: #000000 !important;
286
+ font-weight: 600 !important;
287
+ text-shadow: 0 0 2px #ffffff !important;
288
+ opacity: 1 !important;
289
  }
290
 
291
+ /* Fix Radio/Checkbox alignment & styling */
292
+ fieldset label span {
293
+ margin-bottom: 0 !important;
294
+ text-shadow: none !important;
295
  font-weight: 600 !important;
296
+ color: #0f172a !important; /* Dark text for unselected options (white background) */
297
+ display: flex !important;
298
+ align-items: center !important;
 
299
  }
300
 
301
+ /* Selected radio button text should be white */
302
+ fieldset label.selected span {
303
+ color: #ffffff !important;
 
 
304
  }
305
 
306
+ /* Radio group title (e.g., Difficulty Level) */
307
+ fieldset legend, fieldset legend span,
308
+ .gr-radio > label, .gr-radio > label span,
309
+ .gradio-container .label-wrap, .gradio-container .label-wrap span {
310
+ color: #000000 !important;
311
+ font-weight: 700 !important;
312
+ text-shadow: 0 0 2px #ffffff, 0 0 4px #ffffff !important;
313
  }
314
 
315
+ /* Inputs & Textareas - Dark Grey Background for Contrast */
316
+ .gr-input, textarea, input, .gr-box, .gr-check-radio, .gr-dropdown {
 
 
317
  font-family: 'JetBrains Mono', monospace !important;
318
+ background-color: #1e293b !important; /* Slate 800 - Lighter than bg, darker than text */
319
+ border: 1px solid #64748b !important; /* Visible Slate Border */
320
+ color: #ffffff !important;
321
+ box-shadow: none !important;
322
  }
323
 
324
+ /* Focus state */
325
+ .gr-input:focus, textarea:focus, input:focus {
326
+ border-color: #ffffff !important; /* White border on focus */
327
+ background-color: #334155 !important; /* Slightly lighter on focus */
328
  }
329
 
330
+ /* Override default block backgrounds */
331
+ .gradio-container .block, .gradio-container .panel {
332
+ background-color: transparent !important;
333
+ border: none !important;
334
  }
335
 
336
+ /* Fix for dropdown options background */
337
+ ul.options, .gr-dropdown-options {
338
+ background-color: #1e293b !important;
339
+ color: #ffffff !important;
340
+ border: 1px solid #64748b !important;
341
  }
342
 
343
+ /* Markdown prose */
344
+ .prose, .prose p, .prose h1, .prose h2, .prose h3, .prose strong, .prose li {
345
+ color: var(--text-light) !important;
346
  }
347
 
348
+ /* Buttons */
349
+ .gr-button-primary {
350
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
351
+ border: none !important;
352
+ color: white !important;
353
+ font-weight: 600 !important;
354
+ border-radius: 8px !important;
355
+ transition: transform 0.2s, box-shadow 0.2s !important;
356
  }
357
 
358
+ .gr-button-primary:hover {
359
+ transform: translateY(-1px) !important;
360
+ box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3) !important;
 
 
361
  }
362
 
363
+ .gr-button-secondary {
364
+ background: rgba(30, 41, 59, 0.8) !important;
365
+ border: 1px solid rgba(148, 163, 184, 0.3) !important;
366
+ color: var(--text-gray) !important;
367
  border-radius: 8px !important;
 
 
 
 
 
368
  }
369
 
370
+ .gr-button-secondary:hover {
371
+ background: rgba(51, 65, 85, 0.8) !important;
372
+ color: var(--text-light) !important;
373
  }
374
 
375
+ /* Tabs */
376
+ .tabs {
377
+ border: none !important;
378
+ background: transparent !important;
379
+ margin-bottom: 2rem !important;
380
+ }
381
+
382
+ .tab-nav {
383
+ border-bottom: 1px solid rgba(148, 163, 184, 0.2) !important;
384
+ justify-content: center !important;
385
  }
386
 
387
+ .tab-nav button {
388
+ font-weight: 600 !important;
389
+ font-size: 1rem !important;
390
+ color: var(--text-gray) !important;
391
+ transition: all 0.3s ease !important;
392
  }
393
 
394
+ .tab-nav button.selected {
395
+ color: #818cf8 !important;
396
+ border-bottom: 2px solid #818cf8 !important;
397
  }
398
 
399
+ /* Section Header */
400
+ .section-header {
401
+ color: #818cf8 !important;
402
+ font-weight: 700 !important;
403
+ font-size: 1.5rem !important;
404
+ margin-bottom: 1.5rem !important;
405
+ padding-bottom: 0.5rem !important;
406
+ border-bottom: 2px solid rgba(129, 140, 248, 0.3) !important;
407
+ text-shadow: 0 2px 4px rgba(0,0,0,0.3);
408
  }
409
 
410
+ /* Footer */
411
+ .footer-text {
412
+ text-align: center;
413
+ margin-top: 4rem;
414
+ padding: 2rem;
415
+ color: var(--text-gray);
416
+ font-size: 0.9rem;
417
+ border-top: 1px solid rgba(148, 163, 184, 0.1);
418
+ }
419
+ .footer-text a {
420
+ color: #818cf8 !important;
421
  }
422
 
423
+ /* Accordion */
424
+ .gr-accordion {
425
+ background-color: rgba(30, 41, 59, 0.4) !important;
426
+ border: 1px solid rgba(148, 163, 184, 0.2) !important;
427
  }
428
  """
429
 
430
  # Build Gradio interface
431
+ with gr.Blocks(title="UltraData Math Parser", css=custom_css, theme=gr.themes.Soft()) as demo:
 
432
  gr.HTML('<h1 class="main-title">📐 UltraData Math Parser</h1>')
433
  gr.HTML('<p class="subtitle">Unified HTML Parser for Mathematical Content Extraction</p>')
434
 
435
  with gr.Row():
436
+ with gr.Column(scale=1, elem_classes=["glass-panel"]):
437
  gr.HTML('<div class="section-header">📥 Input</div>')
438
 
439
  with gr.Tabs():
 
491
  parse_btn = gr.Button("🚀 Parse HTML", variant="primary", size="lg")
492
  clear_btn = gr.Button("🗑️ Clear", variant="secondary", size="lg")
493
 
494
+ with gr.Column(scale=1, elem_classes=["glass-panel"]):
495
  gr.HTML('<div class="section-header">📤 Output</div>')
496
 
497
  title_output = gr.Textbox(
 
554
 
555
  # Footer info
556
  gr.HTML("""
557
+ <div class="footer-text">
558
  <p>🔬 <strong>UltraData Math Parser</strong> - Part of the UltraData-Math Project</p>
559
  <p>Specialized in extracting mathematical content from web pages with MathML, LaTeX, and formula support.</p>
560
  </div>