FlashBanana

AI image generation app powered by Google Gemini. Three-panel UI with prompt engineering, multiple models, and a local gallery.

Features

• Five AI models: Gemini 2.5 Flash (fast, 1024px), Gemini 3 Pro (high quality, 4096px), Imagen 4, Imagen 4 Fast, Imagen 4 Ultra (multi-image)
• 8 creative categories: Photo, Art, Digital, Cinematic, Illustration, Infographic, Diagram, Freestyle — each with 6 sub-category chips
• Smart auto-configuration: Selecting a category auto-sets the recommended model, aspect ratio, and resolution
• Resolution control: 1K/2K/4K output sizes for Gemini models
• Prompt enhancement: AI-powered prompt rewriting via Gemini 2.0 Flash, with auto-enhance checkbox and review step
• Enhanced prompt review: Separate editable textarea for enhanced prompts, dismiss to use original
• Surprise me: One-click random prompt generation per category (8 curated prompts each)
• Contextual tips: Model-aware tips that change with selected category, showing recommended model badge
• Style recommendations: Sub-category-specific model and aspect ratio suggestions (informational, not auto-applied)
• Prompt writing guide: Collapsible tips accordion with photography, style, and lighting advice
• Prompt health meter: Real-time quality feedback with color-coded progress bar
• Negative prompts: Always-visible negative prompt textarea in settings
• 10 aspect ratios: 1:1, 16:9, 9:16, 4:3, 3:4, 3:2, 2:3, 4:5, 5:4, 21:9
• Gallery: Local history with localStorage persistence, favorites, individual delete, generation time display
• Generation metadata: Card showing model, time, aspect ratio, resolution, dimensions, and enhancement status
• Session stats: Running count of images generated this session
• Lightbox: Full-screen image viewer with keyboard arrow navigation, download, and prompt overlay
• Image actions: Click to open lightbox, download and copy to clipboard on hover
• Dark/light mode: Emerald-accented theme with next-themes
• Keyboard shortcuts: Cmd/Ctrl+Enter (generate), Cmd/Ctrl+E (enhance), Cmd/Ctrl+Shift+E (enhance & generate), Escape (dismiss), ? (shortcuts dialog), arrow keys (lightbox)
• Loading animations: Pulsing indicator with bouncing dots and elapsed timer during generation
• Error handling: Auto-retry on rate limits (429) with exponential backoff, user-friendly error messages
• Responsive panels: Collapsible settings and gallery panels with tooltips
• Accessibility: ARIA roles (listbox, option), aria-selected states, keyboard navigation throughout

Setup

# Install dependencies
npm install

# Add your Gemini API key (get one at https://aistudio.google.com/apikey)
echo "GOOGLE_API_KEY=your_key_here" > .env.local

# Start dev server
npm run dev

Open http://localhost:3000.

Tech Stack

• Next.js 15 (App Router, TypeScript strict, Turbopack)
• shadcn/ui + Tailwind CSS v4
• framer-motion (animations & transitions)
• @google/genai SDK (server-side only)
• next-themes, sonner, lucide-react

Architecture

src/
├── app/
│   ├── api/
│   │   ├── generate/route.ts   # Image generation (Gemini + Imagen 4)
│   │   └── enhance/route.ts    # Prompt enhancement (Gemini 2.0 Flash)
│   ├── layout.tsx              # Root layout with providers
│   ├── page.tsx                # Main page orchestrator
│   └── globals.css             # Theme + animations
├── components/
│   ├── ui/                     # shadcn/ui primitives (19 components)
│   ├── layout/                 # header, three-panel-layout
│   ├── features/               # category-selector, settings-panel, prompt-panel,
│   │                           # prompt-health, output-panel, gallery-panel, lightbox
│   └── providers/              # theme-provider, tooltip-provider, toaster
├── config/                     # models, categories, aspect-ratios, resolutions, surprise-prompts
├── hooks/                      # use-generation, use-gallery, use-mode, use-mod-key, use-prompt-health
├── lib/                        # gemini client (retry + error parsing), utils
└── types/                      # TypeScript API types

Models

Model	ID	Resolution	Multi-image	Provider
Gemini 2.5 Flash	gemini-2.5-flash-image	Up to 1024px	No	gemini
Gemini 3 Pro	gemini-3-pro-image-preview	Up to 4096px	No	gemini
Imagen 4	imagen-4.0-generate-001	-	Up to 4	imagen
Imagen 4 Fast	imagen-4.0-fast-generate-001	-	Up to 4	imagen
Imagen 4 Ultra	imagen-4.0-ultra-generate-001	-	Up to 4	imagen

Categories

Category	Sub-categories	Recommended Model
Photo	Portrait, Product, Landscape, Street, Macro, Aerial	Gemini 3 Pro
Art	Oil Painting, Watercolor, Sketch, Abstract, Pop Art, Impressionist	Gemini 2.5 Flash
Digital	3D Render, Pixel Art, Vector, Concept Art, Isometric, Low Poly	Gemini 2.5 Flash
Cinematic	Film Noir, Sci-Fi, Fantasy, Horror, Vintage, Documentary	Gemini 3 Pro
Illustration	Anime, Comic Book, Children's, Editorial, Storybook, Manga	Gemini 2.5 Flash
Infographic	Data Viz, Timeline, Comparison, Flowchart, Statistics, Hierarchy	Gemini 3 Pro
Diagram	Architecture, Flowchart, Mind Map, Wireframe, Network, UML	Gemini 2.5 Flash
Freestyle	(none)	(user choice)

API Notes

• Gemini models use generateContent with responseModalities: ["TEXT", "IMAGE"]
• Imagen 4 uses generateImages with numberOfImages config
• Resolution (1K/2K/4K) passed as imageConfig.imageSize for Gemini models only
• Negative prompts supported for Imagen models only
• Aspect ratio passed via imageConfig.aspectRatio for Gemini, config.aspectRatio for Imagen
• Error parsing extracts clean messages from Gemini SDK JSON error blobs
• Exponential backoff retry on 429/500/503, max 8 retries, up to 30s delay

Development

npm run dev          # Dev server (port 3000)
npm run build        # Production build
npm run lint         # ESLint
npx tsc --noEmit     # Type check
npx prettier --write . # Format all

Environment

• .env.local — GOOGLE_API_KEY (gitignored, never commit)
• Node.js 20+ required
• Get a free API key at Google AI Studio

License

MIT