Implementation:AUTOMATIC1111 Stable diffusion webui Progress Bar

Knowledge Sources	AUTOMATIC1111_Stable_diffusion_webui
Domains	UI_Frontend, Progress_Tracking, Live_Preview
Last Updated	2025-05-15 00:00 GMT

Overview

Manages progress bar display, live image preview, and browser title updates during image generation tasks.

Description

This JavaScript module provides the core progress tracking infrastructure for the web UI. The requestProgress function initiates periodic polling of the "/internal/progress" API endpoint, creating a visual progress bar above the specified container element and optionally showing live preview images in the gallery. It manages a Screen Wake Lock to prevent display sleep during generation (when enabled in opts). The progress bar displays percentage completion and ETA (formatted via formatTime as HH:MM:SS or MM:SS or Ns), and the browser tab title is updated with progress information (when opts.show_progress_in_title is enabled). Two parallel polling loops run: funProgress for the progress bar updates and funLivePreview for fetching and displaying live preview images. The progress bar auto-removes when the task completes, becomes inactive after being active, or exceeds an inactivity timeout (default 40 seconds). The request function provides a generic XHR POST wrapper with JSON handling. The randomId function generates unique task identifiers used to correlate progress requests with server-side tasks.

Usage

This module is called internally by generation functions. When a generation task starts, requestProgress is invoked with the task ID, the container element, and optional gallery element. The progress bar appears automatically and updates in real-time until the task completes. The module also exposes utility functions (request, randomId, formatTime) used by other JavaScript modules.

Code Reference

Source Location

• Repository: AUTOMATIC1111_Stable_diffusion_webui
• File: javascript/progressbar.js
• Lines: 1-215

Signature

function rememberGallerySelection()
function getGallerySelectedIndex()
function request(url, data, handler, errorHandler)
function pad2(x)
function formatTime(secs)
function setTitle(progress)
function randomId()
function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgress, inactivityTimeout)

Import

// Loaded automatically by the web UI as part of the javascript/ directory
// Functions are available globally (request, randomId, requestProgress, etc.)

I/O Contract

Inputs

Name	Type	Required	Description
id_task	string	Yes	Unique task identifier for correlating progress with server-side work
progressbarContainer	HTMLElement	Yes	DOM element above which the progress bar will be inserted
gallery	HTMLElement	No	Gallery element for inserting live preview images (null to disable)
atEnd	function	Yes	Callback invoked when the task completes or times out
onProgress	function	No	Callback invoked on each progress update with the response object
inactivityTimeout	int	No	Seconds of inactivity before auto-removing the progress bar (default 40)

Outputs

Name	Type	Description
(side effect)	DOM	Creates and manages a .progressDiv element with real-time progress display
(side effect)	DOM	Updates document.title with progress percentage and ETA
(side effect)	DOM	Inserts live preview images into the gallery element

Usage Examples

// Generate a unique task ID
var taskId = randomId();
// Returns something like: "task(a1b2c3d4e5f6g7h8i)"

// Start progress tracking for a generation task
requestProgress(
    taskId,
    document.getElementById('txt2img_progressbar'),
    document.getElementById('txt2img_gallery'),
    function() { console.log('Task completed'); },
    function(res) { console.log('Progress:', res.progress); },
    40  // inactivity timeout in seconds
);

// Make a generic API request
request('./api/endpoint', { key: 'value' },
    function(response) { console.log(response); },
    function() { console.error('Request failed'); }
);

// Format time display
formatTime(3661);  // Returns "01:01:01"
formatTime(125);   // Returns "02:05"
formatTime(45);    // Returns "45s"

Related Pages

• Principle:AUTOMATIC1111_Stable_diffusion_webui_Task_Progress_Tracking