From 74e0744cfd3be6d375ff47f0d32588996074f956 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Fri, 8 Nov 2024 00:07:59 -0500
Subject: image generation working

---
 .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx   | 73 ++++++++++++++--------
 1 file changed, 47 insertions(+), 26 deletions(-)

(limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index 48f87ebfe..3cdde90d5 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -499,14 +499,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
      */
     applyGPTContentToTemplate = async (template: Template, assignments: { [field: string]: Col }): Promise<Template | undefined> => {
 
-        const generateAndLoadImage = async (fieldNum: string, col: Col, prompt: string) => {
-            const url = await this.generateGPTImage(prompt);
-            const field: Field = template.getFieldByID(Number(fieldNum));
-
-            field.setContent(url ?? '', FieldContentType.IMAGE);
-            field.setTitle(col.title);
-        };
-
         const GPTTextCalls = Object.entries(assignments).filter(([str, col]) => col.type === TemplateFieldType.TEXT && this._userCreatedFields.includes(col));
         const GPTIMGCalls = Object.entries(assignments).filter(([str, col]) => col.type === TemplateFieldType.VISUAL && this._userCreatedFields.includes(col));
 
@@ -520,24 +512,14 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             await Promise.all(promises);
         }
 
+        console.log(GPTIMGCalls)
+
         if (GPTIMGCalls.length) {
-            try {
-                await Promise.all(
-                    GPTIMGCalls.map(async ([fieldNum, col]) => {
-                        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: ' +
-                            fieldContent +
-                            ' **** The user prompt is: ' +
-                            col.desc;
-
-                        const prompt = await gptAPICall(sysPrompt, GPTCallType.COMPLETEPROMPT);
-
-                        generateAndLoadImage(fieldNum, col, prompt);
-                    })
-                );
-            } catch (e) {
-                console.log(e);
-            }
+            const promises = GPTIMGCalls.map(async ([fieldNum, col]) => {
+                return this.renderGPTImageCall(template, col, Number(fieldNum));
+            });
+
+            await Promise.all(promises);
         };
 
         return template;
@@ -633,6 +615,34 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         });
     };
 
+    renderGPTImageCall = async (template: Template, col: Col, fieldNum: number): Promise<boolean> => {
+        const generateAndLoadImage = async (fieldNum: string, col: Col, prompt: string) => {
+            const url = await this.generateGPTImage(prompt);
+            console.log('url: ', url)
+            const field: Field = template.getFieldByID(Number(fieldNum));
+
+            field.setContent(url ?? '', FieldContentType.IMAGE);
+            field.setTitle(col.title);
+        };
+
+        let fieldContent: string = template.compiledContent;
+
+        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: ' +
+                fieldContent +
+                ' **** The user prompt is: ' +
+                col.desc;
+
+            const prompt = await gptAPICall(sysPrompt, GPTCallType.COMPLETEPROMPT);
+
+            await generateAndLoadImage(String(fieldNum), col, prompt);
+        } catch (e) {
+            console.log(e);
+        }
+        return true;
+    }
+
     renderGPTTextCall = async (template: Template, col: Col, fieldNum: number): Promise<boolean> => {
         const wordLimit = (size: TemplateFieldSize) => {
             switch (size) {
@@ -706,7 +716,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                 field.setContent(content[title]);
             });
     
-            const gptPromises = this._userCreatedFields.map(field => {
+            const gptPromises = this._userCreatedFields.filter(field => field.type === TemplateFieldType.TEXT).map(field => {
                 const title = field.title;
                 const templateField = templateCopy.getFieldByTitle(title);
                 if (templateField === undefined) { return };
@@ -714,8 +724,19 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     
                 return this.renderGPTTextCall(templateCopy, field, templatefieldID);
             });
+
+            const imagePromises = this._userCreatedFields.filter(field => field.type === TemplateFieldType.VISUAL).map(field => {
+                const title = field.title;
+                const templateField = templateCopy.getFieldByTitle(title);
+                if (templateField === undefined) { return };
+                const templatefieldID = templateField.getID;
+    
+                return this.renderGPTImageCall(templateCopy, field, templatefieldID);
+            });
     
             await Promise.all(gptPromises);
+
+            await Promise.all(imagePromises);
     
             return templateCopy.getRenderedDoc();
         };
-- 
cgit v1.2.3-70-g09d2