From 3b2c11a821655d062f3ee2eac164152d6e389325 Mon Sep 17 00:00:00 2001
From: DellaBitta <drsanta@google.com>
Date: Tue, 14 Apr 2026 10:25:23 -0400
Subject: [PATCH 1/3] Imagen -> Nano Banana

---
 ai/ai-react-app/src/App.tsx                   |   4 +-
 .../src/components/Common/PromptInput.tsx     |   2 -
 .../src/components/Layout/LeftSidebar.tsx     |   2 +-
 .../src/components/Layout/MainLayout.tsx      |  25 +--
 .../src/components/Layout/RightSidebar.tsx    | 180 ++++++------------
 .../src/services/firebaseAIService.ts         |  17 +-
 ai/ai-react-app/src/views/ImagenView.tsx      | 147 --------------
 ...w.module.css => NanoBananaView.module.css} |   0
 ai/ai-react-app/src/views/NanoBananaView.tsx  | 177 +++++++++++++++++
 9 files changed, 259 insertions(+), 295 deletions(-)
 delete mode 100644 ai/ai-react-app/src/views/ImagenView.tsx
 rename ai/ai-react-app/src/views/{ImagenView.module.css => NanoBananaView.module.css} (100%)
 create mode 100644 ai/ai-react-app/src/views/NanoBananaView.tsx

diff --git a/ai/ai-react-app/src/App.tsx b/ai/ai-react-app/src/App.tsx
index 48052c9a6..c65680c1f 100644
--- a/ai/ai-react-app/src/App.tsx
+++ b/ai/ai-react-app/src/App.tsx
@@ -2,10 +2,10 @@ import { useEffect, useState } from "react";
 import MainLayout from "./components/Layout/MainLayout";
 
 // Defines the primary modes or views available in the application.
