diff options
| -rw-r--r-- | src/client/apis/gpt/customization.ts | 24 | ||||
| -rw-r--r-- | src/client/views/nodes/trails/PresBox.scss | 1 | ||||
| -rw-r--r-- | src/client/views/nodes/trails/PresBox.tsx | 53 | ||||
| -rw-r--r-- | src/client/views/nodes/trails/PresElementBox.tsx | 4 |
4 files changed, 56 insertions, 26 deletions
diff --git a/src/client/apis/gpt/customization.ts b/src/client/apis/gpt/customization.ts index db5ef6eb5..946208eeb 100644 --- a/src/client/apis/gpt/customization.ts +++ b/src/client/apis/gpt/customization.ts @@ -35,7 +35,7 @@ interface PromptInfo { const prompts: { [key: string]: PromptInfo } = { trails: { description: - 'We are adding customization to a slide in a presentation. Given a natural language input, translate it into a json with the required fields: [title, presentation_transition, presentation_effect, config_zoom, presentation_effectDirection].', + 'We are customizing the properties and transition of a slide in a presentation. You are given the current properties of the slide in a json with the fields [title, presentation_transition, presentation_effect, config_zoom, presentation_effectDirection], as well as the prompt for how the user wants to change it. Return a json with the required fields: [title, presentation_transition, presentation_effect, config_zoom, presentation_effectDirection] by applying the changes in the prompt to the current state of the slide.', features: [], }, }; @@ -44,19 +44,24 @@ export const addCustomizationProperty = (type: CustomizationType, name: string, values ? prompts[type].features.push({ name, description, values }) : prompts[type].features.push({ name, description }); }; +export const gptSlideProperties = ['title', 'presentation_transition', 'presentation_effect', 'presentation_effectDirection', 'config_zoom']; + const setupPresSlideCustomization = () => { addCustomizationProperty(CustomizationType.PRES_TRAIL_SLIDE, 'title', 'is the title/name of the slide.'); addCustomizationProperty(CustomizationType.PRES_TRAIL_SLIDE, 'presentation_transition', 'is a number in milliseconds for how long it should take to transition/move to a slide.'); addCustomizationProperty(CustomizationType.PRES_TRAIL_SLIDE, 'presentation_effect', 'is an effect applied to the slide when we transition to it.', ['None', 'Fade in', 'Flip', 'Rotate', 'Bounce', 'Roll']); + addCustomizationProperty(CustomizationType.PRES_TRAIL_SLIDE, 'presentation_effectDirection', 'is what direction the effect is applied.', ['Enter from left', 'Enter from right', 'Enter from bottom', 'Enter from Top', 'Enter from center']); + addCustomizationProperty(CustomizationType.PRES_TRAIL_SLIDE, 'config_zoom', 'is a number from 0 to 1.0 indicating the percentage we should zoom into the slide.'); }; setupPresSlideCustomization(); -export const gptTrailSlideCustomization = async (inputText: string) => { +export const gptTrailSlideCustomization = async (inputText: string, properties: any) => { + console.log('properties', properties); let prompt = prompts.trails.description; prompts.trails.features.forEach(feature => { - prompt += feature.name + feature.description; + prompt += feature.name + ' ' + feature.description; if (feature.values) { prompt += `Its only possible values are [${feature.values.join(', ')}].`; } @@ -65,16 +70,21 @@ export const gptTrailSlideCustomization = async (inputText: string) => { // prompt += // 'title is the title/name of the slide. presentation_transition is a number in milliseconds for how long it should take to transition/move to a slide. presentation_effect is an effect applied to the slide when we transition to it. Its only possible values are: [None, Fade in, Flip, Rotate, Bounce, Roll]. presentation_effectDirection is what direction the effect is applied. Its only possible values are: [Enter from left, Enter from right, Enter from bottom, Enter from Top, Enter from center]. config_zoom is a number from 0 to 1.0 indicating the percentage we should zoom into the slide.'; - prompt += 'If the input does not contain info a specific key, please set their value to null. Please only return the json with these keys and their values.'; + prompt += 'Set unchanged values to null. Please only return the json with these keys and their values.'; + + console.log('messages', [ + { role: 'system', content: prompt }, + { role: 'user', content: `Prompt: ${inputText}, Current properties: ${JSON.stringify(properties)}` }, + ]); try { const response = await openai.chat.completions.create({ - model: 'gpt-3.5-turbo', + model: 'gpt-4', messages: [ { role: 'system', content: prompt }, - { role: 'user', content: inputText }, + { role: 'user', content: `Prompt: ${inputText}, Current properties: ${JSON.stringify(properties)}` }, ], - temperature: 0.1, + temperature: 0, max_tokens: 1000, }); return response.choices[0].message?.content; diff --git a/src/client/views/nodes/trails/PresBox.scss b/src/client/views/nodes/trails/PresBox.scss index 1537ad0b8..5fc356299 100644 --- a/src/client/views/nodes/trails/PresBox.scss +++ b/src/client/views/nodes/trails/PresBox.scss @@ -34,6 +34,7 @@ .pres-chatbox { outline: none; border: none; + resize: none; } } diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx index 1b1b65e46..ba80facce 100644 --- a/src/client/views/nodes/trails/PresBox.tsx +++ b/src/client/views/nodes/trails/PresBox.tsx @@ -38,10 +38,10 @@ import './PresBox.scss'; import ReactLoading from 'react-loading'; import { PresEffect, PresEffectDirection, PresMovement, PresStatus } from './PresEnums'; import ReactTextareaAutosize from 'react-textarea-autosize'; -import { IconButton, Type } from 'browndash-components'; +import { Dropdown, IconButton, Type } from 'browndash-components'; import { BiMicrophone, BiX } from 'react-icons/bi'; import { AiOutlineSend } from 'react-icons/ai'; -import { gptTrailSlideCustomization } from '../../../apis/gpt/customization'; +import { gptSlideProperties, gptTrailSlideCustomization } from '../../../apis/gpt/customization'; import { DictationManager } from '../../../util/DictationManager'; export interface pinDataTypes { scrollable?: boolean; @@ -263,7 +263,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { } }; - // GPT + // Recording for GPT customization recordDictation = () => { this.setIsRecording(true); @@ -283,6 +283,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { }; setDictationContent = (value: string) => { + console.log('Dictation value', value); this.setChatInput(value); // // Get the current cursor position // if (!this._inputref) return; @@ -306,24 +307,31 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { @action customizeWithGPT = async (input: string) => { - console.log(this.slideToModify); + console.log('Slide to modify', this.slideToModify); // const testInput = 'change title to Customized Slide, transition for 2.3s with fade in effect'; // if (!this.slideToModify) return; this.setIsRecording(false); this.setIsLoading(true); + + let currSlideProperties: { [key: string]: any } = {}; + for (const key of gptSlideProperties) { + currSlideProperties[key] = this.activeItem[key]; + } + console.log('current slide props', currSlideProperties); + try { - const res = await gptTrailSlideCustomization(input); - console.log('slide result', res); - // if (typeof res === 'string') { - // const resObj = JSON.parse(res); - // console.log('Result ', resObj); - // // this.activeItem - // for (let key in resObj) { - // if (resObj[key]) { - // this.slideToModify[key] = resObj[key]; - // } - // } - // } + const res = await gptTrailSlideCustomization(input, currSlideProperties); + console.log('GPT Result:', res); + if (typeof res === 'string') { + const resObj = JSON.parse(res); + console.log('Parsed GPT Result ', resObj); + // this.activeItem + for (let key in resObj) { + if (resObj[key]) { + this.activeItem[key] = resObj[key]; + } + } + } } catch (err) { console.error(err); } @@ -1833,6 +1841,19 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { })}> <div className="ribbon-box"> Movement + {/* <Dropdown + color={StrCast(Doc.UserDoc().userColor)} + formLabel={'Type'} + closeOnSelect={true} + items={bugDropdownItems} + selectedVal={this.formData.type} + setSelectedVal={val => { + if (typeof val === 'string') this.setFormData({ ...this.formData, type: val as BugType }); + }} + dropdownType={DropdownType.SELECT} + type={Type.TERT} + fillWidth + /> */} <div className="presBox-dropdown" onClick={action(e => { diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx index ed2f25fb6..4abfc5a94 100644 --- a/src/client/views/nodes/trails/PresElementBox.tsx +++ b/src/client/views/nodes/trails/PresElementBox.tsx @@ -409,8 +409,6 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { return presBoxDocView ? presBoxDocView._props.PanelWidth() : width ? width : 300; } - // GPT - @computed get presButtons() { const presBox = this.presBox; const presBoxColor = StrCast(presBox?._backgroundColor); @@ -520,7 +518,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { className={'slideButton'} onClick={() => { PresBox.Instance.setChatActive(true); - PresBox.Instance.slideToModify = this.rootDoc; + PresBox.Instance.slideToModify = this.Document; PresBox.Instance.recordDictation(); }}> <FontAwesomeIcon icon={'message'} onPointerDown={e => e.stopPropagation()} /> |