# anapnoe/sd-webui-ux architecture

> Architecture diagram of the GitHub repository anapnoe/sd-webui-ux, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/anapnoe/sd-webui-ux
- Repository: https://github.com/anapnoe/sd-webui-ux

## Overview

SD Web UI UX is a browser extension that enhances Stable Diffusion Web UI and Forge with a responsive, optimized interface and database-backed asset browsers. The main workflow begins when the host UI loads the extension: its frontend initializes components and settings, then users browse or manage assets through virtualized grids and backend endpoints. README features also include styles and image browsing, Civitai exploration, themes, templates, and performance optimizations. The sampled files establish the frontend entry flow and portions of asset browsing; unsampled feature wiring is shown only where documented, and backend endpoint details remain limited.

Main entry points: [`javascript/src/index.js`](https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/index.js) (App Initializer), [`javascript/src/components/extra_networks.js`](https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/components/extra_networks.js) (Extra Networks), [`javascript/src/components/sd_output_images.js`](https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/components/sd_output_images.js) (Image Browser), [`javascript/src/utils/api_external.js`](https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/utils/api_external.js) (Backend API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_startup["UI Startup"]
  node_loader["Extension Loader"]
  node_entry["App Initializer<br/>[index.js]"]
  node_components["UI Components<br/>[components.js]"]
  node_settings["UI Settings<br/>[settings.js]"]
  node_templates["Template Engine<br/>[templates.js]"]
  node_storage["Browser Preferences<br/>[storage.js]"]
end

subgraph group_browsing["Asset Browsing"]
  node_extra["Extra Networks<br/>[extra_networks.js]"]
  node_images["Image Browser"]
  node_virtual["Virtual Grid<br/>[virtual.js]"]
  node_tree["Asset Tree<br/>[tree_view.js]"]
  node_forms["Metadata Forms<br/>[dynamic_forms.js]"]
  node_renderers["Card Renderers<br/>[renderers.js]"]
end

subgraph group_features["User Features"]
  node_styles["Styles Manager<br/>[sd_styles.js]"]
  node_civitai["Civitai Explorer"]
  node_theme["Theme Editor<br/>[theme_editor.js]"]
  node_mobile["Mobile Layout<br/>[mobile.js]"]
  node_optimizations["DOM Optimizations<br/>[optimizations.js]"]
  node_logger["Developer Console<br/>[logger.js]"]
end

subgraph group_backend["Backend Data"]
  node_api["Backend API<br/>[api_external.js]"]
  node_internal_api["Internal API<br/>[api.js]"]
  node_database[("Asset Database")]
  node_stylesdb[("Styles Database<br/>[db_styles.py]")]
end

node_user(("UI User"))
node_host["Stable Diffusion UI"]
node_host_backend["Web UI Backend"]
node_civitai_service["Civitai Service"]

node_user -->|"uses"| node_host
node_host -->|"loads extension"| node_loader
node_loader -->|"loads module"| node_entry
node_entry -->|"loads templates"| node_templates
node_entry -->|"initializes UI"| node_components
node_entry -->|"sets options"| node_settings
node_entry -->|"listens for changes"| node_storage
node_entry -->|"adapts layout"| node_mobile
node_entry -->|"optimizes DOM"| node_optimizations
node_entry -->|"sets up logging"| node_logger
node_user -->|"browses networks"| node_extra
node_user -->|"browses images"| node_images
node_user -->|"manages styles"| node_styles
node_user -->|"explores models"| node_civitai
node_user -->|"customizes theme"| node_theme
node_extra -->|"renders items"| node_virtual
node_images -->|"renders items"| node_virtual
node_extra -->|"creates navigation"| node_tree
node_images -->|"creates navigation"| node_tree
node_extra -->|"builds metadata forms"| node_forms
node_images -->|"builds metadata forms"| node_forms
node_virtual -->|"renders cards"| node_renderers
node_extra -->|"requests assets"| node_api
node_images -->|"requests images"| node_api
node_extra -->|"resyncs index"| node_internal_api
node_images -->|"resyncs index"| node_internal_api
node_api -->|"calls endpoints"| node_host_backend
node_internal_api -->|"calls endpoints"| node_host_backend
node_host_backend -->|"queries asset data"| node_database
node_styles -->|"requests style data"| node_api
node_api -->|"accesses styles"| node_stylesdb
node_civitai -.->|"fetches listings"| node_civitai_service
node_renderers -.->|"shows model details"| node_civitai_service

click node_loader "https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/anapnoe_sd_webui_ux.js"
click node_entry "https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/index.js"
click node_components "https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/components/components.js"
click node_settings "https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/components/settings.js"
click node_templates "https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/components/templates.js"
click node_storage "https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/utils/storage.js"
click node_extra "https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/components/extra_networks.js"
click node_images "https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/components/sd_output_images.js"
click node_virtual "https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/components/uiux/virtual.js"
click node_tree "https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/components/uiux/tree_view.js"
click node_forms "https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/components/dynamic_forms.js"
click node_renderers "https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/utils/renderers.js"
click node_styles "https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/components/sd_styles.js"
click node_civitai "https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/components/civitai_explorer.js"
click node_theme "https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/components/theme_editor.js"
click node_mobile "https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/utils/mobile.js"
click node_optimizations "https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/components/optimizations.js"
click node_logger "https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/components/logger.js"
click node_api "https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/utils/api_external.js"
click node_internal_api "https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/utils/api.js"
click node_database "https://github.com/anapnoe/sd-webui-ux/blob/main/scripts/anapnoe/database_manager.py"
click node_stylesdb "https://github.com/anapnoe/sd-webui-ux/blob/main/scripts/anapnoe/db_styles.py"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_loader,node_entry,node_components,node_settings,node_templates,node_storage,node_user,node_host,node_host_backend toneBlue
class node_extra,node_images,node_virtual,node_tree,node_forms,node_renderers toneAmber
class node_styles,node_civitai,node_theme,node_mobile,node_optimizations,node_logger toneMint
class node_api,node_internal_api,node_database,node_stylesdb toneRose
class node_civitai_service toneIndigo
```

## Components

### UI Startup

- [Extension Loader](https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/anapnoe_sd_webui_ux.js): `javascript/anapnoe_sd_webui_ux.js`
- [App Initializer](https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/index.js): `javascript/src/index.js`
- [UI Components](https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/components/components.js): `javascript/src/components/components.js`
- [UI Settings](https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/components/settings.js): `javascript/src/components/settings.js`
- [Template Engine](https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/components/templates.js): `javascript/src/components/templates.js`
- [Browser Preferences](https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/utils/storage.js): `javascript/src/utils/storage.js`

### Asset Browsing

- [Extra Networks](https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/components/extra_networks.js): `javascript/src/components/extra_networks.js`
- [Image Browser](https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/components/sd_output_images.js): `javascript/src/components/sd_output_images.js`
- [Virtual Grid](https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/components/uiux/virtual.js): `javascript/src/components/uiux/virtual.js`
- [Asset Tree](https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/components/uiux/tree_view.js): `javascript/src/components/uiux/tree_view.js`
- [Metadata Forms](https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/components/dynamic_forms.js): `javascript/src/components/dynamic_forms.js`
- [Card Renderers](https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/utils/renderers.js): `javascript/src/utils/renderers.js`

### User Features

- [Styles Manager](https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/components/sd_styles.js): `javascript/src/components/sd_styles.js`
- [Civitai Explorer](https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/components/civitai_explorer.js): `javascript/src/components/civitai_explorer.js`
- [Theme Editor](https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/components/theme_editor.js): `javascript/src/components/theme_editor.js`
- [Mobile Layout](https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/utils/mobile.js): `javascript/src/utils/mobile.js`
- [DOM Optimizations](https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/components/optimizations.js): `javascript/src/components/optimizations.js`
- [Developer Console](https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/components/logger.js): `javascript/src/components/logger.js`

### Backend Data

- [Backend API](https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/utils/api_external.js): `javascript/src/utils/api_external.js`
- [Internal API](https://github.com/anapnoe/sd-webui-ux/blob/main/javascript/src/utils/api.js): `javascript/src/utils/api.js`
- [Asset Database](https://github.com/anapnoe/sd-webui-ux/blob/main/scripts/anapnoe/database_manager.py): `scripts/anapnoe/database_manager.py`
- [Styles Database](https://github.com/anapnoe/sd-webui-ux/blob/main/scripts/anapnoe/db_styles.py): `scripts/anapnoe/db_styles.py`

### Other components

- **UI User**
- **Stable Diffusion UI**
- **Web UI Backend**
- **Civitai Service**

## Connections

- UI User → Stable Diffusion UI: uses
- Stable Diffusion UI → Extension Loader: loads extension
- Extension Loader → App Initializer: loads module
- App Initializer → Template Engine: loads templates
- App Initializer → UI Components: initializes UI
- App Initializer → UI Settings: sets options
- App Initializer → Browser Preferences: listens for changes
- App Initializer → Mobile Layout: adapts layout
- App Initializer → DOM Optimizations: optimizes DOM
- App Initializer → Developer Console: sets up logging
- UI User → Extra Networks: browses networks
- UI User → Image Browser: browses images
- UI User → Styles Manager: manages styles
- UI User → Civitai Explorer: explores models
- UI User → Theme Editor: customizes theme
- Extra Networks → Virtual Grid: renders items
- Image Browser → Virtual Grid: renders items
- Extra Networks → Asset Tree: creates navigation
- Image Browser → Asset Tree: creates navigation
- Extra Networks → Metadata Forms: builds metadata forms
- Image Browser → Metadata Forms: builds metadata forms
- Virtual Grid → Card Renderers: renders cards
- Extra Networks → Backend API: requests assets
- Image Browser → Backend API: requests images
- Extra Networks → Internal API: resyncs index
- Image Browser → Internal API: resyncs index
- Backend API → Web UI Backend: calls endpoints
- Internal API → Web UI Backend: calls endpoints
- Web UI Backend → Asset Database: queries asset data
- Styles Manager → Backend API: requests style data
- Backend API → Styles Database: accesses styles
- Civitai Explorer → Civitai Service: fetches listings
- Card Renderers → Civitai Service: shows model details