feat(ui): soft dark restraint redesign — native gr.Radio + accordion + lora toggle

Drops the custom model-card grid, the popover tooltip pattern, the JS shim,
and the decorative CSS. Uses Gradio-native shapes throughout (gr.Radio for
Base/Turbo, gr.Checkbox to toggle LoRA visibility, gr.Accordion for advanced
width/height/seed, info= subtitle text in place of the (i) icon).

Adds the ControlNet preprocessor preview slot (Canny / Depth / Pose render
live as the user changes the dropdown).

Single output meta under the image (the prior mockup duplicated it inside
Advanced).

app.py

@@ -24,6 +24,7 @@ import gradio as gr
 import backend
 import lora as lora_mod
 import models
+import preprocessors
 import theme
 import ui
 
@@ -93,12 +94,26 @@ def _coerce_lora(lora_path: str | None) -> Path | None:
 
 
 def _on_model_change(model_name: str) -> tuple[int, float]:
-    """When the user clicks Base / Turbo in the custom selector, update steps + cfg."""
+    """When the user picks Base / Turbo in the radio, update steps + cfg defaults."""
     if model_name == "Base":
         return 25, 4.0
     return 8, 1.0  # Turbo
 
 
+def _preview_cn(image, mode):
+    """Render the live preprocessor preview next to the input on the ControlNet tab.
+
+    Wrapped in ``try/except`` so that a missing optional dep (controlnet_aux for
+    Depth / Pose) never breaks the form — it just falls back to the raw input.
+    """
+    if image is None:
+        return None
+    try:
+        return preprocessors.run(mode, image)
+    except Exception:
+        return image
+
+
 def _esrgan_path() -> str:
     """Locate the preloaded RealESRGAN_x4plus.pth."""
     from huggingface_hub import hf_hub_download
@@ -115,10 +130,13 @@ def on_t2i_generate(
     width,
     height,
     seed,
+    lora_enabled,
     lora_path,
     lora_strength,
     progress=gr.Progress(track_tqdm=True),  # noqa: B008
 ):
+    if not lora_enabled:
+        lora_path = None
     try:
         lora_p = _coerce_lora(lora_path)
     except lora_mod.LoRAValidationError as e:
@@ -147,10 +165,13 @@ def on_controlnet_generate(
     controlnet_scale,
     steps,
     seed,
+    lora_enabled,
     lora_path,
     lora_strength,
     progress=gr.Progress(track_tqdm=True),  # noqa: B008
 ):
+    if not lora_enabled:
+        lora_path = None
     try:
         lora_p = _coerce_lora(lora_path)
     except lora_mod.LoRAValidationError as e:
@@ -176,10 +197,13 @@ def on_upscale_generate(
     refine_steps,
     refine_denoise,
     seed,
+    lora_enabled,
     lora_path,
     lora_strength,
     progress=gr.Progress(track_tqdm=True),  # noqa: B008
 ):
+    if not lora_enabled:
+        lora_path = None
     try:
         lora_p = _coerce_lora(lora_path)
     except lora_mod.LoRAValidationError as e:
@@ -203,42 +227,16 @@ def on_upscale_generate(
 
 HEADER_HTML = """
 <div style="display:flex;justify-content:space-between;align-items:baseline;padding:8px 0 4px 0;">
-  <div style="font-family:'Geist',sans-serif;font-size:16px;font-weight:600;letter-spacing:-0.02em;">
-    z<span style="color:#FFB02E;">·</span>image studio
+  <div style="font-size:16px;font-weight:600;letter-spacing:-0.01em;">
+    z-image-studio<span class="zis-brand-period">.</span>
   </div>
-  <div class="zis-status">ready</div>
+  <div class="zis-status-dot" style="font-size:11px;color:#988B7C;letter-spacing:0.02em;">ready</div>
 </div>
 """.strip()
 
 
-_HEAD_JS = """
-<script>
-window.zis = {
-    setModel: function(name) {
-        document.querySelectorAll('.zis-model').forEach(el => {
-            el.classList.toggle('on', el.dataset.value === name);
-        });
-        const hidden = document.querySelector('#zis-model-state textarea, #zis-model-state input');
-        if (hidden) {
-            hidden.value = name;
-            hidden.dispatchEvent(new Event('input', { bubbles: true }));
-        }
-    }
-};
-// Tap-to-pin tooltips on mobile
-document.addEventListener('touchstart', function(e) {
-    const tip = e.target.closest('.zis-info');
-    document.querySelectorAll('.zis-info.shown').forEach(el => {
-        if (el !== tip) el.classList.remove('shown');
-    });
-    if (tip) tip.classList.toggle('shown');
-}, { passive: true });
-</script>
-""".strip()
-
-
 def build_app() -> gr.Blocks:
-    with gr.Blocks(theme=theme.build_theme(), css=theme.CSS, head=_HEAD_JS, title="z-image-studio") as demo:
+    with gr.Blocks(theme=theme.build_theme(), css=theme.CSS, title="z-image-studio") as demo:
         gr.HTML(HEADER_HTML)
 
         with gr.Tabs():
@@ -249,22 +247,35 @@ def build_app() -> gr.Blocks:
                     inputs=[
                         t["prompt"],
                         t["negative_prompt"],
-                        t["model_state"],
+                        t["model"],
                         t["steps"],
                         t["cfg"],
                         t["width"],
                         t["height"],
                         t["seed"],
+                        t["lora_enabled"],
                         t["lora_path"],
                         t["lora_strength"],
                     ],
                     outputs=[t["output_image"], t["output_meta"]],
                 )
