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.

demo.mov

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",
    generationConfig: {
      responseModalities: ["Text", "Image"]
    }
  });

  try {
    const response = await model.generateContent(contents);
    for (const part of response.response.candidates[0].content.parts) {
      // Based on the part type, either show the text or save the image
      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);
  }
}

Features

• 🎨 Text-to-image generation with Gemini 2.0 Flash
• 🖌️ Image editing through natural language instructions
• 💬 Conversation history for context-aware image refinements
• 📱 Responsive UI built with Next.js and shadcn/ui
• 🔄 Seamless workflow between creation and editing modes
• ⚡ Uses Gemini 2.0 Flash Javascript SDK

Getting Started

Local Development

First, set up your environment variables:

cp .env.example .env

Add your Google AI Studio API key to the .env file:

Get your GEMINI_API_KEY key here.

GEMINI_API_KEY=your_google_api_key

Then, install dependencies and run the development server:

npm install
npm run dev

Open http://localhost:3000 with your browser to see the application.

Deployment

Vercel

Configuração de Variáveis de Ambiente na Vercel:

Para usar a funcionalidade completa de geração de imagens, configure as seguintes variáveis de ambiente no painel da Vercel:

1. GEMINI_API_KEY - Chave da API do Gemini (obtenha em https://ai.google.dev/gemini-api/docs/api-key)
2. GOOGLE_CLOUD_PROJECT - ID do seu projeto Google Cloud
3. GOOGLE_CLOUD_LOCATION - Região do Vertex AI (ex: us-central1, us-east1, europe-west1)

Nota sobre Autenticação do Vertex AI:

Para usar o Vertex AI na Vercel, você também precisa configurar a autenticação:

• Opção 1 (Recomendado): Use Service Account Key

  1. Crie uma Service Account no Google Cloud Console
  2. Baixe a chave JSON
  3. Adicione como variável de ambiente GOOGLE_APPLICATION_CREDENTIALS_JSON (conteúdo do JSON) na Vercel
  4. O código deve criar o arquivo temporariamente (ou use uma biblioteca que aceita JSON diretamente)

• Opção 2: Use Application Default Credentials (ADC) - requer configuração adicional no ambiente de build

Docker

1. Build the Docker image:

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

2. Run the container with your Google API key:

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

Or using an environment file:

# Run container with env file
docker run -p 3000:3000 --env-file .env nextjs-gemini-image-editing

Open http://localhost:3000 with your browser to see the application.

Technologies Used

• Next.js - React framework for the web application
• Google Gemini 2.0 Flash - AI model for image generation and editing
• shadcn/ui - Re-usable components built using Radix UI and Tailwind CSS

License

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.