From a7f3d10fbd2d36d22c838d255e9bfd42b4c7a430 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Fri, 14 Jun 2024 21:27:53 +0700
Subject: [PATCH] enable lipsync toggle

---
 .../api/video_styleTransfer/Enqueue_VST.ts    | 37 +++++++-----
 .../v2/view/pages/style-video/StyleVideo.tsx  | 59 +++++++++++++------
 2 files changed, 61 insertions(+), 35 deletions(-)

diff --git a/packages/components/src/api/video_styleTransfer/Enqueue_VST.ts b/packages/components/src/api/video_styleTransfer/Enqueue_VST.ts
index 5ef9cd9ea8..d928bd0a47 100644
--- a/packages/components/src/api/video_styleTransfer/Enqueue_VST.ts
+++ b/packages/components/src/api/video_styleTransfer/Enqueue_VST.ts
@@ -1,41 +1,46 @@
 import MakeRequest from "../MakeRequest";
 
 export interface EnqueueVSTRequest {
-  creator_set_visibility: string,
-  enable_lipsync: boolean,
-  input_file: string,
-  negative_prompt: string,
-  prompt: string,
-  style: string,
+  creator_set_visibility: string;
+  enable_lipsync: boolean;
+  input_file: string;
+  negative_prompt: string;
+  prompt: string;
+  style: string;
 
-  trim_end_millis: number,
-  trim_start_millis: number,
+  trim_end_millis: number;
+  trim_start_millis: number;
 
   // Use face detailer
   // Only for premium accounts
-  use_face_detailer?: boolean,
+  use_face_detailer?: boolean;
 
   // Use video upscaler
   // Only for premium accounts
-  use_upscaler?: boolean,
+  use_upscaler?: boolean;
 
   // Use cinematic mode
-  use_cinematic?: boolean,
+  use_cinematic?: boolean;
 
   // Use Strength of the style transfer
   // Must be between 0.0 (match source) and 1.0 (maximum dreaming).
   // The default, if not sent, is 1.0.
-  use_strength?: number,
+  use_strength?: number;
 
-  uuid_idempotency_token: string
+  uuid_idempotency_token: string;
 }
 
 export interface EnqueueVSTResponse {
-  inference_job_token?: string,
-  success: boolean
+  inference_job_token?: string;
+  success: boolean;
 }
 
-export const EnqueueVST = MakeRequest<string,EnqueueVSTRequest,EnqueueVSTResponse,{}>({
+export const EnqueueVST = MakeRequest<
+  string,
+  EnqueueVSTRequest,
+  EnqueueVSTResponse,
+  {}
+>({
   method: "POST",
   routingFunction: () => `/v1/video/enqueue_vst`,
 });
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 dc8525ac57..ba0eeeb5ca 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
@@ -32,6 +32,7 @@ export default function StyleVideo() {
   const [useFaceDetailer, setUseFaceDetailer] = useState(false);
   const [useUpscaler, setUseUpscaler] = useState(false);
   const [useCinematic, setUseCinematic] = useState(false);
+  const [enableLipsync, setEnableLipsync] = useState(false);
   const [strength, setStrength] = useState(1.0);
   const { enqueue } = useInferenceJobs();
 
@@ -41,7 +42,7 @@ export default function StyleVideo() {
     if (mediaToken) {
       EnqueueVST("", {
         creator_set_visibility: "private",
-        enable_lipsync: true,
+        enable_lipsync: enableLipsync,
         input_file: mediaToken,
         negative_prompt: negativePrompt,
         prompt,
@@ -148,38 +149,58 @@ export default function StyleVideo() {
         <h6>Quality Options</h6>
         <div {...{ className: "prompt-row" }}>
           <div className="form-check form-switch w-100">
-            <input 
-              className="form-check-input" 
-              type="checkbox" 
-              id="useFaceDetailer" 
+            <input
+              className="form-check-input"
+              type="checkbox"
+              id="useFaceDetailer"
               checked={useFaceDetailer}
               onChange={() => setUseFaceDetailer(!useFaceDetailer)}
-              />
-            <label className="form-check-label" htmlFor="useFaceDetailer">Use Face Detailer</label>
+            />
+            <label className="form-check-label" htmlFor="useFaceDetailer">
+              Use Face Detailer
+            </label>
           </div>
         </div>
         <div {...{ className: "prompt-row" }}>
           <div className="form-check form-switch w-100">
-            <input 
-              className="form-check-input" 
-              type="checkbox" 
-              id="useUpscaler" 
+            <input
+              className="form-check-input"
+              type="checkbox"
+              id="useUpscaler"
               checked={useUpscaler}
               onChange={() => setUseUpscaler(!useUpscaler)}
-              />
-            <label className="form-check-label" htmlFor="useUpscaler">Use Upscaler</label>
+            />
+            <label className="form-check-label" htmlFor="useUpscaler">
+              Use Upscaler
+            </label>
           </div>
         </div>
         <div {...{ className: "prompt-row" }}>
           <div className="form-check form-switch w-100">
-            <input 
-              className="form-check-input" 
-              type="checkbox" 
-              id="useCinematic" 
+            <input
+              className="form-check-input"
+              type="checkbox"
+              id="useCinematic"
               checked={useCinematic}
               onChange={() => setUseCinematic(!useCinematic)}
-              />
-            <label className="form-check-label" htmlFor="useCinematic">Use Cinematic</label>
+            />
+            <label className="form-check-label" htmlFor="useCinematic">
+              Use Cinematic
+            </label>
+          </div>
+        </div>
+        <div {...{ className: "prompt-row" }}>
+          <div className="form-check form-switch w-100">
+            <input
+              className="form-check-input"
+              type="checkbox"
+              id="enableLipsync"
+              checked={enableLipsync}
+              onChange={() => setEnableLipsync(!enableLipsync)}
+            />
+            <label className="form-check-label" htmlFor="enableLipsync">
+              Preserve Lip Movement
+            </label>
           </div>
         </div>