Implementation:AUTOMATIC1111 Stable diffusion webui UI Core JavaScript
| Knowledge Sources | |
|---|---|
| Domains | UI, Frontend, Generation Workflow |
| Last Updated | 2025-05-15 00:00 GMT |
Overview
Provides the main collection of UI interaction functions for the Stable Diffusion WebUI, including tab switching, image submission and generation workflow, gallery management, global options handling, and various utility functions.
Description
This is the second-largest JavaScript file in the WebUI and serves as the essential glue between the Gradio frontend and the Python backend. Key functional areas include:
Tab navigation: switch_to_txt2img, switch_to_img2img, switch_to_sketch, switch_to_inpaint, switch_to_inpaint_sketch, and switch_to_extras programmatically click the appropriate Gradio tab buttons to switch between generation modes.
Submit handlers: submit, submit_img2img, and submit_extras generate unique task IDs via randomId(), store them in local storage, wire up progress tracking via requestProgress, toggle submit/interrupt/skip button visibility, and prepare arguments for the backend. create_submit_args cleans up the argument array by nullifying previously returned gallery data to avoid re-uploading large images.
Gallery management: all_gallery_buttons, selected_gallery_button, selected_gallery_index, and extract_image_from_gallery handle finding and selecting images in Gradio gallery components across all visible tabs.
Global options (opts): The global opts object is initialized from a hidden JSON textarea element. A property setter is installed on the textarea's value property so that any server-side updates to settings automatically parse the new JSON and fire optionsChangedCallbacks.
Utility functions: updateInput simulates Gradio input events for programmatic edits, setupResolutionPasting enables pasting "widthxheight" strings, switchWidthHeight swaps dimension values, setRandomSeed sets seed to -1, restart_reload handles server restart with polling, onEdit provides debounced input handlers, and selectCheckpoint triggers model switching.
Usage
This module is loaded automatically by the WebUI as a core JavaScript file. All functions are available in the global scope and are called from Gradio component event handlers, HTML onclick attributes, and other JavaScript modules.
Code Reference
Source Location
- Repository: AUTOMATIC1111_Stable_diffusion_webui
- File: javascript/ui.js
- Lines: 1-436
Signature
function set_theme(theme)
function all_gallery_buttons()
function selected_gallery_button()
function selected_gallery_index()
function extract_image_from_gallery(gallery)
function switch_to_txt2img()
function switch_to_img2img()
function switch_to_inpaint()
function switch_to_extras()
function get_tab_index(tabId)
function create_submit_args(args)
function submit()
function submit_txt2img_upscale()
function submit_img2img()
function submit_extras()
function showSubmitButtons(tabname, show)
function restoreProgressTxt2img()
function restoreProgressImg2img()
function setupResolutionPasting(tabname)
function modelmerger()
function restart_reload()
function updateInput(target)
function selectCheckpoint(name)
function switchWidthHeight(tabname)
function setRandomSeed(elem_id)
function onEdit(editId, elem, afterMs, func)
Import
// Loaded automatically by the WebUI as a core JavaScript file.
// No explicit import needed. All functions are in global scope.
// Depends on: gradioApp(), randomId(), requestProgress(),
// localGet(), localSet(), localRemove(), onAfterUiUpdate(),
// onUiLoaded(), onOptionsChanged(), executeCallbacks()
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| arguments | IArguments | Yes | Gradio callback arguments passed to submit functions, containing generation parameters |
| tabname | string | Yes | The generation tab name ("txt2img", "img2img", or "extras") |
| gallery | Array | No | Array of gallery image objects passed from Gradio gallery component |
| theme | string | No | Theme name to set ("dark" or "light") |
| tabId | string | No | DOM element ID for tab index lookup |
Outputs
| Name | Type | Description |
|---|---|---|
| res | Array | Modified argument array returned to Gradio with task ID injected and gallery data cleaned |
| opts | object | Global options object parsed from server settings JSON, updated reactively |
| (DOM mutation) | void | Modifies button visibility, textarea values, gallery selection, and page state |
Usage Examples
// Switch to the img2img inpaint tab programmatically:
switch_to_inpaint();
// Extract the currently selected image from any visible gallery:
var selectedImage = extract_image_from_gallery(galleryData);
// Simulate a Gradio input event after programmatically editing a textarea:
var textarea = gradioApp().querySelector("#txt2img_prompt textarea");
textarea.value = "a beautiful sunset";
updateInput(textarea);
// Set a random seed for txt2img:
setRandomSeed("txt2img_seed");
// Swap width and height for img2img:
switchWidthHeight("img2img");
// Select a checkpoint by name:
selectCheckpoint("v1-5-pruned-emaonly.safetensors");
// Debounced input handler (fires 500ms after user stops typing):
onEdit("myEdit", inputElement, 500, function() {
console.log("User finished typing");
});
// Access global options:
console.log(opts.sd_model_checkpoint);