An innovative AI-powered image generation platform that leverages Cloudflare Workers AI with FLUX.1 Schnell to transform text descriptions into high-quality images — completely FREE (100k requests/day).
Supports real-time generation, instant downloads, and features a beautiful Mondrian-inspired UI design.
Deployed on Cloudflare Workers for global edge performance.
Live Demo · Documentation · GitHub · Issues
Share AI Image Generator
🌟 Pioneering the future of AI-powered creative tools. Built for artists, designers, and creative professionals.
[!TIP] Experience the intuitive interface and powerful AI image generation capabilities.
Main Interface - Clean and intuitive design inspired by Mondrian's art
AI Generation Process - From prompt to stunning visuals
Tech Stack Badges:
🔐 Sign-in page
📱 Mobile gallery
Important
This project demonstrates modern AI integration with Next.js 15 App Router, featuring real-time image generation powered by Cloudflare Workers AI's FLUX.1 Schnell model (free, 100k requests/day). Deployed on Cloudflare Workers via the OpenNext adapter, with React 19, TypeScript, and Tailwind CSS.
📑 Table of Contents
- 🎨 AI Image Generator - TOC
We are passionate developers creating the next generation of AI-powered creative tools. By adopting modern web technologies and cutting-edge AI models, we aim to provide users with powerful, intuitive, and accessible image generation capabilities.
Whether you're a professional designer, digital artist, or creative enthusiast, this AI Image Generator will be your creative playground. The application leverages Cloudflare Workers AI's FLUX.1 Schnell model to transform text descriptions into stunning visual art — completely free with 100,000 requests per day.
Note
- Node.js >= 18.0 required
- Cloudflare account required (free tier is sufficient — no API key needed, Workers AI is built-in)
- Modern browser with JavaScript enabled
 |
