UI for face detailer / upscaler in VST

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
 }
 

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
             {...{