GitHub - aaronkwhite/nanobanana-studio-web: A lightweight, self-hosted image generation client for Google's Gemini 3 (Nano Banana) image generation Batch API.

Nanobanana Studio
A lightweight, self-hosted batch image generator powered by Google's Gemini API.
Generate and transform images at 50% reduced cost using the Batch API.

Features

Text-to-Image - Generate images from text prompts
Image-to-Image - Transform existing images with AI (style transfer, enhancement, edits)
Batch Processing - Queue multiple requests processed asynchronously
BYOK - Bring your own Gemini API key, stored locally
Output Control - Choose 1K, 2K, or 4K resolution with aspect ratio options
Temperature Control - Fine-tune creativity vs consistency
Dark Mode - Full light/dark theme support
Local Storage - SQLite database, no cloud dependencies
Cost Tracking - See estimated costs per generation

Example: Image-to-Image Background Swap

Original (Text-to-Image):

A banana in a space suit floating in zero gravity inside a spacecraft, looking out a window at Earth. Soft blue light from the planet, peaceful and awe-inspiring.

Transformed (Image-to-Image, temperature 0):

Make it so the subject is staring at Sugar Rush from the movie Wreck It Ralph instead of Earth.

More Examples: Aspect Ratios & Temperature

3:4 · Temp 1	16:9 · Temp 2	16:9 · Temp 1

A determined banana lifting a tiny barbell at the gym, wearing a sweatband...	A happy banana wearing a fluffy pink tutu, standing in a ballet pose...	A banana curled up in an oversized armchair reading a tiny book, wearing round glasses...

Prerequisites

Node.js 18+
Gemini API Key with access to image generation

Installation

git clone https://github.com/aaronkwhite/nanobanana-studio.git
cd nanobanana-studio
npm install
npm run dev

Open http://localhost:3000 and add your Gemini API key in Settings.

Usage

Text-to-Image

Select the Text to Image tab
Enter your prompt describing the image
Adjust output size (1K/2K/4K), aspect ratio, and temperature
Press Shift + Enter or click Generate

Image-to-Image

Select the Image to Image tab
Drag & drop or click to upload images
Enter a transformation prompt (e.g., "convert to watercolor painting")
Adjust settings and generate

Batch Queue

Jobs are processed asynchronously via Gemini's Batch API. Processing typically takes 10-30 minutes depending on queue depth. The UI will update automatically when results are ready.

CLI Utilities

# List all batch jobs from Gemini API
npm run batches:list

# Download results from a specific batch
npm run batches:download <batch-name>

# Backup the database
npm run db:backup [name]

# Restore from backup
npm run db:restore [name]

Tech Stack

Next.js 15 - React framework with App Router
React 19 - UI library
Tailwind CSS 4 - Styling
SQLite - Local database via better-sqlite3
Gemini API - Image generation via @google/genai

Project Structure

├── src/
│   ├── app/           # Next.js pages and API routes
│   ├── components/    # React components
│   └── lib/           # Database and Gemini utilities
├── scripts/           # CLI tools for batch management
├── data/              # Database, uploads, results (gitignored)
└── public/            # Static assets

Environment Variables

Variable	Description
`GEMINI_API_KEY`	Your Google Gemini API key

Cost

Gemini Batch API pricing (as of Dec 2024):

1K: ~$0.02/image
2K: ~$0.07/image
4K: ~$0.12/image

Batch API provides 50% cost reduction compared to real-time API calls.

About

Support the project

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

License

MIT