From afd43afb6b75a7af0032ee14c79d1dd7ffedcac4 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Sun, 11 Aug 2024 02:28:57 -0400 Subject: generated templates appear in menu --- src/client/views/MainView.tsx | 1 + .../views/nodes/DataVizBox/DocCreatorMenu.scss | 4 +- .../views/nodes/DataVizBox/DocCreatorMenu.tsx | 95 ++++++++++++---------- 3 files changed, 54 insertions(+), 46 deletions(-) (limited to 'src') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index dd5884cf2..d4467e536 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -279,6 +279,7 @@ export class MainView extends ObservableReactComponent<{}> { library.add( ...[ + fa.faArrowsRotate, fa.faFloppyDisk, fa.faRepeat, fa.faArrowsUpDown, diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss index 82a659ff7..3b6aeb0dd 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss @@ -297,6 +297,7 @@ border: 1px solid rgb(163, 163, 163); border-radius: 5px; box-shadow: 5px 5px rgb(29, 29, 31); + flex: 0 0 auto; &:hover{ background-color: rgb(72, 72, 73); @@ -310,7 +311,6 @@ &.empty { font-size: 35px; - flex: 0 0 auto; &.GPT { margin-top: 0px; @@ -402,10 +402,12 @@ .docCreatorMenu-GPT-prompt-input { width: 140px; + height: 25px; overflow-y: scroll; border: 1px solid rgb(180, 180, 180); background-color: rgb(35, 35, 35); border-radius: 3px; + padding-left: 4px; } //------------------------------------------------------------------------------------------------------------------------------------------ diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx index 2efd73136..b45ac7f46 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx @@ -44,7 +44,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { @observable _layoutPreviewScale: number = 1; @observable _savedLayouts: DataVizTemplateLayout[] = []; - @observable _GPTTemplates: Doc[] | undefined = undefined; + @observable _GPTTemplates: Doc[] = []; @observable _GPTOpt: boolean = false; @observable _userPrompt: string = ''; @@ -71,7 +71,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { @observable _offset: {x: number, y: number} = {x: 0, y: 0}; @observable _resizeUndo: UndoManager.Batch | undefined = undefined; @observable _initDimensions: {width: number, height: number, x?: number, y?: number} = {width: 300, height: 400, x: undefined, y: undefined}; - @observable _menuDimensions: {width: number, height: number} = {width: 300, height: 400}; + @observable _menuDimensions: {width: number, height: number} = {width: 300, height: 365}; constructor(props: any) { super(props); @@ -81,6 +81,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { @action setDataViz = (dataViz: DataVizBox) => { this._dataViz = dataViz }; @action setTemplateDocs = (docs: Doc[]) => {this._templateDocs = docs.map(doc => doc.annotationOn ? DocCast(doc.annotationOn):doc)}; + @action setGPTTemplates = (docs: Doc[]) => {this._GPTTemplates = docs}; @computed get docsToRender() { return this._selectedTemplate ? NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows) : []; @@ -169,14 +170,17 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { }; _disposer: IReactionDisposer | undefined; + _GPTDisposer: IReactionDisposer | undefined; componentDidMount() { document.addEventListener('pointerdown', this.onPointerDown, true); document.addEventListener('pointerup', this.onPointerUp); this._disposer = reaction(() => this._templateDocs.slice(), (docs) => docs.map(this.getIcon)); + this._GPTDisposer = reaction(() => this._GPTTemplates.slice(), (docs) => docs.map(this.getIcon)); } componentWillUnmount() { this._disposer?.(); + this._GPTDisposer?.(); document.removeEventListener('pointerdown', this.onPointerDown, true); document.removeEventListener('pointerup', this.onPointerUp); } @@ -275,7 +279,9 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { const docView = DocumentView.getDocumentView(doc); if (docView) { docView.ComponentView?.updateIcon?.(); - return new Promise(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 500)); + const f = new Promise(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 500)); + console.log(f) + return f; } return undefined; } @@ -304,10 +310,12 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { && this._layout.columns === layout.columns; } + @action generateTemplates = async (inputText: string) => { let prompt: string = 'Please generate for the fields:'; this.selectedFields?.forEach(field => prompt += ` ${field},`) prompt += ` Additional prompt: ${inputText}`; + console.log(prompt) try { const res = await gptAPICall(prompt, GPTCallType.TEMPLATE); @@ -322,8 +330,10 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { } + @action createGeneratedTemplates = (layouts: {template_type: string, fieldVals: {title: string, tlx: string, tly: string, brx: string, bry: string}[]}[], tempWidth: number, tempHeight: number) => { const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView; + const GPTTemplates: Doc[] = []; layouts.forEach(layout => { const fields: Doc[] = layout.fieldVals.map(field => { @@ -335,9 +345,15 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { return doc; }); - const template = Docs.Create.FreeformDocument(fields, { _height: tempHeight, _width: tempWidth, title: layout.template_type, x: 400, y: 400 }); + const template = Docs.Create.FreeformDocument(fields, { _height: tempHeight, _width: tempWidth, title: layout.template_type, x: 40000, y: 40000 }); mainCollection.addDocument(template); + + GPTTemplates.push(template); }); + + setTimeout(() => this.setGPTTemplates(GPTTemplates), 500); + + this.forceUpdate(); } get templatesPreviewContents(){ @@ -346,10 +362,9 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { const GPTOptions =
- return (
-
+
Suggested Templates
-
-
-
-
+ {this._GPTTemplates?.map(doc => + + //
+ ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info => +
this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}> + +
+ )}
{this._GPTOpt ? (
- + this._userPrompt = e.target.value}/>
{this._GPTOpt ? GPTOptions : null}
) : null} @@ -387,41 +412,20 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
{this._templateDocs.map(doc => ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info => { - if (renderedTemplates.includes(info.doc)) return undefined; - renderedTemplates.push(info.doc); - return (
this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}> - -
+ if (renderedTemplates.includes(info.doc)) return undefined; + renderedTemplates.push(info.doc); + return (
this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}> + +
)})}
- {/*
- {this._templateDocs.map(doc => ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info => { - if (renderedTemplates.includes(info.doc)) return undefined; - renderedTemplates.push(info.doc); - return (
this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}> - -
- )})} -
this.setUpButtonClick(e, this.basicTemplateTest)} - > - -
-
*/}
); } @@ -652,7 +656,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { } basicTemplateTest = () => { - this.generateTemplates(this._userPrompt); + console.log(this._GPTTemplates) + this.forceUpdate(); //this._dataViz?.createBasicTemplates(temps); } -- cgit v1.2.3-70-g09d2