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

Quick Start Guide: AI Image Generation

Get AI-powered project images up and running in 15 minutes.

Prerequisites

• Docker installed
• 8GB+ RAM
• GPU recommended (NVIDIA with CUDA support)
• Node.js 18+ for portfolio app

Step 1: Install Stable Diffusion WebUI (5 min)

# Clone the repository
git clone https://github.com/AUTOMATIC1111/stable-diffusion-webui.git
cd stable-diffusion-webui

# Run with API enabled
./webui.sh --api --listen

# For low VRAM GPUs (< 8GB)
./webui.sh --api --listen --medvram

# Wait for model download and startup
# Access WebUI at: http://localhost:7860

Step 2: Download a Model (3 min)

Open WebUI at http://localhost:7860 and download a model:

Option A: Via WebUI

1. Go to Checkpoint Merger tab
2. Click Model Download
3. Enter: stabilityai/stable-diffusion-xl-base-1.0
4. Wait for download (6.94 GB)

Option B: Manual Download

cd models/Stable-diffusion/
wget https://huggingface.co/stabilityai/stable-diffusion-xl-base-1.0/resolve/main/sd_xl_base_1.0.safetensors

Step 3: Test Stable Diffusion API (1 min)

curl -X POST http://localhost:7860/sdapi/v1/txt2img \
  -H "Content-Type: application/json" \
  -d '{
    "prompt": "modern tech dashboard, blue gradient, minimalist design",
    "steps": 20,
    "width": 512,
    "height": 512
  }' | jq '.images[0]' | base64 -d > test.png

Open test.png - if you see an image, API is working! ✅

Step 4: Setup n8n (2 min)

# Docker Compose method
docker run -d \
  --name n8n \
  -p 5678:5678 \
  -v ~/.n8n:/home/node/.n8n \
  n8nio/n8n

# Wait 30 seconds for startup
# Access n8n at: http://localhost:5678

Step 5: Import Workflow (1 min)

1. Open n8n at http://localhost:5678
2. Create account (first time only)
3. Click + New Workflow
4. Click ⋮ (three dots) → Import from File
5. Select docs/ai-image-generation/n8n-workflow-ai-image-generator.json
6. Click Save

Step 6: Configure Workflow (2 min)

A. Add PostgreSQL Credentials

1. Click Get Project Data node
2. Click Credential to connect with
3. Enter your database credentials:
   • Host: localhost (or your DB host)
   • Database: portfolio
   • User: your_username
   • Password: your_password
4. Click Save

B. Configure Stable Diffusion URL

1. Click Generate Image (Stable Diffusion) node
2. Update URL to: http://localhost:7860/sdapi/v1/txt2img
3. If SD is on different machine: http://YOUR_SD_IP:7860/sdapi/v1/txt2img

C. Set Webhook Authentication

1. Click Webhook Trigger node
2. Click Add Credential
3. Set header: Authorization
4. Set value: Bearer your-secret-token-here
5. Save this token - you'll need it!

D. Update Image Save Path

1. Click Save Image to File node
2. Update uploadDir path to your portfolio's public folder:

   const uploadDir = '/path/to/portfolio/public/generated-images';
   

Step 7: Create Directory for Images (1 min)

cd /path/to/portfolio
mkdir -p public/generated-images
chmod 755 public/generated-images

Step 8: Add Environment Variables (1 min)

Add to portfolio/.env.local:

# n8n Webhook Configuration
N8N_WEBHOOK_URL=http://localhost:5678/webhook
N8N_SECRET_TOKEN=your-secret-token-here

# Stable Diffusion API
SD_API_URL=http://localhost:7860

# Auto-generate images for new projects
AUTO_GENERATE_IMAGES=true

# Image storage
GENERATED_IMAGES_DIR=/path/to/portfolio/public/generated-images

Step 9: Test the Full Pipeline (2 min)

# Start your portfolio app
cd portfolio
npm run dev

# In another terminal, trigger image generation
curl -X POST http://localhost:5678/webhook/ai-image-generation \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer your-secret-token-here" \
  -d '{
    "projectId": 1
  }'

# Check response (should take 15-30 seconds)
# Response example:
# {
#   "success": true,
#   "projectId": 1,
#   "imageUrl": "/generated-images/project-1-1234567890.png",
#   "generatedAt": "2024-01-15T10:30:00Z"
# }

Step 10: Verify Image (1 min)

# Check if image was created
ls -lh public/generated-images/

# Open in browser
open http://localhost:3000/generated-images/project-1-*.png

