How anapnoe/sd-webui-ux works
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: index.js App Initializer · extra_networks.js Extra Networks · sd_output_images.js Image Browser · api_external.js Backend API
Components 26
UI Startup
- Extension Loader
javascript/anapnoe_sd_webui_ux.js - App Initializer
javascript/src/index.js - UI Components
javascript/src/components/components.js - UI Settings
javascript/src/components/settings.js - Template Engine
javascript/src/components/templates.js - Browser Preferences
javascript/src/utils/storage.js
Asset Browsing
- Extra Networks
javascript/src/components/extra_networks.js - Image Browser
javascript/src/components/sd_output_images.js - Virtual Grid
javascript/src/components/uiux/virtual.js - Asset Tree
javascript/src/components/uiux/tree_view.js - Metadata Forms
javascript/src/components/dynamic_forms.js - Card Renderers
javascript/src/utils/renderers.js
User Features
- Styles Manager
javascript/src/components/sd_styles.js - Civitai Explorer
javascript/src/components/civitai_explorer.js - Theme Editor
javascript/src/components/theme_editor.js - Mobile Layout
javascript/src/utils/mobile.js - DOM Optimizations
javascript/src/components/optimizations.js - Developer Console
javascript/src/components/logger.js
Backend Data
- Backend API
javascript/src/utils/api_external.js - Internal API
javascript/src/utils/api.js - Asset Database
scripts/anapnoe/database_manager.py - Styles Database
scripts/anapnoe/db_styles.py
Other components
- UI User
- Stable Diffusion UI
- Web UI Backend
- Civitai Service
Connections 33
- 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