The Revolutionary Digital Canvas for Advanced Visual Prompting with Google's Nano Banana
Canana transforms how you interact with Google's state-of-the-art Nano Banana (Gemini 2.5 Flash Image Preview) through intuitive visual prompting. Draw, annotate, and guide AI with arrows, text, and canvas-based instructions for unprecedented precision and control.
Visual prompting represents the cutting-edge evolution of AI interaction, moving beyond simple text descriptions to sophisticated canvas-based instruction systems. Canana enables you to:
- Draw directly on canvas with arrows, circles, and annotations that Nano Banana understands
- Combine visual cues with natural language for precise editing control
- Use multi-turn conversational editing to refine images iteratively
- Maintain character consistency across multiple transformations
- Blend multiple images with contextual understanding
This approach leverages Google's Nano Banana (officially Gemini 2.5 Flash Image Preview), the world's top-rated image editing model that excels at understanding visual instructions, maintaining lighting consistency, and performing targeted transformations while preserving everything else intact.
Nano Banana isn't just another text-to-image tool—it's a prompt-driven photo editor that provides Photoshop-like control through simple visual instructions:
- Targeted Editing: Edit only what you specify while keeping everything else intact—lighting, perspective, textures, even facial features
- Character Consistency: Maintains subject appearance across multiple images for rich storytelling
- Multi-Image Fusion: Understands and merges multiple input images with contextual awareness
- Real-Time Performance: Often responds in 1-2 seconds, feeling like real-time editing
- SynthID Watermarking: Built-in digital watermarking for AI-generated content
- Model:
gemini-2.5-flash-image-preview - Performance: Top-rated on LMArena benchmarks
- Pricing: $0.039 per image (1290 output tokens)
- Speed: 1-2 second response times
- Availability: Gemini API, Google AI Studio, Vertex AI
- Arrow Annotations: Direct Nano Banana's attention to specific areas
- Bounding Box Markup: Mark regions with rectangles, ellipses, and shapes
- Textual Overlays: Add natural language instructions directly on canvas
- Multi-Layer Annotations: Combine visual cues for complex edits
- Instruction Exclusion: AI automatically removes instruction markup from final output
- Precision Drawing: Brushes, shapes, and freehand tools optimized for AI instruction
- Smart Import System: Drag & drop images with automatic canvas integration
- Multi-Workspace: Organize complex projects across multiple canvases
- Zoom-Aware Export: Export only the current viewport area at any zoom level
- Prompt Templates: Pre-optimized prompts for different editing scenarios:
- 📸 Photorealistic Enhancement: "A photorealistic [shot type] of [subject], [action], set in [environment]. The scene is illuminated by [lighting], creating a [mood] atmosphere"
- 🎨 Style Transfer: Blend multiple images while maintaining composition
- ✏️ Targeted Editing: Remove, add, or modify specific elements
- 🌈 Creative Transformation: Artistic interpretation with consistent lighting
- Multi-Turn Editing: Iterative refinement through conversational prompting
- Context Preservation: Maintains scene coherence across multiple edits
- Local Processing: All canvas data processed locally
- Encrypted API Storage: Secure API key management
- Optimized Requests: Smart batching and compression for Nano Banana API
- Real-Time Feedback: Live processing status with stage-by-stage updates
Your Workflow:
1. Import or create base image on canvas
2. Draw arrow pointing to object to modify
3. Add text annotation: "Change this car to red sports car"
4. Nano Banana edits only the specified object
5. Download result with perfect lighting consistency
Perfect for: Product mockups, object replacement, color changes
Your Workflow:
1. Upload reference image to canvas
2. Use bounding boxes to mark areas for change
3. Add directional arrows for lighting/perspective
4. Annotate with scene description changes
5. Generate transformed composition
Perfect for: Background replacement, scene enhancement, artistic interpretation
Your Workflow:
1. Create character in first canvas
2. Use arrows to highlight key facial features
3. Annotate desired pose/expression changes
4. Generate variations maintaining character likeness
5. Build consistent character library
Perfect for: Storytelling, comic creation, brand mascots
Your Workflow:
1. Import multiple source images
2. Use annotations to specify which elements to combine
3. Add arrows showing desired composition layout
4. Nano Banana intelligently blends with proper lighting
5. Refine through multi-turn editing
Perfect for: Collages, concept visualization, creative compositing
- Node.js 16+ and npm
- Google Gemini API key (Get one here)
- Modern browser with canvas support
# Clone the repository
git clone https://github.com/Neural-Nirvana/canana.git
cd canana
# Install dependencies
npm install
# Start development server
npm start
# Open http://localhost:3000 in your browser- Click the ✨ AI Magic button (rainbow gradient in dock)
- Enter your Google Gemini API key in secure panel
- Draw or import an image on canvas
- Add arrows and text annotations for editing instructions
- Click generate and watch Nano Banana work its magic!
✅ DO: Point arrows at specific objects or areas to edit
✅ DO: Use arrows to indicate lighting direction changes
✅ DO: Combine arrows with descriptive text for clarity
❌ DON'T: Overuse arrows - Nano Banana understands context
✅ DO: Write descriptive paragraphs, not keyword lists
✅ DO: Be specific about edits: "make background a neon diner at night"
✅ DO: Use multi-turn editing - change one thing at a time
❌ DON'T: Try to change everything in a single prompt
✅ DO: Use contrasting colors for instruction markup
✅ DO: Leave space around objects for context understanding
✅ DO: Group related annotations logically
❌ DON'T: Overcrowd the canvas with competing instructions
✅ DO: Trust Nano Banana's lighting consistency algorithms
✅ DO: Use arrows to indicate desired light source direction
✅ DO: Annotate material properties for realistic rendering
❌ DON'T: Over-specify technical details - describe naturally
Canana provides live visual feedback during Nano Banana processing:
- 🎨 Preparing: Canvas analysis and instruction parsing
- 📤 Uploading: Secure API communication with compression
- 🧠 Processing: Nano Banana model inference
- ✨ Generating: Image synthesis and editing
- 🎉 Complete: Final result with instruction markup removed
Nano Banana + Canana automatically optimizes results:
- Instruction Removal: Automatically excludes arrows, text, and UI elements
- Intelligent Cropping: Crops to natural content boundaries
- Lighting Harmonization: Ensures consistent lighting across all elements
- Perspective Correction: Maintains proper spatial relationships
- Canvas Collections: Organize related visual prompting sessions
- Auto-Save: All work automatically preserved with thumbnails
- Export Options: Download individual results or project collections
- Version History: Track iterative improvements through visual prompting
- Concept Artists: Rapid ideation with consistent character development
- UI/UX Designers: Interface mockup enhancement and A/B testing
- Product Designers: Photorealistic product visualization with lighting control
- Photographers: Advanced photo editing with natural language instructions
- Social Media: Eye-catching visuals with brand consistency
- Advertising: Campaign assets with targeted messaging
- E-commerce: Product photography enhancement and variant generation
- Brand Development: Logo iterations and visual identity exploration
- Prototyping: Visual mockups with annotation-driven refinement
- Documentation: Technical diagrams with professional enhancement
- Presentations: Slide graphics with consistent visual themes
- User Research: Visual concepts for user testing and feedback
- React 18: Modern UI with hooks and concurrent rendering
- Fabric.js: Professional canvas manipulation and event handling
- CSS3: Glass morphism effects and smooth animations
- Google GenAI SDK: Official Gemini 2.5 Flash Image Preview API
- Streaming Processing: Real-time generation status updates
- Intelligent Compression: Optimized base64 encoding for API efficiency
- Error Handling: Robust retry logic and graceful degradation
- Local Canvas Processing: Client-side image manipulation
- Smart Caching: Efficient workspace and result storage
- Lazy Loading: Performance-optimized rendering for large projects
- Memory Management: Automatic cleanup for long editing sessions
Help us advance visual prompting technology for Nano Banana and future AI models!
- Enhanced Annotation Tools: More sophisticated visual instruction methods
- Batch Processing: Multiple canvas processing with Nano Banana
- Export Formats: Additional output options for professional workflows
- Accessibility: Improved tools for users with disabilities
# Fork and clone the repository
git clone https://github.com/Neural-Nirvana/canana.git
# Create feature branch
git checkout -b feature/visual-prompting-enhancement
# Install development dependencies
npm install
# Run development server with hot reload
npm start
# Run tests and linting
npm test && npm run lint- Visual Understanding: Interprets complex visual instructions and annotations
- Instruction Following: Processes arrows, shapes, and textual overlays
- Context Preservation: Maintains scene consistency across edits
- Multi-Modal Input: Combines text, images, and visual annotations
- Real-Time Performance: Industry-leading response times for interactive editing
- Rectangle and ellipse bounding boxes
- Directional arrows and pointing indicators
- Freehand scribbles and masks created with Bézier curves
- Text annotations and natural language overlays
- Multi-image composition instructions
- Top-Rated Performance: #1 on LMArena benchmarks
- Consistent Output: Reliable lighting, shadows, and color temperature
- Professional Quality: Suitable for commercial and creative applications
- SynthID Integration: Built-in AI content identification
MIT License - see LICENSE file for full terms.
Note: Usage of Google's Nano Banana model is subject to Google's AI terms of service. Canana is an independent interface tool and is not officially affiliated with Google.
- Google DeepMind: For the revolutionary Nano Banana model
- Visual Prompting Research Community: For advancing annotation-based AI interaction
- Fabric.js Team: For the robust canvas manipulation library
- React Community: For the powerful frontend framework
- Open Source Contributors: For continuous improvement and feedback
- Issues: GitHub Issues
- Documentation: Wiki
- Discussions: GitHub Discussions
- API Keys: Google AI Studio
- Nano Banana Documentation: Google AI Developer Docs
Built for the Future of Visual AI Interaction
Canana - Where Visual Prompting Meets Nano Banana's Intelligence
Transform your creative workflow with the world's most advanced visual prompting canvas, optimized for Google's state-of-the-art Nano Banana AI model.