From 859bb1b733901e4697f1d53781af725e4830c607 Mon Sep 17 00:00:00 2001
From: eleanor-park <eleanor_park@brown.edu>
Date: Tue, 14 Jan 2025 17:19:16 +0100
Subject: added drawing fill style reference

---
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 35 ++----------
 src/client/views/nodes/DocumentView.tsx            |  1 +
 src/client/views/nodes/FieldView.tsx               |  1 +
 src/client/views/nodes/ImageBox.scss               |  9 +---
 src/client/views/nodes/ImageBox.tsx                | 62 +++++++++++++---------
 src/client/views/smartdraw/DrawingFillHandler.tsx  |  2 +-
 src/server/ApiManagers/FireflyManager.ts           | 35 ++++++------
 7 files changed, 65 insertions(+), 80 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index e1144f21a..66e0ba5d9 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -2194,38 +2194,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
 
     @observable private _regenInput = '';
     @observable private _drawingFillInput = '';
-    @observable private _canInteract = true;
     @observable private _regenLoading = false;
     @observable private _drawingFillLoading = false;
     @observable private _fireflyRefStrength = 50;
-    // _oldDrag: HTMLElement | null = null;
-
-    // onPassiveDrag = (e: PointerEvent) => e.stopPropagation();
-    // protected createDashEventsTarget = (ele: HTMLDivElement | null) => {
-    //     // this._dropDisposer?.();
-    //     this._oldDrag?.removeEventListener('pointerdown', this.onPassiveDrag);
-    //     this._oldDrag = ele;
-    //     // prevent wheel events from passively propagating up through containers and prevents containers from preventDefault which would block scrolling
-    //     ele?.addEventListener('pointerdown', this.onPassiveDrag, { passive: false });
-    // };
-
-    componentAIViewHistory = () => {
-        return (
-            <div className="imageBox-aiView-history">
-                {/* {this._prevImgs.map(img => (
-                    <img
-                        className="imageBox-aiView-img"
-                        src={img.href}
-                        onClick={() => {
-                            this.dataDoc[this.fieldKey] = new ImageField(img.pathname);
-                            this.dataDoc.ai_firefly_prompt = img.prompt;
-                            this.dataDoc.ai_firefly_seed = img.seed;
-                        }}
-                    />
-                ))} */}
-            </div>
-        );
-    };
 
     componentAIView = () => {
         const showRegenerate = this.Document[DocData].ai;
@@ -2241,7 +2212,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                                 aria-label="Edit instructions input"
                                 type="text"
                                 value={this._regenInput}
-                                onChange={action(e => this._canInteract && (this._regenInput = e.target.value))}
+                                onChange={action(e => (this._regenInput = e.target.value))}
                                 placeholder="Prompt (Optional)"
                             />
                             <Button
@@ -2264,7 +2235,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 <div className="collectionfreeformview-aiView-options-container">
                     <text className="collectionfreeformview-aiView-subtitle"> Create Image with Firefly </text>
                     <div className="collectionfreeformview-aiView-options">
-                        <input className="collectionfreeformview-aiView-prompt" placeholder="Prompt (Optional)" type="text" value={this._drawingFillInput} onChange={action(e => this._canInteract && (this._drawingFillInput = e.target.value))} />
+                        <input className="collectionfreeformview-aiView-prompt" placeholder="Prompt (Optional)" type="text" value={this._drawingFillInput} onChange={action(e => (this._drawingFillInput = e.target.value))} />
                         <div className="collectionfreeformview-aiView-strength">
                             <Slider
                                 className="collectionfreeformview-aiView-slider"
@@ -2278,7 +2249,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                                 step={1}
                                 size="small"
                                 value={this._fireflyRefStrength}
-                                onChange={action((e, val) => this._canInteract && (this._fireflyRefStrength = val as number))}
+                                onChange={action((e, val) => (this._fireflyRefStrength = val as number))}
                                 valueLabelDisplay="auto"
                             />
                             Reference Strength
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 640d27aa1..44b214644 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -718,6 +718,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
     @observable _aiWinHeight = 100;
     rpw = () => this._props.PanelWidth() - this._aiWinHeight;
     rph = () => this.panelHeight() - this._aiWinHeight;
+
     @computed get viewBoxContents() {
         TraceMobx();
         const isInk = this.layoutDoc._layout_isSvg && !this._props.LayoutTemplateString;
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 02d4d9adb..2e40f39ed 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -68,6 +68,7 @@ export interface FieldViewSharedProps {
     isGroupActive?: () => string | undefined; // is this document part of a group that is active
     // eslint-disable-next-line no-use-before-define
     setContentViewBox?: (view: ViewBoxInterface<FieldViewProps>) => void; // called by rendered field's viewBox so that DocumentView can make direct calls to the viewBox
+
     PanelWidth: () => number;
     PanelHeight: () => number;
     isDocumentActive?: () => boolean | undefined; // whether a document should handle pointer events
diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index 759f2584b..94a497cf0 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -163,6 +163,7 @@
 .imageBox-aiView {
     text-align: center;
     font-weight: bold;
+    width: 100%;
 
     .imageBox-aiView-subtitle {
         position: relative;
@@ -179,13 +180,7 @@
     .imageBox-aiView-regenerate,
     .imageBox-aiView-options {
         display: flex;
-        flex-direction: row;
-        justify-content: center;
-        flex-direction: row;
+        margin: auto;
         gap: 5px;
     }
-
-    .imageBox-aiView-input {
-        width: 50%;
-    }
 }
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 8a7fb99b1..3a9086777 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -96,8 +96,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     // variables for AI Image Editor
     @observable private _regenInput = '';
-    @observable private _canInteract = true;
-    @observable private _regenerateLoading = false;
+    @observable private _regenLoading = false;
     @observable private _prevImgs: FireflyImageData[] = [];
 
     constructor(props: FieldViewProps) {
@@ -535,20 +534,31 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         );
     }
 
+    protected _btnWidth = 50;
+    protected _inputWidth = 50;
+    protected _sideBtnMaxPanelPct = 0.12;
+    @observable _filterFunc: ((doc: Doc) => boolean) | undefined = undefined;
+    @computed get contentScaling() { return this.ScreenToLocalBoxXf().Scale; } // prettier-ignore
+    @computed get maxWidgetSize() { return Math.min(this._btnWidth * this.contentScaling, (this._props.fitWidth?.(this.Document) && this._props.PanelWidth() > NumCast(this.layoutDoc._width) ? 1 : this._sideBtnMaxPanelPct) * NumCast(this.layoutDoc.width, 1));  } // prettier-ignore
+    @computed get uiBtnScaling() { return this.maxWidgetSize / this._btnWidth; } // prettier-ignore
+    @computed get uiInputScaling() { return this.maxWidgetSize / this._inputWidth; } // prettier-ignore
+
     componentAIViewHistory = () => {
         const imgs: FireflyImageData[] = this.dataDoc.ai_firefly_history ? JSON.parse(StrCast(this.dataDoc.ai_firefly_history)) : [];
         return (
-            <div className="imageBox-aiView-history" ref={this.createDashEventsTarget}>
-                <Button
-                    text="Clear History"
-                    type={Type.SEC}
-                    style={{ marginTop: '5px' }}
-                    size={Size.XSMALL}
-                    onClick={action(() => {
-                        this._prevImgs = [];
-                        this.dataDoc.ai_firefly_history = undefined;
-                    })}
-                />
+            <div className="imageBox-aiView-history">
+                {imgs.length >= 2 && (
+                    <Button
+                        text="Clear History"
+                        type={Type.SEC}
+                        style={{ marginTop: '5px' }}
+                        size={Size.XSMALL}
+                        onClick={action(() => {
+                            this._prevImgs = [];
+                            this.dataDoc.ai_firefly_history = undefined;
+                        })}
+                    />
+                )}
                 {imgs.length >= 2 &&
                     imgs.map(img => (
                         <div>
@@ -574,26 +584,25 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         const showRegenerate = this.Document[DocData].ai;
         return (
             <div className="imageBox-aiView">
-                Edit Image with AI
+                <text>Edit Image with AI </text>
                 {showRegenerate && (
                     <div className="imageBox-aiView-regenerate-container">
                         <div className="imageBox-aiView-regenerate">
                             <input
+                                style={{ transform: `scale(${this.uiInputScaling})` }}
                                 className="imageBox-aiView-input"
                                 aria-label="Edit instructions input"
                                 type="text"
                                 value={this._regenInput}
-                                onChange={action(e => this._canInteract && (this._regenInput = e.target.value))}
+                                onChange={action(e => (this._regenInput = e.target.value))}
                                 placeholder="Prompt (Optional)"
                             />
                             <Button
+                                style={{ transform: `scale(${this.uiBtnScaling})` }}
                                 text="Regenerate Image"
                                 type={Type.SEC}
-                                // style={{ alignSelf: 'flex-end' }}
-                                icon={this._regenerateLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
-                                iconPlacement="right"
                                 onClick={action(async () => {
-                                    this._regenerateLoading = true;
+                                    this._regenLoading = true;
                                     SmartDrawHandler.Instance.regenerate([this.Document], undefined, undefined, this._regenInput, true).then(newImgs => {
                                         if (newImgs[0]) {
                                             const url = newImgs[0].pathname;
@@ -603,20 +612,25 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                                             this.dataDoc[this.fieldKey] = imgField;
                                             this._prevImgs.unshift({ prompt: newImgs[0].prompt, seed: newImgs[0].seed, href: this.paths.lastElement(), pathname: url });
                                             this.dataDoc.ai_firefly_history = JSON.stringify(this._prevImgs);
-                                            this._regenerateLoading = false;
+                                            this._regenLoading = false;
                                             this._regenInput = '';
                                         }
                                     });
                                 })}
                             />
-                            <Button text="Get Variations" type={Type.SEC} iconPlacement="right" />
+                            <Button style={{ transform: `scale(${this.uiBtnScaling})` }} text="Get Variations" type={Type.SEC} iconPlacement="right" />
                         </div>
                     </div>
                 )}
                 <div className="imageBox-aiView-options-container">
-                    {showRegenerate && <text className="imageBox-aiView-subtitle"> More Options: </text>}
                     <div className="imageBox-aiView-options">
+                        {showRegenerate && (
+                            <text className="imageBox-aiView-subtitle" style={{ transform: `scale(${this.uiBtnScaling})` }}>
+                                More Options:
+                            </text>
+                        )}
                         <Button
+                            style={{ transform: `scale(${this.uiBtnScaling})` }}
                             type={Type.TERT}
                             text="Get Text"
                             icon={<FontAwesomeIcon icon="font" />}
@@ -632,11 +646,11 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                             }}
                         />
                         <Button
+                            style={{ transform: `scale(${this.uiBtnScaling})` }}
                             type={Type.TERT}
                             text="Generative Fill"
                             icon={<FontAwesomeIcon icon="fill" />}
                             color={SettingsManager.userBackgroundColor}
-                            // icon={this._isLoading && this._regenInput !== '' ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
                             iconPlacement="right"
                             onClick={action(() => {
                                 ImageEditorData.Open = true;
@@ -646,11 +660,11 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                             })}
                         />
                         <Button
+                            style={{ transform: `scale(${this.uiBtnScaling})` }}
                             type={Type.TERT}
                             text="Expand"
                             icon={<FontAwesomeIcon icon="expand" />}
                             color={SettingsManager.userBackgroundColor}
-                            // icon={this._isLoading && this._regenInput !== '' ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
                             iconPlacement="right"
                             onClick={() => {
                                 Networking.PostToServer('/expandImage', {
diff --git a/src/client/views/smartdraw/DrawingFillHandler.tsx b/src/client/views/smartdraw/DrawingFillHandler.tsx
index 57327631a..57e75e86a 100644
--- a/src/client/views/smartdraw/DrawingFillHandler.tsx
+++ b/src/client/views/smartdraw/DrawingFillHandler.tsx
@@ -48,7 +48,7 @@ export class DrawingFillHandler {
                     .then((hrefBase64: string) => gptDescribeImage(hrefBase64))
                     .then(prompt => {
                         Networking.PostToServer('/queryFireflyImageFromStructure', 
-                            { prompt: `${user_prompt}, ${prompt}`, width: dims.width, height: dims.height, structure: structureUrl, strength: strength, presets: styles, styleRef: styleUrl})
+                            { prompt: `${user_prompt}, ${prompt}`, width: dims.width, height: dims.height, structure: structureUrl, strength: strength, presets: styles, styleUrl: styleUrl})
                             .then((info: Upload.ImageInformation) =>
                                 DocumentViewInternal.addDocTabFunc(Docs.Create.ImageDocument(info.accessPaths.agnostic.client, 
                                     { ai: 'firefly', ai_firefly_prompt: user_prompt || prompt, _width: 500, data_nativeWidth: info.nativeWidth, data_nativeHeight: info.nativeHeight }), OpenWhere.addRight)
diff --git a/src/server/ApiManagers/FireflyManager.ts b/src/server/ApiManagers/FireflyManager.ts
index 185752404..d92db1522 100644
--- a/src/server/ApiManagers/FireflyManager.ts
+++ b/src/server/ApiManagers/FireflyManager.ts
@@ -20,11 +20,11 @@ export default class FireflyManager extends ApiManager {
             return undefined;
         });
 
-    generateImageFromStructure = (prompt: string = 'a realistic illustration of a cat coding', width: number = 2048, height: number = 2048, structureUrl: string, strength: number = 50, styles: string[], styleUrl: string) =>
+    generateImageFromStructure = (prompt: string = 'a realistic illustration of a cat coding', width: number = 2048, height: number = 2048, structureUrl: string, strength: number = 50, styles: string[], styleUrl: string | undefined) =>
         this.getBearerToken().then(response =>
-            response?.json().then((data: { access_token: string }) =>
+            response?.json().then((data: { access_token: string }) => {
                 //prettier-ignore
-                fetch('https://firefly-api.adobe.io/v3/images/generate', {
+                return fetch('https://firefly-api.adobe.io/v3/images/generate', {
                     method: 'POST',
                     headers: [
                         ['Content-Type', 'application/json'],
@@ -43,12 +43,14 @@ export default class FireflyManager extends ApiManager {
                                       source: { url: structureUrl },
                                   },
                               },
-                        //prettier-ignore
-                        style: { 
-                            imageReference: {
-                                source: { uploadId: styleUrl }
-                            },
-                            presets: styles 
+                        // prettier-ignore
+                        style: {
+                            presets: styles,
+                            ...(styleUrl && {
+                                imageReference: {
+                                    source: { uploadId: styleUrl },
+                                },
+                            }),
                         }
                     }),
                 })
@@ -57,7 +59,7 @@ export default class FireflyManager extends ApiManager {
                         console.error('Error:', error);
                         return '';
                     })
-            )
+            })
         );
 
     uploadImageToDropbox = (fileUrl: string, dbx = new Dropbox({ accessToken: process.env.DROPBOX_TOKEN })) =>
@@ -239,8 +241,8 @@ export default class FireflyManager extends ApiManager {
         register({
             method: Method.POST,
             subscription: '/queryFireflyImageFromStructure',
-            secureHandler: async ({ req, res }) =>
-                this.uploadImageToDropbox(req.body.styleRef)
+            secureHandler: async ({ req, res }) => {
+                (req.body.styleRef ? this.uploadImageToDropbox(req.body.styleRef) : Promise.resolve(undefined))
                     .then(styleUrl => {
                         if (styleUrl instanceof Error) {
                             _invalid(res, styleUrl.message);
@@ -255,13 +257,14 @@ export default class FireflyManager extends ApiManager {
                         });
                     })
                     .then(uploads =>
-                        this.generateImageFromStructure(req.body.prompt, req.body.width, req.body.height, uploads.structureUrl, req.body.strength, req.body.presets, uploads.styleUrl).then(fire =>
+                        this.generateImageFromStructure(req.body.prompt, req.body.width, req.body.height, uploads.structureUrl, req.body.strength, req.body.presets, req.body.styleUrl).then(fire => {
                             DashUploadUtils.UploadImage(JSON.parse(fire ?? '').url).then(info => {
                                 if (info instanceof Error) _invalid(res, info.message);
                                 else _success(res, info);
-                            })
-                        )
-                    ),
+                            });
+                        })
+                    );
+            },
         });
         register({
             method: Method.POST,
-- 
cgit v1.2.3-70-g09d2