aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/trails/PresBox.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/trails/PresBox.tsx')
-rw-r--r--src/client/views/nodes/trails/PresBox.tsx186
1 files changed, 145 insertions, 41 deletions
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 9644935b2..67f787b1e 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -42,13 +42,13 @@ import ReactTextareaAutosize from 'react-textarea-autosize';
import { Button, Dropdown, DropdownType, IconButton, Toggle, ToggleType, Type } from 'browndash-components';
import { BiMicrophone, BiX } from 'react-icons/bi';
import { AiOutlineSend } from 'react-icons/ai';
-import { gptSlideProperties, gptTrailSlideCustomization } from '../../../apis/gpt/customization';
+import { getSlideTransitionSuggestions, gptSlideProperties, gptTrailSlideCustomization } from '../../../apis/gpt/customization';
import { DictationManager } from '../../../util/DictationManager';
import CubicBezierEditor, { TIMING_DEFAULT_MAPPINGS } from './CubicBezierEditor';
import Slider from '@mui/material/Slider';
import { FaArrowDown, FaArrowLeft, FaArrowRight, FaArrowUp, FaCompressArrowsAlt } from 'react-icons/fa';
import SpringAnimationPreview from './SlideEffectPreview';
-import { effectTimings, SpringType, springMappings, effectItems, easeItems, movementItems, SpringSettings, presEffectDefaultTimings } from './SpringUtils';
+import { effectTimings, SpringType, springMappings, effectItems, easeItems, movementItems, SpringSettings, presEffectDefaultTimings, AnimationSettings } from './SpringUtils';
import SlideEffect from './SlideEffect';
export interface pinDataTypes {
@@ -121,18 +121,58 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
// GPT
private _inputref: HTMLTextAreaElement | null = null;
+ private _inputref2: HTMLTextAreaElement | null = null;
@observable chatActive: boolean = false;
@observable chatInput: string = '';
public slideToModify: Doc | null = null;
@observable isRecording: boolean = false;
@observable isLoading: boolean = false;
+ @observable generatedAnimations: AnimationSettings[] = [
+ {
+ effect: PresEffect.Bounce,
+ stiffness: 400,
+ damping: 15,
+ mass: 1,
+ },
+ {
+ effect: PresEffect.Fade,
+ stiffness: 100,
+ damping: 15,
+ mass: 1,
+ },
+ {
+ effect: PresEffect.Flip,
+ stiffness: 100,
+ damping: 15,
+ mass: 1,
+ },
+ {
+ effect: PresEffect.Roll,
+ stiffness: 100,
+ damping: 15,
+ mass: 1,
+ },
+ ];
+
+ @action
+ setGeneratedAnimations = (settings: AnimationSettings[]) => {
+ this.generatedAnimations = settings;
+ };
+
+ @observable animationChat: string = '';
+
@action
setChatInput = (input: string) => {
this.chatInput = input;
};
@action
+ setAnimationChat = (input: string) => {
+ this.animationChat = input;
+ };
+
+ @action
setIsLoading = (isLoading: boolean) => {
this.isLoading = isLoading;
};
@@ -367,6 +407,41 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
};
@action
+ customizeAnimations = async (input: string) => {
+ // const testInput = 'change title to Customized Slide, transition for 2.3s with fade in effect';
+ // if (!this.slideToModify) return;
+ this.setIsLoading(true);
+
+ try {
+ const res = await getSlideTransitionSuggestions(this.animationChat);
+ console.log('GPT Result:', res);
+ if (typeof res === 'string') {
+ const resObj = JSON.parse(res);
+ console.log('Parsed GPT Result ', resObj);
+ // this.activeItem
+ this.setGeneratedAnimations(resObj as AnimationSettings[]);
+ // this.updateEffect(resObj.effect as PresEffect, false);
+ // this.updateEffectTiming(this.activeItem, {
+ // type: SpringType.CUSTOM,
+ // stiffness: resObj.stiffness,
+ // damping: resObj.damping,
+ // mass: resObj.mass,
+ // });
+
+ // for (let key in resObj) {
+ // if (resObj[key]) {
+ // console.log('typeof property', typeof resObj[key]);
+ // this.activeItem[key] = resObj[key];
+ // }
+ // }
+ }
+ } catch (err) {
+ console.error(err);
+ }
+ this.setIsLoading(false);
+ };
+
+ @action
customizeWithGPT = async (input: string) => {
// const testInput = 'change title to Customized Slide, transition for 2.3s with fade in effect';
// if (!this.slideToModify) return;
@@ -2176,35 +2251,26 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
<div className="presBox-gpt-chat">
<p>Customize with GPT</p>
<div className="pres-chat">
- <div className="pres-chatbox-container">
+ <div
+ className="pres-chatbox-container"
+ onClick={e => {
+ e.stopPropagation();
+ }}>
<ReactTextareaAutosize
ref={r => (this._inputref = r)}
minRows={1}
- placeholder="Customize..."
+ placeholder="Get animation suggestions..."
className="pres-chatbox"
autoFocus={true}
- value={this.chatInput}
+ value={this.animationChat}
onChange={e => {
- this.setChatInput(e.target.value);
+ this.setAnimationChat(e.target.value);
}}
onKeyDown={e => {
this.stopDictation(true);
e.stopPropagation();
}}
/>
- <IconButton
- type={Type.TERT}
- color={this.isRecording ? '#2bcaff' : StrCast(Doc.UserDoc().userVariantColor)}
- tooltip="Record"
- icon={<BiMicrophone size={'16px'} />}
- onClick={() => {
- if (!this.isRecording) {
- this.recordDictation();
- } else {
- this.stopDictation(true);
- }
- }}
- />
</div>
<Button
style={{ alignSelf: 'flex-end' }}
@@ -2214,34 +2280,72 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
iconPlacement="right"
color={StrCast(Doc.UserDoc().userVariantColor)}
onClick={() => {
- this.customizeWithGPT(this.chatInput);
+ this.customizeAnimations(this.animationChat);
}}
/>
</div>
</div>
{/* Preview Animations */}
- <div className="presBox-effect-row">
- <div className="presBox-effect-container">
- <SlideEffect dir={PresEffectDirection.Left as PresEffectDirection} presEffect={PresEffect.Bounce} tension={100} friction={15} mass={1} infinite>
- <div className="presBox-effect-demo-box"></div>
- </SlideEffect>
- </div>
- <div className="presBox-effect-container">
- <SlideEffect dir={PresEffectDirection.Left as PresEffectDirection} presEffect={PresEffect.Fade} tension={100} friction={15} mass={1} infinite>
- <div className="presBox-effect-demo-box" style={{ backgroundColor: '#4925ff' }}></div>
- </SlideEffect>
- </div>
- </div>
- <div className="presBox-effect-row">
- <div className="presBox-effect-container">
- <SlideEffect dir={PresEffectDirection.Left as PresEffectDirection} presEffect={PresEffect.Flip} tension={100} friction={15} mass={1} infinite>
- <div className="presBox-effect-demo-box" style={{ top: 0, left: 0, backgroundColor: '#a825ff' }}></div>
- </SlideEffect>
+ <div>
+ <div className="presBox-effect-row">
+ <div className="presBox-effect-container">
+ <SlideEffect
+ key={JSON.stringify(this.generatedAnimations[0])}
+ dir={PresEffectDirection.Left as PresEffectDirection}
+ presEffect={this.generatedAnimations[0].effect as PresEffect}
+ tension={this.generatedAnimations[0].stiffness}
+ friction={this.generatedAnimations[0].damping}
+ mass={this.generatedAnimations[0].mass}
+ infinite>
+ <div
+ className="presBox-effect-demo-box"
+ style={{ top: this.generatedAnimations[0].effect === PresEffect.Flip ? 0 : '20px', left: this.generatedAnimations[0].effect === PresEffect.Flip ? 0 : '20px' }}></div>
+ </SlideEffect>
+ </div>
+ <div className="presBox-effect-container">
+ <SlideEffect
+ key={JSON.stringify(this.generatedAnimations[1])}
+ dir={PresEffectDirection.Left as PresEffectDirection}
+ presEffect={this.generatedAnimations[1].effect as PresEffect}
+ tension={this.generatedAnimations[1].stiffness}
+ friction={this.generatedAnimations[1].damping}
+ mass={this.generatedAnimations[1].mass}
+ infinite>
+ <div
+ className="presBox-effect-demo-box"
+ style={{ top: this.generatedAnimations[1].effect === PresEffect.Flip ? 0 : '20px', left: this.generatedAnimations[1].effect === PresEffect.Flip ? 0 : '20px', backgroundColor: '#4925ff' }}></div>
+ </SlideEffect>
+ </div>
</div>
- <div className="presBox-effect-container">
- <SlideEffect dir={PresEffectDirection.Left as PresEffectDirection} presEffect={PresEffect.Roll} tension={100} friction={15} mass={1} infinite>
- <div className="presBox-effect-demo-box" style={{ backgroundColor: '#ff2599' }}></div>
- </SlideEffect>
+ <div className="presBox-effect-row">
+ <div className="presBox-effect-container">
+ <SlideEffect
+ key={JSON.stringify(this.generatedAnimations[2])}
+ dir={PresEffectDirection.Left as PresEffectDirection}
+ presEffect={this.generatedAnimations[2].effect as PresEffect}
+ tension={this.generatedAnimations[2].stiffness}
+ friction={this.generatedAnimations[2].damping}
+ mass={this.generatedAnimations[2].mass}
+ infinite>
+ <div
+ className="presBox-effect-demo-box"
+ style={{ top: this.generatedAnimations[2].effect === PresEffect.Flip ? 0 : '20px', left: this.generatedAnimations[2].effect === PresEffect.Flip ? 0 : '20px', backgroundColor: '#a825ff' }}></div>
+ </SlideEffect>
+ </div>
+ <div className="presBox-effect-container">
+ <SlideEffect
+ key={JSON.stringify(this.generatedAnimations[3])}
+ dir={PresEffectDirection.Left as PresEffectDirection}
+ presEffect={this.generatedAnimations[3].effect as PresEffect}
+ tension={this.generatedAnimations[3].stiffness}
+ friction={this.generatedAnimations[3].damping}
+ mass={this.generatedAnimations[3].mass}
+ infinite>
+ <div
+ className="presBox-effect-demo-box"
+ style={{ top: this.generatedAnimations[3].effect === PresEffect.Flip ? 0 : '20px', left: this.generatedAnimations[3].effect === PresEffect.Flip ? 0 : '20px', backgroundColor: '#ff2599' }}></div>
+ </SlideEffect>
+ </div>
</div>
</div>
</div>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-12-07 15:34:01 +0000