No installation required! Visit our live demo to experience AI image generation firsthand. |
|---|
Tip
⭐ Star us to receive all release notifications from GitHub without delay!
⭐ Star History
Experience state-of-the-art image generation using Cloudflare Workers AI's FLUX.1 Schnell model. Our platform delivers high-quality, creative visuals from simple text descriptions with impressive speed and accuracy — at zero cost.
Key capabilities include:
- 🚀 Lightning Fast: Generate images in seconds at the edge
- 🎨 High Quality: FLUX.1 Schnell 12B parameter model for superior results
- 💡 Creative Freedom: Transform any text into visual art
- 🔄 Real-time Processing: Instant feedback and generation
- 🆓 Completely Free: 100,000 requests/day on Cloudflare Workers AI free tier
Tip
The FLUX.1 Schnell model excels at understanding complex prompts and generating detailed, creative images across various styles and subjects. Running on Cloudflare's global edge network ensures low latency worldwide.
Revolutionary user interface inspired by Piet Mondrian's iconic geometric art style. The clean, minimalist design ensures an intuitive user experience while maintaining aesthetic appeal.
Design Features:
- Geometric Background: Dynamic Mondrian-style shapes
- Clean Interface: Minimalist and distraction-free design
- Responsive Layout: Perfect on desktop and mobile devices
- Accessibility First: WCAG compliant design principles
Beyond the core AI generation, this project includes:
- 📱 Responsive Design: Perfect experience across all devices
- ⬇️ Instant Downloads: One-click image downloading
- 🛡️ Error Handling: Comprehensive error management and user feedback
- 🔄 Loading States: Smooth loading animations and progress indicators
- 🎯 TypeScript: Full type safety throughout the application
- 🚀 Next.js 15 App Router: Modern React 19 architecture with server components
- 🎨 Custom UI Components: Built with Radix UI primitives
- ⚡ Optimized Performance: Fast loading and efficient rendering
✨ More features are continuously being added as the project evolves.
Next.js 15 |
React 19 |
TypeScript 5 |
Tailwind CSS |
Workers AI |
CF Workers |
Frontend Stack:
- Framework: Next.js 15 with App Router
- Language: TypeScript for complete type safety
- Styling: Tailwind CSS with custom design system
- UI Components: Radix UI primitives + Custom components
- Icons: Lucide React icon library
AI & Backend:
- AI Model: Cloudflare Workers AI — FLUX.1 Schnell (free, 100k req/day)
- API: Next.js API routes via OpenNext adapter
- AI Binding: Direct Workers AI binding (no external API key needed)
- Image Processing: Base64 encoding for instant display
DevOps & Deployment:
- Platform: Cloudflare Workers for global edge deployment
- Adapter: @opennextjs/cloudflare for Next.js compatibility
- Build System: OpenNext build pipeline + Wrangler CLI
- Performance: Edge-first architecture with global CDN
Tip
Each technology was carefully selected for optimal developer experience, performance, and maintainability in production environments. The Cloudflare Workers AI integration eliminates the need for external API keys and provides generous free usage.
Tip
This architecture supports horizontal scaling and is production-ready for high-traffic applications.
graph TB
subgraph "User Browser"
A[Next.js 15 App - React 19] --> B[React Components]
B --> C[Tailwind CSS Styling]
B --> K[Text Input]
B --> L[Image Display]
B --> M[Download Feature]
end
subgraph "Cloudflare Workers"
D[OpenNext Adapter] --> E[Next.js API Routes]
E --> F[Workers AI Binding]
D --> G[Static Assets CDN]
end
subgraph "Cloudflare Workers AI"
H["FLUX.1 Schnell (12B params)"]
end
K -->|POST /api/generate| D
F -->|"env.AI.run()"| H
H -->|Base64 Image| E
E -->|JSON Response| L
style H fill:#F38020,stroke:#F38020,color:#fff
style D fill:#F38020,stroke:#F38020,color:#fff
Request Flow:
sequenceDiagram
participant U as User Browser
participant W as Cloudflare Worker
participant AI as Workers AI (FLUX.1 Schnell)
U->>W: POST /api/generate {prompt}
W->>W: Validate prompt
W->>AI: env.AI.run("@cf/black-forest-labs/flux-1-schnell", {prompt, steps: 4})
AI-->>W: {image: "base64..."}
W-->>U: JSON Response (base64 image)
U->>U: Display image via data URI
├── app/ # Next.js 15 App Router
│ ├── api/generate/ # Image generation API route (Workers AI)
│ │ └── route.ts # POST endpoint using env.AI binding
│ ├── layout.tsx # Root layout with Inter font
│ ├── page.tsx # Main application page (client component)
│ └── globals.css # Global styles + Tailwind directives
├── components/ # React components
│ ├── ui/ # Base UI components (Button, etc.)
│ ├── MondrianBackground.tsx # Geometric background component
│ └── DeveloperShowcase.tsx # Developer profile component
├── lib/ # Utility libraries
│ └── utils.ts # cn() helper for Tailwind class merging
├── public/ # Static assets (logo, favicon, etc.)
├── wrangler.jsonc # Cloudflare Workers configuration
├── open-next.config.ts # OpenNext Cloudflare adapter config
├── cloudflare-env.d.ts # Cloudflare bindings TypeScript types
├── next.config.js # Next.js config + OpenNext dev init
└── package.json # Dependencies and build scripts
Key Metrics:
- ⚡ < 2s Image generation time
- 🚀 < 300ms Initial page load
- 💨 95+ Lighthouse Score for performance
- 📱 100% Mobile Responsive design
- 🔄 Real-time generation feedback
Performance Optimizations:
- 🌍 Edge Deployment: Cloudflare Workers runs at 300+ locations worldwide
- 📦 Code Splitting: Automatic bundle optimization via Next.js 15
- 🔄 Workers AI Binding: Direct in-platform AI inference with zero network hop to external APIs
- 🖼️ Base64 Encoding: Instant image display without additional requests
Note
Performance metrics are continuously monitored in production environments. Cloudflare Workers provides built-in analytics and logging.
Important
Ensure you have the following installed:
- Node.js 18.0+ (Download)
- npm/yarn/pnpm package manager
- Git (Download)
- Cloudflare account (Sign up free) — no API key needed, Workers AI is built-in
- Wrangler CLI (installed as project devDependency)
1. Clone Repository
git clone https://github.com/ChanMeng666/image-generator.git
cd image-generator2. Install Dependencies
# Using npm
npm install
# Using yarn
yarn install
# Using pnpm (recommended)
pnpm install3. Login to Cloudflare
# Login to your Cloudflare account (interactive browser auth)
npx wrangler login4. Start Development
npm run dev🎉 Success! Open http://localhost:3000 to start generating images.
Tip
No API key is needed! Cloudflare Workers AI is accessed directly via the AI binding configured in wrangler.jsonc. The free tier includes 100,000 AI requests per day.
# Start development server (with Cloudflare bindings)
npm run dev
# Build and preview locally with Cloudflare Workers runtime
npm run preview
# Build for production
npm run build
# Deploy to Cloudflare Workers
npm run deploy
# Run linting
npm run lintImportant
This project is deployed on Cloudflare Workers using the OpenNext adapter. No external API keys are required.
One-Command Deploy:
# Build and deploy to Cloudflare Workers
npm run deployStep-by-Step Deployment:
# 1. Login to Cloudflare
npx wrangler login
# 2. Build the Next.js app + OpenNext bundle
npx opennextjs-cloudflare build
# 3. Deploy to Cloudflare Workers
npx opennextjs-cloudflare deployYour app will be available at https://image-generator.<your-subdomain>.workers.dev.
graph LR
subgraph "Build Pipeline"
A[Next.js Build] --> B[OpenNext Adapter]
B --> C[Worker Bundle]
B --> D[Static Assets]
end
subgraph "Cloudflare Edge Network"
E[Workers Runtime]
F[Static Asset CDN]
G[Workers AI]
end
C --> E
D --> F
E --> G
style E fill:#F38020,stroke:#F38020,color:#fff
style F fill:#F38020,stroke:#F38020,color:#fff
style G fill:#F38020,stroke:#F38020,color:#fff
Note
No external API keys or secrets are needed. Workers AI is accessed via a built-in binding.
| File | Purpose |
|---|---|
wrangler.jsonc |
Cloudflare Workers config (account, AI binding, assets) |
open-next.config.ts |
OpenNext adapter configuration |
next.config.js |
Next.js config with OpenNext dev integration |
Key wrangler.jsonc settings:
Getting Started with AI Image Generation:
- Enter Description: Type your image description in the text area
- Generate Image: Click the "Generate Image" button
- View Result: Watch as your AI-generated image appears
- Download: Click "Download Image" to save your creation
Image Generation Endpoint:
POST /api/generate
Content-Type: application/json
{
"prompt": "A beautiful sunset over mountains"
}
# Response (JSON string — base64-encoded image)
"iVBORw0KGgoAAAANSUhEUgAA..."Example Usage:
const generateImage = async (prompt) => {
const response = await fetch('/api/generate', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ prompt })
});
const imageData = await response.json();
return `data:image/png;base64,${imageData}`;
};Server-side implementation (via Cloudflare Workers AI binding):
// app/api/generate/route.ts
import { getCloudflareContext } from '@opennextjs/cloudflare';
const { env } = getCloudflareContext();
const response = await env.AI.run('@cf/black-forest-labs/flux-1-schnell', {
prompt,
steps: 4, // 1-8, higher = better quality
});
// response.image contains the base64-encoded imageError Responses:
| Status Code | Description | Response |
|---|---|---|
400 |
Missing prompt | { error: "Please enter a prompt" } |
500 |
Generation failed | { error: "Error generating image" } |
Current Integrations:
| Service | Purpose | Status | Documentation |
|---|---|---|---|
| Cloudflare Workers AI | AI Image Generation (FLUX.1 Schnell) | ✅ Active | Workers AI Docs |
| Cloudflare Workers | Edge Deployment & Hosting | ✅ Active | Workers Docs |
| OpenNext | Next.js → Cloudflare Adapter | ✅ Active | OpenNext Docs |
| Tailwind CSS | Styling System | ✅ Active | Documentation |
| Radix UI | UI Components | ✅ Active | Component Docs |
Setup Development Environment:
# Clone and setup
git clone https://github.com/ChanMeng666/image-generator.git
cd image-generator
npm install
# Login to Cloudflare (for Workers AI binding in dev)
npx wrangler login
# Start development
npm run devDevelopment Workflow:
# Create feature branch
git checkout -b feature/amazing-feature
# Make your changes
# Add tests if applicable
# Update documentation
# Submit pull request
git push origin feature/amazing-featureManual Testing:
- Test image generation with various prompts
- Verify responsive design on different devices
- Check error handling with invalid inputs
- Test download functionality
We welcome contributions! Here's how you can help:
How to Contribute:
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Contribution Guidelines:
- Follow TypeScript best practices
- Maintain consistent code formatting
- Add meaningful commit messages
- Update documentation as needed
This project is licensed under the Apache-2.0 License - see the LICENSE file for details.
License Benefits:
- ✅ Commercial use allowed
- ✅ Modification allowed
- ✅ Distribution allowed
- ✅ Private use allowed
Chan Meng Creator & Lead Developer |
Chan Meng
LinkedIn: chanmeng666
GitHub: ChanMeng666
Email: chanmeng.dev@gmail.com
Website: chanmeng.org
Empowering creativity through cutting-edge technology
⭐ Star us on GitHub • 🚀 Try the Demo • 🐛 Report Issues • 💡 Request Features • 🤝 Contribute
Made with 💛 by Chan Meng
---
Chan Meng
Need a custom app like this one? I build them — let's talk.
{ "name": "image-generator", "main": ".open-next/worker.js", "compatibility_flags": ["nodejs_compat"], "ai": { "binding": "AI" } // Workers AI binding — no API key needed }