Implementation:AUTOMATIC1111 Stable diffusion webui Progress Bar
| Knowledge Sources | |
|---|---|
| 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"