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

n8n Webhook Setup for Image Generation

Current Project Image Requirements

Image Size & Aspect Ratio

• Required Size: 1024x768 pixels (4:3 aspect ratio)
• Why: The UI uses aspect-[4/3] for project cards (see app/components/Projects.tsx:112)
• Your Current Webhook: Generates 1024x1024 (square) - needs to be changed to 1024x768

How Projects Work

1. Projects are displayed in a grid with 4:3 aspect ratio cards
2. Images are displayed using Next.js Image component with fill and object-cover
3. The preview in AIImageGenerator.tsx also uses 4:3 aspect ratio

Your n8n Webhook Configuration

Current Setup

• Webhook URL: https://n8n.dk0.dev/webhook/image-gen
• Path: /webhook/image-gen
• Image Service: pollinations.ai (Flux model)
• Current Image Size: 1024x1024 (square) ❌

Required Changes

1. Update Image Dimensions

In your n8n workflow's HTTP Request node, change:

{
  "name": "width",
  "value": "1024"  // ✅ Keep this
},
{
  "name": "height",
  "value": "768"   // ❌ Change from "1024" to "768"
}

2. Update Webhook Response Format

Your "Respond to Webhook" node should return JSON with the image URL, not the image binary.

Current Issue: The workflow returns the image directly from pollinations.ai, but the API expects JSON.

Solution: Modify the "Respond to Webhook" node to return:

{
  "imageUrl": "https://image.pollinations.ai/prompt/...",
  "projectId": {{ $json.projectId }},
  "generatedAt": "{{ $now.toISO() }}"
}

How to fix:

1. In your n8n workflow, add a "Code" node between "HTTP Request" and "Respond to Webhook"
2. Extract the pollinations.ai URL from the HTTP Request response
3. Return JSON with the URL

Example Code node:

// Get the pollinations.ai URL that was used
const prompt = $('Code in JavaScript').first().json.generatedPrompt;
const encodedPrompt = encodeURIComponent(prompt);
const imageUrl = `https://image.pollinations.ai/prompt/${encodedPrompt}?nologo=true&model=flux&width=1024&height=768`;

return {
  json: {
    imageUrl: imageUrl,
    projectId: $('Code in JavaScript').first().json.projectId,
    generatedAt: new Date().toISOString()
  }
};

3. Expected Request Format

The API now sends:

{
  "projectId": 123,
  "projectData": {
    "title": "Project Title",
    "category": "Technology",
    "description": "Project description"
  },
  "regenerate": false,
  "triggeredBy": "api",
  "timestamp": "2024-01-01T00:00:00.000Z"
}

Your webhook already handles this format correctly! ✅

Updated API Route

The API route (app/api/n8n/generate-image/route.ts) has been updated to:

1. ✅ Fetch project data before calling webhook
2. ✅ Send data in the format your webhook expects (body.projectData)
3. ✅ Use the new webhook path (/webhook/image-gen)
4. ✅ Handle JSON response with imageUrl
5. ✅ Automatically update the project with the generated image URL

Testing

After updating your n8n workflow:

1. Test the webhook directly:

curl -X POST https://n8n.dk0.dev/webhook/image-gen \
  -H "Content-Type: application/json" \
  -d '{
    "projectId": 1,
    "projectData": {
      "title": "Test Project",
      "category": "Technology",
      "description": "A test project"
    }
  }'

Expected response:

{
  "imageUrl": "https://image.pollinations.ai/prompt/...",
  "projectId": 1,
  "generatedAt": "2024-01-01T00:00:00.000Z"
}

2. Test via the API:

curl -X POST http://localhost:3000/api/n8n/generate-image \
  -H "Content-Type: application/json" \
  -d '{"projectId": 1}'

Summary of Changes Needed

• Change image height from 1024 to 768 in HTTP Request node
• Modify "Respond to Webhook" to return JSON with imageUrl (not image binary)
• Ensure the imageUrl is the pollinations.ai URL (stable, can be used directly)

Notes

• Pollinations.ai URLs are stable and can be used directly - no need to download/save the image
• The 4:3 aspect ratio (1024x768) matches the UI design perfectly
• Square images (1024x1024) will be cropped to fit the 4:3 container