From a4db5980b364dbf6cdf5e9bf46205832c364da88 Mon Sep 17 00:00:00 2001
From: wil <test@local.host>
Date: Sat, 24 Feb 2024 22:06:10 -0500
Subject: [PATCH] adjusted ui

---
 .../components/pageVSTApp/pageVSTApp.tsx      |  27 ++-
 .../pageVSTApp/sectionAdvanceOptions.tsx      | 175 +++++++++---------
 2 files changed, 109 insertions(+), 93 deletions(-)

diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx
index f4f94b54f4..7604563d53 100644
--- a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx
@@ -3,10 +3,10 @@ import { NavLink } from 'react-router-dom';
 import { useParams, useHistory } from "react-router-dom";
 
 import {
-  Accordion,
   Button,
   Label,
   Panel,
+  NumberSliderV2,
   TextArea,
   VideoFakeyou
 } from "components/common";
@@ -145,14 +145,23 @@ export default function PageVSTApp({
           />
         </div>
       </div>
-      <Accordion className="mt-4">
-        <Accordion.Item title={"Advanced Options"} defaultOpen>
-          <SectionAdvanceOptions 
-            onChange={handleOnChange}
-            workflowValues={workflowValues}
-          />
-        </Accordion.Item>
-      </Accordion>
+      <div className="row g-3  mb-4">
+        <div className="col-12 col-md-6">
+          <NumberSliderV2 {...{
+            min: 1, max: 60, step: 1,
+            initialValue: workflowValues.inputFps,
+            label: "Input FPS",
+            thumbTip: "Input FPS",
+            onChange: (val)=>{handleOnChange({inputFps: val})}
+            }}/>
+        </div>
+      </div>
+      <div className="row g-3 mt-4">
+        <SectionAdvanceOptions 
+          onChange={handleOnChange}
+          workflowValues={workflowValues}
+        />
+      </div>
       <div className="row g-3 mt-4">
         <div className="col-12 d-flex justify-content-between">
           <NavLink to={`${parentPath}`}>
diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/sectionAdvanceOptions.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/sectionAdvanceOptions.tsx
index c3d4f98296..39bf10d987 100644
--- a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/sectionAdvanceOptions.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/sectionAdvanceOptions.tsx
@@ -11,7 +11,9 @@ import {
 from "@fortawesome/pro-solid-svg-icons";
 
 import {
+  Accordion,
   Button,
+  Label,
   NumberSliderV2
 } from 'components/common';
 import { WorkflowValuesType } from './helpers';
@@ -25,96 +27,101 @@ export default function sectionAdvanceOptions({
 }){
   return (
     <>
-      <div className="d-flex justify-content-between p-3 w-100">
+      <Label label="Video's Camera Angle"/>
+      <div className="d-flex justify-content-between w-100">
         <Button icon={faFaceViewfinder} label="Face Closeups"/>
         <Button icon={faUser} label="Half Body Shots"/>
         <Button icon={faPerson} label="Full Body Shots"/>
         <Button icon={faBuildingColumns} label="Architecture or Landscape"/>
         <Button icon={faText} label="Flat Logos, or Typographies"/>
       </div>
-      <div className="row g-3 p-3">
-        <div className="col-md-6">
-          <NumberSliderV2 {...{
-            min: 0, max: 1, step: 0.1,
-            initialValue: wfVal.cnCanny,
-            label: "Canny",
-            thumbTip: "Canny",
-            onChange: (val)=>{handleOnChange({cnCanny: val})}
-            }}/>
-        </div>
-        <div className="col-md-6">
-          <NumberSliderV2 {...{
-            min: 0, max: 1, step: 0.1,
-            initialValue: wfVal.cnLinearAnime,
-            label: "Line Art Anime",
-            thumbTip: "Line Art Anime",
-            onChange: (val)=>{handleOnChange({cnLinearAnime: val})}
-            }}/>
-        </div>
-      </div>
-      <div className="row g-3 p-3">
-        <div className="col-md-6">
-          <NumberSliderV2 {...{
-            min: 0, max: 1, step: 0.1,
-            initialValue: wfVal.cnDepth,
-            label: "Depth",
-            thumbTip: "Depth",
-            onChange: (val)=>{handleOnChange({cnDepth: val})}
-            }}/>
-        </div>
-        <div className="col-md-6">
-          <NumberSliderV2 {...{
-            min: 0, max: 1, step: 0.1,
-            initialValue: wfVal.cnOpenPose,
-            label: "OpenPose",
-            thumbTip: "OpenPose",
-            onChange: (val)=>{handleOnChange({cnOpenPose: val})}
-            }}/>
-        </div>
-      </div>
-      <div className="row g-3 p-3">
-        <div className="col-md-6">
-          <NumberSliderV2 {...{
-            min: 0, max: 1, step: 0.1,
-            initialValue: wfVal.cnPipeFace,
-            label: "Media Pipe Face",
-            thumbTip: "Media Pipe Face",
-            onChange: (val)=>{handleOnChange({cnPipeFace: val})}
-            }}/>
-        </div>
-        <div className="col-md-6">
-          <NumberSliderV2 {...{
-            min: 0, max: 1, step: 0.1,
-            initialValue: wfVal.cnSparse,
-            label: "Sparse Scribble",
-            thumbTip: "Sparse Scribble",
-            onChange: (val)=>{handleOnChange({cnSparse: val})}
-            }}/>
-        </div>
-      </div>
-      <div className="row g-3 p-3">
-        <div className="col-md-6">
-          <NumberSliderV2 {...{
-            min: 0, max: 1, step: 0.1,
-            initialValue: wfVal.cnLinearRealistic,
-            label: "Video CN (Linear Realistic)",
-            thumbTip: "Video CN",
-            onChange: (val)=>{handleOnChange({cnLinearRealistic: val})}
-            }}/>
-        </div>
-        <div className="col-md-6">
-          <NumberSliderV2 {...{
-            min: 0, max: 1, step: 0.1,
-            initialValue: wfVal.cnTile,
-            label: "Tile CN",
-            thumbTip: "Tile CN",
-            onChange: (val)=>{handleOnChange({cnTile: val})}
-            }}/>
-        </div>
-      </div>
-      <div className="d-flex p-3 justify-content-end">
-        <Button icon={faRotateLeft} label="Reset"/>
-      </div>
+      <Accordion className="mt-4">
+        <Accordion.Item title={"Advanced Options"}>
+          <div className="row g-3 p-3">
+            <div className="col-md-6">
+              <NumberSliderV2 {...{
+                min: 0, max: 1, step: 0.1,
+                initialValue: wfVal.cnCanny,
+                label: "Canny",
+                thumbTip: "Canny",
+                onChange: (val)=>{handleOnChange({cnCanny: val})}
+                }}/>
+            </div>
+            <div className="col-md-6">
+              <NumberSliderV2 {...{
+                min: 0, max: 1, step: 0.1,
+                initialValue: wfVal.cnLinearAnime,
+                label: "Line Art Anime",
+                thumbTip: "Line Art Anime",
+                onChange: (val)=>{handleOnChange({cnLinearAnime: val})}
+                }}/>
+            </div>
+          </div>
+          <div className="row g-3 p-3">
+            <div className="col-md-6">
+              <NumberSliderV2 {...{
+                min: 0, max: 1, step: 0.1,
+                initialValue: wfVal.cnDepth,
+                label: "Depth",
+                thumbTip: "Depth",
+                onChange: (val)=>{handleOnChange({cnDepth: val})}
+                }}/>
+            </div>
+            <div className="col-md-6">
+              <NumberSliderV2 {...{
+                min: 0, max: 1, step: 0.1,
+                initialValue: wfVal.cnOpenPose,
+                label: "OpenPose",
+                thumbTip: "OpenPose",
+                onChange: (val)=>{handleOnChange({cnOpenPose: val})}
+                }}/>
+            </div>
+          </div>
+          <div className="row g-3 p-3">
+            <div className="col-md-6">
+              <NumberSliderV2 {...{
+                min: 0, max: 1, step: 0.1,
+                initialValue: wfVal.cnPipeFace,
+                label: "Media Pipe Face",
+                thumbTip: "Media Pipe Face",
+                onChange: (val)=>{handleOnChange({cnPipeFace: val})}
+                }}/>
+            </div>
+            <div className="col-md-6">
+              <NumberSliderV2 {...{
+                min: 0, max: 1, step: 0.1,
+                initialValue: wfVal.cnSparse,
+                label: "Sparse Scribble",
+                thumbTip: "Sparse Scribble",
+                onChange: (val)=>{handleOnChange({cnSparse: val})}
+                }}/>
+            </div>
+          </div>
+          <div className="row g-3 p-3">
+            <div className="col-md-6">
+              <NumberSliderV2 {...{
+                min: 0, max: 1, step: 0.1,
+                initialValue: wfVal.cnLinearRealistic,
+                label: "Video CN (Linear Realistic)",
+                thumbTip: "Video CN",
+                onChange: (val)=>{handleOnChange({cnLinearRealistic: val})}
+                }}/>
+            </div>
+            <div className="col-md-6">
+              <NumberSliderV2 {...{
+                min: 0, max: 1, step: 0.1,
+                initialValue: wfVal.cnTile,
+                label: "Tile CN",
+                thumbTip: "Tile CN",
+                onChange: (val)=>{handleOnChange({cnTile: val})}
+                }}/>
+            </div>
+          </div>
+          <div className="d-flex p-3 justify-content-end">
+            <Button icon={faRotateLeft} label="Reset"/>
+          </div>
+        </Accordion.Item>
+      </Accordion>
     </>
   );
 }
\ No newline at end of file