diff options
4 files changed, 116 insertions, 39 deletions
diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts index 80cbc86b3..d64b38655 100644 --- a/src/client/apis/gpt/GPT.ts +++ b/src/client/apis/gpt/GPT.ts @@ -72,24 +72,24 @@ const callTypeMap: { [type: string]: GPTCallOpts } = { prompt: 'You will be given a list of field descriptions for one or more templates in the format {field #0: “description”}{field #1: “description”}{...}, and a list of column descriptions in the format {“title”: “description”}{...}. Your job is to match columns with fields based on their descriptions. Your output should be in the following JSON format: {“template_title”:{“#”: “title”, “#”: “title”, “#”: “title” …}, “template_title”:{“#”: “title”, “#”: “title”, “#”: “title” …}} where “template_title” is the templates title as specified in the description provided, # represents the field # and “title” the title of the column assigned to it. A filled out example might look like {“fivefield2”:{“0”:”Name”, “1”:”Image”, “2”:”Caption”, “3”:”Position”, “4”:”Stats”}, “fivefield3”:{0:”Image”, 1:”Name”, 2:”Caption”, 3:”Stats”, 4:”Position”}. Include one object for each template. IT IS VERY IMPORTANT THAT YOU ONLY INCLUDE TEXT IN THE FORMAT ABOVE, WITH NO ADDITIONS WHATSOEVER. Do not include extraneous ‘#’ characters, ‘column’ for columns, or ‘template’ for templates: ONLY THE TITLES AND NUMBERS. There should never be one column assigned to more than one field (ie. if the “name” column is assigned to field 1, it can’t be assigned to any other fields) . Do this for each template whose fields are described. The descriptions are as follows:', }, vizsum: { - model: 'gpt-4o-mini', + model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'Your job is to provide brief descriptions for columns in a dataset based on example rows. Your descriptions should be geared towards how each column’s data might fit together into a visual template. Would they make good titles, main focuses, captions, descriptions, etc. Pay special attention to connections between columns, i.e. is there one column that specifically seems to describe/be related to another more than the rest? You should provide your analysis in JSON format like so: {“col1”:”description”, “col2”:”description”, …}. DO NOT INCLUDE ANY OTHER TEXT, ONLY THE JSON.', }, vizsum2: { - model: 'gpt-4o-mini', + model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'Your job is to provide structured information on columns in a dataset based on example rows. You will categorize each column in two ways: by type and size. The size categories are as follows: tiny (one or two words), small (a sentence/multiple words), medium (a few sentences), large (a longer paragraph), and huge (a very long or multiple paragraphs). The type categories are as follows: visual (links/file paths to images, pdfs, maps, or any other visual media type), and text (plain text that isn’t a link/file path). Visual media should be assumed to have size “medium” “large” or “huge”. You will give your responses in JSON format, like so: {“title (of column)”:{“type”:”text”, “size”:”small”}, “title (of column)”:{“type”:”visual”, “size”:”medium”}, …}. DO NOT INCLUDE ANY OTHER TEXT, ONLY THE JSON.', }, fill: { - model: 'gpt-4-turbo', + model: 'gpt-4o', maxTokens: 512, temp: 0.5, prompt: 'Your job is to generate content for fields based on a user prompt and background context given to you. You will be given the content of the other fields present in the format: ---- Field # (field title): content ---- Field # (field title): content ----- (etc.) You will be given info on the columns to generate for in the format ---- title: , prompt: , word limit: , assigned field: ----. For each column, based on the prompt, word limit, and the context of existing fields, you should generate a short response in the following JSON format: {“___”(where ___ is the title from the column description with no additions): {“number”:”#” (where # is the assigned field of the column), “content”:”response” (where response is your response to the prompt in the column info)}}. Here’s another example of the format with only one column: {“position”: {“number”:”2”, “content”:”*your response goes here*”}}. ONLY INCLUDE THE JSON TEXT WITH NO OTHER ADDED TEXT. YOUR RESPONSE MUST BE VALID JSON. The word limit for each column applies only to that column’s response. Do not include speculation or information that you can’t glean from your factual knowledge or the content of the other fields (no description of images you can’t see, for example). You should include one object per column you are provided info on.', }, - completeprompt: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'Your prompt is as follows:' }, + completeprompt: { model: 'gpt-4o', maxTokens: 512, temp: 0.5, prompt: 'Your prompt is as follows:' }, draw: { model: 'gpt-4o', maxTokens: 1024, diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx index 257c7fc00..1889344fd 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx @@ -108,9 +108,13 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { @action setDataViz = (dataViz: DataVizBox) => { this._dataViz = dataViz; + this._selectedTemplate = undefined; + this._renderedDocCollection = undefined; + this._renderedDocCollectionPreview = undefined; + this._fullyRenderedDocs = []; }; @action addUserTemplate = (template: Template) => { - this._userTemplates.push({template: template, doc: template.getRenderedDoc()}); + this._userTemplates.push({template: template.cloneBase(), doc: template.getRenderedDoc()}); }; @action removeUserTemplate = (template: Template) => { this._userTemplates = this._userTemplates.filter(info => info.template !== template); @@ -394,6 +398,13 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { //console.log(this.templateManager.templates) + const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView; + + this.templateManager.templates.forEach(template => { + const doc = template.mainField.renderedDoc(); + mainCollection.addDocument(doc); + }) + this.forceUpdate(); // try { @@ -691,6 +702,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { createDocsFromTemplate = async (template: Template) => { const dv = this._dataViz; + console.log('dataviz: ', dv); if (!dv) return; this._docsRendering = true; @@ -798,7 +810,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { /> </div> - return ( <div className="docCreatorMenu-expanded-template-preview"> <div className="top-panel"/> @@ -811,11 +822,10 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { <FontAwesomeIcon icon="minimize" /> </button> <button className="docCreatorMenu-menu-button section-reveal-options top-right-lower" onPointerDown={e => this.setUpButtonClick(e, () => {this._currEditingTemplate?.resetToBase(); this.setExpandedView(this._currEditingTemplate);})}> - <FontAwesomeIcon icon="plus" color="white" /> + <FontAwesomeIcon icon="arrows-rotate" color="white" /> </button> </div> </div> - ); } diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx index bb8489c21..4a8bfa03f 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx @@ -51,7 +51,7 @@ export class FieldUtils { while (wordIndex < words.length) { const word = words[wordIndex]; - const wordWidth = word.length * currFontSize * 0.5; + const wordWidth = word.length * currFontSize * 0.7; if (currentRowWidth + wordWidth <= contWidth) { currentRowWidth += wordWidth; diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx index ee7f19907..648f9e034 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx @@ -66,7 +66,7 @@ export class TemplateLayouts { br: [0.8, 0.3], types: [TemplateFieldType.TEXT], sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL], - description: 'A caption for field #2, very short to short text that contextualizes the content of field #2', + description: 'A caption for field #2, very short text.', opts: { backgroundColor: 'transparent', contentXCentering: 'h-center', @@ -341,70 +341,137 @@ export class TemplateLayouts { }; public static FourField005: FieldSettings = { - title: 'fourfield04', + title: 'fourfield05', viewType: ViewType.FREEFORM, tl: [0,0], - br: [400,700], + br: [400,550], opts: { - backgroundColor: '#6CCAF0', - borderColor: '#1088C3', - borderWidth: '10', + backgroundColor: '#95A575', }, subfields: [ { viewType: ViewType.STATIC, - tl: [-0.8, -.9], - br: [-.05, .15], - types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL], + tl: [-0.9, -.925], + br: [-.075, -.775], + types: [TemplateFieldType.TEXT], sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL], - description: 'A small text field for a title that categorizes the rest of the content.', + description: 'A small text field for a title or word(s) that categorize the rest of the content.', opts: { - borderColor: 'yellow', + borderColor: '#3B4A2C', borderWidth: '8', contentXCentering: "h-center", - backgroundColor: 'transparent', + backgroundColor: '#B8DC90', }, }, { viewType: ViewType.STATIC, - tl: [-0.8, -.9], - br: [0.8, -.5], + tl: [.075, -.925], + br: [.9, -.775], types: [TemplateFieldType.TEXT], sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL], description: 'A small text field for a title that categorizes the rest of the content.', opts: { - borderColor: 'yellow', + borderColor: '#3B4A2C', borderWidth: '8', contentXCentering: "h-center", - backgroundColor: 'transparent', + backgroundColor: '#B8DC90', + }, + }, + { + viewType: ViewType.DEC, + tl: [-.82, -.4], + br: [-.5, -.2], + opts: { + backgroundColor: '#94B058', + borderColor: '#3B4A2C', + borderWidth: '8', }, }, { viewType: ViewType.STATIC, - tl: [-0.8, -.9], - br: [0.8, -.5], - types: [TemplateFieldType.TEXT], - sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL], - description: 'A small text field for a title that categorizes the rest of the content.', + tl: [-0.66, -.65], + br: [0.66, .25], + types: [TemplateFieldType.VISUAL], + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE], + description: 'A medium to large field in the center of the template, for the main visual content.', opts: { - borderColor: 'yellow', + borderColor: '#3B4A2C', borderWidth: '8', - contentXCentering: "h-center", - backgroundColor: 'transparent', + backgroundColor: '#B8DC90', }, }, { viewType: ViewType.STATIC, - tl: [-0.8, -.9], - br: [0.8, -.5], + tl: [-.875, .425], + br: [0.875, .925], types: [TemplateFieldType.TEXT], - sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL], - description: 'A small text field for a title that categorizes the rest of the content.', + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE], + description: 'A medium to large field at the bottom of the template, for the main text content.', opts: { - borderColor: 'yellow', + borderColor: '#3B4A2C', borderWidth: '8', contentXCentering: "h-center", - backgroundColor: 'transparent', + backgroundColor: '#B8DC90', + }, + }, + { + viewType: ViewType.DEC, + tl: [-1.1, -.62], + br: [-.9, -.5], + opts: { + backgroundColor: '#7A9D31', + borderColor: '#3B4A2C', + borderWidth: '8', + }, + }, + { + viewType: ViewType.DEC, + tl: [-1.1, 0], + br: [-.9, .15], + opts: { + backgroundColor: '#94B058', + borderColor: '#3B4A2C', + borderWidth: '8', + }, + }, + { + viewType: ViewType.DEC, + tl: [-.93, -.265], + br: [-.715, -.125], + opts: { + backgroundColor: '#728745', + borderColor: '#3B4A2C', + borderWidth: '8', + }, + }, + { + viewType: ViewType.DEC, + tl: [.7, -.45], + br: [.85, -.3], + opts: { + backgroundColor: '#7A9D31', + borderColor: '#3B4A2C', + borderWidth: '8', + }, + }, + { + viewType: ViewType.DEC, + tl: [.8, .03], + br: [1.2, .33], + opts: { + backgroundColor: '#728745', + borderColor: '#3B4A2C', + borderWidth: '8', + }, + }, + { + viewType: ViewType.DEC, + tl: [.875, -.13], + br: [1.2, .12], + opts: { + backgroundColor: '#94B058', + borderColor: '#3B4A2C', + borderWidth: '8', }, }, ] |