From b71db648b2d1a97c27093ef86f9ef2495f7cbdfe Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Fri, 27 Feb 2026 07:13:15 +1300
Subject: [PATCH] feat: add extended aspect ratios (1:4, 1:8, 4:1, 8:1) for
 Nano Banana 2

Make aspect ratio dropdowns model-aware: nano-banana-2 shows 14 ratios
while other models keep showing the base 10. Also add nano-banana-2 to
the SplitGrid settings model list.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/SplitGridSettingsModal.tsx  |  9 ++++++---
 src/components/nodes/GenerateImageNode.tsx | 10 +++++++---
 src/types/models.ts                        |  6 +++++-
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/components/SplitGridSettingsModal.tsx b/src/components/SplitGridSettingsModal.tsx
index 1d4895cb..c26ff4ab 100644
--- a/src/components/SplitGridSettingsModal.tsx
+++ b/src/components/SplitGridSettingsModal.tsx
@@ -20,10 +20,12 @@ const LAYOUT_OPTIONS = [
   { rows: 2, cols: 5 },
 ] as const;
 
-const ASPECT_RATIOS: AspectRatio[] = ["1:1", "2:3", "3:2", "3:4", "4:3", "4:5", "5:4", "9:16", "16:9", "21:9"];
+const BASE_ASPECT_RATIOS: AspectRatio[] = ["1:1", "2:3", "3:2", "3:4", "4:3", "4:5", "5:4", "9:16", "16:9", "21:9"];
+const EXTENDED_ASPECT_RATIOS: AspectRatio[] = ["1:1", "1:4", "1:8", "2:3", "3:2", "3:4", "4:1", "4:3", "4:5", "5:4", "8:1", "9:16", "16:9", "21:9"];
 const RESOLUTIONS: Resolution[] = ["1K", "2K", "4K"];
 const MODELS: { value: ModelType; label: string }[] = [
   { value: "nano-banana", label: "Nano Banana" },
+  { value: "nano-banana-2", label: "Nano Banana 2" },
   { value: "nano-banana-pro", label: "Nano Banana Pro" },
 ];
 
@@ -50,7 +52,8 @@ export function SplitGridSettingsModal({
 
   const { rows, cols } = LAYOUT_OPTIONS[selectedLayoutIndex];
   const targetCount = rows * cols;
-  const isNanoBananaPro = model === "nano-banana-pro";
+  const isNanoBananaPro = model === "nano-banana-pro" || model === "nano-banana-2";
+  const aspectRatios = model === "nano-banana-2" ? EXTENDED_ASPECT_RATIOS : BASE_ASPECT_RATIOS;
 
   const handleCreate = useCallback(() => {
     const splitNode = getNodeById(nodeId);
@@ -279,7 +282,7 @@ export function SplitGridSettingsModal({
                   onChange={(e) => setAspectRatio(e.target.value as AspectRatio)}
                   className="w-full px-3 py-2 bg-neutral-900 border border-neutral-600 rounded text-neutral-100 text-sm focus:outline-none focus:border-neutral-500"
                 >
-                  {ASPECT_RATIOS.map((ar) => (
+                  {aspectRatios.map((ar) => (
                     <option key={ar} value={ar}>{ar}</option>
                   ))}
                 </select>
diff --git a/src/components/nodes/GenerateImageNode.tsx b/src/components/nodes/GenerateImageNode.tsx
index 860b07b7..da306607 100644
--- a/src/components/nodes/GenerateImageNode.tsx
+++ b/src/components/nodes/GenerateImageNode.tsx
@@ -14,8 +14,11 @@ import { useToast } from "@/components/Toast";
 import { getImageDimensions, calculateNodeSizePreservingHeight } from "@/utils/nodeDimensions";
 import { ProviderBadge } from "./ProviderBadge";
 
-// All 10 aspect ratios supported by both models
-const ASPECT_RATIOS: AspectRatio[] = ["1:1", "2:3", "3:2", "3:4", "4:3", "4:5", "5:4", "9:16", "16:9", "21:9"];
+// Base 10 aspect ratios (all Gemini image models)
+const BASE_ASPECT_RATIOS: AspectRatio[] = ["1:1", "2:3", "3:2", "3:4", "4:3", "4:5", "5:4", "9:16", "16:9", "21:9"];
+
+// Extended 14 aspect ratios (Nano Banana 2 adds extreme ratios)
+const EXTENDED_ASPECT_RATIOS: AspectRatio[] = ["1:1", "1:4", "1:8", "2:3", "3:2", "3:4", "4:1", "4:3", "4:5", "5:4", "8:1", "9:16", "16:9", "21:9"];
 
 // Resolutions for Nano Banana Pro and Nano Banana 2
 const RESOLUTIONS: Resolution[] = ["512", "1K", "2K", "4K"];
@@ -394,6 +397,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
   // Use selectedModel.modelId for Gemini models, fallback to legacy model field
   const currentModelId = isGeminiProvider ? (nodeData.selectedModel?.modelId || nodeData.model) : null;
   const supportsResolution = currentModelId === "nano-banana-pro" || currentModelId === "nano-banana-2";
+  const aspectRatios = currentModelId === "nano-banana-2" ? EXTENDED_ASPECT_RATIOS : BASE_ASPECT_RATIOS;
   const hasCarouselImages = (nodeData.imageHistory || []).length > 1;
 
   // Track previous status to detect error transitions
@@ -689,7 +693,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
               onChange={handleAspectRatioChange}
               className="flex-1 text-[10px] py-1 px-1.5 border border-neutral-700 rounded bg-neutral-900/50 focus:outline-none focus:ring-1 focus:ring-neutral-600 text-neutral-300"
             >
-              {ASPECT_RATIOS.map((ratio) => (
+              {aspectRatios.map((ratio) => (
                 <option key={ratio} value={ratio}>
                   {ratio}
                 </option>
diff --git a/src/types/models.ts b/src/types/models.ts
index f8928ca9..7bc85261 100644
--- a/src/types/models.ts
+++ b/src/types/models.ts
@@ -5,15 +5,19 @@
  * aspect ratios, resolutions, and model identifiers.
  */
 
-// Aspect Ratios (supported by both Nano Banana and Nano Banana Pro)
+// Aspect Ratios (all models support the base 10; Nano Banana 2 adds 1:4, 1:8, 4:1, 8:1)
 export type AspectRatio =
   | "1:1"
+  | "1:4"
+  | "1:8"
   | "2:3"
   | "3:2"
   | "3:4"
+  | "4:1"
   | "4:3"
   | "4:5"
   | "5:4"
+  | "8:1"
   | "9:16"
   | "16:9"
   | "21:9";