Color by Number
AI-powered color-by-number app using Google Gemini for image generation
nextjsreactopen source
A Next.js application that generates images using Google Gemini AI, converts them into color-by-number templates, and provides interactive coloring.
Features
- Generate images using Google Gemini AI from text prompts
- Automatic conversion to color-by-number templates
- Interactive coloring with color palette
- Checkerboard pattern highlighting for selected colors
- Adjustable difficulty levels (number of colors)
- Export finished artwork
How to Use
- Enter a prompt (e.g., "a cozy forest cabin")
- Click "Generate" to create an image
- Select a color from the palette
- Click numbered regions to color them
- Toggle template view, get hints, or reset
- Export finished artwork
Tech Stack
- Framework: Next.js 15
- React: React 19
- AI: Google Gemini API
- Rendering: Canvas API
- Styling: Tailwind CSS
Installation
bash
git clone https://github.com/jiaweing/color-by-number.git
cd color-by-number
pnpm installCreate .env.local with your Gemini API key:
javascript
GEMINI_API_KEY=your_api_key_hereRun development server:
bash
pnpm devLinks
- GitHub: jiaweing/color-by-number