feat(ui): wire single-lora picker into generate tab (m2 d5)

Adds a collapsed-by-default LoRA accordion in the Generate tab between
the vocal-mode row and the Generate button. Inside:
- Preset radio (4 bundled + None) — rendered as pill-shaped chips
- Custom .safetensors upload with a dashed drop zone
- Strength slider (0.0-1.5, default 0.95)
- Active LoRA display (Markdown showing name + scale + kind)
- Hidden gr.State carrying the resolved {name, scale, path, sha256} dict

Picking a preset triggers lora_stack.download_preset + sniff + sets
state and clears the upload. Uploading a custom file triggers sniff +
sets state and resets the preset to "None". The Generate button passes
the state to backend.dispatch as params["loras"] = [state] (or [] when
None).

Reflects the apple-silicon fork's single-LoRA reality — a multi-row
stack is deferred until upstream adds multi-adapter support.

Brutalist Mono / IBM Plex chrome preserved via elem_classes hooks and
matching CSS in theme.py. Specificity bumped on the preset-radio
selector so it beats the generic Vocal-mode .wrap rule (which would
otherwise force a column layout). Verified visually at 360 px and
1440 px via Playwright; no regression vs the prior M1 visual.

app.py

@@ -43,12 +43,15 @@ os.environ.setdefault("PYTORCH_ENABLE_MPS_FALLBACK", "1")
 # Don't pin HF download source — let HF default for both Spaces and local cache.
 os.environ.setdefault("HF_HUB_ENABLE_HF_TRANSFER", "1")
 
+import hashlib
 import random
+from pathlib import Path
 
 import gradio as gr
 
 import ace_pipeline
 import backend as be
+import lora_stack
 import modes
 import theme
 import ui
@@ -63,13 +66,111 @@ def get_backend() -> be.ACEStepStudioBackend:
     return _BACKEND
 
 
+def _sha256(path: str) -> str:
+    """Stream a file through SHA-256 in 64 KB chunks.
+
+    Used to fingerprint the active LoRA so the generation metadata
+    includes a provenance hash (useful when the user uploads variants
+    of the same psytrance fine-tune with subtly different weights).
+    """
+    h = hashlib.sha256()
+    with open(path, "rb") as f:
+        for chunk in iter(lambda: f.read(65536), b""):
+            h.update(chunk)
+    return h.hexdigest()
+
+
+def _active_md(name: str, scale: float, kind: str) -> str:
+    """Format the 'Active: …' line shown under the strength slider."""
+    return f"**Active:** `{name}`  ·  scale `{scale:.2f}`  ·  {kind}"
+
+
+def on_lora_preset_change(preset_name: str, strength: float):
+    """User picked a preset (or 'None'). Downloads + validates + sets state.
+
+    Returns (state, active_markdown, upload_clear_value) — the third
+    value clears any custom-upload widget so the two inputs stay
+    mutually exclusive.
+    """
+    if preset_name == "None" or not preset_name:
+        return None, "_No LoRA active_", None
+
+    try:
+        local_path = lora_stack.download_preset(preset_name)
+    except lora_stack.LoRAValidationError as e:
+        raise gr.Error(str(e)) from e
+
+    info = lora_stack.sniff(local_path)
+    if not info.compatible:
+        raise gr.Error(
+            f"Preset {preset_name!r} is not compatible with ACE-Step 1.5 XL SFT: {info.diagnostic}"
+        )
+
+    state = {
+        "name": preset_name,
+        "scale": float(strength),
+        "path": str(local_path),
+        "sha256": _sha256(str(local_path)),
+    }
+    return state, _active_md(preset_name, float(strength), "preset"), None
+
+
+def on_lora_upload(file_obj, strength: float):
+    """User dropped a custom .safetensors. Replaces any active preset.
+
+    Returns (state, active_markdown, preset_reset_value) — the third
+    value resets the preset radio to 'None' so the two inputs stay
+    mutually exclusive.
+    """
+    if file_obj is None:
+        return None, "_No LoRA active_", "None"
+
+    path_str = file_obj.name if hasattr(file_obj, "name") else str(file_obj)
+    try:
+        info = lora_stack.sniff(path_str)
+    except lora_stack.LoRAValidationError as e:
+        raise gr.Error(str(e)) from e
+
+    if not info.compatible:
+        raise gr.Error(f"Uploaded LoRA isn't compatible with ACE-Step 1.5 XL SFT: {info.diagnostic}")
+
+    name = Path(path_str).stem
+    state = {
+        "name": name,
+        "scale": float(strength),
+        "path": path_str,
+        "sha256": _sha256(path_str),
+    }
+    return state, _active_md(name, float(strength), "custom"), "None"
+
+
+def on_lora_strength_change(state, strength: float):
+    """User dragged the strength slider. Update scale on the active LoRA.
+
+    No-op if no LoRA is active.
+    """
+    if not state:
+        return state, "_No LoRA active_"
+    new_state = {**state, "scale": float(strength)}
+    # Preserve the "preset" vs "custom" tag — presets resolve to a path
+    # under the HF cache (~/.cache/huggingface/hub/…), uploads land
+    # under /tmp/gradio/… or the user's pwd. Use the same heuristic
+    # the upload/preset handlers used: a path inside the HF cache or
+    # snapshot tree counts as preset, otherwise custom.
+    path = str(new_state.get("path", ""))
+    kind = "preset" if (".cache/huggingface" in path or "snapshots" in path) else "custom"
+    return new_state, _active_md(new_state["name"], float(strength), kind)
+
+
 def on_generate_click(
     prompt: str,
     lyrics: str,
     duration_s: float,
     instrumental_label: str,
+    lora_state,
     progress=gr.Progress(track_tqdm=True),  # noqa: B008
 ):
