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)

```bash
# 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**
```bash
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)

```bash
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)

```bash
# 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:
   ```javascript
   const uploadDir = '/path/to/portfolio/public/generated-images';
   ```

## Step 7: Create Directory for Images (1 min)

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

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

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

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

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

```typescript
// 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"
```bash
# 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"
```bash
# 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:
  ```bash
  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
   ```bash
   # 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
   ```bash
   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 🎨✨