React UI and V2 API extension for SD.Next
Infinite canvas interface with async job queue, real-time WebSocket progress, and full model management
SD.Next Enso is a React-based frontend and V2 API for SD.Next, packaged as an extension. It replaces the default Gradio UI with an infinite canvas workspace, an async job queue API, and real-time WebSocket progress - while keeping full compatibility with all SD.Next backends and models.
It runs as a standard SD.Next extension: drop it into extensions-builtin/ and it registers its API routes and mounts the frontend automatically.
- React frontend - Infinite canvas, generation controls, gallery browser, model management, system dashboard
- V2 API (
enso_api/) - Async job queue with SQLite persistence, file upload staging, WebSocket progress push - Extension entry point (
scripts/enso.py) - Hooks into SD.Next viascript_callbacks.on_app_started
- Konva.js-powered - Smooth pan, zoom, and transform at any scale
- Multi-frame workspace - Place input images, masks, and results side by side
- Smart viewport - Efficient culling and lazy loading for large workspaces
- Transform controls - Resize, rotate, flip with visual handles
- Context menus - Right-click actions contextual to selection
|
|
|
- Async job queue - Submit jobs, poll status, or stream via WebSocket
- SQLite persistence - Jobs survive server restarts
- File upload staging - Upload images once, reference by ID across requests
- Global WebSocket - Real-time progress push, interrupt/skip commands
- Per-job WebSocket - Stream individual job progress and results
- Browse, search, and switch models
- Model metadata and analysis
- LoRA extraction and merge operations
- HuggingFace integration (token auth, model browser)
- CivitAI model search
- Loaded models inventory
- Server info, memory, and GPU status
- Benchmark runner
- Update management
- Storage analysis
- Log viewer
- Browse generated images with metadata
- Folder navigation
- Image info extraction (PNG metadata)
- Batch operations
# Clone into SD.Next extensions directory
cd /path/to/sdnext/extensions-builtin
git clone https://github.com/CalamitousFelicitousness/enso.git sdnext-enso
# Start SD.Next with the --enso flag
cd /path/to/sdnext
./webui.sh --ensoThe --enso flag triggers the built-in install.py which automatically runs npm install and npm run build when needed. It detects source changes and only rebuilds when necessary.
The UI will be available at http://localhost:7860/enso/
cd /path/to/sdnext/extensions-builtin/sdnext-enso
# Start dev server (HMR, proxies API to SD.Next backend)
npm run devDev server runs at http://localhost:5174/ with hot reload. API requests automatically proxy to whatever port SD.Next is running on (detected via .sdnext.port written at startup). To override, copy .env.example to .env.local and uncomment the settings you need.
enso/
├── src/ # React frontend source
│ ├── api/ # API client, hooks, types
│ ├── canvas/ # Infinite canvas (Konva.js)
│ ├── components/ # UI components
│ ├── data/ # Static data (parameter help, etc.)
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility functions
│ └── stores/ # Zustand state stores
├── enso_api/ # V2 API (Python, FastAPI)
│ ├── __init__.py # register_api(app) entry point
│ ├── routes.py # Job queue REST routes
│ ├── models.py # Pydantic request/response models
│ ├── job_queue.py # Async job queue + worker
│ ├── job_store.py # SQLite job persistence
│ ├── executors.py # Job dispatch to SD.Next processing
│ ├── upload.py # File upload staging
│ ├── ws.py # Per-job WebSocket
│ ├── global_ws.py # Global WebSocket (progress, interrupt)
│ ├── gallery.py # Gallery browser endpoints
│ ├── system_ops.py # Server, update, benchmark, storage
│ ├── models_ops.py # Model analysis, merge, replace, LoRA
│ ├── loaded_models.py # Loaded models inventory
│ ├── endpoints.py # Enumerator/config endpoints
│ ├── server.py # Server info, memory, GPU
│ ├── caption.py # Caption endpoints
│ ├── prompt_enhance.py # Prompt enhancement
│ ├── xyz_grid.py # XYZ grid
│ └── misc_routes.py # HuggingFace, extra-networks, WS ticket
├── scripts/
│ └── enso.py # SD.Next extension entry point
├── install.py # Auto npm install + build (triggered by --enso)
├── public/ # Static assets, PWA icons, fonts
├── index.html # SPA entry
├── package.json
├── vite.config.ts
├── tsconfig*.json
└── eslint.config.js
| Command | Description |
|---|---|
npm run dev |
Start development server with HMR |
Production builds (npm run build) are handled automatically by install.py when SD.Next starts with --enso.
| Layer | Technology |
|---|---|
| Frontend Framework | React 19 |
| Language | TypeScript 5.9 (strict) |
| Canvas Engine | Konva.js + react-konva |
| State Management | Zustand 5 |
| Server State | TanStack Query 5 |
| Styling | Tailwind CSS 4 + shadcn/ui |
| Build Tool | Vite 7 |
| API Backend | FastAPI (runs inside SD.Next process) |
| Job Persistence | SQLite |
| Real-time | WebSocket |
Enso runs as an SD.Next extension. When SD.Next starts:
scripts/enso.pyfires on theon_app_startedcallback- It adds the extension root to
sys.pathsoenso_apiis importable enso_api.register_api(app)mounts all V2 routes and WebSocket endpoints on the FastAPI app- The built frontend (
dist/) is mounted as static files at/enso/
The Python API code imports from modules.* (shared, devices, processing, etc.) since it runs in the same process as SD.Next. No IPC or separate server needed.
- SD.Next - The backend that powers everything
- Konva.js - 2D canvas framework
- React - UI library
- Zustand - State management
- TanStack Query - Server state management
- shadcn/ui - UI components
This project is licensed under the Apache License 2.0 - see the LICENSE file for details.