added typing to PostToServer calls. made smartDraw popup create images locally.

1 files changed, 41 insertions, 53 deletions

diff --git a/src/client/views/smartdraw/SmartDrawHandler.tsx b/src/client/views/smartdraw/SmartDrawHandler.tsx
index 9d67d111b..532391ac6 100644
--- a/src/client/views/smartdraw/SmartDrawHandler.tsx
+++ b/src/client/views/smartdraw/SmartDrawHandler.tsx
@@ -23,10 +23,10 @@ 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, ActiveInkBezierApprox, ActiveInkColor, ActiveInkDash, ActiveInkFillColor, ActiveInkWidth, ActiveIsInkMask, DocumentView } from '../nodes/DocumentView';
 import { FireflyDimensionsMap, FireflyImageData, FireflyImageDimensions } from './FireflyConstants';
 import './SmartDrawHandler.scss';
+import { Upload } from '../../../server/SharedMediaTypes';
 
 export interface DrawingOptions {
     text: string;
@@ -60,7 +60,6 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
     private _lastInput: DrawingOptions = { text: '', complexity: 5, size: 350, autoColor: true, x: 0, y: 0 };
     private _lastResponse: string = '';
     private _selectedDocs: Doc[] = [];
-    private _errorOccurredOnce = false;
 
     @observable private _display: boolean = false;
     @observable private _pageX: number = 0;
@@ -95,7 +94,7 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
         CollectionFreeForm, FormattedTextBox, StickerPalette) to define how a drawing document should be added
         or removed in their respective locations (to the freeform canvas, to the sticker palette's preview, etc.)
     */
-    public AddDrawing: (doc: Doc, opts: DrawingOptions, gptRes: string) => void = unimplementedFunction;
+    public AddDrawing: (doc: Doc, opts: DrawingOptions, gptRes: string, x?: number, y?: number) => void = unimplementedFunction;
     public RemoveDrawing: (useLastContainer: boolean, doc?: Doc) => void = unimplementedFunction;
     /**
      * This creates the ink document that represents a drawing, so it goes through the strokes that make up the drawing,
@@ -206,16 +205,15 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
         this._isLoading = true;
         this._canInteract = false;
         if (this.ShowRegenerate) {
-            await this.regenerate(this._selectedDocs);
-            runInAction(() => {
-                this._selectedDocs = [];
-                this._regenInput = '';
-                this._showEditBox = false;
-            });
+            await this.regenerate(this._selectedDocs).then(
+                action(() => {
+                    this._selectedDocs = [];
+                    this._regenInput = '';
+                    this._showEditBox = false;
+                })
+            );
         } else {
-            runInAction(() => {
-                this._showOptions = false;
-            });
+            this._showOptions = false;
             try {
                 if (this._generateImage) {
                     await this.createImageWithFirefly(this._userInput);
@@ -224,18 +222,8 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
                     await this.drawWithGPT({ X: this._pageX, Y: this._pageY }, this._userInput, this._complexity, this._size, this._autoColor);
                 }
                 this.hideSmartDrawHandler();
-
-                runInAction(() => {
-                    this.ShowRegenerate = true;
-                });
             } catch (err) {
-                if (this._errorOccurredOnce) {
-                    console.error('GPT call failed', err);
-                    this._errorOccurredOnce = false;
-                } else {
-                    this._errorOccurredOnce = true;
-                    await this.handleSendClick();
-                }
+                console.error('GPT call failed', err);
             }
         }
         runInAction(() => {
@@ -256,7 +244,6 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
                 const drawingDoc = strokeData && this.CreateDrawingDoc(strokeData.data, strokeData.lastInput, strokeData.lastRes);
                 drawingDoc && this.AddDrawing(drawingDoc, this._lastInput, res);
                 drawingDoc && this._selectedDocs.push(drawingDoc);
-                this._errorOccurredOnce = false;
                 return strokeData;
             } else {
                 console.error('GPT call failed');
@@ -270,7 +257,10 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
      */
     createImageWithFirefly = (input: string, seed?: number): Promise<FireflyImageData | Doc | undefined> => {
         this._lastInput.text = input;
-        return SmartDrawHandler.CreateWithFirefly(input, this._imgDims, seed);
+        return SmartDrawHandler.CreateWithFirefly(input, this._imgDims, seed).then(doc => {
+            doc instanceof Doc && this.AddDrawing(doc, this._lastInput, input, this._pageX, this._pageY);
+            return doc;
+        });
     }; /**
      * Calls Firefly API to create an image based on user input
      */
@@ -281,9 +271,11 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
     public static ReCreateWithFirefly(input: string, imgDims: FireflyImageDimensions, seed?: number): Promise<FireflyImageData | Doc | undefined> {
         const dims = FireflyDimensionsMap[imgDims];
         return Networking.PostToServer('/queryFireflyImage', { prompt: input, width: dims.width, height: dims.height, seed })
-            .then(img => {
-                if (img.error) {
-                    alert('recreate image failed: ' + img.error);
+            .then(res => {
+                const img = res as Upload.FileInformation;
+                const error = res as { error: string };
+                if ('error' in error) {
+                    alert('recreate image failed: ' + error.error);
                     return undefined;
                 }
                 return { prompt: input, seed, pathname: img.accessPaths.agnostic.client };
@@ -296,21 +288,22 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
     public static CreateWithFirefly(input: string, imgDims: FireflyImageDimensions, seed?: number): Promise<FireflyImageData | Doc | undefined> {
         const dims = FireflyDimensionsMap[imgDims];
         return Networking.PostToServer('/queryFireflyImage', { prompt: input, width: dims.width, height: dims.height, seed })
-            .then(img => {
-                if (img.error) {
-                    alert('create image failed: ' + img.error);
+            .then(res => {
+                const img = res as Upload.FileInformation;
+                const error = res as { error: string };
+                if ('error' in error) {
+                    alert('create image failed: ' + error.error);
                     return undefined;
                 }
-                const newseed = img.accessPaths.agnostic.client.match(/\/(\d+)upload/)[1];
+                const newseed = img.accessPaths.agnostic.client.match(/\/(\d+)upload/)?.[1];
                 const imgDoc: Doc = Docs.Create.ImageDocument(img.accessPaths.agnostic.client, {
                     title: input.match(/^(.*?)~~~.*$/)?.[1] || input,
                     nativeWidth: dims.width,
                     nativeHeight: dims.height,
                     ai: 'firefly',
-                    ai_firefly_seed: newseed,
+                    ai_firefly_seed: +(newseed ?? 0),
                     ai_firefly_prompt: input,
                 });
-                DocumentViewInternal.addDocTabFunc(imgDoc, OpenWhere.addRight);
                 return imgDoc;
             })
             .catch(e => {
@@ -331,26 +324,21 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
         return Promise.all(
             drawingDocs.map(async doc => {
                 switch (doc.type) {
-                    case DocumentType.IMG:
-                        if (this._regenInput) {
-                            // if (this._selectedDoc) {
-                            const newPrompt = doc.ai_firefly_prompt ? `${doc.ai_firefly_prompt} ~~~ ${this._regenInput}` : this._regenInput;
-                            return changeInPlace ? this.recreateImageWithFirefly(newPrompt, NumCast(doc?.ai_firefly_seed)) : this.createImageWithFirefly(newPrompt, NumCast(doc?.ai_firefly_seed));
-                            // }
-                        }
-                        return changeInPlace
-                            ? this.recreateImageWithFirefly(this._lastInput.text || StrCast(doc.ai_firefly_prompt), NumCast(doc?.ai_firefly_seed))
-                            : this.createImageWithFirefly(this._lastInput.text || StrCast(doc.ai_firefly_prompt), NumCast(doc?.ai_firefly_seed));
+                    case DocumentType.IMG: {
+                        const func = changeInPlace ? this.recreateImageWithFirefly : this.createImageWithFirefly;
+                        const newPrompt = doc.ai_firefly_prompt ? `${doc.ai_firefly_prompt} ~~~ ${this._regenInput}` : this._regenInput;
+                        return this._regenInput ? func(newPrompt, NumCast(doc?.ai_firefly_seed)) : func(this._lastInput.text || StrCast(doc.ai_firefly_prompt));
+                    }
                     case DocumentType.COL: {
                         try {
-                            let res;
-                            if (this._regenInput) {
-                                const prompt = `This is your previously generated svg code: ${this._lastResponse} for the user input "${this._lastInput.text}". Please regenerate it with the provided specifications.`;
-                                res = await gptAPICall(`"${this._regenInput}"`, GPTCallType.DRAW, prompt, true);
-                                this._lastInput.text = `${this._lastInput.text} ~~~ ${this._regenInput}`;
-                            } else {
-                                res = await gptAPICall(`"${this._lastInput.text}", "${this._lastInput.complexity}", "${this._lastInput.size}"`, GPTCallType.DRAW, undefined, true);
-                            }
+                            const res = await (async () => {
+                                if (this._regenInput) {
+                                    const prompt = `This is your previously generated svg code: ${this._lastResponse} for the user input "${this._lastInput.text}". Please regenerate it with the provided specifications.`;
+                                    this._lastInput.text = `${this._lastInput.text} ~~~ ${this._regenInput}`;
+                                    return gptAPICall(`"${this._regenInput}"`, GPTCallType.DRAW, prompt, true);
+                                }
+                                return gptAPICall(`"${this._lastInput.text}", "${this._lastInput.complexity}", "${this._lastInput.size}"`, GPTCallType.DRAW, undefined, true);
+                            })();
                             if (res) {
                                 const strokeData = await this.parseSvg(res, { X: this._lastInput.x, Y: this._lastInput.y }, true, lastInput?.autoColor || this._autoColor);
                                 this.RemoveDrawing !== unimplementedFunction && this.RemoveDrawing(true, doc);