+    loras = [lora_state] if lora_state else []
     try:
         out_path, meta = modes.generate(
             get_backend(),
@@ -79,7 +180,7 @@ def on_generate_click(
                 "duration_s": int(duration_s),
                 "instrumental": instrumental_label == "Instrumental",
                 "seed": random.randint(1, 2_147_483_647),
-                "loras": [],
+                "loras": loras,
                 "advanced": {},
                 "lm": {},
                 "dcw": {},
@@ -172,9 +273,30 @@ def build_app() -> gr.Blocks:
             with gr.Column(scale=10, elem_classes=["ams-content"]):
                 with gr.Group(visible=True, elem_classes=["ams-tab-pane"]) as pane_generate:
                     g = ui.build_generate_tab()
+                    g["lora_preset"].change(
+                        fn=on_lora_preset_change,
+                        inputs=[g["lora_preset"], g["lora_strength"]],
+                        outputs=[g["lora_state"], g["lora_active"], g["lora_upload"]],
+                    )
+                    g["lora_upload"].change(
+                        fn=on_lora_upload,
+                        inputs=[g["lora_upload"], g["lora_strength"]],
+                        outputs=[g["lora_state"], g["lora_active"], g["lora_preset"]],
+                    )
+                    g["lora_strength"].change(
+                        fn=on_lora_strength_change,
+                        inputs=[g["lora_state"], g["lora_strength"]],
+                        outputs=[g["lora_state"], g["lora_active"]],
+                    )
                     g["generate_btn"].click(
                         fn=on_generate_click,
-                        inputs=[g["prompt"], g["lyrics"], g["duration_s"], g["instrumental"]],
+                        inputs=[
+                            g["prompt"],
+                            g["lyrics"],
+                            g["duration_s"],
+                            g["instrumental"],
+                            g["lora_state"],
+                        ],
                         outputs=[g["output_audio"], g["output_meta"]],
                     )
                 with gr.Group(visible=False, elem_classes=["ams-tab-pane"]) as pane_cover:

theme.py

@@ -552,7 +552,7 @@ main, .contain {{
 }}
 
 /* ============================================================
- * LoRA chip pill — kept for M2 wiring
+ * LoRA chip pill — kept for legacy use (chip-style hooks elsewhere)
  * ============================================================ */
 .ams-chip {{
   display:inline-block; padding:5px 10px; border-radius:14px;
@@ -561,7 +561,230 @@ main, .contain {{
 }}
 .ams-chip.on {{ border-color:{PRIMARY}; color:{PRIMARY}; }}
 .ams-chip.upload {{ border-style:dashed; color:{PRIMARY}; }}
-.ams-lora-file .upload-container {{ min-height:56px !important; }}
+
+/* ============================================================
+ * LoRA accordion (D5)
+ * The collapsed accordion sits between the duration/vocal-mode row
+ * and the Generate button. Inside: a note, preset radio, custom
+ * upload, strength slider, and an "Active: …" Markdown line.
+ * The outer chrome matches the wireframe's bordered section header.
+ * ============================================================ */
+.ams-content .ams-lora {{
+  border:1px solid {BORDER} !important;
+  border-radius:3px !important;
+  background:{SURFACE_STRONG} !important;
+  margin-top:10px !important;
+  padding:0 !important;
+}}
+/* Accordion summary / label. Gradio 6.14 renders this as either
+   .label-wrap (older builds) or a native <summary> element. Style
+   both so the uppercase-mono header is consistent. */
+.ams-content .ams-lora > .label-wrap,
+.ams-content .ams-lora summary,
+.ams-content .ams-lora > button {{
+  font-family: {FONT_MONO} !important;
+  font-size:10px !important;
+  letter-spacing:0.08em !important;
+  text-transform:uppercase !important;
+  color:{INK_MUTED} !important;
+  padding:10px 12px !important;
+  background:transparent !important;
+  border:none !important;
+}}
+.ams-content .ams-lora > .label-wrap span,
+.ams-content .ams-lora summary span,
+.ams-content .ams-lora > button span {{
+  color:{INK_MUTED} !important;
+  font-family: {FONT_MONO} !important;
+  font-size:10px !important;
+  letter-spacing:0.08em !important;
+  text-transform:uppercase !important;
+}}
+/* Italic note under the header */
+.ams-content .ams-lora-note p {{
+  font-family: {FONT_SANS} !important;
+  font-size:10px !important;
+  font-style:italic !important;
+  color:{INK_FAINT} !important;
+  line-height:1.4 !important;
+  margin:0 0 10px 0 !important;
+  padding:0 12px !important;
+}}
+/* The expanded body padding — Gradio drops the children inside
+   .gap (or unnamed wrapper) directly. Use a left/right padding so
+   the radio + file + slider don't hug the border. */
+.ams-content .ams-lora > div:not(.label-wrap):not(summary) {{
+  padding:0 12px 12px 12px !important;
+}}
+/* Preset radio: row of compact pills. Gradio renders the radio body
+   as ``fieldset.ams-lora-preset > div.wrap.svelte-e4x47i > label*``.
+   The generic Vocal-mode rule
+       .ams-content .block:has(input[type="radio"]) .wrap
+   computes specificity (0,4,1) — three classes + the inner attribute
+   selector via :has. To beat that we chain ``.ams-content .ams-lora
+   .ams-lora-preset.ams-lora-preset > .wrap`` which is (0,5,0), winning
+   by one class. */
+.ams-content .ams-lora .ams-lora-preset.ams-lora-preset > .wrap {{
+  display:flex !important;
+  flex-direction:row !important;
+  flex-wrap:wrap !important;
+  gap:6px !important;
+  background:transparent !important;
+  border:none !important;
+  padding:0 !important;
+  width:100% !important;
+}}
+.ams-content .ams-lora .ams-lora-preset.ams-lora-preset > .wrap > label {{
+  flex:0 0 auto !important;
+  width:auto !important;
+  max-width:max-content !important;
+  min-width:0 !important;
+  background:#000 !important;
+  border:1px solid {BORDER} !important;
+  border-radius:14px !important;
+  padding:5px 12px !important;
+  font-size:11px !important;
+  color:{INK_MUTED} !important;
+  font-weight:500 !important;
+  display:inline-flex !important;
+  align-items:center !important;
+  gap:0 !important;
+  cursor:pointer !important;
+}}
+.ams-content .ams-lora .ams-lora-preset.ams-lora-preset > .wrap > label:hover {{
+  color:{INK} !important;
+  border-color:{BORDER_STRONG} !important;
+}}
+.ams-content .ams-lora .ams-lora-preset.ams-lora-preset > .wrap > label:has(input[type="radio"]:checked) {{
+  border-color:{PRIMARY} !important;
+  color:{PRIMARY} !important;
+  background:#0F0F0F !important;
+}}
+/* Hide the inner radio-dot input; the pill border + color carries
+   the on/off state on its own. */
+.ams-content .ams-lora .ams-lora-preset.ams-lora-preset > .wrap > label input[type="radio"] {{
+  display:none !important;
+  width:0 !important; height:0 !important;
+  margin:0 !important; padding:0 !important;
+  background:none !important;
+  border:none !important;
+}}
+.ams-content .ams-lora .ams-lora-preset.ams-lora-preset > .wrap > label span {{
+  text-transform:none !important;
+  letter-spacing:0 !important;
+  font-family: {FONT_SANS} !important;
+  font-size:11px !important;
+  color:inherit !important;
+  font-weight:500 !important;
+}}
+
+/* Custom-upload file widget. Gradio 6.14 renders the drop-zone as
+   ``button.svelte-8prmba`` (NOT ``.upload-container``). The label
+   above it is ``label.svelte-19djge9.float`` which carries the
+   uploaded-file metadata once a file is dropped. Style the actual
+   drop-button and override the legacy ``.upload-container`` rule
+   from above for forward compatibility. */
+.ams-content .ams-lora-file > button {{
+  min-height:80px !important;
+  background:#000 !important;
+  border:1px dashed {BORDER_STRONG} !important;
+  border-radius:3px !important;
+  color:{INK_MUTED} !important;
+  padding:14px 12px !important;
+}}
+.ams-content .ams-lora-file > button:hover {{
+  border-color:{PRIMARY} !important;
+  color:{INK} !important;
+}}
+.ams-content .ams-lora-file > button .or {{
+  font-family: {FONT_MONO} !important;
+  font-size:10px !important;
+  color:{INK_FAINT} !important;
+  letter-spacing:0.04em !important;
+}}
+.ams-content .ams-lora-file > button .icon-wrap svg {{
+  color:{INK_MUTED} !important;
+  opacity:0.7 !important;
+  width:18px !important;
+  height:18px !important;
+}}
+/* The floating label that appears once a file is uploaded — give it
+   the standard Brutalist mono treatment and hide its decorative SVG
+   so the label text reads cleanly. */
+.ams-content .ams-lora-file > label.float {{
+  font-family: {FONT_MONO} !important;
+  font-size:10px !important;
+  letter-spacing:0.08em !important;
+  text-transform:uppercase !important;
+  color:{INK_MUTED} !important;
+  background:transparent !important;
+  border:none !important;
+  padding:0 0 6px 0 !important;
+}}
+.ams-content .ams-lora-file > label.float svg {{
+  display:none !important;
+}}
+
+/* Strength slider — the .info text just below it inherits the
+   generic helper rule, so no extra work needed. */
+.ams-content .ams-lora-strength input[type="range"] {{
+  accent-color:{PRIMARY} !important;
+}}
+
+/* Active LoRA display — high-contrast block, mono font, code in
+   white so the LoRA name pops. The accordion's own background is
+   SURFACE_STRONG (true black), so use a slightly raised surface
+   here to make the bordered box visible. */
+.ams-content .ams-lora-active .prose p {{
+  font-family: {FONT_MONO} !important;
+  font-size:11px !important;
+  color:{INK} !important;
+  background:{SURFACE_RAISED} !important;
+  border:1px solid {BORDER_STRONG} !important;
+  border-radius:3px !important;
+  padding:8px 10px !important;
+  margin:8px 0 0 0 !important;
+  line-height:1.5 !important;
+}}
+.ams-content .ams-lora-active .prose code {{
+  background:transparent !important;
+  color:{PRIMARY} !important;
+  font-family: {FONT_MONO} !important;
+  font-size:11px !important;
+  padding:0 !important;
+}}
+.ams-content .ams-lora-active .prose em {{
+  color:{INK_FAINT} !important;
+  font-style:italic !important;
+  font-family: {FONT_SANS} !important;
+}}
+@media (max-width: 640px) {{
+  .ams-content .ams-lora > .label-wrap,
+  .ams-content .ams-lora summary,
+  .ams-content .ams-lora > button {{
+    font-size:9px !important;
+    padding:8px 10px !important;
+  }}
+  .ams-content .ams-lora-note p {{
+    font-size:9px !important;
+    padding:0 10px !important;
+  }}
+  .ams-content .ams-lora > div:not(.label-wrap):not(summary) {{
+    padding:0 10px 10px 10px !important;
+  }}
+  .ams-content .ams-lora-active .prose p {{
+    font-size:10px !important;
+    padding:6px 8px !important;
+  }}
+  .ams-content .ams-lora .ams-lora-preset.ams-lora-preset > .wrap > label {{
+    font-size:10px !important;
+    padding:5px 9px !important;
+  }}
+  .ams-content .ams-lora-file > button {{
+    min-height:64px !important;
+    padding:10px 8px !important;
+  }}
+}}
 
 /* Hide Gradio footer + the floating "Use via API" / settings panel */
 footer {{ display:none !important; }}

ui.py

@@ -18,8 +18,15 @@ import tooltips
 def build_generate_tab() -> dict[str, gr.components.Component]:
     """Generate tab body: 2-column row (form left, output right).
 
-    LoRA / Advanced / LM-planner / DCW accordions are deferred to
-    M2-M4 and will be added by extending this builder.
+    Includes a single-LoRA picker in a collapsed accordion between the
+    duration/vocal-mode row and the Generate button. The Apple-Silicon
+    ACE-Step fork's AceStepHandler only supports one active LoRA at a
+    time (see ``lora_stack.apply_stack`` for the gory details), so the
+    UI surfaces a single slot — a preset radio OR a custom upload — and
+    a strength slider, with a Markdown "active LoRA" display.
+
+    Advanced / LM-planner / DCW accordions are deferred to M2-M4 and
+    will be added by extending this builder.
     """
     components: dict[str, gr.components.Component] = {}
 
@@ -53,6 +60,58 @@ def build_generate_tab() -> dict[str, gr.components.Component]:
                     label="Vocal mode",
                     info=tooltips.GENERATE_VOCAL,
                 )
+
+            # --- LoRA accordion (collapsed by default) ---
+            # Single-LoRA-slot UI: the apple-silicon fork's AceStepHandler
+            # can only hold one active adapter, so multi-row stacks are
+            # deferred until upstream lands multi-adapter support.
+            with gr.Accordion(
+                label="LoRA",
+                open=False,
+                elem_classes=["ams-lora", "ams-lora-accordion"],
+            ):
+                gr.Markdown(
+                    "_Only one LoRA at a time on this build. "
+                    "Picking a preset or uploading a custom file "
+                    "replaces the active LoRA._",
+                    elem_classes=["ams-lora-note"],
+                )
+                components["lora_preset"] = gr.Radio(
+                    choices=[
+                        "None",
+                        "RapMachine",
+                        "Chinese Rap",
+                        "Lyric2Vocal",
+                        "Text2Samples",
+                    ],
+                    value="None",
+                    label="Preset",
+                    elem_classes=["ams-lora-preset"],
+                    interactive=True,
+                )
+                components["lora_upload"] = gr.File(
+                    label="Custom LoRA (.safetensors)",
+                    file_types=[".safetensors"],
+                    file_count="single",
+                    elem_classes=["ams-lora-file"],
+                )
+                components["lora_strength"] = gr.Slider(
+                    minimum=0.0,
+                    maximum=1.5,
+                    step=0.05,
+                    value=0.95,
+                    label="Strength",
+                    elem_classes=["ams-lora-strength"],
+                )
+                components["lora_active"] = gr.Markdown(
+                    "_No LoRA active_",
+                    elem_classes=["ams-lora-active"],
+                )
+                # Hidden state holding the resolved active LoRA dict
+                # ``{name, scale, path, sha256}`` so on_generate_click
+                # can pass it straight to backend.dispatch.
+                components["lora_state"] = gr.State(None)
+
             components["generate_btn"] = gr.Button(
                 "▶ Generate",
                 variant="primary",