# AI Image Generation System

Automatically generate stunning project cover images using local AI models.

![AI Generated](https://img.shields.io/badge/AI-Generated-purple?style=flat-square)
![Stable Diffusion](https://img.shields.io/badge/Stable%20Diffusion-SDXL-blue?style=flat-square)
![n8n](https://img.shields.io/badge/n8n-Workflow-orange?style=flat-square)

## 🎨 What is this?

This system automatically creates professional, tech-themed cover images for your portfolio projects using AI. No more stock photos, no design skills needed.

### Features

✨ **Fully Automatic** - Generate images when creating new projects  
🎯 **Context-Aware** - Uses project title, description, category, and tech stack  
🖼️ **High Quality** - 1024x768 optimized for web display  
🔒 **Privacy-First** - Runs 100% locally, no data sent to external APIs  
⚡ **Fast** - 15-30 seconds per image with GPU  
💰 **Free** - No per-image costs after initial setup  
🎨 **Customizable** - Full control over style, colors, and aesthetics  

## 🚀 Quick Start

**Want to get started in 15 minutes?** → Check out [QUICKSTART.md](./QUICKSTART.md)

**For detailed setup and configuration** → See [SETUP.md](./SETUP.md)

## 📋 Table of Contents

- [How It Works](#how-it-works)
- [System Architecture](#system-architecture)
- [Installation](#installation)
- [Usage](#usage)
- [Prompt Engineering](#prompt-engineering)
- [Examples](#examples)
- [Troubleshooting](#troubleshooting)
- [FAQ](#faq)

## 🔧 How It Works

```mermaid
graph LR
    A[Create Project] --> B[Trigger n8n Webhook]
    B --> C[Fetch Project Data]
    C --> D[Build AI Prompt]
    D --> E[Stable Diffusion]
    E --> F[Save Image]
    F --> G[Update Database]
    G --> H[Display on Site]
```

1. **Project Creation**: You create or update a project
2. **Data Extraction**: System reads project metadata (title, description, tags, category)
3. **Prompt Generation**: AI-optimized prompt is created based on project type
4. **Image Generation**: Stable Diffusion generates a unique image
5. **Storage**: Image is saved and optimized
6. **Database Update**: Project's `imageUrl` is updated
7. **Display**: Image appears automatically on your portfolio

## 🏗️ System Architecture

```
┌─────────────────┐
│  Portfolio App  │
│   (Next.js)     │
└────────┬────────┘
         │
         ▼
┌─────────────────┐      ┌─────────────────┐
│   n8n Workflow  │─────▶│  PostgreSQL DB  │
│   (Automation)  │◀─────│   (Projects)    │
└────────┬────────┘      └─────────────────┘
         │
         ▼
┌─────────────────┐
│ Stable Diffusion│
│     WebUI       │
│  (Image Gen)    │
└─────────────────┘
```

### Components

- **Next.js App**: Frontend and API endpoints
- **n8n**: Workflow automation and orchestration
- **Stable Diffusion**: Local AI image generation
- **PostgreSQL**: Project data storage
- **File System**: Generated image storage

## 📦 Installation

### Prerequisites

- **Node.js** 18+
- **Docker** (recommended) or Python 3.10+
- **PostgreSQL** database
- **8GB+ RAM** minimum
- **GPU recommended** (NVIDIA with CUDA support)
  - Minimum: GTX 1060 6GB
  - Recommended: RTX 3060 12GB or better
  - Also works on CPU (slower)

### Step-by-Step Setup

#### 1. Install Stable Diffusion WebUI

```bash
git clone https://github.com/AUTOMATIC1111/stable-diffusion-webui.git
cd stable-diffusion-webui
./webui.sh --api --listen
```

Wait for model download (~7GB). Access at: `http://localhost:7860`

#### 2. Install n8n

```bash
# Docker (recommended)
docker run -d --name n8n -p 5678:5678 -v ~/.n8n:/home/node/.n8n n8nio/n8n

# Or npm
npm install -g n8n
n8n start
```

Access at: `http://localhost:5678`

#### 3. Import Workflow

1. Open n8n at `http://localhost:5678`
2. Import `n8n-workflow-ai-image-generator.json`
3. Configure database credentials
4. Update Stable Diffusion API URL
5. Set webhook authentication token

#### 4. Configure Portfolio App

Add to `.env.local`:

```bash
N8N_WEBHOOK_URL=http://localhost:5678/webhook
N8N_SECRET_TOKEN=your-secure-token-here
SD_API_URL=http://localhost:7860
AUTO_GENERATE_IMAGES=true
GENERATED_IMAGES_DIR=/path/to/portfolio/public/generated-images
```

#### 5. Create Image Directory

```bash
mkdir -p public/generated-images
chmod 755 public/generated-images
```

**That's it!** 🎉 You're ready to generate images.

## 💻 Usage

### Automatic Generation

When you create a new project, an image is automatically generated:

```typescript
// In your project creation API
const newProject = await createProject(data);

if (process.env.AUTO_GENERATE_IMAGES === 'true') {
  await fetch(`${process.env.N8N_WEBHOOK_URL}/ai-image-generation`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${process.env.N8N_SECRET_TOKEN}`
    },
    body: JSON.stringify({ projectId: newProject.id })
  });
}
```

### Manual Generation via API

```bash
curl -X POST http://localhost:3000/api/n8n/generate-image \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -d '{"projectId": 123}'
```

### Admin UI Component

```tsx
import AIImageGenerator from '@/app/components/admin/AIImageGenerator';

<AIImageGenerator
  projectId={project.id}
  projectTitle={project.title}
  currentImageUrl={project.imageUrl}
  onImageGenerated={(url) => {
    console.log('New image:', url);
  }}
/>
```

### Batch Generation

Generate images for all existing projects:

```bash
# Get all projects without images
psql -d portfolio -t -c "SELECT id FROM projects WHERE image_url IS NULL" | while read id; do
  curl -X POST http://localhost:3000/api/n8n/generate-image \
    -H "Content-Type: application/json" \
    -d "{\"projectId\": $id}"
  sleep 30  # Wait for generation
done
```

## 🎯 Prompt Engineering

The system automatically generates optimized prompts based on project category:

### Web Application Example

**Input Project:**
- Title: "Real-Time Analytics Dashboard"
- Category: "web"
- Tags: ["React", "Next.js", "TypeScript"]

**Generated Prompt:**
```
Professional tech project cover image, modern web interface, 
clean dashboard UI, gradient backgrounds, glass morphism effect,
representing "Real-Time Analytics Dashboard", React, Next.js, TypeScript,
modern minimalist design, vibrant gradient colors, high quality digital art,
isometric perspective, color palette: cyan, purple, pink, blue accents,
4k resolution, no text, no watermarks, futuristic, professional
```

**Result:** Clean, modern dashboard visualization in your brand colors

### Customize Prompts

Edit the `Build AI Prompt` node in n8n workflow to customize:

```javascript
// Add your brand colors
const brandColors = 'navy blue, gold accents, white backgrounds';

// Add style preferences
const stylePreference = 'minimalist, clean, corporate, professional';

// Modify prompt template
const prompt = `
${categoryStyle},
${projectTitle},
${brandColors},
${stylePreference},
4k quality, trending on artstation
`;
```

See [PROMPT_TEMPLATES.md](./PROMPT_TEMPLATES.md) for category-specific templates.

## 🖼️ Examples

### Before & After

| Category | Without AI Image | With AI Image |
|----------|------------------|---------------|
| Web App | Generic stock photo | Custom dashboard visualization |
| Mobile App | App store screenshot | Professional phone mockup |
| DevOps | Server rack photo | Cloud architecture diagram |
| AI/ML | Brain illustration | Neural network visualization |

### Quality Comparison

**Settings:**
- Resolution: 1024x768
- Steps: 30
- CFG Scale: 7
- Sampler: DPM++ 2M Karras
- Model: SDXL Base 1.0

**Generation Time:**
- RTX 4090: ~8 seconds
- RTX 3080: ~15 seconds
- RTX 3060: ~25 seconds
- CPU: ~5 minutes

## 🐛 Troubleshooting

### Common Issues

#### "Connection refused to SD API"
```bash
# Check if SD WebUI is running
ps aux | grep webui

# Restart with API enabled
cd stable-diffusion-webui
./webui.sh --api --listen
```

#### "CUDA out of memory"
```bash
# Use lower VRAM mode
./webui.sh --api --listen --medvram
```

#### "Images are low quality"
In n8n workflow, increase:
- Steps: 30 → 40
- CFG Scale: 7 → 9
- Resolution: 512 → 1024

#### "Images don't match project"
- Add more specific keywords to prompt
- Use category-specific templates
- Refine negative prompts

See [SETUP.md](./SETUP.md#troubleshooting) for more solutions.

## ❓ FAQ

### How much does it cost?

**Initial Setup:** $300-400 for GPU (or $0 with cloud GPU rental)  
**Per Image:** $0.00 (local electricity ~$0.001)  
**Break-even:** ~500 images vs. commercial APIs

### Can I use this without a GPU?

Yes, but it's slower (~5 minutes per image on CPU). Consider cloud GPU services:
- RunPod: ~$0.20/hour
- vast.ai: ~$0.15/hour
- Google Colab: Free with limitations

### Is the data sent anywhere?

No! Everything runs locally. Your project data never leaves your server.

### Can I customize the style?

Absolutely! Edit prompts in the n8n workflow or use the template system.

### What models should I use?

- **SDXL Base 1.0**: Best all-around quality
- **DreamShaper 8**: Artistic, modern tech style
- **Realistic Vision V5**: Photorealistic results
- **Juggernaut XL**: Clean, professional aesthetics

### Can I generate images on-demand?

Yes! Use the admin UI component or API endpoint to regenerate anytime.

### How do I change image dimensions?

Edit the n8n workflow's SD node:
```json
{
  "width": 1920,  // Change this
  "height": 1080  // And this
}
```

### Can I use a different AI model?

Yes! The system works with:
- Stable Diffusion WebUI (default)
- ComfyUI (more advanced)
- Any API that accepts txt2img requests

## 📚 Additional Resources

- **[SETUP.md](./SETUP.md)** - Detailed installation guide
- **[QUICKSTART.md](./QUICKSTART.md)** - 15-minute setup guide
- **[PROMPT_TEMPLATES.md](./PROMPT_TEMPLATES.md)** - Category-specific prompts
- **[n8n-workflow-ai-image-generator.json](./n8n-workflow-ai-image-generator.json)** - Workflow file

### External Documentation

- [Stable Diffusion WebUI Wiki](https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki)
- [n8n Documentation](https://docs.n8n.io)
- [Stable Diffusion Prompt Guide](https://prompthero.com/stable-diffusion-prompt-guide)

## 🤝 Contributing

Have improvements or new prompt templates? Contributions welcome!

1. Fork the repository
2. Create a feature branch
3. Test your changes
4. Submit a pull request

## 📝 License

This system is part of your portfolio project. AI-generated images are yours to use freely.

**Model Licenses:**
- SDXL Base 1.0: CreativeML Open RAIL++-M License
- Other models: Check individual model licenses

## 🙏 Credits

- **Stable Diffusion**: Stability AI & AUTOMATIC1111
- **n8n**: n8n GmbH
- **Prompt Engineering**: Community templates and best practices

## 💬 Support

Need help? Found a bug?

- Open an issue on GitHub
- Check existing documentation
- Join the community Discord
- Email: contact@dk0.dev

---

**Built with ❤️ for automatic, beautiful project images**

*Last Updated: 2024*