Image Generator AI Copilot

GitHub Copilot instructions for developing a local AI-powered image generator with Next.js frontend and FastAPI backend using Stable Diffusion models.

Project Overview

**Name**: Image Generator AI - Local AI Image Generator

**Stack**: Next.js 14 + React 18 + TypeScript + Python FastAPI + Stable Diffusion

**Objective**: Professional web interface for generating images using local GPU (RTX 1070+)

Architecture

```

Frontend (Next.js) ←→ Backend API (FastAPI) ←→ AI Models (Ollama/ComfyUI)

```

Instructions for AI Assistant

Code Conventions

**Frontend (TypeScript/React)**:

**Backend (Python)**:

Technology Stack

**Frontend**:

**Backend**:

**AI Models**:

Core Features

Project Structure

```

app/ - Next.js routes and layout

components/ - Reusable React components

backend/ - FastAPI application

types/ - Shared TypeScript types

hooks/ - Custom React hooks

lib/ - Shared utilities

```

Development Workflow

1. **Adding Parameters**: Update `GeneratorForm` (frontend) → `GenerateRequest` (backend) → Processing logic

2. **New Models**: Add backend endpoint → Frontend selector → Generation logic

3. **Optimization**: Adjust config based on GPU (RTX 1070 vs H200)

Critical Dependencies

Environment Variables

```env

NEXT_PUBLIC_API_URL=http://localhost:8000

DEVICE=cuda

MODEL_NAME=stable-diffusion-v1-5

OUTPUT_DIR=./generated_images

```

Key Commands

```bash

npm install # Install dependencies

npm run dev # Start frontend

npm run backend # Start backend

npm run dev:all # Start both simultaneously

npm run build # Production build

npm run docker:build # Create Docker image

```

Performance Guidelines

**RTX 1070 (8GB VRAM)**:

**H200 (141GB VRAM)**:

Deployment Options

**Local Development**:

```bash

npm run dev:all

```

**Docker**:

```bash

npm run docker:build

docker run --gpus all image-generator-ai

```

**H200 Droplet**:

```bash

docker-compose up --build

```

(Requires NVIDIA Docker runtime)

Debugging

Code Generation Guidelines

When generating code for this project:

1. **Frontend Components**: Use TypeScript, functional components, and Tailwind CSS classes

2. **API Endpoints**: Write async FastAPI routes with Pydantic models

3. **Type Safety**: Always define interfaces/types for props and API contracts

4. **Error Handling**: Implement try-catch blocks and user-friendly error messages

5. **Performance**: Consider GPU memory constraints and optimize batch sizes

6. **Accessibility**: Include ARIA labels and semantic HTML

7. **Responsiveness**: Use Tailwind responsive classes for mobile/tablet/desktop

Resource References