2 files changed, 44 insertions, 45 deletions

diff --git a/src/client/views/smartdraw/DrawingFillHandler.tsx b/src/client/views/smartdraw/DrawingFillHandler.tsx
index 508ee557d..c3c762181 100644
--- a/src/client/views/smartdraw/DrawingFillHandler.tsx
+++ b/src/client/views/smartdraw/DrawingFillHandler.tsx
@@ -12,37 +12,39 @@ import { ImageUtility } from '../nodes/imageEditor/imageEditorUtils/ImageHandler
 import { OpenWhere } from '../nodes/OpenWhere';
 import { ObservableReactComponent } from '../ObservableReactComponent';
 
-@observer
-export class DrawingFillHandler extends ObservableReactComponent<object> {
-    static Instance: DrawingFillHandler;
-
-    constructor(props: object) {
-        super(props);
-        makeObservable(this);
-        DrawingFillHandler.Instance = this;
-    }
-
-    @action
-    drawingToImage = async (drawing: Doc, prompt: string) => {
+export class DrawingFillHandler {
+    static drawingToImage = async (drawing: Doc, prompt: string) => {
         const imageField = await DocumentView.GetDocImage(drawing);
         if (!imageField) return;
-        const image = new Image();
-        image.src = imageField.url?.href;
-        await new Promise<void>((resolve, reject) => {
-            image.onload = () => resolve();
-            image.onerror = () => reject(new Error('Error loading image'));
-        });
+        const { href } = ImageCast(imageField).url;
+        const hrefParts = href.split('.');
+        const hrefComplete = `${hrefParts[0]}_o.${hrefParts[1]}`;
+        try {
+            const response = await fetch(hrefComplete);
+            const blob: Blob = await response.blob();
+            const strength: number = 100;
+            const img = await Networking.PostToServer('/queryFireflyImage', { prompt, blob, strength });
+            DocumentViewInternal.addDocTabFunc(Docs.Create.ImageDocument(img, {}), OpenWhere.addRight);
+            // Networking.PostToServer('/queryFireflyImage', { prompt, blob, strength }).then(img => DocumentViewInternal.addDocTabFunc(Docs.Create.ImageDocument(img, {}), OpenWhere.addRight));
+        } catch (error) {
+            console.error('Error fetching image:', error);
+            return;
+        }
 
-        const canvas = document.createElement('canvas');
-        canvas.width = image.width;
-        canvas.height = image.height;
-        const ctx = canvas.getContext('2d');
-        if (!ctx) return;
-        ctx.globalCompositeOperation = 'source-over';
-        ctx.clearRect(0, 0, image.width, image.height);
-        ctx.drawImage(image, 0, 0);
-        const blob: Blob = await ImageUtility.canvasToBlob(canvas);
-        const strength: number = 100;
-        Networking.PostToServer('/queryFireflyImage', { prompt, blob, strength }).then(img => DocumentViewInternal.addDocTabFunc(Docs.Create.ImageDocument(img, {}), OpenWhere.addRight));
+        // const image = new Image();
+        // image.src = imageField.url?.href;
+        // // image.onload = async () => {
+        //     const canvas = document.createElement('canvas');
+        //     canvas.width = image.width;
+        //     canvas.height = image.height;
+        //     const ctx = canvas.getContext('2d');
+        //     if (!ctx) return;
+        //     ctx.globalCompositeOperation = 'source-over';
+        //     ctx.clearRect(0, 0, image.width, image.height);
+        //     ctx.drawImage(image, 0, 0);
+        // const blob: Blob = await ImageUtility.canvasToBlob(canvas);
+        // const strength: number = 100;
+        // Networking.PostToServer('/queryFireflyImage', { prompt, blob, strength }).then(img => DocumentViewInternal.addDocTabFunc(Docs.Create.ImageDocument(img, {}), OpenWhere.addRight));
+        // };
     };
 }
diff --git a/src/client/views/smartdraw/SmartDrawHandler.tsx b/src/client/views/smartdraw/SmartDrawHandler.tsx
index e962291f6..23ab7657f 100644
--- a/src/client/views/smartdraw/SmartDrawHandler.tsx
+++ b/src/client/views/smartdraw/SmartDrawHandler.tsx
@@ -13,7 +13,6 @@ import { Doc, DocListCast } from '../../../fields/Doc';
 import { DocData } from '../../../fields/DocSymbols';
 import { InkData, InkField, InkTool } from '../../../fields/InkField';
 import { BoolCast, ImageCast, NumCast, StrCast } from '../../../fields/Types';
-import { Networking } from '../../Network';
 import { GPTCallType, gptAPICall, gptDrawingColor } from '../../apis/gpt/GPT';
 import { Docs } from '../../documents/Documents';
 import { SettingsManager } from '../../util/SettingsManager';
@@ -22,8 +21,7 @@ import { SVGToBezier, SVGType } from '../../util/bezierFit';
 import { InkingStroke } from '../InkingStroke';
 import { ObservableReactComponent } from '../ObservableReactComponent';
 import { MarqueeView } from '../collections/collectionFreeForm';
-import { ActiveInkArrowEnd, ActiveInkArrowStart, ActiveInkBezierApprox, ActiveInkColor, ActiveInkDash, ActiveInkFillColor, ActiveInkWidth, ActiveIsInkMask, DocumentView, DocumentViewInternal } from '../nodes/DocumentView';
-import { OpenWhere } from '../nodes/OpenWhere';
+import { ActiveInkArrowEnd, ActiveInkArrowStart, ActiveInkDash, ActiveInkFillColor, ActiveInkBezierApprox, ActiveInkColor, ActiveInkWidth, ActiveIsInkMask, DocumentView } from '../nodes/DocumentView';
 import './SmartDrawHandler.scss';
 
 export interface DrawingOptions {
@@ -238,21 +236,20 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
      * Calls GPT API to create a drawing based on user input.
      */
     @action
-    drawWithGPT = (startPt: { X: number; Y: number }, prompt: string, complexity: number, size: number, autoColor: boolean) => {
-        if (prompt === '') return;
-        this._lastInput = { text: prompt, complexity: complexity, size: size, autoColor: autoColor, x: startPt.X, y: startPt.Y };
-
-        Networking.PostToServer('/queryFireflyImage', { prompt }).then(img => DocumentViewInternal.addDocTabFunc(Docs.Create.ImageDocument(img, { title: prompt }), OpenWhere.addRight));
-
-        const result = gptAPICall(`"${prompt}", "${complexity}", "${size}"`, GPTCallType.DRAW, undefined, true).then(res =>
-            this.parseSvg(res, startPt, false, autoColor).then(strokeData => {
-                const drawingDoc = strokeData && this.CreateDrawingDoc(strokeData.data, strokeData.lastInput, strokeData.lastRes);
-                drawingDoc && this.AddDrawing(drawingDoc, this._lastInput, res);
-            })
-        );
+    drawWithGPT = async (startPt: { X: number; Y: number }, input: string, complexity: number, size: number, autoColor: boolean) => {
+        if (input === '') return;
+        this._lastInput = { text: input, complexity: complexity, size: size, autoColor: autoColor, x: startPt.X, y: startPt.Y };
+        const res = await gptAPICall(`"${input}", "${complexity}", "${size}"`, GPTCallType.DRAW, undefined, true);
+        if (!res) {
+            console.error('GPT call failed');
+            return;
+        }
+        const strokeData = await this.parseSvg(res, startPt, false, autoColor);
+        const drawingDoc = strokeData && this.CreateDrawingDoc(strokeData.data, strokeData.lastInput, strokeData.lastRes);
+        drawingDoc && this.AddDrawing(drawingDoc, this._lastInput, res);
 
         this._errorOccurredOnce = false;
-        return result;
+        return strokeData;
     };
 
     /**