-export type AppMode = "chat" | "imagenGen" | "live";
+export type AppMode = "chat" | "nanobanana" | "live";
 
 function App() {
-  // State to manage which main view ('chat' or 'imagenGen') is currently active.
+  // State to manage which main view ('chat' or 'nanobanana') is currently active.
   const [activeMode, setActiveMode] = useState<AppMode>("chat");
 
   useEffect(() => {
diff --git a/ai/ai-react-app/src/components/Common/PromptInput.tsx b/ai/ai-react-app/src/components/Common/PromptInput.tsx
index 93bfc9d6a..b454efbc8 100644
--- a/ai/ai-react-app/src/components/Common/PromptInput.tsx
+++ b/ai/ai-react-app/src/components/Common/PromptInput.tsx
@@ -6,7 +6,6 @@ import {
   CountTokensResponse,
   Part,
   getGenerativeModel,
-  ImagenModelParams,
 } from "firebase/ai";
 import { fileToGenerativePart } from "../../utils/fileUtils";
 import { AppMode } from "../../App";
@@ -23,7 +22,6 @@ interface PromptInputProps {
   activeMode: AppMode;
   aiInstance: AI;
   currentParams?: ModelParams;
-  currentImagenParams?: ImagenModelParams;
   selectedFile: File | null;
 }
 
diff --git a/ai/ai-react-app/src/components/Layout/LeftSidebar.tsx b/ai/ai-react-app/src/components/Layout/LeftSidebar.tsx
index 07b6d8b30..06a1d209d 100644
--- a/ai/ai-react-app/src/components/Layout/LeftSidebar.tsx
+++ b/ai/ai-react-app/src/components/Layout/LeftSidebar.tsx
@@ -40,7 +40,7 @@ const LeftSidebar: React.FC<LeftSidebarProps> = ({
   // Define the available modes and their display names
   const modes: { id: AppMode; label: string }[] = [
     { id: "chat", label: "Chat" },
-    { id: "imagenGen", label: "Imagen Generation" },
+    { id: "nanobanana", label: "Nano Banana" },
     { id: "live", label: "Live Conversation" },
   ];
 
diff --git a/ai/ai-react-app/src/components/Layout/MainLayout.tsx b/ai/ai-react-app/src/components/Layout/MainLayout.tsx
index a72ad13ab..c33e49080 100644
--- a/ai/ai-react-app/src/components/Layout/MainLayout.tsx
+++ b/ai/ai-react-app/src/components/Layout/MainLayout.tsx
@@ -3,24 +3,23 @@ import TopBar from "./TopBar";
 import LeftSidebar from "./LeftSidebar";
 import RightSidebar from "./RightSidebar";
 import ChatView from "../../views/ChatView";
-import ImagenView from "../../views/ImagenView";
+import NanoBananaView from "../../views/NanoBananaView";
 import LiveView from "../../views/LiveView";
 import { AppMode } from "../../App";
 import {
   UsageMetadata,
   ModelParams,
-  ImagenModelParams,
   BackendType,
   AI,
   VertexAIBackend,
   GoogleAIBackend,
   getAI,
+  ResponseModality,
 } from "firebase/ai";
 import {
   AVAILABLE_GENERATIVE_MODELS,
-  AVAILABLE_IMAGEN_MODELS,
+  AVAILABLE_NANO_BANANA_MODELS,
   defaultGenerativeParams,
-  defaultImagenParams,
 } from "../../services/firebaseAIService";
 import styles from "./MainLayout.module.css";
 import { getApp } from "firebase/app";
@@ -46,9 +45,11 @@ const MainLayout: React.FC<MainLayoutProps> = ({
     model: AVAILABLE_GENERATIVE_MODELS[0],
     ...defaultGenerativeParams,
   });
-  const [imagenParams, setImagenParams] = useState<ImagenModelParams>({
-    model: AVAILABLE_IMAGEN_MODELS[0],
-    ...defaultImagenParams,
+  const [nanoBananaParams, setNanoBananaParams] = useState<ModelParams>({
+    model: AVAILABLE_NANO_BANANA_MODELS[0],
+    generationConfig: {
+      responseModalities: [ResponseModality.TEXT, ResponseModality.IMAGE],
+    },
   });
 
   const [usageMetadata, setUsageMetadata] = useState<UsageMetadata | null>(
@@ -82,7 +83,7 @@ const MainLayout: React.FC<MainLayoutProps> = ({
   }, [activeMode]);
 
   useEffect(() => {
-    const validModes: AppMode[] = ["chat", "imagenGen", "live"];
+    const validModes: AppMode[] = ["chat", "nanobanana", "live"];
     if (!validModes.includes(activeMode)) {
       console.warn(`Invalid activeMode "${activeMode}". Resetting to "chat".`);
       setActiveMode("chat");
@@ -109,9 +110,9 @@ const MainLayout: React.FC<MainLayoutProps> = ({
             activeMode={activeMode}
           />
         );
-      case "imagenGen":
+      case "nanobanana":
         return (
-          <ImagenView aiInstance={activeAI} currentParams={imagenParams} />
+          <NanoBananaView aiInstance={activeAI} currentParams={nanoBananaParams} />
         );
       case "live":
         return (
@@ -152,8 +153,8 @@ const MainLayout: React.FC<MainLayoutProps> = ({
             activeMode={activeMode}
             generativeParams={generativeParams}
             setGenerativeParams={setGenerativeParams}
-            imagenParams={imagenParams}
-            setImagenParams={setImagenParams}
+            nanoBananaParams={nanoBananaParams}
+            setNanoBananaParams={setNanoBananaParams}
           />
         </div>
       </div>
diff --git a/ai/ai-react-app/src/components/Layout/RightSidebar.tsx b/ai/ai-react-app/src/components/Layout/RightSidebar.tsx
index 9e703ee35..09368311f 100644
--- a/ai/ai-react-app/src/components/Layout/RightSidebar.tsx
+++ b/ai/ai-react-app/src/components/Layout/RightSidebar.tsx
@@ -3,19 +3,17 @@ import { AppMode } from "../../App";
 import styles from "./RightSidebar.module.css";
 import {
   AVAILABLE_GENERATIVE_MODELS,
-  AVAILABLE_IMAGEN_MODELS,
+  AVAILABLE_NANO_BANANA_MODELS,
   defaultFunctionCallingTool,
   defaultGoogleSearchTool,
 } from "../../services/firebaseAIService";
 import {
   ModelParams,
-  ImagenModelParams,
   HarmCategory,
   HarmBlockThreshold,
   FunctionCallingMode,
-  ImagenSafetyFilterLevel,
-  ImagenPersonFilterLevel,
   UsageMetadata,
+  ResponseModality,
 } from "firebase/ai";
 
 interface RightSidebarProps {
@@ -23,8 +21,8 @@ interface RightSidebarProps {
   activeMode: AppMode;
   generativeParams: ModelParams;
   setGenerativeParams: React.Dispatch<React.SetStateAction<ModelParams>>;
-  imagenParams: ImagenModelParams;
-  setImagenParams: React.Dispatch<React.SetStateAction<ImagenModelParams>>;
+  nanoBananaParams: ModelParams;
+  setNanoBananaParams: React.Dispatch<React.SetStateAction<ModelParams>>;
 }
 
 const RightSidebar: React.FC<RightSidebarProps> = ({
@@ -32,8 +30,8 @@ const RightSidebar: React.FC<RightSidebarProps> = ({
   activeMode,
   generativeParams,
   setGenerativeParams,
-  imagenParams,
-  setImagenParams,
+  nanoBananaParams,
+  setNanoBananaParams,
 }) => {
   const handleModelParamsUpdate = (
     updateFn: (prevState: ModelParams) => ModelParams,
@@ -41,10 +39,10 @@ const RightSidebar: React.FC<RightSidebarProps> = ({
     setGenerativeParams((prevState) => updateFn(prevState));
   };
 
-  const handleImagenModelParamsUpdate = (
-    updateFn: (prevState: ImagenModelParams) => ImagenModelParams,
+  const handleNanoBananaModelParamsUpdate = (
+    updateFn: (prevState: ModelParams) => ModelParams,
   ) => {
-    setImagenParams((prevState) => updateFn(prevState));
+    setNanoBananaParams((prevState) => updateFn(prevState));
   };
 
   const getThresholdForCategory = (
@@ -129,9 +127,9 @@ const RightSidebar: React.FC<RightSidebarProps> = ({
         if (checked) {
           // Turn ON JSON
           nextState.generationConfig.responseMimeType = "application/json";
-          nextState.generationConfig.responseSchema = undefined; // Use a default schema
 
           // Turn OFF Function Calling by clearing its related fields
+          nextState.generationConfig.responseSchema = undefined;
           nextState.tools = undefined;
           nextState.toolConfig = undefined;
         } else {
@@ -163,6 +161,7 @@ const RightSidebar: React.FC<RightSidebarProps> = ({
         if (checked) {
           // Turn ON Google Search Grounding
           nextState.tools = [defaultGoogleSearchTool];
+          nextState.generationConfig.responseMimeType = undefined;
 
           // Turn OFF JSON mode and Function Calling
           nextState.generationConfig.responseMimeType = undefined;
@@ -173,57 +172,10 @@ const RightSidebar: React.FC<RightSidebarProps> = ({
           nextState.tools = undefined;
         }
       }
-      console.log("[RightSidebar] Updated generative params state:", nextState);
       return nextState;
     });
   };
 
-  const handleImagenModelChange = (
-    event: React.ChangeEvent<HTMLSelectElement>,
-  ) => {
-    const newModel = event.target.value;
-    handleImagenModelParamsUpdate((prev: ImagenModelParams) => ({
-      ...prev,
-      model: newModel,
-    }));
-  };
-  const handleImagenSamplesChange = (
-    event: React.ChangeEvent<HTMLInputElement>,
-  ) => {
-    const newCount = parseInt(event.target.value, 10);
-    handleImagenModelParamsUpdate((prev: ImagenModelParams) => ({
-      ...prev,
-      generationConfig: { ...prev.generationConfig, numberOfImages: newCount },
-    }));
-  };
-  const handleImagenNegativePromptChange = (
-    event: React.ChangeEvent<HTMLTextAreaElement>,
-  ) => {
-    const newPrompt = event.target.value || undefined;
-    handleImagenModelParamsUpdate((prev: ImagenModelParams) => ({
-      ...prev,
-      generationConfig: { ...prev.generationConfig, negativePrompt: newPrompt },
-    }));
-  };
-  const handleImagenSafetyChange = (
-    event: React.ChangeEvent<HTMLSelectElement>,
-  ) => {
-    const newLevel = event.target.value as ImagenSafetyFilterLevel;
-    handleImagenModelParamsUpdate((prev: ImagenModelParams) => ({
-      ...prev,
-      safetySettings: { ...prev.safetySettings, safetyFilterLevel: newLevel },
-    }));
-  };
-  const handleImagenPersonChange = (
-    event: React.ChangeEvent<HTMLSelectElement>,
-  ) => {
-    const newLevel = event.target.value as ImagenPersonFilterLevel;
-    handleImagenModelParamsUpdate((prev: ImagenModelParams) => ({
-      ...prev,
-      safetySettings: { ...prev.safetySettings, personFilterLevel: newLevel },
-    }));
-  };
-
   // Derive UI state from config
   const isStructuredOutputActive =
     generativeParams.generationConfig?.responseMimeType === "application/json";
@@ -439,79 +391,69 @@ const RightSidebar: React.FC<RightSidebarProps> = ({
         </>
       )}
 
-      {/* Imagen Settings */}
-      {activeMode === "imagenGen" && (
+      {/* Nano Banana Settings */}
+      {activeMode === "nanobanana" && (
         <div>
-          <h5 className={styles.subSectionTitle}>Imagen Settings</h5>
+          <h5 className={styles.subSectionTitle}>Nano Banana Settings</h5>
           <div className={styles.controlGroup}>
             <label htmlFor="imagen-model-select">Model</label>
             <select
               id="imagen-model-select"
-              value={imagenParams.model}
-              onChange={handleImagenModelChange}
+              value={nanoBananaParams.model}
+              onChange={(e) => handleNanoBananaModelParamsUpdate((prev) => ({ ...prev, model: e.target.value }))}
             >
-              {AVAILABLE_IMAGEN_MODELS.map((modelName) => (
+              {AVAILABLE_NANO_BANANA_MODELS.map((modelName) => (
                 <option key={modelName} value={modelName}>
                   {modelName}
                 </option>
               ))}
             </select>
           </div>
+
           <div className={styles.controlGroup}>
-            <label htmlFor="imagen-samples">Number of Images</label>
-            <input
-              type="number"
-              id="imagen-samples"
-              min="1"
-              max="4"
-              step="1"
-              value={imagenParams.generationConfig?.numberOfImages ?? 1}
-              onChange={handleImagenSamplesChange}
-            />
-          </div>
-          <div className={styles.controlGroup}>
-            <label htmlFor="imagen-negative-prompt">Negative Prompt</label>
-            <textarea
-              id="imagen-negative-prompt"
-              rows={2}
-              value={imagenParams.generationConfig?.negativePrompt || ""}
-              onChange={handleImagenNegativePromptChange}
-              className={styles.textAreaInput}
-            />
-          </div>
-          <div className={styles.controlGroup}>
-            <label htmlFor="imagen-safety-select">Safety Filter Level</label>
-            <select
-              id="imagen-safety-select"
-              value={imagenParams.safetySettings?.safetyFilterLevel || ""}
-              onChange={handleImagenSafetyChange}
-            >
-              <option value="" disabled>
-                Select Level
-              </option>
-              {Object.values(ImagenSafetyFilterLevel).map((level) => (
-                <option key={level} value={level}>
-                  {level.replace(/_/g, " ")}
-                </option>
-              ))}
-            </select>
-          </div>
-          <div className={styles.controlGroup}>
-            <label htmlFor="imagen-person-select">Person Filter Level</label>
-            <select
-              id="imagen-person-select"
-              value={imagenParams.safetySettings?.personFilterLevel || ""}
-              onChange={handleImagenPersonChange}
-            >
-              <option value="" disabled>
-                Select Level
-              </option>
-              {Object.values(ImagenPersonFilterLevel).map((level) => (
-                <option key={level} value={level}>
-                  {level.replace(/_/g, " ")}
-                </option>
-              ))}
-            </select>
+            <label>Response Modalities</label>
+            <div style={{ display: 'flex', gap: '10px', marginTop: '5px' }}>
+              <label style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+                <input
+                  type="checkbox"
+                  checked={((nanoBananaParams.generationConfig as any)?.responseModalities || [ResponseModality.TEXT]).includes(ResponseModality.TEXT)}
+                  onChange={(e) => {
+                    handleNanoBananaModelParamsUpdate((prev) => {
+                      const currentModalities = (prev.generationConfig as any)?.responseModalities || [ResponseModality.TEXT];
+                      let newModalities = [...currentModalities];
+                      if (e.target.checked) {
+                        if (!newModalities.includes(ResponseModality.TEXT)) newModalities.push(ResponseModality.TEXT);
+                      } else {
+                        newModalities = newModalities.filter((m) => m !== ResponseModality.TEXT);
+                      }
+                      if (newModalities.length === 0) return prev;
+                      return { ...prev, generationConfig: { ...prev.generationConfig, responseModalities: newModalities } };
+                    });
+                  }}
+                />
+                Text
+              </label>
+              <label style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+                <input
+                  type="checkbox"
+                  checked={((nanoBananaParams.generationConfig as any)?.responseModalities || []).includes(ResponseModality.IMAGE)}
+                  onChange={(e) => {
+                    handleNanoBananaModelParamsUpdate((prev) => {
+                      const currentModalities = (prev.generationConfig as any)?.responseModalities || [ResponseModality.TEXT];
+                      let newModalities = [...currentModalities];
+                      if (e.target.checked) {
+                        if (!newModalities.includes(ResponseModality.IMAGE)) newModalities.push(ResponseModality.IMAGE);
+                      } else {
+                        newModalities = newModalities.filter((m) => m !== ResponseModality.IMAGE);
+                      }
+                      if (newModalities.length === 0) return prev;
+                      return { ...prev, generationConfig: { ...prev.generationConfig, responseModalities: newModalities } };
+                    });
+                  }}
+                />
+                Image
+              </label>
+            </div>
           </div>
         </div>
       )}
diff --git a/ai/ai-react-app/src/services/firebaseAIService.ts b/ai/ai-react-app/src/services/firebaseAIService.ts
index 9784bd484..5a7e22746 100644
--- a/ai/ai-react-app/src/services/firebaseAIService.ts
+++ b/ai/ai-react-app/src/services/firebaseAIService.ts
@@ -9,7 +9,6 @@ import {
   CountTokensResponse,
   GenerativeModel,
   ModelParams,
-  ImagenModelParams,
   FunctionCall,
   GoogleSearchTool,
   BackendType,
@@ -23,10 +22,10 @@ export const AVAILABLE_GENERATIVE_MODELS = [
   "gemini-2.0-flash-exp",
   "gemini-2.5-flash"
 ];
-export const AVAILABLE_IMAGEN_MODELS = [
-  "imagen-4.0-generate-001",
-  "imagen-4.0-fast-generate-001",
-  "imagen-4.0-ultra-generate-001"
+export const AVAILABLE_NANO_BANANA_MODELS = [
+  "gemini-3-pro-image-preview",
+  "gemini-3.1-flash-image-preview",
+  "gemini-2.5-flash-image",
 ];
 export const LIVE_MODELS = new Map<BackendType, string>([
   [BackendType.GOOGLE_AI, 'gemini-2.5-flash-native-audio-preview-09-2025'],
@@ -98,13 +97,7 @@ export const defaultGenerativeParams: Omit<ModelParams, "model"> = {
   // tools, toolConfig, systemInstruction default to undefined
 };
 
-export const defaultImagenParams: Omit<ImagenModelParams, "model"> = {
-  // Model name selected in UI
-  generationConfig: {
-    numberOfImages: 1,
-  },
-  // Default all safety settings to undefined
-};
+
 
 /**
  * Mock function call
diff --git a/ai/ai-react-app/src/views/ImagenView.tsx b/ai/ai-react-app/src/views/ImagenView.tsx
deleted file mode 100644
index 46845ab32..000000000
--- a/ai/ai-react-app/src/views/ImagenView.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import React, { useState, useCallback } from "react";
-import {
-  getImagenModel,
-  ImagenModelParams,
-  ImagenInlineImage,
-  ImagenGenerationResponse,
-  AI,
-  AIError,
-} from "firebase/ai";
-import PromptInput from "../components/Common/PromptInput";
-import styles from "./ImagenView.module.css";
-
-// Simple component to display generated images or placeholders/loading states.
-const ImageDisplay: React.FC<{
-  images: ImagenInlineImage[];
-  filteredReason?: string;
-  isLoading: boolean;
-}> = ({ images, filteredReason, isLoading }) => {
-  return (
-    <div className={styles.imageDisplayContainer}>
-      {isLoading && <div className={styles.loading}>Generating images...</div>}
-      {!isLoading && images.length === 0 && !filteredReason && (
-        <div className={styles.placeholder}>
-          Generated images will appear here.
-        </div>
-      )}
-      {filteredReason && (
-        <div className={styles.filteredReason}>Filtered: {filteredReason}</div>
-      )}
-      <div className={styles.imageList}>
-        {images.map((img, index) => (
-          <div key={index} className={styles.imageWrapper}>
-            <img
-              src={`data:${img.mimeType};base64,${img.bytesBase64Encoded}`}
-              alt={`Generated image ${index + 1}`}
-              className={styles.generatedImage}
-            />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-interface ImagenViewProps {
-  currentParams: ImagenModelParams;
-  aiInstance: AI;
-}
-
-/**
- * View component for interacting with the Imagen model to generate images.
- */
-const ImagenView: React.FC<ImagenViewProps> = ({
-  currentParams,
-  aiInstance,
-}) => {
-  const [currentPrompt, setCurrentPrompt] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const [resultImages, setResultImages] = useState<ImagenInlineImage[]>([]);
-  const [filteredReason, setFilteredReason] = useState<string | undefined>(
-    undefined,
-  );
-  const [error, setError] = useState<string | null>(null);
-
-  const handleImageGenerationSubmit = useCallback(async () => {
-    if (!currentPrompt.trim() || isLoading) {
-      return;
-    }
-
-    const promptText = currentPrompt.trim();
-    console.log(
-      `[ImagenView] Starting generation for prompt: "${promptText}" with params:`,
-      currentParams,
-    );
-    setIsLoading(true);
-    setResultImages([]); // Clear previous results
-    setFilteredReason(undefined);
-    setError(null);
-
-    try {
-      const imagenModel = getImagenModel(aiInstance, currentParams);
-      console.log(`[ImagenView] Using Imagen model: ${imagenModel.model}`);
-
-      const result: ImagenGenerationResponse<ImagenInlineImage> =
-        await imagenModel.generateImages(promptText);
-
-      console.log("[ImagenView] Image generation successful.", result);
-      setResultImages(result.images);
-      setFilteredReason(result.filteredReason);
-    } catch (err: unknown) {
-      console.error("[ImagenView] Error during image generation:", err);
-      if (err instanceof AIError) {
-        const message =
-          err.message || "Failed to generate images due to an unknown error.";
-        const details = err.customErrorData?.errorDetails
-          ? ` Details: ${JSON.stringify(err.customErrorData.errorDetails)}`
-          : "";
-        setError(`Error: ${message}${details}`);
-      } else {
-        setError("Failed to generate images due to an unknown error.");
-      }
-      setResultImages([]);
-    } finally {
-      setIsLoading(false);
-      setCurrentPrompt("");
-    }
-  }, [currentPrompt, isLoading, currentParams, aiInstance]);
-
-  const suggestions = [
-    "A photorealistic portrait of a tabby cat wearing sunglasses.",
-    "Impressionist painting of a sunflower field at sunset.",
-    "Logo for a coffee shop called 'The Daily Grind', minimalist style.",
-    "Pixel art sprite of a friendly robot navigating a maze.",
-  ];
-  const handleSuggestion = (suggestion: string) => {
-    setCurrentPrompt(suggestion);
-  };
-
-  return (
-    <div className={styles.imagenViewContainer}>
-      {error && <div className={styles.errorMessage}>{error}</div>}
-      <div className={styles.displayArea}>
-        <ImageDisplay
-          images={resultImages}
-          filteredReason={filteredReason}
-          isLoading={isLoading}
-        />
-      </div>
-      <div className={styles.inputAreaContainer}>
-        <PromptInput
-          prompt={currentPrompt}
-          onPromptChange={setCurrentPrompt}
-          onSubmit={handleImageGenerationSubmit}
-          isLoading={isLoading}
-          placeholder="Enter a prompt to generate images..."
-          suggestions={suggestions}
-          onSuggestionClick={handleSuggestion}
-          aiInstance={aiInstance}
-          activeMode="imagenGen"
-          selectedFile={null}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default ImagenView;
diff --git a/ai/ai-react-app/src/views/ImagenView.module.css b/ai/ai-react-app/src/views/NanoBananaView.module.css
similarity index 100%
rename from ai/ai-react-app/src/views/ImagenView.module.css
rename to ai/ai-react-app/src/views/NanoBananaView.module.css
diff --git a/ai/ai-react-app/src/views/NanoBananaView.tsx b/ai/ai-react-app/src/views/NanoBananaView.tsx
new file mode 100644
index 000000000..a5f23366e
--- /dev/null
+++ b/ai/ai-react-app/src/views/NanoBananaView.tsx
@@ -0,0 +1,177 @@
+import React, { useState, useCallback } from "react";
+import {
+  getGenerativeModel,
+  ModelParams,
+  AI,
+  AIError,
+} from "firebase/ai";
+import PromptInput from "../components/Common/PromptInput";
+import styles from "./NanoBananaView.module.css";
+
+// Component to display generated content (text and/or images)
+type GeneratedContentPart = {
+  text?: string;
+  image?: {
+    mimeType: string;
+    bytesBase64Encoded: string;
+  };
+};
+
+const ContentDisplay: React.FC<{
+  parts: GeneratedContentPart[];
+  filteredReason?: string;
+  isLoading: boolean;
+}> = ({ parts, filteredReason, isLoading }) => {
+  return (
+    <div className={styles.imageDisplayContainer}>
+      {isLoading && <div className={styles.loading}>Generating content...</div>}
+      {!isLoading && parts.length === 0 && !filteredReason && (
+        <div className={styles.placeholder}>
+          Generated content will appear here.
+        </div>
+      )}
+      {filteredReason && (
+        <div className={styles.filteredReason}>Filtered: {filteredReason}</div>
+      )}
+      <div className={styles.contentList}>
+        {parts.map((part, index) => (
+          <div key={index} className={styles.partWrapper}>
+            {part.text && <p className={styles.generatedText}>{part.text}</p>}
+            {part.image && (
+              <div className={styles.imageWrapper}>
+                <img
+                  src={`data:${part.image.mimeType};base64,${part.image.bytesBase64Encoded}`}
+                  alt={`Generated content ${index + 1}`}
+                  className={styles.generatedImage}
+                />
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+interface NanoBananaViewProps {
+  currentParams: ModelParams;
+  aiInstance: AI;
+}
+
+/**
+ * View component for interacting with the Nano Banana model to generate images (and text).
+ */
+const NanoBananaView: React.FC<NanoBananaViewProps> = ({
+  currentParams,
+  aiInstance,
+}) => {
+  const [currentPrompt, setCurrentPrompt] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [generatedContent, setGeneratedContent] = useState<GeneratedContentPart[]>([]);
+  const [filteredReason, setFilteredReason] = useState<string | undefined>(
+    undefined,
+  );
+  const [error, setError] = useState<string | null>(null);
+
+  const handleImageGenerationSubmit = useCallback(async () => {
+    if (!currentPrompt.trim() || isLoading) {
+      return;
+    }
+
+    const promptText = currentPrompt.trim();
+    console.log(
+      `[NanoBananaView] Starting generation for prompt: "${promptText}" with params:`,
+      currentParams,
+    );
+    setIsLoading(true);
+    setGeneratedContent([]); // Clear previous results
+    setFilteredReason(undefined);
+    setError(null);
+
+    try {
+      console.log(`[NanoBananaView] Using Generative model for interleaved content`);
+      const model = getGenerativeModel(aiInstance, {
+        model: currentParams.model,
+        generationConfig: currentParams.generationConfig,
+      });
+
+      const result = await model.generateContent(promptText);
+      console.log("[NanoBananaView] Generation successful.", result);
+      
+      const response = result.response;
+      const parts: GeneratedContentPart[] = [];
+      
+      if (response.candidates?.[0].content?.parts) {
+        for (const part of response.candidates?.[0].content?.parts) {
+          if (part.text) {
+            parts.push({ text: part.text });
+          }
+          if (part.inlineData) {
+            parts.push({
+              image: {
+                mimeType: part.inlineData.mimeType,
+                bytesBase64Encoded: part.inlineData.data,
+              },
+            });
+          }
+        }
+      }
+      setGeneratedContent(parts);
+    } catch (err: unknown) {
+      console.error("[NanoBananaView] Error during generation:", err);
+      if (err instanceof AIError) {
+        const message =
+          err.message || "Failed to generate content due to an unknown error.";
+        const details = err.customErrorData?.errorDetails
+          ? ` Details: ${JSON.stringify(err.customErrorData.errorDetails)}`
+          : "";
+        setError(`Error: ${message}${details}`);
+      } else {
+        setError("Failed to generate content due to an unknown error.");
+      }
+      setGeneratedContent([]);
+    } finally {
+      setIsLoading(false);
+      setCurrentPrompt("");
+    }
+  }, [currentPrompt, isLoading, currentParams, aiInstance]);
+
+  const suggestions = [
+    "A photorealistic portrait of a tabby cat wearing sunglasses.",
+    "Impressionist painting of a sunflower field at sunset.",
+    "Logo for a coffee shop called 'The Daily Grind', minimalist style.",
+    "Pixel art sprite of a friendly robot navigating a maze.",
+  ];
+  const handleSuggestion = (suggestion: string) => {
+    setCurrentPrompt(suggestion);
+  };
+
+  return (
+    <div className={styles.imagenViewContainer}>
+      {error && <div className={styles.errorMessage}>{error}</div>}
+      <div className={styles.displayArea}>
+        <ContentDisplay
+          parts={generatedContent}
+          filteredReason={filteredReason}
+          isLoading={isLoading}
+        />
+      </div>
+      <div className={styles.inputAreaContainer}>
+        <PromptInput
+          prompt={currentPrompt}
+          onPromptChange={setCurrentPrompt}
+          onSubmit={handleImageGenerationSubmit}
+          isLoading={isLoading}
+          placeholder="Enter a prompt to generate images..."
+          suggestions={suggestions}
+          onSuggestionClick={handleSuggestion}
+          aiInstance={aiInstance}
+          activeMode="nanobanana"
+          selectedFile={null}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default NanoBananaView;

From 22d31c5af3c3863f9fbfab97d2cc3e52fb9ae3df Mon Sep 17 00:00:00 2001
From: DellaBitta <drsanta@google.com>
Date: Tue, 14 Apr 2026 10:38:57 -0400
Subject: [PATCH 2/3] Add aspect ratio

---
 .../src/components/Common/PromptInput.tsx     | 35 +++++++++++++------
 .../src/components/Layout/MainLayout.tsx      |  5 ++-
 .../src/components/Layout/RightSidebar.tsx    | 20 +++++++++++
 ai/ai-react-app/src/views/NanoBananaView.tsx  | 11 ++++--
 4 files changed, 57 insertions(+), 14 deletions(-)

diff --git a/ai/ai-react-app/src/components/Common/PromptInput.tsx b/ai/ai-react-app/src/components/Common/PromptInput.tsx
index b454efbc8..23da687a3 100644
--- a/ai/ai-react-app/src/components/Common/PromptInput.tsx
+++ b/ai/ai-react-app/src/components/Common/PromptInput.tsx
@@ -23,6 +23,7 @@ interface PromptInputProps {
   aiInstance: AI;
   currentParams?: ModelParams;
   selectedFile: File | null;
+  selectedAspectRatio?: string;
 }
 
 const PromptInput: React.FC<PromptInputProps> = ({
@@ -37,6 +38,7 @@ const PromptInput: React.FC<PromptInputProps> = ({
   aiInstance,
   currentParams,
   selectedFile,
+  selectedAspectRatio,
 }) => {
   const [tokenCount, setTokenCount] = useState<CountTokensResponse | null>(
     null,
@@ -53,11 +55,15 @@ const PromptInput: React.FC<PromptInputProps> = ({
     setTokenCountError(null);
 
     const currentPromptText = prompt.trim();
+    let textToCount = currentPromptText;
+    if (selectedAspectRatio) {
+      textToCount += `\nUse aspect ratio ${selectedAspectRatio}`;
+    }
     const parts: Part[] = [];
 
     // Add text part if present
-    if (currentPromptText) {
-      parts.push({ text: currentPromptText });
+    if (textToCount) {
+      parts.push({ text: textToCount });
     }
 
     // Add file part if present
@@ -135,15 +141,22 @@ const PromptInput: React.FC<PromptInputProps> = ({
 
       {/* Main Input Area */}
       <div className={styles.inputArea}>
-        <textarea
-          className={styles.promptTextarea}
-          value={prompt}
-          onChange={(e) => onPromptChange(e.target.value)}
-          placeholder={placeholder}
-          disabled={isLoading || isCountingTokens} // Disable if main loading OR counting
-          rows={3}
-          aria-label="Prompt input"
-        />
+        <div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
+          <textarea
+            className={styles.promptTextarea}
+            value={prompt}
+            onChange={(e) => onPromptChange(e.target.value)}
+            placeholder={placeholder}
+            disabled={isLoading || isCountingTokens} // Disable if main loading OR counting
+            rows={3}
+            aria-label="Prompt input"
+          />
+          {selectedAspectRatio && (
+            <div style={{ color: '#aaa', fontSize: '0.9em', marginTop: '5px', width: '100%' }}>
+              Use aspect ratio {selectedAspectRatio}
+            </div>
+          )}
+        </div>
         <button
           className={styles.runButton}
           onClick={onSubmit}
diff --git a/ai/ai-react-app/src/components/Layout/MainLayout.tsx b/ai/ai-react-app/src/components/Layout/MainLayout.tsx
index c33e49080..dab642cca 100644
--- a/ai/ai-react-app/src/components/Layout/MainLayout.tsx
+++ b/ai/ai-react-app/src/components/Layout/MainLayout.tsx
@@ -51,6 +51,7 @@ const MainLayout: React.FC<MainLayoutProps> = ({
       responseModalities: [ResponseModality.TEXT, ResponseModality.IMAGE],
     },
   });
+  const [selectedAspectRatio, setSelectedAspectRatio] = useState<string | undefined>();
 
   const [usageMetadata, setUsageMetadata] = useState<UsageMetadata | null>(
     null,
@@ -112,7 +113,7 @@ const MainLayout: React.FC<MainLayoutProps> = ({
         );
       case "nanobanana":
         return (
-          <NanoBananaView aiInstance={activeAI} currentParams={nanoBananaParams} />
+          <NanoBananaView aiInstance={activeAI} currentParams={nanoBananaParams} selectedAspectRatio={selectedAspectRatio} />
         );
       case "live":
         return (
@@ -155,6 +156,8 @@ const MainLayout: React.FC<MainLayoutProps> = ({
             setGenerativeParams={setGenerativeParams}
             nanoBananaParams={nanoBananaParams}
             setNanoBananaParams={setNanoBananaParams}
+            selectedAspectRatio={selectedAspectRatio}
+            setSelectedAspectRatio={setSelectedAspectRatio}
           />
         </div>
       </div>
diff --git a/ai/ai-react-app/src/components/Layout/RightSidebar.tsx b/ai/ai-react-app/src/components/Layout/RightSidebar.tsx
index 09368311f..9201b9b28 100644
--- a/ai/ai-react-app/src/components/Layout/RightSidebar.tsx
+++ b/ai/ai-react-app/src/components/Layout/RightSidebar.tsx
@@ -23,6 +23,8 @@ interface RightSidebarProps {
   setGenerativeParams: React.Dispatch<React.SetStateAction<ModelParams>>;
   nanoBananaParams: ModelParams;
   setNanoBananaParams: React.Dispatch<React.SetStateAction<ModelParams>>;
+  selectedAspectRatio?: string;
+  setSelectedAspectRatio: (ar?: string) => void;
 }
 
 const RightSidebar: React.FC<RightSidebarProps> = ({
@@ -32,6 +34,8 @@ const RightSidebar: React.FC<RightSidebarProps> = ({
   setGenerativeParams,
   nanoBananaParams,
   setNanoBananaParams,
+  selectedAspectRatio,
+  setSelectedAspectRatio,
 }) => {
   const handleModelParamsUpdate = (
     updateFn: (prevState: ModelParams) => ModelParams,
@@ -455,6 +459,22 @@ const RightSidebar: React.FC<RightSidebarProps> = ({
               </label>
             </div>
           </div>
+
+          <div className={styles.controlGroup}>
+            <label htmlFor="aspect-ratio-select">Aspect Ratio</label>
+            <select
+              id="aspect-ratio-select"
+              value={selectedAspectRatio || ""}
+              onChange={(e) => setSelectedAspectRatio(e.target.value || undefined)}
+            >
+              <option value="">None</option>
+              {["1:1", "3:2", "2:3", "3:4", "4:3", "4:5", "5:4", "9:16", "16:9", "21:9"].map((ar) => (
+                <option key={ar} value={ar}>
+                  {ar}
+                </option>
+              ))}
+            </select>
+          </div>
         </div>
       )}
     </div>
diff --git a/ai/ai-react-app/src/views/NanoBananaView.tsx b/ai/ai-react-app/src/views/NanoBananaView.tsx
index a5f23366e..5ff21e672 100644
--- a/ai/ai-react-app/src/views/NanoBananaView.tsx
+++ b/ai/ai-react-app/src/views/NanoBananaView.tsx
@@ -56,6 +56,7 @@ const ContentDisplay: React.FC<{
 interface NanoBananaViewProps {
   currentParams: ModelParams;
   aiInstance: AI;
+  selectedAspectRatio?: string;
 }
 
 /**
@@ -64,6 +65,7 @@ interface NanoBananaViewProps {
 const NanoBananaView: React.FC<NanoBananaViewProps> = ({
   currentParams,
   aiInstance,
+  selectedAspectRatio,
 }) => {
   const [currentPrompt, setCurrentPrompt] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -79,8 +81,12 @@ const NanoBananaView: React.FC<NanoBananaViewProps> = ({
     }
 
     const promptText = currentPrompt.trim();
+    const finalPromptText = selectedAspectRatio
+      ? `${promptText}\nUse aspect ratio ${selectedAspectRatio}`
+      : promptText;
+
     console.log(
-      `[NanoBananaView] Starting generation for prompt: "${promptText}" with params:`,
+      `[NanoBananaView] Starting generation for prompt: "${finalPromptText}" with params:`,
       currentParams,
     );
     setIsLoading(true);
@@ -95,7 +101,7 @@ const NanoBananaView: React.FC<NanoBananaViewProps> = ({
         generationConfig: currentParams.generationConfig,
       });
 
-      const result = await model.generateContent(promptText);
+      const result = await model.generateContent(finalPromptText);
       console.log("[NanoBananaView] Generation successful.", result);
       
       const response = result.response;
@@ -168,6 +174,7 @@ const NanoBananaView: React.FC<NanoBananaViewProps> = ({
           aiInstance={aiInstance}
           activeMode="nanobanana"
           selectedFile={null}
+          selectedAspectRatio={selectedAspectRatio}
         />
       </div>
     </div>

From 862a34bdf0c44cca878a6a3363453201f830e6d2 Mon Sep 17 00:00:00 2001
From: DellaBitta <drsanta@google.com>
Date: Tue, 14 Apr 2026 10:50:07 -0400
Subject: [PATCH 3/3] ensure that global is defined for vertexai backends

---
 ai/ai-react-app/src/components/Layout/MainLayout.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/ai/ai-react-app/src/components/Layout/MainLayout.tsx b/ai/ai-react-app/src/components/Layout/MainLayout.tsx
index dab642cca..215ae4d37 100644
--- a/ai/ai-react-app/src/components/Layout/MainLayout.tsx
+++ b/ai/ai-react-app/src/components/Layout/MainLayout.tsx
@@ -62,7 +62,9 @@ const MainLayout: React.FC<MainLayoutProps> = ({
     try {
       const backendInstance =
         activeBackendType === BackendType.VERTEX_AI
-          ? new VertexAIBackend()
+          ? activeMode === "nanobanana"
+            ? new VertexAIBackend("global")
+            : new VertexAIBackend()
           : new GoogleAIBackend();
       const aiInstance = getAI(getApp(), { backend: backendInstance });
       setActiveAI(aiInstance);
@@ -77,7 +79,7 @@ const MainLayout: React.FC<MainLayoutProps> = ({
       );
       setActiveAI(null);
     }
-  }, [activeBackendType]);
+  }, [activeBackendType, activeMode]);
 
   useEffect(() => {
     setUsageMetadata(null);