stable-diffusion.cpp-rest/webui

Stable Diffusion REST - Web UI

A modern, responsive web interface for the Stable Diffusion REST API, built with Next.js 15, React, TypeScript, and Tailwind CSS.

Features

• Text-to-Image Generation: Create images from text descriptions with full control over generation parameters
• Image-to-Image: Transform existing images using AI with customizable strength settings
• Upscaler: Enhance and upscale images using ESRGAN models
• Model Management: Load, unload, and browse available models with real-time status
• Queue Monitoring: Track generation jobs in real-time with auto-refresh
• Theme Support: Auto-detecting light/dark theme with manual toggle
• Modern UI: Clean, intuitive interface with responsive design
• Real-time Updates: Live job status polling and progress tracking

Tech Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Custom components with Radix UI primitives
• Icons: Lucide React
• Theme: next-themes for light/dark mode

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Running Stable Diffusion REST API server

Installation

1. Install dependencies:

   npm install
   

2. Configure the API endpoint:

Edit .env.local:

NEXT_PUBLIC_API_URL=http://localhost:8080
NEXT_PUBLIC_API_BASE_PATH=/api/v1

1. Run the development server:

   npm run dev
   

2. Open http://localhost:3000 in your browser

Building for Production

# Build the application
npm run build

# Start the production server
npm start

Project Structure

webui/
├── app/                      # Next.js App Router pages
│   ├── text2img/            # Text-to-image generation
│   ├── img2img/             # Image-to-image generation
│   ├── upscaler/            # Image upscaling
│   ├── models/              # Model management
│   ├── queue/               # Queue monitoring
│   ├── layout.tsx           # Root layout with theme provider
│   ├── page.tsx             # Home page
│   └── globals.css          # Global styles and theme variables
├── components/              # React components
│   ├── ui/                  # Reusable UI components
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   ├── input.tsx
│   │   ├── textarea.tsx
│   │   └── label.tsx
│   ├── header.tsx           # Page header component
│   ├── sidebar.tsx          # Navigation sidebar
│   ├── main-layout.tsx      # Main layout wrapper
│   ├── theme-provider.tsx   # Theme context provider
│   └── theme-toggle.tsx     # Light/dark theme toggle
├── lib/                     # Utilities and services
│   ├── api.ts               # API client for backend communication
│   └── utils.ts             # Helper functions
├── public/                  # Static assets
├── .env.local              # Environment variables (create this)
├── next.config.ts          # Next.js configuration
├── tailwind.config.ts      # Tailwind CSS configuration
└── tsconfig.json           # TypeScript configuration

Usage Guide

1. Load a Model

Navigate to Model Management to:

• View all available models
• Filter by model type (checkpoint, LoRA, VAE, etc.)
• Load/unload models
• Scan for new models

2. Generate Images

Text-to-Image

1. Go to Text to Image
2. Enter your prompt and optional negative prompt
3. Adjust parameters (width, height, steps, CFG scale, etc.)
4. Choose sampling method
5. Click Generate
6. Download generated images

Image-to-Image

1. Go to Image to Image
2. Upload a source image
3. Enter transformation prompt
4. Adjust strength (lower = more original, higher = more AI modification)
5. Click Generate

Upscaler

1. Go to Upscaler
2. Upload an image
3. Select upscale factor (2x, 3x, 4x)
4. Choose upscaling model
5. Click Upscale

3. Monitor Jobs

The Queue Monitor page shows:

• Pending, processing, and completed jobs
• Real-time progress updates
• Job cancellation
• Generated image previews
• Auto-refresh option

API Integration

The web UI communicates with the Stable Diffusion REST API through the API client in lib/api.ts. All endpoints are type-safe with TypeScript interfaces.

Available Endpoints

• POST /api/v1/text2img - Generate images from text
• POST /api/v1/img2img - Transform images
• POST /api/v1/generate - General generation endpoint
• GET /api/v1/models - List all models
• POST /api/v1/models/load - Load a model
• POST /api/v1/models/unload - Unload a model
• POST /api/v1/models/scan - Scan for new models
• GET /api/v1/queue - Get queue status
• GET /api/v1/jobs/{id} - Get job status
• DELETE /api/v1/jobs/{id} - Cancel a job
• GET /api/v1/health - API health check
• GET /api/v1/system - System information

Customization

Theme Colors

Edit app/globals.css to customize theme colors using HSL values:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  /* ... more colors */
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  /* ... more colors */
}

API Configuration

Change the API endpoint in .env.local:

NEXT_PUBLIC_API_URL=http://your-api-server:8080
NEXT_PUBLIC_API_BASE_PATH=/api/v1

Development

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm start - Start production server
• npm run lint - Run ESLint

Code Style

• TypeScript for type safety
• Functional components with hooks
• Async/await for API calls
• Tailwind CSS for styling
• Modular component structure

Troubleshooting

Cannot connect to API

1. Ensure the REST API server is running
2. Check the API URL in .env.local
3. Verify CORS is configured on the backend
4. Check browser console for errors

Images not displaying

1. Verify the backend returns base64-encoded images
2. Check the image format in API responses
3. Look for CORS issues in browser console

Build errors

1. Delete .next folder and node_modules
2. Run npm install again
3. Ensure Node.js version is 18+

Contributing

Contributions are welcome! Please feel free to submit issues or pull requests.

License

This project is part of the Stable Diffusion REST API server.

Acknowledgments

• Next.js team for the excellent framework
• Tailwind CSS for the styling system
• Lucide for the icon library
• stable-diffusion.cpp for the backend