Merge pull request #609 from storytold/feature/style-video-prepopulated-controls

prompts and other controls prepopulated on style-video

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<string,GetPromptsRequest,GetPromptsResponse,{}>({
+export const GetPrompts = MakeRequest<
+  string,
+  GetPromptsRequest,
+  GetPromptsResponse,
+  {}
+>({
   method: "GET",
-  routingFunction: (token: string) => `/v1/prompts/${ token }`,
+  routingFunction: (token: string) => `/v1/prompts/${token}`,
 });

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 (
     <>

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(
     <>
       <Container className="mt-3">
@@ -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,
                       }}
                     />
                     <TextArea