Pricing
PURCHASE OPTIONSโ€‹
PRICING GUIDANCEโ€‹
๐ŸŽ‰ EdgeOne Free Plan Launches! The World's First Free CDN with China Access โ€“ Join the Event to Unlock Multiple Plans!
Back to Templates

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.

View Demo
FrameworkNext.js
Use CaseAI
A modern AI image generation web application that supports multiple AI platforms, providing real-time image generation, download, and management features.

๐ŸŽจ AI Image Generator

Next.js React TypeScript Tailwind CSS License

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

  1. Clone the Repository

    git clone <repository-url>
    cd generate-graph
    
  2. Install Dependencies

    npm install
    # or
    yarn install
    
  3. 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.

  4. Start Development Server

    npm run dev
    # or
    yarn dev
    
  5. Access the Application Open your browser and visit http://localhost:3000

๐Ÿ”ง Environment Configuration

API Token Setup

Hugging Face

  1. Visit Hugging Face
  2. Register and login to your account
  3. Go to Settings > Access Tokens
  4. Create a new access token
  5. Copy the token to the HF_TOKEN environment variable

Nebius

  1. Visit Nebius Studio
  2. Register and login to your account
  3. Go to API settings page
  4. Generate an API key
  5. Copy the key to the NEBIUS_TOKEN environment variable

Replicate

  1. Visit Replicate
  2. Register and login to your account
  3. Go to Account Settings
  4. Create an API token
  5. Copy the token to the REPLICATE_TOKEN environment variable

OpenAI

  1. Visit OpenAI
  2. Register and login to your account
  3. Go to API Keys
  4. Create a new API key
  5. Copy the key to the OPENAI_API_KEY environment variable

FAL

  1. Visit FAL
  2. Register and login to your account
  3. Go to API Keys
  4. Create an API key
  5. 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

  1. Select Model

    • Choose from available AI models in the left panel
    • Different models support different image styles and generation effects
  2. Enter Prompt

    • Input image description in the text box
    • Supports both Chinese and English descriptions
    • The system automatically adds model style suffixes
  3. Generate Image

    • Click the "Generate" button to start generation
    • Real-time display of generation progress and time
    • Automatically displays results when generation is complete
  4. 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 violations
  • 429 - Request rate limit exceeded
  • 500 - 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