You should see a generated image! 🎉

---

Using the Admin UI

If you created the admin component:

1. Navigate to your admin page (create one if needed)
2. Add the AI Image Generator component:

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

<AIImageGenerator
  projectId={projectId}
  projectTitle="My Awesome Project"
  currentImageUrl={project.imageUrl}
  onImageGenerated={(url) => console.log('Generated:', url)}
/>

3. Click Generate Image button
4. Wait 15-30 seconds
5. Image appears automatically!

---

Automatic Generation on New Projects

Add this to your project creation API:

// In portfolio/app/api/projects/route.ts (or similar)

export async function POST(req: Request) {
  // ... your project creation code ...
  
  const newProject = await createProject(data);
  
  // Trigger AI image generation
  if (process.env.AUTO_GENERATE_IMAGES === 'true') {
    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 })
    }).catch(err => console.error('AI generation failed:', err));
  }
  
  return NextResponse.json(newProject);
}

---

Troubleshooting

"Connection refused to localhost:7860"

# Check if SD WebUI is running
ps aux | grep webui

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

"CUDA out of memory"

# Restart with lower VRAM usage
./webui.sh --api --listen --medvram

# Or even lower
./webui.sh --api --listen --lowvram

"n8n workflow fails at database step"

• Check PostgreSQL is running: pg_isready
• Verify credentials in n8n node
• Check database connection from terminal:

  psql -h localhost -U your_username -d portfolio
  

"Image saves but doesn't appear on website"

• Check directory permissions: chmod 755 public/generated-images
• Verify path in n8n workflow matches portfolio structure
• Check Next.js static files config in next.config.js

"Generated images are low quality"

Edit n8n workflow's SD node, increase:

• steps: 20 → 40
• cfg_scale: 7 → 9
• width/height: 512 → 1024

"Images don't match project theme"

Edit Build AI Prompt node in n8n:

• Add more specific technical keywords
• Include project category in style description
• Adjust color palette keywords

---

Next Steps

✅ You're done! Images now generate automatically.

Optional Enhancements:

1. Batch Generate: Generate images for all existing projects

   # Create a script: scripts/batch-generate-images.ts
   for projectId in $(psql -t -c "SELECT id FROM projects WHERE image_url IS NULL"); do
     curl -X POST http://localhost:5678/webhook/ai-image-generation \
       -H "Authorization: Bearer $N8N_SECRET_TOKEN" \
       -d "{\"projectId\": $projectId}"
     sleep 30  # Wait for generation
   done
   

2. Custom Models: Download specialized models for better results

   • dreamshaper_8.safetensors for web/UI projects
   • realisticVision_v51.safetensors for product shots
   • juggernautXL_v8.safetensors for modern tech aesthetics

3. Prompt Refinement: Edit prompt templates in n8n workflow

   • Check docs/ai-image-generation/PROMPT_TEMPLATES.md
   • Test different styles for your brand

4. Monitoring: Set up logging and alerts

   • Add Discord/Slack notifications to n8n workflow
   • Log generation stats to analytics

5. Optimization: Compress images after generation

   npm install sharp
   # Add post-processing step to n8n workflow
   

---

Performance Benchmarks

Hardware	Generation Time	Image Quality
RTX 4090	~8 seconds	Excellent
RTX 3080	~15 seconds	Excellent
RTX 3060	~25 seconds	Good
GTX 1660	~45 seconds	Good
CPU only	~5 minutes	Fair

Recommended: RTX 3060 or better for production use.

---

Cost Analysis

Local Setup (One-time):

• GPU (RTX 3060): ~$300-400
• OR Cloud GPU (RunPod, vast.ai): $0.20-0.50/hour

Per Image Cost:

• Local: $0.00 (electricity ~$0.001)
• Cloud GPU: ~$0.01-0.02 per image

vs. Commercial APIs:

• DALL-E 3: $0.04 per image
• Midjourney: ~$0.06 per image (with subscription)
• Stable Diffusion API: $0.02 per image

💡 Break-even: After ~500 images, local setup pays for itself!

---

Support & Resources

• Documentation: docs/ai-image-generation/SETUP.md
• Prompt Templates: docs/ai-image-generation/PROMPT_TEMPLATES.md
• SD WebUI Wiki: https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki
• n8n Documentation: https://docs.n8n.io
• Community Discord: [Your Discord link]

Need Help? Open an issue or reach out!

---

Total Setup Time: ~15 minutes Result: Automatic AI-generated project images 🎨✨