Gemini Image Gen

What. An image generation and iteration tool I built on Gemini, branded in the app as the "Nano Banana Workshop." I drop, paste, or upload an image and Gemini analyzes it into structured JSON — colors, subject, layout, style. The app auto-generates form controls from that JSON, so I can edit the picture by changing fields, by typing an instruction like "make the background blue," or by editing the raw JSON directly; the right panel switches between Form, JSON, and Influence tabs for this. It then regenerates from the modified properties. An inpainting canvas with brush, eraser, and feathering lets me mask a region and regenerate just that part, and a before/after slider plus a scrollable history let me compare iterations and jump back to any earlier one. In practice that turns a rough pencil sketch into a fully rendered creature, or restyles a photograph into a painterly scene, while keeping the parts I want to keep.

Workspaces in the sidebar keep separate projects apart, and configurations save as presets with per-field selection and private or public visibility; a browser searches the public ones.

Why. Prompt-only image tools make me re-describe the whole picture to change one thing. Turning the image into structured properties makes editing feel like adjusting a scene rather than rerolling a prompt.

How. React 19 + Vite + Tailwind v4 with Zustand and IndexedDB for the client-side image cache, over a Fastify API with PostgreSQL and Drizzle. Text and image models are selected separately. Per-user Gemini API keys are encrypted server-side with AES-256-GCM salted by user ID, and every call proxies through the backend so keys never reach the browser. Auth is a Doubling Technologies SSI SSO popup flow.

Stack: React 19, TypeScript, Vite, Tailwind v4, Fastify, PostgreSQL, Drizzle ORM, Google Gemini API, Docker Compose.

Built Mar–Apr 2026.