Turn Imagination into Art. > A futuristic, AI-powered web application that generates personalized coloring books for children using Google Gemini Vision technology.
[cite_start]ColorCraft AI is a serverless, single-page application designed to empower parents to create unique, custom coloring pages for their children[cite: 3]. [cite_start]By leveraging the multimodal capabilities of the Google Gemini API, the app can analyze uploaded photos to create cartoonized line-art characters or generate scenes from text prompts[cite: 5, 25].
[cite_start]The project features a "Cyberpunk/SaaS" aesthetic with a modern Glassmorphism UI[cite: 11, 13], fully optimized for performance and privacy.
- 🤖 AI-Powered Generation: Utilizes Google Gemini to create intricate coloring outlines based on custom themes.
- [cite_start]📸 Photo-to-Coloring Page: Upload a child's photo to generate a personalized character in a coloring-friendly vector style[cite: 32].
- [cite_start]🌍 Multilingual Support: Fully localized interface supporting English, Turkish, Hindi, Spanish, and Chinese[cite: 20].
- [cite_start]🎯 Age-Adaptive Complexity: Smart prompting adjusts the complexity of the drawing based on age groups (3, 5, 7, 10+ years)[cite: 22].
- 🔒 Privacy-First Architecture: Operates on a "Bring Your Own Key" (BYOK) model. [cite_start]API keys and images are processed locally in the browser and never stored on a server[cite: 16, 54].
- [cite_start]📄 PDF Export: Download generated collections as a print-ready PDF[cite: 35].
- [cite_start]Core: HTML5, TypeScript (Strict Mode) [cite: 7]
- [cite_start]Styling: Modern CSS3 (Variables, Flexbox/Grid, Glassmorphism) [cite: 7, 41]
- [cite_start]AI Integration: Google Gemini API (Multimodal/Vision) [cite: 9]
- [cite_start]Build Tool: Vite [cite: 9]
- [cite_start]PDF Generation: jsPDF / html2pdf [cite: 10]
To run this project locally, follow these steps:
- Node.js (v16 or higher)
- npm or yarn
-
Clone the repository:
git clone [https://github.com/WillByers/colorcraft-ai.git](https://github.com/WillByers/colorcraft-ai.git) cd colorcraft-ai -
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Open your browser and navigate to
http://localhost:5173.
- Enter API Key: Upon loading, provide your Google Gemini API Key. (Don't worry, it's stored safely in your browser's LocalStorage) [cite_start][cite: 16].
- [cite_start]Select Settings: Choose the target age group, language, and page count[cite: 21].
- Upload or Describe:
- Option A: Upload a photo of your child for a personalized character.
- [cite_start]Option B: Type a creative theme (e.g., "Astronaut cat playing soccer")[cite: 23].
- Generate: Click "Generate" and watch the AI craft your pages.
- Download: Export your coloring book as a PDF.
ColorCraft AI is designed with user privacy as a priority. The application runs entirely on the client side. [cite_start]Your personal API keys and uploaded photos are never sent to our servers; they are sent directly to Google's Gemini API for processing and are not retained[cite: 16, 54].
Note: You need a valid Google Gemini API Key to generate coloring pages.
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
İf the link doesn't work here is the URL:https://willbyers1.github.io/ColorCraft-AI/
Created by Mert Batu Bülbül
💻 Computer Engineering Freshman (1st Year Student) 💻