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 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 => { - const generateAndLoadImage = async (fieldNum: string, column: Col, prompt: string) => { + public static renderGPTImageCall = async (template: Template, col: Col, fieldNumber: number): Promise => { + 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