Implementation:AUTOMATIC1111 Stable diffusion webui UI Common
| Knowledge Sources | |
|---|---|
| Domains | UI, Components, Utilities |
| Last Updated | 2025-05-15 00:00 GMT |
Overview
The UI common module provides shared UI components and utility functions used across multiple tabs, including the standardized output panel with gallery and save buttons, refresh buttons for dropdowns, file saving logic with CSV logging, and popup dialog setup.
Description
This module provides the following key components:
OutputPanel is a dataclass that holds references to the gallery, generation info textbox, infotext HTML, HTML log, and optional upscale button. The create_output_panel() function constructs this panel with:
- A gallery component for displaying generated images
- An open-folder button that opens the output directory or subdirectory
- Save and save-zip buttons (for non-extras tabs) that trigger
save_files() - Send-to buttons for img2img, inpaint, and extras tabs with paste parameter registration
- Generation info display with infotext HTML and log output
- An optional upscale button for txt2img
save_files() serializes generation data and images to disk. It parses JSON generation info, saves each image using modules.images.save_image(), writes metadata to a CSV log file, and optionally creates a zip archive. The update_logfile() helper ensures CSV integrity when log fields are updated.
create_refresh_button() creates a ToolButton that re-fetches choices for a dropdown component by calling a refresh method and updating component attributes.
setup_dialog() manages popup visibility toggling, making a dialog invisible by default and showing it in a fullscreen modal when a trigger button is clicked.
plaintext_to_html() converts plain text to HTML with proper escaping and line break handling.
Usage
This module is used by the main ui.py builder and other UI modules to create consistent output panels for txt2img, img2img, and extras tabs. The refresh button utility is used throughout the UI wherever dropdown choices need to be dynamically refreshed (e.g. checkpoint lists, VAE lists, sampler lists). Extension authors can use create_output_panel() and create_refresh_button() to maintain UI consistency.
Code Reference
Source Location
- Repository: AUTOMATIC1111_Stable_diffusion_webui
- File: modules/ui_common.py
- Lines: 1-325
Signature
@dataclasses.dataclass
class OutputPanel:
gallery = None
generation_info = None
infotext = None
html_log = None
button_upscale = None
def create_output_panel(tabname: str, outdir: str, toprow=None) -> OutputPanel: ...
def save_files(js_data, images, do_make_zip, index) -> tuple: ...
def update_logfile(logfile_path: str, fields: list): ...
def create_refresh_button(refresh_component, refresh_method, refreshed_args, elem_id) -> ToolButton: ...
def setup_dialog(button_show, dialog, *, button_close=None): ...
def plaintext_to_html(text: str, classname=None) -> str: ...
def update_generation_info(generation_info, html_info, img_index) -> tuple: ...
Import
from modules.ui_common import create_output_panel, create_refresh_button
from modules.ui_common import plaintext_to_html, save_files, setup_dialog
from modules.ui_common import OutputPanel
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| tabname | str | Yes | Tab identifier (e.g. "txt2img", "img2img", "extras") used for element IDs |
| outdir | str | Yes | Default output directory path for the open-folder button |
| toprow | Toprow | No | Optional toprow object for inline image creation |
| js_data | str | Yes | JSON string containing generation parameters and infotexts (for save_files) |
| images | list | Yes | List of image file data URLs to save (for save_files) |
| do_make_zip | bool | Yes | Whether to create a zip archive of saved images |
| index | int | Yes | Selected gallery image index (-1 for all) |
| refresh_component | gr.Component | Yes | Gradio component(s) to refresh (for create_refresh_button) |
| refresh_method | callable | Yes | Function to call to refresh data (for create_refresh_button) |
Outputs
| Name | Type | Description |
|---|---|---|
| OutputPanel | OutputPanel | Dataclass containing references to all output panel Gradio components |
| (files, html) | tuple | Updated file list and HTML status message (from save_files) |
| refresh_button | ToolButton | The created refresh button component (from create_refresh_button) |
| html | str | Escaped HTML string (from plaintext_to_html) |
Usage Examples
# Creating an output panel for a custom tab
from modules.ui_common import create_output_panel
output = create_output_panel("txt2img", opts.outdir_txt2img_samples, toprow)
# output.gallery - the gallery component
# output.generation_info - hidden textbox with generation JSON
# output.infotext - HTML display of generation parameters
# Creating a refresh button for a dropdown
from modules.ui_common import create_refresh_button
dropdown = gr.Dropdown(label="Model", choices=get_models())
create_refresh_button(dropdown, refresh_models, lambda: {"choices": get_models()}, "refresh_models")