From 8195cb97556765a8025de554a44f48d4c15d4c64 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 11 May 2025 03:06:02 -0400
Subject: text and images are no longer messed up

---
 src/client/apis/gpt/GPT.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/client/apis/gpt')

diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index 29b6ab989..57a229569 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -101,7 +101,7 @@ const callTypeMap: { [type in GPTCallType]: GPTCallOpts } = {
         prompt: "BRIEFLY (<50 words) describe any differences between the rubric and the user's answer answer in second person. If there are no differences, say correct",
     },
     template: {
-        model: 'gpt-4-turbo',
+        model: 'gpt-4.1',
         maxTokens: 512,
         temp: 0.5,
         prompt: 'You will be given a list of field descriptions for one or more templates in the format {field #0: “description”}{field #1: “description”}{...}, and a list of column descriptions in the format {“title”: “description”}{...}. Your job is to match columns with fields based on their descriptions. Your output should be in the following JSON format: {“template_title”:{“#”: “title”, “#”: “title”, “#”: “title” …}, “template_title”:{“#”: “title”, “#”: “title”, “#”: “title” …}} where “template_title” is the templates title as specified in the description provided,  # represents the field # and “title” the title of the column assigned to it. A filled out example might look like {“fivefield2”:{“0”:”Name”, “1”:”Image”, “2”:”Caption”, “3”:”Position”, “4”:”Stats”}, “fivefield3”:{0:”Image”, 1:”Name”, 2:”Caption”, 3:”Stats”, 4:”Position”}. Include one object for each template. IT IS VERY IMPORTANT THAT YOU ONLY INCLUDE TEXT IN THE FORMAT ABOVE, WITH NO ADDITIONS WHATSOEVER. Do not include extraneous ‘#’ characters, ‘column’ for columns, or ‘template’ for templates: ONLY THE TITLES AND NUMBERS. There should never be one column assigned to more than one field (ie. if the “name” column is assigned to field 1, it can’t be assigned to any other fields) . Do this for each template whose fields are described. The descriptions are as follows:',
-- 
cgit v1.2.3-70-g09d2


From 4af498433a887c70dc7043a5a34eef7fff5bbbe0 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 11 May 2025 07:51:59 -0400
Subject: a million and one things

---
 src/client/apis/gpt/GPT.ts                         |  1 +
 .../DocCreatorMenu/Backend/TemplateManager.ts      | 31 ++++++++++++++--------
 .../DocCreatorMenu/Backend/TemplateMenuAIUtils.ts  | 23 ++++++++--------
 .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx   | 17 ++++++------
 .../DocCreatorMenu/Menu/TemplateEditingScreen.tsx  |  0
 .../DocCreatorMenu/Menu/TemplateEditingWindow.tsx  |  4 +--
 .../nodes/DataVizBox/DocCreatorMenu/Template.ts    |  6 ++---
 .../TemplateFieldTypes/DynamicField.ts             | 25 +++++++++++++++--
 .../TemplateFieldTypes/StaticContentField.ts       |  5 ++++
 .../TemplateFieldTypes/TemplateField.ts            | 16 +++++------
 src/client/views/nodes/ImageBox.scss               |  2 +-
 11 files changed, 82 insertions(+), 48 deletions(-)
 delete mode 100644 src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingScreen.tsx

(limited to 'src/client/apis/gpt')

diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index 57a229569..d7b378958 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -221,6 +221,7 @@ const gptAPICall = async (inputTextIn: string, callType: GPTCallType, prompt?: s
 const gptImageCall = async (prompt: string, n?: number) => {
     try {
         const response = await openai.images.generate({
+            model: 'dall-e-3',
             prompt: prompt,
             n: n ?? 1,
             size: '1024x1024',
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateManager.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateManager.ts
index ef7dbc7ab..d11f05766 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateManager.ts
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateManager.ts
@@ -53,11 +53,11 @@ export class TemplateManager {
         }
     }
 
-    createDocsFromTemplate = action((dv: DataVizBox, template: Template, csvColumns: Col[], debug: boolean = false) => {
+    createDocsFromTemplate = action((dv: DataVizBox, template: Template, cols: Col[], debug: boolean = false) => {
         const fields = Array.from(Object.keys(dv.records[0]));
 
-        const processContent = (content: { [title: string]: string }) => {
-            const templateCopy = template.cloneBase();
+        const processContent = async (content: { [title: string]: string }) => {
+            const templateCopy = template.clone();
 
             fields
                 .filter(title => title)
@@ -67,14 +67,22 @@ export class TemplateManager {
                 });
 
             const gptFunc = (type: TemplateFieldType) => (type === TemplateFieldType.VISUAL ? TemplateMenuAIUtils.renderGPTImageCall : TemplateMenuAIUtils.renderGPTTextCall);
-            const gptPromises = csvColumns
-                .filter(field => field.type !== TemplateFieldType.UNSET && field.AIGenerated)
-                .map(field => {
-                    const templateField = templateCopy.getFieldByTitle(field.title);
-                    if (templateField !== undefined) {
-                        return gptFunc(field.type)(templateCopy, field, templateField.getID);
-                    }
-                });
+            const applyGPTContent = async () => {
+                const promises = cols
+                    .filter(field => field.AIGenerated)
+                    .map(field => {
+                        const templateField = templateCopy.getFieldByTitle(field.title);
+                        if (templateField !== undefined) {
+                            return gptFunc(field.type)(templateCopy, field, templateField.getID);
+                        }
+                        return null; 
+                    })
+                    .filter(p => p !== null);
+            
+                await Promise.all(promises);
+            };
+
+            await applyGPTContent();
 
             return templateCopy.getRenderedDoc();
         };
@@ -90,6 +98,7 @@ export class TemplateManager {
                       {} as { [title: string]: string }
                   )
               );
+
         return Promise.all(rowContents.map(processContent)).then(
             action(renderedDocs => {
                 return renderedDocs;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateMenuAIUtils.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateMenuAIUtils.ts
index 446fe3442..9bc2bfce2 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateMenuAIUtils.ts
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateMenuAIUtils.ts
@@ -27,12 +27,13 @@ export class TemplateMenuAIUtils {
         }
     };
 
-    public static renderGPTImageCall = async (template: Template, col: Col, fieldNumber: number | undefined): Promise<boolean> => {
-        const generateAndLoadImage = async (fieldNum: string, column: Col, prompt: string) => {
+    public static renderGPTImageCall = async (template: Template, col: Col, fieldNumber: number): Promise<boolean> => {
+        const generateAndLoadImage = async (id: number, prompt: string) => {
             const url = await this.generateGPTImage(prompt);
-            const field: TemplateField = template.getFieldByID(Number(fieldNum));
+            var field: TemplateField = template.getFieldByID(id);
 
             field.setContent(url ?? '', ViewType.IMG);
+            field = template.getFieldByID(id);
             field.setTitle(col.title);
         };
 
@@ -40,14 +41,14 @@ export class TemplateMenuAIUtils {
 
         try {
             const sysPrompt =
-                'Your job is to create a prompt for an AI image generator to help it generate an image based on existing content in a template and a user prompt. Your prompt should focus heavily on visual elements to help the image generator; avoid unecessary info that might distract it. ONLY INCLUDE THE PROMPT, NO OTHER TEXT OR EXPLANATION. The existing content is as follows: ' +
+                `#${Math.random() * 100}: Your job is to create a prompt for an AI image generator to help it generate an image based on existing content in a template and a user prompt. Your prompt should focus heavily on visual elements to help the image generator; avoid unecessary info that might distract it. ONLY INCLUDE THE PROMPT, NO OTHER TEXT OR EXPLANATION. The existing content is as follows: ` +
                 fieldContent +
                 ' **** The user prompt is: ' +
                 col.desc;
 
             const prompt = await gptAPICall(sysPrompt, GPTCallType.COMPLETEPROMPT);
 
-            await generateAndLoadImage(String(fieldNumber), col, prompt);
+            await generateAndLoadImage(fieldNumber, prompt);
         } catch (e) {
             console.log(e);
         }
@@ -104,20 +105,20 @@ export class TemplateMenuAIUtils {
      * @returns a doc containing the fully rendered template
      */
     public static applyGPTContentToTemplate = async (template: Template, assignments: { [field: string]: Col }): Promise<Template | undefined> => {
-        const GPTTextCalls = Object.entries(assignments).filter(([, col]) => col.type === TemplateFieldType.TEXT && !col.AIGenerated);
-        const GPTIMGCalls = Object.entries(assignments).filter(([, col]) => col.type === TemplateFieldType.VISUAL && !col.AIGenerated);
+        const GPTTextCalls = Object.entries(assignments).filter(([, col]) => col.type === TemplateFieldType.TEXT && col.AIGenerated);
+        const GPTIMGCalls = Object.entries(assignments).filter(([, col]) => col.type === TemplateFieldType.VISUAL && col.AIGenerated);
 
         if (GPTTextCalls.length) {
-            const promises = GPTTextCalls.map(([str, col]) => {
-                return TemplateMenuAIUtils.renderGPTTextCall(template, col, Number(str));
+            const promises = GPTTextCalls.map(([id, col]) => {
+                return TemplateMenuAIUtils.renderGPTTextCall(template, col, Number(id));
             });
 
             await Promise.all(promises);
         }
 
         if (GPTIMGCalls.length) {
-            const promises = GPTIMGCalls.map(async ([fieldNum, col]) => {
-                return TemplateMenuAIUtils.renderGPTImageCall(template, col, Number(fieldNum));
+            const promises = GPTIMGCalls.map(async ([id, col]) => {
+                return TemplateMenuAIUtils.renderGPTImageCall(template, col, Number(id));
             });
 
             await Promise.all(promises);
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index 7beb93636..8a98399b6 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -374,6 +374,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
     }
 
     @action updateRenderedPreviewCollection = async (template: Template) => {
+        this._docsRendering = true;
         this._fullyRenderedDocs = this._dataViz ? ((await this.templateManager.createDocsFromTemplate(this._dataViz, template, this.fieldsInfos, this.DEBUG_MODE)).filter(doc => doc).map(doc => doc!) ?? []) as unknown as Doc[] : [];
         this.updateRenderedDocCollection();
     };
@@ -384,7 +385,6 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
             return;
         } else {
             this._selectedTemplate = template;
-            //template.renderUpdates();
             this.updateRenderedPreviewCollection(template);
         }
     };
@@ -434,7 +434,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
     };
 
     @action addField = () => {
-        const newFields: Col[] = this._userCreatedFields.concat([{ title: '', type: TemplateFieldType.UNSET, desc: '', sizes: [] }]);
+        const newFields: Col[] = this._userCreatedFields.concat([{ title: '', type: TemplateFieldType.UNSET, desc: '', sizes: [], AIGenerated: true }]);
         this._userCreatedFields = newFields;
     };
 
@@ -544,10 +544,10 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
                     const toObj = Object.entries(assignment).reduce(
                         (a, [fieldID, colTitle]) => {
                             const col = this.getColByTitle(colTitle);
-                            if (!this._userCreatedFields.includes(col)) {
-                                // do the following for any fields not added by the user; will change in the future, for now only GPT content works with user-added field
-                                const field = template.getFieldByID(Number(fieldID));
+                            if (!col.AIGenerated) {
+                                var field = template.getFieldByID(Number(fieldID));
                                 field.setContent(col.defaultContent ?? '', col.type === TemplateFieldType.VISUAL ? ViewType.IMG : ViewType.TEXT);
+                                field = template.getFieldByID(Number(fieldID));
                                 field.setTitle(col.title);
                             } else {
                                 a[Number(fieldID)] = this.getColByTitle(colTitle);
@@ -602,7 +602,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
         clone.x = 10000;
         clone.y = 10000;
 
-        await DrawingFillHandler.drawingToImage(clone, 100, prompt, undefined, this)
+        await DrawingFillHandler.drawingToImage(clone, 100, prompt, clone, this)
 
         return this.variations;
     }
@@ -762,10 +762,9 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
 
         this._renderedDocCollection = collection;
 
-        // const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
-        // mainCollection.addDocument(collection);
+        this._docsRendering = false;
 
-        console.log('changed to: ', collection);
+        this.forceUpdate();
     };
 
     layoutPreviewContents = action(() => {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingScreen.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingScreen.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
index 8b58ac1cf..df6b791c7 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
@@ -86,9 +86,9 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
                             onPointerDown={e => this._props.setupButtonClick(e, async () => {
                                 this._props.menu._variations = [];
                                 this._loading = true;
-                                this._variationURLs = await this._props.menu.generateVariations(this._props.template.getRenderedDoc()!, this.fireflyPrompt);
+                                this._variationURLs = await this._props.menu.generateVariations(this._props.template.clone(false).getRenderedDoc()!, this.fireflyPrompt);
                                 this._variationURLs.forEach(url => {
-                                    const newTemplate: Template = this._props.template.cloneBase();
+                                    const newTemplate: Template = this._props.template.clone(true);
                                     this._props.menu._variations.push(newTemplate);
                                 });
                                 this._loading = false;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts
index 1dc6692a2..10724c9f7 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts
@@ -57,7 +57,7 @@ export class Template {
         //dispose each subfields disposers, etc.
     };
 
-    cloneBase = () => new Template(this._mainField?.makeClone(undefined) ?? TemplateLayouts.BasicSettings);
+    clone = (withContent: boolean = false) => new Template(this._mainField?.makeClone(undefined, withContent) ?? TemplateLayouts.BasicSettings);
 
     getRenderedDoc = () => this.doc;
 
@@ -130,9 +130,7 @@ export class Template {
             });
         }
 
-        this._mainField.addField(field);
-        
-        this._mainField.refreshRenderedDoc();
+        this._mainField.makeBackgroundField(field)
     }
 
     getMatches = (cols: Col[]): number[][] => {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DynamicField.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DynamicField.ts
index 5fba68c14..fc520ba47 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DynamicField.ts
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DynamicField.ts
@@ -11,6 +11,7 @@ import { FieldSettings, TemplateField, ViewType } from './TemplateField';
 export class DynamicField extends TemplateField {
     protected _disposers: { [name: string]: IDisposer } = {};
     protected _subfields: TemplateField[] = [];
+    protected backgroundField: TemplateField | undefined;
 
     get getSubfields() {
         return this._subfields;
@@ -72,11 +73,31 @@ export class DynamicField extends TemplateField {
 
     addChildToDocument = (doc: Doc) => this._renderDoc && Doc.SetContainer(doc, this._renderDoc);
 
+    makeBackgroundField = (field: TemplateField) => {
+        if (this.backgroundField && this.backgroundField !== field) {
+            this.removeField(this.backgroundField);
+            this.backgroundField = undefined;
+        }
+        if (field && field !== this.backgroundField) {
+            this.addField(field);
+            this.backgroundField = field;
+        }
+        this.refreshRenderedDoc();
+    }
+
     matches = (): Array<number> => [];
 
-    makeClone(parent?: DynamicField) {
+    makeClone(parent?: DynamicField, withContent: boolean = false) {
         const dynClone = super.makeClone(parent) as DynamicField;
-        dynClone._subfields = this.getSubfields.map(cloneField => cloneField.makeClone(dynClone));
+        dynClone._subfields = this.getSubfields.map(field => {
+            if (field === this.backgroundField) {
+                const backgroundField: TemplateField = field.makeClone(dynClone, true);
+                dynClone.makeBackgroundField(backgroundField);
+                return backgroundField;
+            } else {
+                return field.makeClone(dynClone, withContent)
+            }
+        });
         if (dynClone._renderDoc) {
             dynClone._renderDoc[DocData].data = new List<Doc>(dynClone.getSubfields.filter(sub => sub.renderedDoc).map(sub => sub.renderedDoc!));
         }
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/StaticContentField.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/StaticContentField.ts
index 420d03076..112f37cc6 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/StaticContentField.ts
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/StaticContentField.ts
@@ -37,6 +37,11 @@ export class ImageTemplateField extends StaticContentField {
         this._renderDoc = Docs.Create.ImageDocument(this._content, settings.opts);
         return this;
     }
+
+    updateDocSetting(setting: string, newVal: string) {
+        if (setting === 'backgroundColor') return;
+        super.updateDocSetting(setting, newVal);
+    }
 }
 
 export class TextTemplateField extends StaticContentField {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField.ts
index e2779968d..bc6b13c76 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField.ts
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField.ts
@@ -67,22 +67,23 @@ export abstract class TemplateField {
 
     setTitle = (title: string) => {
         this._title = title;
-        this._renderDoc && (this._renderDoc.title = title);
+        this.settings.title = title;
+        if (this._renderDoc) this._renderDoc.title = title
     };
     getTitle = () => this._title;
 
-    updateDocSetting = (setting: string, newVal: string) => {
+    updateDocSetting(setting: string, newVal: string) {
         if (this._renderDoc) this._renderDoc[setting] = newVal;
         const settings: {[s: string]: string } = {[setting]: newVal}
         Object.assign(this.settings.opts, settings);
     }
 
-    makeClone(parent?: TemplateField) {
+    makeClone(parent?: TemplateField, withContent: boolean = false) {
         const settings: FieldSettings = structuredClone(this._settings);
         const cloned = TemplateField.CreateField(settings, this._id, parent, true); // create a value for this.Document/subfields that we want to ignore
-        this._renderDoc && Doc.MakeClone(this._renderDoc).then(({ clone }) => (cloned._renderDoc = clone));
-        cloned._title = this._title;
+        cloned.setTitle(this._title);
         cloned._dimensions = this._dimensions;
+        withContent && cloned.setContent(this.getContent());
         return cloned;
     }
 
@@ -91,9 +92,8 @@ export abstract class TemplateField {
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     changeFieldType = (newType: ViewType): TemplateField => {
-        const newSettings = this._settings;
-        newSettings.viewType = newType;
-        const newField = TemplateField.CreateField(newSettings, this._id, this._parent, true);
+        this._settings.viewType = newType;
+        const newField = TemplateField.CreateField(this._settings, this._id, this._parent, true);
         this._parent?.exchangeFields(newField, this);
         return newField;
     };
diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index 3d6942e6f..5625f2f56 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -105,7 +105,7 @@
     display: flex;
     height: 100%;
     img {
-        object-fit: contain;
+        // object-fit: contain;
         height: 100%;
     }
 
-- 
cgit v1.2.3-70-g09d2


From e62f51bacace3d91f388202135426445721097cc Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 11 May 2025 16:52:17 -0400
Subject: menubutton component

---
 src/client/apis/gpt/GPT.ts                         |  4 +-
 .../DataVizBox/DocCreatorMenu/DocCreatorMenu.scss  | 34 ++++----
 .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx   | 32 ++------
 .../DocCreatorMenu/Menu/DocCreatorMenuButton.tsx   | 41 ++++++++++
 .../DocCreatorMenu/Menu/TemplateEditingWindow.tsx  | 90 +++++++++++-----------
 .../DocCreatorMenu/Menu/TemplatePreviewGrid.tsx    |  8 +-
 .../nodes/DataVizBox/DocCreatorMenu/Template.ts    |  2 +-
 7 files changed, 122 insertions(+), 89 deletions(-)
 create mode 100644 src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/DocCreatorMenuButton.tsx

(limited to 'src/client/apis/gpt')

diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index d7b378958..455551f40 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -107,13 +107,13 @@ const callTypeMap: { [type in GPTCallType]: GPTCallOpts } = {
         prompt: 'You will be given a list of field descriptions for one or more templates in the format {field #0: “description”}{field #1: “description”}{...}, and a list of column descriptions in the format {“title”: “description”}{...}. Your job is to match columns with fields based on their descriptions. Your output should be in the following JSON format: {“template_title”:{“#”: “title”, “#”: “title”, “#”: “title” …}, “template_title”:{“#”: “title”, “#”: “title”, “#”: “title” …}} where “template_title” is the templates title as specified in the description provided,  # represents the field # and “title” the title of the column assigned to it. A filled out example might look like {“fivefield2”:{“0”:”Name”, “1”:”Image”, “2”:”Caption”, “3”:”Position”, “4”:”Stats”}, “fivefield3”:{0:”Image”, 1:”Name”, 2:”Caption”, 3:”Stats”, 4:”Position”}. Include one object for each template. IT IS VERY IMPORTANT THAT YOU ONLY INCLUDE TEXT IN THE FORMAT ABOVE, WITH NO ADDITIONS WHATSOEVER. Do not include extraneous ‘#’ characters, ‘column’ for columns, or ‘template’ for templates: ONLY THE TITLES AND NUMBERS. There should never be one column assigned to more than one field (ie. if the “name” column is assigned to field 1, it can’t be assigned to any other fields) . Do this for each template whose fields are described. The descriptions are as follows:',
     },
     vizsum: {
-        model: 'gpt-4-turbo',
+        model: 'gpt-4.1',
         maxTokens: 512,
         temp: 0.5,
         prompt: 'Your job is to provide brief descriptions for columns in a dataset based on example rows. Your descriptions should be geared towards how each column’s data might fit together into a visual template. Would they make good titles, main focuses, captions, descriptions, etc. Pay special attention to connections between columns, i.e. is there one column that specifically seems to describe/be related to another more than the rest? You should provide your analysis in JSON format like so: {“col1”:”description”, “col2”:”description”, …}. DO NOT INCLUDE ANY OTHER TEXT, ONLY THE JSON.',
     },
     vizsum2: {
-        model: 'gpt-4-turbo',
+        model: 'gpt-4.1',
         maxTokens: 512,
         temp: 0.5,
         prompt: 'Your job is to provide structured information on columns in a dataset based on example rows. You will categorize each column in two ways: by type and size. The size categories are as follows: tiny (one or two words), small (a sentence/multiple words), medium (a few sentences), large (a longer paragraph), and huge (a very long or multiple paragraphs). The type categories are as follows: visual (links/file paths to images, pdfs, maps, or any other visual media type), and text (plain text that isn’t a link/file path). Visual media should be assumed to have size “medium” “large” or “huge”. You will give your responses in JSON format, like so: {“title (of column)”:{“type”:”text”, “size”:”small”}, “title (of column)”:{“type”:”visual”, “size”:”medium”}, …}. DO NOT INCLUDE ANY OTHER TEXT, ONLY THE JSON.',
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
index 9fb973265..2a1a79029 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
@@ -27,7 +27,6 @@
     background: whitesmoke; 
     background-color: rgb(50, 50, 50);
     border-radius: 5px;
-    border: 1px solid rgb(180, 180, 180);
     padding: 0px;
     font-size: 13px;
     //box-shadow: 3px 3px rgb(29, 29, 31);
@@ -35,6 +34,24 @@
     &:hover {
         box-shadow: none;
     }
+
+    &.no-margin {
+        margin: 0px;
+    }
+
+    &.border {
+        border: 1px solid rgb(180, 180, 180);
+    }
+
+    &.float-right {
+        float: right;
+        margin-left: auto;
+    }
+
+    &.absolute-right {
+        position: absolute;
+        right: 0px;
+    }
      
     &.right{
         margin-left: 0px;
@@ -403,6 +420,8 @@
     margin-left: 5%;
     background-color: rgb(50, 50, 50);
     border-radius: 5px;
+    overflow: hidden;
+    resize: none;
 }
 
 .docCreatorMenu-variations-tab {
@@ -459,19 +478,6 @@
     width: 100%;
 }
 
-.section-reveal-options {
-    margin-top: 0px;
-    margin-bottom: 0px;
-    margin-right: 0px;
-    margin-left: auto;
-    border: 0px;
-    background: none;
-
-    &.float-right {
-        float: right;
-    }
-}
-
 .docCreatorMenu-templates-displays {
     display: flex;
     flex-direction: column;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index 8a98399b6..2e4b81253 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -37,6 +37,7 @@ import { StaticContentField } from './TemplateFieldTypes/StaticContentField';
 import { TemplateMenuAIUtils } from './Backend/TemplateMenuAIUtils'
 import { TemplatePreviewGrid } from './Menu/TemplatePreviewGrid';
 import { TemplateEditingWindow } from './Menu/TemplateEditingWindow';
+import { DocCreatorMenuButton } from './Menu/DocCreatorMenuButton';
 
 export enum LayoutType {
     FREEFORM = 'Freeform',
@@ -983,9 +984,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
                     }
                 }))}>
                     <span className="field-title">{`${field.title} Field`}</span>
-                    <button className="docCreatorMenu-menu-button section-reveal-options no-margin" onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))} style={{ position: 'absolute', right: '0px' }}>
-                        <FontAwesomeIcon icon="minus" />
-                    </button>
+                    <DocCreatorMenuButton icon={'minus'} styles={'no-margin absolute-right'} function={() => this.removeField(field)}/>
                 </div>
                 { this._collapsedCols.includes(field.title) ? null :
                     <>
@@ -1042,26 +1041,16 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
         return (
             <div className="docCreatorMenu-dashboard-view">
                 <div className="topbar">
-                    <button className="docCreatorMenu-menu-button section-reveal-options" onPointerDown={e => this.setUpButtonClick(e, this.addField)}>
-                        <FontAwesomeIcon icon="plus" />
-                    </button>
-                    <button className="docCreatorMenu-menu-button section-reveal-options float-right" onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => (this._menuContent = 'templates')))}>
-                        <FontAwesomeIcon icon="arrow-left" />
-                    </button>
+                    <DocCreatorMenuButton icon={'plus'} function={this.addField}/>
+                    <DocCreatorMenuButton icon={'arrow-left'} styles={'float-right'} function={() => runInAction(() => (this._menuContent = 'templates'))}/>
                 </div>
                 <div className="panels-container">{this.fieldsInfos.map((field, i) => fieldPanel(field, i))}</div>
             </div>
         );
     }
 
-    @computed get editingView() {
-        return <TemplateEditingWindow
-                    setupButtonClick={this.setUpButtonClick} 
-                    template={this._currEditingTemplate as Template}
-                    menu={this}
-                />
-    }
-
+    @computed get editingView() { return <TemplateEditingWindow template={this._currEditingTemplate as Template} menu={this} /> }
+    
     get renderSelectedViewType() {
         switch (this._menuContent) {
             case 'templates': 
@@ -1073,14 +1062,11 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
                                 menu={this} 
                                 loading={this._GPTLoading}
                                 optionsButtonOpts={['gear', () => (this._menuContent = 'dashboard')]}
-                                setupButtonClick={this.setUpButtonClick} 
                                 templates={this._suggestedTemplates}
                             />
                             <div className="docCreatorMenu-GPT-options">
                                 <div className="docCreatorMenu-GPT-options-container">
-                                    <button className="docCreatorMenu-menu-button" onPointerDown={e => this.setUpButtonClick(e, () => this.generatePresetTemplates())}>
-                                        <FontAwesomeIcon icon="arrows-rotate" />
-                                    </button>
+                                    <DocCreatorMenuButton icon={'arrows-rotate'} styles={'border'} function={this.generatePresetTemplates}/>
                                 </div>
                             </div>
                         </div>
@@ -1166,9 +1152,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
                                 {topButton('magnifying-glass', 'options', onOptionsSelected, 'middle')}
                                 {topButton('bars', 'saved', onSavedSelected, 'right')}
                             </div>
-                            <button className="docCreatorMenu-menu-button close-menu" onPointerDown={e => this.setUpButtonClick(e, this.closeMenu)}>
-                                <FontAwesomeIcon icon="minus" />
-                            </button>
+                            <DocCreatorMenuButton icon={'minus'} styles={'float-right'} function={this.closeMenu}/>
                         </div>
                         {this.renderSelectedViewType}
                     </div>
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/DocCreatorMenuButton.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/DocCreatorMenuButton.tsx
new file mode 100644
index 000000000..1d8139d40
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/DocCreatorMenuButton.tsx
@@ -0,0 +1,41 @@
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { ObservableReactComponent } from "../../../../ObservableReactComponent";
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { setupMoveUpEvents, returnFalse } from "../../../../../../ClientUtils";
+import { emptyFunction } from "../../../../../../Utils";
+import { undoable } from "../../../../../util/UndoManager";
+import { observer } from "mobx-react";
+
+interface DocCreatorMenuButtonProps {
+    icon: IconProp;
+    function: () => any;
+    styles?: string;
+}
+
+@observer
+export class DocCreatorMenuButton extends ObservableReactComponent<DocCreatorMenuButtonProps> {
+
+    setupButtonClick = (e: React.PointerEvent, func: (...args: any) => void) => {
+        setupMoveUpEvents(
+            this,
+            e,
+            returnFalse,
+            emptyFunction,
+            undoable(clickEv => {
+                clickEv.stopPropagation();
+                clickEv.preventDefault();
+                func();
+            }, 'create docs')
+        );
+    };
+
+    render() {
+
+        return (
+            <button className={`docCreatorMenu-menu-button ${this._props.styles}`} onPointerDown={e => this.setupButtonClick(e, async () => this._props.function())}>
+                <FontAwesomeIcon icon={this._props.icon} />
+            </button>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
index df6b791c7..0434d0ccb 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
@@ -15,11 +15,11 @@ import { TemplateMenuAIUtils } from "../Backend/TemplateMenuAIUtils";
 import { ObservableReactComponent } from "../../../../ObservableReactComponent";
 import { IDisposer } from "mobx-utils";
 import { ImageField } from "../../../../../../fields/URLField";
+import { DocCreatorMenuButton } from "./DocCreatorMenuButton";
 
 interface TemplateEditingWindowProps {
     menu: DocCreatorMenu;
     template: Template;
-    setupButtonClick: (e: React.PointerEvent, func: () => void) => void;
 }
 
 @observer
@@ -27,7 +27,8 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
 
     private fireflyPrompt: string = 'Use this template to generate an empty baseball card template.';
     private previewWindow: HTMLDivElement | null = null;
-    private _disposers: { [name: string]: IDisposer } = {};
+    private disposers: { [name: string]: IDisposer } = {};
+    private promptInput: HTMLTextAreaElement | null = null;
 
     @observable _loading: boolean = false;
     @observable _variationsTabOpen: boolean = false;
@@ -35,7 +36,7 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
     @observable _variations: Template[] = [];
 
     componentDidMount(): void {
-        this._disposers.windowDimensions = reaction(() => 
+        this.disposers.windowDimensions = reaction(() => 
             this._props.menu._resizing, 
             () => { this.forceUpdate() }, 
             { fireImmediately: true }
@@ -43,7 +44,12 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
     }
 
     componentWillUnmount() {
-        Object.values(this._disposers).forEach(disposer => disposer?.());
+        Object.values(this.disposers).forEach(disposer => disposer?.());
+    }
+
+    setPromptInputRef: React.LegacyRef<HTMLTextAreaElement> = (node) => {
+        this.promptInput = node;
+        this.forceUpdate();
     }
 
     setContainerRef: React.LegacyRef<HTMLDivElement> = (node) => {
@@ -58,6 +64,24 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
         } else if (this.previewWindow && !open) {
             this.previewWindow.style.height = String(Number(this.previewWindow.clientHeight) * 5/3);
         }
+        this.forceUpdate();
+    }
+
+    generateVariations = async () => {
+        this._props.menu._variations = [];
+        this._loading = true;
+        this._variationURLs = await this._props.menu.generateVariations(this._props.template.clone(false).getRenderedDoc()!, this.fireflyPrompt);
+        this._variationURLs.forEach(url => {
+            const newTemplate: Template = this._props.template.clone(true);
+            this._props.menu._variations.push(newTemplate);
+        });
+        this._loading = false;
+        setTimeout(() => {
+            this._variationURLs.forEach((url, i) => {
+                this._props.menu._variations[i].setImageAsBackground(url, true);
+            });
+            this.forceUpdate();
+        });
     }
 
     get fireflyVariationsTab() {
@@ -71,37 +95,27 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
                     loading={this._loading}
                     templates={this._props.menu._variations}
                     optionsButtonOpts={['gear', () => {}]}
-                    setupButtonClick={this._props.setupButtonClick}
                     previewBoxRightButtonOpts={['gear', (template: Template) => {this.forceUpdate();}]}
                 />
                 <div className="docCreatorMenu-section">
                     <div className="docCreatorMenu-variation-prompt-input">
                         <textarea
                             className="docCreatorMenu-variation-prompt-input-textbox"
+                            ref={this.setPromptInputRef}
                             onChange={e => this.fireflyPrompt = e.target.value}
+                            onInput={() => {
+                                if (this.promptInput !== null) {
+                                    this.promptInput.style.height = 'auto';
+                                    this.promptInput.style.height = this.promptInput.scrollHeight + 'px';
+                                }
+                            }}
                             defaultValue={''}
                             placeholder={'Enter a custom prompt here (optional)'}
                         />
-                        <button className="docCreatorMenu-menu-button" 
-                            onPointerDown={e => this._props.setupButtonClick(e, async () => {
-                                this._props.menu._variations = [];
-                                this._loading = true;
-                                this._variationURLs = await this._props.menu.generateVariations(this._props.template.clone(false).getRenderedDoc()!, this.fireflyPrompt);
-                                this._variationURLs.forEach(url => {
-                                    const newTemplate: Template = this._props.template.clone(true);
-                                    this._props.menu._variations.push(newTemplate);
-                                });
-                                this._loading = false;
-                                setTimeout(() => {
-                                    this._variationURLs.forEach((url, i) => {
-                                        this._props.menu._variations[i].setImageAsBackground(url, true);
-                                    });
-                                    this.forceUpdate();
-                                });
-                            })
-                        }>
-                            <FontAwesomeIcon icon="arrows-rotate" />
-                        </button>
+                        <DocCreatorMenuButton icon={'arrows-rotate'} styles={'border'} function={this.generateVariations}/>
+                    </div>
+                    <div className='docCreatorMenu-variation-options-container'>
+
                     </div>
                 </div>
             </>
@@ -146,25 +160,13 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
                     {this.renderedDocPreview}
                     {this._variationsTabOpen ? this.fireflyVariationsTab : null}
                     <div className="right-buttons-panel">
-                        <button
-                            className="docCreatorMenu-menu-button section-reveal-options top-right"
-                            onPointerDown={e =>
-                                this._props.setupButtonClick(e, () => {
-                                    if (this._props.template === this._props.menu._selectedTemplate) {
-                                        this._props.menu.updateRenderedPreviewCollection(this._props.template);
-                                    }
-                                    this._props.menu.setExpandedView(undefined);
-                                })
-                            }>
-                            <FontAwesomeIcon icon="minimize" />
-                        </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();
-                            })}>
-                            <FontAwesomeIcon icon="lightbulb" />
-                        </button>
+                        <DocCreatorMenuButton icon={'minimize'} function={() => {
+                                if (this._props.template === this._props.menu._selectedTemplate) {
+                                    this._props.menu.updateRenderedPreviewCollection(this._props.template);
+                                }
+                                this._props.menu.setExpandedView(undefined);
+                            }}/>
+                        <DocCreatorMenuButton icon={'lightbulb'} function={() => this.setVariationTab(!this._variationsTabOpen)}/>
                     </div>
                 </div>
             </div>
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx
index e78109b62..84ca6546d 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx
@@ -11,6 +11,7 @@ import { observer } from "mobx-react";
 import { DocCreatorMenu } from "../DocCreatorMenu";
 import { TemplatePreviewBox } from "./TemplatePreviewBox";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { DocCreatorMenuButton } from "./DocCreatorMenuButton";
 
 export interface SuggestedTemplatesProps {
     menu: DocCreatorMenu;
@@ -20,7 +21,6 @@ export interface SuggestedTemplatesProps {
     optionsButtonOpts?: [IconProp, (...args: any) => any];
     previewBoxLeftButtonOpts?: [IconProp, (...args: any) => any];
     previewBoxRightButtonOpts?: [IconProp, (...args: any) => any];
-    setupButtonClick: (e: React.PointerEvent, func: () => void) => void;
 }
 
 @observer
@@ -31,9 +31,9 @@ export class TemplatePreviewGrid extends ObservableReactComponent<SuggestedTempl
             <div className="docCreatorMenu-section">
                 <div className="docCreatorMenu-section-topbar">
                     <div className="docCreatorMenu-section-title">{this.props.title}</div>
-                    {this._props.optionsButtonOpts ? (<button className="docCreatorMenu-menu-button section-reveal-options" onPointerDown={e => this.props.setupButtonClick(e, () => runInAction(this._props.optionsButtonOpts![1]))}>
-                        <FontAwesomeIcon icon={this._props.optionsButtonOpts[0] as IconProp} />
-                    </button>) : null}
+                    {this._props.optionsButtonOpts ? 
+                        <DocCreatorMenuButton icon={this._props.optionsButtonOpts[0] as IconProp} styles={'float-right'} function={() => runInAction(this._props.optionsButtonOpts![1])}/> 
+                        : null}
                 </div>
                 <div className="docCreatorMenu-templates-preview-window">
                     {this._props.loading ? 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts
index 10724c9f7..7ff521f18 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts
@@ -81,7 +81,7 @@ export class Template {
 
     isValidTemplate = (cols: Col[]) => {
         const maxMatches = this.maxMatches(this.getMatches(cols));
-        return maxMatches === this.contentFields.length;
+        return maxMatches === this.contentFields.length && this.title !== 'template_framework';
     };
 
     applyConditionalLogicToField = (field: TemplateField) => {
-- 
cgit v1.2.3-70-g09d2