Implementation:AUTOMATIC1111 Stable diffusion webui Profiler Visualization

Knowledge Sources	AUTOMATIC1111_Stable_diffusion_webui
Domains	UI_Frontend, Performance_Profiling, Data_Visualization
Last Updated	2025-05-15 00:00 GMT

Overview

Renders hierarchical profiling data as an interactive HTML table for visualizing performance timing records.

Description

This JavaScript module provides functions to create and display profiling data in a popup table format. The createRow helper function builds table rows with automatic colspan calculation for undefined cells. The createVisualizationTable function takes a data dictionary of key-value pairs (where keys use "/" as a hierarchy separator and values are timing measurements) and builds an interactive HTML table. Keys are split by "/" into hierarchical parts, allowing multi-level display. The table supports two sort modes: alphabetical (default) and numeric (by value, descending). A cutoff parameter hides entries below a threshold duration, grouping them into expandable "others" rows with click-to-expand functionality. Hidden child entries can also be revealed by clicking on parent cells, which are styled as clickable links. The showProfile function fetches profiling data from a specified API path, adds a "total" entry, and displays the visualization in a popup with a default cutoff of 0.05 seconds.

Usage

This module is used to display performance profiling results. When profiling data is available, calling showProfile with the API endpoint path renders an interactive timing breakdown table in a popup overlay. Users can click on grouped entries to expand details and see individual timing records below the cutoff threshold.

Code Reference

Source Location

• Repository: AUTOMATIC1111_Stable_diffusion_webui
• File: javascript/profilerVisualization.js
• Lines: 1-174

Signature

function createRow(table, cellName, items)
function createVisualizationTable(data, cutoff, sort)
function showProfile(path, cutoff)

Import

// Loaded automatically by the web UI as part of the javascript/ directory
// showProfile is available globally

I/O Contract

Inputs

Name	Type	Required	Description
data	object	Yes	Dictionary mapping hierarchical key strings (e.g., "module/function") to numeric values
cutoff	float	No	Minimum value threshold for displaying entries; entries below this are grouped as "others" (default 0)
sort	string	No	Sort mode: "number" for descending numeric sort, otherwise alphabetical
path	string	Yes	API endpoint path to fetch profiling data from

Outputs

Name	Type	Description
table	HTMLTableElement	The constructed visualization table element (returned by createVisualizationTable)
(side effect)	DOM	showProfile displays the table in a popup overlay

Usage Examples

// Display profiling data from the internal API endpoint
showProfile('./internal/profile-startup', 0.05);

// Create a visualization table manually
var data = {
    "model/load": 2.5,
    "model/compile": 1.2,
    "ui/setup": 0.8,
    "ui/extensions": 0.3,
    "ui/scripts": 0.02  // Below cutoff, grouped as "others"
};
var table = createVisualizationTable(data, 0.05, "number");
document.body.appendChild(table);

Related Pages

• Principle:AUTOMATIC1111_Stable_diffusion_webui_Webui_Performance_Profiling