full upgrade to dev

2026-01-08 16:27:40 +01:00
parent 41f404c581
commit cd4d2367ab
20 changed files with 2687 additions and 96 deletions
--- a/docs/ai-image-generation/WEBHOOK_SETUP.md
+++ b/docs/ai-image-generation/WEBHOOK_SETUP.md
@@ -0,0 +1,144 @@
+# 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