Implementation:AUTOMATIC1111 Stable diffusion webui UI Builder
| Knowledge Sources | |
|---|---|
| Domains | UI, Gradio, WebInterface |
| Last Updated | 2025-05-15 00:00 GMT |
Overview
The UI builder module is the central orchestration file that assembles the entire Gradio web interface, constructing the txt2img, img2img, extras, PNG info, training, checkpoint merger, settings, and extensions tabs with all their interactive controls and event wiring.
Description
The create_ui() function is the main entry point that builds the complete web interface. It performs the following steps:
- Reloads JavaScript and resets parameter copy/paste state
- Initializes
UiSettingsand registers all settings - Constructs the txt2img interface with prompt inputs, dimension sliders, CFG scale, hires fix accordion (with upscaler, denoising strength, scale, resize dimensions, sampler/scheduler overrides, and separate hires prompts), batch controls, override settings dropdown, and script UI
- Constructs the img2img interface with similar controls plus input image tabs (single image, batch, sketch, inpaint, inpaint sketch, inpaint upload, batch directory), resize mode, mask settings, and denoising strength
- Wires all Gradio component events (click, change, release) to backend processing functions via GPU call queue wrappers
- Registers paste fields for infotext parameter transfer between tabs
- Sets up extra networks tabs, output panels, and token counters
- Assembles all interfaces into a tabbed
gr.Blocksdemo with quicksettings bar - Adds load/save support and internal API routes
Helper functions include calc_resolution_hires() for computing upscaled resolution previews, resize_from_to_html() for scale-by resolution display, process_interrogate() for CLIP/deepbooru interrogation, update_token_counter() for prompt token counting, apply_setting() for applying individual settings, and ordered_ui_categories() for user-customizable UI element ordering.
Usage
This module is called once during application startup to build the entire web UI. It is the top-level entry point that composes all other UI modules (ui_toprow, ui_settings, ui_extensions, ui_extra_networks, ui_common, ui_postprocessing, ui_checkpoint_merger) and connects the frontend to the backend processing pipeline. It should not be called directly by extensions; instead, extensions use the script system and callbacks to inject their UI components.
Code Reference
Source Location
- Repository: AUTOMATIC1111_Stable_diffusion_webui
- File: modules/ui.py
- Lines: 1-1235
Signature
def create_ui() -> gr.Blocks: ...
def calc_resolution_hires(enable, width, height, hr_scale, hr_resize_x, hr_resize_y) -> str: ...
def resize_from_to_html(width, height, scale_by) -> str: ...
def process_interrogate(interrogation_function, mode, ii_input_dir, ii_output_dir, *ii_singles): ...
def update_token_counter(text, steps, styles, *, is_positive=True) -> str: ...
def apply_setting(key, value): ...
def ordered_ui_categories(): ...
def create_override_settings_dropdown(tabname, row) -> gr.Dropdown: ...
Import
from modules.ui import create_ui
from modules.ui import calc_resolution_hires, update_token_counter
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| (none) | create_ui() takes no arguments; it reads from shared.opts, shared.cmd_opts, and module-level state | ||
| key | str | Yes | Settings key name for apply_setting() |
| value | any | Yes | New value to apply for apply_setting() |
| text | str | Yes | Prompt text for update_token_counter() |
| steps | int | Yes | Number of sampling steps for update_token_counter() |
| styles | list | Yes | List of selected style names for update_token_counter() |
Outputs
| Name | Type | Description |
|---|---|---|
| demo | gr.Blocks | The assembled Gradio Blocks application with all tabs, events, and API routes |
| resolution_html | str | HTML string showing resolution preview (from calc_resolution_hires / resize_from_to_html) |
| token_count_html | str | HTML string showing token count / max length (from update_token_counter) |
Usage Examples
# Application startup (called from webui.py)
from modules.ui import create_ui
demo = create_ui()
demo.launch(server_name="0.0.0.0", server_port=7860)
# Token counter usage (wired internally to Gradio events)
html = update_token_counter("a photo of a cat", steps=20, styles=["cinematic"])
# Returns: "<span class='gr-box gr-text-input'>8/75</span>"