Gemini 2.0 Flash Image Generation and Editing

Nextjs quickstart for to generating and editing images with Google Gemini 2.0 Flash. It allows users to generate images from text prompts or edit existing images through natural language instructions, maintaining conversation context for iterative refinements. Try out the hosted demo at Hugging Face Spaces.

https://github.com/user-attachments/assets/8ffa5ee3-1b06-46a9-8b5e-761edb0e00c3

Get your GEMINI_API_KEY key here and start building.

How It Works:

1. Create Images: Generate images from text prompts using Gemini 2.0 Flash
2. Edit Images: Upload an image and provide instructions to modify it
3. Conversation History: Maintain context through a conversation with the AI for iterative refinements
4. Download Results: Save your generated or edited images

Basic request

For developers who want to call the Gemini API directly, you can use the Google Generative AI JavaScript SDK:

const { GoogleGenerativeAI } = require("@google/generative-ai");
const fs = require("fs");

const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);

async function generateImage() {
  const contents =
    "Hi, can you create a 3d rendered image of a pig " +
    "with wings and a top hat flying over a happy " +
    "futuristic scifi city with lots of greenery?";

  // Set responseModalities to include "Image" so the model can generate
  const model = genAI.getGenerativeModel({
    model: "gemini-2.0-flash-exp\