Spaces:
Runtime error
Runtime error
Commit History
-
fix(ui): make checkbox checked state visible
Unverified signatureNative browser checkboxes were invisible against the Brutalist Mono dark palette — the checkmark indicator washed out on dark surfaces and the box outline was nearly imperceptible. Replaced with a custom appearance:none style: - Unchecked: dark fill, 1.5 px muted-ink border - Checked: white fill with a black checkmark SVG drawn inline via data URI (no external asset, CSP-safe) - Hover: border brightens to full ink - Focus: 2 px white outline Affects all checkboxes inside .ams-content (Advanced accordion's 4 LM CoT toggles + ADG, plus any future ones).7401bf7 -
feat(ui): add advanced controls accordion — inference steps, cfg, infer method, seed, lm cot, schedule, metadata
Unverified signatureUser feedback: outputs feel samey regardless of prompt. Root cause: GenerationParams.inference_steps defaults to 8 (ACE-Step turbo), too few for the XL SFT model to actually express variation. Also guidance_scale, infer_method, shift, ADG, and CoT flags all left at dataclass defaults. New ``Advanced ▼`` accordion under every song mode (Generate / Cover / Extend / Edit; lyrics mode is its own Qwen path and doesn't need it). Four groups: - Diffusion: inference_steps (8-80, default 27), guidance_scale (1-15, default 7.0), infer_method (ode|sde), seed (number, -1=random). - CFG schedule + shift + ADG. - 5Hz LM (CoT): thinking + use_cot_caption + use_cot_metas + use_cot_language now defaulted ON; LM temperature / top_p / top_k / cfg / negative_prompt sliders. - Music metadata: bpm / keyscale / timesignature / vocal_language manual overrides. ace_pipeline.generate passes all of these through to GenerationParams. Output metadata JSON now echoes the advanced + lm…c287b6a -
fix(ui): restore desktop sidebar — don't apply min-width:0 to .ams-sidebar
Unverified signaturePrevious commit broadcasted min-width: 0 to .ams-body > * to fix the mobile waveform overflow. That selector also matched .ams-sidebar, overriding its hard min-width: 188px and collapsing the sidebar to a vertical sliver on desktop — visible as single characters stacked top-to-bottom where the nav + history should be. Scoping the flex-shrink fix to .ams-content only (which already has min-width: 0 set directly). Sidebar keeps its 188 px minimum.7dd8eb5 -
fix(ui): stop wavesurfer controls + timestamps disappearing during re-render
Unverified signatureSwitched from clipping the inner wavesurfer wrappers (which hid the 1:00 timestamp + play/skip/forward controls during transient re-renders) to clipping only at the outer .ams-out-audio panel and the canvas itself. Inner .component-wrapper / .controls / .timestamps now render freely. Plus min-height reserved on .timestamps (24px) and .controls (60px) so neither collapses to zero while wavesurfer is recalculating its grid layout. Without this reservation, the user sees the play controls vanish + reappear when the URL bar shows/hides on mobile or any other viewport-height tick triggers a wavesurfer reflow.990fcda -
fix(ui): stop layout 'dance' on mobile — cage audio waveform width
Unverified signatureThe Gradio audio component uses wavesurfer.js, which renders the waveform at a pixel-per-second rate. For a 60s clip that's ~600px wide, which on mobile (~360px viewport) pushes the parent column past the viewport edge. Worse: flex children default to min-width: auto, meaning they CANNOT shrink below their intrinsic content size — so the column itself widens to fit the waveform, and the whole layout 'dances' between the pre-generation narrow state and the post-generation wide state. Fix: - min-width: 0 on .ams-content + .ams-body > * so flex children can shrink below content intrinsic width - overflow: hidden + max-width: 100% on .ams-out-audio so the waveform is clipped at the column edge - width/max-width: 100% on every wavesurfer container layer (.component-wrapper, .waveform-container, #waveform, canvas) - max-width: 100% + overflow-x: hidden on .ams-content as a last-line defense against any other wide childde7d60a
-
feat(ui): m6 polish — in-memory history sidebar + _safe_call error wrapper
Unverified signatureH2 + H3 from the M6 plan, in one commit because the app.py hunks are interleaved. - _HISTORY list + _history_render + _history_push helpers, capped at 12 newest-first entries. Each on_*_click handler now returns a third output (history HTML) wired into the dynamic gr.HTML in the sidebar. - _safe_call wrapper centralises LoRAValidationError / ValueError / FileNotFoundError / RuntimeError -> gr.Error translation so each click handler stays a single call into modes.*. MPS RuntimeErrors get the PYTORCH_ENABLE_MPS_FALLBACK hint. - theme.CSS gains compact .ams-history-row styling (mono mode token + ellipsis sans label) and hides the history block at the 640 px mobile breakpoint.3a8ec98 -
feat(post): wire separate stems / normalise / mp3 export buttons in output panel (m5 g2)
Unverified signature7388985 -
feat(ui): wire lyrics tab + cross-tab use-in-generate handoff (m4)
Unverified signaturefdfc10d -
feat(ui): wire cover/extend/edit tabs into the sidebar layout (m3 e3+e4)
Unverified signatureReplaces the three placeholder Markdowns in pane_cover / pane_extend / pane_edit with full form builders mirroring the Generate tab's structure (2-column row, LoRA accordion, output panel). Each tab carries mode-specific inputs: - Cover: reference audio + audio_cover_strength slider - Extend: seed audio + extra_duration + experimental repaint params - Edit: source audio + sub_mode pills (repaint/flow_edit) + segment_start_s/segment_end_s + experimental flow-morph params Shared chrome (LoRA accordion + Output/Metadata panels) factored into _build_lora_accordion / _build_output_panel helpers so future mode additions don't duplicate the same 30-line block. Fields not yet wired to GenerationParams (repaint_mode, repaint_strength, chunk_mask_mode, latent_crossfade_frames, wav_crossfade_s, flow_source_caption, flow_n_*, cover_noise_strength) are surfaced under "(experimental)" accordions with inline notes explaining they're captured but no-ops until ACE-Step adds the fields upstream. Th…adb7693 -
feat(ui): wire single-lora picker into generate tab (m2 d5)
Unverified signatureAdds 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 gen…a1d8cb5 -
fix(ui): kill .styler bands + label icons + deepen pill contrast
Unverified signatureUser feedback on the mobile screenshot flagged three remaining issues: 1. Slate-blue horizontal bands above and below the Generate button. Cause: Gradio wraps each Row/Form in a <div class="styler …"> whose default background is var(--border-color-primary) — which we set to #1F1F1F (BORDER). On Samsung's cool-temperature display that #1F1F1F reads as bluish-grey. Force .styler inside .ams-content to background:transparent so the form rows blend into the panel. 2. Tiny 11x11 music-note / braces SVG icons next to OUTPUT and METADATA labels. Gradio inlines these inside the <label> as a decoration. The wireframe does not show them; they overlap the label text at small sizes. Hide via .ams-content .ams-out label svg { display:none } while keeping the LARGE empty-state SVG (which lives in a separate .empty.svelte-… container) visible. 3. Bluish perception on Vocal mode pills. The pill backgrounds were SURFACE_STRONG (#000) unselected / SURFACE_RAISED (#…aac47cf -
fix(ui): full Brutalist Mono retheme — IBM Plex, padding crush, scoped selectors
Unverified signatureSix issues from the user's manual mobile test: 1. Bluish background tint despite earlier --neutral-* override. Cause: Gradio applies its CSS in multiple :root/.dark contexts. Solution: override the neutral scale + body/block/input fill custom properties under :root, html.dark, .gradio-container, .gradio-container.dark AND .gradio-container .dark (all five contexts). 2. Huge ~60 px horizontal margins on the 360 px viewport. Cause: .gradio-container > .app ships with padding: 16px 32px. Override to 16px 20px on desktop and 8px 10px on mobile so the form actually uses the available width. 3. Field labels rendering at 14 px (~24 visual px on phone) with default Inter. Replace Inter with IBM Plex Sans (body) + IBM Plex Mono (labels, status, metadata) — both via Google Fonts, both distinctive enough to escape generic AI-slop aesthetics per the frontend-design discipline. Shrink labels to 10 px desktop / 9 px mobile, uppercase tracked mono, muted ink. 4…2d0e666 -
fix(ui): wireframe-fidelity polish — neutral palette, mobile single-row, tight chrome
Unverified signatureThree problems the user surfaced after manual testing: 1. The rendered UI had a bluish-grey tint that the wireframes do not. Root cause: gr.themes.colors.gray maps to Tailwind slate-* not true neutral — --neutral-900 is #111827, --neutral-950 is #0b0f19, both visibly cool on phone displays. Override the --neutral-* scale at :root with real neutral hex values (#141414 / #0A0A0A), plus pin the background / block / input fill custom properties to the Brutalist Mono palette via !important to defeat Gradio's defaults. 2. Mobile tab strip wrapped to two rows because each radio label still had width:100% from desktop AND the flex container had no nowrap directive. Add flex-wrap:nowrap to the strip + give each label a proper pill background (border + bg + radius) so they read as tabs instead of plain text. Hide scrollbar but keep horizontal scroll. 3. Inputs / textareas / number fields used Gradio defaults which felt soft compared to the wireframe's crisp Br…5ae7d55 -
fix(ui): mobile sidebar — compact tab pills, kill dead vertical chrome
Unverified signatureThe previous mobile media query set the sidebar to flex-direction:row and overflow-x:auto, but each radio label still had width:100% from the desktop styles. So the strip rendered with each label consuming the full container width, defeating the row layout and stacking vertically anyway. Plus the sidebar block still kept its desktop border + padding, so on a 360 px viewport the dead chrome took ~400 px of vertical space before the form even started — pushing the Generate button below the fold. This fix at < 640 px: - Strip the sidebar's border + background + radius; it now reads as a plain tab strip, not a boxed sidebar. - Override label width to auto / max-content so each option is only as wide as its emoji + label, allowing several to sit side-by-side. - flex-direction:row + flex:0 0 auto + nowrap on the label so flexbox doesn't grow them. - overflow-x:auto + scrollbar-width:none on .wrap so if the strip ever exceeds the viewport it scrolls instead of growing the page width…77d7353 -
fix(ui): inline-muted component labels + drop broken tablet rail mode
Unverified signatureTwo cosmetic fixes surfaced by the M1 Generate-tab visual verification: 1. gr.Audio / gr.Code component labels rendered as elevated white pills ("Output", "Metadata") that contradicted the Brutalist Mono theme where labels should be muted-ink uppercase text. Override .gradio-container .block .label and adjacent selectors to render labels as inline INK_MUTED, uppercase, no border, no shadow, matching the .ams-history-title style. Also hide the music-note / code SVG glyphs Gradio puts next to component labels. 2. The 640-1024 px "tablet icon rail" mode collapsed the sidebar to 48 px wide and relied on ::first-letter to keep the leading emoji visible while hiding labels. Gradio 5/6 wraps radio option text in a <span> inside the <label>, so ::first-letter never hit the emoji and the rail rendered completely empty — no mode navigation possible at tablet widths. Rather than fight Gradio's DOM, drop the rail middle state entirely: keep the full sidebar wi…d37b687 -
fix(ui): replace gr.Tabs with sidebar nav per wireframes
Unverified signatureThe previous M0 implementation used gr.Tabs which renders top-positioned horizontal tabs — contradicting the approved wireframes at docs/superpowers/specs/mockups/ which show a LEFT sidebar with 5 mode pills + History section. This rewrite uses a gr.Radio (re-skinned via CSS) as the sidebar nav, with 5 gr.Group panes in the content column whose visibility is toggled by the radio's change event. The radio's native :checked pseudo-class supplies the active-item highlight (white text + white left border + dark bg). theme.py: - New .ams-body row layout (sidebar + content gap) - .ams-sidebar fixed-width column (190-210px) - .ams-side-radio re-skin: vertical, full-width pills, no native circle - .ams-side-radio label:has(input:checked) — active state - .ams-history block below the radio - .ams-content right column with min-height - Responsive: tablet shrinks sidebar to icon rail, mobile flips to top tab strip app.py: - Build header status with detected device suffix (READY · MPS / CUDA / …59b9fee -
chore(fmt): apply ruff format and remove unused import in conftest
Unverified signature0ea6ca2 -
feat(ui): add brutalist mono theme tokens and responsive css
Unverified signaturece2a030