AI Image Generator Starter
A modern AI image generation web application that supports multiple AI platforms, providing real-time image generation, download, and management features.
๐จ AI Image Generator
A modern AI image generation web application that supports multiple AI platforms, providing real-time image generation, download, and management features.
โจ Features
- ๐ฏ Multi-Platform Support - Integrated with mainstream AI platforms like Hugging Face, Nebius, Replicate
- ๐ Real-time Generation - Support for real-time image generation with progress indicators
- ๐พ One-Click Download - Support for image download with automatic filename generation
- ๐จ Multiple Models - Support for various AI models including SDXL, Flux, Pixel Art, and more
- ๐ฑ Responsive Design - Perfect adaptation for desktop and mobile devices
๐ Tech Stack
Frontend
- Next.js 15.3.4 - React full-stack framework
- React 19.0.0 - User interface library
- TypeScript 5.0 - Type-safe JavaScript
- Tailwind CSS 4.0 - Utility-first CSS framework
- TDesign React - Enterprise-class UI component library
Backend
- EdgeOne Functions - Edge computing functions
- Multi-Platform API Integration - Hugging Face, Nebius, Replicate
๐ Quick Start
Requirements
- Node.js 18.0 or higher
- npm or yarn package manager
- Valid AI platform API tokens
Installation Steps
-
Clone the Repository
git clone <repository-url> cd generate-graph
-
Install Dependencies
npm install # or yarn install
-
Configure Environment Variables Create a
.env
file and add the following configuration (not all required):# Hugging Face API Token HF_TOKEN=your_huggingface_token_here # Nebius API Token NEBIUS_TOKEN=your_nebius_token_here # Replicate API Token REPLICATE_TOKEN=your_replicate_token_here # OPENAI API Key OPENAI_API_KEY=your_openai_api_key_here # FAL API Key FAL_KEY=your_fal_key_here
The EdgeOne Pages deployment console environment variable configuration is consistent with the above
.env
file. -
Start Development Server
npm run dev # or yarn dev
-
Access the Application Open your browser and visit http://localhost:3000
๐ง Environment Configuration
API Token Setup
Hugging Face
- Visit Hugging Face
- Register and login to your account
- Go to Settings > Access Tokens
- Create a new access token
- Copy the token to the
HF_TOKEN
environment variable
Nebius
- Visit Nebius Studio
- Register and login to your account
- Go to API settings page
- Generate an API key
- Copy the key to the
NEBIUS_TOKEN
environment variable
Replicate
- Visit Replicate
- Register and login to your account
- Go to Account Settings
- Create an API token
- Copy the token to the
REPLICATE_TOKEN
environment variable
OpenAI
- Visit OpenAI
- Register and login to your account
- Go to API Keys
- Create a new API key
- Copy the key to the
OPENAI_API_KEY
environment variable
FAL
- Visit FAL
- Register and login to your account
- Go to API Keys
- Create an API key
- Copy the key to the
FAL_KEY
environment variable
Token Status Check
The application automatically checks the availability of tokens for each platform and displays the status in the interface:
- โ Available - Token is configured and valid
- โ Missing - Token is not configured or invalid
๐ User Guide
Basic Operation Flow
-
Select Model
- Choose from available AI models in the left panel
- Different models support different image styles and generation effects
-
Enter Prompt
- Input image description in the text box
- Supports both Chinese and English descriptions
- The system automatically adds model style suffixes
-
Generate Image
- Click the "Generate" button to start generation
- Real-time display of generation progress and time
- Automatically displays results when generation is complete
-
Download Image
- Hover over the image to show download button
- Click download button to save the image
- Automatically generates filename containing the prompt
๐ API Documentation
Image Generation Endpoint
Endpoint: POST /v1/generate
Request Body:
{
"image": "Image description text",
"platform": "huggingface",
"model": "Model identifier"
}
Response:
{
"success": true,
"prompt": "Original prompt",
"imageData": "Base64 encoded image data or URL",
"message": "Generation success message"
}
Token Status Endpoint
Endpoint: GET /v1/token-status
Response:
{
"hfToken": true,
"nebiusToken": true,
"replicateToken": false
}
Error Handling
All API endpoints include unified error handling:
400
- Request parameter errors or content violations429
- Request rate limit exceeded500
- Internal server error
๐ Project Structure
generate-graph/
โโโ functions/ # EdgeOne Functions
โ โโโ v1/
โ โ โโโ generate/ # Image generation API
โ โ โ โโโ index.js # Main processing logic
โ โ โ โโโ fetch_utils.js # API call utilities
โ โ โ โโโ nfsw_limit.js # Content filtering
โ โ โโโ token-status/ # Token status API
โ โโโ helloworld/ # Example function
โโโ src/
โ โโโ components/ # React components
โ โ โโโ ImageDisplay.tsx # Image display component
โ โ โโโ ModelDropdown.tsx # Model selection component
โ โโโ pages/ # Next.js pages
โ โ โโโ _app.tsx # Application entry
โ โ โโโ _document.tsx # Document configuration
โ โ โโโ index.tsx # Main page
โ โโโ styles/ # Style files
โ โโโ globals.css # Global styles
โโโ public/ # Static assets
โโโ package.json # Project configuration
โโโ next.config.ts # Next.js configuration
โโโ tailwind.config.js # Tailwind configuration
โโโ README.md # Project documentation