A web-based sketching application that allows users to draw or sketch ideas on a canvas and transform them into generated images using Google's Gemini AI models. Sketches are sent along with text prompts to the API for image generation or editing, enabling creative workflows like concept visualization or style transfer.
- Interactive Canvas: Draw with customizable brush sizes (1-50px), colors (preset and custom), and an eraser tool. Supports mouse and touch input for desktop and mobile devices.
- History Management: Undo and redo actions with a full state history to revert or advance canvas changes.
- AI Image Generation: Integrate sketches with text prompts to generate or edit images using Gemini models.
- Model Selection: Choose between Gemini 2.5 Flash Image (free tier friendly) or Gemini 3 Pro Image Preview (may require paid access).
- Theme Toggle: Switch between light and dark modes for better usability.
- Privacy-Focused: API keys are stored only in session memory and cleared on page reload; no data is sent to external servers beyond the Gemini API.
- Responsive Design: Optimized for various screen sizes, with a scalable canvas (960x540 resolution, adjustable viewport).
- Node.js (version 14 or higher) for local development.
- A Google Gemini API key (obtain from Google AI Studio).
- Basic familiarity with React and npm/yarn for setup.
-
Clone the repository:
git clone https://github.com/PRITHIVSAKTHIUR/Nano-Banana-Pro-Sketch-Board.git cd Nano-Banana-Pro-Sketch-Board -
Install dependencies:
npm installor
yarn install -
Start the development server:
npm startor
yarn start
The app will open at http://localhost:3000.
-
Drawing on Canvas:
- Use the brush tool to sketch ideas. Adjust size via the brush menu.
- Select colors from presets or use the custom color picker.
- Activate the eraser for corrections.
- Use Undo/Redo buttons for navigation through drawing history.
- Clear the canvas at any time to start fresh.
-
AI Generation:
- Enter a descriptive prompt in the input field (e.g., "Transform this sketch into a realistic banana in a tropical setting").
- On first use, provide your Gemini API key in the modal (it will be prompted if not set).
- Submit to send the current canvas state (as a PNG) and prompt to the selected Gemini model.
- The generated image replaces the canvas background, allowing further drawing or iterations.
-
Model Switching:
- Open the model menu to toggle between Gemini 2.5 Flash Image (faster, lower cost) and Gemini 3 Pro Image Preview (higher quality, potential billing).
-
Theme and Info:
- Toggle dark mode via the sun/moon icon.
- View app details via the info button.
- API keys are required for generation and are handled client-side only.
- Enter via the secure modal; keys are not persisted beyond the session.
- For Gemini 3 Pro, ensure your key is from a Google Cloud project with billing enabled if rate limits are hit.
- Errors (e.g., 403 Forbidden) are displayed with guidance; check console for details.
| Model Name | Description | Access Notes |
|---|---|---|
| gemini-2.5-flash-image | Fast generation with image input support | Free tier available |
| gemini-3-pro-image-preview | Advanced quality for complex prompts | May require paid API access |
- Canvas Scaling Issues: Ensure the browser zoom is at 100% for accurate touch/mouse coordinates.
- API Errors:
- 403: Verify API key permissions or switch to Flash model.
- Network: Check internet connection; retries are manual.
- Touch Devices: Prevent default scrolling by enabling touch events (handled automatically).
- Build for Production: Run
npm run buildfor a static deployable bundle.
Contributions are welcome! Fork the repo, create a feature branch, and submit a pull request with details on changes.
This project is licensed under the Apache License 2.0. See the LICENSE file for details.
Built by Prithiv Sakthi. For inquiries, reach out via the repository issues.