diff options
Diffstat (limited to 'src/client/views')
3 files changed, 52 insertions, 25 deletions
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 0c3033579..002ebf1ae 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -52,6 +52,7 @@ import { CollectionFreeFormRemoteCursors } from './CollectionFreeFormRemoteCurso import './CollectionFreeFormView.scss'; import { MarqueeView } from './MarqueeView'; import React = require('react'); +import { generatePalette } from '../../../apis/gpt/customization'; export type collectionFreeformViewProps = { NativeWidth?: () => number; @@ -1573,6 +1574,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection @action componentDidMount() { + this.printDoc(this.rootDoc); this.props.setContentView?.(this); super.componentDidMount?.(); this.props.setBrushViewer?.(this.brushView); @@ -1787,6 +1789,53 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection } }; + printDoc = (doc: Doc) => { + console.log('Printing keys'); + Object.keys(doc).forEach(key => { + console.log(key, ':', doc[key]); + }); + }; + + // gpt styling + @action + gptStyling = async () => { + console.log('Title', this.rootDoc.title); + console.log('bgcolor', this.layoutDoc._backgroundColor); + // doc.backgroundColor + console.log('styling'); + const inputDocs = this.childDocs.filter(doc => doc.type == 'rich text'); + const gptInput = inputDocs.map((doc, i) => ({ + id: i, + textContent: (doc.text as RichTextField)?.Text, + textSize: 16, + })); + + // inputDocs[0].backgroundColor = '#3392ff'; + + const collectionDescription = StrCast(this.rootDoc.title); + + console.log({ + collectionDescription, + documents: gptInput, + }); + + try { + const res = await generatePalette({ + collectionDescription, + documents: gptInput, + }); + console.log('done'); + if (typeof res === 'string') { + const resObj = JSON.parse(res); + console.log('Result ', resObj); + this.rootDoc.backgroundColor = resObj.collectionBackgroundColor; + (resObj.documentsWithColors as any[]).forEach((elem, i) => (inputDocs[i].backgroundColor = elem.color)); + } + } catch (err) { + console.error(err); + } + }; + onContextMenu = (e: React.MouseEvent) => { if (this.props.isAnnotationOverlay || !ContextMenu.Instance) return; @@ -1826,6 +1875,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection optionItems.push({ description: (this._showAnimTimeline ? 'Close' : 'Open') + ' Animation Timeline', event: action(() => (this._showAnimTimeline = !this._showAnimTimeline)), icon: 'eye' }); this.props.renderDepth && optionItems.push({ description: 'Use Background Color as Default', event: () => (Cast(Doc.UserDoc().emptyCollection, Doc, null)._backgroundColor = StrCast(this.layoutDoc._backgroundColor)), icon: 'palette' }); this.props.renderDepth && optionItems.push({ description: 'Fit Content Once', event: this.fitContentOnce, icon: 'object-group' }); + // gpt styling + this.props.renderDepth && optionItems.push({ description: 'Style with AI', event: this.gptStyling, icon: 'paint-brush' }); if (!Doc.noviceMode) { optionItems.push({ description: (!Doc.NativeWidth(this.layoutDoc) || !Doc.NativeHeight(this.layoutDoc) ? 'Freeze' : 'Unfreeze') + ' Aspect', event: this.toggleNativeDimensions, icon: 'snowflake' }); } diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx index 87ffb0112..19f271246 100644 --- a/src/client/views/nodes/trails/PresBox.tsx +++ b/src/client/views/nodes/trails/PresBox.tsx @@ -40,10 +40,10 @@ import ReactLoading from 'react-loading'; import { PresEffect, PresEffectDirection, PresMovement, PresStatus } from './PresEnums'; import { IconButton, Type } from 'browndash-components'; import { AiOutlineSend } from 'react-icons/ai'; -import { gptTrailSlideCustomization } from '../../../apis/gpt/GPT'; import { DictationManager } from '../../../util/DictationManager'; import { BiMicrophone, BiX } from 'react-icons/bi'; import TextareaAutosize from 'react-textarea-autosize'; +import { gptTrailSlideCustomization } from '../../../apis/gpt/customization'; export interface pinDataTypes { scrollable?: boolean; diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx index 482d38f59..37f449001 100644 --- a/src/client/views/nodes/trails/PresElementBox.tsx +++ b/src/client/views/nodes/trails/PresElementBox.tsx @@ -26,10 +26,6 @@ import './PresElementBox.scss'; import { PresMovement } from './PresEnums'; import React = require('react'); import { TreeView } from '../../collections/TreeView'; -import { BranchingTrailManager } from '../../../util/BranchingTrailManager'; -import { MultiToggle, Type } from 'browndash-components'; -import { gptTrailSlideCustomization } from '../../../apis/gpt/GPT'; -import { DictationManager } from '../../../util/DictationManager'; /** * This class models the view a document added to presentation will have in the presentation. * It involves some functionality for its buttons and options. @@ -438,25 +434,6 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { // GPT - @action - customizeWithGPT = async (input: string) => { - const testInput = 'change title to Customized Slide, transition for 2.3s with fade in effect'; - - try { - const res = await gptTrailSlideCustomization(testInput); - if (typeof res === 'string') { - const resObj = JSON.parse(res); - console.log('Result ', resObj); - - for (let key in resObj) { - this.rootDoc[key] = resObj[key]; - } - } - } catch (err) { - console.error(err); - } - }; - @computed get presButtons() { const presBox = this.presBox; const presBoxColor = StrCast(presBox?._backgroundColor); @@ -568,7 +545,6 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { PresBox.Instance.setChatActive(true); PresBox.Instance.slideToModify = this.rootDoc; PresBox.Instance.recordDictation(); - // this.customizeWithGPT(''); }}> <FontAwesomeIcon icon={'message'} onPointerDown={e => e.stopPropagation()} /> </div> |