garvitsachdeva Claude Sonnet 4.6 commited on
Commit
c0997b4
·
1 Parent(s): 4bad83e

Improve Gradio UI: fix theme, add CSS, clean up layout

Browse files

Move theme to launch() per Gradio 5 deprecation notice.
Add monospace log box, bolder status display, hide footer.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Files changed (1) hide show
  1. app.py +29 -13
app.py CHANGED
@@ -422,28 +422,44 @@ def _get_state():
422
  return label, "\n".join(_logs[-120:])
423
 
424
 
425
- with gr.Blocks(title="SpindleFlow RL Training", theme=gr.themes.Soft()) as demo:
426
- gr.Markdown("# SpindleFlow RL Training Dashboard")
427
- gr.Markdown(
428
- "Training runs automatically on startup. "
429
- "Click **Refresh** every 30 s to see progress. "
430
- "When complete the model is pushed to your HF Hub repo."
431
- )
432
 
433
- with gr.Row():
434
- status_box = gr.Textbox(label="Status", value="⏳ Starting...",
435
- interactive=False, scale=3)
436
- refresh_btn = gr.Button("🔄 Refresh", scale=1, variant="primary")
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
437
 
438
  log_box = gr.Textbox(
439
  label="Training log (last 120 lines)",
440
  value="",
441
- lines=30,
442
  max_lines=40,
443
  interactive=False,
 
444
  )
445
 
446
  refresh_btn.click(fn=_get_state, outputs=[status_box, log_box])
447
  demo.load(fn=_get_state, outputs=[status_box, log_box])
448
 
449
- demo.launch()
 
422
  return label, "\n".join(_logs[-120:])
423
 
424
 
425
+ CSS = """
426
+ .status-box textarea { font-size: 1.1rem !important; font-weight: 600 !important; }
427
+ .log-box textarea { font-family: monospace !important; font-size: 0.82rem !important; }
428
+ .title-md h1 { font-size: 2rem !important; margin-bottom: 0.2rem !important; }
429
+ .subtitle-md p { color: #64748b !important; margin-top: 0 !important; }
430
+ footer { display: none !important; }
431
+ """
432
 
433
+ with gr.Blocks(title="SpindleFlow RL Training", css=CSS) as demo:
434
+ with gr.Column(elem_classes="title-md"):
435
+ gr.Markdown("# 🤖 SpindleFlow RL — Training Dashboard")
436
+ with gr.Column(elem_classes="subtitle-md"):
437
+ gr.Markdown(
438
+ "Training runs automatically on startup. "
439
+ "Click **Refresh** every 30 s to see live progress. "
440
+ "When complete the model is pushed to your HF Hub repo."
441
+ )
442
+
443
+ with gr.Row(equal_height=True):
444
+ status_box = gr.Textbox(
445
+ label="Status",
446
+ value="⏳ Starting...",
447
+ interactive=False,
448
+ scale=4,
449
+ elem_classes="status-box",
450
+ )
451
+ refresh_btn = gr.Button("🔄 Refresh", scale=1, variant="primary", size="lg")
452
 
453
  log_box = gr.Textbox(
454
  label="Training log (last 120 lines)",
455
  value="",
456
+ lines=28,
457
  max_lines=40,
458
  interactive=False,
459
+ elem_classes="log-box",
460
  )
461
 
462
  refresh_btn.click(fn=_get_state, outputs=[status_box, log_box])
463
  demo.load(fn=_get_state, outputs=[status_box, log_box])
464
 
465
+ demo.launch(theme=gr.themes.Soft())