-                t["model_state"].change(
+                # Radio change → update step / cfg defaults + reveal Base-only fields.
+                t["model"].change(
                     fn=_on_model_change,
-                    inputs=[t["model_state"]],
+                    inputs=[t["model"]],
                     outputs=[t["steps"], t["cfg"]],
                 )
+                t["model"].change(
+                    fn=lambda m: gr.Group(visible=(m == "Base")),
+                    inputs=[t["model"]],
+                    outputs=[t["base_group"]],
+                )
+                # LoRA checkbox → reveal file + strength.
+                t["lora_enabled"].change(
+                    fn=lambda v: gr.Group(visible=v),
+                    inputs=[t["lora_enabled"]],
+                    outputs=[t["lora_group"]],
+                )
 
             with gr.Tab("ControlNet"):
                 c = ui.build_controlnet_tab()
@@ -277,11 +288,29 @@ def build_app() -> gr.Blocks:
                         c["controlnet_scale"],
                         c["steps"],
                         c["seed"],
+                        c["lora_enabled"],
                         c["lora_path"],
                         c["lora_strength"],
                     ],
                     outputs=[c["output_image"], c["output_meta"]],
                 )
+                # Live preprocessor preview — fires on input change or mode change.
+                c["input_image"].change(
+                    fn=_preview_cn,
+                    inputs=[c["input_image"], c["preprocessor"]],
+                    outputs=[c["preview_image"]],
+                )
+                c["preprocessor"].change(
+                    fn=_preview_cn,
+                    inputs=[c["input_image"], c["preprocessor"]],
+                    outputs=[c["preview_image"]],
+                )
+                # LoRA checkbox → reveal file + strength.
+                c["lora_enabled"].change(
+                    fn=lambda v: gr.Group(visible=v),
+                    inputs=[c["lora_enabled"]],
+                    outputs=[c["lora_group"]],
+                )
 
             with gr.Tab("Upscale"):
                 u = ui.build_upscale_tab()
@@ -293,11 +322,17 @@ def build_app() -> gr.Blocks:
                         u["refine_steps"],
                         u["refine_denoise"],
                         u["seed"],
+                        u["lora_enabled"],
                         u["lora_path"],
                         u["lora_strength"],
                     ],
                     outputs=[u["output_image"], u["output_meta"]],
                 )
+                u["lora_enabled"].change(
+                    fn=lambda v: gr.Group(visible=v),
+                    inputs=[u["lora_enabled"]],
+                    outputs=[u["lora_group"]],
+                )
     return demo
 
 

tests/test_app.py

@@ -11,3 +11,19 @@ def test_on_model_change_returns_turbo_defaults():
 
 def test_on_model_change_unknown_falls_back_to_turbo():
     assert app._on_model_change("Edit") == (8, 1.0)
+
+
+def test_preview_cn_returns_none_when_no_image():
+    assert app._preview_cn(None, "Canny") is None
+
+
+def test_preview_cn_falls_back_to_input_on_error():
+    """If the preprocessor raises (e.g. missing optional dep), pass-through."""
+
+    from PIL import Image
+
+    img = Image.new("RGB", (16, 16), "white")
+    # "BogusMode" raises ValueError inside preprocessors.run — _preview_cn should
+    # swallow it and return the raw input.
+    out = app._preview_cn(img, "BogusMode")
+    assert out is img

tests/test_theme.py

@@ -1,68 +1,49 @@
+import gradio as gr
+
 import theme
 
 
-def test_amber_palette_tokens_match_spec():
-    pal = theme.AMBER
-    assert pal["body_bg"] == "#0F0C08"
-    assert pal["text"] == "#FAF1E3"
-    assert pal["text_dim"] == "#A89478"
-    assert pal["border"] == "#2A2218"
+def test_palette_tokens_match_soft_dark_restraint_spec():
+    pal = theme.PALETTE
+    assert pal["body_bg"] == "#1A1614"
+    assert pal["text"] == "#F0E8DD"
+    assert pal["text_dim"] == "#988B7C"
+    assert pal["border"] == "#2A241E"
     assert pal["accent"] == "#FFB02E"
     assert pal["accent_text"] == "#1A1208"
-    assert pal["radius"] == "8px"
+    assert pal["radius"] == "6px"
 
 
 def test_build_theme_returns_gradio_base():
-    import gradio as gr
-
     th = theme.build_theme()
     assert isinstance(th, gr.themes.Base)
 
 
-def test_css_string_contains_critical_selectors():
-    css = theme.CSS
-    # warm vignette + amber button glow are the two decorations the spec calls out
-    assert "radial-gradient" in css
-    assert "rgba(255,176,46" in css.lower() or "255, 176, 46" in css.lower()
-
-
-def test_fonts_geist_and_geist_mono():
+def test_theme_drops_mono_font():
+    """Redesign uses Inter only — no Geist / Geist Mono / mono custom font."""
     th = theme.build_theme()
-
-    # (a) Iterable lists: .font_list / .font_mono_list expose the original entries.
-    fonts = [str(f) for f in th.font_list]
-    assert any("Geist" in f for f in fonts)
-    monos = [str(f) for f in th.font_mono_list]
-    assert any("Geist Mono" in f for f in monos)
-
-    # (b) CSS variables: _get_theme_css() must emit --font and --font-mono that
-    #     reference Geist / Geist Mono so the browser actually loads the fonts.
-    #     This assertion is what catches the original bug where property setters
-    #     redirected self.font → font_str, causing --font-str to be emitted instead.
     css = th._get_theme_css()
-    assert "--font:" in css, "--font CSS variable missing from generated theme CSS"
-    assert "--font-mono:" in css, "--font-mono CSS variable missing from generated theme CSS"
-    assert "Geist" in css, "Geist font name missing from generated theme CSS"
-    assert "Geist Mono" in css, "Geist Mono font name missing from generated theme CSS"
+    assert "Geist" not in css
+    assert "Geist Mono" not in css
 
 
-def test_css_includes_param_tooltip_rule():
+def test_css_includes_soon_row_styling():
     css = theme.CSS
-    assert ".zis-info" in css
-    assert "data-info" in css  # attr() reference in ::after
-    assert "::after" in css
+    assert ".zis-soon-row" in css
+    assert ".zis-soon-row a" in css
 
 
-def test_css_includes_model_selector_rules():
+def test_css_includes_compact_lora_file_widget():
     css = theme.CSS
-    assert ".zis-models" in css
-    assert ".zis-model" in css
-    assert ".zis-model.on" in css
-    assert ".zis-model.soon" in css
+    assert ".zis-lora-file" in css
+    assert "min-height: 56px" in css
 
 
-def test_css_model_grid_is_responsive():
+def test_css_does_not_reference_deleted_selectors():
     css = theme.CSS
