From 5bbd63ae6c581a945c9b7000d330de87398f8f36 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Thu, 5 Sep 2024 02:27:13 -0400 Subject: fingers crossed --- .../views/nodes/DataVizBox/DocCreatorMenu.tsx | 190 ++++++++++++++++----- 1 file changed, 146 insertions(+), 44 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx index 191b387c4..33d9a8827 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx @@ -31,6 +31,7 @@ import { dropActionType } from '../../../util/DropActionTypes'; import { ImageBox } from '../ImageBox'; import { a } from '@react-spring/web'; import { RichTextMenu } from '../formattedText/RichTextMenu'; +import e from 'cors'; export enum LayoutType { Stacked = 'stacked', @@ -137,8 +138,22 @@ export class DocCreatorMenu extends ObservableReactComponent { @computed get fieldsInfos(): Col[] { const colInfo = this._dataViz?.colsInfo; - return this.selectedFields.map(field => {return {title: field, type: colInfo?.get(field)?.type ?? TemplateFieldType.UNSET, desc: colInfo?.get(field)?.desc ?? '', size: colInfo?.get(field)?.size ?? TemplateFieldSize.MEDIUM, defaultContent: colInfo?.get(field)?.defaultContent ?? ''}}); - //.concat(this._columns) + return this.selectedFields.map(field => { + const fieldInfo = colInfo?.get(field); + + const col: Col = { + title: field, + type: fieldInfo?.type ?? TemplateFieldType.UNSET, + desc: fieldInfo?.desc ?? '', + size: fieldInfo?.size ?? TemplateFieldSize.MEDIUM + }; + + if (fieldInfo?.defaultContent !== undefined) { + col.defaultContent = fieldInfo.defaultContent; + } + + return col; + }).concat(this._columns); } @computed get canMakeDocs(){ @@ -463,7 +478,7 @@ export class DocCreatorMenu extends ObservableReactComponent { } }; - setFieldType = (column: Col, type: TemplateFieldType) => { + setColType = (column: Col, type: TemplateFieldType) => { if (this.selectedFields.includes(column.title)) { this._dataViz?.setColumnType(column.title, type); } else { @@ -472,7 +487,7 @@ export class DocCreatorMenu extends ObservableReactComponent { this.forceUpdate(); }; - setFieldSize = (column: Col, size: TemplateFieldSize) => { + setColSize = (column: Col, size: TemplateFieldSize) => { if (this.selectedFields.includes(column.title)) { this._dataViz?.setColumnSize(column.title, size); } else { @@ -481,11 +496,12 @@ export class DocCreatorMenu extends ObservableReactComponent { this.forceUpdate(); }; - setFieldDesc = (column: Col, desc: string) => { + setColDesc = (column: Col, desc: string) => { if (this.selectedFields.includes(column.title)) { this._dataViz?.setColumnDesc(column.title, desc); } else { column.desc = desc; + console.log(column, column.desc) } this.forceUpdate(); }; @@ -578,11 +594,45 @@ export class DocCreatorMenu extends ObservableReactComponent { // return new Doc; // } - createEmptyTemplate = (template: TemplateDocInfos, assignments: {[field: string]: Col}): Doc => { + fillPresetTemplate = async(template: TemplateDocInfos, assignments: {[field: string]: Col}): Promise => { + 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 fields: Doc[] = []; - Object.entries(assignments).forEach(([f, col]) => { + const GPTAssignments = Object.entries(assignments).filter(([f, col]) => this._columns.includes(col)); + const nonGPTAssignments: [string, Col][] = Object.entries(assignments).filter(a => !GPTAssignments.includes(a)); + + const stringifyGPTInfo = (): string => { + let string: string = '*** COLUMN INFO:'; + GPTAssignments.forEach(([fieldNum, col]) => { + `--- title: ${col.title}, prompt: ${col.desc}, word limit: ${wordLimit(col.size)} words, assigned field: ${fieldNum} ---` + }); + return string += ' ***'; + }; + + const GPTAssignmentString = stringifyGPTInfo(); + console.log('assignment string', GPTAssignmentString); + + let fieldContent: string = ''; + + Object.entries(nonGPTAssignments).forEach(([f, strCol]) => { const field: Field = template.fields[Number(f)]; + const col = strCol[1]; const doc = (col.type === TemplateFieldType.VISUAL ? FieldFuncs.ImageField : FieldFuncs.TextField)({ tl: field.tl, @@ -594,6 +644,8 @@ export class DocCreatorMenu extends ObservableReactComponent { field.opts ); + fieldContent += `--- Field #${f} (title: ${col.title}): ${col.defaultContent ?? ''} ---` + fields.push(doc); }); @@ -611,21 +663,67 @@ export class DocCreatorMenu extends ObservableReactComponent { fields.push(doc); }); - const renderedTemplate = Docs.Create.FreeformDocument(fields, { - _height: template.height, - _width: template.width, - title: template.title, - backgroundColor: template.opts.backgroundColor, - _layout_borderRounding: `${template.opts.cornerRounding}px` ?? '0px', - borderWidth: template.opts.borderWidth, - borderColor: template.opts.borderColor, - x: 400, - y: 400, - }); + const createMainDoc = (): Doc => { + const main = Docs.Create.FreeformDocument(fields, { + _height: template.height, + _width: template.width, + title: template.title, + backgroundColor: template.opts.backgroundColor, + _layout_borderRounding: `${template.opts.cornerRounding}px` ?? '0px', + borderWidth: template.opts.borderWidth, + borderColor: template.opts.borderColor, + x: 400, + y: 400, + }); - const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView; - mainCollection.addDocument(renderedTemplate); - return renderedTemplate; + const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView; + mainCollection.addDocument(main); + + return main; + } + + console.log('field content', fieldContent) + + if (GPTAssignments.length) { + + try { + const prompt = fieldContent + GPTAssignmentString; + + const res = await gptAPICall(prompt, GPTCallType.FILL); + + if (res){ + console.log('response', res); + + const assignments: {[title: string]: {number: string, content: string}} = JSON.parse(res); + console.log('assignments', assignments); + Object.entries(assignments).forEach(([title, info]) => { + const field: Field = template.fields[Number(info.number)]; + const col = this.getColByTitle(title); + + const doc = (col.type === TemplateFieldType.VISUAL ? FieldFuncs.ImageField : FieldFuncs.TextField)({ + tl: field.tl, + br: field.br }, + template.height, + template.width, + col.title, + info.content ?? '', + field.opts + ); + + fields.push(doc); + }); + + return createMainDoc(); + } + } catch(err) { + console.log(err); + } + + } else { + return createMainDoc(); + } + + return new Doc; }; compileFieldDescriptions = (templates: TemplateDocInfos[]): string => { @@ -693,17 +791,21 @@ export class DocCreatorMenu extends ObservableReactComponent { return []; }; - generatePresetTemplates = async() => { + generatePresetTemplates = async () => { const cols = this.fieldsInfos; const templates = this.findValidTemplates(cols, TemplateLayouts.allTemplates); - const assignments: [TemplateDocInfos, {[field: number]: Col}][] = await this.assignColsToFields(templates, cols); - const renderedTemplates: Doc[] = []; - assignments.forEach(([template, assignments]) => { - renderedTemplates.push(this.createEmptyTemplate(template, assignments)); - }); - - setTimeout(() => {this.setGSuggestedTemplates(renderedTemplates)}); - } + + const assignments: [TemplateDocInfos, { [field: number]: Col }][] = await this.assignColsToFields(templates, cols); + + const renderedTemplatePromises: Promise[] = assignments.map(([template, assignments]) => + this.fillPresetTemplate(template, assignments) + ); + + const renderedTemplates: Doc[] = await Promise.all(renderedTemplatePromises); + + setTimeout(() => { this.setGSuggestedTemplates(renderedTemplates) }); + }; + get templatesPreviewContents(){ const renderedTemplates: Doc[] = []; @@ -1067,15 +1169,15 @@ export class DocCreatorMenu extends ObservableReactComponent { {field.type === TemplateFieldType.UNSET ? Select media type : null} {field.type === TemplateFieldType.TEXT ? 'Text Field' : field.type === TemplateFieldType.VISUAL ? 'File Field' : ''}
- {this.setFieldType(field, TemplateFieldType.TEXT)}}/> + {this.setColType(field, TemplateFieldType.TEXT)}}/>
Text
- {this.setFieldType(field, TemplateFieldType.VISUAL)}}/> + {this.setColType(field, TemplateFieldType.VISUAL)}}/>
File
-