Implementation:AUTOMATIC1111 Stable diffusion webui UI Extra Networks
| Knowledge Sources | |
|---|---|
| Domains | UI, ExtraNetworks, Models |
| Last Updated | 2025-05-15 00:00 GMT |
Overview
The UI extra networks module provides the framework for browsing and selecting extra networks (checkpoints, hypernetworks, textual inversions, LoRA, etc.) through card-based and tree-based UI views embedded as tabs within the txt2img and img2img interfaces.
Description
This module implements an extensible page architecture for browsing model resources:
ExtraNetworksPage is the abstract base class that concrete pages extend by implementing list_items(), create_item(), and allowed_directories_for_previews(). It provides:
create_item_html(): Generates HTML for individual cards with preview images, click handlers, copy-path buttons, metadata buttons, edit buttons, sort keys, search terms, and description display. Card dimensions and text scale are configurable via settings.create_tree_dir_item_html()andcreate_tree_file_item_html(): Generate HTML for directory tree view items with collapsible folders and file entries.create_html(): Assembles the complete tab content with both card view and tree view panes using HTML templates.read_user_metadata(): Reads user-defined metadata for items including descriptions.link_preview(): Generates preview image URLs with cache-busting timestamps.
ExtraNetworksItem is a dataclass wrapper for dictionaries representing items.
get_tree() recursively builds a directory tree structure from paths and items for the tree view.
register_page() registers new extra network pages and updates the set of allowed directories for preview image serving.
FastAPI routes serve content to the frontend:
/sd_extra_networks/thumb: Serves preview image files with security checks against allowed directories and extensions./sd_extra_networks/cover-images: Serves base64-decoded cover images from metadata./sd_extra_networks/metadata: Returns item metadata as JSON./sd_extra_networks/get-single-card: Returns HTML for a single card (used for dynamic updates).
create_ui() builds Gradio tabs for each registered page with refresh buttons, metadata editor popups, and tree/card view controls for both txt2img and img2img contexts.
Usage
This module is used by concrete extra network page implementations (checkpoints, hypernetworks, textual inversions) that subclass ExtraNetworksPage. Extension authors (e.g. LoRA extensions) register their own pages via register_page() in on_before_ui() callbacks. The framework handles all UI rendering, preview serving, and user interaction.
Code Reference
Source Location
- Repository: AUTOMATIC1111_Stable_diffusion_webui
- File: modules/ui_extra_networks.py
- Lines: 1-838
Signature
@dataclass
class ExtraNetworksItem:
item: dict
class ExtraNetworksPage:
def __init__(self, title: str): ...
def refresh(self): ...
def create_item(self, name: str, index=None, enable_filter=True) -> dict: ...
def list_items(self) -> list: ...
def allowed_directories_for_previews(self) -> list[str]: ...
def create_item_html(self, tabname: str, item: dict, template=None) -> Union[str, dict]: ...
def create_html(self, tabname: str) -> str: ...
class ExtraNetworksUi:
pages: list
stored_extra_pages: list
button_save_preview: gr.Button
preview_target_filename: gr.Textbox
tabname: str
def register_page(page: ExtraNetworksPage): ...
def get_tree(paths, items) -> dict: ...
def fetch_file(filename: str) -> FileResponse: ...
def get_metadata(page: str, item: str) -> JSONResponse: ...
def create_ui(interface, unrelated_tabs, tabname: str) -> ExtraNetworksUi: ...
def add_pages_to_demo(app): ...
Import
from modules.ui_extra_networks import ExtraNetworksPage, register_page
from modules.ui_extra_networks import create_ui, add_pages_to_demo
from modules.ui_extra_networks import extra_pages
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| title | str | Yes | Display title for the extra networks page (used to derive internal name) |
| tabname | str | Yes | Active tab context ("txt2img" or "img2img") |
| item | dict | Yes | Dictionary containing item properties (name, filename, preview, prompt, metadata, etc.) |
| template | str | No | HTML template string for card rendering |
| paths | Union[str, list[str]] | Yes | Root directory paths for building tree views |
| items | dict[str, ExtraNetworksItem] | Yes | Mapping of file paths to ExtraNetworksItem instances |
| filename | str | Yes | File path for preview image serving (validated against allowed directories) |
Outputs
| Name | Type | Description |
|---|---|---|
| html | str | Generated HTML for cards, tree items, or complete page content |
| ExtraNetworksUi | ExtraNetworksUi | Object containing page references and shared UI components |
| FileResponse | starlette.FileResponse | Served preview image file with appropriate headers |
| JSONResponse | starlette.JSONResponse | Item metadata as JSON |
| tree | dict | Nested directory tree structure for tree view rendering |
Usage Examples
# Creating a custom extra networks page (e.g. for LoRA)
from modules.ui_extra_networks import ExtraNetworksPage, register_page
class ExtraNetworksPageLora(ExtraNetworksPage):
def __init__(self):
super().__init__("Lora")
def list_items(self):
for name, lora_info in lora_models.items():
yield {
"name": name,
"filename": lora_info.filename,
"preview": self.find_preview(lora_info.filename),
"prompt": f"<lora:{name}:1.0>",
"sort_keys": {"default": name.lower()},
}
def allowed_directories_for_previews(self):
return [shared.cmd_opts.lora_dir]
# Register during on_before_ui callback
register_page(ExtraNetworksPageLora())