From cdeb2cf892d586eccdcfe4cc3685679d62356edc Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Wed, 31 Dec 2025 05:41:58 -0500
Subject: [PATCH] edit page new aspect ratio controls

---
 .../app/src/pages/PageEdit/PageEdit.tsx       | 19 ++++++++++++++++++-
 .../promptbox/src/lib/PromptBoxEdit.tsx       | 16 ++++++++++++++--
 .../src/lib/enqueue/EnqueueEditImage.ts       | 11 ++++++++++-
 3 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/frontend/apps/editor3d/app/src/pages/PageEdit/PageEdit.tsx b/frontend/apps/editor3d/app/src/pages/PageEdit/PageEdit.tsx
index 57f8aa22f6..f0e36d3966 100644
--- a/frontend/apps/editor3d/app/src/pages/PageEdit/PageEdit.tsx
+++ b/frontend/apps/editor3d/app/src/pages/PageEdit/PageEdit.tsx
@@ -29,7 +29,7 @@ import {
   //ProviderSelector,
   //PROVIDER_LOOKUP_BY_PAGE,
 } from "@storyteller/ui-model-selector";
-import { ImageModel } from "@storyteller/model-list";
+import { CommonAspectRatio, ImageModel } from "@storyteller/model-list";
 import { HistoryStack, ImageBundle } from "./HistoryStack";
 import { TutorialModalButton } from "@storyteller/ui-tutorial-modal";
 import { GenerationProvider } from "@storyteller/api-enums";
