# 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:
```json
{
  "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:
```json
{
  "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:
```javascript
// 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:
```json
{
  "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**:
```bash
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:
```json
{
  "imageUrl": "https://image.pollinations.ai/prompt/...",
  "projectId": 1,
  "generatedAt": "2024-01-01T00:00:00.000Z"
}
```

2. **Test via the API**:
```bash
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