423 lines
11 KiB
Markdown
423 lines
11 KiB
Markdown
# AI Image Generation System
|
|
|
|
Automatically generate stunning project cover images using local AI models.
|
|
|
|
|
|
|
|
|
|
|
|
## 🎨 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* |