🎨 AI Image Generator

Production-ready AI image generator built with n8n, featuring advanced rate limiting, content filtering, and multiple AI providers

🚀 Features

• 🤖 Multiple AI Models: Flux, Turbo, and fallback providers for maximum reliability
• 🛡️ Advanced Security: Content filtering, rate limiting, and input validation
• ⚡ High Performance: 45-second timeout with intelligent fallback system
• 🎯 Customizable Styles: 7+ built-in styles (photorealistic, artistic, cartoon, cyberpunk, etc.)
• 📱 React Frontend: Beautiful, responsive web interface included
• 🔧 Production Ready: Enterprise-grade error handling and monitoring
• 🎛️ Flexible API: Support for custom dimensions, seeds, quality levels
• 🚦 Rate Limiting: 10 requests per minute per IP with automatic cleanup

📋 Table of Contents

• Quick Start
• Installation
• API Documentation
• Frontend Setup
• Configuration
• Deployment
• Contributing
• License

🏁 Quick Start

1. Import n8n Workflow

# Import the workflow JSON into your n8n instance
# File: n8n/image_generate_3.json

2. Set Up Frontend

# Navigate to the React app directory
cd n8n-image-generator

# Install dependencies
npm install

# Start development server
npm start

3. Test the API

curl -X POST "https://your-n8n-instance.com/webhook/generate-image" \
  -H "Content-Type: application/json" \
  -d '{
    "message": "A beautiful sunset over mountains",
    "style": "photorealistic",
    "size": "1024x1024",
    "quality": "high"
  }'

🔧 Installation

Prerequisites

• n8n instance (cloud or self-hosted)
• Node.js 16+ (for React frontend)
• Domain with SSL certificate (recommended)

Step-by-Step Setup

1. Clone the Repository

   git clone https://github.com/YatharthSanghavi/n8n-image-generator.git
   cd n8n-image-generator
   

2. Import n8n Workflow

   • Open your n8n instance
   • Go to Workflows → Import from File
   • Select image_generate_3.json
   • Activate the workflow

3. Configure Webhook

   • Copy the webhook URL from n8n
   • Update the endpoint in your frontend configuration

4. Configure Environment Variables

   # Go to src/ImageGenerator.tsx paste your n8n url here under try section
   webhookUrl=https://your-n8n-webhook-url.com
   

📖 API Documentation

Request Body

{
  "message": "Your image description",
  "style": "photorealistic",
  "size": "1024x1024",
  "quality": "high",
  "seed": 123456,
  "model": "flux"
}

Parameters

Available Styles

Response

Success (200)

Content-Type: image/png
[Binary image data]

Error (400/429)

{
  "error": "Error type",
  "message": "Detailed error message",
  "code": "ERROR_CODE"
}

Rate Limiting

• Limit: 10 requests per minute per IP
• Window: 60 seconds
• Response: 429 Too Many Requests

🎨 Frontend Setup

The included React frontend provides a beautiful, user-friendly interface for your image generation API.

Features

• Responsive Design: Works on all devices
• Real-time Preview: See parameters as you adjust them
• Gallery View: Browse generated images
• Download Support: Save images locally
• Style Presets: Quick style selection
• Advanced Options: Seed, model, quality controls

⚙️ Configuration

n8n Workflow Settings

1. Rate Limiting

   const maxRequestsPerWindow = 10; // Adjust as needed
   const rateLimitWindow = 60000; // 1 minute
   

2. Content Filtering

   const inappropriateTerms = ['nude', 'naked', 'nsfw', 'explicit'];
   // Add custom terms to filter
   

3. API Providers

   const apiConfigs = [
     {
       name: 'Pollinations AI - Flux',
       url: `https://image.pollinations.ai/prompt/${prompt}?model=flux`,
       priority: 1
     }
     // Add custom providers
   ];
   

🚀 Deployment

n8n Workflow

1. Cloud Deployment
   • Use n8n Cloud for easiest setup
   • Configure webhook URL in your domain

React Frontend

1. Netlify/Vercel

   # Build for production
   npm run build
   
   # Deploy to Netlify
   netlify deploy --prod --dir=build
   

2. Traditional Hosting

   npm run build
   # Upload build/ folder to your web server
   

🔍 Monitoring & Analytics

Built-in Monitoring

• Request counting and rate limiting
• Error tracking and logging
• Performance metrics
• Content filter statistics

🛠️ Advanced Features

Custom AI Providers

Add your own AI image generation APIs:

const customProvider = {
  name: 'Custom AI Provider',
  url: 'https://your-api.com/generate',
  headers: {
    'Authorization': 'Bearer your-token',
    'Content-Type': 'application/json'
  },
  transform: (prompt, options) => ({
    prompt: prompt,
    style: options.style,
    dimensions: options.size
  })
};

Development Setup

# Fork the repository
git clone https://github.com/YatharthSanghavi/n8n-image-generator.git
cd n8n-image-generator

# Install dependencies
npm install

# Start development server
npm run dev

Contribution Areas

• 🐛 Bug fixes and improvements
• 🚀 New AI provider integrations
• 🎨 Frontend enhancements
• 📚 Documentation improvements
• 🧪 Test coverage expansion

📈 Roadmap

• v2.0: Multi-model support visit here:- fluxgen
• v2.1: Batch processing capabilities
• v2.2: Advanced content filtering with AI
• v2.3: User authentication and quotas
• v2.4: Image editing and variations
• v2.5: Mobile app (Flutter)

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• n8n Team: For the amazing automation platform
• Pollinations AI: For providing free AI image generation
• React Community: For the excellent frontend framework

🌟 Star History