Implementation:AUTOMATIC1111 Stable diffusion webui Input Accordion
| Knowledge Sources | |
|---|---|
| Domains | UI_Frontend, Accordion_Widget, Gradio |
| Last Updated | 2025-05-15 00:00 GMT |
Overview
Enhances Gradio accordion elements with a visible checkbox that links the accordion's open/closed state to a boolean value in the processing pipeline.
Description
This JavaScript module sets up interactive behavior for accordion-style UI sections (elements with class "input-accordion"). The setupAccordion function adds a visible checkbox to each accordion's label span and links it to a hidden Gradio checkbox component. A MutationObserver watches the accordion's label-wrap element for class changes (open/closed state) and synchronizes the visible checkbox accordingly. The "linked" flag ensures that toggling the checkbox also toggles the accordion open/closed state, but clicking the checkbox directly unlinks this behavior to allow independent control. The inputAccordionChecked function provides a programmatic API to set the checked state from external code. The module also handles an "extra" element that gets repositioned inside the label wrap. When the UI loads, all elements with the "input-accordion" class are automatically set up.
Usage
Input accordions appear in the generation interface for optional feature sections (e.g., Hires. fix, Refiner). The checkbox in the accordion header controls whether the feature is enabled, while the accordion open/closed state controls visibility. These are automatically linked but can be independently controlled by clicking directly on the checkbox.
Code Reference
Source Location
- Repository: AUTOMATIC1111_Stable_diffusion_webui
- File: javascript/inputAccordion.js
- Lines: 1-68
Signature
function inputAccordionChecked(id, checked)
function setupAccordion(accordion)
// Callback: onUiLoaded(function() { ... })
Import
// Loaded automatically by the web UI as part of the javascript/ directory
// inputAccordionChecked is available globally for Gradio callbacks
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | Yes | The DOM element ID of the accordion to control |
| checked | bool | Yes | The desired checked state for the accordion's visible checkbox |
| accordion | HTMLElement | Yes | The accordion DOM element with class "input-accordion" to set up |
Outputs
| Name | Type | Description |
|---|---|---|
| (side effect) | DOM | Creates a visible checkbox, links it to the Gradio hidden checkbox, and synchronizes accordion open/closed state |
Usage Examples
// Programmatically enable an accordion section:
inputAccordionChecked('txt2img_hires_fix', true);
// Programmatically disable an accordion section:
inputAccordionChecked('txt2img_hires_fix', false);
// The setup runs automatically on UI load for all .input-accordion elements.
// Each accordion gets:
// 1. A visible checkbox in the header
// 2. MutationObserver linking open/closed state to checkbox
// 3. Event listeners for direct checkbox interaction