UI refinement: pill badges, settings in accordion, cleaner header/footer, tighter spacing

app.py

@@ -297,12 +297,17 @@ def run_custom(prompt, neg, res, steps, cfg, shift, scheduler, sampler, ckpt, se
 # UI
 # ═══════════════════════════════════════════════════════════════════
 CSS = """
-.status-box { min-height: 70px; }
-.model-badge { display: inline-block; padding: 5px 12px; border-radius: 6px; background: #1e293b; color: #94a3b8; font-size: 12px; font-family: monospace; margin: 2px 4px 2px 0; }
-/* Ensure gallery images have subtle border for visibility on white backgrounds */
+.status-box { min-height: 60px; }
+.model-badge {
+    display: inline-block; padding: 5px 12px; border-radius: 20px;
+    background: #1e293b; color: #94a3b8; font-size: 11px;
+    font-family: monospace; margin: 2px 4px 2px 0; border: 1px solid #334155;
+}
 .gallery-item img { border-radius: 8px; }
-/* Make accordions more compact */
-.block.padded { padding: 12px !important; }
+/* Tighter accordion spacing */
+.accordion { margin-bottom: 4px !important; }
+/* Settings group visual */
+.settings-group { border-left: 3px solid #6366f1; padding-left: 12px; margin: 8px 0; }
 """
 
 with gr.Blocks(title="Zeta-Chroma Test Bench", theme=gr.themes.Soft(), css=CSS, js="""function() {
@@ -325,14 +330,7 @@ with gr.Blocks(title="Zeta-Chroma Test Bench", theme=gr.themes.Soft(), css=CSS,
 }""") as ui:
     # ── Header ──
     gr.Markdown("# \U0001f3a8 Zeta-Chroma Test Bench")
-    gr.Markdown("Generate images with [Zeta-Chroma](https://huggingface.co/lodestones/Zeta-Chroma) \u2014 a pixel-space diffusion model. Custom pipeline from ComfyUI source. **No VAE, direct RGB output.**")
-    # Model badge — age is computed by JS injected via head param (Gradio SSR strips inline scripts)
-
-    gr.HTML(f'<span class="model-badge">\U0001f516 {FINETUNE_MODEL_ID} @ {MODEL_COMMIT_SHA}</span> '
-
-           f'<span class="model-badge" id="model-age" data-utc="{MODEL_FILE_DATE}">\u231b loaded {MODEL_FILE_AGE}</span> '
-
-           f'<span class="model-badge">\u26a0\ufe0f WIP Checkpoint</span>')
+    gr.HTML(f'<div style="margin:-8px 0 12px 0;"><span class="model-badge">\U0001f516 {FINETUNE_MODEL_ID} @ {MODEL_COMMIT_SHA}</span><span class="model-badge" id="model-age" data-utc="{MODEL_FILE_DATE}">\u231b loaded {MODEL_FILE_AGE}</span><span class="model-badge">\u26a0\ufe0f WIP</span><span class="model-badge">\U0001f4e1 Pixel-space \u00b7 No VAE</span></div>')
 
 
     with gr.Tabs():
@@ -349,25 +347,23 @@ with gr.Blocks(title="Zeta-Chroma Test Bench", theme=gr.themes.Soft(), css=CSS,
             # Gallery (the main content)
             g = gr.Gallery(label="Results", columns=2, object_fit="contain", format="png", show_download_button=True, show_share_button=True, preview=True)
 
-            # Settings — grouped by component type for consistent row heights
-            with gr.Row(equal_height=True):
-                suite_seed = gr.Number(label="Seed", value=DEFAULT_SEED, precision=0)
-                suite_res = gr.Dropdown(label="Resolution", choices=RESOLUTIONS, value="1024\u00d71024")
-                suite_neg = gr.Textbox(label="Negative Prompt", value=DEFAULT_NEG, lines=1, scale=3)
-            with gr.Row(equal_height=True):
-                suite_steps = gr.Slider(label="Steps", minimum=10, maximum=100, value=DEFAULT_STEPS, step=1)
-                suite_cfg = gr.Slider(label="CFG Scale", minimum=1.0, maximum=15.0, value=DEFAULT_CFG, step=0.1)
-                suite_shift = gr.Slider(label="Shift", minimum=1.0, maximum=15.0, value=DEFAULT_SHIFT, step=0.5)
-                suite_sampler = gr.Dropdown(label="Sampler", choices=SAMPLERS, value=DEFAULT_SAMPLER)
-                suite_sched = gr.Dropdown(label="Scheduler", choices=SCHEDULERS, value=DEFAULT_SCHEDULER)
-
-
-            with gr.Row():
-                restore_settings_btn = gr.Button("\U0001f504 Reset Settings", size="sm", variant="secondary")
-                restore_prompts_btn = gr.Button("\U0001f504 Reset All Prompts", size="sm", variant="secondary")
+            # Settings in a collapsible section
+            with gr.Accordion("\u2699\ufe0f Settings", open=True):
+                with gr.Row(equal_height=True):
+                    suite_seed = gr.Number(label="Seed", value=DEFAULT_SEED, precision=0)
+                    suite_res = gr.Dropdown(label="Resolution", choices=RESOLUTIONS, value="1024\u00d71024")
+                    suite_sampler = gr.Dropdown(label="Sampler", choices=SAMPLERS, value=DEFAULT_SAMPLER)
+                    suite_sched = gr.Dropdown(label="Scheduler", choices=SCHEDULERS, value=DEFAULT_SCHEDULER)
+                with gr.Row(equal_height=True):
+                    suite_steps = gr.Slider(label="Steps", minimum=10, maximum=100, value=DEFAULT_STEPS, step=1)
+                    suite_cfg = gr.Slider(label="CFG", minimum=1.0, maximum=15.0, value=DEFAULT_CFG, step=0.1)
+                    suite_shift = gr.Slider(label="Shift", minimum=1.0, maximum=15.0, value=DEFAULT_SHIFT, step=0.5)
+                suite_neg = gr.Textbox(label="Negative Prompt", value=DEFAULT_NEG, lines=1)
+                with gr.Row():
+                    restore_settings_btn = gr.Button("\U0001f504 Reset Settings", size="sm", variant="secondary")
+                    restore_prompts_btn = gr.Button("\U0001f504 Reset All Prompts", size="sm", variant="secondary")
 
             # Editable prompts in grouped accordions
-            gr.Markdown("---")
             gr.Markdown("#### \U0001f4dd Prompts *(editable \u2014 resets on refresh)*")
 
             prompt_boxes = []
@@ -392,7 +388,9 @@ with gr.Blocks(title="Zeta-Chroma Test Bench", theme=gr.themes.Soft(), css=CSS,
                     tb = gr.Textbox(value=TEST_PROMPTS[i]["prompt"], label=TEST_PROMPTS[i]["name"], lines=2, show_copy_button=True)
                     prompt_boxes.append(tb)
 
-            log = gr.Textbox(label="Run History", value=format_log(), interactive=False, lines=3)
+
+            with gr.Accordion("\U0001f4dc Run History", open=False):
+                log = gr.Textbox(value=format_log(), interactive=False, lines=3, show_label=False)
 
             # Wire events
             suite_event = btn.click(fn=run_test_suite, inputs=[suite_seed, suite_steps, suite_cfg, suite_shift, suite_res, suite_neg, suite_sched, suite_sampler, suite_ckpt] + prompt_boxes, outputs=[g, st, log])
@@ -421,8 +419,9 @@ with gr.Blocks(title="Zeta-Chroma Test Bench", theme=gr.themes.Soft(), css=CSS,
                         c_sched = gr.Dropdown(label="Scheduler", choices=SCHEDULERS, value=DEFAULT_SCHEDULER)
 
 
-                    cb = gr.Button("\U0001f3a8 Generate", variant="primary", size="lg")
-                    cso = gr.Textbox(label="Seed Used", interactive=False)
+                    with gr.Row():
+                        cb = gr.Button("\U0001f3a8 Generate", variant="primary", size="lg", scale=3)
+                        cso = gr.Textbox(label="Seed", interactive=False, scale=1)
 
                     # Example prompts
                     gr.Markdown("#### \U0001f4a1 Examples *(click to use)*")
@@ -434,9 +433,8 @@ with gr.Blocks(title="Zeta-Chroma Test Bench", theme=gr.themes.Soft(), css=CSS,
             cb.click(fn=run_custom, inputs=[cp, cn, cr, cs, cc, csh, c_sched, c_sampler, c_ckpt, cse, csr], outputs=[ci, cso])
 
     # Footer
-    # Footer — pure markdown (Gradio won't render markdown links inside HTML tags like <center>/<small>)
-    gr.Markdown("---")
-    gr.Markdown(f"*[Zeta-Chroma](https://huggingface.co/lodestones/Zeta-Chroma) \u00b7 `{MODEL_COMMIT_SHA}` \u00b7 NextDiTPixelSpace \u00b7 Qwen3 \u00b7 Pixel-space (no VAE) \u00b7 [Source](https://huggingface.co/spaces/chipfoxx/zeta-chroma-test-bench)*")
+    gr.HTML('<hr style="margin:24px 0 12px;border-color:#1e293b;">')
+    gr.Markdown(f"*[Zeta-Chroma](https://huggingface.co/lodestones/Zeta-Chroma) \u00b7 `{MODEL_COMMIT_SHA}` \u00b7 [Source Code](https://huggingface.co/spaces/chipfoxx/zeta-chroma-test-bench/tree/main)*")
 
 # ═══════════════════════════════════════════════════════════════════
 # Webhook