Upload 5 files

GEMINI_2_MODEL_DRIFT_NOTE.md

@@ -0,0 +1,84 @@
+# Gemini 2.0 image generation drift note for future AI maintainers
+
+This note exists to prevent accidental regressions when editing this Space.
+
+## Do not try to revive Gemini 2.0 Experimental with code
+
+Some Gemini 2.0 image-generation model IDs were experimental or preview model IDs. Google can shut those models down server-side. Once a model is shut down, changing JavaScript code or reverting a package cannot make that endpoint available again.
+
+Primary source:
+- Gemini API deprecations: https://ai.google.dev/gemini-api/docs/deprecations
+- Gemini API release notes: https://ai.google.dev/gemini-api/docs/changelog
+
+Google's deprecations page says that once a model is shut down, it is completely turned off and the endpoint is no longer available.
+
+Known affected image-generation IDs include, or have included:
+
+- `gemini-2.0-flash-exp`
+- `gemini-2.0-flash-exp-image-generation`
+- `gemini-2.0-flash-preview-image-generation`
+
+Keep them only as first-try compatibility options. Do not assume they will work.
+
+## Use the current Google Gen AI SDK, not the old JS SDK
+
+The old package:
+
+```txt
+@google/generative-ai
+```
+
+is the older Google AI JavaScript SDK. Do not restore it just because old examples use `GoogleGenerativeAI`.
+
+The current package for JavaScript/TypeScript Gemini API examples is:
+
+```txt
+@google/genai
+```
+
+Primary source:
+- Gemini API libraries: https://ai.google.dev/gemini-api/docs/libraries
+
+## Expected strategy for this Space
+
+The app should behave like this:
+
+1. Let the user select a preferred model.
+2. Default to `gemini-2.0-flash-exp` because the original request asked for Gemini 2.0 Experimental.
+3. If that model fails or returns no image, try current Gemini image models.
+4. Show an informational notice when fallback happens.
+5. Do not treat fallback success as a fatal error.
+
+Recommended fallback candidates, subject to current Google documentation:
+
+```txt
+gemini-2.0-flash-exp
+gemini-2.0-flash-preview-image-generation
+gemini-3.1-flash-image-preview
+gemini-3-pro-image-preview
+gemini-2.5-flash-image
+```
+
+## Response shape warning
+
+Do not mix response formats from different libraries.
+
+With `@google/genai`, read images from response parts such as:
+
+```ts
+response.candidates?.[0]?.content?.parts
+part.inlineData
+part.text
+```
+
+Do not rewrite this route using old snippets that expect a different SDK response shape unless you also update dependencies and test the build.
+
+## Important environment variable
+
+The Space needs a secret:
+
+```txt
+GEMINI_API_KEY
+```
+
+Missing `GEMINI_API_KEY` is a runtime/API error, not a Docker build error.

app/api/image/route.ts

@@ -1,142 +1,193 @@
 import { NextRequest, NextResponse } from "next/server";
-import { createGoogleGenerativeAI } from "@ai-sdk/google";
-import { generateText } from "ai";
+import { GoogleGenAI, Modality } from "@google/genai";
+import { HistoryItem, HistoryPart } from "@/lib/types";
 
+// AI-MAINTAINER NOTE:
+// Do not "fix" this by reverting to @google/generative-ai.
+// Google marks that JS library as legacy/not actively maintained.
+// Gemini 2.0 image models may be shut down server-side; code cannot revive them.
+// Keep Gemini 2.0 as selectable first try, then fall back to current image models.
+// Primary source: https://ai.google.dev/gemini-api/docs/deprecations
+
+// Initialize the Google Gen AI client with your API key
+const GEMINI_API_KEY = process.env.GEMINI_API_KEY || "";
+const genAI = new GoogleGenAI({ apiKey: GEMINI_API_KEY });
+
+// Define the model ID for Gemini 2.0 Flash experimental
 const MODEL_ID = "gemini-2.0-flash-exp";
+
 const MODEL_IDS = [
-  MODEL_ID,
-  "gemini-2.5-flash-image",
+  "gemini-2.0-flash-exp",
+  "gemini-2.0-flash-preview-image-generation",
   "gemini-3.1-flash-image-preview",
   "gemini-3-pro-image-preview",
+  "gemini-2.5-flash-image",
 ];
 
