Update calculation and wording to provide better understanding

Author: jamesmcroft

src/App.jsx

@@ -201,9 +201,10 @@ function App() {
                     The calculation involves several steps:
                   </Typography>
                   <Typography paragraph>
-                    1. <b>Resizing Images</b>: Each image is resized to a
-                    minimum size while maintaining its aspect ratio. The minimum
-                    size is {model.imageMinSizeLength}px.
+                    1. <b>Resizing Images</b>: Ensure each image is resized to
+                    fit within the maximum dimension {model.maxImageDimension}
+                    px, and has at least {model.imageMinSizeLength}px on the
+                    shortest side, while maintaining its aspect ratio.
                   </Typography>
                   <Typography paragraph>
                     2. <b>Calculating Tiles</b>: The resized image is divided

src/stores/CalcStore.js

@@ -21,20 +21,25 @@ export const calcStore = (set, get) => ({
     set(() => ({ totalTokens: null, totalCost: null }));
   },
   runCalculation: () => {
-    function getResizedImageSize(minSize, height, width) {
+    function getResizedImageSize(maxDimension, minSide, height, width) {
       let resizedHeight = height;
       let resizedWidth = width;
 
-      if (height > width) {
-        resizedHeight = minSize;
-      } else {
-        resizedHeight = (height / width) * minSize;
+      // Only scale down if larger than maxDimension on any side
+      if (width > maxDimension || height > maxDimension) {
+        const scaleFactor = Math.min(
+          maxDimension / width,
+          maxDimension / height
+        );
+        resizedWidth = width * scaleFactor;
+        resizedHeight = height * scaleFactor;
       }
 
-      if (height > width) {
-        resizedWidth = (width / height) * minSize;
-      } else {
-        resizedWidth = minSize;
+      // If the shortest side is greater than minSide, scale to minSide
+      if (Math.min(resizedWidth, resizedHeight) > minSide) {
+        const scaleFactor = minSide / Math.min(resizedWidth, resizedHeight);
+        resizedWidth = resizedWidth * scaleFactor;
+        resizedHeight = resizedHeight * scaleFactor;
       }
 
       return { height: resizedHeight, width: resizedWidth };
@@ -48,13 +53,15 @@ export const calcStore = (set, get) => ({
 
     const { model, images } = get();
     const tokensPerTile = model.tokensPerTile;
+    const maxImageDimension = model.maxImageDimension;
     const imageMinSizeLength = model.imageMinSizeLength;
     const tileSizeLength = model.tileSizeLength;
     const additionalBuffer = model.additionalBuffer;
     const costPerThousandTokens = model.costPerThousandTokens;
 
     const imageTileCount = images.flatMap((image) => {
       const imgSize = getResizedImageSize(
+        maxImageDimension,
         imageMinSizeLength,
         image.height,
         image.width

src/stores/ModelStore.js

@@ -3,6 +3,7 @@ export const modelStore = (set, get) => ({
     {
       name: "GPT-4o (2024-08-06 - Standard)",
       tokensPerTile: 170,
+      maxImageDimension: 2048,
       imageMinSizeLength: 768,
       tileSizeLength: 512,
       additionalBuffer: 85,
@@ -11,6 +12,7 @@ export const modelStore = (set, get) => ({
     {
       name: "GPT-4o (2024-08-06 - Global)",
       tokensPerTile: 170,
+      maxImageDimension: 2048,
       imageMinSizeLength: 768,
       tileSizeLength: 512,
       additionalBuffer: 85,
@@ -19,6 +21,7 @@ export const modelStore = (set, get) => ({
     {
       name: "GPT-4o-mini (2024-07-18)",
       tokensPerTile: 5667,
+      maxImageDimension: 2048,
       imageMinSizeLength: 768,
       tileSizeLength: 512,
       additionalBuffer: 2833,
@@ -27,6 +30,7 @@ export const modelStore = (set, get) => ({
     {
       name: "GPT-4o (2024-05-13)",
       tokensPerTile: 170,
+      maxImageDimension: 2048,
       imageMinSizeLength: 768,
       tileSizeLength: 512,
       additionalBuffer: 85,