DOCSEARCHbyAlgolia
Submit Docs

Gemini Image Editing Next.js Quickstart

repository·main·Indexed 19 days ago

https://github.com/google-gemini/gemini-image-editing-nextjs-quickstart

A Next.js application demonstrating text-to-image generation and natural language-based image editing using the gemini-2.0-flash-exp model. Includes guides for local development, Docker deployment, and implementation of multi-modal conversation history using HistoryItem and HistoryPart interfaces.

Tokens
1.3K
Snippets
4
Records
5
Agent score
19%

What's inside gemini-image-editing-nextjs-quickstart

  1. Set up local development

    main

    To run the Next.js application locally, follow these steps:

    1. Configure Environment Variables: Copy the example environment file and add your Google AI Studio API key.

      cp .env.example .env

      In the .env file, set: GEMINI_API_KEY=your_google_api_key

    2. Install and Run: Install the project dependencies and start the development server.

      npm install
npm run dev

    3. Access App: Open http://localhost:3000 in your browser.

    cp .env.example .env
npm install
npm run dev

  2. Deploy using Docker

    main

    You can containerize the application using Docker.

    Build the image:

    docker build -t nextjs-gemini-image-editing .

    Run the container: You must provide the GEMINI_API_KEY via an environment variable or an env file.

    Option 1: Pass the key directly:

    docker run -p 3000:3000 -e GEMINI_API_KEY=your_google_api_key nextjs-gemini-image-editing

    Option 2: Use an environment file:

    docker run -p 3000:3000 --env-file .env nextjs-gemini-image-editing

    After running, access the app at http://localhost:3000.

    docker build -t nextjs-gemini-image-editing .
docker run -p 3000:3000 -e GEMINI_API_KEY=your_google_api_key nextjs-gemini-image-editing

  3. Generate images using the Gemini 2.0 Flash API

    main

    To generate images directly using the Google Generative AI JavaScript SDK, you must use the gemini-2.0-flash-exp model and configure the generationConfig to include "Image" in the responseModalities array. The response contains parts that can be either text or inlineData (base64 encoded image data).

    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...";

  // Set responseModalities to include "Image" so the model can generate
  const model = genAI.getGenerativeModel({
    model: "gemini-2.0-flash-exp",
    generationConfig: {
      responseModalities: ["Text", "Image"]
    }
  });

  try {
    const response = await model.generateContent(contents);
    for (const part of response.response.candidates[0].content.parts) {
      if (part.text) {
        console.log(part.text);
      } else if (part.inlineData) {
        const imageData = part.inlineData.data;
        const buffer = Buffer.from(imageData, "base64");
        fs.writeFileSync("gemini-native-image.png", buffer);
        console.log("Image saved as gemini-native-image.png");
      }
    }
  } catch (error) {
    console.error("Error generating content:", error);
  }
}

  5. Define conversation history with HistoryItem and HistoryPart

    main

    The application manages conversation history using HistoryItem and HistoryPart interfaces. This structure allows for multi-modal interactions involving both text and images.

    Data Structure

    • HistoryItem: Represents a single turn in the conversation.

      • role: Must be either "user" or "model".
      • parts: An array of HistoryPart objects.

    • HistoryPart: Represents a single piece of content within a message.

      • text (optional): A string containing text content.
      • image (optional): A string containing the image content as a data URL (e.g., data:image/png;base64,... or data:image/jpeg;base64,...).

    API Compatibility Notes

    When these structures are processed for the Gemini API:

    1. User messages can include both text and images (sent as inlineData).
    2. Model messages should only contain text parts.
    3. Image conversion: While the application stores images as data URLs in the history, they are converted to base64 for the actual API request.
    export interface HistoryItem {
  role: "user" | "model";
  parts: HistoryPart[];
}

export interface HistoryPart {
  text?: string;
  image?: string;
}