-    assert "grid-template-columns" in css
-    assert "@media" in css
-    assert "min-width: 768px" in css or "min-width:768px" in css
+    # Old (i) tooltip pattern is gone — info= flows through gr.* directly.
+    assert ".zis-info" not in css
+    # Old custom card grid is gone — gr.Radio replaces it.
+    assert ".zis-models" not in css
+    assert ".zis-model.on" not in css
+    assert ".zis-model.soon" not in css

tests/test_ui.py

@@ -4,48 +4,6 @@ import pytest
 import ui
 
 
-def test_labeled_label_returns_html_string():
-    out = ui.labeled_label("Steps", "Denoising steps.")
-    assert isinstance(out, str)
-    assert "<label" in out and "</label>" in out
-    assert ">Steps<" in out
-    assert 'data-info="Denoising steps."' in out
-    assert ">i<" in out  # the icon glyph
-
-
-def test_labeled_label_escapes_html_chars():
-    out = ui.labeled_label("Steps <x>", 'A "quoted" hint')
-    assert "<x>" not in out
-    assert "&lt;x&gt;" in out
-    assert "&quot;quoted&quot;" in out
-
-
-def test_model_selector_html_marks_current_as_on():
-    out = ui.model_selector_html(current="Turbo")
-    assert 'class="zis-model on" data-value="Turbo"' in out
-    assert 'class="zis-model" data-value="Base"' in out
-
-
-def test_model_selector_html_includes_both_soon_cards_with_github_link():
-    out = ui.model_selector_html(current="Turbo")
-    assert out.count("github.com/Tongyi-MAI/Z-Image#-model-zoo") == 2
-    assert "Edit" in out
-    assert "Omni Base" in out
-    assert "soon-tag" in out
-    assert 'target="_blank"' in out
-    assert 'rel="noopener noreferrer"' in out
-
-
-def test_model_selector_html_defaults_to_turbo():
-    out = ui.model_selector_html()
-    assert 'class="zis-model on" data-value="Turbo"' in out
-
-
-def test_model_selector_html_escapes_current_value():
-    out = ui.model_selector_html(current="<script>alert(1)</script>")
-    assert "<script>" not in out
-
-
 @pytest.fixture(autouse=True)
 def _blocks_ctx():
     """Each builder must be called inside a gr.Blocks() context."""
@@ -53,12 +11,29 @@ def _blocks_ctx():
         yield
 
 
