From 66b502ec6fbc07f4ba5830bf4da0288381266e81 Mon Sep 17 00:00:00 2001 From: Victor Date: Thu, 11 Jul 2024 16:42:51 -0700 Subject: [PATCH] prompts and other controls prepopulated on style-video --- .../components/src/api/prompts/GetPrompts.ts | 48 +++++++++++-------- .../entities/EntityInput/EntityInput.tsx | 27 +++++++++-- .../v2/view/pages/style-video/StyleVideo.tsx | 15 ++++++ 3 files changed, 64 insertions(+), 26 deletions(-) diff --git a/packages/components/src/api/prompts/GetPrompts.ts b/packages/components/src/api/prompts/GetPrompts.ts index cb9251ab54..46e72dac78 100644 --- a/packages/components/src/api/prompts/GetPrompts.ts +++ b/packages/components/src/api/prompts/GetPrompts.ts @@ -3,34 +3,40 @@ import MakeRequest from "../MakeRequest"; export interface GetPromptsRequest {} export interface Prompt { - created_at: Date, - maybe_positive_prompt?: string, - maybe_negative_prompt?: string, - maybe_style_name?: string, - maybe_strength?: number, - maybe_inference_duration_millis?: number, - prompt_type: string, - used_face_detailer: boolean, - used_upscaler: boolean, - lipsync_enabled: boolean, - lcm_disabled: boolean, - use_cinematic: boolean, - maybe_moderator_fields?: PromptModeratorFields, + created_at: Date; + maybe_global_ipa_image_token?: string; + maybe_positive_prompt?: string; + maybe_negative_prompt?: string; + maybe_style_name?: string; + maybe_strength?: number; + maybe_inference_duration_millis?: number; + prompt_type: string; + used_face_detailer: boolean; + used_upscaler: boolean; + lipsync_enabled: boolean; + lcm_disabled: boolean; + use_cinematic: boolean; + maybe_moderator_fields?: PromptModeratorFields; } export interface PromptModeratorFields { - maybe_inference_duration_millis?: number, - main_ipa_workflow?: string, - face_detailer_workflow?: string, - upscaler_workflow?: string, + maybe_inference_duration_millis?: number; + main_ipa_workflow?: string; + face_detailer_workflow?: string; + upscaler_workflow?: string; } export interface GetPromptsResponse { - prompt: Prompt - success: boolean + prompt: Prompt; + success: boolean; } -export const GetPrompts = MakeRequest({ +export const GetPrompts = MakeRequest< + string, + GetPromptsRequest, + GetPromptsResponse, + {} +>({ method: "GET", - routingFunction: (token: string) => `/v1/prompts/${ token }`, + routingFunction: (token: string) => `/v1/prompts/${token}`, }); diff --git a/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx index b998fbb691..a1866750e4 100644 --- a/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx +++ b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx @@ -13,16 +13,18 @@ import { } from "components/entities/EntityTypes"; import { useMedia, useMediaUploader } from "hooks"; import { BucketConfig } from "@storyteller/components/src/api/BucketConfig"; +import { Prompt } from "@storyteller/components/src/api/prompts/GetPrompts"; import EntityInputEmpty from "./EntityInputEmpty"; import "./EntityInput.scss"; -interface Props { +interface EntityInputProps { accept?: AcceptTypes | AcceptTypes[]; aspectRatio?: "square" | "landscape" | "portrait"; className?: string; label?: string; name?: string; onChange?: any; + onPromptUpdate?: (prompt: Prompt | null) => void; type: EntityModeProp; value?: string; } @@ -128,16 +130,20 @@ export default function EntityInput({ label, name = "", onChange, + onPromptUpdate, type, value, ...rest -}: Props) { +}: EntityInputProps) { const { search } = useLocation(); const urlSearch = new URLSearchParams(search); const presetToken = search ? urlSearch.get("preset_token") : ""; const queryUser = search ? urlSearch.get("query_user") : ""; const [mediaToken, mediaTokenSet] = useState(presetToken || value || ""); - const { media, mediaSet } = useMedia({ mediaToken }); + const { media, mediaSet, prompt } = useMedia({ + mediaToken: mediaToken || value, + }); + const [updated, updatedSet] = useState(false); const clear = () => { mediaSet(undefined); mediaTokenSet(""); @@ -172,9 +178,20 @@ export default function EntityInput({ }); useEffect(() => { - if (presetToken && value !== presetToken) + if (onPromptUpdate) { + if (prompt && !updated) { + updatedSet(true); + onPromptUpdate(prompt); + } else if (!prompt && updated) { + updatedSet(false); + onPromptUpdate(null); + } + } + + if (presetToken && value !== presetToken) { onChange({ target: { name, value: presetToken } }); - }, [presetToken, name, onChange, value]); + } + }, [presetToken, prompt, name, onChange, onPromptUpdate, updated, value]); return ( <> diff --git a/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx b/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx index 43c59d06c7..7065325b25 100644 --- a/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx @@ -16,6 +16,7 @@ import { EnqueueVST, EnqueueVSTResponse, } from "@storyteller/components/src/api/video_styleTransfer/Enqueue_VST"; +import { Prompt } from "@storyteller/components/src/api/prompts/GetPrompts"; import "./StyleVideo.scss"; import { useParams } from "react-router-dom"; import { STYLE_OPTIONS } from "common/StyleOptions"; @@ -83,6 +84,18 @@ export default function StyleVideo() { { label: "7 seconds", value: 7000 }, ]; + const onPromptUpdate = (prompt: Prompt | null) => { + promptSet(prompt?.maybe_positive_prompt || ""); + negativePromptSet(prompt?.maybe_negative_prompt || ""); + styleSet(prompt?.maybe_style_name || ""); + IPATokenSet(prompt?.maybe_global_ipa_image_token || ""); + setStrength(prompt?.maybe_strength || 1.0); + setUseFaceDetailer(!!prompt?.used_face_detailer); + setUseUpscaler(!!prompt?.used_upscaler); + setUseCinematic(!!prompt?.use_cinematic); + setEnableLipsync(!!prompt?.lipsync_enabled); + }; + return studioAccessCheck( <> @@ -98,6 +111,7 @@ export default function StyleVideo() { label: "Choose a video", name: "mediaToken", value: pageMediaToken, + onPromptUpdate, onChange: ({ target }: { target: any }) => { mediaTokenSet(target.value); }, @@ -142,6 +156,7 @@ export default function StyleVideo() { onChange: ({ target }: { target: any }) => { promptSet(target.value); }, + value: prompt, }} />