working on firefly integration

1 files changed, 34 insertions, 8 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
index 08a48ccb9..f34b7efcf 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
@@ -7,13 +7,15 @@ import { Doc, returnEmptyDoclist } from "../../../../../../fields/Doc";
 import { DefaultStyleProvider } from "../../../../StyleProvider";
 import { DocumentView, DocumentViewInternal } from "../../../DocumentView";
 import { DocCreatorMenu } from "../DocCreatorMenu";
-import { TemplateSidescrollView } from "./TemplatesSidescrollDisplay";
+import { TemplatePreviewGrid } from "./TemplatePreviewGrid";
 import { observer } from "mobx-react";
 import { Transform } from "../../../../../util/Transform";
 import { Template } from "../Template";
 import { TemplateMenuAIUtils } from "../Backend/TemplateMenuAIUtils";
 import { ObservableReactComponent } from "../../../../ObservableReactComponent";
 import { IDisposer } from "mobx-utils";
+import { ImageField } from "../../../../../../fields/URLField";
+import { TemplatePreviewBoxProps } from "./TemplatePreviewBox";
 
 interface TemplateEditingWindowProps {
     menu: DocCreatorMenu;
@@ -28,8 +30,10 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
     private previewWindow: HTMLDivElement | null = null;
     private _disposers: { [name: string]: IDisposer } = {};
 
+    @observable _loading: boolean = false;
     @observable _variationsTabOpen: boolean = false;
-    @observable _variations: Doc[] = [];
+    @observable _variationURLs: string[] = [];
+    @observable _variations: Template[] = [];
 
     componentDidMount(): void {
         this._disposers.windowDimensions = reaction(() => 
@@ -57,15 +61,24 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
         }
     }
 
+    func = () => {
+        this._props.menu._variations.forEach(variation => {
+            variation.setImageAsBackground('https://www.onthegotours.com/repository/Great-Wall-New-Pic-228551391689622.jpg', true)
+        });
+    }
+
     get fireflyVariationsTab() {
 
         return (
             <>
-                <TemplateSidescrollView
+                <div className="docCreatorMenu-option-divider full no-margin-bottom"/>
+                <TemplatePreviewGrid
                     menu={this._props.menu}
                     title={'Generate Variations'}
-                    templates={[]}
+                    templates={this._props.menu._variations}
+                    optionsButtonOpts={['gear', this.func]}
                     setupButtonClick={this._props.setupButtonClick}
+                    previewBoxRightButtonOpts={['gear', (component: ObservableReactComponent<TemplatePreviewBoxProps>) => {component.forceUpdate();}]}
                 />
                 <div className="docCreatorMenu-section">
                     <div className="docCreatorMenu-variation-prompt-input">
@@ -77,7 +90,21 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
                         />
                         <button className="docCreatorMenu-menu-button" 
                             onPointerDown={e => this._props.setupButtonClick(e, async () => {
-                                this._variations = await this._props.menu.generateVariations(this._props.template.getRenderedDoc()!, this.fireflyPrompt);
+                                this._props.menu._variations = [];
+                                this._loading = true;
+                                this._variationURLs = await this._props.menu.generateVariations(this._props.template.getRenderedDoc()!, this.fireflyPrompt);
+                                const templates: Template[] = [];
+                                this._variationURLs.forEach(url => {
+                                    const newTemplate: Template = this._props.template.cloneBase();
+                                    newTemplate.setImageAsBackground(url, true);
+                                    templates.push(newTemplate);
+                                });
+                                this._loading = false;
+                                setTimeout(() => {
+                                    console.log('setting')
+                                    this._props.menu._variations = templates;
+                                    this.forceUpdate();
+                                }, 1000);
                             })
                         }>
                             <FontAwesomeIcon icon="arrows-rotate" />
@@ -101,7 +128,7 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
                     removeDocument={returnFalse}
                     PanelWidth={() => this.previewWindow?.clientWidth ?? 500}
                     PanelHeight={() => this.previewWindow?.clientHeight ?? 500}
-                    ScreenToLocalTransform={() => new Transform(/*-this._props.menu._pageX - 5, -this._props.menu._pageY - 35*/0, 0, 1)}
+                    ScreenToLocalTransform={() => new Transform(-this._props.menu._pageX - 5, -this._props.menu._pageY - 35, 1)}
                     renderDepth={5}
                     whenChildContentsActiveChanged={emptyFunction}
                     focus={emptyFunction}
@@ -124,7 +151,6 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
                 <div className="docCreatorMenu-expanded-template-preview">
                     <div className="top-panel"/>
                     {this.renderedDocPreview}
-                    <div className="docCreatorMenu-option-divider full"/>
                     {this._variationsTabOpen ? this.fireflyVariationsTab : null}
                     <div className="right-buttons-panel">
                         <button
@@ -141,8 +167,8 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
                         </button>
                         <button className="docCreatorMenu-menu-button section-reveal-options top-right" onPointerDown={e => this._props.setupButtonClick(e, async () => {
                                 this.setVariationTab(!this._variationsTabOpen);
+                                // this._props.template.setImageAsBackground('https://www.onthegotours.com/repository/Great-Wall-New-Pic-228551391689622.jpg', true);
                                 this.forceUpdate();
-                                console.log('window: ', this.previewWindow)
                             })}>
                             <FontAwesomeIcon icon="lightbulb" />
                         </button>