Merge pull request #7 from google-gemini/add-gemini-2.5

Add Image creation, editing and composing with Gemini 2.5 Flash Image

Author: philschmid

README.md

@@ -1,20 +1,46 @@
-# Veo 3 Gemini API Quickstart
+# Gemini API Veo 3 & Nano Banana Quickstart
+
+A NextJs quickstart for creating and editing images and videos using Google's latest Gemini API models including [Veo 3](https://ai.google.dev/gemini-api/docs/video), [Imagen 4](https://ai.google.dev/gemini-api/docs/imagen), and [Gemini 2.5 Flash Image aka nano banana](https://ai.google.dev/gemini-api/docs/image-generations). 
+
+<table>
+  <tr>
+    <td align="center">
+      <img src="./public/compose.png" alt="Compose" width="300"/>
+      <br/>
+      <strong>Compose</strong>
+    </td>
+    <td align="center">
+      <img src="./public/edit.png" alt="Edit" width="300"/>
+      <br/>
+      <strong>Edit</strong>
+    </td>
+    <td align="center">
+      <img src="./public/video.png" alt="Video" width="300"/>
+      <br/>
+      <strong>Video</strong>
+    </td>
+  </tr>
+</table>
+
+> [!NOTE]
+> If you want a full studio, consider [Google's Flow](https://labs.google/fx/tools/flow) (a professional environment for Veo/Imagen). Use this repo as a lightweight studio to learn how to build your own UI that generates content with Google's AI models via the Gemini API.
 
-[Veo 3](https://ai.google.dev/gemini-api/docs/video) is Google's state-of-the-art video generation model available in the Gemini API. This repository is a quickstart that demonstrates how to build a simple UI to generate videos with Veo 3, play them, and download the results. It also includes an image + text to video generation using the [Imagen 4](https://ai.google.dev/gemini-api/docs/imagen) model.
+(This is not an official Google product.)
 
-![Example](./public/example.png)
+## Features
 
-> [!NOTE]  
-> If you want a full studio, consider [Google's Flow](https://labs.google/fx/tools/flow) (a professional environment for Veo/Imagen). Use this repo as a lightweight quickstart to learn how to build your own UI that generates videos with Veo 3 via the Gemini API.
+The quickstart provides a unified composer UI with different modes for content creation:
 
-(This is not an official Google product.)
+-   **Create Image**: Generate images from text prompts using **Imagen 4** or **Gemini 2.5 Flash Image**.
+-   **Edit Image**: Edit an image based on a text prompt using **Gemini 2.5 Flash Image**.
+-   **Compose Image**: Combine multiple images with a text prompt to create a new image using **Gemini 2.5 Flash Image**.
+-   **Create Video**: Generate videos from text prompts or an initial image using **Veo 3**.
 
-## Features
+### Quick Actions & UI Features
+- Seamless navigation between modes after generating content
+- Download generated images & videos
+- Cut videos directly in the browser to specific time ranges
 
--   Generate videos from text prompts using the Veo-3 model.
--   Generate videos from images + text prompts using the Imagen 4.0 model or upload a starting image.
--   Play and download generated videos.
--   Cut videos directly in the browser to a specific time range.
 
 ## Getting Started: Development and Local Testing
 
@@ -26,7 +52,7 @@ Follow these steps to get the application running locally for development and te
 -   **`GEMINI_API_KEY`**: The application requires a [GEMINI API key](https://aistudio.google.com/app/apikey). Either create a `.env` file in the project root and add your API key: `GEMINI_API_KEY="YOUR_API_KEY"` or set the environment variable in your system.
 
 > [!WARNING]  
-> Google Veo 3 and Imagen 4 are both part of the Gemini API Paid tier. You will need to be on the paid tier to use these models.
+> Google Veo 3, Imagen 4, and Gemini 2.5 Flash Image are part of the Gemini API Paid tier. You will need to be on the paid tier to use these models.
 
 **2. Install Dependencies:**
 
@@ -46,11 +72,22 @@ Open your browser and navigate to `http://localhost:3000` to see the application
 
 The project is a standard Next.js application with the following key directories:
 
--   `app/`: Contains the main application logic, including the user interface and API routes.
-    -   `api/`: API routes for generating videos and images, and checking operation status.
--   `components/`: Reusable React components used throughout the application.
--   `lib/`: Utility functions and schema definitions.
--   `public/`: Static assets.
+-   `app/`: Contains the main application logic and pages
+    -   `page.tsx`: Main page with the unified composer UI.
+    -   `api/`: API routes for different operations
+        -   `imagen/generate/`: Image generation with Imagen 4
+        -   `gemini/generate/`: Image generation with Gemini 2.5 Flash Image
+        -   `gemini/edit/`: Image editing/composition with Gemini 2.5 Flash Image
+        -   `veo/generate/`: Video generation operations
+        -   `veo/operation/`: Check video generation status
+        -   `veo/download/`: Download generated videos
+-   `components/`: Reusable React components
+    -   `ui/Composer.tsx`: The main unified composer for all interactions.
+    -   `ui/VideoPlayer.tsx`: Video player with trimming
+    -   `ui/ModelSelector.tsx`: Model selection component
+    -   `ui/dropzone.tsx`: Drag-and-drop component for file uploads.
+-   `lib/`: Utility functions and schema definitions
+-   `public/`: Static assets
 
 ## Official Docs and Resources
 
@@ -62,17 +99,25 @@ The project is a standard Next.js application with the following key directories
 
 The application uses the following API routes to interact with the Google models:
 
--   `app/api/veo/generate/route.ts`:  Handles video generation requests. It takes a text prompt as input and initiates a video generation operation with the Veo-3 model.
--   `app/api/veo/operation/route.ts`: Checks the status of a video generation operation.
--   `app/api/veo/download/route.ts`:  Downloads the generated video.
--   `app/api/imagen/generate/route.ts`: Handles image generation requests with the Imagen model.
+### Image APIs
+-   `app/api/imagen/generate/route.ts`: Handles image generation requests with Imagen 4
+-   `app/api/gemini/generate/route.ts`: Handles image generation requests with Gemini 2.5 Flash Image
+-   `app/api/gemini/edit/route.ts`: Handles image editing and composition with Gemini 2.5 Flash (supports multiple images)
+
+### Video APIs
+-   `app/api/veo/generate/route.ts`: Handles video generation requests with Veo 3
+-   `app/api/veo/operation/route.ts`: Checks the status of video generation operations
+-   `app/api/veo/download/route.ts`: Downloads generated videos
 
 ## Technologies Used
 
--   [Next.js](https://nextjs.org/) - React framework for building the user interface.
--   [React](https://reactjs.org/) - JavaScript library for building user interfaces.
--   [Tailwind CSS](https://tailwindcss.com/) - For styling.
--   [Gemini API](https://ai.google.dev/gemini-api/docs) with Veo 3 - For video generation; Imagen - For image generation.
+-   [Next.js](https://nextjs.org/) - React framework for building the user interface
+-   [React](https://reactjs.org/) - JavaScript library for building user interfaces
+-   [Tailwind CSS](https://tailwindcss.com/) - For styling
+-   [Gemini API](https://ai.google.dev/gemini-api/docs) with:
+  - **Veo 3** - For video generation
+  - **Imagen 4** - For high-quality image generation
+  - **Gemini 2.5 Flash** - For fast image generation, editing, and composition
 
 ## Questions and feature requests
 

app/api/gemini/edit/route.ts

@@ -0,0 +1,146 @@
+import { NextResponse } from "next/server";
+import { GoogleGenAI } from "@google/genai";
+
+if (!process.env.GEMINI_API_KEY) {
+  throw new Error("GEMINI_API_KEY environment variable is not set.");
+}
+
+const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY });
+
+export async function POST(req: Request) {
+  try {
+    const contentType = req.headers.get("content-type") || "";
+
+    if (!contentType.includes("multipart/form-data")) {
+      return NextResponse.json(
+        { error: "Expected multipart/form-data" },
+        { status: 400 }
+      );
+    }
+
+    const form = await req.formData();
+    const prompt = (form.get("prompt") as string) || "";
+
+    if (!prompt) {
+      return NextResponse.json({ error: "Missing prompt" }, { status: 400 });
+    }
+
+    // Handle multiple image files
+    const imageFiles = form.getAll("imageFiles");
+    console.log("Received imageFiles from form:", imageFiles.length);
+    console.log(
+      "Image file details:",
+      imageFiles.map((f, i) => ({
+        index: i,
+        name: f instanceof File ? f.name : "not-file",
+        type: f instanceof File ? f.type : typeof f,
+      }))
+    );
+
+    const contents: (
+      | { text: string }
+      | { inlineData: { mimeType: string; data: string } }
+    )[] = [];
+
+    // Add the prompt as text
+    contents.push({ text: prompt });
+
+    // Process each image file
+    console.log("Processing image files...");
+    for (const imageFile of imageFiles) {
+      if (imageFile && imageFile instanceof File) {
+        console.log(
+          `Processing file: ${imageFile.name}, size: ${imageFile.size}, type: ${imageFile.type}`
+        );
+        const buf = await imageFile.arrayBuffer();
+        const b64 = Buffer.from(buf).toString("base64");
+        contents.push({
+          inlineData: {
+            mimeType: imageFile.type || "image/png",
+            data: b64,
+          },
+        });
+      }
+    }
+    console.log("Total contents after processing:", contents.length);
+
+    // Handle single image (backward compatibility)
+    const singleImageFile = form.get("imageFile");
+    if (
+      singleImageFile &&
+      singleImageFile instanceof File &&
+      contents.length === 1
+    ) {
+      const buf = await singleImageFile.arrayBuffer();
+      const b64 = Buffer.from(buf).toString("base64");
+      contents.push({
+        inlineData: {
+          mimeType: singleImageFile.type || "image/png",
+          data: b64,
+        },
+      });
+    }
+
+    // Handle base64 image (for generated images)
+    const imageBase64 = (form.get("imageBase64") as string) || undefined;
+    const imageMimeType = (form.get("imageMimeType") as string) || undefined;
+
+    if (imageBase64 && contents.length === 1) {
+      const cleaned = imageBase64.includes(",")
+        ? imageBase64.split(",")[1]
+        : imageBase64;
+      contents.push({
+        inlineData: {
+          mimeType: imageMimeType || "image/png",
+          data: cleaned,
+        },
+      });
+    }
+
+    if (contents.length < 2) {
+      return NextResponse.json(
+        { error: "No images provided for editing" },
+        { status: 400 }
+      );
+    }
+
+    const response = await ai.models.generateContent({
+      model: "gemini-2.5-flash-image-preview",
+      contents: contents,
+    });
+
+    // Process the response to extract the image
+    let imageData = null;
+    let responseMimeType = "image/png";
+
+    for (const part of response.candidates[0].content.parts) {
+      if (part.text) {
+        console.log("Generated text:", part.text);
+      } else if (part.inlineData) {
+        imageData = part.inlineData.data;
+        responseMimeType = part.inlineData.mimeType || "image/png";
+        break;
+      }
+    }
+
+    if (!imageData) {
+      return NextResponse.json(
+        { error: "No image generated" },
+        { status: 500 }
+      );
+    }
+
+    return NextResponse.json({
+      image: {
+        imageBytes: imageData,
+        mimeType: responseMimeType,
+      },
+    });
+  } catch (error) {
+    console.error("Error editing image with Gemini:", error);
+    return NextResponse.json(
+      { error: "Failed to edit image" },
+      { status: 500 }
+    );
+  }
+}

app/api/gemini/generate/route.ts

@@ -0,0 +1,55 @@
+import { NextResponse } from "next/server";
+import { GoogleGenAI } from "@google/genai";
+
+if (!process.env.GEMINI_API_KEY) {
+  throw new Error("GEMINI_API_KEY environment variable is not set.");
+}
+
+const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY });
+
+export async function POST(req: Request) {
+  try {
+    const body = await req.json();
+    const prompt = (body?.prompt as string) || "";
+
+    if (!prompt) {
+      return NextResponse.json({ error: "Missing prompt" }, { status: 400 });
+    }
+
+    const response = await ai.models.generateContent({
+      model: "gemini-2.5-flash-image-preview",
+      contents: prompt,
+    });
+
+    // Process the response to extract the image
+    let imageData = null;
+    let imageMimeType = "image/png";
+
+    for (const part of response.candidates[0].content.parts) {
+      if (part.text) {
+        console.log("Generated text:", part.text);
+      } else if (part.inlineData) {
+        imageData = part.inlineData.data;
+        imageMimeType = part.inlineData.mimeType || "image/png";
+        break;
+      }
+    }
+
+    if (!imageData) {
+      return NextResponse.json({ error: "No image generated" }, { status: 500 });
+    }
+
+    return NextResponse.json({
+      image: {
+        imageBytes: imageData,
+        mimeType: imageMimeType,
+      },
+    });
+  } catch (error) {
+    console.error("Error generating image with Gemini:", error);
+    return NextResponse.json(
+      { error: "Failed to generate image" },
+      { status: 500 }
+    );
+  }
+}

app/api/veo/generate/route.ts

@@ -21,7 +21,7 @@ export async function POST(req: Request) {
     const form = await req.formData();
 
     const prompt = (form.get("prompt") as string) || "";
-    const model = (form.get("model") as string) || "veo-3.0-generate-preview";
+    const model = (form.get("model") as string) || "veo-3.0-generate-001";
     const negativePrompt = (form.get("negativePrompt") as string) || undefined;
     const aspectRatio = (form.get("aspectRatio") as string) || undefined;
 

app/globals.css

@@ -129,6 +129,12 @@
   }
 }
 
+@keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
 
 body {
   color: var(--foreground);

app/layout.tsx

@@ -17,7 +17,7 @@ const sourceCodePro = Source_Code_Pro({
 });
 
 export const metadata: Metadata = {
-  title: "Veo 3 Studio",
+  title: "Gemini API Studio",
   description: "A quickstart for the Gemini API with Veo 3",
   icons: {
     icon: "/imgs/gemini_icon.svg",