Implementation:AUTOMATIC1111 Stable diffusion webui Root Script JS

Knowledge Sources	AUTOMATIC1111_Stable_diffusion_webui
Domains	Frontend JavaScript, UI Event System
Last Updated	2025-05-15 00:00 GMT

Overview

Provides the core client-side JavaScript infrastructure for the web UI, including Gradio app access, UI lifecycle callbacks, keyboard shortcuts, DOM mutation observation, and element visibility utilities.

Description

This is the root JavaScript file loaded by the web UI that establishes the fundamental client-side event system and utility functions.

Gradio App Access:

• gradioApp() - Returns the root element of the Gradio application, handling both shadow DOM and regular DOM configurations.

UI Navigation:

• get_uiCurrentTab() - Returns the currently selected top-level tab button.
• get_uiCurrentTabContent() - Returns the currently visible tab content div.

Callback Registration System: The module maintains several callback arrays and registration functions:

• onUiUpdate(callback) - Called on every DOM mutation with MutationRecords as argument.
• onAfterUiUpdate(callback) - Called 200ms after the last mutation (debounced), preferred for non-mutation-dependent logic.
• onUiLoaded(callback) - Called once when the UI is first fully loaded (detected by the presence of #txt2img_prompt).
• onUiTabChange(callback) - Called when the selected top-level tab changes.
• onOptionsChanged(callback) - Called when application options are changed.
• onOptionsAvailable(callback) - Called when the global opts object becomes available; fires immediately if already available.

Mutation Observer: A MutationObserver is attached to the Gradio app root on DOMContentLoaded. It triggers UI update callbacks, schedules debounced after-update callbacks, fires the one-time loaded callback, and detects tab changes.

Keyboard Shortcuts:

• Ctrl+Enter - Starts or restarts generation (interrupts then re-clicks generate).
• Alt+Enter - Skips the current generation step.
• Escape - Interrupts generation (unless a popup or lightbox is active).

Visibility Utilities:

• uiElementIsVisible(el) - Recursively checks if an element is visible (not hidden by CSS display:none).
• uiElementInSight(el) - Checks if an element is within the viewport bounds.

Usage

Use these functions and callbacks when writing frontend extensions or scripts that need to react to UI state changes, register initialization logic, or interact with the Gradio application DOM.

Code Reference

Source Location

• Repository: AUTOMATIC1111_Stable_diffusion_webui
• File: script.js
• Lines: 1-214

Signature

function gradioApp() -> Element
function get_uiCurrentTab() -> Element
function get_uiCurrentTabContent() -> Element
function onUiUpdate(callback: Function) -> void
function onAfterUiUpdate(callback: Function) -> void
function onUiLoaded(callback: Function) -> void
function onUiTabChange(callback: Function) -> void
function onOptionsChanged(callback: Function) -> void
function onOptionsAvailable(callback: Function) -> void
function executeCallbacks(queue: Array, arg: any) -> void
function scheduleAfterUiUpdateCallbacks() -> void
function uiElementIsVisible(el: Element) -> boolean
function uiElementInSight(el: Element) -> boolean

Import

<!-- Loaded automatically by the web UI as a root-level script -->
<script src="script.js"></script>

<!-- In extension scripts, these functions are available globally -->

I/O Contract

Inputs

Name	Type	Required	Description
callback	Function	Yes	Callback function to register with any of the on* registration functions.
el	Element	Yes	DOM element to check visibility for uiElementIsVisible and uiElementInSight.

Outputs

Name	Type	Description
gradioApp()	Element	The root Gradio app element or shadow root.
get_uiCurrentTab()	Element	The currently selected tab button element.
get_uiCurrentTabContent()	Element	The currently visible tab content element.
uiElementIsVisible()	boolean	True if the element and all ancestors have display != none.
uiElementInSight()	boolean	True if the element is within the viewport.

Usage Examples

// Register a callback for when the UI is fully loaded
onUiLoaded(function() {
    console.log("Web UI is ready");
    const app = gradioApp();
    // Modify UI elements
});

// React to tab changes
onUiTabChange(function() {
    const tab = get_uiCurrentTab();
    console.log("Switched to tab:", tab.textContent);
});

// Debounced UI update handler
onAfterUiUpdate(function() {
    // Perform DOM updates that don't need mutation records
});

// Check element visibility before performing actions
if (uiElementIsVisible(myElement) && uiElementInSight(myElement)) {
    // Element is visible and in viewport
}

Related Pages

• Principle:AUTOMATIC1111_Stable_diffusion_webui_Frontend_Architecture