+def test_model_soon_row_links_to_zoo_twice():
+    html = ui._model_soon_row_html()
+    assert html.count(ui.MODEL_ZOO_URL) == 2
+    assert "Edit" in html and "Omni Base" in html
+    assert "(coming soon)" in html
+    assert 'target="_blank"' in html
+    assert 'rel="noopener noreferrer"' in html
+
+
+def test_model_soon_row_uses_dim_link_class():
+    html = ui._model_soon_row_html()
+    assert 'class="zis-soon-row"' in html
+
+
 def test_build_t2i_tab_returns_components():
     components = ui.build_t2i_tab()
     expected = {
         "prompt",
         "negative_prompt",
-        "model_state",
+        "model",
+        "base_group",
+        "lora_enabled",
+        "lora_group",
         "steps",
         "cfg",
         "width",
@@ -73,15 +48,40 @@ def test_build_t2i_tab_returns_components():
     assert expected.issubset(components.keys())
 
 
+def test_build_t2i_tab_model_is_native_radio():
+    components = ui.build_t2i_tab()
+    assert isinstance(components["model"], gr.Radio)
+    assert components["model"].value == "Turbo"
+    # Confirm the radio carries both choices. Gradio stores them as (label, value)
+    # tuples on the .choices attribute.
+    values = [c[1] for c in components["model"].choices]
+    assert values == ["Base", "Turbo"]
+
+
+def test_build_t2i_tab_lora_group_starts_hidden():
+    components = ui.build_t2i_tab()
+    assert components["lora_group"].visible is False
+    assert components["lora_enabled"].value is False
+
+
+def test_build_t2i_tab_base_group_starts_hidden():
+    """Turbo is the default model, so the Base-only fields are hidden up front."""
+    components = ui.build_t2i_tab()
+    assert components["base_group"].visible is False
+
+
 def test_build_controlnet_tab_returns_components():
     components = ui.build_controlnet_tab()
     expected = {
         "prompt",
         "input_image",
+        "preview_image",
         "preprocessor",
         "controlnet_scale",
         "steps",
         "seed",
+        "lora_enabled",
+        "lora_group",
         "lora_path",
         "lora_strength",
         "generate_btn",
@@ -91,6 +91,12 @@ def test_build_controlnet_tab_returns_components():
     assert expected.issubset(components.keys())
 
 
+def test_build_controlnet_tab_preview_is_non_interactive_image():
+    components = ui.build_controlnet_tab()
+    assert isinstance(components["preview_image"], gr.Image)
+    assert components["preview_image"].interactive is False
+
+
 def test_build_upscale_tab_returns_components():
     components = ui.build_upscale_tab()
     expected = {
@@ -99,6 +105,8 @@ def test_build_upscale_tab_returns_components():
         "refine_steps",
         "refine_denoise",
         "seed",
+        "lora_enabled",
+        "lora_group",
         "lora_path",
         "lora_strength",
         "generate_btn",

theme.py

@@ -1,54 +1,45 @@
-"""Onyx Amber theme — palette tokens, gr.themes.Base subclass, and CSS string."""
+"""Soft Dark Restraint theme — warm-toned dark surface with a single amber accent.
+
+Palette tokens, ``gr.themes.Base`` configuration, and a small CSS string that
+applies the touches Gradio's theme tokens can't express alone (link row under
+the model radio + compact LoRA file widget).
+"""
 
 from __future__ import annotations
 
 import gradio as gr
 
-AMBER: dict[str, str] = {
-    "body_bg": "#0F0C08",
-    "panel_bg": "#0F0C08",
-    "input_bg": "#0F0C08",
-    "canvas_bg": "#110D08",
-    "border": "#2A2218",
-    "text": "#FAF1E3",
-    "text_dim": "#A89478",
+# Single source of truth for the palette. The mockup at
+# ``.superpowers/brainstorm/47889-1778679653/content/simple-v1.html`` is the
+# locked spec for these values (Variant A — "Soft Dark Restraint").
+PALETTE: dict[str, str] = {
+    "body_bg": "#1A1614",
+    "panel_bg": "#1F1B17",
+    "input_bg": "#14110F",
+    "text": "#F0E8DD",
+    "text_dim": "#988B7C",
+    "border": "#2A241E",
+    "border_strong": "#3A3128",
     "accent": "#FFB02E",
     "accent_text": "#1A1208",
-    "radius": "8px",
-    "radius_sm": "6px",
+    "radius": "6px",
 }
 
 
-class _OnyxAmberBase(gr.themes.Base):
-    """gr.themes.Base subclass with helpers for iterating over font lists.
+def build_theme() -> gr.themes.Base:
+    """Return a Gradio theme matching the Soft Dark Restraint palette.
 
-    Gradio collapses font lists into a CSS string at __init__; we expose the
-    original lists via .font_list / .font_mono_list for code that needs to
-    iterate.  The public self.font / self.font_mono attributes are left alone so
-    that _get_theme_css() emits the correct --font / --font-mono CSS variables.
+    Uses Gradio's default font chain (Inter + system-ui fallbacks). No mono
+    font — the redesign drops monospaced UI text entirely.
     """
-
-    @property
-    def font_list(self) -> list:
-        """Return the original font list (GoogleFont + str entries)."""
-        return self._font
-
-    @property
-    def font_mono_list(self) -> list:
-        """Return the original monospace font list (GoogleFont + str entries)."""
-        return self._font_mono
-
-
-def build_theme() -> gr.themes.Base:
-    """Return a Gradio theme matching the Onyx Amber palette."""
-    return _OnyxAmberBase(
+    return gr.themes.Base(
         primary_hue=gr.themes.Color(
             c50="#FFF8E6",
             c100="#FFEFC2",
             c200="#FFE08A",
             c300="#FFD161",
             c400="#FFC042",
-            c500=AMBER["accent"],
+            c500=PALETTE["accent"],
             c600="#E69926",
             c700="#B37A1F",
             c800="#805717",
@@ -56,164 +47,85 @@ def build_theme() -> gr.themes.Base:
             c950="#1A1208",
         ),
         neutral_hue=gr.themes.Color(
-            c50="#FAF1E3",
-            c100="#E8DCC4",
-            c200="#D4C2A1",
-            c300="#A89478",
-            c400="#867054",
-            c500="#5C4D38",
-            c600="#3C3225",
-            c700="#2A2218",
-            c800="#1C170F",
-            c900="#100C08",
-            c950="#0A0805",
+            c50="#F0E8DD",
+            c100="#E0D5C3",
+            c200="#C8B89E",
+            c300="#988B7C",
+            c400="#7A6E60",
+            c500="#5C5246",
+            c600="#3A3128",
+            c700="#2A241E",
+            c800="#1F1B17",
+            c900="#1A1614",
+            c950="#14110F",
         ),
-        font=[gr.themes.GoogleFont("Geist"), "system-ui", "sans-serif"],
-        font_mono=[gr.themes.GoogleFont("Geist Mono"), "ui-monospace", "monospace"],
-        radius_size=gr.themes.sizes.radius_md,
+        radius_size=gr.themes.sizes.radius_sm,
     ).set(
-        body_background_fill=AMBER["body_bg"],
-        body_text_color=AMBER["text"],
-        body_text_color_subdued=AMBER["text_dim"],
-        background_fill_primary=AMBER["panel_bg"],
-        background_fill_secondary=AMBER["canvas_bg"],
-        block_background_fill=AMBER["panel_bg"],
-        block_border_color=AMBER["border"],
+        body_background_fill=PALETTE["body_bg"],
+        body_text_color=PALETTE["text"],
+        body_text_color_subdued=PALETTE["text_dim"],
+        background_fill_primary=PALETTE["panel_bg"],
+        background_fill_secondary=PALETTE["body_bg"],
+        block_background_fill=PALETTE["panel_bg"],
+        block_border_color=PALETTE["border"],
         block_border_width="1px",
-        block_radius=AMBER["radius"],
-        input_background_fill=AMBER["input_bg"],
-        input_border_color=AMBER["border"],
-        button_primary_background_fill=AMBER["accent"],
-        button_primary_background_fill_hover=AMBER["accent"],
-        button_primary_text_color=AMBER["accent_text"],
-        button_primary_border_color=AMBER["accent"],
-        slider_color=AMBER["accent"],
-        color_accent=AMBER["accent"],
+        block_radius=PALETTE["radius"],
+        input_background_fill=PALETTE["input_bg"],
+        input_border_color=PALETTE["border"],
+        button_primary_background_fill=PALETTE["accent"],
+        button_primary_background_fill_hover=PALETTE["accent"],
+        button_primary_text_color=PALETTE["accent_text"],
+        button_primary_border_color=PALETTE["accent"],
+        slider_color=PALETTE["accent"],
+        color_accent=PALETTE["accent"],
         color_accent_soft="rgba(255,176,46,0.12)",
     )
 
 
 CSS: str = """
-/* Onyx Amber — atmospheric layer that Gradio's theme can't express alone */
-
-body, .gradio-container {
-    background-image: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,176,46,0.06), transparent 70%);
-}
-
-/* Amber glow on primary button */
-.gradio-container button.primary {
-    box-shadow: 0 0 0 1px rgba(255,176,46,0.4), 0 8px 24px -8px rgba(255,176,46,0.35);
-}
-
-/* Slim status line typography */
-.zis-status {
-    font-family: 'Geist Mono', ui-monospace, monospace;
-    font-size: 11px;
-    letter-spacing: 0.06em;
-    color: #A89478;
-}
-
-/* LoRA file slot — solid amber border + slim icon when a file is loaded */
-.zis-lora.loaded {
-    border: 1px solid #FFB02E !important;
-}
-
-/* ===== Param tooltip — (i) icon next to labels (spec § 4.6) ===== */
-
-.zis-row-label {
-    display: inline-flex; align-items: center;
-    font-size: 11px; color: #A89478; font-weight: 500;
-    margin-bottom: 6px;
-}
-.zis-info {
-    display: inline-flex; align-items: center; justify-content: center;
-    width: 12px; height: 12px;
-    font: italic 600 8px 'Geist', system-ui, sans-serif;
-    border: 1px solid #2A2218; border-radius: 50%;
-    color: #A89478; vertical-align: super;
-    margin-left: 3px; cursor: help; position: relative;
-    transition: border-color 0.12s, color 0.12s;
-}
-.zis-info:hover { border-color: #FFB02E; color: #FFB02E; }
-.zis-info::after {
-    content: attr(data-info);
-    position: absolute; bottom: 100%; left: 50%;
-    transform: translateX(-50%) translateY(-4px);
-    background: #1C170F; color: #FAF1E3;
-    border: 1px solid #2A2218; border-radius: 6px;
-    padding: 6px 10px;
-    font: 400 11px 'Geist', system-ui, sans-serif; line-height: 1.4;
-    width: 200px; white-space: normal;
-    opacity: 0; pointer-events: none;
-    transition: opacity 0.12s; z-index: 50;
-    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
-}
-.zis-info:hover::after, .zis-info.shown::after { opacity: 1; }
-
-/* Hidden state carrier — in DOM for JS targeting, invisible to users */
-.zis-hidden { display: none !important; }
-
-/* ===== Custom model selector — 2-col phone / 4-col tablet+ (spec § 4.7) ===== */
-
-.zis-models {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 8px;
-    margin-bottom: 10px;
-}
-@media (min-width: 768px) {
-    .zis-models { grid-template-columns: repeat(4, 1fr); }
-}
-.zis-model {
-    display: flex; align-items: center; gap: 8px;
-    padding: 10px 12px;
-    border: 1px solid #2A2218; border-radius: 8px;
-    background: transparent; cursor: pointer;
-    color: #FAF1E3;
-    font: 500 12px 'Geist', system-ui, sans-serif;
-    text-decoration: none;
-    transition: opacity 0.15s, border-color 0.15s, background 0.15s;
-}
-.zis-model .dot {
-    width: 10px; height: 10px; border-radius: 50%;
-    border: 1px solid #2A2218; flex-shrink: 0;
-}
-.zis-model .name { flex: 1; text-align: left; }
-.zis-model.on {
-    background: #FFB02E; color: #1A1208; border-color: #FFB02E;
-}
-.zis-model.on .dot { background: #1A1208; border-color: #1A1208; }
-.zis-model.soon {
-    opacity: 0.55;
-    background: rgba(255,176,46,0.04);
-    border-style: dashed;
-    position: relative;
-}
-.zis-model.soon .name { color: #A89478; }
-.zis-model.soon .name .ext {
-    font-size: 10px; color: #FFB02E;
-    margin-left: 4px; vertical-align: super;
-}
-.zis-model.soon .soon-tag {
-    font-family: 'Geist Mono', ui-monospace, monospace;
-    font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase;
-    background: rgba(255,176,46,0.18); color: #FFB02E;
-    padding: 2px 6px; border-radius: 100px;
-    flex-shrink: 0;
-}
-.zis-model.soon:hover { opacity: 0.78; border-color: #FFB02E; }
-.zis-model.soon::after {
-    content: "Coming soon — opens GitHub";
-    position: absolute; bottom: 100%; left: 50%;
-    transform: translateX(-50%) translateY(-4px);
-    background: #1C170F; color: #FAF1E3;
-    border: 1px solid #2A2218; border-radius: 6px;
-    padding: 6px 10px;
-    font: 400 11px 'Geist', system-ui, sans-serif;
-    white-space: nowrap;
-    opacity: 0; pointer-events: none;
-    transition: opacity 0.12s; z-index: 50;
-    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
+/* Soft Dark Restraint — calm, single-accent decorations Gradio tokens can't express. */
+
+/* Small dim link row under the model radio (Edit / Omni Base · coming soon). */
+.zis-soon-row {
+    margin-top: 6px;
+    font-size: 12px;
+    color: #988B7C;
+    line-height: 1.45;
+}
+.zis-soon-row a {
+    color: #988B7C;
+    text-decoration: underline;
+    text-decoration-color: #3A3128;
+    text-underline-offset: 3px;
+}
+.zis-soon-row a:hover {
+    color: #F0E8DD;
+    text-decoration-color: #988B7C;
+}
+.zis-soon-row .sep {
+    margin: 0 6px;
+    color: #3A3128;
+}
+.zis-soon-row .dim {
+    margin-left: 6px;
+    color: #635A4E;
+}
+
+/* Compact LoRA file widget — tighten Gradio's default 400px drop zone. */
+.zis-lora-file .upload-container { min-height: 56px !important; padding: 8px 12px !important; }
+.zis-lora-file .icon-wrap, .zis-lora-file svg { display: none !important; }
+.zis-lora-file .wrap > * { text-align: left; }
+
+/* Brand period uses the accent — the only place the accent appears in chrome. */
+.zis-brand-period { color: #FFB02E; }
+
+/* Live-status dot — accent, matches the single-accent rule. */
+.zis-status-dot::before {
+    content: "";
+    display: inline-block;
+    width: 6px; height: 6px; border-radius: 50%;
+    background: #FFB02E;
+    margin-right: 6px;
+    vertical-align: middle;
 }
-.zis-model.soon:hover::after { opacity: 1; }
 """.strip()

ui.py

@@ -1,109 +1,118 @@
-"""Gradio UI builders + small HTML helpers for the (i) tooltip pattern and the custom model selector."""
+"""Gradio UI builders for z-image-studio (Soft Dark Restraint redesign).
 
-from __future__ import annotations
+Each ``build_*_tab()`` returns a dict of components so ``app.py:build_app``
+can wire ``.click()`` / ``.change()`` handlers without reaching into local
+scopes. All param help text flows through Gradio's native ``info=`` parameter
+(dim subtitle under each label) — no custom popover or (i) icon helper.
+"""
 
-from html import escape
+from __future__ import annotations
 
 import gradio as gr
 
 import preprocessors
 from tooltips import TOOLTIPS
 
-GITHUB_MODEL_ZOO_URL = "https://github.com/Tongyi-MAI/Z-Image#-model-zoo"
+# Link targets for the small dim row under the model radio. The Z-Image
+# README's Model Zoo section is the canonical "where to find more models"
+# anchor; Omni Base lives in the same README. When more models ship, swap
+# these constants and nothing else needs to change.
+MODEL_ZOO_URL = "https://github.com/Tongyi-MAI/Z-Image#-model-zoo"
 
 
-def labeled_label(text: str, info_text: str) -> str:
-    """Return HTML for a label with an (i) tooltip icon next to it.
+def _model_soon_row_html() -> str:
+    """Return the small dim link row that lives directly under the model radio.
 
-    Use immediately before a ``gr.Slider`` / ``gr.Textbox`` / ``gr.File`` etc.
-    that itself has ``show_label=False``. The CSS for ``.zis-row-label`` and
-    ``.zis-info`` is defined in :mod:`theme`.
+    Two anchor links + a "(coming soon)" qualifier. Static — no state, no JS.
     """
     return (
-        f'<label class="zis-row-label">{escape(text)}'
-        f'<span class="zis-info" data-info="{escape(info_text)}">i</span>'
-        f"</label>"
+        '<div class="zis-soon-row">'
+        f'<a href="{MODEL_ZOO_URL}" target="_blank" rel="noopener noreferrer">Edit ↗</a>'
+        '<span class="sep">·</span>'
+        f'<a href="{MODEL_ZOO_URL}" target="_blank" rel="noopener noreferrer">Omni Base ↗</a>'
+        '<span class="dim">(coming soon)</span>'
+        "</div>"
     )
 
 
-def model_selector_html(current: str = "Turbo") -> str:
-    """Custom T2I model selector — 2-col phone / 4-col tablet+ grid of cards.
+def build_t2i_tab() -> dict[str, gr.components.Component]:
+    with gr.Row():
+        with gr.Column(scale=4):
+            prompt = gr.Textbox(
+                label="Prompt",
+                info=TOOLTIPS["prompt"],
+                lines=4,
+                placeholder="A latina model peeking through pine branches…",
+            )
 
-    Two functional ``<button>`` cards (Base, Turbo) — clicks fire
-    ``zis.setModel('<name>')`` defined in app.py's ``head=`` script.
+            model = gr.Radio(
+                ["Base", "Turbo"],
+                value="Turbo",
+                label="Model",
+                info=TOOLTIPS["model"],
+            )
+            model_soon_row = gr.HTML(_model_soon_row_html())
 
-    Two coming-soon ``<a>`` cards (Edit, Omni Base) — open the Z-Image GitHub
-    README's Model Zoo section in a new tab. Marked with a `.soon` class and a
-    "soon" pill that doesn't overlap the model name (separate flex children).
-    """
-    current_safe = escape(current)
-    cards: list[str] = []
-    for name in ("Base", "Turbo"):
-        cls = "zis-model on" if name == current else "zis-model"
-        cards.append(
-            f'<button type="button" class="{cls}" data-value="{name}" '
-            f"onclick=\"zis.setModel('{name}')\">"
-            f'<span class="dot"></span>'
-            f'<span class="name">{name}</span>'
-            f"</button>"
-        )
-    for name in ("Edit", "Omni Base"):
-        cards.append(
-            f'<a class="zis-model soon" '
-            f'href="{GITHUB_MODEL_ZOO_URL}" '
-            f'target="_blank" rel="noopener noreferrer">'
-            f'<span class="dot"></span>'
-            f'<span class="name">{name}<span class="ext">↗</span></span>'
-            f'<span class="soon-tag">soon</span>'
-            f"</a>"
-        )
-    _ = current_safe  # current is matched in cls above; this line keeps escape() exercised
-    return f'<div class="zis-models">{"".join(cards)}</div>'
+            with gr.Group(visible=False) as base_group:
+                negative_prompt = gr.Textbox(
+                    label="Negative prompt",
+                    info=TOOLTIPS["negative_prompt"],
+                    lines=2,
+                    placeholder="blurry, lowres, distorted",
+                )
+                cfg = gr.Slider(
+                    0.5,
+                    12.0,
+                    value=1.0,
+                    step=0.1,
+                    label="CFG",
+                    info=TOOLTIPS["cfg"],
+                )
 
+            lora_enabled = gr.Checkbox(label="Use a LoRA", value=False)
+            with gr.Group(visible=False) as lora_group:
+                lora_path = gr.File(
+                    label="LoRA file",
+                    file_types=[".safetensors"],
+                    type="filepath",
+                    elem_classes=["zis-lora-file"],
+                )
+                lora_strength = gr.Slider(
+                    0.0,
+                    1.5,
+                    value=0.8,
+                    step=0.05,
+                    label="LoRA strength",
+                    info=TOOLTIPS["lora_strength"],
+                )
+
+            steps = gr.Slider(1, 50, value=8, step=1, label="Steps", info=TOOLTIPS["steps"])
+
+            with gr.Accordion("Advanced", open=False):
+                width = gr.Slider(384, 1536, value=1024, step=64, label="Width", info=TOOLTIPS["width"])
+                height = gr.Slider(384, 1536, value=1024, step=64, label="Height", info=TOOLTIPS["height"])
+                seed = gr.Number(value=0, precision=0, label="Seed", info=TOOLTIPS["seed"])
 
-def build_t2i_tab() -> dict[str, gr.components.Component]:
-    with gr.Row():
-        with gr.Column(scale=4):
-            gr.HTML(labeled_label("Prompt", TOOLTIPS["prompt"]))
-            prompt = gr.Textbox(lines=4, show_label=False, placeholder="A latina model peeking through pine branches…")
-            gr.HTML(labeled_label("Negative prompt (Base only)", TOOLTIPS["negative_prompt"]))
-            negative_prompt = gr.Textbox(lines=2, show_label=False, placeholder="blurry, lowres, distorted")
-            gr.HTML(labeled_label("Model", TOOLTIPS["model"]))
-            model_state = gr.Textbox(value="Turbo", elem_id="zis-model-state", elem_classes=["zis-hidden"])
-            gr.HTML(model_selector_html(current="Turbo"))
-            with gr.Row():
-                with gr.Column():
-                    gr.HTML(labeled_label("LoRA (optional)", TOOLTIPS["lora"]))
-                    lora_path = gr.File(file_types=[".safetensors"], type="filepath", show_label=False)
-                with gr.Column():
-                    gr.HTML(labeled_label("LoRA strength", TOOLTIPS["lora_strength"]))
-                    lora_strength = gr.Slider(0.0, 1.5, value=0.8, step=0.05, show_label=False)
-            with gr.Row():
-                with gr.Column():
-                    gr.HTML(labeled_label("Steps", TOOLTIPS["steps"]))
-                    steps = gr.Slider(1, 50, value=8, step=1, show_label=False)
-                with gr.Column():
-                    gr.HTML(labeled_label("CFG (Base only)", TOOLTIPS["cfg"]))
-                    cfg = gr.Slider(0.5, 12.0, value=1.0, step=0.1, show_label=False)
-            with gr.Row():
-                with gr.Column():
-                    gr.HTML(labeled_label("Width", TOOLTIPS["width"]))
-                    width = gr.Slider(384, 1536, value=1024, step=64, show_label=False)
-                with gr.Column():
-                    gr.HTML(labeled_label("Height", TOOLTIPS["height"]))
-                    height = gr.Slider(384, 1536, value=1024, step=64, show_label=False)
-                with gr.Column():
-                    gr.HTML(labeled_label("Seed (0 = random)", TOOLTIPS["seed"]))
-                    seed = gr.Number(value=0, precision=0, show_label=False)
             generate_btn = gr.Button("Generate", variant="primary")
+
         with gr.Column(scale=5):
-            gr.HTML(labeled_label("Output", TOOLTIPS["output"]))
-            output_image = gr.Image(type="pil", height=512, show_download_button=True, show_label=False)
+            gr.Markdown(f"**Output**  \n<span style='color:#988B7C;font-size:12px;'>{TOOLTIPS['output']}</span>")
+            output_image = gr.Image(
+                show_label=False,
+                type="pil",
+                height=512,
+                show_download_button=True,
+            )
             output_meta = gr.JSON(label="Meta", value={})
+
     return dict(
         prompt=prompt,
         negative_prompt=negative_prompt,
-        model_state=model_state,
+        model=model,
+        model_soon_row=model_soon_row,
+        base_group=base_group,
+        lora_enabled=lora_enabled,
+        lora_group=lora_group,
         steps=steps,
         cfg=cfg,
         width=width,
@@ -120,43 +129,95 @@ def build_t2i_tab() -> dict[str, gr.components.Component]:
 def build_controlnet_tab() -> dict[str, gr.components.Component]:
     with gr.Row():
         with gr.Column(scale=4):
-            gr.HTML(labeled_label("Prompt", TOOLTIPS["prompt"]))
-            prompt = gr.Textbox(lines=3, show_label=False)
-            gr.HTML(labeled_label("Control image", TOOLTIPS["controlnet_image"]))
-            input_image = gr.Image(type="pil", height=240, show_label=False)
-            with gr.Row():
-                with gr.Column():
-                    gr.HTML(labeled_label("Preprocessor", TOOLTIPS["controlnet_preprocessor"]))
-                    preprocessor = gr.Dropdown(list(preprocessors.MODES), value="Canny", show_label=False)
-                with gr.Column():
-                    gr.HTML(labeled_label("ControlNet scale", TOOLTIPS["controlnet_scale"]))
-                    controlnet_scale = gr.Slider(0.0, 2.0, value=1.0, step=0.05, show_label=False)
+            prompt = gr.Textbox(
+                label="Prompt",
+                info=TOOLTIPS["prompt"],
+                lines=3,
+            )
+
             with gr.Row():
                 with gr.Column():
-                    gr.HTML(labeled_label("LoRA (optional)", TOOLTIPS["lora"]))
-                    lora_path = gr.File(file_types=[".safetensors"], type="filepath", show_label=False)
+                    gr.Markdown(
+                        f"**Control image**  \n<span style='color:#988B7C;font-size:12px;'>"
+                        f"{TOOLTIPS['controlnet_image']}</span>"
+                    )
+                    input_image = gr.Image(
+                        show_label=False,
+                        type="pil",
+                        height=240,
+                    )
                 with gr.Column():
-                    gr.HTML(labeled_label("LoRA strength", TOOLTIPS["lora_strength"]))
-                    lora_strength = gr.Slider(0.0, 1.5, value=0.8, step=0.05, show_label=False)
+                    gr.Markdown(
+                        "**Preprocessor preview**  \n<span style='color:#988B7C;font-size:12px;'>"
+                        "Live edge map / depth map / pose. Updates as you change the preprocessor.</span>"
+                    )
+                    preview_image = gr.Image(
+                        show_label=False,
+                        type="pil",
+                        height=240,
+                        interactive=False,
+                    )
+
             with gr.Row():
-                with gr.Column():
-                    gr.HTML(labeled_label("Steps", TOOLTIPS["steps"]))
-                    steps = gr.Slider(1, 30, value=9, step=1, show_label=False)
-                with gr.Column():
-                    gr.HTML(labeled_label("Seed (0 = random)", TOOLTIPS["seed"]))
-                    seed = gr.Number(value=0, precision=0, show_label=False)
+                preprocessor = gr.Dropdown(
+                    list(preprocessors.MODES),
+                    value="Canny",
+                    label="Preprocessor",
+                    info=TOOLTIPS["controlnet_preprocessor"],
+                )
+                controlnet_scale = gr.Slider(
+                    0.0,
+                    2.0,
+                    value=1.0,
+                    step=0.05,
+                    label="ControlNet scale",
+                    info=TOOLTIPS["controlnet_scale"],
+                )
+
+            lora_enabled = gr.Checkbox(label="Use a LoRA", value=False)
+            with gr.Group(visible=False) as lora_group:
+                lora_path = gr.File(
+                    label="LoRA file",
+                    file_types=[".safetensors"],
+                    type="filepath",
+                    elem_classes=["zis-lora-file"],
+                )
+                lora_strength = gr.Slider(
+                    0.0,
+                    1.5,
+                    value=0.8,
+                    step=0.05,
+                    label="LoRA strength",
+                    info=TOOLTIPS["lora_strength"],
+                )
+
+            steps = gr.Slider(1, 30, value=9, step=1, label="Steps", info=TOOLTIPS["steps"])
+
+            with gr.Accordion("Advanced", open=False):
+                seed = gr.Number(value=0, precision=0, label="Seed", info=TOOLTIPS["seed"])
+
             generate_btn = gr.Button("Generate", variant="primary")
+
         with gr.Column(scale=5):
-            gr.HTML(labeled_label("Output", TOOLTIPS["output"]))
-            output_image = gr.Image(type="pil", height=512, show_download_button=True, show_label=False)
+            gr.Markdown(f"**Output**  \n<span style='color:#988B7C;font-size:12px;'>{TOOLTIPS['output']}</span>")
+            output_image = gr.Image(
+                show_label=False,
+                type="pil",
+                height=512,
+                show_download_button=True,
+            )
             output_meta = gr.JSON(label="Meta", value={})
+
     return dict(
         prompt=prompt,
         input_image=input_image,
+        preview_image=preview_image,
         preprocessor=preprocessor,
         controlnet_scale=controlnet_scale,
         steps=steps,
         seed=seed,
+        lora_enabled=lora_enabled,
+        lora_group=lora_group,
         lora_path=lora_path,
         lora_strength=lora_strength,
         generate_btn=generate_btn,
@@ -168,37 +229,81 @@ def build_controlnet_tab() -> dict[str, gr.components.Component]:
 def build_upscale_tab() -> dict[str, gr.components.Component]:
     with gr.Row():
         with gr.Column(scale=4):
-            gr.HTML(labeled_label("Refinement prompt", TOOLTIPS["prompt"]))
-            prompt = gr.Textbox(value="masterpiece, 8k", lines=2, show_label=False)
-            gr.HTML(labeled_label("Input image", TOOLTIPS["upscale_image"]))
-            input_image = gr.Image(type="pil", height=240, show_label=False)
-            with gr.Row():
-                with gr.Column():
-                    gr.HTML(labeled_label("Refine steps", TOOLTIPS["refine_steps"]))
-                    refine_steps = gr.Slider(1, 20, value=5, step=1, show_label=False)
-                with gr.Column():
-                    gr.HTML(labeled_label("Refine denoise", TOOLTIPS["refine_denoise"]))
-                    refine_denoise = gr.Slider(0.0, 1.0, value=0.33, step=0.01, show_label=False)
+            prompt = gr.Textbox(
+                label="Refinement prompt",
+                info=TOOLTIPS["prompt"],
+                value="masterpiece, 8k",
+                lines=2,
+            )
+            gr.Markdown(
+                f"**Input image**  \n<span style='color:#988B7C;font-size:12px;'>{TOOLTIPS['upscale_image']}</span>"
+            )
+            input_image = gr.Image(
+                show_label=False,
+                type="pil",
+                height=240,
+            )
+
             with gr.Row():
-                with gr.Column():
-                    gr.HTML(labeled_label("LoRA (optional)", TOOLTIPS["lora"]))
-                    lora_path = gr.File(file_types=[".safetensors"], type="filepath", show_label=False)
-                with gr.Column():
-                    gr.HTML(labeled_label("LoRA strength", TOOLTIPS["lora_strength"]))
-                    lora_strength = gr.Slider(0.0, 1.5, value=0.8, step=0.05, show_label=False)
-            gr.HTML(labeled_label("Seed (0 = random)", TOOLTIPS["seed"]))
-            seed = gr.Number(value=0, precision=0, show_label=False)
+                refine_steps = gr.Slider(
+                    1,
+                    20,
+                    value=5,
+                    step=1,
+                    label="Refine steps",
+                    info=TOOLTIPS["refine_steps"],
+                )
+                refine_denoise = gr.Slider(
+                    0.0,
+                    1.0,
+                    value=0.33,
+                    step=0.01,
+                    label="Refine denoise",
+                    info=TOOLTIPS["refine_denoise"],
+                )
+
+            lora_enabled = gr.Checkbox(label="Use a LoRA", value=False)
+            with gr.Group(visible=False) as lora_group:
+                lora_path = gr.File(
+                    label="LoRA file",
+                    file_types=[".safetensors"],
+                    type="filepath",
+                    elem_classes=["zis-lora-file"],
+                )
+                lora_strength = gr.Slider(
+                    0.0,
+                    1.5,
+                    value=0.8,
+                    step=0.05,
+                    label="LoRA strength",
+                    info=TOOLTIPS["lora_strength"],
+                )
+
+            with gr.Accordion("Advanced", open=False):
+                seed = gr.Number(value=0, precision=0, label="Seed", info=TOOLTIPS["seed"])
+
             generate_btn = gr.Button("Generate", variant="primary")
+
         with gr.Column(scale=5):
-            gr.HTML(labeled_label("Output (2x upscaled)", TOOLTIPS["output"]))
-            output_image = gr.Image(type="pil", height=512, show_download_button=True, show_label=False)
+            gr.Markdown(
+                f"**Output (2x upscaled)**  \n<span style='color:#988B7C;font-size:12px;'>{TOOLTIPS['output']}</span>"
+            )
+            output_image = gr.Image(
+                show_label=False,
+                type="pil",
+                height=512,
+                show_download_button=True,
+            )
             output_meta = gr.JSON(label="Meta", value={})
+
     return dict(
         prompt=prompt,
         input_image=input_image,
         refine_steps=refine_steps,
         refine_denoise=refine_denoise,
         seed=seed,
+        lora_enabled=lora_enabled,
+        lora_group=lora_group,
         lora_path=lora_path,
         lora_strength=lora_strength,
         generate_btn=generate_btn,