diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateManager.ts | 118 | ||||
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateMenuAIUtils.ts | 130 |
2 files changed, 248 insertions, 0 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateManager.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateManager.ts new file mode 100644 index 000000000..6fcca7e30 --- /dev/null +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateManager.ts @@ -0,0 +1,118 @@ +import { action, makeAutoObservable } from 'mobx'; +import { Col } from '../DocCreatorMenu'; +import { FieldSettings, TemplateField } from '../TemplateFieldTypes/TemplateField'; +import { Template } from '../Template'; +import { Doc, NumListCast } from '../../../../../../fields/Doc'; +import { DataVizBox } from '../../DataVizBox'; +import { TemplateFieldType } from '../TemplateBackend'; +import { TemplateMenuAIUtils } from './TemplateMenuAIUtils'; + +export type Conditional = { + field: string; + operator: '=' | '>' | '<' | 'contains'; + condition: string; + target: string; + attribute: string; + value: string; +} + +export class TemplateManager { + + templates: Template[] = []; + + conditionalFieldLogic: Record<string, Conditional[]> = {}; + + constructor(templateSettings: FieldSettings[]) { + makeAutoObservable(this); + this.templates = this.initializeTemplates(templateSettings); + } + + initializeTemplates = (templateSettings: FieldSettings[]) => templateSettings.map(settings => { + return new Template(settings)}); + + getValidTemplates = (cols: Col[]) => this.templates.filter(template => template.isValidTemplate(cols)); + + addTemplate = (newTemplate: Template) => this.templates.push(newTemplate); + + removeTemplate = (template: Template) => { + this.templates.splice(this.templates.indexOf(template), 1); + template.cleanup(); + }; + + addFieldCondition = (fieldTitle: string, condition: Conditional) => { + if (this.conditionalFieldLogic[fieldTitle] === undefined) { + this.conditionalFieldLogic[fieldTitle] = [condition]; + } else { + this.conditionalFieldLogic[fieldTitle].push(condition); + } + } + + removeFieldCondition = (fieldTitle: string, condition: Conditional) => { + if (this.conditionalFieldLogic[fieldTitle]) { + this.conditionalFieldLogic[fieldTitle] = this.conditionalFieldLogic[fieldTitle].filter(cond => cond !== condition); + } + } + + addDataField = (title: string) => { + this.templates.forEach(template => template.addDataField(title)); + } + + removeDataField = (title: string) => { + this.templates.forEach(template => template.removeDataField(title)); + } + + createDocsFromTemplate = action((dv: DataVizBox, template: Template, cols: Col[], debug: boolean = false) => { + const csvFields = Array.from(Object.keys(dv.records[0])); + + const processContent = async (content: { [title: string]: string }) => { + const templateCopy = template.clone(); + + csvFields + .filter(title => title) + .forEach(title => { + const field = templateCopy.getFieldByTitle(title); + field && field.setContent(content[title], field.viewType); + }); + + const gptFunc = (type: TemplateFieldType) => (type === TemplateFieldType.VISUAL ? TemplateMenuAIUtils.renderGPTImageCall : TemplateMenuAIUtils.renderGPTTextCall); + const applyGPTContent = async () => { + const promises = cols + .filter(field => field.AIGenerated) + .map(field => { + const templateField: TemplateField = templateCopy.getFieldByTitle(field.title) as TemplateField; + if (templateField !== undefined) { + return gptFunc(field.type)(templateCopy, field, templateField.getID); + } + return null; + }) + .filter(p => p !== null); + + await Promise.all(promises); + }; + + await applyGPTContent(); + + templateCopy.applyConditionalLogic(this.conditionalFieldLogic); + + return templateCopy.getRenderedDoc(); + }; + + const rowContents = debug + ? [{}, {}, {}, {}] + : NumListCast(dv.layoutDoc.dataViz_selectedRows).map(row => + csvFields.reduce( + (values, col) => { + values[col] = dv.records[row][col]; + return values; + }, + {} 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 new file mode 100644 index 000000000..9bc2bfce2 --- /dev/null +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateMenuAIUtils.ts @@ -0,0 +1,130 @@ +import { action } from "mobx"; +import { Upload } from "openai/resources"; +import { ClientUtils } from "../../../../../../ClientUtils"; +import { Networking } from "../../../../../Network"; +import { gptImageCall, gptAPICall, GPTCallType } from "../../../../../apis/gpt/GPT"; +import { Col } from "../DocCreatorMenu"; +import { TemplateFieldSize, TemplateFieldType } from "../TemplateBackend"; +import { TemplateField, ViewType } from "../TemplateFieldTypes/TemplateField"; +import { Template } from "../Template"; +import { Doc } from "../../../../../../fields/Doc"; +import { DrawingFillHandler } from "../../../../smartdraw/DrawingFillHandler"; +import { CollectionFreeFormView } from "../../../../collections/collectionFreeForm"; + +export class TemplateMenuAIUtils { + + public static generateGPTImage = async (prompt: string): Promise<string | undefined> => { + try { + const res = await gptImageCall(prompt); + + if (res) { + const result = (await Networking.PostToServer('/uploadRemoteImage', { sources: res })) as Upload.FileInformation[]; + const source = ClientUtils.prepend(result[0].accessPaths.agnostic.client); + return source; + } + } catch (e) { + console.log(e); + } + }; + + 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); + var field: TemplateField = template.getFieldByID(id); + + field.setContent(url ?? '', ViewType.IMG); + field = template.getFieldByID(id); + field.setTitle(col.title); + }; + + const fieldContent: string = template.compiledContent; + + try { + const sysPrompt = + `#${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(fieldNumber, prompt); + } catch (e) { + console.log(e); + } + return true; + }; + + public static renderGPTTextCall = async (template: Template, col: Col, fieldNum: number | undefined): Promise<boolean> => { + const wordLimit = (size: TemplateFieldSize) => { + switch (size) { + case TemplateFieldSize.TINY: + return 2; + case TemplateFieldSize.SMALL: + return 5; + case TemplateFieldSize.MEDIUM: + return 20; + case TemplateFieldSize.LARGE: + return 50; + case TemplateFieldSize.HUGE: + return 100; + default: + return 10; + } + }; + + const textAssignment = `--- title: ${col.title}, prompt: ${col.desc}, word limit: ${wordLimit(col.sizes[0])} words, assigned field: ${fieldNum} ---`; + + const fieldContent: string = template.compiledContent; + + try { + const prompt = fieldContent + textAssignment; + + const res = await gptAPICall(`${Math.random() * 100000}: ${prompt}`, GPTCallType.FILL); + + if (res) { + const assignments: { [title: string]: { number: string; content: string } } = JSON.parse(res); + Object.entries(assignments).forEach(([, /* title */ info]) => { + const field: TemplateField = template.getFieldByID(Number(info.number)); + + field.setContent(info.content ?? '', ViewType.TEXT); + field.setTitle(col.title); + }); + } + } catch (err) { + console.log(err); + } + + return true; + }; + + /** + * Populates a preset template framework with content from a datavizbox or any AI-generated content. + * @param template the preloaded template framework being filled in + * @param assignments a list of template field numbers (from top to bottom) and their assigned columns from the linked dataviz + * @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); + + if (GPTTextCalls.length) { + 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 ([id, col]) => { + return TemplateMenuAIUtils.renderGPTImageCall(template, col, Number(id)); + }); + + await Promise.all(promises); + } + + return template; + }; + +}
\ No newline at end of file |