some optimization and more correct implementation of frames cap - skip frame > 16, aka the min required number of frames

packages/fakeyou.com/src/components/common/NumberSliderV2/NumberSliderV2.tsx

@@ -12,6 +12,7 @@ interface Props{
   max: number;
   step?: number;
   initialValue?: number;
+  value?: number;
   onChange?: (x:number) => void;
   required?: boolean;
   withRevert?: boolean;
@@ -58,6 +59,7 @@ export default function NumberSlider({
   onChange: onChangeCallback,
   required,
   initialValue: initialValueProps,
+  value,
   withRevert = false,
   propsButtonRevertToDefault,
 }: Props) {
@@ -65,7 +67,8 @@ export default function NumberSlider({
   const step = stepProps && stepProps <= max-min ? stepProps 
     : max-min >= 1 ? 1 : (max-min) / 10;
   const initialValue = initialValueProps !== undefined && initialValueProps <= max && initialValueProps >= min ? initialValueProps
-  : max-min === step ? min : roundToStep((max+min)/2, step);
+  : value !== undefined && value <=max && value>=min ? value
+  :max-min === step ? min : roundToStep((max+min)/2, step);
 
   function handleInputOnChange(e: React.ChangeEvent<HTMLInputElement>){
     if(onChangeCallback)onChangeCallback(Number.parseInt(e.target.value))
@@ -83,7 +86,7 @@ export default function NumberSlider({
         <input 
           className="fy-number-slider-value"
           type="number"
-          {...{ min, max, step, value:initialValue}}
+          {...{ min, max, step, value:value || initialValue}}
           onChange={handleInputOnChange}
         />
         <div className="fy-number-slider-range">
@@ -93,7 +96,7 @@ export default function NumberSlider({
               renderThumb: thumb(thumbTip),
               renderTrack,
               thumbTip,
-              values: [initialValue],
+              values: [value || initialValue],
             }}
           />
         </div>

packages/fakeyou.com/src/v2/view/pages/video_styletransfer/VideoStyleTransfer.tsx

@@ -20,7 +20,7 @@ export default function VideoStyleTransfer(props:{
   inferenceJobsByCategory: Map<FrontendInferenceJobType, Array<InferenceJob>>;
   sessionWrapper: SessionWrapper;
 }){
-  const debug = true;
+  const debug = false;
   const {t} = useLocalize("VideoStyleTransfer");
   const { NO_FILE } = states;
   const [pageState, dispatchPageState] = useReducer(reducer, {

packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx

@@ -45,24 +45,26 @@ export default function PageVSTApp({
     if(debug) console.log("set-up video element listeners");
     const ve = videoRef.current
     ve.onloadedmetadata = () =>{
+      const newValues : {
+        width?: number;
+        height?: number;
+        maxFrames?: number;
+        framesCap?: number;
+      } = {};
       if (ve.videoWidth && ve.videoHeight) {
         const aspectRatio = ve.videoWidth/ve.videoHeight
-        if (aspectRatio > 1){
-          handleOnChange("width",960);
-        }
-        else if (aspectRatio < 1) {
-          handleOnChange("height",960);
-        }else{
-          if (debug) console.log(`aspectRaio: ${aspectRatio}`);
-        }
+        if (aspectRatio > 1) newValues.width = 960;
+        else if (aspectRatio < 1) newValues.height = 960
+        else if (debug) console.log(`aspectRaio: ${aspectRatio}`);
       }
       if(ve.duration){
-        handleOnChange("maxFrames", 
-          Math.floor(ve.duration)*workflowValues.inputFps
-        );
+        newValues.maxFrames = Math.floor(ve.duration)*workflowValues.inputFps;
+        newValues.framesCap =  newValues.maxFrames;
       }
-      //TODO: Optimizer to make ONE handleOnChange only
-      //TODO: deal with maxFrames with more reliable math
+      setWorkflowValues((curr)=>({
+        ...curr,
+        ...newValues,
+      }))
     }
   }
 
@@ -70,7 +72,14 @@ export default function PageVSTApp({
   const handleOnChange = (key: string, newValue:any,) => {
     setWorkflowValues((curr)=>({...curr, [key]: newValue}));
   }
-
+  const handleFramesCap = (newValue: number)=>{
+    if(newValue - workflowValues.skipFrames >= 16)
+      setWorkflowValues((curr)=>({...curr, framesCap: newValue}));
+  }
+  const handleSkipFrames = (newValue: number)=>{
+    if(workflowValues.framesCap - newValue >= 16)
+      setWorkflowValues((curr)=>({...curr, skipFrames: newValue}));
+  }
   const handleStyleStrength = (value:number)=>{
     setStyleStrength(value);
   };
@@ -127,18 +136,18 @@ export default function PageVSTApp({
             <br/>
             <NumberSliderV2 {...{
               min: 16, max: workflowValues.maxFrames, step: 1,
-              initialValue: workflowValues.framesCap,
+              value: workflowValues.framesCap,
               label: "Frames Cap",
               thumbTip: "24 frames = 1 sec",
-              onChange: (val)=>{handleOnChange("framesCap",val)}
+              onChange: handleFramesCap
             }}/>
             <br/>
             <NumberSliderV2 {...{
               min: 0, max: workflowValues.maxFrames-16, step: 1,
-              initialValue: workflowValues.skipFrames,
+              value: workflowValues.skipFrames,
               label: "Skip Frames",
               thumbTip: "24 frames = 1 sec",
-              onChange: (val)=>{handleOnChange("skipFrames",val)}
+              onChange: handleSkipFrames
             }}/>
             {/*TODO: END */}
 

packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/sectionVideoSettings.tsx

@@ -24,6 +24,15 @@ export default memo( function SectionVideoSettings({
 }){
   const iv = VideoSettingsInitialValues;
 
+  const handleFramesCap = (newValue: number)=>{
+    if(newValue - wfVal.skipFrames >= 16)
+    handleOnChange("framesCap",newValue);
+  }
+  const handleSkipFrames = (newValue: number)=>{
+    if(wfVal.framesCap - newValue >= 16)
+    handleOnChange("skipFrames",newValue);
+  }
+
   if(ve && ve!==null){
     ve.onloadedmetadata = () =>{
       if (ve.videoWidth && ve.videoHeight) {
@@ -60,19 +69,19 @@ export default memo( function SectionVideoSettings({
         <div className="col-md-6">
           <NumberSliderV2 {...{
             min: 16, max: wfVal.maxFrames, step: 1,
-            initialValue: wfVal.framesCap,
+            value: wfVal.framesCap,
             label: "Frames Cap",
             thumbTip: "24 frames = 1 sec",
-            onChange: (val)=>{handleOnChange("framesCap",val)}
+            onChange: handleFramesCap
           }}/>
         </div>
         <div className="col-md-6">
           <NumberSliderV2 {...{
             min: 0, max: wfVal.maxFrames-16, step: 1,
-            initialValue: wfVal.skipFrames,
+            value: wfVal.skipFrames,
             label: "Skip Frames",
             thumbTip: "24 frames = 1 sec",
-            onChange: (val)=>{handleOnChange("skipFrames",val)}
+            onChange: handleSkipFrames
           }}/>
         </div>
       </div>