ImagineAI — AI Image Generator

ImagineAI is a responsive full-stack AI image generation application. Users can describe an image, select a visual style and format, and generate downloadable artwork using Cloudflare Workers AI.

Live Demo

Open the deployed ImagineAI application

Features

• Text-to-image generation
• Multiple visual styles
• Square, portrait, and landscape composition prompts
• Random “Surprise me” prompts
• Loading and error states
• Image download
• Full-image preview
• Responsive dark-themed interface
• Secure server-side API integration
• API rate limiting

Technology Stack

Frontend

• React
• JavaScript
• Vite
• HTML5
• CSS3

Backend

• Node.js
• Express
• Cloudflare Workers AI
• FLUX.1 Schnell
• Helmet
• Express Rate Limit
• Dotenv
• CORS

Architecture

1. The user submits an image prompt from the React frontend.
2. React sends a POST request to the Express backend.
3. The backend securely reads Cloudflare credentials from environment variables.
4. The backend calls the Cloudflare Workers AI API.
5. Cloudflare generates and returns a Base64 image.
6. The backend returns the image to React for display and download.

Local Setup

Prerequisites

• Node.js 18 or later
• npm
• Cloudflare account
• Workers AI API token

Clone and install

git clone YOUR_REPOSITORY_URL
cd ai-image-studio

Install the frontend:

cd client
npm install

Install the backend:

cd ../server
npm install

Environment variables

Create a .env file inside the server directory:

CLOUDFLARE_ACCOUNT_ID=your_cloudflare_account_id
CLOUDFLARE_API_TOKEN=your_cloudflare_api_token
PORT=3001

Never commit the .env file.

Run the backend

cd server
npm run dev

The backend runs at:

http://localhost:3001

Run the frontend

Open another terminal:

cd client
npm run dev

The frontend runs at:

http://localhost:5173

API Endpoint

Generate an image

POST /api/generate

Example request:

{
  "prompt": "A futuristic city floating above the clouds",
  "style": "Digital art",
  "format": "Landscape"
}

Security

• API credentials are stored only in the backend .env file.
• Credentials are never exposed to the React frontend.
• Helmet adds secure HTTP headers.
• Rate limiting restricts repeated image-generation requests.
• Request bodies are size-limited and validated.

Future Improvements

• Generation history
• User authentication
• Cloud image storage
• Sharing generated artwork
• Additional AI models
• Automated tests

Author

Lakshmi Swathi Ramineni