-interface ImageHistoryPart {
-  text?: string;
-  image?: string;
+// Define interface for the formatted history item
+interface FormattedHistoryItem {
+  role: "user" | "model";
+  parts: Array<{
+    text?: string;
+    inlineData?: { data: string; mimeType: string };
+  }>;
 }
 
-interface HistoryMessage {
-  role: "user" | "model" | "assistant";
-  parts: ImageHistoryPart[];
+interface ImageResult {
+  image: string | null;
+  description: string | null;
+  model: string;
 }
 
-interface RequestBody {
-  prompt: string;
-  image?: string;
-  history?: HistoryMessage[];
-  model?: string;
+interface AttemptResult {
+  model: string;
+  error: string;
 }
 
-function getModelCandidates(model?: string) {
-  const selectedModel = model && MODEL_IDS.includes(model) ? model : MODEL_ID;
-  return [selectedModel, ...MODEL_IDS.filter((id) => id !== selectedModel)];
-}
+function getModelIds(selectedModel?: string) {
+  const preferredModel = selectedModel && MODEL_IDS.includes(selectedModel)
+    ? selectedModel
+    : MODEL_ID;
 
-function getMimeType(dataUrl: string) {
-  return dataUrl.match(/^data:([^;]+);base64,/)?.[1] ?? "image/png";
+  return [
+    preferredModel,
+    ...MODEL_IDS.filter((modelId) => modelId !== preferredModel),
+  ];
 }
 
-function getBase64Data(dataUrl: string) {
-  return dataUrl.includes(",") ? dataUrl.split(",")[1] : dataUrl;
-}
-
-function toDataUrl(data: unknown, mediaType = "image/png") {
-  if (typeof data === "string") {
-    if (data.startsWith("data:")) {
-      return data;
-    }
-    if (data.startsWith("http://") || data.startsWith("https://")) {
-      return data;
-    }
-    return `data:${mediaType};base64,${data}`;
+function imageToInlineData(image: string) {
+  if (!image.startsWith("data:")) {
+    throw new Error("Invalid image data URL format");
   }
 
-  if (data instanceof Uint8Array) {
-    return `data:${mediaType};base64,${Buffer.from(data).toString("base64")}`;
+  const imageParts = image.split(",");
+  if (imageParts.length < 2) {
+    throw new Error("Invalid image data URL format");
   }
 
-  if (data instanceof ArrayBuffer) {
-    return `data:${mediaType};base64,${Buffer.from(data).toString("base64")}`;
-  }
-
-  return null;
+  return {
+    data: imageParts[1],
+    mimeType: image.includes("image/png") ? "image/png" : "image/jpeg",
+  };
 }
 
-function extractImage(result: any) {
-  for (const file of result.files ?? []) {
-    const mediaType = file.mediaType ?? file.mimeType ?? "image/png";
-
-    if (!mediaType.startsWith("image/")) {
-      continue;
-    }
+function formatHistory(history?: HistoryItem[]) {
+  return history && history.length > 0
+    ? history
+        .map((item: HistoryItem) => {
+          return {
+            role: item.role,
+            parts: item.parts
+              .map((part: HistoryPart) => {
+                if (part.text) {
+                  return { text: part.text };
+                }
+                if (part.image && item.role === "user") {
+                  return { inlineData: imageToInlineData(part.image) };
+                }
+                return { text: "" };
+              })
+              .filter((part) => Object.keys(part).length > 0), // Remove empty parts
+          };
+        })
+        .filter((item: FormattedHistoryItem) => item.parts.length > 0) // Remove items with no parts
+    : [];
+}
 
-    const image =
-      toDataUrl(file.base64, mediaType) ??
-      toDataUrl(file.data, mediaType) ??
-      toDataUrl(file.uint8Array, mediaType) ??
-      toDataUrl(file.url, mediaType);
+async function generateWithModel(
+  model: string,
+  prompt: string,
+  inputImage: string | null,
+  history?: HistoryItem[]
+): Promise<ImageResult> {
+  const contents = formatHistory(history);
+  const messageParts = [];
+
+  // Add the text prompt
+  messageParts.push({ text: prompt });
+
+  // Add the image if provided
+  if (inputImage) {
+    // For image editing
+    console.log("Processing image edit request");
+
+    const inlineData = imageToInlineData(inputImage);
+    console.log(
+      "Base64 image length:",
+      inlineData.data.length,
+      "MIME type:",
+      inlineData.mimeType
+    );
 
-    if (image) {
-      return image;
-    }
+    // Add the image to message parts
+    messageParts.push({ inlineData });
   }
 
-  for (const part of result.parts ?? []) {
-    const mediaType = part.image?.mediaType ?? part.image?.mimeType ?? "image/png";
-    const image =
-      toDataUrl(part.image?.data, mediaType) ??
-      toDataUrl(part.image?.base64, mediaType) ??
-      toDataUrl(part.image?.url, mediaType);
-
-    if (part.type === "output_image" && image) {
-      return image;
-    }
-
-    if ((part.type === "image" || part.type === "file") && mediaType.startsWith("image/") && image) {
-      return image;
+  contents.push({ role: "user", parts: messageParts });
+
+  // Send the message to the model
+  console.log("Sending message with", messageParts.length, "parts", "to", model);
+  const response = await genAI.models.generateContent({
+    model,
+    contents,
+    config: {
+      temperature: 1,
+      topP: 0.95,
+      topK: 40,
+      responseModalities: [Modality.TEXT, Modality.IMAGE],
+    },
+  });
+
+  let textResponse = null;
+  let imageData = null;
+  let mimeType = "image/png";
+
+  // Process the response
+  if (response.candidates && response.candidates.length > 0) {
+    const parts = response.candidates[0].content?.parts || [];
+    console.log("Number of parts in response:", parts.length);
+
+    for (const part of parts) {
+      if (part.inlineData) {
+        // Get the image data
+        imageData = part.inlineData.data || null;
+        mimeType = part.inlineData.mimeType || "image/png";
+        console.log(
+          "Image data received, length:",
+          imageData?.length || 0,
+          "MIME type:",
+          mimeType
+        );
+      } else if (part.text) {
+        // Store the text
+        textResponse = part.text;
+        console.log(
+          "Text response received:",
+          textResponse.substring(0, 50) + "..."
+        );
+      }
     }
   }
 
-  return null;
-}
-
-function formatHistory(history?: HistoryMessage[]) {
-  return (
-    history
-      ?.map((msg) => {
-        const role = msg.role === "user" ? "user" : "assistant";
-        const parts = msg.parts
-          .map((p) => {
-            if (p.text) {
-              return { type: "text", text: p.text };
-            }
-
-            if (p.image && role === "user") {
-              return {
-                type: "image",
-                image: getBase64Data(p.image),
-                mediaType: getMimeType(p.image),
-              };
-            }
-
-            return null;
-          })
-          .filter(Boolean);
-
-        if (parts.length === 0) {
-          return null;
-        }
-
-        return { role, content: parts };
-      })
-      .filter(Boolean) ?? []
-  );
+  return {
+    image: imageData ? `data:${mimeType};base64,${imageData}` : null,
+    description: textResponse,
+    model,
+  };
 }
 
 export async function POST(req: NextRequest) {
   try {
-    const body: RequestBody = await req.json();
-    const { prompt, image: inputImage, history, model } = body;
+    if (!GEMINI_API_KEY) {
+      return NextResponse.json(
+        { error: "GEMINI_API_KEY is not configured" },
+        { status: 500 }
+      );
+    }
+
+    // Parse JSON request instead of FormData
+    const requestData = await req.json();
+    const { prompt, image: inputImage, history, model: selectedModel } = requestData;
 
     if (!prompt) {
       return NextResponse.json(
@@ -145,88 +196,60 @@ export async function POST(req: NextRequest) {
       );
     }
 
-    const google = createGoogleGenerativeAI({
-      apiKey: process.env.GEMINI_API_KEY ?? process.env.GOOGLE_GENERATIVE_AI_API_KEY,
-    });
-    const parts: any[] = [{ type: "text", text: prompt }];
+    const attemptedModels: AttemptResult[] = [];
+    const modelIds = getModelIds(selectedModel);
 
-    if (inputImage) {
-      if (!inputImage.startsWith("data:")) {
-        return NextResponse.json(
-          { error: "Invalid image data URL format" },
-          { status: 400 }
-        );
-      }
-
-      parts.push({
-        type: "image",
-        image: getBase64Data(inputImage),
-        mediaType: getMimeType(inputImage),
-      });
-    }
-
-    const formattedHistory = formatHistory(history);
-    const modelCandidates = getModelCandidates(model);
-    const attemptedModels: { model: string; error?: string }[] = [];
-
-    for (const modelId of modelCandidates) {
+    for (const modelId of modelIds) {
       try {
-        const result = await generateText({
-          model: google(modelId),
-          messages: [...formattedHistory, { role: "user", content: parts }] as any,
-          providerOptions: {
-            google: {
-              responseModalities: ["TEXT", "IMAGE"],
-            },
-          },
-        });
-
-        const image = extractImage(result);
+        const result = await generateWithModel(
+          modelId,
+          prompt,
+          inputImage || null,
+          history
+        );
 
-        if (!image) {
-          attemptedModels.push({ model: modelId, error: "No image returned" });
-          continue;
+        if (!result.image) {
+          throw new Error("No image returned from API");
         }
 
-        const fallback = modelId !== modelCandidates[0];
+        const fallback = modelId !== modelIds[0];
 
+        // Return just the base64 image and description as JSON
         return NextResponse.json({
-          description: result.text ?? null,
-          image,
-          model: modelId,
+          image: result.image,
+          description: result.description,
+          model: result.model,
+          preferredModel: modelIds[0],
           fallback,
           attemptedModels,
           notice: fallback
             ? {
                 type: "info",
-                message: `${modelCandidates[0]} did not return a usable image. The result was generated with ${modelId} instead.`,
+                message: `${modelIds[0]} is unavailable or did not return an image. Generated with ${modelId} instead.`,
               }
             : null,
         });
-      } catch (err) {
-        attemptedModels.push({
-          model: modelId,
-          error: err instanceof Error ? err.message : "Unknown error",
-        });
+      } catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        console.error(`Error generating image with ${modelId}:`, error);
+        attemptedModels.push({ model: modelId, error: message });
       }
     }
 
     return NextResponse.json(
       {
         error: "Failed to generate image",
-        details: attemptedModels.map((item) => `${item.model}: ${item.error}`).join("\n"),
+        details: attemptedModels.map((attempt) => `${attempt.model}: ${attempt.error}`).join(" | "),
         attemptedModels,
       },
       { status: 500 }
     );
-  } catch (err) {
-    const message =
-      err instanceof Error ? err.message : "Unknown error";
-
+  } catch (error) {
+    console.error("Error generating image:", error);
     return NextResponse.json(
       {
         error: "Failed to generate image",
-        details: message,
+        details: error instanceof Error ? error.message : String(error),
       },
       { status: 500 }
     );

app/page.tsx

@@ -3,17 +3,10 @@ import { useState } from "react";
 import { ImageUpload } from "@/components/ImageUpload";
 import { ImagePromptInput } from "@/components/ImagePromptInput";
 import { ImageResultDisplay } from "@/components/ImageResultDisplay";
-import { ImageIcon, Wand2, ExternalLink } from "lucide-react";
+import { ImageIcon, Wand2, ExternalLink, Info } from "lucide-react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { HistoryItem } from "@/lib/types";
 
-const MODEL_OPTIONS = [
-  "gemini-2.0-flash-exp",
-  "gemini-2.5-flash-image",
-  "gemini-3.1-flash-image-preview",
-  "gemini-3-pro-image-preview",
-];
-
 export default function Home() {
   const [image, setImage] = useState<string | null>(null);
   const [generatedImage, setGeneratedImage] = useState<string | null>(null);
@@ -21,8 +14,8 @@ export default function Home() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [notice, setNotice] = useState<string | null>(null);
+  const [model, setModel] = useState("gemini-2.0-flash-exp");
   const [history, setHistory] = useState<HistoryItem[]>([]);
-  const [selectedModel, setSelectedModel] = useState(MODEL_OPTIONS[0]);
 
   const handleImageSelect = (imageData: string) => {
     setImage(imageData || null);
@@ -42,7 +35,7 @@ export default function Home() {
         prompt,
         image: imageToEdit,
         history: history.length > 0 ? history : undefined,
-        model: selectedModel,
+        model,
       };
 
       const response = await fetch("/api/image", {
@@ -142,8 +135,9 @@ export default function Home() {
           )}
 
           {notice && (
-            <div className="p-4 mb-4 text-sm text-blue-700 bg-blue-100 rounded-lg">
-              {notice}
+            <div className="p-4 mb-4 text-sm text-blue-700 bg-blue-100 rounded-lg flex items-start gap-2">
+              <Info className="h-4 w-4 mt-0.5 shrink-0" />
+              <span>{notice}</span>
             </div>
           )}
 
@@ -153,16 +147,18 @@ export default function Home() {
             </label>
             <select
               id="model-select"
-              value={selectedModel}
-              onChange={(event) => setSelectedModel(event.target.value)}
+              value={model}
+              onChange={(event) => setModel(event.target.value)}
+              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
               disabled={loading}
-              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
             >
-              {MODEL_OPTIONS.map((model) => (
-                <option key={model} value={model}>
-                  {model}
-                </option>
-              ))}
+              <option value="gemini-2.0-flash-exp">gemini-2.0-flash-exp</option>
+              <option value="gemini-2.0-flash-preview-image-generation">
+                gemini-2.0-flash-preview-image-generation
+              </option>
+              <option value="gemini-3.1-flash-image-preview">gemini-3.1-flash-image-preview</option>
+              <option value="gemini-3-pro-image-preview">gemini-3-pro-image-preview</option>
+              <option value="gemini-2.5-flash-image">gemini-2.5-flash-image</option>
             </select>
           </div>
 

package.json

@@ -1,44 +1,40 @@
 {
-  "name": "nextjs-gemini-2-0-pdf-structured-data",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev --turbopack",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "@ai-sdk/google": "^3.0.67",
-    "@google-cloud/vertexai": "^1.11.0",
-    "@google/genai": "^0.6.1",
-    "@google/generative-ai": "^0.24.1",
-    "@radix-ui/react-dialog": "^1.1.6",
-    "@radix-ui/react-popover": "^1.1.6",
-    "@radix-ui/react-slot": "^1.1.2",
-    "@wojtekmaj/react-hooks": "^1.22.0",
-    "ai": "^6.0.174",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^0.475.0",
-    "next": "^15.2.4",
-    "next-themes": "^0.4.4",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-dropzone": "^14.3.8",
-    "tailwind-merge": "^3.0.1",
-    "tailwindcss-animate": "^1.0.7"
-  },
-  "devDependencies": {
-    "@eslint/eslintrc": "^3",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^9",
-    "eslint-config-next": "15.1.0",
-    "postcss": "^8",
-    "prettier-eslint": "^16.3.0",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5"
-  }
+    "name": "nextjs-gemini-2-0-pdf-structured-data",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "dev": "next dev --turbopack",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint"
+    },
+    "dependencies": {
+        "@google/genai": "^2.0.0",
+        "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-popover": "^1.1.6",
+        "@radix-ui/react-slot": "^1.1.2",
+        "@wojtekmaj/react-hooks": "^1.22.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "lucide-react": "^0.475.0",
+        "next": "15.1.0",
+        "next-themes": "^0.4.4",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "react-dropzone": "^14.3.8",
+        "tailwind-merge": "^3.0.1",
+        "tailwindcss-animate": "^1.0.7"
+    },
+    "devDependencies": {
+        "@eslint/eslintrc": "^3",
+        "@types/node": "^20",
+        "@types/react": "^19",
+        "@types/react-dom": "^19",
+        "eslint": "^9",
+        "eslint-config-next": "15.1.0",
+        "postcss": "^8",
+        "prettier-eslint": "^16.3.0",
+        "tailwindcss": "^3.4.1",
+        "typescript": "^5"
+    }
 }