@@ -63,6 +63,9 @@ const PageEdit = () => {
   >([]);
   const [generationCount, setGenerationCount] = useState<number>(1);
 
+  // New aspect ratio state will begin to phase out old aspect ratio
+  const [commonAspectRatio, setCommonAspectRatio] = useState<CommonAspectRatio | undefined>(undefined);
+
   // Use the Zustand store
   const store = useEditStore();
   const baseImageUrl = store.baseImageInfo?.url;
@@ -382,6 +385,7 @@ const PageEdit = () => {
         let result;
 
         if (selectedImageModel?.editingIsInpainting) {
+          // CASE 1 - INPAINTING (Only a few models do this!)
           const arrayBuffer = await getMaskArrayBuffer();
           let request : EnqueueImageInpaintRequest = {
             model: selectedImageModel,
@@ -395,8 +399,12 @@ const PageEdit = () => {
           if (!!options?.selectedProvider) {
             request.provider = options.selectedProvider;
           }
+          //if (selectedImageModel?.supportsNewAspectRatio()) {
+          //  request.common_aspect_ratio = commonAspectRatio;
+          //}
           result = await EnqueueImageInpaint(request);
         } else if (selectedImageModel?.isNanoBananaModel()) {
+          // CASE 2 - NANO BANANA
           const compositeFile = await getCompositeCanvasFile();
           if (!compositeFile) {
             console.error("Failed to create composite canvas");
@@ -427,8 +435,12 @@ const PageEdit = () => {
           if (!!options?.selectedProvider) {
             request.provider = options.selectedProvider;
           }
+          if (selectedImageModel?.supportsNewAspectRatio()) {
+            request.common_aspect_ratio = commonAspectRatio;
+          }
           result = await EnqueueEditImage(request);
         } else {
+          // CASE 3 - DEFAULT
           const imgs = options?.images || [];
           let request : EnqueueEditImageRequest = {
             model: selectedImageModel,
@@ -449,6 +461,9 @@ const PageEdit = () => {
           if (!!options?.selectedProvider) {
             request.provider = options.selectedProvider;
           }
+          if (selectedImageModel?.supportsNewAspectRatio()) {
+            request.common_aspect_ratio = commonAspectRatio;
+          }
           result = await EnqueueEditImage(request);
         }
 
@@ -631,6 +646,8 @@ const PageEdit = () => {
         <PromptEditor
           selectedImageModel={selectedImageModel}
           selectedProvider={selectedProvider}
+          commonAspectRatio={commonAspectRatio}
+          setCommonAspectRatio={setCommonAspectRatio}
           onModeChange={(mode: string) => {
             store.setActiveTool(mode as ActiveEditTool);
           }}
diff --git a/frontend/libs/components/promptbox/src/lib/PromptBoxEdit.tsx b/frontend/libs/components/promptbox/src/lib/PromptBoxEdit.tsx
index bddd273154..60500bc193 100644
--- a/frontend/libs/components/promptbox/src/lib/PromptBoxEdit.tsx
+++ b/frontend/libs/components/promptbox/src/lib/PromptBoxEdit.tsx
@@ -25,11 +25,12 @@ import { ButtonIconSelect } from "@storyteller/ui-button-icon-select";
 import { PopoverMenu, PopoverItem } from "@storyteller/ui-popover";
 import { Tooltip } from "@storyteller/ui-tooltip";
 import { useEffect, useRef, useState } from "react";
-import { ImageModel, getCapabilitiesForModel } from "@storyteller/model-list";
+import { CommonAspectRatio, ImageModel, getCapabilitiesForModel } from "@storyteller/model-list";
 import { twMerge } from "tailwind-merge";
 import { ImagePromptRow, type UploadImageFn } from "./ImagePromptRow";
 import { RefImage, usePromptEditStore } from "./promptStore";
 import { GenerationProvider } from "@storyteller/api-enums";
+import { AspectRatioPicker } from "./common/AspectRatioPicker";
 
 export interface PromptBoxEditProps {
   onModeChange?: (mode: string) => void;
@@ -48,6 +49,8 @@ export interface PromptBoxEditProps {
   selectedImageModel?: ImageModel;
   selectedProvider?: GenerationProvider;
   generationCount?: number;
+  commonAspectRatio?: CommonAspectRatio;
+  setCommonAspectRatio: (aspectRatio: CommonAspectRatio) => void;
   onGenerationCountChange?: (count: number) => void;
   supportsMaskedInpainting?: boolean;
   isEnqueueing?: boolean;
@@ -67,6 +70,8 @@ export const PromptBoxEdit = ({
   selectedImageModel,
   selectedProvider,
   generationCount: generationCountProp,
+  commonAspectRatio,
+  setCommonAspectRatio,
   onGenerationCountChange,
   supportsMaskedInpainting = false,
   uploadImage,
@@ -443,7 +448,14 @@ export const PromptBoxEdit = ({
             </div>
             <div className="mt-2 flex items-center justify-between gap-2">
               <div className="flex items-center gap-2">
-                {selectedImageModel?.canChangeAspectRatio && (
+                {selectedImageModel?.supportsNewAspectRatio() && (
+                  <AspectRatioPicker
+                    model={selectedImageModel}
+                    currentAspectRatio={commonAspectRatio}
+                    handleCommonAspectRatioSelect={setCommonAspectRatio}
+                  />
+                )}
+                {selectedImageModel?.canChangeAspectRatio && !selectedImageModel?.supportsNewAspectRatio() && (
                   <Tooltip
                     content="Aspect Ratio"
                     position="top"
diff --git a/frontend/libs/tauri-api/src/lib/enqueue/EnqueueEditImage.ts b/frontend/libs/tauri-api/src/lib/enqueue/EnqueueEditImage.ts
index 536c5a1c71..ec1af86ec2 100644
--- a/frontend/libs/tauri-api/src/lib/enqueue/EnqueueEditImage.ts
+++ b/frontend/libs/tauri-api/src/lib/enqueue/EnqueueEditImage.ts
@@ -1,6 +1,6 @@
 import { invoke } from "@tauri-apps/api/core";
 import { CommandResult } from "../common/CommandStatus";
-import { ImageModel } from "@storyteller/model-list";
+import { CommonAspectRatio, ImageModel } from "@storyteller/model-list";
 import { GenerationProvider } from "@storyteller/api-enums";
 
 export interface EnqueueEditImageRequest {
@@ -29,8 +29,12 @@ export interface EnqueueEditImageRequest {
   /// Number of images to generate.
   image_count?: number;
 
+  // TODO: This is deprecated and will be phased out.
   aspect_ratio?: EnqueueEditImageSize;
 
+  // This is the new aspect ratio.
+  common_aspect_ratio?: CommonAspectRatio;
+
   image_quality?: EnqueueEditImageQuality;
 
   /// Image resolution. Support: Nano Banana Pro
@@ -55,6 +59,7 @@ interface RawEnqueueEditImageRequest {
   disable_system_prompt?: boolean;
   image_count?: number;
   aspect_ratio?: EnqueueEditImageSize;
+  common_aspect_ratio?: CommonAspectRatio;
   image_quality?: EnqueueEditImageQuality;
   frontend_caller?: string;
   frontend_subscriber_id?: string;
@@ -147,6 +152,10 @@ export const EnqueueEditImage = async (request: EnqueueEditImageRequest) : Promi
     mutableRequest.aspect_ratio = request.aspect_ratio;
   }
 
+  if (!!request.common_aspect_ratio) {
+    mutableRequest.common_aspect_ratio = request.common_aspect_ratio;
+  }
+
   if (!!request.image_count) {
     mutableRequest.image_count = request.image_count;
   }