Implementation:AUTOMATIC1111 Stable diffusion webui UI Components

Knowledge Sources	AUTOMATIC1111_Stable_diffusion_webui
Domains	UI Components, Gradio Extensions
Last Updated	2025-05-15 00:00 GMT

Overview

Defines custom Gradio UI component subclasses that extend standard Gradio widgets to fit inside forms, provide specialized behaviors like tool buttons, resize handles, multi-select dropdowns, editable dropdowns, and accordion-style collapsible inputs.

Description

This module provides a set of custom Gradio component classes that solve layout and interaction problems specific to the web UI. The FormComponent base mixin overrides get_expected_parent() to return gr.components.Form, allowing components to nest properly inside Gradio form layouts. This mixin is also monkey-patched onto gr.Dropdown.

Key components include:

• ToolButton - A small button styled with the "tool" CSS class for emoji-sized inline buttons within forms.
• ResizeHandleRow - A gr.Row with an appended "resize-handle-row" CSS class for resizable row layouts.
• FormRow, FormColumn, FormGroup, FormHTML, FormColorPicker - Standard Gradio layout components wrapped with FormComponent to work inside forms.
• DropdownMulti - A dropdown that is always multi-select.
• DropdownEditable - A dropdown that allows custom (typed-in) values.
• InputAccordion - A complex component that combines a hidden checkbox with a gr.Accordion to create a collapsible section whose open/closed state can be used as a form input value. It supports an extra() context manager for placing content in the accordion label area, and implements the context manager protocol for easy nesting.

Usage

Use these components when building or extending the web UI to ensure proper form nesting, consistent styling, and specialized input behaviors like collapsible parameter groups.

Code Reference

Source Location

• Repository: AUTOMATIC1111_Stable_diffusion_webui
• File: modules/ui_components.py
• Lines: 1-145

Signature

class FormComponent:
    def get_expected_parent(self) -> type

class ToolButton(FormComponent, gr.Button):
    def __init__(self, *args, **kwargs)

class ResizeHandleRow(gr.Row):
    def __init__(self, **kwargs)

class FormRow(FormComponent, gr.Row): ...
class FormColumn(FormComponent, gr.Column): ...
class FormGroup(FormComponent, gr.Group): ...
class FormHTML(FormComponent, gr.HTML): ...
class FormColorPicker(FormComponent, gr.ColorPicker): ...
class DropdownMulti(FormComponent, gr.Dropdown): ...
class DropdownEditable(FormComponent, gr.Dropdown): ...

class InputAccordion(gr.Checkbox):
    def __init__(self, value, **kwargs)
    def extra(self) -> gr.Column
    def __enter__(self) -> InputAccordion
    def __exit__(self, exc_type, exc_val, exc_tb) -> None

Import

from modules.ui_components import ToolButton, InputAccordion, FormRow, DropdownMulti

I/O Contract

Inputs

Name	Type	Required	Description
value	bool	Yes	Initial open/closed state for InputAccordion.
label	str	No	Label text for InputAccordion; defaults to "Accordion".
elem_id	str	No	HTML element ID; auto-generated for InputAccordion if not provided.
elem_classes	list	No	Additional CSS classes for ToolButton and other components.

Outputs

Name	Type	Description
value	bool	For InputAccordion, True if the accordion is open, False if closed.
(rendered component)	gr.Component	The Gradio component rendered in the UI.

Usage Examples

import gradio as gr
from modules.ui_components import ToolButton, InputAccordion, FormRow, FormHTML

# Tool button for a small inline action
refresh_btn = ToolButton(value="\U0001f504", elem_id="refresh_btn")

# Collapsible input section
with InputAccordion(False, label="Hires. fix") as enable_hr:
    with enable_hr.extra():
        FormHTML(value="<span>2x</span>", min_width=0)

    hr_upscaler = gr.Dropdown(label="Upscaler", choices=["Latent", "ESRGAN"])
    hr_scale = gr.Slider(minimum=1.0, maximum=4.0, value=2.0, label="Scale")

# FormRow for inline layout inside forms
with FormRow():
    width = gr.Slider(minimum=64, maximum=2048, value=512, label="Width")
    height = gr.Slider(minimum=64, maximum=2048, value=512, label="Height")

Related Pages

• Principle:AUTOMATIC1111_Stable_diffusion_webui_UI_Architecture