From 72b06d708a23560dd961b41b9070b2e1222d50ba Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Wed, 14 Aug 2024 02:18:18 -0400 Subject: loading symbol for gpt generation; remove option for GPTTemplates --- .../views/nodes/DataVizBox/DocCreatorMenu.scss | 10 +++ .../views/nodes/DataVizBox/DocCreatorMenu.tsx | 99 +++++++++++++--------- 2 files changed, 68 insertions(+), 41 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss index ca6534379..3e97e9d08 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss @@ -341,6 +341,12 @@ bottom: 0px; left: 0px; } + + &.top-left { + position: absolute; + top: 0px; + left: 0px; + } } &:hover .option-button { @@ -385,6 +391,10 @@ width: calc(100% - 10px); -ms-overflow-style: none; scrollbar-width: none; + + .loading-spinner { + justify-self: center; + } } .docCreatorMenu-section-topbar { diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx index 3e5fc156e..ee154994e 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx @@ -4,7 +4,7 @@ import { observer } from 'mobx-react'; import * as React from 'react'; import { returnAll, returnFalse, setupMoveUpEvents } from '../../../../ClientUtils'; import { Doc, NumListCast, StrListCast } from '../../../../fields/Doc'; -import { DocCast, ImageCast, ScriptCast } from '../../../../fields/Types'; +import { DocCast, ImageCast, ScriptCast, StrCast } from '../../../../fields/Types'; import { ImageField } from '../../../../fields/URLField'; import { emptyFunction } from '../../../../Utils'; import { SnappingManager } from '../../../util/SnappingManager'; @@ -23,6 +23,7 @@ import { Docs } from '../../../documents/Documents'; import { OpenWhere } from '../OpenWhere'; import { IDisposer } from 'mobx-utils'; import { LightboxView } from '../../LightboxView'; +import ReactLoading from 'react-loading'; export enum LayoutType { Stacked = 'stacked', @@ -53,6 +54,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { @observable _GPTOpt: boolean = false; @observable _userPrompt: string = ''; @observable _callCount: number = 0; + @observable _GPTLoading: boolean = false; @observable _pageX: number = 0; @observable _pageY: number = 0; @@ -83,7 +85,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { super(props); makeObservable(this); DocCreatorMenu.Instance = this; - setTimeout(() => this.generateTemplates('')); + //setTimeout(() => this.generateTemplates('')); } @action setDataViz = (dataViz: DataVizBox) => { this._dataViz = dataViz }; @@ -182,7 +184,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { document.addEventListener('pointerup', this.onPointerUp); this._disposers.templates = reaction(() => this._templateDocs.slice(), (docs) => docs.map(this.getIcon)); this._disposers.gpt = reaction(() => this._GPTTemplates.slice(), (docs) => docs.map(this.getIcon)); - this._disposers.columns = reaction(() => this._dataViz?.layoutDoc._dataViz_axes, () => {console.log(true); this.generateTemplates('')}) + //this._disposers.columns = reaction(() => this._dataViz?.layoutDoc._dataViz_axes, () => {this.generateTemplates('')}) this._disposers.lightbox = reaction(() => LightboxView.LightboxDoc(), doc => { doc ? this._shouldDisplay && this.closeMenu() : !this._shouldDisplay && this.openMenu()}) } @@ -322,13 +324,17 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { let prompt: string = `(#${origCount}) Please generate for the fields:`; this.selectedFields?.forEach(field => prompt += ` ${field},`) - prompt += ` Additional prompt: ${inputText}`; + prompt += ` (-----NOT A FIELD-----) Additional prompt: ${inputText}`; console.log(prompt) + this._GPTLoading = true; + try { const res = await gptAPICall(prompt, GPTCallType.TEMPLATE); if (res && this._callCount === origCount) { + this._GPTTemplates = []; + this._GPTLoading = false; const templates: {template_type: string, fieldVals: {title: string, tlx: string, tly: string, brx: string, bry: string}[]}[] = JSON.parse(res); this.createGeneratedTemplates(templates, 500, 500); } @@ -348,11 +354,12 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { const right: number = Number(field.brx) * tempWidth / 2; const bottom: number = Number(field.bry) * tempHeight / 2; //prettier-ignore const height = bottom - top; const width = right - left; - const doc = !field.title.includes('$$') ? Docs.Create.TextDocument('', { _height: height, _width: width, title: field.title, x: left, y: top, _text_fontSize: `${height/2}` }) : Docs.Create.ImageDocument('', { _height: height, _width: width, title: field.title.replace(/$$/g, ''), x: left, y: top }); + console.log(field.title); + const doc = !field.title.includes('$$') ? Docs.Create.TextDocument('', { _height: height, _width: width, title: field.title, x: left, y: top, _text_fontSize: `${height/2}` }) : Docs.Create.ImageDocument('', { _height: height, _width: width, title: field.title.replace(/\$\$/g, ''), x: left, y: top }); 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); @@ -371,6 +378,10 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { Doc.UnBrushDoc(doc); } + removeTemplate = (doc: Doc) => { + this._templateDocs.splice(this._templateDocs.indexOf(doc), 1); + } + get templatesPreviewContents(){ const renderedTemplates: Doc[] = []; @@ -380,43 +391,46 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { 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} +
+ {this._GPTLoading ? ( +
+ +
+ ) : ( + 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}
@@ -445,6 +459,9 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { +
)})} -- cgit v1.2.3-70-g09d2