# 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:
```bash
npm install
```

2. Configure the API endpoint:

Edit `.env.local`:
```env
NEXT_PUBLIC_API_URL=http://localhost:8080
NEXT_PUBLIC_API_BASE_PATH=/api/v1
```

3. Run the development server:
```bash
npm run dev
```

4. Open [http://localhost:3000](http://localhost:3000) in your browser

### Building for Production

```bash
# 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:

```css
: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`:

```env
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