MemeGen Pro - AI Sticker Maker

中文文档

Demo

A modern React application that turns photos into LINE/WeChat-style sticker packs using Google's Gemini 3 Pro (Nano Banana Pro) model.

1. AI Generation: Uses gemini-3-pro-image-preview to generate high-quality, 4K resolution sticker sheets from a reference photo.
2. Multi-Mode Support:
   • Sticker Sheet: Generates a 4x6 grid of static stickers.
   • Animated GIF: Generates a sprite sheet and synthesizes it into a looping GIF animation.
3. Shop Asset Generator: Automatically designs all required assets for sticker shops (WeChat/LINE):
   • Banner: Promotional banner (750x400).
   • Cover: Main package cover (230x230).
   • Icon: Small list icon (50x50).
   • Donation Guide: Image to encourage donations (750x560).
   • Thank You Image: Image shown after donation (750x750).
4. Smart Editor:
   • Background Removal: Client-side algorithm (Chroma Key) to remove the generated green screen background.
   • Slicing: Automatically cuts grids into individual PNG files.
   • GIF Synthesis: Compiles frames into a smooth GIF with adjustable FPS.
5. Custom API Settings:
   • BYO Key: Users can input their own Google Gemini API Key in the frontend.
   • Proxy Support: Supports OpenAI-compatible API proxies (e.g., NewAPI/OneAPI) with custom Base URL configuration.
6. Export: Downloads sticker sets as ZIP files or individual assets as PNGs.
7. Security: Optional access code protection for deployments.

• Node.js 18+ (for local dev) or Docker
• A Google Cloud Project with Gemini API enabled.
• Important: This app uses the paid gemini-3-pro-image-preview model.

1. Install dependencies:

   npm install

2. Start the development server:

   npm start

You can run MemeGen Pro locally using Docker Compose.

1. Clone the repository.

2. Run with Docker Compose:

   docker-compose up -d

3. Access the App: Open http://localhost:3000 in your browser.

4. Configuration: You can set environment variables in docker-compose.yml or create a .env file:

   API_KEY=your_google_api_key_here
   ACCESS_CODE=optional_password_protection

   If API_KEY is not set in the environment, the app will prompt the user to enter it via the Settings UI.

1. Push this code to a GitHub repository.

2. Import the repository into Vercel.

3. Environment Variables: Go to your Vercel Project Settings > Environment Variables and add:

   • API_KEY: Your Google Gemini API Key.
   • ACCESS_CODE (Optional): A password/code to protect your deployment.

   Note: If API_KEY is provided, the app will use it directly. If ACCESS_CODE is set, the app will show a lock screen.

4. Deploy! Vercel will automatically detect the React framework and build the project.

1. Security: If an ACCESS_CODE is deployed, enter it to unlock the app.
2. Settings: Click the gear icon to configure API keys or Proxy URLs if not set on the server.
3. Upload: Drag and drop a photo of a person or character.
4. Prompt:
   • Stickers: Uses an optimized prompt for "Q-version, LINE style, 4x6 layout".
   • GIF: Enter a specific action (e.g., "Running") to generate a sprite sheet.
5. Edit & Export:
   • Sticker Sheet: Adjust "Color Tolerance" to remove the green background. Slice and download as ZIP.
   • GIF: Adjust grid to frame the action, select FPS, and synthesize the GIF.
   • Shop Assets: Switch tabs (Banner, Cover, Icon, etc.) to generate and download specific store assets.