hub / github.com/GrinZero/meme-ai-generator

github.com/GrinZero/meme-ai-generator @main

Chat with this repo

repository ↗ · DeepWiki ↗ · + Follow

471 symbols 1,000 edges 84 files 113 documented · 24%

What it actually does AI analysis from the code graph — generated when you open this

loading…

README

😊 Meme AI Generator

中文文档

An AI-powered meme/sticker generator that creates custom emoji packs from your images. Upload photos, describe your style, and let AI do the magic.

🔗 Live Demo: meme-ai-generator.vercel.app

✨ Features

AI Generation - Generate custom meme packs using Gemini or OpenAI APIs
Smart Splitting - Automatically extract individual emojis from generated images
Manual Upload - Upload existing meme sheets and split them into individual stickers
Emoji Editor - Edit, regenerate, or download individual emojis
Batch Download - Export all emojis as a ZIP file with standardized sizes
Background Removal - Clean transparent backgrounds for your stickers
Bilingual Support - Chinese and English prompt templates

🚀 Quick Start

Prerequisites

Node.js 18+
pnpm (recommended) or npm
API key from Google AI Studio or OpenAI

Installation

# Clone the repository
git clone https://github.com/your-username/meme-ai-generator.git
cd meme-ai-generator

# Install dependencies
pnpm install

# Start development server
pnpm dev

Configuration

Open the app in your browser
Click the settings icon (⚙️) in the top-right corner
Enter your API key and base URL:
Gemini: Use https://generativelanguage.googleapis.com/v1beta as base URL
OpenAI: Use https://api.openai.com/v1 or your custom endpoint

📖 Usage Guide

AI Generation Mode

Upload Images - Add material images (your subject) and/or reference images (style examples)
Write Prompt - Describe the meme style you want (e.g., "cute chibi style with various emotions")
Generate - Click "Start Generate" and wait for AI to create your meme pack
Split - Use AI or traditional algorithm to extract individual emojis
Edit & Download - Fine-tune individual emojis or batch download all

Manual Split Mode

Switch to "Upload & Split" tab
Upload an existing meme sheet image
Click "Start Split" to extract individual emojis
Edit or download as needed

🛠️ Tech Stack

Framework: React 19 + TypeScript
Build Tool: Vite
Styling: Tailwind CSS
State Management: Zustand
AI Integration: Google Generative AI SDK, OpenAI SDK
Image Processing: @imgly/background-removal

📁 Project Structure

src/
├── components/     # React components
├── services/       # AI, image processing, download services
├── store/          # Zustand state management
├── types/          # TypeScript type definitions
└── test/           # Test files

🧪 Development

# Run tests
pnpm test

# Run tests in watch mode
pnpm test:watch

# Lint code
pnpm lint

# Build for production
pnpm build

📄 License

MIT

Extension points exported contracts — how you extend this code

FadeTransitionProps (Interface)

* FadeTransition - 淡入淡出过渡

src/components/Transition.tsx

SelectionStoreState (Interface)

* 选区 Store 状态接口

src/store/useSelectionStore.ts

CacheEntry (Interface)

* 缓存条目接口

src/services/modelListService.ts

PromptConfig (Interface)

(no doc)

src/types/prompt.ts

CanvasTransform (Interface)

(no doc)

src/utils/geometry.ts

SlideTransitionProps (Interface)

* SlideTransition - 滑动过渡

src/components/Transition.tsx

SelectionStoreActions (Interface)

* 选区 Store 操作接口

src/store/useSelectionStore.ts

GeminiModelsResponse (Interface)

* Gemini API 响应格式

src/services/modelListService.ts

Core symbols most depended-on inside this repo

src/services/aiService.ts

src/services/modelListService.ts

colorsAreSimilar

called by 13

src/services/imageSplitter.ts

createRectangleSelection

called by 12

src/services/selectionManager.ts

imageToCanvasCoords

called by 11

src/utils/geometry.ts

createError

called by 11

src/services/wechatStandardizationService.ts

Shape

Function 328

Interface 102

Method 35

Class 6

Languages

TypeScript100%

Modules by API surface

src/services/imageSplitter.ts42 symbols

src/types/wechatStandardization.ts24 symbols

src/services/selectionManager.ts22 symbols

src/services/wechatBackgroundRemover.ts21 symbols

src/services/wechatImageProcessor.ts18 symbols

src/services/modelListService.ts17 symbols

src/services/aiSegmentationService.ts17 symbols

src/services/aiService.ts16 symbols

src/components/SelectionToolPanel.tsx16 symbols

src/utils/geometry.ts14 symbols

src/components/SelectionCanvas.tsx14 symbols

src/services/wechatFileService.ts13 symbols

For agents

$ claude mcp add meme-ai-generator \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact