https://github.com/warpdotdev/nano-banana-editor
🍌 AI-Powered Iterative Image Editor using Google's Gemini 2.5 Flash Image API (Nano Banana). Upload images, edit with natural language, and navigate through your editing history with click-to-revert functionality.
https://github.com/warpdotdev/nano-banana-editor
Last synced: 9 months ago
JSON representation
🍌 AI-Powered Iterative Image Editor using Google's Gemini 2.5 Flash Image API (Nano Banana). Upload images, edit with natural language, and navigate through your editing history with click-to-revert functionality.
- Host: GitHub
- URL: https://github.com/warpdotdev/nano-banana-editor
- Owner: warpdotdev
- Created: 2025-09-05T22:37:44.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-09-05T22:38:00.000Z (10 months ago)
- Last Synced: 2025-09-16T00:50:02.820Z (9 months ago)
- Language: TypeScript
- Homepage: https://nano-banana-editor.vercel.app
- Size: 113 KB
- Stars: 8
- Watchers: 0
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🍌 Nano Banana Editor
**An AI-Powered Iterative Image Editor using Google's Gemini 2.5 Flash Image API**
## ✨ Features
- **🖼️ Smart Image Upload**: Drag & drop or click to upload thumbnails
- **🤖 AI-Powered Editing**: Uses Google's Gemini 2.5 Flash Image ("Nano Banana") API for intelligent image modifications
- **🔄 Iterative Workflow**: Each generated image becomes the new base for further editing
- **📚 Visual History**: Bottom timeline showing all previous versions with click-to-revert
- **⚡ Real-time Processing**: Async API calls with loading states and progress feedback
- **🎨 Modern UI**: Clean, responsive interface built with Tailwind CSS
- **🔒 Secure**: API keys managed through Google Cloud Secret Manager
## 🚀 How It Works
1. **Upload** a thumbnail image
2. **Describe** your desired changes in natural language
3. **Process** with AI - Nano Banana generates your edited image
4. **Iterate** - the result becomes your new base image for further edits
5. **Navigate** through your editing history and revert to any previous version
### Example Editing Session:
- Original: Photo of a person
- Edit 1: "make the hat black" → generates image with black hat
- Edit 2: "add sunglasses" → generates image with black hat + sunglasses
- Edit 3: "change background to sunset" → generates final image with all modifications
- **Click any thumbnail** to revert to that version and continue editing from there
## 🛠️ Tech Stack
- **Framework**: Next.js 15.5.2 with App Router
- **Language**: TypeScript
- **Styling**: Tailwind CSS
- **AI API**: Google Gemini 2.5 Flash Image ([@google/genai](https://www.npmjs.com/package/@google/genai))
- **Image Processing**: HTML5 Canvas + FileReader API
- **Deployment**: Vercel-ready
## 🏃♂️ Quick Start
### Prerequisites
- Node.js 18+
- Google Cloud account with Generative AI API access
- Gemini API key
### Installation
```bash
# Clone the repository
git clone https://github.com/warpdotdev/nano-banana-editor.git
cd nano-banana-editor
# Install dependencies
npm install
# Set up environment variables
cp .env.example .env.local
# Add your Google Generative AI API key to .env.local
```
### Environment Setup
Create a `.env.local` file:
```env
# Get your API key from: https://ai.google.dev/gemini-api/docs/api-key
GOOGLE_GENERATIVE_AI_API_KEY=your_api_key_here
```
### Development
```bash
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) to start editing images!
## 🏗️ Architecture
### Frontend (`/src/app/page.tsx`)
- React hooks for state management (image history, current image, loading states)
- File upload handling with drag & drop support
- Real-time form validation and submission
- Responsive image display with history timeline
### Backend (`/src/app/api/process-image/route.ts`)
- Next.js API route handling image processing requests
- Integration with Google Gemini 2.5 Flash Image API
- Base64 image encoding/decoding for API communication
- Error handling and response formatting
### Key Features Implementation
**Iterative Editing Workflow**:
```typescript
// After successful API response:
setSelectedImage(result.generatedImage); // Replace current image
setImageHistory(prev => [...prev, previousImage]); // Save to history
setInstructions(""); // Clear for next edit
```
**History Management**:
```typescript
// Click to revert truncates history (like git reset)
const revertToHistoryImage = (historyItem, index) => {
setImageHistory(prev => prev.slice(0, index)); // Truncate
setSelectedImage(historyItem.image); // Revert
};
```
## 🎯 API Integration
The app integrates with Google's Gemini 2.5 Flash Image API ("Nano Banana"):
```typescript
const response = await genAI.models.generateContent({
model: 'gemini-2.5-flash-image-preview',
contents: [{
parts: [
{ text: instructions },
{ inlineData: { mimeType: file.type, data: base64Data } }
]
}]
});
```
## 🐛 Debugging Features
This project includes debugging capabilities using the Puppeteer MCP server:
- Live page inspection for UI bugs
- Real-time CSS debugging
- Image rendering diagnostics
- Console log monitoring
## 🌟 Recent Fixes
- **History Thumbnails**: Fixed black square rendering by correcting CSS overlay transparency
- **Stack Behavior**: Fixed history to properly truncate instead of append when reverting
- **Image Handling**: Improved data URL processing with regular `![]()
` tags
## 🚀 Deployment
### Vercel (Recommended)
```bash
npm run build
vercel --prod
```
Don't forget to add your `GOOGLE_GENERATIVE_AI_API_KEY` in the Vercel environment variables!
### Other Platforms
The app is a standard Next.js application and can be deployed to any platform that supports Node.js.
## 🤝 Contributing
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## 📝 License
MIT License - see [LICENSE](LICENSE) file for details.
## 🙏 Acknowledgments
- Google AI team for the amazing Gemini 2.5 Flash Image API
- Next.js team for the excellent framework
- Tailwind CSS for the utility-first styling approach
---
**Built with ❤️ by the Warp team**