From 1ad622803333417f4ddd5d2ce34a433eddc4c75c Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Sat, 18 May 2024 23:44:22 -0400
Subject: [PATCH] UI for face detailer / upscaler in VST

---
 .../api/video_styleTransfer/Enqueue_VST.ts    | 15 ++++++++++
 .../v2/view/pages/style-video/StyleVideo.tsx  | 30 +++++++++++++++++++
 2 files changed, 45 insertions(+)

diff --git a/packages/components/src/api/video_styleTransfer/Enqueue_VST.ts b/packages/components/src/api/video_styleTransfer/Enqueue_VST.ts
index e6946d1f98..f83c7a2b82 100644
--- a/packages/components/src/api/video_styleTransfer/Enqueue_VST.ts
+++ b/packages/components/src/api/video_styleTransfer/Enqueue_VST.ts
@@ -7,8 +7,23 @@ export interface EnqueueVSTRequest {
   negative_prompt: string,
   prompt: string,
   style: string,
+
   trim_end_millis: number,
   trim_start_millis: number,
+
+  // Use face detailer
+  // Only for premium accounts
+  use_face_detailer?: boolean,
+
+  // Use video upscaler
+  // Only for premium accounts
+  use_upscaler?: 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,
+
   uuid_idempotency_token: string
 }
 
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 43be8c4455..3589b3c4f0 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
@@ -27,6 +27,8 @@ export default function StyleVideo() {
   const [prompt, promptSet] = useState("");
   const [negativePrompt, negativePromptSet] = useState("");
   const [length, lengthSet] = useState(3000);
+  const [useFaceDetailer, setUseFaceDetailer] = useState(false);
+  const [useUpscaler, setUseUpscaler] = useState(false);
   const { enqueue } = useInferenceJobs();
 
   const onClick = () => {
@@ -117,6 +119,7 @@ export default function StyleVideo() {
             }}
           />
         </div>
+
         <div {...{ className: "prompt-row" }}>
           <SegmentButtons
             {...{
@@ -130,6 +133,33 @@ export default function StyleVideo() {
             }}
           />
         </div>
+
+        <br />
+
+        <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" 
+              checked={useFaceDetailer}
+              />
+            <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" 
+              checked={useUpscaler}
+              />
+            <label className="form-check-label" htmlFor="useUpscaler">Use Upscaler</label>
+          </div>
+        </div>
+
         <div {...{ className: "d-flex justify-content-center mt-3" }}>
           <Button
             {...{