full upgrade to dev
This commit is contained in:
311
docs/ai-image-generation/ENVIRONMENT.md
Normal file
311
docs/ai-image-generation/ENVIRONMENT.md
Normal file
@@ -0,0 +1,311 @@
|
||||
# Environment Variables for AI Image Generation
|
||||
|
||||
This document lists all environment variables needed for the AI image generation system.
|
||||
|
||||
## Required Variables
|
||||
|
||||
Add these to your `.env.local` file:
|
||||
|
||||
```bash
|
||||
# =============================================================================
|
||||
# AI IMAGE GENERATION CONFIGURATION
|
||||
# =============================================================================
|
||||
|
||||
# n8n Webhook Configuration
|
||||
# The base URL where your n8n instance is running
|
||||
N8N_WEBHOOK_URL=http://localhost:5678/webhook
|
||||
|
||||
# Secret token for authenticating webhook requests
|
||||
# Generate a secure random token: openssl rand -hex 32
|
||||
N8N_SECRET_TOKEN=your-secure-random-token-here
|
||||
|
||||
# Stable Diffusion API Configuration
|
||||
# The URL where your Stable Diffusion WebUI is running
|
||||
SD_API_URL=http://localhost:7860
|
||||
|
||||
# Optional: API key if your SD instance requires authentication
|
||||
# SD_API_KEY=your-sd-api-key-here
|
||||
|
||||
# =============================================================================
|
||||
# IMAGE GENERATION SETTINGS
|
||||
# =============================================================================
|
||||
|
||||
# Automatically generate images when new projects are created
|
||||
# Set to 'true' to enable, 'false' to disable
|
||||
AUTO_GENERATE_IMAGES=true
|
||||
|
||||
# Directory where generated images will be saved
|
||||
# Should be inside your public directory for web access
|
||||
GENERATED_IMAGES_DIR=/app/public/generated-images
|
||||
|
||||
# Maximum time to wait for image generation (in milliseconds)
|
||||
# Default: 180000 (3 minutes)
|
||||
IMAGE_GENERATION_TIMEOUT=180000
|
||||
|
||||
# =============================================================================
|
||||
# STABLE DIFFUSION SETTINGS (Optional - Overrides n8n workflow defaults)
|
||||
# =============================================================================
|
||||
|
||||
# Default image dimensions
|
||||
SD_DEFAULT_WIDTH=1024
|
||||
SD_DEFAULT_HEIGHT=768
|
||||
|
||||
# Generation quality settings
|
||||
SD_DEFAULT_STEPS=30
|
||||
SD_DEFAULT_CFG_SCALE=7
|
||||
|
||||
# Sampler algorithm
|
||||
# Options: "Euler a", "DPM++ 2M Karras", "DDIM", etc.
|
||||
SD_DEFAULT_SAMPLER=DPM++ 2M Karras
|
||||
|
||||
# Default model checkpoint
|
||||
# SD_DEFAULT_MODEL=sd_xl_base_1.0.safetensors
|
||||
|
||||
# =============================================================================
|
||||
# FEATURE FLAGS (Optional)
|
||||
# =============================================================================
|
||||
|
||||
# Enable/disable specific features
|
||||
ENABLE_IMAGE_REGENERATION=true
|
||||
ENABLE_BATCH_GENERATION=false
|
||||
ENABLE_IMAGE_OPTIMIZATION=true
|
||||
|
||||
# =============================================================================
|
||||
# LOGGING & MONITORING (Optional)
|
||||
# =============================================================================
|
||||
|
||||
# Log all image generation requests
|
||||
LOG_IMAGE_GENERATION=true
|
||||
|
||||
# Send notifications on generation success/failure
|
||||
# DISCORD_WEBHOOK_URL=https://discord.com/api/webhooks/...
|
||||
# SLACK_WEBHOOK_URL=https://hooks.slack.com/services/...
|
||||
|
||||
# =============================================================================
|
||||
# ADVANCED SETTINGS (Optional)
|
||||
# =============================================================================
|
||||
|
||||
# Custom prompt prefix for all generations
|
||||
# SD_CUSTOM_PROMPT_PREFIX=professional tech illustration, modern design,
|
||||
|
||||
# Custom negative prompt suffix for all generations
|
||||
# SD_CUSTOM_NEGATIVE_SUFFIX=low quality, blurry, pixelated, text, watermark
|
||||
|
||||
# Image file naming pattern
|
||||
# Available variables: {projectId}, {timestamp}, {title}
|
||||
IMAGE_FILENAME_PATTERN=project-{projectId}-{timestamp}.png
|
||||
|
||||
# Maximum concurrent image generation requests
|
||||
MAX_CONCURRENT_GENERATIONS=2
|
||||
|
||||
# Retry failed generations
|
||||
AUTO_RETRY_ON_FAILURE=true
|
||||
MAX_RETRY_ATTEMPTS=3
|
||||
```
|
||||
|
||||
## Production Environment
|
||||
|
||||
For production deployments, adjust these settings:
|
||||
|
||||
```bash
|
||||
# Production n8n (if using cloud/dedicated instance)
|
||||
N8N_WEBHOOK_URL=https://n8n.yourdomain.com/webhook
|
||||
|
||||
# Production Stable Diffusion (if using dedicated GPU server)
|
||||
SD_API_URL=https://sd-api.yourdomain.com
|
||||
|
||||
# Production image storage (use absolute path)
|
||||
GENERATED_IMAGES_DIR=/var/www/portfolio/public/generated-images
|
||||
|
||||
# Disable auto-generation in production (manual only)
|
||||
AUTO_GENERATE_IMAGES=false
|
||||
|
||||
# Enable logging
|
||||
LOG_IMAGE_GENERATION=true
|
||||
|
||||
# Set timeouts appropriately
|
||||
IMAGE_GENERATION_TIMEOUT=300000
|
||||
|
||||
# Limit concurrent generations
|
||||
MAX_CONCURRENT_GENERATIONS=1
|
||||
```
|
||||
|
||||
## Docker Environment
|
||||
|
||||
If running in Docker, use these paths:
|
||||
|
||||
```bash
|
||||
# Docker-specific paths
|
||||
N8N_WEBHOOK_URL=http://n8n:5678/webhook
|
||||
SD_API_URL=http://stable-diffusion:7860
|
||||
GENERATED_IMAGES_DIR=/app/public/generated-images
|
||||
```
|
||||
|
||||
Add to `docker-compose.yml`:
|
||||
|
||||
```yaml
|
||||
services:
|
||||
portfolio:
|
||||
environment:
|
||||
- N8N_WEBHOOK_URL=http://n8n:5678/webhook
|
||||
- N8N_SECRET_TOKEN=${N8N_SECRET_TOKEN}
|
||||
- SD_API_URL=http://stable-diffusion:7860
|
||||
- AUTO_GENERATE_IMAGES=true
|
||||
- GENERATED_IMAGES_DIR=/app/public/generated-images
|
||||
volumes:
|
||||
- ./public/generated-images:/app/public/generated-images
|
||||
|
||||
n8n:
|
||||
image: n8nio/n8n
|
||||
ports:
|
||||
- "5678:5678"
|
||||
environment:
|
||||
- N8N_BASIC_AUTH_ACTIVE=true
|
||||
- N8N_BASIC_AUTH_USER=admin
|
||||
- N8N_BASIC_AUTH_PASSWORD=${N8N_PASSWORD}
|
||||
|
||||
stable-diffusion:
|
||||
image: your-sd-webui-image
|
||||
ports:
|
||||
- "7860:7860"
|
||||
deploy:
|
||||
resources:
|
||||
reservations:
|
||||
devices:
|
||||
- driver: nvidia
|
||||
count: 1
|
||||
capabilities: [gpu]
|
||||
```
|
||||
|
||||
## Cloud GPU Configuration
|
||||
|
||||
If using cloud GPU services (RunPod, vast.ai, etc.):
|
||||
|
||||
```bash
|
||||
# Remote GPU URL with authentication
|
||||
SD_API_URL=https://your-runpod-instance.com:7860
|
||||
SD_API_KEY=your-api-key-here
|
||||
|
||||
# Longer timeout for network latency
|
||||
IMAGE_GENERATION_TIMEOUT=300000
|
||||
```
|
||||
|
||||
## Security Best Practices
|
||||
|
||||
1. **Never commit `.env.local` to version control**
|
||||
```bash
|
||||
# Add to .gitignore
|
||||
echo ".env.local" >> .gitignore
|
||||
```
|
||||
|
||||
2. **Generate secure tokens**
|
||||
```bash
|
||||
# Generate N8N_SECRET_TOKEN
|
||||
openssl rand -hex 32
|
||||
|
||||
# Or using Node.js
|
||||
node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"
|
||||
```
|
||||
|
||||
3. **Restrict API access**
|
||||
- Use firewall rules to limit SD API access
|
||||
- Enable authentication on n8n webhooks
|
||||
- Use HTTPS in production
|
||||
|
||||
4. **Environment-specific files**
|
||||
- `.env.local` - local development
|
||||
- `.env.production` - production (server-side only)
|
||||
- `.env.test` - testing environment
|
||||
|
||||
## Verifying Configuration
|
||||
|
||||
Test your environment variables:
|
||||
|
||||
```bash
|
||||
# Check if variables are loaded
|
||||
npm run dev
|
||||
|
||||
# In another terminal
|
||||
node -e "
|
||||
const envFile = require('fs').readFileSync('.env.local', 'utf8');
|
||||
console.log('✓ .env.local exists');
|
||||
console.log('✓ Variables found:', envFile.split('\\n').filter(l => l && !l.startsWith('#')).length);
|
||||
"
|
||||
|
||||
# Test n8n connection
|
||||
curl -f $N8N_WEBHOOK_URL/health || echo "n8n not reachable"
|
||||
|
||||
# Test SD API connection
|
||||
curl -f $SD_API_URL/sdapi/v1/sd-models || echo "SD API not reachable"
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Variables not loading
|
||||
|
||||
```bash
|
||||
# Ensure .env.local is in the project root
|
||||
ls -la .env.local
|
||||
|
||||
# Restart Next.js dev server
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Wrong paths in Docker
|
||||
|
||||
```bash
|
||||
# Check volume mounts
|
||||
docker-compose exec portfolio ls -la /app/public/generated-images
|
||||
|
||||
# Fix permissions
|
||||
docker-compose exec portfolio chmod 755 /app/public/generated-images
|
||||
```
|
||||
|
||||
### n8n webhook unreachable
|
||||
|
||||
```bash
|
||||
# Check n8n is running
|
||||
docker ps | grep n8n
|
||||
|
||||
# Check network connectivity
|
||||
docker-compose exec portfolio ping n8n
|
||||
|
||||
# Verify webhook URL in n8n UI
|
||||
```
|
||||
|
||||
## Example Complete Configuration
|
||||
|
||||
```bash
|
||||
# .env.local - Complete working example
|
||||
|
||||
# Database (required for project data)
|
||||
DATABASE_URL=postgresql://user:password@localhost:5432/portfolio
|
||||
|
||||
# NextAuth (if using authentication)
|
||||
NEXTAUTH_URL=http://localhost:3000
|
||||
NEXTAUTH_SECRET=your-nextauth-secret
|
||||
|
||||
# AI Image Generation
|
||||
N8N_WEBHOOK_URL=http://localhost:5678/webhook
|
||||
N8N_SECRET_TOKEN=a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6
|
||||
SD_API_URL=http://localhost:7860
|
||||
AUTO_GENERATE_IMAGES=true
|
||||
GENERATED_IMAGES_DIR=/Users/dennis/code/gitea/portfolio/public/generated-images
|
||||
|
||||
# Image settings
|
||||
SD_DEFAULT_WIDTH=1024
|
||||
SD_DEFAULT_HEIGHT=768
|
||||
SD_DEFAULT_STEPS=30
|
||||
SD_DEFAULT_CFG_SCALE=7
|
||||
SD_DEFAULT_SAMPLER=DPM++ 2M Karras
|
||||
|
||||
# Optional features
|
||||
ENABLE_IMAGE_REGENERATION=true
|
||||
LOG_IMAGE_GENERATION=true
|
||||
IMAGE_GENERATION_TIMEOUT=180000
|
||||
MAX_CONCURRENT_GENERATIONS=2
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Note**: Always keep your `.env.local` file secure and never share tokens publicly!
|
||||
612
docs/ai-image-generation/PROMPT_TEMPLATES.md
Normal file
612
docs/ai-image-generation/PROMPT_TEMPLATES.md
Normal file
@@ -0,0 +1,612 @@
|
||||
# AI Image Generation Prompt Templates
|
||||
|
||||
This document contains optimized prompt templates for different project categories to ensure consistent, high-quality AI-generated images.
|
||||
|
||||
## Template Structure
|
||||
|
||||
Each template follows this structure:
|
||||
- **Base Prompt**: Core visual elements and style
|
||||
- **Technical Keywords**: Category-specific terminology
|
||||
- **Color Palette**: Recommended colors for the category
|
||||
- **Negative Prompt**: Elements to avoid
|
||||
- **Recommended Model**: Best SD model for this category
|
||||
|
||||
---
|
||||
|
||||
## Web Application Projects
|
||||
|
||||
### Base Prompt
|
||||
```
|
||||
modern web application interface, clean dashboard UI, sleek web design,
|
||||
gradient backgrounds, glass morphism effect, floating panels,
|
||||
data visualization charts, modern typography,
|
||||
soft shadows, depth layers, isometric perspective,
|
||||
professional tech aesthetic, vibrant interface elements,
|
||||
smooth gradients, minimalist composition,
|
||||
4k resolution, high quality digital art
|
||||
```
|
||||
|
||||
### Technical Keywords
|
||||
- SaaS dashboard, web portal, admin panel
|
||||
- Interactive UI elements, responsive design
|
||||
- Navigation bars, sidebars, cards
|
||||
- Progress indicators, status badges
|
||||
|
||||
### Color Palette
|
||||
- Primary: `#3B82F6` (Blue), `#8B5CF6` (Purple)
|
||||
- Secondary: `#06B6D4` (Cyan), `#EC4899` (Pink)
|
||||
- Accent: `#10B981` (Green), `#F59E0B` (Amber)
|
||||
|
||||
### Negative Prompt
|
||||
```
|
||||
mobile phone, smartphone, app mockup, tablet,
|
||||
realistic photo, stock photo, people, faces,
|
||||
cluttered, messy, dark, gloomy, text, watermark
|
||||
```
|
||||
|
||||
### Recommended Model
|
||||
- SDXL Base 1.0
|
||||
- DreamShaper 8
|
||||
|
||||
---
|
||||
|
||||
## Mobile Application Projects
|
||||
|
||||
### Base Prompt
|
||||
```
|
||||
modern mobile app interface mockup, sleek smartphone design,
|
||||
iOS or Android app screen, mobile UI elements,
|
||||
app icons grid, notification badges, bottom navigation,
|
||||
touch gestures indicators, smooth animations preview,
|
||||
gradient app background, modern mobile design trends,
|
||||
floating action button, card-based layout,
|
||||
professional mobile photography, studio lighting,
|
||||
4k quality, trending on dribbble
|
||||
```
|
||||
|
||||
### Technical Keywords
|
||||
- Native app, cross-platform, Flutter, React Native
|
||||
- Mobile-first design, touch interface
|
||||
- Swipe gestures, pull-to-refresh
|
||||
- Push notifications, app widgets
|
||||
|
||||
### Color Palette
|
||||
- Primary: `#6366F1` (Indigo), `#EC4899` (Pink)
|
||||
- Secondary: `#8B5CF6` (Purple), `#06B6D4` (Cyan)
|
||||
- Accent: `#F59E0B` (Amber), `#EF4444` (Red)
|
||||
|
||||
### Negative Prompt
|
||||
```
|
||||
desktop interface, web browser, laptop, monitor,
|
||||
desktop computer, keyboard, mouse,
|
||||
old phone, cracked screen, low resolution,
|
||||
text, watermark, people holding phones
|
||||
```
|
||||
|
||||
### Recommended Model
|
||||
- Realistic Vision V5.1
|
||||
- Juggernaut XL
|
||||
|
||||
---
|
||||
|
||||
## DevOps & Infrastructure Projects
|
||||
|
||||
### Base Prompt
|
||||
```
|
||||
cloud infrastructure visualization, modern server architecture diagram,
|
||||
Docker containers network, Kubernetes cluster illustration,
|
||||
CI/CD pipeline flowchart, automated deployment system,
|
||||
interconnected server nodes, data flow arrows,
|
||||
cloud services icons, microservices architecture,
|
||||
network topology, distributed systems,
|
||||
glowing connections, tech blueprint style,
|
||||
isometric technical illustration, cyberpunk aesthetic,
|
||||
blue and orange tech colors, professional diagram
|
||||
```
|
||||
|
||||
### Technical Keywords
|
||||
- Docker Swarm, Kubernetes, container orchestration
|
||||
- CI/CD pipeline, Jenkins, GitHub Actions
|
||||
- Cloud architecture, AWS, Azure, GCP
|
||||
- Monitoring dashboard, Grafana, Prometheus
|
||||
|
||||
### Color Palette
|
||||
- Primary: `#0EA5E9` (Sky Blue), `#F97316` (Orange)
|
||||
- Secondary: `#06B6D4` (Cyan), `#8B5CF6` (Purple)
|
||||
- Accent: `#10B981` (Green), `#EF4444` (Red)
|
||||
|
||||
### Negative Prompt
|
||||
```
|
||||
realistic datacenter photo, physical servers,
|
||||
people, technicians, hands, cables mess,
|
||||
dark server room, blurry, low quality,
|
||||
text labels, company logos, watermark
|
||||
```
|
||||
|
||||
### Recommended Model
|
||||
- SDXL Base 1.0
|
||||
- DreamShaper 8
|
||||
|
||||
---
|
||||
|
||||
## Backend & API Projects
|
||||
|
||||
### Base Prompt
|
||||
```
|
||||
API architecture visualization, RESTful endpoints diagram,
|
||||
database schema illustration, data flow architecture,
|
||||
server-side processing, microservices connections,
|
||||
API gateway, request-response flow,
|
||||
JSON data structures, GraphQL schema visualization,
|
||||
modern backend architecture, technical blueprint,
|
||||
glowing data streams, interconnected services,
|
||||
professional tech diagram, isometric view,
|
||||
clean composition, high quality illustration
|
||||
```
|
||||
|
||||
### Technical Keywords
|
||||
- REST API, GraphQL, WebSocket
|
||||
- Microservices, serverless functions
|
||||
- Database architecture, SQL, NoSQL
|
||||
- Authentication, JWT, OAuth
|
||||
|
||||
### Color Palette
|
||||
- Primary: `#8B5CF6` (Purple), `#06B6D4` (Cyan)
|
||||
- Secondary: `#3B82F6` (Blue), `#10B981` (Green)
|
||||
- Accent: `#F59E0B` (Amber), `#EC4899` (Pink)
|
||||
|
||||
### Negative Prompt
|
||||
```
|
||||
frontend UI, user interface, buttons, forms,
|
||||
people, faces, hands, realistic photo,
|
||||
messy cables, physical hardware,
|
||||
text, code snippets, watermark
|
||||
```
|
||||
|
||||
### Recommended Model
|
||||
- SDXL Base 1.0
|
||||
- DreamShaper 8
|
||||
|
||||
---
|
||||
|
||||
## AI & Machine Learning Projects
|
||||
|
||||
### Base Prompt
|
||||
```
|
||||
artificial intelligence concept art, neural network visualization,
|
||||
glowing AI nodes and connections, machine learning algorithm,
|
||||
data science visualization, deep learning architecture,
|
||||
brain-inspired computing, futuristic AI interface,
|
||||
holographic data displays, floating neural pathways,
|
||||
AI chip design, quantum computing aesthetic,
|
||||
particle systems, energy flows, digital consciousness,
|
||||
sci-fi technology, purple and cyan neon lighting,
|
||||
high-tech laboratory, 4k quality, cinematic lighting
|
||||
```
|
||||
|
||||
### Technical Keywords
|
||||
- Neural networks, deep learning, TensorFlow
|
||||
- Computer vision, NLP, transformers
|
||||
- Model training, GPU acceleration
|
||||
- AI agents, reinforcement learning
|
||||
|
||||
### Color Palette
|
||||
- Primary: `#8B5CF6` (Purple), `#EC4899` (Pink)
|
||||
- Secondary: `#06B6D4` (Cyan), `#3B82F6` (Blue)
|
||||
- Accent: `#A855F7` (Fuchsia), `#14B8A6` (Teal)
|
||||
|
||||
### Negative Prompt
|
||||
```
|
||||
realistic lab photo, scientists, people, faces,
|
||||
physical robots, mechanical parts,
|
||||
cluttered, messy, text, formulas, equations,
|
||||
low quality, dark, gloomy, stock photo
|
||||
```
|
||||
|
||||
### Recommended Model
|
||||
- SDXL Base 1.0
|
||||
- Juggernaut XL
|
||||
|
||||
---
|
||||
|
||||
## Game Development Projects
|
||||
|
||||
### Base Prompt
|
||||
```
|
||||
game environment scene, 3D rendered game world,
|
||||
video game interface, game UI overlay, HUD elements,
|
||||
fantasy game landscape, sci-fi game setting,
|
||||
character perspective view, gaming atmosphere,
|
||||
dynamic lighting, particle effects, atmospheric fog,
|
||||
game asset showcase, level design preview,
|
||||
cinematic game screenshot, unreal engine quality,
|
||||
vibrant game colors, epic composition,
|
||||
4k game graphics, trending on artstation
|
||||
```
|
||||
|
||||
### Technical Keywords
|
||||
- Unity, Unreal Engine, game engine
|
||||
- 3D modeling, texture mapping, shaders
|
||||
- Game mechanics, physics engine
|
||||
- Multiplayer, networking, matchmaking
|
||||
|
||||
### Color Palette
|
||||
- Primary: `#EF4444` (Red), `#F59E0B` (Amber)
|
||||
- Secondary: `#8B5CF6` (Purple), `#06B6D4` (Cyan)
|
||||
- Accent: `#10B981` (Green), `#EC4899` (Pink)
|
||||
|
||||
### Negative Prompt
|
||||
```
|
||||
real photo, realistic photography, real people,
|
||||
mobile game screenshot, casual game,
|
||||
low poly, pixelated, retro graphics,
|
||||
text, game title, logos, watermark
|
||||
```
|
||||
|
||||
### Recommended Model
|
||||
- Juggernaut XL
|
||||
- DreamShaper 8
|
||||
|
||||
---
|
||||
|
||||
## Blockchain & Crypto Projects
|
||||
|
||||
### Base Prompt
|
||||
```
|
||||
blockchain network visualization, cryptocurrency concept art,
|
||||
distributed ledger technology, decentralized network nodes,
|
||||
crypto mining visualization, digital currency symbols,
|
||||
smart contracts interface, DeFi platform design,
|
||||
glowing blockchain connections, cryptographic security,
|
||||
web3 technology aesthetic, neon blockchain grid,
|
||||
futuristic finance, holographic crypto data,
|
||||
clean modern composition, professional tech illustration,
|
||||
blue and gold color scheme, high quality render
|
||||
```
|
||||
|
||||
### Technical Keywords
|
||||
- Smart contracts, Solidity, Ethereum
|
||||
- DeFi, NFT, token economics
|
||||
- Consensus mechanisms, proof of stake
|
||||
- Web3, dApp, wallet integration
|
||||
|
||||
### Color Palette
|
||||
- Primary: `#F59E0B` (Gold), `#3B82F6` (Blue)
|
||||
- Secondary: `#8B5CF6` (Purple), `#10B981` (Green)
|
||||
- Accent: `#06B6D4` (Cyan), `#EC4899` (Pink)
|
||||
|
||||
### Negative Prompt
|
||||
```
|
||||
real coins, physical money, paper currency,
|
||||
people, traders, faces, hands,
|
||||
stock market photo, trading floor,
|
||||
text, ticker symbols, logos, watermark
|
||||
```
|
||||
|
||||
### Recommended Model
|
||||
- SDXL Base 1.0
|
||||
- Juggernaut XL
|
||||
|
||||
---
|
||||
|
||||
## IoT & Hardware Projects
|
||||
|
||||
### Base Prompt
|
||||
```
|
||||
Internet of Things network, smart home devices connected,
|
||||
IoT sensor network, embedded systems visualization,
|
||||
smart device ecosystem, wireless communication,
|
||||
connected hardware illustration, automation network,
|
||||
sensor data visualization, edge computing nodes,
|
||||
modern tech devices, clean product design,
|
||||
isometric hardware illustration, minimalist tech aesthetic,
|
||||
glowing connection lines, mesh network topology,
|
||||
professional product photography, studio lighting
|
||||
```
|
||||
|
||||
### Technical Keywords
|
||||
- Raspberry Pi, Arduino, ESP32
|
||||
- Sensor networks, MQTT, edge computing
|
||||
- Smart home, automation, wireless protocols
|
||||
- Embedded systems, firmware, microcontrollers
|
||||
|
||||
### Color Palette
|
||||
- Primary: `#10B981` (Green), `#06B6D4` (Cyan)
|
||||
- Secondary: `#3B82F6` (Blue), `#8B5CF6` (Purple)
|
||||
- Accent: `#F59E0B` (Amber), `#EC4899` (Pink)
|
||||
|
||||
### Negative Prompt
|
||||
```
|
||||
messy wiring, cluttered breadboard, realistic lab photo,
|
||||
people, hands holding devices, technicians,
|
||||
old electronics, broken hardware,
|
||||
text, labels, brand names, watermark
|
||||
```
|
||||
|
||||
### Recommended Model
|
||||
- Realistic Vision V5.1
|
||||
- Juggernaut XL
|
||||
|
||||
---
|
||||
|
||||
## Security & Cybersecurity Projects
|
||||
|
||||
### Base Prompt
|
||||
```
|
||||
cybersecurity concept art, digital security shield,
|
||||
encrypted data streams, firewall visualization,
|
||||
network security diagram, threat detection system,
|
||||
secure connection network, cryptography illustration,
|
||||
cyber defense interface, security monitoring dashboard,
|
||||
glowing security barriers, protected data vault,
|
||||
ethical hacking interface, penetration testing tools,
|
||||
dark mode tech aesthetic, green matrix-style code,
|
||||
professional security illustration, high-tech composition
|
||||
```
|
||||
|
||||
### Technical Keywords
|
||||
- Penetration testing, vulnerability scanning
|
||||
- Firewall, IDS/IPS, SIEM
|
||||
- Encryption, SSL/TLS, zero trust
|
||||
- Security monitoring, threat intelligence
|
||||
|
||||
### Color Palette
|
||||
- Primary: `#10B981` (Green), `#0EA5E9` (Sky Blue)
|
||||
- Secondary: `#8B5CF6` (Purple), `#EF4444` (Red)
|
||||
- Accent: `#F59E0B` (Amber), `#06B6D4` (Cyan)
|
||||
|
||||
### Negative Prompt
|
||||
```
|
||||
realistic office photo, security guards, people,
|
||||
physical locks, keys, cameras,
|
||||
dark, scary, threatening, ominous,
|
||||
text, code snippets, terminal text, watermark
|
||||
```
|
||||
|
||||
### Recommended Model
|
||||
- SDXL Base 1.0
|
||||
- DreamShaper 8
|
||||
|
||||
---
|
||||
|
||||
## Data Science & Analytics Projects
|
||||
|
||||
### Base Prompt
|
||||
```
|
||||
data visualization dashboard, analytics interface,
|
||||
big data processing, statistical charts and graphs,
|
||||
machine learning insights, predictive analytics,
|
||||
data pipeline illustration, ETL process visualization,
|
||||
interactive data dashboard, business intelligence,
|
||||
colorful data charts, infographic elements,
|
||||
modern analytics design, clean data presentation,
|
||||
professional data visualization, gradient backgrounds,
|
||||
isometric data center, flowing information streams
|
||||
```
|
||||
|
||||
### Technical Keywords
|
||||
- Data pipeline, ETL, data warehouse
|
||||
- BI dashboard, Tableau, Power BI
|
||||
- Statistical analysis, data mining
|
||||
- Pandas, NumPy, data processing
|
||||
|
||||
### Color Palette
|
||||
- Primary: `#3B82F6` (Blue), `#8B5CF6` (Purple)
|
||||
- Secondary: `#06B6D4` (Cyan), `#10B981` (Green)
|
||||
- Accent: `#EC4899` (Pink), `#F59E0B` (Amber)
|
||||
|
||||
### Negative Prompt
|
||||
```
|
||||
spreadsheet screenshot, Excel interface,
|
||||
people analyzing data, hands, faces,
|
||||
cluttered charts, messy graphs, confusing layout,
|
||||
text labels, numbers, watermark, low quality
|
||||
```
|
||||
|
||||
### Recommended Model
|
||||
- SDXL Base 1.0
|
||||
- DreamShaper 8
|
||||
|
||||
---
|
||||
|
||||
## E-commerce & Marketplace Projects
|
||||
|
||||
### Base Prompt
|
||||
```
|
||||
modern e-commerce platform interface, online shopping design,
|
||||
product showcase grid, shopping cart visualization,
|
||||
payment system interface, marketplace dashboard,
|
||||
product cards layout, checkout flow design,
|
||||
clean storefront design, modern retail aesthetic,
|
||||
shopping bag icons, product imagery, price tags design,
|
||||
conversion-optimized layout, mobile commerce,
|
||||
professional e-commerce photography, studio product shots,
|
||||
vibrant shopping experience, user-friendly interface
|
||||
```
|
||||
|
||||
### Technical Keywords
|
||||
- Online store, payment gateway, Stripe
|
||||
- Product catalog, inventory management
|
||||
- Shopping cart, checkout flow, conversion
|
||||
- Marketplace platform, vendor management
|
||||
|
||||
### Color Palette
|
||||
- Primary: `#EC4899` (Pink), `#F59E0B` (Amber)
|
||||
- Secondary: `#8B5CF6` (Purple), `#10B981` (Green)
|
||||
- Accent: `#3B82F6` (Blue), `#EF4444` (Red)
|
||||
|
||||
### Negative Prompt
|
||||
```
|
||||
realistic store photo, physical shop, retail store,
|
||||
people shopping, customers, cashiers, hands,
|
||||
cluttered shelves, messy products,
|
||||
text prices, brand logos, watermark
|
||||
```
|
||||
|
||||
### Recommended Model
|
||||
- Realistic Vision V5.1
|
||||
- Juggernaut XL
|
||||
|
||||
---
|
||||
|
||||
## Automation & Workflow Projects
|
||||
|
||||
### Base Prompt
|
||||
```
|
||||
workflow automation visualization, process flow diagram,
|
||||
automated pipeline illustration, task orchestration,
|
||||
business process automation, workflow nodes connected,
|
||||
integration platform design, automation dashboard,
|
||||
robotic process automation, efficiency visualization,
|
||||
streamlined processes, gear mechanisms, conveyor systems,
|
||||
modern workflow interface, productivity tools,
|
||||
clean automation design, professional illustration,
|
||||
isometric process view, smooth gradient backgrounds
|
||||
```
|
||||
|
||||
### Technical Keywords
|
||||
- n8n, Zapier, workflow automation
|
||||
- Integration platform, API orchestration
|
||||
- Task scheduling, cron jobs, triggers
|
||||
- Business process automation, RPA
|
||||
|
||||
### Color Palette
|
||||
- Primary: `#8B5CF6` (Purple), `#06B6D4` (Cyan)
|
||||
- Secondary: `#10B981` (Green), `#3B82F6` (Blue)
|
||||
- Accent: `#F59E0B` (Amber), `#EC4899` (Pink)
|
||||
|
||||
### Negative Prompt
|
||||
```
|
||||
realistic factory photo, physical machinery,
|
||||
people working, hands, faces, workers,
|
||||
cluttered, messy, industrial setting,
|
||||
text, labels, watermark, low quality
|
||||
```
|
||||
|
||||
### Recommended Model
|
||||
- SDXL Base 1.0
|
||||
- DreamShaper 8
|
||||
|
||||
---
|
||||
|
||||
## Universal Negative Prompt
|
||||
|
||||
Use this as a base for all generations:
|
||||
|
||||
```
|
||||
low quality, blurry, pixelated, grainy, jpeg artifacts, compression artifacts,
|
||||
text, letters, words, numbers, watermark, signature, copyright, logo, brand name,
|
||||
people, person, human, face, faces, hands, fingers, arms, body parts,
|
||||
portrait, selfie, crowd, group of people,
|
||||
cluttered, messy, chaotic, disorganized, busy, overwhelming,
|
||||
dark, gloomy, depressing, scary, ominous, threatening,
|
||||
ugly, distorted, deformed, mutation, extra limbs, bad anatomy,
|
||||
realistic photo, stock photo, photograph, camera phone,
|
||||
duplicate, duplication, repetitive, copied elements,
|
||||
old, outdated, vintage, retro (unless specifically wanted),
|
||||
screenshot, UI screenshot, browser window
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Prompt Engineering Best Practices
|
||||
|
||||
### 1. Specificity Matters
|
||||
- Be specific about visual elements you want
|
||||
- Include style keywords: "isometric", "minimalist", "modern"
|
||||
- Specify quality: "4k resolution", "high quality", "professional"
|
||||
|
||||
### 2. Weight Distribution
|
||||
- Most important elements should be early in the prompt
|
||||
- Use emphasis syntax if your tool supports it: `(keyword:1.2)` or `((keyword))`
|
||||
|
||||
### 3. Category Mixing
|
||||
- Combine multiple category templates for hybrid projects
|
||||
- Example: AI + Web App = neural network + modern dashboard UI
|
||||
|
||||
### 4. Color Psychology
|
||||
- **Blue**: Trust, technology, corporate
|
||||
- **Purple**: Innovation, creativity, luxury
|
||||
- **Green**: Growth, success, eco-friendly
|
||||
- **Orange**: Energy, action, excitement
|
||||
- **Pink**: Modern, playful, creative
|
||||
|
||||
### 5. Consistency
|
||||
- Use the same negative prompt across all generations
|
||||
- Maintain consistent aspect ratios (4:3 for project cards)
|
||||
- Stick to similar quality settings
|
||||
|
||||
### 6. A/B Testing
|
||||
- Generate 2-3 variants with slightly different prompts
|
||||
- Test which style resonates better with your audience
|
||||
- Refine prompts based on results
|
||||
|
||||
---
|
||||
|
||||
## Advanced Techniques
|
||||
|
||||
### ControlNet Integration
|
||||
If using ControlNet, you can guide composition:
|
||||
- Use Canny edge detection for layout control
|
||||
- Use Depth maps for 3D perspective
|
||||
- Use OpenPose for element positioning
|
||||
|
||||
### Multi-Stage Generation
|
||||
1. Generate base composition at lower resolution (512x512)
|
||||
2. Upscale using img2img with same prompt
|
||||
3. Apply post-processing (sharpening, color grading)
|
||||
|
||||
### Style Consistency
|
||||
To maintain consistent style across all project images:
|
||||
```
|
||||
Add to every prompt:
|
||||
"in the style of modern tech illustration, consistent design language,
|
||||
professional portfolio aesthetic, cohesive visual identity"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting Common Issues
|
||||
|
||||
### Issue: Too Abstract / Not Related to Project
|
||||
**Solution**: Add more specific technical keywords from project description
|
||||
|
||||
### Issue: Text Appearing in Images
|
||||
**Solution**: Add multiple text-related terms to negative prompt:
|
||||
`text, letters, words, typography, font, writing, characters`
|
||||
|
||||
### Issue: Dark or Poorly Lit
|
||||
**Solution**: Add lighting keywords:
|
||||
`studio lighting, bright, well-lit, soft lighting, professional lighting`
|
||||
|
||||
### Issue: Cluttered Composition
|
||||
**Solution**: Add composition keywords:
|
||||
`clean composition, minimalist, negative space, centered, balanced, organized`
|
||||
|
||||
### Issue: Wrong Aspect Ratio
|
||||
**Solution**: Specify dimensions explicitly in generation settings:
|
||||
- Cards: 1024x768 (4:3)
|
||||
- Hero: 1920x1080 (16:9)
|
||||
- Square: 1024x1024 (1:1)
|
||||
|
||||
---
|
||||
|
||||
## Quick Reference Card
|
||||
|
||||
| Category | Primary Colors | Key Style | Model |
|
||||
|----------|---------------|-----------|-------|
|
||||
| Web | Blue, Purple | Glass UI | SDXL |
|
||||
| Mobile | Indigo, Pink | Mockup | Realistic Vision |
|
||||
| DevOps | Cyan, Orange | Diagram | SDXL |
|
||||
| AI/ML | Purple, Cyan | Futuristic | SDXL |
|
||||
| Game | Red, Amber | Cinematic | Juggernaut |
|
||||
| Blockchain | Gold, Blue | Neon | SDXL |
|
||||
| IoT | Green, Cyan | Product | Realistic Vision |
|
||||
| Security | Green, Blue | Dark Tech | SDXL |
|
||||
| Data | Blue, Purple | Charts | SDXL |
|
||||
|
||||
---
|
||||
|
||||
**Last Updated**: 2024
|
||||
**Version**: 1.0
|
||||
**Maintained by**: Portfolio AI Image Generation System
|
||||
366
docs/ai-image-generation/QUICKSTART.md
Normal file
366
docs/ai-image-generation/QUICKSTART.md
Normal file
@@ -0,0 +1,366 @@
|
||||
# Quick Start Guide: AI Image Generation
|
||||
|
||||
Get AI-powered project images up and running in 15 minutes.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- Docker installed
|
||||
- 8GB+ RAM
|
||||
- GPU recommended (NVIDIA with CUDA support)
|
||||
- Node.js 18+ for portfolio app
|
||||
|
||||
## Step 1: Install Stable Diffusion WebUI (5 min)
|
||||
|
||||
```bash
|
||||
# Clone the repository
|
||||
git clone https://github.com/AUTOMATIC1111/stable-diffusion-webui.git
|
||||
cd stable-diffusion-webui
|
||||
|
||||
# Run with API enabled
|
||||
./webui.sh --api --listen
|
||||
|
||||
# For low VRAM GPUs (< 8GB)
|
||||
./webui.sh --api --listen --medvram
|
||||
|
||||
# Wait for model download and startup
|
||||
# Access WebUI at: http://localhost:7860
|
||||
```
|
||||
|
||||
## Step 2: Download a Model (3 min)
|
||||
|
||||
Open WebUI at `http://localhost:7860` and download a model:
|
||||
|
||||
**Option A: Via WebUI**
|
||||
1. Go to **Checkpoint Merger** tab
|
||||
2. Click **Model Download**
|
||||
3. Enter: `stabilityai/stable-diffusion-xl-base-1.0`
|
||||
4. Wait for download (6.94 GB)
|
||||
|
||||
**Option B: Manual Download**
|
||||
```bash
|
||||
cd models/Stable-diffusion/
|
||||
wget https://huggingface.co/stabilityai/stable-diffusion-xl-base-1.0/resolve/main/sd_xl_base_1.0.safetensors
|
||||
```
|
||||
|
||||
## Step 3: Test Stable Diffusion API (1 min)
|
||||
|
||||
```bash
|
||||
curl -X POST http://localhost:7860/sdapi/v1/txt2img \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"prompt": "modern tech dashboard, blue gradient, minimalist design",
|
||||
"steps": 20,
|
||||
"width": 512,
|
||||
"height": 512
|
||||
}' | jq '.images[0]' | base64 -d > test.png
|
||||
```
|
||||
|
||||
Open `test.png` - if you see an image, API is working! ✅
|
||||
|
||||
## Step 4: Setup n8n (2 min)
|
||||
|
||||
```bash
|
||||
# Docker Compose method
|
||||
docker run -d \
|
||||
--name n8n \
|
||||
-p 5678:5678 \
|
||||
-v ~/.n8n:/home/node/.n8n \
|
||||
n8nio/n8n
|
||||
|
||||
# Wait 30 seconds for startup
|
||||
# Access n8n at: http://localhost:5678
|
||||
```
|
||||
|
||||
## Step 5: Import Workflow (1 min)
|
||||
|
||||
1. Open n8n at `http://localhost:5678`
|
||||
2. Create account (first time only)
|
||||
3. Click **+ New Workflow**
|
||||
4. Click **⋮** (three dots) → **Import from File**
|
||||
5. Select `docs/ai-image-generation/n8n-workflow-ai-image-generator.json`
|
||||
6. Click **Save**
|
||||
|
||||
## Step 6: Configure Workflow (2 min)
|
||||
|
||||
### A. Add PostgreSQL Credentials
|
||||
1. Click **Get Project Data** node
|
||||
2. Click **Credential to connect with**
|
||||
3. Enter your database credentials:
|
||||
- Host: `localhost` (or your DB host)
|
||||
- Database: `portfolio`
|
||||
- User: `your_username`
|
||||
- Password: `your_password`
|
||||
4. Click **Save**
|
||||
|
||||
### B. Configure Stable Diffusion URL
|
||||
1. Click **Generate Image (Stable Diffusion)** node
|
||||
2. Update URL to: `http://localhost:7860/sdapi/v1/txt2img`
|
||||
3. If SD is on different machine: `http://YOUR_SD_IP:7860/sdapi/v1/txt2img`
|
||||
|
||||
### C. Set Webhook Authentication
|
||||
1. Click **Webhook Trigger** node
|
||||
2. Click **Add Credential**
|
||||
3. Set header: `Authorization`
|
||||
4. Set value: `Bearer your-secret-token-here`
|
||||
5. Save this token - you'll need it!
|
||||
|
||||
### D. Update Image Save Path
|
||||
1. Click **Save Image to File** node
|
||||
2. Update `uploadDir` path to your portfolio's public folder:
|
||||
```javascript
|
||||
const uploadDir = '/path/to/portfolio/public/generated-images';
|
||||
```
|
||||
|
||||
## Step 7: Create Directory for Images (1 min)
|
||||
|
||||
```bash
|
||||
cd /path/to/portfolio
|
||||
mkdir -p public/generated-images
|
||||
chmod 755 public/generated-images
|
||||
```
|
||||
|
||||
## Step 8: Add Environment Variables (1 min)
|
||||
|
||||
Add to `portfolio/.env.local`:
|
||||
|
||||
```bash
|
||||
# n8n Webhook Configuration
|
||||
N8N_WEBHOOK_URL=http://localhost:5678/webhook
|
||||
N8N_SECRET_TOKEN=your-secret-token-here
|
||||
|
||||
# Stable Diffusion API
|
||||
SD_API_URL=http://localhost:7860
|
||||
|
||||
# Auto-generate images for new projects
|
||||
AUTO_GENERATE_IMAGES=true
|
||||
|
||||
# Image storage
|
||||
GENERATED_IMAGES_DIR=/path/to/portfolio/public/generated-images
|
||||
```
|
||||
|
||||
## Step 9: Test the Full Pipeline (2 min)
|
||||
|
||||
```bash
|
||||
# Start your portfolio app
|
||||
cd portfolio
|
||||
npm run dev
|
||||
|
||||
# In another terminal, trigger image generation
|
||||
curl -X POST http://localhost:5678/webhook/ai-image-generation \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer your-secret-token-here" \
|
||||
-d '{
|
||||
"projectId": 1
|
||||
}'
|
||||
|
||||
# Check response (should take 15-30 seconds)
|
||||
# Response example:
|
||||
# {
|
||||
# "success": true,
|
||||
# "projectId": 1,
|
||||
# "imageUrl": "/generated-images/project-1-1234567890.png",
|
||||
# "generatedAt": "2024-01-15T10:30:00Z"
|
||||
# }
|
||||
```
|
||||
|
||||
## Step 10: Verify Image (1 min)
|
||||
|
||||
```bash
|
||||
# Check if image was created
|
||||
ls -lh public/generated-images/
|
||||
|
||||
# Open in browser
|
||||
open http://localhost:3000/generated-images/project-1-*.png
|
||||
```
|
||||
|
||||
You should see a generated image! 🎉
|
||||
|
||||
---
|
||||
|
||||
## Using the Admin UI
|
||||
|
||||
If you created the admin component:
|
||||
|
||||
1. Navigate to your admin page (create one if needed)
|
||||
2. Add the AI Image Generator component:
|
||||
|
||||
```tsx
|
||||
import AIImageGenerator from '@/app/components/admin/AIImageGenerator';
|
||||
|
||||
<AIImageGenerator
|
||||
projectId={projectId}
|
||||
projectTitle="My Awesome Project"
|
||||
currentImageUrl={project.imageUrl}
|
||||
onImageGenerated={(url) => console.log('Generated:', url)}
|
||||
/>
|
||||
```
|
||||
|
||||
3. Click **Generate Image** button
|
||||
4. Wait 15-30 seconds
|
||||
5. Image appears automatically!
|
||||
|
||||
---
|
||||
|
||||
## Automatic Generation on New Projects
|
||||
|
||||
Add this to your project creation API:
|
||||
|
||||
```typescript
|
||||
// In portfolio/app/api/projects/route.ts (or similar)
|
||||
|
||||
export async function POST(req: Request) {
|
||||
// ... your project creation code ...
|
||||
|
||||
const newProject = await createProject(data);
|
||||
|
||||
// Trigger AI image generation
|
||||
if (process.env.AUTO_GENERATE_IMAGES === 'true') {
|
||||
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 })
|
||||
}).catch(err => console.error('AI generation failed:', err));
|
||||
}
|
||||
|
||||
return NextResponse.json(newProject);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### "Connection refused to localhost:7860"
|
||||
```bash
|
||||
# Check if SD WebUI is running
|
||||
ps aux | grep webui
|
||||
|
||||
# Restart with API flag
|
||||
cd stable-diffusion-webui
|
||||
./webui.sh --api --listen
|
||||
```
|
||||
|
||||
### "CUDA out of memory"
|
||||
```bash
|
||||
# Restart with lower VRAM usage
|
||||
./webui.sh --api --listen --medvram
|
||||
|
||||
# Or even lower
|
||||
./webui.sh --api --listen --lowvram
|
||||
```
|
||||
|
||||
### "n8n workflow fails at database step"
|
||||
- Check PostgreSQL is running: `pg_isready`
|
||||
- Verify credentials in n8n node
|
||||
- Check database connection from terminal:
|
||||
```bash
|
||||
psql -h localhost -U your_username -d portfolio
|
||||
```
|
||||
|
||||
### "Image saves but doesn't appear on website"
|
||||
- Check directory permissions: `chmod 755 public/generated-images`
|
||||
- Verify path in n8n workflow matches portfolio structure
|
||||
- Check Next.js static files config in `next.config.js`
|
||||
|
||||
### "Generated images are low quality"
|
||||
Edit n8n workflow's SD node, increase:
|
||||
- `steps`: 20 → 40
|
||||
- `cfg_scale`: 7 → 9
|
||||
- `width/height`: 512 → 1024
|
||||
|
||||
### "Images don't match project theme"
|
||||
Edit **Build AI Prompt** node in n8n:
|
||||
- Add more specific technical keywords
|
||||
- Include project category in style description
|
||||
- Adjust color palette keywords
|
||||
|
||||
---
|
||||
|
||||
## Next Steps
|
||||
|
||||
✅ **You're done!** Images now generate automatically.
|
||||
|
||||
**Optional Enhancements:**
|
||||
|
||||
1. **Batch Generate**: Generate images for all existing projects
|
||||
```bash
|
||||
# Create a script: scripts/batch-generate-images.ts
|
||||
for projectId in $(psql -t -c "SELECT id FROM projects WHERE image_url IS NULL"); do
|
||||
curl -X POST http://localhost:5678/webhook/ai-image-generation \
|
||||
-H "Authorization: Bearer $N8N_SECRET_TOKEN" \
|
||||
-d "{\"projectId\": $projectId}"
|
||||
sleep 30 # Wait for generation
|
||||
done
|
||||
```
|
||||
|
||||
2. **Custom Models**: Download specialized models for better results
|
||||
- `dreamshaper_8.safetensors` for web/UI projects
|
||||
- `realisticVision_v51.safetensors` for product shots
|
||||
- `juggernautXL_v8.safetensors` for modern tech aesthetics
|
||||
|
||||
3. **Prompt Refinement**: Edit prompt templates in n8n workflow
|
||||
- Check `docs/ai-image-generation/PROMPT_TEMPLATES.md`
|
||||
- Test different styles for your brand
|
||||
|
||||
4. **Monitoring**: Set up logging and alerts
|
||||
- Add Discord/Slack notifications to n8n workflow
|
||||
- Log generation stats to analytics
|
||||
|
||||
5. **Optimization**: Compress images after generation
|
||||
```bash
|
||||
npm install sharp
|
||||
# Add post-processing step to n8n workflow
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Performance Benchmarks
|
||||
|
||||
| Hardware | Generation Time | Image Quality |
|
||||
|----------|----------------|---------------|
|
||||
| RTX 4090 | ~8 seconds | Excellent |
|
||||
| RTX 3080 | ~15 seconds | Excellent |
|
||||
| RTX 3060 | ~25 seconds | Good |
|
||||
| GTX 1660 | ~45 seconds | Good |
|
||||
| CPU only | ~5 minutes | Fair |
|
||||
|
||||
**Recommended**: RTX 3060 or better for production use.
|
||||
|
||||
---
|
||||
|
||||
## Cost Analysis
|
||||
|
||||
**Local Setup (One-time):**
|
||||
- GPU (RTX 3060): ~$300-400
|
||||
- OR Cloud GPU (RunPod, vast.ai): $0.20-0.50/hour
|
||||
|
||||
**Per Image Cost:**
|
||||
- Local: $0.00 (electricity ~$0.001)
|
||||
- Cloud GPU: ~$0.01-0.02 per image
|
||||
|
||||
**vs. Commercial APIs:**
|
||||
- DALL-E 3: $0.04 per image
|
||||
- Midjourney: ~$0.06 per image (with subscription)
|
||||
- Stable Diffusion API: $0.02 per image
|
||||
|
||||
💡 **Break-even**: After ~500 images, local setup pays for itself!
|
||||
|
||||
---
|
||||
|
||||
## Support & Resources
|
||||
|
||||
- **Documentation**: `docs/ai-image-generation/SETUP.md`
|
||||
- **Prompt Templates**: `docs/ai-image-generation/PROMPT_TEMPLATES.md`
|
||||
- **SD WebUI Wiki**: https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki
|
||||
- **n8n Documentation**: https://docs.n8n.io
|
||||
- **Community Discord**: [Your Discord link]
|
||||
|
||||
**Need Help?** Open an issue or reach out!
|
||||
|
||||
---
|
||||
|
||||
**Total Setup Time**: ~15 minutes
|
||||
**Result**: Automatic AI-generated project images 🎨✨
|
||||
423
docs/ai-image-generation/README.md
Normal file
423
docs/ai-image-generation/README.md
Normal file
@@ -0,0 +1,423 @@
|
||||
# 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*
|
||||
486
docs/ai-image-generation/SETUP.md
Normal file
486
docs/ai-image-generation/SETUP.md
Normal file
@@ -0,0 +1,486 @@
|
||||
# AI Image Generation Setup
|
||||
|
||||
This guide explains how to set up automatic AI-powered image generation for your portfolio projects using local AI models.
|
||||
|
||||
## Overview
|
||||
|
||||
The system automatically generates project cover images by:
|
||||
1. Reading project metadata (title, description, tags, tech stack)
|
||||
2. Creating an optimized prompt for image generation
|
||||
3. Sending the prompt to a local AI image generator
|
||||
4. Saving the generated image
|
||||
5. Updating the project's `imageUrl` in the database
|
||||
|
||||
## Supported Local AI Tools
|
||||
|
||||
### Option 1: Stable Diffusion WebUI (AUTOMATIC1111) - Recommended
|
||||
|
||||
**Pros:**
|
||||
- Most mature and widely used
|
||||
- Excellent API support
|
||||
- Large model ecosystem
|
||||
- Easy to use
|
||||
|
||||
**Installation:**
|
||||
```bash
|
||||
# Clone the repository
|
||||
git clone https://github.com/AUTOMATIC1111/stable-diffusion-webui.git
|
||||
cd stable-diffusion-webui
|
||||
|
||||
# Install and run (will download models automatically)
|
||||
./webui.sh --api --listen
|
||||
```
|
||||
|
||||
**API Endpoint:** `http://localhost:7860`
|
||||
|
||||
**Recommended Models:**
|
||||
- **SDXL Base 1.0** - High quality, versatile
|
||||
- **Realistic Vision V5.1** - Photorealistic images
|
||||
- **DreamShaper 8** - Artistic, tech-focused imagery
|
||||
- **Juggernaut XL** - Modern, clean aesthetics
|
||||
|
||||
**Download Models:**
|
||||
```bash
|
||||
cd models/Stable-diffusion/
|
||||
|
||||
# SDXL Base (6.94 GB)
|
||||
wget https://huggingface.co/stabilityai/stable-diffusion-xl-base-1.0/resolve/main/sd_xl_base_1.0.safetensors
|
||||
|
||||
# Or use the WebUI's model downloader
|
||||
```
|
||||
|
||||
### Option 2: ComfyUI
|
||||
|
||||
**Pros:**
|
||||
- Node-based workflow system
|
||||
- More control over generation pipeline
|
||||
- Better for complex compositions
|
||||
|
||||
**Installation:**
|
||||
```bash
|
||||
git clone https://github.com/comfyanonymous/ComfyUI.git
|
||||
cd ComfyUI
|
||||
pip install -r requirements.txt
|
||||
python main.py --listen 0.0.0.0 --port 8188
|
||||
```
|
||||
|
||||
**API Endpoint:** `http://localhost:8188`
|
||||
|
||||
### Option 3: Ollama + Stable Diffusion
|
||||
|
||||
**Pros:**
|
||||
- Lightweight
|
||||
- Easy model management
|
||||
- Can combine with LLM for better prompts
|
||||
|
||||
**Installation:**
|
||||
```bash
|
||||
# Install Ollama
|
||||
curl -fsSL https://ollama.com/install.sh | sh
|
||||
|
||||
# Install a vision-capable model
|
||||
ollama pull llava
|
||||
|
||||
# For image generation, you'll still need SD WebUI or ComfyUI
|
||||
```
|
||||
|
||||
## n8n Workflow Setup
|
||||
|
||||
### 1. Install n8n (if not already installed)
|
||||
|
||||
```bash
|
||||
# Docker Compose (recommended)
|
||||
docker-compose up -d n8n
|
||||
|
||||
# Or npm
|
||||
npm install -g n8n
|
||||
n8n start
|
||||
```
|
||||
|
||||
### 2. Import Workflow
|
||||
|
||||
1. Open n8n at `http://localhost:5678`
|
||||
2. Go to **Workflows** → **Import from File**
|
||||
3. Import `n8n-workflows/ai-image-generator.json`
|
||||
|
||||
### 3. Configure Workflow Nodes
|
||||
|
||||
#### Node 1: Webhook Trigger
|
||||
- **Method:** POST
|
||||
- **Path:** `ai-image-generation`
|
||||
- **Authentication:** Header Auth (use secret token)
|
||||
|
||||
#### Node 2: Postgres - Get Project Data
|
||||
```sql
|
||||
SELECT id, title, description, tags, category, content
|
||||
FROM projects
|
||||
WHERE id = $json.projectId
|
||||
LIMIT 1;
|
||||
```
|
||||
|
||||
#### Node 3: Code - Build AI Prompt
|
||||
```javascript
|
||||
// Extract project data
|
||||
const project = $input.first().json;
|
||||
|
||||
// Build sophisticated prompt
|
||||
const styleKeywords = {
|
||||
'web': 'modern web interface, clean UI, gradient backgrounds, glass morphism',
|
||||
'mobile': 'mobile app mockup, sleek design, app icons, smartphone screen',
|
||||
'devops': 'server infrastructure, network diagram, cloud architecture, terminal windows',
|
||||
'game': 'game scene, 3D environment, gaming interface, player HUD',
|
||||
'ai': 'neural network visualization, AI chip, data flow, futuristic tech',
|
||||
'automation': 'workflow diagram, automated processes, gears and circuits'
|
||||
};
|
||||
|
||||
const categoryStyle = styleKeywords[project.category?.toLowerCase()] || 'technology concept';
|
||||
|
||||
const prompt = `
|
||||
Professional tech project cover image, ${categoryStyle},
|
||||
representing "${project.title}",
|
||||
modern design, vibrant colors, high quality,
|
||||
isometric view, minimalist, clean composition,
|
||||
4k resolution, trending on artstation,
|
||||
color palette: blue, purple, teal accents,
|
||||
no text, no people, no logos
|
||||
`.trim().replace(/\s+/g, ' ');
|
||||
|
||||
const negativePrompt = `
|
||||
low quality, blurry, pixelated, text, watermark,
|
||||
signature, logo, people, faces, hands,
|
||||
cluttered, messy, dark, gloomy
|
||||
`.trim().replace(/\s+/g, ' ');
|
||||
|
||||
return {
|
||||
json: {
|
||||
projectId: project.id,
|
||||
prompt: prompt,
|
||||
negativePrompt: negativePrompt,
|
||||
title: project.title,
|
||||
category: project.category
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### Node 4: HTTP Request - Generate Image (Stable Diffusion)
|
||||
- **Method:** POST
|
||||
- **URL:** `http://your-sd-server:7860/sdapi/v1/txt2img`
|
||||
- **Body:**
|
||||
```json
|
||||
{
|
||||
"prompt": "={{ $json.prompt }}",
|
||||
"negative_prompt": "={{ $json.negativePrompt }}",
|
||||
"steps": 30,
|
||||
"cfg_scale": 7,
|
||||
"width": 1024,
|
||||
"height": 768,
|
||||
"sampler_name": "DPM++ 2M Karras",
|
||||
"seed": -1,
|
||||
"batch_size": 1,
|
||||
"n_iter": 1
|
||||
}
|
||||
```
|
||||
|
||||
#### Node 5: Code - Save Image to File
|
||||
```javascript
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const imageData = $input.first().json.images[0]; // Base64 image
|
||||
const projectId = $json.projectId;
|
||||
const timestamp = Date.now();
|
||||
|
||||
// Create directory if doesn't exist
|
||||
const uploadDir = '/app/public/generated-images';
|
||||
if (!fs.existsSync(uploadDir)) {
|
||||
fs.mkdirSync(uploadDir, { recursive: true });
|
||||
}
|
||||
|
||||
// Save image
|
||||
const filename = `project-${projectId}-${timestamp}.png`;
|
||||
const filepath = path.join(uploadDir, filename);
|
||||
|
||||
fs.writeFileSync(filepath, Buffer.from(imageData, 'base64'));
|
||||
|
||||
return {
|
||||
json: {
|
||||
projectId: projectId,
|
||||
imageUrl: `/generated-images/${filename}`,
|
||||
filepath: filepath
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### Node 6: Postgres - Update Project
|
||||
```sql
|
||||
UPDATE projects
|
||||
SET image_url = $json.imageUrl,
|
||||
updated_at = NOW()
|
||||
WHERE id = $json.projectId;
|
||||
```
|
||||
|
||||
#### Node 7: Webhook Response
|
||||
```json
|
||||
{
|
||||
"success": true,
|
||||
"projectId": "={{ $json.projectId }}",
|
||||
"imageUrl": "={{ $json.imageUrl }}",
|
||||
"message": "Image generated successfully"
|
||||
}
|
||||
```
|
||||
|
||||
## API Integration
|
||||
|
||||
### Generate Image for Project
|
||||
|
||||
**Endpoint:** `POST /api/n8n/generate-image`
|
||||
|
||||
**Request:**
|
||||
```json
|
||||
{
|
||||
"projectId": 123,
|
||||
"regenerate": false
|
||||
}
|
||||
```
|
||||
|
||||
**Response:**
|
||||
```json
|
||||
{
|
||||
"success": true,
|
||||
"projectId": 123,
|
||||
"imageUrl": "/generated-images/project-123-1234567890.png",
|
||||
"generatedAt": "2024-01-15T10:30:00Z"
|
||||
}
|
||||
```
|
||||
|
||||
### Automatic Generation on Project Creation
|
||||
|
||||
Add this to your project creation API:
|
||||
|
||||
```typescript
|
||||
// After creating project in database
|
||||
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
|
||||
})
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
## Environment Variables
|
||||
|
||||
Add to `.env.local`:
|
||||
|
||||
```bash
|
||||
# AI Image Generation
|
||||
N8N_WEBHOOK_URL=http://localhost:5678/webhook
|
||||
N8N_SECRET_TOKEN=your-secure-token-here
|
||||
AUTO_GENERATE_IMAGES=true
|
||||
|
||||
# Stable Diffusion API
|
||||
SD_API_URL=http://localhost:7860
|
||||
SD_API_KEY=optional-if-protected
|
||||
|
||||
# Image Storage
|
||||
GENERATED_IMAGES_DIR=/app/public/generated-images
|
||||
```
|
||||
|
||||
## Prompt Engineering Tips
|
||||
|
||||
### Good Prompts for Tech Projects
|
||||
|
||||
**Web Application:**
|
||||
```
|
||||
modern web dashboard interface, clean UI design, gradient background,
|
||||
glass morphism, floating panels, data visualization, charts and graphs,
|
||||
vibrant blue and purple color scheme, isometric view, 4k quality
|
||||
```
|
||||
|
||||
**Mobile App:**
|
||||
```
|
||||
sleek mobile app interface mockup, smartphone screen, modern app design,
|
||||
minimalist UI, smooth gradients, app icons, notification badges,
|
||||
floating elements, teal and pink accents, professional photography
|
||||
```
|
||||
|
||||
**DevOps/Infrastructure:**
|
||||
```
|
||||
cloud infrastructure diagram, server network visualization,
|
||||
interconnected nodes, data flow arrows, container icons,
|
||||
modern tech illustration, isometric perspective, cyan and orange colors
|
||||
```
|
||||
|
||||
**AI/ML Project:**
|
||||
```
|
||||
artificial intelligence concept, neural network visualization,
|
||||
glowing nodes and connections, data streams, futuristic interface,
|
||||
holographic elements, purple and blue neon lighting, high tech
|
||||
```
|
||||
|
||||
### Negative Prompts (What to Avoid)
|
||||
|
||||
```
|
||||
text, watermark, signature, logo, brand name, letters, numbers,
|
||||
people, faces, hands, fingers, human figures,
|
||||
low quality, blurry, pixelated, jpeg artifacts,
|
||||
dark, gloomy, depressing, messy, cluttered,
|
||||
realistic photo, stock photo
|
||||
```
|
||||
|
||||
## Image Specifications
|
||||
|
||||
**Recommended Settings:**
|
||||
- **Resolution:** 1024x768 (4:3 aspect ratio for cards)
|
||||
- **Format:** PNG (with transparency support)
|
||||
- **Size:** < 500KB (optimize after generation)
|
||||
- **Color Profile:** sRGB
|
||||
- **Sampling Steps:** 25-35 (balance quality vs speed)
|
||||
- **CFG Scale:** 6-8 (how closely to follow prompt)
|
||||
|
||||
## Optimization
|
||||
|
||||
### Post-Processing Pipeline
|
||||
|
||||
```bash
|
||||
# Install image optimization tools
|
||||
npm install sharp tinypng-cli
|
||||
|
||||
# Optimize generated images
|
||||
sharp input.png -o optimized.png --webp --quality 85
|
||||
|
||||
# Or use TinyPNG
|
||||
tinypng input.png --key YOUR_API_KEY
|
||||
```
|
||||
|
||||
### Caching Strategy
|
||||
|
||||
```typescript
|
||||
// Cache generated images in Redis
|
||||
await redis.set(
|
||||
`project:${projectId}:image`,
|
||||
imageUrl,
|
||||
'EX',
|
||||
60 * 60 * 24 * 30 // 30 days
|
||||
);
|
||||
```
|
||||
|
||||
## Monitoring & Debugging
|
||||
|
||||
### Check Stable Diffusion Status
|
||||
|
||||
```bash
|
||||
curl http://localhost:7860/sdapi/v1/sd-models
|
||||
```
|
||||
|
||||
### View n8n Execution Logs
|
||||
|
||||
1. Open n8n UI → Executions
|
||||
2. Filter by workflow "AI Image Generator"
|
||||
3. Check error logs and execution time
|
||||
|
||||
### Test Image Generation
|
||||
|
||||
```bash
|
||||
curl -X POST http://localhost:7860/sdapi/v1/txt2img \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"prompt": "modern tech interface, blue gradient",
|
||||
"steps": 20,
|
||||
"width": 512,
|
||||
"height": 512
|
||||
}'
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### "CUDA out of memory"
|
||||
- Reduce image resolution (768x576 instead of 1024x768)
|
||||
- Lower batch size to 1
|
||||
- Use `--lowvram` or `--medvram` flags when starting SD
|
||||
|
||||
### "Connection refused to SD API"
|
||||
- Check if SD WebUI is running: `ps aux | grep webui`
|
||||
- Verify API is enabled: `--api` flag in startup
|
||||
- Check firewall: `sudo ufw allow 7860`
|
||||
|
||||
### "Poor image quality"
|
||||
- Increase sampling steps (30-40)
|
||||
- Try different samplers (Euler a, DPM++ 2M Karras)
|
||||
- Adjust CFG scale (7-9)
|
||||
- Use better checkpoint model (SDXL, Realistic Vision)
|
||||
|
||||
### "Images don't match project theme"
|
||||
- Refine prompts with more specific keywords
|
||||
- Use category-specific style templates
|
||||
- Add technical keywords from project tags
|
||||
- Experiment with different negative prompts
|
||||
|
||||
## Advanced: Multi-Model Strategy
|
||||
|
||||
Use different models for different project types:
|
||||
|
||||
```javascript
|
||||
const modelMap = {
|
||||
'web': 'dreamshaper_8.safetensors',
|
||||
'mobile': 'realisticVision_v51.safetensors',
|
||||
'devops': 'juggernautXL_v8.safetensors',
|
||||
'ai': 'sdxl_base_1.0.safetensors'
|
||||
};
|
||||
|
||||
// Switch model before generation
|
||||
await fetch('http://localhost:7860/sdapi/v1/options', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
sd_model_checkpoint: modelMap[project.category]
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
## Security Considerations
|
||||
|
||||
1. **Isolate SD WebUI:** Run in Docker container, not exposed to internet
|
||||
2. **Authentication:** Protect n8n webhooks with tokens
|
||||
3. **Rate Limiting:** Limit image generation requests
|
||||
4. **Content Filtering:** Validate prompts to prevent abuse
|
||||
5. **Resource Limits:** Set GPU memory limits in Docker
|
||||
|
||||
## Cost & Performance
|
||||
|
||||
**Hardware Requirements:**
|
||||
- **Minimum:** 8GB RAM, GTX 1060 6GB
|
||||
- **Recommended:** 16GB RAM, RTX 3060 12GB
|
||||
- **Optimal:** 32GB RAM, RTX 4090 24GB
|
||||
|
||||
**Generation Time:**
|
||||
- **512x512:** ~5-10 seconds
|
||||
- **1024x768:** ~15-30 seconds
|
||||
- **1024x1024 (SDXL):** ~30-60 seconds
|
||||
|
||||
**Storage:**
|
||||
- ~500KB per optimized image
|
||||
- ~50MB for 100 projects
|
||||
|
||||
## Future Enhancements
|
||||
|
||||
- [ ] Style transfer from existing brand assets
|
||||
- [ ] A/B testing different image variants
|
||||
- [ ] User feedback loop for prompt refinement
|
||||
- [ ] Batch generation for multiple projects
|
||||
- [ ] Integration with DALL-E 3 / Midjourney as fallback
|
||||
- [ ] Automatic alt text generation for accessibility
|
||||
- [ ] Version history for generated images
|
||||
|
||||
---
|
||||
|
||||
**Next Steps:**
|
||||
1. Set up Stable Diffusion WebUI locally
|
||||
2. Import n8n workflow
|
||||
3. Test with sample project
|
||||
4. Refine prompts based on results
|
||||
5. Enable auto-generation for new projects
|
||||
340
docs/ai-image-generation/n8n-workflow-ai-image-generator.json
Normal file
340
docs/ai-image-generation/n8n-workflow-ai-image-generator.json
Normal file
@@ -0,0 +1,340 @@
|
||||
{
|
||||
"name": "AI Project Image Generator",
|
||||
"nodes": [
|
||||
{
|
||||
"parameters": {
|
||||
"httpMethod": "POST",
|
||||
"path": "ai-image-generation",
|
||||
"responseMode": "responseNode",
|
||||
"options": {
|
||||
"authType": "headerAuth"
|
||||
}
|
||||
},
|
||||
"id": "webhook-trigger",
|
||||
"name": "Webhook Trigger",
|
||||
"type": "n8n-nodes-base.webhook",
|
||||
"typeVersion": 1,
|
||||
"position": [250, 300],
|
||||
"webhookId": "ai-image-gen-webhook",
|
||||
"credentials": {
|
||||
"httpHeaderAuth": {
|
||||
"id": "1",
|
||||
"name": "Header Auth"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"parameters": {
|
||||
"operation": "executeQuery",
|
||||
"query": "SELECT id, title, description, tags, category, content, tech_stack FROM projects WHERE id = $1 LIMIT 1",
|
||||
"additionalFields": {
|
||||
"queryParameters": "={{ $json.body.projectId }}"
|
||||
}
|
||||
},
|
||||
"id": "get-project-data",
|
||||
"name": "Get Project Data",
|
||||
"type": "n8n-nodes-base.postgres",
|
||||
"typeVersion": 2,
|
||||
"position": [450, 300],
|
||||
"credentials": {
|
||||
"postgres": {
|
||||
"id": "2",
|
||||
"name": "PostgreSQL"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"parameters": {
|
||||
"jsCode": "// Extract project data\nconst project = $input.first().json;\n\n// Style keywords by category\nconst styleKeywords = {\n 'web': 'modern web interface, clean UI dashboard, gradient backgrounds, glass morphism effect, floating panels',\n 'mobile': 'mobile app mockup, sleek smartphone design, app icons, modern UI elements, notification badges',\n 'devops': 'server infrastructure, cloud network diagram, container orchestration, CI/CD pipeline visualization',\n 'backend': 'API architecture, database systems, microservices diagram, server endpoints, data flow',\n 'game': 'game environment scene, 3D rendered world, gaming interface, player HUD elements',\n 'ai': 'neural network visualization, AI chip design, machine learning data flow, futuristic technology',\n 'automation': 'workflow automation diagram, process flows, interconnected systems, automated pipeline',\n 'security': 'cybersecurity shields, encrypted data streams, security locks, firewall visualization',\n 'iot': 'Internet of Things devices, sensor networks, smart home technology, connected devices',\n 'blockchain': 'blockchain network, crypto technology, distributed ledger, decentralized nodes'\n};\n\nconst categoryStyle = styleKeywords[project.category?.toLowerCase()] || 'modern technology concept visualization';\n\n// Extract tech-specific keywords from tags and tech_stack\nconst techKeywords = [];\nif (project.tags) {\n const tags = Array.isArray(project.tags) ? project.tags : JSON.parse(project.tags || '[]');\n techKeywords.push(...tags.slice(0, 3));\n}\nif (project.tech_stack) {\n const stack = Array.isArray(project.tech_stack) ? project.tech_stack : JSON.parse(project.tech_stack || '[]');\n techKeywords.push(...stack.slice(0, 2));\n}\n\nconst techContext = techKeywords.length > 0 ? techKeywords.join(', ') + ' technology,' : '';\n\n// Build sophisticated prompt\nconst prompt = `\nProfessional tech project cover image, ${categoryStyle},\nrepresenting the concept of \"${project.title}\",\n${techContext}\nmodern minimalist design, vibrant gradient colors,\nhigh quality digital art, isometric perspective,\nclean composition, soft lighting,\ncolor palette: cyan, purple, pink, blue accents,\n4k resolution, trending on artstation,\nno text, no watermarks, no people, no logos,\nfuturistic, professional, tech-focused\n`.trim().replace(/\\s+/g, ' ');\n\n// Comprehensive negative prompt\nconst negativePrompt = `\nlow quality, blurry, pixelated, grainy, jpeg artifacts,\ntext, letters, words, watermark, signature, logo, brand name,\npeople, faces, hands, fingers, human figures, person,\ncluttered, messy, chaotic, disorganized,\ndark, gloomy, depressing, ugly, distorted,\nrealistic photo, stock photo, photograph,\nbad anatomy, deformed, mutation, extra limbs,\nduplication, duplicate elements, repetitive patterns\n`.trim().replace(/\\s+/g, ' ');\n\nreturn {\n json: {\n projectId: project.id,\n prompt: prompt,\n negativePrompt: negativePrompt,\n title: project.title,\n category: project.category,\n timestamp: Date.now()\n }\n};"
|
||||
},
|
||||
"id": "build-ai-prompt",
|
||||
"name": "Build AI Prompt",
|
||||
"type": "n8n-nodes-base.code",
|
||||
"typeVersion": 2,
|
||||
"position": [650, 300]
|
||||
},
|
||||
{
|
||||
"parameters": {
|
||||
"method": "POST",
|
||||
"url": "={{ $env.SD_API_URL || 'http://localhost:7860' }}/sdapi/v1/txt2img",
|
||||
"authentication": "genericCredentialType",
|
||||
"genericAuthType": "httpHeaderAuth",
|
||||
"sendBody": true,
|
||||
"bodyParameters": {
|
||||
"parameters": [
|
||||
{
|
||||
"name": "prompt",
|
||||
"value": "={{ $json.prompt }}"
|
||||
},
|
||||
{
|
||||
"name": "negative_prompt",
|
||||
"value": "={{ $json.negativePrompt }}"
|
||||
},
|
||||
{
|
||||
"name": "steps",
|
||||
"value": "30"
|
||||
},
|
||||
{
|
||||
"name": "cfg_scale",
|
||||
"value": "7"
|
||||
},
|
||||
{
|
||||
"name": "width",
|
||||
"value": "1024"
|
||||
},
|
||||
{
|
||||
"name": "height",
|
||||
"value": "768"
|
||||
},
|
||||
{
|
||||
"name": "sampler_name",
|
||||
"value": "DPM++ 2M Karras"
|
||||
},
|
||||
{
|
||||
"name": "seed",
|
||||
"value": "-1"
|
||||
},
|
||||
{
|
||||
"name": "batch_size",
|
||||
"value": "1"
|
||||
},
|
||||
{
|
||||
"name": "n_iter",
|
||||
"value": "1"
|
||||
},
|
||||
{
|
||||
"name": "save_images",
|
||||
"value": "false"
|
||||
}
|
||||
]
|
||||
},
|
||||
"options": {
|
||||
"timeout": 180000
|
||||
}
|
||||
},
|
||||
"id": "generate-image-sd",
|
||||
"name": "Generate Image (Stable Diffusion)",
|
||||
"type": "n8n-nodes-base.httpRequest",
|
||||
"typeVersion": 4,
|
||||
"position": [850, 300],
|
||||
"credentials": {
|
||||
"httpHeaderAuth": {
|
||||
"id": "3",
|
||||
"name": "SD API Auth"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"parameters": {
|
||||
"jsCode": "const fs = require('fs');\nconst path = require('path');\n\n// Get the base64 image data from Stable Diffusion response\nconst response = $input.first().json;\nconst imageData = response.images[0]; // Base64 encoded PNG\n\nconst projectId = $('Build AI Prompt').first().json.projectId;\nconst timestamp = Date.now();\n\n// Define upload directory (adjust path based on your setup)\nconst uploadDir = process.env.GENERATED_IMAGES_DIR || '/app/public/generated-images';\n\n// Create directory if it doesn't exist\nif (!fs.existsSync(uploadDir)) {\n fs.mkdirSync(uploadDir, { recursive: true });\n}\n\n// Generate filename\nconst filename = `project-${projectId}-${timestamp}.png`;\nconst filepath = path.join(uploadDir, filename);\n\n// Convert base64 to buffer and save\ntry {\n const imageBuffer = Buffer.from(imageData, 'base64');\n fs.writeFileSync(filepath, imageBuffer);\n \n // Get file size for logging\n const stats = fs.statSync(filepath);\n const fileSizeKB = (stats.size / 1024).toFixed(2);\n \n return {\n json: {\n projectId: projectId,\n imageUrl: `/generated-images/${filename}`,\n filepath: filepath,\n filename: filename,\n fileSize: fileSizeKB + ' KB',\n generatedAt: new Date().toISOString(),\n success: true\n }\n };\n} catch (error) {\n return {\n json: {\n projectId: projectId,\n error: error.message,\n success: false\n }\n };\n}"
|
||||
},
|
||||
"id": "save-image-file",
|
||||
"name": "Save Image to File",
|
||||
"type": "n8n-nodes-base.code",
|
||||
"typeVersion": 2,
|
||||
"position": [1050, 300]
|
||||
},
|
||||
{
|
||||
"parameters": {
|
||||
"operation": "executeQuery",
|
||||
"query": "UPDATE projects SET image_url = $1, updated_at = NOW() WHERE id = $2 RETURNING id, title, image_url",
|
||||
"additionalFields": {
|
||||
"queryParameters": "={{ $json.imageUrl }},={{ $json.projectId }}"
|
||||
}
|
||||
},
|
||||
"id": "update-project-image",
|
||||
"name": "Update Project Image URL",
|
||||
"type": "n8n-nodes-base.postgres",
|
||||
"typeVersion": 2,
|
||||
"position": [1250, 300],
|
||||
"credentials": {
|
||||
"postgres": {
|
||||
"id": "2",
|
||||
"name": "PostgreSQL"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"parameters": {
|
||||
"respondWith": "json",
|
||||
"responseBody": "={\n \"success\": true,\n \"projectId\": {{ $json.id }},\n \"title\": \"{{ $json.title }}\",\n \"imageUrl\": \"{{ $json.image_url }}\",\n \"generatedAt\": \"{{ $('Save Image to File').first().json.generatedAt }}\",\n \"fileSize\": \"{{ $('Save Image to File').first().json.fileSize }}\",\n \"message\": \"Project image generated successfully\"\n}",
|
||||
"options": {}
|
||||
},
|
||||
"id": "webhook-response",
|
||||
"name": "Webhook Response",
|
||||
"type": "n8n-nodes-base.respondToWebhook",
|
||||
"typeVersion": 1,
|
||||
"position": [1450, 300]
|
||||
},
|
||||
{
|
||||
"parameters": {
|
||||
"conditions": {
|
||||
"boolean": [
|
||||
{
|
||||
"value1": "={{ $json.success }}",
|
||||
"value2": true
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"id": "check-save-success",
|
||||
"name": "Check Save Success",
|
||||
"type": "n8n-nodes-base.if",
|
||||
"typeVersion": 1,
|
||||
"position": [1050, 450]
|
||||
},
|
||||
{
|
||||
"parameters": {
|
||||
"respondWith": "json",
|
||||
"responseBody": "={\n \"success\": false,\n \"error\": \"{{ $json.error || 'Failed to save image' }}\",\n \"projectId\": {{ $json.projectId }},\n \"message\": \"Image generation failed\"\n}",
|
||||
"options": {
|
||||
"responseCode": 500
|
||||
}
|
||||
},
|
||||
"id": "error-response",
|
||||
"name": "Error Response",
|
||||
"type": "n8n-nodes-base.respondToWebhook",
|
||||
"typeVersion": 1,
|
||||
"position": [1250, 500]
|
||||
},
|
||||
{
|
||||
"parameters": {
|
||||
"operation": "executeQuery",
|
||||
"query": "INSERT INTO activity_logs (type, action, details, created_at) VALUES ('ai_generation', 'image_generated', $1, NOW())",
|
||||
"additionalFields": {
|
||||
"queryParameters": "={{ JSON.stringify({ projectId: $json.id, imageUrl: $json.image_url, timestamp: new Date().toISOString() }) }}"
|
||||
}
|
||||
},
|
||||
"id": "log-activity",
|
||||
"name": "Log Generation Activity",
|
||||
"type": "n8n-nodes-base.postgres",
|
||||
"typeVersion": 2,
|
||||
"position": [1250, 150],
|
||||
"credentials": {
|
||||
"postgres": {
|
||||
"id": "2",
|
||||
"name": "PostgreSQL"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"connections": {
|
||||
"Webhook Trigger": {
|
||||
"main": [
|
||||
[
|
||||
{
|
||||
"node": "Get Project Data",
|
||||
"type": "main",
|
||||
"index": 0
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
"Get Project Data": {
|
||||
"main": [
|
||||
[
|
||||
{
|
||||
"node": "Build AI Prompt",
|
||||
"type": "main",
|
||||
"index": 0
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
"Build AI Prompt": {
|
||||
"main": [
|
||||
[
|
||||
{
|
||||
"node": "Generate Image (Stable Diffusion)",
|
||||
"type": "main",
|
||||
"index": 0
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
"Generate Image (Stable Diffusion)": {
|
||||
"main": [
|
||||
[
|
||||
{
|
||||
"node": "Save Image to File",
|
||||
"type": "main",
|
||||
"index": 0
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
"Save Image to File": {
|
||||
"main": [
|
||||
[
|
||||
{
|
||||
"node": "Check Save Success",
|
||||
"type": "main",
|
||||
"index": 0
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
"Check Save Success": {
|
||||
"main": [
|
||||
[
|
||||
{
|
||||
"node": "Update Project Image URL",
|
||||
"type": "main",
|
||||
"index": 0
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
"node": "Error Response",
|
||||
"type": "main",
|
||||
"index": 0
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
"Update Project Image URL": {
|
||||
"main": [
|
||||
[
|
||||
{
|
||||
"node": "Log Generation Activity",
|
||||
"type": "main",
|
||||
"index": 0
|
||||
},
|
||||
{
|
||||
"node": "Webhook Response",
|
||||
"type": "main",
|
||||
"index": 0
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
"settings": {
|
||||
"executionOrder": "v1",
|
||||
"saveManualExecutions": true,
|
||||
"callerPolicy": "workflowsFromSameOwner",
|
||||
"errorWorkflow": ""
|
||||
},
|
||||
"staticData": null,
|
||||
"tags": [
|
||||
{
|
||||
"name": "AI",
|
||||
"id": "ai-tag"
|
||||
},
|
||||
{
|
||||
"name": "Automation",
|
||||
"id": "automation-tag"
|
||||
},
|
||||
{
|
||||
"name": "Image Generation",
|
||||
"id": "image-gen-tag"
|
||||
}
|
||||
],
|
||||
"meta": {
|
||||
"instanceId": "your-instance-id"
|
||||
},
|
||||
"id": "ai-image-generator-workflow",
|
||||
"versionId": "1",
|
||||
"triggerCount": 1,
|
||||
"active": true
|
||||
}
|
||||
Reference in New Issue
Block a user