Skip to content

Redesign the layout #698

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pkrasicki wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Redesign the layout #698

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
be34dcb
Redesign the layout
pkrasicki Feb 25, 2026
2c5ec4d
Fix formatting
pkrasicki Feb 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions acestep/ui/gradio/events/__init__.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -423,7 +423,7 @@ def setup_event_handlers(demo, dit_handler, llm_handler, dataset_handler, datase
generation_section["custom_mode_group"],
generation_section["generate_btn"],
generation_section["simple_sample_created"],
generation_section["optional_params_accordion"],
generation_section["optional_params_section"],
generation_section["task_type"],
generation_section["src_audio_row"],
generation_section["repainting_group"],
Expand Down Expand Up @@ -692,7 +692,7 @@ def setup_event_handlers(demo, dit_handler, llm_handler, dataset_handler, datase
generation_section["custom_mode_group"],
generation_section["generate_btn"],
generation_section["simple_sample_created"],
generation_section["optional_params_accordion"],
generation_section["optional_params_section"],
generation_section["task_type"],
generation_section["src_audio_row"],
generation_section["repainting_group"],
Expand Down
2 changes: 1 addition & 1 deletion acestep/ui/gradio/events/generation/mode_ui.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ def compute_mode_ui_updates(mode: str, llm_handler=None, previous_mode: str = "C
gr.update(visible=show_custom_group), # 1: custom_mode_group
generate_btn_update, # 2: generate_btn
False, # 3: simple_sample_created
gr.Accordion(visible=show_optional, open=False), # 4: optional_params_accordion
gr.Column(visible=show_optional), # 4: optional_params_section
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

cd acestep/ui/gradio/events/generation && wc -l mode_ui.py

Repository: ace-step/ACE-Step-1.5

Length of output: 79

🏁 Script executed:

cd acestep/ui/gradio/events/generation && sed -n '130,160p' mode_ui.py

Repository: ace-step/ACE-Step-1.5

Length of output: 1957

🏁 Script executed:

rg -n "gr\.(Column|Row|Accordion|Tab|Tabs|Blocks|Group)\(" --type py acestep/ui/gradio/events/ -A 2 -B 2

Repository: ace-step/ACE-Step-1.5

Length of output: 2088

🏁 Script executed:

sed -n '100,155p' acestep/ui/gradio/events/generation/mode_ui.py

Repository: ace-step/ACE-Step-1.5

Length of output: 2905

🏁 Script executed:

sed -n '1,50p' acestep/ui/gradio/events/generation/mode_ui.py

Repository: ace-step/ACE-Step-1.5

Length of output: 1921

🏁 Script executed:

rg -n "def.*mode_ui|def.*on_generation_mode" acestep/ui/gradio/events/generation/mode_ui.py -A 30

Repository: ace-step/ACE-Step-1.5

Length of output: 1374

🏁 Script executed:

rg -n "compute_mode_ui_updates" acestep/ui/gradio/ -B 2 -A 2

Repository: ace-step/ACE-Step-1.5

Length of output: 12542

🏁 Script executed:

rg -n "handle_generation_mode_change\|on_generation_mode" acestep/ui/gradio/ -B 5 -A 15 --type py

Repository: ace-step/ACE-Step-1.5

Length of output: 47

🏁 Script executed:

cd acestep && find . -name "__init__.py" -path "*/events/__init__.py" -exec cat {} \; | head -100

Repository: ace-step/ACE-Step-1.5

Length of output: 4405

🏁 Script executed:

sed -n '200,260p' acestep/ui/gradio/events/__init__.py

Repository: ace-step/ACE-Step-1.5

Length of output: 2830

🏁 Script executed:

rg -n "generation_mode.*change\|\.change\(" acestep/ui/gradio/events/__init__.py -A 50 | head -150

Repository: ace-step/ACE-Step-1.5

Length of output: 47

🏁 Script executed:

rg -n "handle_generation_mode_change" acestep/ui/gradio/events/generation/mode_ui.py -A 50 | head -100

Repository: ace-step/ACE-Step-1.5

Length of output: 4200

🏁 Script executed:

rg -n "generation_mode.*change" acestep/ui/gradio/events/__init__.py -B 2 -A 20 | head -80

Repository: ace-step/ACE-Step-1.5

Length of output: 2516

🏁 Script executed:

rg -n "optional_params_section" acestep/ui/gradio/ -B 2 -A 2

Repository: ace-step/ACE-Step-1.5

Length of output: 2626

🏁 Script executed:

sed -n '155,170p' acestep/ui/gradio/events/generation/ui_helpers.py

Repository: ace-step/ACE-Step-1.5

Length of output: 685

🏁 Script executed:

sed -n '100,120p' acestep/ui/gradio/events/generation/service_init.py

Repository: ace-step/ACE-Step-1.5

Length of output: 778

🏁 Script executed:

sed -n '25,45p' acestep/ui/gradio/events/results/audio_transfer.py

Repository: ace-step/ACE-Step-1.5

Length of output: 726

🏁 Script executed:

rg -n "update_audio_uploads_accordion" acestep/ui/gradio/ -B 3 -A 3

Repository: ace-step/ACE-Step-1.5

Length of output: 1936

🏁 Script executed:

sed -n '100,130p' acestep/ui/gradio/events/generation/service_init.py

Repository: ace-step/ACE-Step-1.5

Length of output: 1358

🏁 Script executed:

rg -n "send_audio_to_remix\|send_audio_to_repaint" acestep/ui/gradio/events/ -B 5 -A 30 | head -150

Repository: ace-step/ACE-Step-1.5

Length of output: 47

🏁 Script executed:

rg -n "update_audio_uploads_accordion\(" acestep/ui/gradio/events/__init__.py -B 2 -A 8

Repository: ace-step/ACE-Step-1.5

Length of output: 47

🏁 Script executed:

sed -n '75,130p' acestep/ui/gradio/events/generation/service_init.py

Repository: ace-step/ACE-Step-1.5

Length of output: 2532

🏁 Script executed:

rg -n "send_audio_to_remix\|send_audio_to_repaint" acestep/ui/gradio/events/results/audio_transfer.py -B 3 -A 20

Repository: ace-step/ACE-Step-1.5

Length of output: 47

🏁 Script executed:

rg -n "reference_audio.*src_audio" acestep/ui/gradio/events/__init__.py -B 5 -A 10

Repository: ace-step/ACE-Step-1.5

Length of output: 47

🏁 Script executed:

rg -n "audio_uploads_accordion" acestep/ui/gradio/events/ -B 3 -A 3

Repository: ace-step/ACE-Step-1.5

Length of output: 2493

🏁 Script executed:

sed -n '130,180p' acestep/ui/gradio/events/generation/service_init.py

Repository: ace-step/ACE-Step-1.5

Length of output: 2086

🏁 Script executed:

rg -n "reference_audio\|audio_uploads_accordion" acestep/ui/gradio/events/__init__.py -B 5 -A 10 | head -100

Repository: ace-step/ACE-Step-1.5

Length of output: 47

🏁 Script executed:

rg -n "\.change\(" acestep/ui/gradio/events/__init__.py | grep -A 2 -B 2 "reference_audio\|lm_codes_audio"

Repository: ace-step/ACE-Step-1.5

Length of output: 296

🏁 Script executed:

sed -n '150,200p' acestep/ui/gradio/events/__init__.py

Repository: ace-step/ACE-Step-1.5

Length of output: 2006

🏁 Script executed:

sed -n '265,280p' acestep/ui/gradio/events/__init__.py

Repository: ace-step/ACE-Step-1.5

Length of output: 758

🏁 Script executed:

rg -n "init_service_wrapper\|on_tier_change" acestep/ui/gradio/events/__init__.py -B 2 -A 50 | head -120

Repository: ace-step/ACE-Step-1.5

Length of output: 47

🏁 Script executed:

python3 << 'EOF'
# Check Gradio version and behavior for component instantiation
try:
    import gradio as gr
    print(f"Gradio version: {gr.__version__}")
    
    # Try to understand the Accordion/Column instantiation pattern
    # In Gradio, returning a component instance vs gr.update()
    print("\n--- Gradio semantics ---")
    print("Event handler outputs should be:")
    print("1. gr.update(...) for property updates")
    print("2. gr.skip() to skip updating")
    print("3. Plain values for simple components")
    print("4. NOT new component instances")
    
except ImportError:
    print("Gradio not installed in sandbox")
EOF

Repository: ace-step/ACE-Step-1.5

Length of output: 96

🏁 Script executed:

sed -n '140,195p' acestep/ui/gradio/events/generation/mode_ui.py

Repository: ace-step/ACE-Step-1.5

Length of output: 3966

🏁 Script executed:

rg -n "def init_service_wrapper" acestep/ui/gradio/events/generation/service_init.py -A 100 | sed -n '1,60p'

Repository: ace-step/ACE-Step-1.5

Length of output: 2860

🏁 Script executed:

rg -n "def send_audio_to_file" acestep/ui/gradio/events/results/audio_transfer.py -B 5 -A 30

Repository: ace-step/ACE-Step-1.5

Length of output: 47

🏁 Script executed:

sed -n '125,170p' acestep/ui/gradio/events/generation/service_init.py

Repository: ace-step/ACE-Step-1.5

Length of output: 2070

🏁 Script executed:

rg -n "def send_to_remix\|def send_to_repaint" acestep/ui/gradio/events/results/audio_transfer.py -B 2 -A 40 | head -120

Repository: ace-step/ACE-Step-1.5

Length of output: 47

🏁 Script executed:

grep -n "accordion_state" acestep/ui/gradio/events/generation/service_init.py

Repository: ace-step/ACE-Step-1.5

Length of output: 163

🏁 Script executed:

sed -n '50,100p' acestep/ui/gradio/events/__init__.py

Repository: ace-step/ACE-Step-1.5

Length of output: 2616

🏁 Script executed:

rg -n "init_btn.*click\|init_status" acestep/ui/gradio/events/__init__.py -B 5 -A 30 | head -80

Repository: ace-step/ACE-Step-1.5

Length of output: 47

🏁 Script executed:

rg -n "send_audio_to\|send_to_remix" acestep/ui/gradio/events/__init__.py -B 3 -A 15

Repository: ace-step/ACE-Step-1.5

Length of output: 47

🏁 Script executed:

rg -n "send_to_remix\|send_to_repaint\|send_audio_to" acestep/ui/gradio/events/ -B 2 -A 15 | head -150

Repository: ace-step/ACE-Step-1.5

Length of output: 47

🏁 Script executed:

python3 << 'EOF'
# Analyze the findings
findings = {
    "mode_ui.py:148": {
        "code": "gr.Column(visible=show_optional)",
        "context": "return tuple (index 4) in compute_mode_ui_updates",
        "used_by": "generation_mode.change event handler (events/__init__.py:415-426)",
        "is_event_output": True
    },
    "ui_helpers.py:164": {
        "code": "return gr.Accordion(open=has_audio)",
        "context": "update_audio_uploads_accordion function",
        "used_by": "Unknown - need to check",
        "is_event_output": None
    },
    "service_init.py:114": {
        "code": "accordion_state = gr.Accordion(open=not is_model_initialized)",
        "context": "init_service_wrapper function",
        "used_by": "init_btn.click event handler (index 2 in outputs)",
        "is_event_output": True
    },
    "audio_transfer.py:37": {
        "code": "gr.Accordion(open=True),  # audio_uploads_accordion",
        "context": "return tuple (index 9) in _send_audio_to_file",
        "used_by": "Unknown - need to check",
        "is_event_output": None
    }
}

print("=" * 60)
print("CRITICAL ISSUES IDENTIFIED")
print("=" * 60)
for loc, info in findings.items():
    print(f"\n{loc}:")
    print(f"  Code: {info['code']}")
    print(f"  Context: {info['context']}")
    print(f"  Used by: {info['used_by']}")
    print(f"  Is event output: {info['is_event_output']}")

print("\n" + "=" * 60)
print("SUMMARY")
print("=" * 60)
print("Confirmed event handler outputs with component instantiation:")
print("1. mode_ui.py:148 - gr.Column(...) in compute_mode_ui_updates")
print("2. service_init.py:114 - gr.Accordion(...) in init_service_wrapper")
print("\nNeed to verify:")
print("3. audio_transfer.py:37 - gr.Accordion(...) in return tuple")
print("4. ui_helpers.py:164 - gr.Accordion(...) usage context")
EOF

Repository: ace-step/ACE-Step-1.5

Length of output: 1478

🏁 Script executed:

sed -n '20,50p' acestep/ui/gradio/events/results/audio_transfer.py

Repository: ace-step/ACE-Step-1.5

Length of output: 1033

🏁 Script executed:

rg -n "def _send_audio_to_file" acestep/ui/gradio/events/results/audio_transfer.py -A 40

Repository: ace-step/ACE-Step-1.5

Length of output: 47

🏁 Script executed:

rg -n "\.then\(|send_audio_to_file" acestep/ui/gradio/events/__init__.py -B 3 -A 15

Repository: ace-step/ACE-Step-1.5

Length of output: 15726

gr.Column(...) must be gr.update(...) — component instantiation in an event-handler output causes a runtime error.

Line 148 returns a new gr.Column instance as an event output, which violates Gradio semantics. Event handlers expect gr.update() objects for property updates, not component instances. Every other element in this 44-item tuple correctly uses gr.update().

The same bug also exists in acestep/ui/gradio/events/generation/service_init.py:114 where gr.Accordion(open=not is_model_initialized) is returned as an event output in init_service_wrapper() instead of gr.update(open=...).

🐛 Proposed fix 
-        gr.Column(visible=show_optional),                  # 4: optional_params_section
+        gr.update(visible=show_optional),                  # 4: optional_params_section

Also fix service_init.py:114:

-    accordion_state = gr.Accordion(open=not is_model_initialized)
+    accordion_state = gr.update(open=not is_model_initialized)
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
gr.Column(visible=show_optional), # 4: optional_params_section
gr.update(visible=show_optional), # 4: optional_params_section
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@acestep/ui/gradio/events/generation/mode_ui.py` at line 148, Replace
component instantiation returns with gr.update property updates: in the
generation event handler where the tuple currently returns
gr.Column(visible=show_optional) (the optional_params_section output), change
that to gr.update(visible=show_optional); similarly, in init_service_wrapper()
where the code returns gr.Accordion(open=not is_model_initialized), replace it
with gr.update(open=not is_model_initialized). Locate the return tuples in the
event handler (the one returning optional_params_section) and in
init_service_wrapper() and swap component constructors for gr.update(...) using
the same property names (visible/open) and boolean expressions.

gr.update(value=task_type, elem_classes=["has-info-container"]), # 5: task_type
gr.update(visible=show_src_audio), # 6: src_audio_row
gr.update(visible=show_repainting), # 7: repainting_group
Expand Down
110 changes: 4 additions & 106 deletions acestep/ui/gradio/help_content.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
space and can be placed inside any existing row or header without
creating extra blank rows.
"""
from pathlib import Path
import gradio as gr
from acestep.ui.gradio.i18n import t

Expand Down Expand Up @@ -181,7 +182,7 @@ def create_help_button(section_key: str) -> gr.HTML:
</div>
</div>
""",
elem_classes=["help-inline-container"],
elem_classes=["help-inline-container", "no-grow"],
)

return html
Expand All @@ -190,108 +191,5 @@ def create_help_button(section_key: str) -> gr.HTML:
# ---------------------------------------------------------------------------
# CSS to be injected into the main Blocks CSS string.
# ---------------------------------------------------------------------------
HELP_MODAL_CSS = """
/* ---- Inline help button container ---- */
.help-inline-container {
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
flex-shrink: 0 !important;
max-width: 32px !important;
min-width: 32px !important;
overflow: visible !important;
}

.help-inline-wrapper {
display: inline-flex;
align-items: center;
line-height: 1;
}

/* ---- Inline help button ---- */
.help-inline-btn {
width: 22px;
height: 22px;
border-radius: 50%;
border: 1.5px solid var(--border-color-primary, #555);
background: transparent;
color: var(--body-text-color-subdued, #888);
font-size: 12px;
font-weight: 600;
line-height: 20px;
text-align: center;
cursor: pointer;
padding: 0;
transition: all 0.15s ease;
flex-shrink: 0;
}
.help-inline-btn:hover {
background: var(--color-accent, #4a9eff);
color: #fff;
border-color: var(--color-accent, #4a9eff);
transform: scale(1.1);
}

/* ---- Modal overlay ---- */
.help-modal-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 100000;
display: flex;
justify-content: center;
align-items: center;
}

.help-modal-content {
background: var(--background-fill-primary, #fff);
color: var(--body-text-color, #222);
border-radius: 12px;
max-width: 640px;
width: 90%;
max-height: 80vh;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
position: relative;
}

.help-modal-close {
position: absolute;
top: 12px; right: 16px;
background: none;
border: none;
font-size: 20px;
cursor: pointer;
color: var(--body-text-color, #222);
z-index: 1;
opacity: 0.6;
}
.help-modal-close:hover { opacity: 1; }

.help-modal-body {
padding: 28px 32px;
overflow-y: auto;
line-height: 1.7;
font-size: 0.92rem;
}
.help-modal-body h3 { margin: 16px 0 8px; font-size: 1.15rem; }
.help-modal-body h4 { margin: 12px 0 6px; font-size: 1.0rem; }
.help-modal-body pre {
background: var(--background-fill-secondary, #f5f5f5);
padding: 10px;
border-radius: 6px;
overflow-x: auto;
font-size: 0.85rem;
}
.help-modal-body code {
background: var(--background-fill-secondary, #f5f5f5);
padding: 1px 4px;
border-radius: 3px;
font-size: 0.88em;
}
.help-modal-body ul { margin: 6px 0; }
.help-modal-body li { margin: 3px 0; }
"""
css_file = Path(__file__).parent / "interfaces" / "css" / "help_modal.css"
HELP_MODAL_CSS = css_file.read_text()
Comment on lines +194 to +195
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Unhandled FileNotFoundError at module-level — missing CSS file crashes the entire import.

css_file.read_text() is evaluated at import time. If help_modal.css is absent (packaging issue, wrong working directory, etc.), this raises FileNotFoundError and makes the whole help_content module (and every importer) fail to load.

Also missing an explicit encoding parameter — on Windows with a non-UTF-8 locale this can silently mangle characters.

🛡️ Proposed fix 
-css_file = Path(__file__).parent / "interfaces" / "css" / "help_modal.css"
-HELP_MODAL_CSS = css_file.read_text()
+_css_file = Path(__file__).parent / "interfaces" / "css" / "help_modal.css"
+try:
+    HELP_MODAL_CSS = _css_file.read_text(encoding="utf-8")
+except FileNotFoundError:
+    logger.warning(f"help_modal.css not found at {_css_file}; help modal will be unstyled.")
+    HELP_MODAL_CSS = ""

As per coding guidelines: "Handle errors explicitly in Python; avoid bare except."

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
css_file = Path(__file__).parent / "interfaces" / "css" / "help_modal.css"
HELP_MODAL_CSS = css_file.read_text()
_css_file = Path(__file__).parent / "interfaces" / "css" / "help_modal.css"
try:
HELP_MODAL_CSS = _css_file.read_text(encoding="utf-8")
except FileNotFoundError:
logger.warning(f"help_modal.css not found at {_css_file}; help modal will be unstyled.")
HELP_MODAL_CSS = ""
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@acestep/ui/gradio/help_content.py` around lines 194 - 195, The module
currently reads the CSS file at import time via css_file.read_text() and assigns
it to HELP_MODAL_CSS which will raise FileNotFoundError (or encoding errors) and
break imports; change this to lazily load or safely read the file with explicit
encoding='utf-8' and a guarded try/except that catches FileNotFoundError and
UnicodeDecodeError, returning a sensible fallback (e.g., empty string or bundled
default CSS) and emitting a warning; update references to css_file and
HELP_MODAL_CSS so the module no longer performs an unguarded read at import time
and instead uses the safe loader.

Loading