diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu')
6 files changed, 36 insertions, 43 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss index b849c044d..98d630dae 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss @@ -45,9 +45,10 @@ font-size: 12px; width: 18px; height: 18px; - border-radius: 2px; font-size: 12px; margin-left: auto; + margin-right: 5px; + margin-bottom: 3px; } &.options { diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx index a08686a36..379a33a99 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx @@ -123,7 +123,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { }; @action setSuggestedTemplates = (templates: Template[]) => { this._suggestedTemplates = templates; - templates.forEach(template => { this._suggestedTemplatePreviews.push({template: template, doc: template.mainField.renderedDoc()}) }); //prettier-ignore + this._suggestedTemplatePreviews = templates.map(template => {return {template: template, doc: template.mainField.renderedDoc()}}); //prettier-ignore }; @computed get docsToRender() { @@ -497,7 +497,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { * @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 */ - applyGPTContentToTemplate = async (template: Template, assignments: { [field: string]: Col }): Promise<Template> => { + applyGPTContentToTemplate = async (template: Template, assignments: { [field: string]: Col }): Promise<Template | undefined> => { const wordLimit = (size: TemplateFieldSize) => { switch (size) { case TemplateFieldSize.TINY: @@ -526,6 +526,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { const GPTTextCalls = Object.entries(assignments).filter(([str, col]) => col.type === TemplateFieldType.TEXT); const GPTIMGCalls = Object.entries(assignments).filter(([str, col]) => col.type === TemplateFieldType.VISUAL); + if (!GPTTextCalls && !GPTIMGCalls) return; + const stringifyGPTInfo = (calls: [string, Col][]): string => { let string: string = '*** COLUMN INFO:'; calls.forEach(([fieldNum, col]) => { @@ -536,13 +538,14 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { const GPTTextAssignment = stringifyGPTInfo(GPTTextCalls); - let fieldContent: string = this.templateManager.getContentSummary(template); + + let fieldContent: string = template.compiledContent; if (GPTTextCalls.length) { try { const prompt = fieldContent + GPTTextAssignment; - const res = await gptAPICall(prompt, GPTCallType.FILL); + const res = await gptAPICall(`${++this._callCount}: ${prompt}`, GPTCallType.FILL); if (res) { const assignments: { [title: string]: { number: string; content: string } } = JSON.parse(res); @@ -586,11 +589,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { compileFieldDescriptions = (templates: Template[]): string => { let descriptions: string = ''; templates.forEach(template => { - console.log('title: ', template.mainField.getTitle()); descriptions += `---------- NEW TEMPLATE TO INCLUDE: The title is: ${template.mainField.getTitle()}. Its fields are: `; - template.contentFields.forEach(field => { - descriptions += `{Field #${field.getID}: ${field.getDescription}} `; - }); + descriptions += template.descriptionSummary; }); return descriptions; @@ -624,9 +624,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { try { const res = await gptAPICall(prompt, GPTCallType.TEMPLATE); - if (res && this._callCount === origCount) { + if (res) { const assignments: { [templateTitle: string]: { [fieldID: string]: string } } = JSON.parse(res); - console.log('assignments', assignments) const brokenDownAssignments: [Template, { [fieldID: number]: Col }][] = []; Object.entries(assignments).forEach(([tempTitle, assignment]) => { @@ -667,9 +666,9 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { const assignments: [Template, { [field: number]: Col }][] = await this.assignColsToFields(templates, cols); - const renderedTemplatePromises: Promise<Template>[] = assignments.map(([template, assignments]) => this.applyGPTContentToTemplate(template, assignments)); + const renderedTemplatePromises: Promise<Template | undefined>[] = assignments.map(([template, assignments]) => this.applyGPTContentToTemplate(template, assignments)); - //const renderedTemplates: Template[] = await Promise.all(renderedTemplatePromises); + const renderedTemplates: (Template | undefined)[] = await Promise.all(renderedTemplatePromises); setTimeout(() => { this.setSuggestedTemplates(templates); @@ -1029,13 +1028,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { } }; - addDocAsResult = (doc: Doc) => { - doc.x = this._pageX; - doc.y = this._pageY; - this.closeMenu(); - //!!! will need to add to main collection when I refactor - } - @computed get previewInfo(){ const docHeight: number = Number(this._fullyRenderedDocs[0]._height); @@ -1078,8 +1070,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { const collection: Doc = collectionFactory()(this._fullyRenderedDocs, { isDefaultTemplateDoc: true, - x: 40000, - y: 40000, _height: verticalSpan, _width: horizontalSpan, title: 'title', @@ -1243,9 +1233,9 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { get dashboardContents() { const sizes: string[] = ['tiny', 'small', 'medium', 'large', 'huge']; - const fieldPanel = (field: Col) => { + const fieldPanel = (field: Col, id: number) => { return ( - <div className="field-panel" key={field.title}> + <div className="field-panel" key={id}> <div className="top-bar"> <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' }}> @@ -1328,7 +1318,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { <FontAwesomeIcon icon="arrow-left" /> </button> </div> - <div className="panels-container">{this.fieldsInfos.map(field => fieldPanel(field))}</div> + <div className="panels-container">{this.fieldsInfos.map((field, i) => fieldPanel(field, i))}</div> </div> ); } @@ -1434,7 +1424,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { <div className="docCreatorMenu-top-buttons-container"> {topButton('lightbulb', 'templates', onPreviewSelected, 'left')} {topButton('magnifying-glass', 'options', onOptionsSelected, 'middle')} - {topButton('floppy-disk', 'saved', onSavedSelected, 'right')} + {topButton('bars', 'saved', onSavedSelected, 'right')} </div> <button className="docCreatorMenu-menu-button close-menu" onPointerDown={e => this.setUpButtonClick(e, this.closeMenu)}> <FontAwesomeIcon icon={'minus'} /> diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx index 3e0c8abcf..033900fe9 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx @@ -119,7 +119,6 @@ export class StaticField { switch (this.contentType) { case FieldContentType.STRING: const text = String(this.content); - console.log('made text') doc = Docs.Create.TextDocument(text, { title: this.title, text_fontColor: oldDoc ? String(oldDoc.color) : opts.color, @@ -131,7 +130,6 @@ export class StaticField { FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings, oldDoc); break; case FieldContentType.IMAGE: - console.log('made image') const url = String(this.content); doc = Docs.Create.ImageDocument(url, { title: this.title, diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx index 4c6425f23..7d32d26d1 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx @@ -32,6 +32,22 @@ export class Template { return new DynamicField(templateInfo, 1); } + get descriptionSummary(): string { + let summary: string = ''; + this.contentFields.forEach(field => { + summary += `--- Field #${field.getID} (title: ${field.getTitle()}): ${field.getDescription ?? ''} ---`; + }); + return summary; + } + + get compiledContent(): string { + let summary: string = ''; + this.contentFields.forEach(field => { + summary += `--- Field #${field.getID} (title: ${field.getTitle()}): ${field.getContent() ?? ''} ---`; + }); + return summary; + } + renderUpdates = () => { this.allFields.forEach(field => { field.updateRenderedDoc(field.renderedDoc()); @@ -45,7 +61,6 @@ export class Template { } getMatches = (cols: Col[]): number[][] => { - console.log(this.mainField.getTitle(), this.allFields) const numFields = this.contentFields.length; if (cols.length !== numFields) return []; diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx index d434e98b1..9b8ec64c0 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx @@ -109,6 +109,7 @@ export class TemplateLayouts { opts: { borderWidth: '8', borderColor: '#F8E71C', + backgroundColor: '#242425', }, }, { @@ -143,9 +144,9 @@ export class TemplateLayouts { viewType: ViewType.STATIC, tl: [-0.83, 0.2], br: [0.83, 0.95], - types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL], + types: [TemplateFieldType.TEXT], sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE], - description: 'A medium to large-sized field suitable for an image or longer text that should be the main focus, or share focus with field 1.', + description: 'A medium to large-sized field suitable for longer text that should contextualize field 1.', opts: { borderWidth: '8', borderColor: '#F8E71C', diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx index d47ae802c..890bc6f73 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx @@ -17,18 +17,6 @@ export class TemplateManager { return initializedTemplates; } - /** - * Provides a text summary of content currently filled into a template, formatted for GPT analysis. - * @param template the template to be summarized - */ - getContentSummary = (template: Template) => { - let summary: string = ''; - template.contentFields.forEach(field => { - summary += `--- Field #${field.getID} (title: ${field.getTitle()}): ${field.getContent() ?? ''} ---`; - }); - return summary; - } - getValidTemplates = (cols: Col[]): Template[] => { return this.templates.filter(template => template.isValidTemplate(cols)); } |