Implementation:AUTOMATIC1111 Stable diffusion webui Extra Networks UI
| Knowledge Sources | |
|---|---|
| Domains | UI, Extra Networks, LoRA |
| Last Updated | 2025-05-15 00:00 GMT |
Overview
Implements the complete client-side logic for the Extra Networks panel, handling card browsing, filtering, sorting, tree navigation, metadata display, and prompt integration for LoRA, checkpoints, hypernetworks, and textual inversions.
Description
This is the largest JavaScript module in the WebUI and manages one of the most feature-rich panels in the interface. Key functional areas include:
Tab setup (setupExtraNetworks, setupExtraNetworksForTab): Initializes search, filter, sort, and refresh controls for each extra networks sub-tab within both txt2img and img2img. Registers prompt textareas for focus tracking.
Card filtering and sorting (applyFilter, applySort): Cards can be filtered by search text (matching against .search_terms and .description elements), sorted by configurable keys in ascending/descending order, and hidden when search terms are too short for search-only items.
Tree navigation (extraNetworksTreeProcessDirectoryClick, extraNetworksTreeOnClick): Implements a directory tree with expand/collapse behavior, selected state management, and search text updates based on the selected path. Clicking a directory selects and expands it; clicking again collapses and deselects.
Prompt integration (cardClicked, updatePromptArea, tryToRemoveExtraNetworkFromPrompt): Clicking a card inserts its activation text into the active prompt textarea using the format <type:name:weight>. If the text is already present, it is removed (toggle behavior). Supports both positive and negative prompts.
Metadata and popups (extraNetworksShowMetadata, extraNetworksRequestMetadata): Fetches model metadata from the /sd_extra_networks/metadata API endpoint, flattens nested JSON structures, and displays them in a popup table. Also supports user metadata editing.
Deferred initialization: Uses a MutationObserver to wait until all extra network tabs are fully rendered before running setup, since onUiLoaded fires before all tab HTML is generated.
Usage
This module is loaded automatically by the WebUI. Users interact with the Extra Networks panel by clicking the model card buttons below the prompt areas. Extension developers who add new extra network types benefit from this code automatically handling their cards' UI behavior.
Code Reference
Source Location
- Repository: AUTOMATIC1111_Stable_diffusion_webui
- File: javascript/extraNetworks.js
- Lines: 1-712
Signature
function toggleCss(key, css, enable)
function setupExtraNetworksForTab(tabname)
function extraNetworksMovePromptToTab(tabname, id, showPrompt, showNegativePrompt)
function extraNetworksShowControlsForPage(tabname, tabname_full)
function extraNetworksUnrelatedTabSelected(tabname)
function extraNetworksTabSelected(tabname, id, showPrompt, showNegativePrompt, tabname_full)
function applyExtraNetworkFilter(tabname_full)
function applyExtraNetworkSort(tabname_full)
function setupExtraNetworks()
function tryToRemoveExtraNetworkFromPrompt(textarea, text, isNeg)
function updatePromptArea(text, textArea, isNeg)
function cardClicked(tabname, textToAdd, textToAddNegative, allowNegativePrompt)
function saveCardPreview(event, tabname, filename)
function extraNetworksTreeProcessDirectoryClick(event, btn, tabname, extra_networks_tabname)
function extraNetworksTreeOnClick(event, tabname, extra_networks_tabname)
function extraNetworksControlSortOnClick(event, tabname, extra_networks_tabname)
function extraNetworksControlSortDirOnClick(event, tabname, extra_networks_tabname)
function extraNetworksControlTreeViewOnClick(event, tabname, extra_networks_tabname)
function extraNetworksControlRefreshOnClick(event, tabname, extra_networks_tabname)
function popup(contents)
function extraNetworksShowMetadata(text)
function extraNetworksFlattenMetadata(obj)
function extraNetworksRequestMetadata(event, extraPage)
function extraNetworksEditUserMetadata(event, tabname, extraPage)
function extraNetworksRefreshSingleCard(page, tabname, name)
function requestGet(url, data, handler, errorHandler)
Import
// Loaded automatically by the WebUI as a core JavaScript file.
// No explicit import needed. Functions are defined in global scope.
// Key globals used: gradioApp(), opts, updateInput(), onUiLoaded()
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| tabname | string | Yes | The active tab name ("txt2img" or "img2img") |
| extra_networks_tabname | string | Yes | The active extra networks sub-tab ID (e.g., "lora", "checkpoints") |
| textToAdd | string | Yes | The activation text to insert into the prompt (e.g., "<lora:model:1>") |
| textToAddNegative | string | No | Optional negative prompt text for the card |
| allowNegativePrompt | boolean | No | Whether clicking the card can target the negative prompt textarea |
| opts.extra_networks_add_text_separator | string | No | Separator string added before/after extra network text in prompts |
Outputs
| Name | Type | Description |
|---|---|---|
| (DOM mutation) | void | Modifies prompt textarea values, card visibility, sort order, and popup display |
| extraNetworksApplyFilter | object | Global map of filter functions keyed by tab name |
| extraNetworksApplySort | object | Global map of sort functions keyed by tab name |
| activePromptTextarea | object | Global map of active prompt textareas keyed by tab name |
Usage Examples
// Card click handler (called from HTML onclick attributes on card elements):
cardClicked("txt2img", "<lora:my_model:1>", "", true);
// Programmatically trigger a filter refresh on a specific tab:
applyExtraNetworkFilter("txt2img_lora");
// Show metadata popup for an extra network card:
extraNetworksRequestMetadata(event, "lora");
// Refresh a single card after metadata edit:
extraNetworksRefreshSingleCard("lora", "txt2img", "my_model");
// The module is initialized automatically:
// onUiLoaded -> MutationObserver -> setupExtraNetworks()