portfolio/docs/ai-image-generation/README.md

AI Image Generation System

Automatically generate stunning project cover images using local AI models.

🎨 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

For detailed setup and configuration → See SETUP.md

📋 Table of Contents

• How It Works
• System Architecture
• Installation
• Usage
• Prompt Engineering
• Examples
• Troubleshooting
• FAQ

🔧 How It Works

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

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

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

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

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:

// 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

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

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:

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

// 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 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"

# 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"

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

{
  "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 - Detailed installation guide
• QUICKSTART.md - 15-minute setup guide
• PROMPT_TEMPLATES.md - Category-specific prompts
• n8n-workflow-ai-image-generator.json - Workflow file

External Documentation

• Stable Diffusion WebUI Wiki
• n8n Documentation
• 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