full upgrade to dev

2026-01-07 14:30:00 +01:00
parent 4dc727fcd6
commit 26a8610aa7
34 changed files with 6890 additions and 920 deletions
--- a/docs/ai-image-generation/README.md
+++ b/docs/ai-image-generation/README.md
@@ -0,0 +1,423 @@
+# AI Image Generation System
+
+Automatically generate stunning project cover images using local AI models.
+
+![AI Generated](https://img.shields.io/badge/AI-Generated-purple?style=flat-square)
+![Stable Diffusion](https://img.shields.io/badge/Stable%20Diffusion-SDXL-blue?style=flat-square)
+![n8n](https://img.shields.io/badge/n8n-Workflow-orange?style=flat-square)
+
+## 🎨 What is this?
+
+This system automatically creates professional, tech-themed cover images for your portfolio projects using AI. No more stock photos, no design skills needed.
+
+### Features
+
+✨ **Fully Automatic** - Generate images when creating new projects  
+🎯 **Context-Aware** - Uses project title, description, category, and tech stack  
+🖼️ **High Quality** - 1024x768 optimized for web display  
+🔒 **Privacy-First** - Runs 100% locally, no data sent to external APIs  
+⚡ **Fast** - 15-30 seconds per image with GPU  
+💰 **Free** - No per-image costs after initial setup  
+🎨 **Customizable** - Full control over style, colors, and aesthetics  
+
+## 🚀 Quick Start
+
+**Want to get started in 15 minutes?** → Check out [QUICKSTART.md](./QUICKSTART.md)
+
+**For detailed setup and configuration** → See [SETUP.md](./SETUP.md)
+
+## 📋 Table of Contents
+
+- [How It Works](#how-it-works)
+- [System Architecture](#system-architecture)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Prompt Engineering](#prompt-engineering)
+- [Examples](#examples)
+- [Troubleshooting](#troubleshooting)
+- [FAQ](#faq)
+
+## 🔧 How It Works
+
+```mermaid
+graph LR
+    A[Create Project] --> B[Trigger n8n Webhook]
+    B --> C[Fetch Project Data]
+    C --> D[Build AI Prompt]
+    D --> E[Stable Diffusion]
+    E --> F[Save Image]
+    F --> G[Update Database]
+    G --> H[Display on Site]
+```
+
+1. **Project Creation**: You create or update a project
+2. **Data Extraction**: System reads project metadata (title, description, tags, category)
+3. **Prompt Generation**: AI-optimized prompt is created based on project type
+4. **Image Generation**: Stable Diffusion generates a unique image
+5. **Storage**: Image is saved and optimized
+6. **Database Update**: Project's `imageUrl` is updated
+7. **Display**: Image appears automatically on your portfolio
+
+## 🏗️ System Architecture
+
+```
+┌─────────────────┐
+│  Portfolio App  │
+│   (Next.js)     │
+└────────┬────────┘
+         │
+         ▼
+┌─────────────────┐      ┌─────────────────┐
+│   n8n Workflow  │─────▶│  PostgreSQL DB  │
+│   (Automation)  │◀─────│   (Projects)    │
+└────────┬────────┘      └─────────────────┘
+         │
+         ▼
+┌─────────────────┐
+│ Stable Diffusion│
+│     WebUI       │
+│  (Image Gen)    │
+└─────────────────┘
+```
+
+### Components
+
+- **Next.js App**: Frontend and API endpoints
+- **n8n**: Workflow automation and orchestration
+- **Stable Diffusion**: Local AI image generation
+- **PostgreSQL**: Project data storage
+- **File System**: Generated image storage
+
+## 📦 Installation
+
+### Prerequisites
+
+- **Node.js** 18+
+- **Docker** (recommended) or Python 3.10+
+- **PostgreSQL** database
+- **8GB+ RAM** minimum
+- **GPU recommended** (NVIDIA with CUDA support)
+  - Minimum: GTX 1060 6GB
+  - Recommended: RTX 3060 12GB or better
+  - Also works on CPU (slower)
+
+### Step-by-Step Setup
+
+#### 1. Install Stable Diffusion WebUI
+
+```bash
+git clone https://github.com/AUTOMATIC1111/stable-diffusion-webui.git
+cd stable-diffusion-webui
+./webui.sh --api --listen
+```
+
+Wait for model download (~7GB). Access at: `http://localhost:7860`
+
+#### 2. Install n8n
+
+```bash
+# Docker (recommended)
+docker run -d --name n8n -p 5678:5678 -v ~/.n8n:/home/node/.n8n n8nio/n8n
+
+# Or npm
+npm install -g n8n
+n8n start
+```
+
+Access at: `http://localhost:5678`
+
+#### 3. Import Workflow
+
+1. Open n8n at `http://localhost:5678`
+2. Import `n8n-workflow-ai-image-generator.json`
+3. Configure database credentials
+4. Update Stable Diffusion API URL
+5. Set webhook authentication token
+
+#### 4. Configure Portfolio App
+
+Add to `.env.local`:
+
+```bash
+N8N_WEBHOOK_URL=http://localhost:5678/webhook
+N8N_SECRET_TOKEN=your-secure-token-here
+SD_API_URL=http://localhost:7860
+AUTO_GENERATE_IMAGES=true
+GENERATED_IMAGES_DIR=/path/to/portfolio/public/generated-images
+```
+
+#### 5. Create Image Directory
+
+```bash
+mkdir -p public/generated-images
+chmod 755 public/generated-images
+```
+
+**That's it!** 🎉 You're ready to generate images.
+
+## 💻 Usage
+
+### Automatic Generation
+
+When you create a new project, an image is automatically generated:
+
+```typescript
+// In your project creation API
+const newProject = await createProject(data);
+
+if (process.env.AUTO_GENERATE_IMAGES === 'true') {
+  await 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 })
+  });
+}
+```
+
+### Manual Generation via API
+
+```bash
+curl -X POST http://localhost:3000/api/n8n/generate-image \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer YOUR_TOKEN" \
+  -d '{"projectId": 123}'
+```
+
+### Admin UI Component
+
+```tsx
+import AIImageGenerator from '@/app/components/admin/AIImageGenerator';
+
+<AIImageGenerator
+  projectId={project.id}
+  projectTitle={project.title}
+  currentImageUrl={project.imageUrl}
+  onImageGenerated={(url) => {
+    console.log('New image:', url);
+  }}
+/>
+```
+
+### Batch Generation
+
+Generate images for all existing projects:
+
+```bash
+# Get all projects without images
+psql -d portfolio -t -c "SELECT id FROM projects WHERE image_url IS NULL" | while read id; do
+  curl -X POST http://localhost:3000/api/n8n/generate-image \
+    -H "Content-Type: application/json" \
+    -d "{\"projectId\": $id}"
+  sleep 30  # Wait for generation
+done
+```
+
+## 🎯 Prompt Engineering
+
+The system automatically generates optimized prompts based on project category:
+
+### Web Application Example
+
+**Input Project:**
+- Title: "Real-Time Analytics Dashboard"
+- Category: "web"
+- Tags: ["React", "Next.js", "TypeScript"]
+
+**Generated Prompt:**
+```
+Professional tech project cover image, modern web interface, 
+clean dashboard UI, gradient backgrounds, glass morphism effect,
+representing "Real-Time Analytics Dashboard", React, Next.js, TypeScript,
+modern minimalist design, vibrant gradient colors, high quality digital art,
+isometric perspective, color palette: cyan, purple, pink, blue accents,
+4k resolution, no text, no watermarks, futuristic, professional
+```
+
+**Result:** Clean, modern dashboard visualization in your brand colors
+
+### Customize Prompts
+
+Edit the `Build AI Prompt` node in n8n workflow to customize:
+
+```javascript
+// Add your brand colors
+const brandColors = 'navy blue, gold accents, white backgrounds';
+
+// Add style preferences
+const stylePreference = 'minimalist, clean, corporate, professional';
+
+// Modify prompt template
+const prompt = `
+${categoryStyle},
+${projectTitle},
+${brandColors},
+${stylePreference},
+4k quality, trending on artstation
+`;
+```
+
+See [PROMPT_TEMPLATES.md](./PROMPT_TEMPLATES.md) for category-specific templates.
+
+## 🖼️ Examples
+
+### Before & After
+
+| Category | Without AI Image | With AI Image |
+|----------|------------------|---------------|
+| Web App | Generic stock photo | Custom dashboard visualization |
+| Mobile App | App store screenshot | Professional phone mockup |
+| DevOps | Server rack photo | Cloud architecture diagram |
+| AI/ML | Brain illustration | Neural network visualization |
+
+### Quality Comparison
+
+**Settings:**
+- Resolution: 1024x768
+- Steps: 30
+- CFG Scale: 7
+- Sampler: DPM++ 2M Karras
+- Model: SDXL Base 1.0
+
+**Generation Time:**
+- RTX 4090: ~8 seconds
+- RTX 3080: ~15 seconds
+- RTX 3060: ~25 seconds
+- CPU: ~5 minutes
+
+## 🐛 Troubleshooting
+
+### Common Issues
+
+#### "Connection refused to SD API"
+```bash
+# Check if SD WebUI is running
+ps aux | grep webui
+
+# Restart with API enabled
+cd stable-diffusion-webui
+./webui.sh --api --listen
+```
+
+#### "CUDA out of memory"
+```bash
+# Use lower VRAM mode
+./webui.sh --api --listen --medvram
+```
+
+#### "Images are low quality"
+In n8n workflow, increase:
+- Steps: 30 → 40
+- CFG Scale: 7 → 9
+- Resolution: 512 → 1024
+
+#### "Images don't match project"
+- Add more specific keywords to prompt
+- Use category-specific templates
+- Refine negative prompts
+
+See [SETUP.md](./SETUP.md#troubleshooting) for more solutions.
+
+## ❓ FAQ
+
+### How much does it cost?
+
+**Initial Setup:** $300-400 for GPU (or $0 with cloud GPU rental)  
+**Per Image:** $0.00 (local electricity ~$0.001)  
+**Break-even:** ~500 images vs. commercial APIs
+
+### Can I use this without a GPU?
+
+Yes, but it's slower (~5 minutes per image on CPU). Consider cloud GPU services:
+- RunPod: ~$0.20/hour
+- vast.ai: ~$0.15/hour
+- Google Colab: Free with limitations
+
+### Is the data sent anywhere?
+
+No! Everything runs locally. Your project data never leaves your server.
+
+### Can I customize the style?
+
+Absolutely! Edit prompts in the n8n workflow or use the template system.
+
+### What models should I use?
+
+- **SDXL Base 1.0**: Best all-around quality
+- **DreamShaper 8**: Artistic, modern tech style
+- **Realistic Vision V5**: Photorealistic results
+- **Juggernaut XL**: Clean, professional aesthetics
+
+### Can I generate images on-demand?
+
+Yes! Use the admin UI component or API endpoint to regenerate anytime.
+
+### How do I change image dimensions?
+
+Edit the n8n workflow's SD node:
+```json
+{
+  "width": 1920,  // Change this
+  "height": 1080  // And this
+}
+```
+
+### Can I use a different AI model?
+
+Yes! The system works with:
+- Stable Diffusion WebUI (default)
+- ComfyUI (more advanced)
+- Any API that accepts txt2img requests
+
+## 📚 Additional Resources
+
+- **[SETUP.md](./SETUP.md)** - Detailed installation guide
+- **[QUICKSTART.md](./QUICKSTART.md)** - 15-minute setup guide
+- **[PROMPT_TEMPLATES.md](./PROMPT_TEMPLATES.md)** - Category-specific prompts
+- **[n8n-workflow-ai-image-generator.json](./n8n-workflow-ai-image-generator.json)** - Workflow file
+
+### External Documentation
+
+- [Stable Diffusion WebUI Wiki](https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki)
+- [n8n Documentation](https://docs.n8n.io)
+- [Stable Diffusion Prompt Guide](https://prompthero.com/stable-diffusion-prompt-guide)
+
+## 🤝 Contributing
+
+Have improvements or new prompt templates? Contributions welcome!
+
+1. Fork the repository
+2. Create a feature branch
+3. Test your changes
+4. Submit a pull request
+
+## 📝 License
+
+This system is part of your portfolio project. AI-generated images are yours to use freely.
+
+**Model Licenses:**
+- SDXL Base 1.0: CreativeML Open RAIL++-M License
+- Other models: Check individual model licenses
+
+## 🙏 Credits
+
+- **Stable Diffusion**: Stability AI & AUTOMATIC1111
+- **n8n**: n8n GmbH
+- **Prompt Engineering**: Community templates and best practices
+
+## 💬 Support
+
+Need help? Found a bug?
+
+- Open an issue on GitHub
+- Check existing documentation
+- Join the community Discord
+- Email: contact@dk0.dev
+
+---
+
+**Built with ❤️ for automatic, beautiful project images**
+
+*Last Updated: 2024*