diff --git a/demos/palm/web/talking-character/src/apis/languageModel.ts b/demos/palm/web/talking-character/src/apis/languageModel.ts index a51cf25b8..5bb53ecf6 100644 --- a/demos/palm/web/talking-character/src/apis/languageModel.ts +++ b/demos/palm/web/talking-character/src/apis/languageModel.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import {useContext, useEffect} from 'react'; +import {useContext, useEffect, useMemo} from 'react'; import {ConfigContext} from '../context/config'; import {LANGUAGE_MODEL_URL} from '../context/constants'; @@ -80,7 +80,6 @@ const useLanguageModel = (): LanguageModel => { const config = useContext(ConfigContext); - let context = ''; let messages: MessageProps[] = []; const sendPrompt = async(prompt: PromptProps, temperature: number): @@ -102,14 +101,9 @@ const useLanguageModel = (): return response.json() as Promise; }; - useEffect(() => { - context = `Your task is to acting as a character that has this personality: "${ - config.state - .personality}". Your response must be based on your personality. You have this backstory: "${ - config.state.backStory}". Your knowledge base is: "${ - config.state - .knowledgeBase}". The response should be one single sentence only.`; - }, [config]); + const context = useMemo(() => `Your task is to acting as a character that has this personality: "${config.state + .personality}". Your response must be based on your personality. You have this backstory: "${config.state.backStory}". Your knowledge base is: "${config.state + .knowledgeBase}". The response should be one single sentence only.`, [config]) const sendMessage = async(message: string): Promise => { const content = `Please answer within 100 characters. {${ diff --git a/demos/palm/web/textfx/src/components/layouts/mainScreen/mainScreen.tsx b/demos/palm/web/textfx/src/components/layouts/mainScreen/mainScreen.tsx index 396dbb6ea..5806d3d84 100644 --- a/demos/palm/web/textfx/src/components/layouts/mainScreen/mainScreen.tsx +++ b/demos/palm/web/textfx/src/components/layouts/mainScreen/mainScreen.tsx @@ -81,7 +81,7 @@ const MainScreen = () => { '--inputSectionHeight', inputSectionHeight + 'px' ) - }, [activeMacro, outputs, pins]) + }, [activeMacro, outputs.length, pins.length]) useEffect(() => { if (!mainScreenRef.current) return diff --git a/demos/palm/web/textfx/src/components/layouts/welcome/screen2.tsx b/demos/palm/web/textfx/src/components/layouts/welcome/screen2.tsx index a001bc557..002ef30a7 100644 --- a/demos/palm/web/textfx/src/components/layouts/welcome/screen2.tsx +++ b/demos/palm/web/textfx/src/components/layouts/welcome/screen2.tsx @@ -63,6 +63,7 @@ const Step2 = () => { src={Step1Image} className={c(styles.fade, styles.fade3)} alt={hig.title} + decoding="async" /> )} {i === 1 && ( @@ -70,6 +71,7 @@ const Step2 = () => { src={Step2Image} className={c(styles.fade, styles.fade3)} alt={hig.title} + decoding="async" /> )} {i === 2 && ( @@ -77,6 +79,7 @@ const Step2 = () => { src={Step3Image} className={c(styles.fade, styles.fade3)} alt={hig.title} + decoding="async" /> )} diff --git a/demos/palm/web/textfx/src/components/layouts/welcome/welcome.tsx b/demos/palm/web/textfx/src/components/layouts/welcome/welcome.tsx index e4a9a8054..fd7dcbac9 100644 --- a/demos/palm/web/textfx/src/components/layouts/welcome/welcome.tsx +++ b/demos/palm/web/textfx/src/components/layouts/welcome/welcome.tsx @@ -52,7 +52,7 @@ const WelcomeScreen = ({onNext = () => {}}: IWelcome) => { return } - setStep(step + 1) + setStep((prevStep) => prevStep + 1) }} /> diff --git a/demos/palm/web/travel-planner/src/components/PlaceCard.js b/demos/palm/web/travel-planner/src/components/PlaceCard.js index 2d4831d09..b2fd413a5 100644 --- a/demos/palm/web/travel-planner/src/components/PlaceCard.js +++ b/demos/palm/web/travel-planner/src/components/PlaceCard.js @@ -22,6 +22,31 @@ import { Circle, CloseOutlined, MapOutlined } from '@mui/icons-material'; import { Pagination } from 'swiper'; import MapCard from './MapCard'; +const playCardsStyles = { + image_stl: { + objectFit: "cover", + objectPosition: "center center" + }, + division1: { + position: 'absolute', + width: '100%', + height: '30%', + background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 31.73%, rgba(255, 255, 255, 0) 68.15%)', + top: 0, + left: 0, + }, + division2: { + position: 'absolute', + background: 'linear-gradient(183.73deg, #000000 -21.07%, rgba(0, 0, 0, 0) 94.07%)', + mixBlendMode: 'multiply', + transform: 'rotate(-180deg)', + width: '100%', + height: '100%', + top: 0, + left: 0 + } +} + function PlaceCard(props) { const { name, geometry, photos, description, onClose } = props; @@ -92,34 +117,15 @@ function PlaceCard(props) { height="100%" width="100%" src={photo} - style={{ - objectFit: "cover", - objectPosition: "center center" - }} + style={playCardsStyles.image_stl} />
diff --git a/demos/palm/web/travel-planner/src/guards/AuthGuard.js b/demos/palm/web/travel-planner/src/guards/AuthGuard.js index 53cb96ad8..558adfa6a 100644 --- a/demos/palm/web/travel-planner/src/guards/AuthGuard.js +++ b/demos/palm/web/travel-planner/src/guards/AuthGuard.js @@ -33,7 +33,7 @@ export default function AuthGuard({ children }) { if (pathname !== requestedLocation) { setRequestedLocation(pathname); } - return ; + return ; } return <>{children}; diff --git a/demos/palm/web/travel-planner/src/guards/GuestGuard.js b/demos/palm/web/travel-planner/src/guards/GuestGuard.js index 74d4bdfce..8824c8c6d 100644 --- a/demos/palm/web/travel-planner/src/guards/GuestGuard.js +++ b/demos/palm/web/travel-planner/src/guards/GuestGuard.js @@ -28,7 +28,7 @@ GuestGuard.propTypes = { export default function GuestGuard({ children }) { const { isAuthenticated } = useAuth(); if (isAuthenticated) { - return ; + return ; } return <>{children};