made drawing fill automatically size images

4 files changed, 43 insertions, 32 deletions

diff --git a/src/client/views/smartdraw/DrawingFillHandler.tsx b/src/client/views/smartdraw/DrawingFillHandler.tsx
index 1a470f995..7a95e27c2 100644
--- a/src/client/views/smartdraw/DrawingFillHandler.tsx
+++ b/src/client/views/smartdraw/DrawingFillHandler.tsx
@@ -1,5 +1,6 @@
 import { imageUrlToBase64 } from '../../../ClientUtils';
 import { Doc } from '../../../fields/Doc';
+import { DocData } from '../../../fields/DocSymbols';
 import { ImageCast } from '../../../fields/Types';
 import { Upload } from '../../../server/SharedMediaTypes';
 import { gptDescribeImage } from '../../apis/gpt/GPT';
@@ -7,19 +8,32 @@ import { Docs } from '../../documents/Documents';
 import { Networking } from '../../Network';
 import { DocumentView, DocumentViewInternal } from '../nodes/DocumentView';
 import { OpenWhere } from '../nodes/OpenWhere';
+import { AspectRatioLimits, FireflyDimensionsMap, FireflyImageDimensions } from './FireflyConstants';
 
 export class DrawingFillHandler {
     static drawingToImage = (drawing: Doc, strength: number, prompt: string) =>
         DocumentView.GetDocImage(drawing)?.then(imageField => {
             if (imageField) {
+                const aspectRatio = (drawing.width as number) / (drawing.height as number);
+                let dims: { width: number; height: number };
+                if (aspectRatio > AspectRatioLimits[FireflyImageDimensions.Widescreen]) {
+                    dims = FireflyDimensionsMap[FireflyImageDimensions.Widescreen];
+                } else if (aspectRatio > AspectRatioLimits[FireflyImageDimensions.Landscape]) {
+                    dims = FireflyDimensionsMap[FireflyImageDimensions.Landscape];
+                } else if (aspectRatio < AspectRatioLimits[FireflyImageDimensions.Portrait]) {
+                    dims = FireflyDimensionsMap[FireflyImageDimensions.Portrait];
+                } else {
+                    dims = FireflyDimensionsMap[FireflyImageDimensions.Square];
+                }
                 const { href } = ImageCast(imageField).url;
                 const hrefParts = href.split('.');
                 const structureUrl = `${hrefParts.slice(0, -1).join('.')}_o.${hrefParts.lastElement()}`;
                 imageUrlToBase64(structureUrl)
                     .then((hrefBase64: string) => gptDescribeImage(hrefBase64))
                     .then((prompt: string) => {
-                        Networking.PostToServer('/queryFireflyImageFromStructure', { prompt, structureUrl, strength }).then((info: Upload.ImageInformation) => 
-                                DocumentViewInternal.addDocTabFunc(Docs.Create.ImageDocument(info.accessPaths.agnostic.client, {}), OpenWhere.addRight)) // prettier-ignore
+                        Networking.PostToServer('/queryFireflyImageFromStructure', { prompt: prompt, width: dims.width, height: dims.height, structureUrl, strength }).then((info: Upload.ImageInformation) =>
+                            DocumentViewInternal.addDocTabFunc(Docs.Create.ImageDocument(info.accessPaths.agnostic.client, { ai_generated: true, nativeWidth: dims.width, nativeHeight: dims.height }), OpenWhere.addRight)
+                        ); // prettier-ignore
                     });
             }
             return false;
diff --git a/src/client/views/smartdraw/FireflyConstants.ts b/src/client/views/smartdraw/FireflyConstants.ts
new file mode 100644
index 000000000..f51305fba
--- /dev/null
+++ b/src/client/views/smartdraw/FireflyConstants.ts
@@ -0,0 +1,20 @@
+export enum FireflyImageDimensions {
+    Square = 'square',
+    Landscape = 'landscape',
+    Portrait = 'portrait',
+    Widescreen = 'widescreen',
+}
+
+export const FireflyDimensionsMap = {
+    square: { width: 2048, height: 2048 },
+    landscape: { width: 2304, height: 1792 },
+    portrait: { width: 1792, height: 2304 },
+    widescreen: { width: 2688, height: 1536 },
+};
+
+export const AspectRatioLimits = {
+    square: 1,
+    landscape: 1.167,
+    portrait: 0.875,
+    widescreen: 1.472,
+};
diff --git a/src/client/views/smartdraw/SmartDrawHandler.scss b/src/client/views/smartdraw/SmartDrawHandler.scss
index 4b21c92a5..cca7d77c7 100644
--- a/src/client/views/smartdraw/SmartDrawHandler.scss
+++ b/src/client/views/smartdraw/SmartDrawHandler.scss
@@ -1,6 +1,5 @@
 .smart-draw-handler {
     position: absolute;
-    width: 265px;
 
     .smart-draw-main {
         display: flex;
@@ -16,9 +15,11 @@
         display: flex;
         flex-direction: row;
         justify-content: center;
+        margin-top: 3px;
     }
 
     .smartdraw-options-container {
+        width: 265px;
         padding: 5px;
         font-weight: bolder;
         text-align: center;
diff --git a/src/client/views/smartdraw/SmartDrawHandler.tsx b/src/client/views/smartdraw/SmartDrawHandler.tsx
index 8cff2174f..6c9470480 100644
--- a/src/client/views/smartdraw/SmartDrawHandler.tsx
+++ b/src/client/views/smartdraw/SmartDrawHandler.tsx
@@ -25,6 +25,7 @@ import { ActiveInkArrowEnd, ActiveInkArrowStart, ActiveInkDash, ActiveInkFillCol
 import './SmartDrawHandler.scss';
 import { Networking } from '../../Network';
 import { OpenWhere } from '../nodes/OpenWhere';
+import { FireflyDimensionsMap, FireflyImageDimensions } from './FireflyConstants';
 
 export interface DrawingOptions {
     text: string;
@@ -35,13 +36,6 @@ export interface DrawingOptions {
     y: number;
 }
 
-enum FireflyImageDimensions {
-    Square = 'square',
-    Landscape = 'landscape',
-    Portrait = 'portrait',
-    Widescreen = 'widescreen',
-}
-
 /**
  * The SmartDrawHandler allows users to generate drawings with GPT from text input. Users are able to enter
  * the item to draw, how complex they want the drawing to be, how large the drawing should be, and whether
@@ -274,30 +268,12 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
      */
     createImageWithFirefly = (input: string, seed?: number) => {
         this._lastInput.text = input;
-        let width = 0;
-        let height = 0;
-        switch (this._imgDims) {
-            case FireflyImageDimensions.Square:
-                width = 2048;
-                height = 2048;
-                break;
-            case FireflyImageDimensions.Landscape:
-                width = 2304;
-                height = 1792;
-            case FireflyImageDimensions.Portrait:
-                width = 1792;
-                height = 2304;
-                break;
-            case FireflyImageDimensions.Widescreen:
-                width = 2688;
-                height = 1536;
-                break;
-        }
-        return Networking.PostToServer('/queryFireflyImage', { prompt: input, width: width, height: height, seed: seed }).then(img => {
+        const dims = FireflyDimensionsMap[this._imgDims];
+        return Networking.PostToServer('/queryFireflyImage', { prompt: input, width: dims.width, height: dims.height, seed: seed }).then(img => {
             const imgDoc: Doc = Docs.Create.ImageDocument(img.accessPaths.agnostic.client, {
                 title: input.match(/^(.*?)~~~.*$/)?.[1] || input,
-                nativeWidth: width,
-                nativeHeight: height,
+                nativeWidth: dims.width,
+                nativeHeight: dims.height,
                 ai_generated: true,
                 firefly_seed: img.accessPaths.agnostic.client.match(/\/(\d+)upload/)[1],
                 firefly_prompt: input,