Merge branch 'feature/mvp' of https://github.com/storytold/storyteller-frontend into feature/mvp

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

@@ -1,4 +1,4 @@
-import React, { useState, forwardRef } from "react";
+import React, { useState } from "react";
 import { a, useSpring } from "@react-spring/web";
 import { useVideo } from "hooks";
 import makeClass from "resources/makeClass";
@@ -13,12 +13,12 @@ interface Props {
   description?: string;
 }
 
-export default forwardRef(function BasicVideo({
+export default function BasicVideo({
   className,
   src,
   title,
-  description,
-}: Props, ref:React.ForwardedRef<HTMLVideoElement>) {
+  description
+}: Props) {
   const [tint,tintSet] = useState(true);
   const [{ playCtrl },vidProps] = useVideo({ onEnded: () => tintSet(true) });
   const style = useSpring({
@@ -31,7 +31,7 @@ export default forwardRef(function BasicVideo({
   };
 
   return <div {...{ ...makeClass("fy-basic-video",className) }}>
-    <video {...{ playsInline: true, ...vidProps }} ref={ref}>
+    <video {...{ playsInline: true, ...vidProps }}>
       <source {...{ src, type: "video/mp4" }} />
     </video>
     <a.div {...{ className: "video-overlay", onClick, style }}>
@@ -40,4 +40,4 @@ export default forwardRef(function BasicVideo({
       <FontAwesomeIcon {...{ icon: faPlay }} />
     </a.div>
   </div>;
-});
+};

packages/fakeyou.com/src/v2/view/pages/video_workflow/VideoWorkflow.tsx

@@ -33,7 +33,7 @@ export default function StorytellerFilter(props:{
   );
   useEffect(() => {
     if (
-      pageState.status === states.FILTER_ENQUEUED &&
+      pageState.status === states.WORKFLOW_ENQUEUED &&
       pageState.inferenceJobToken
     ) {
       enqueueInferenceJob(
@@ -53,6 +53,7 @@ export default function StorytellerFilter(props:{
 
   return(
     <Container type="panel" className="mb-5">
+      {debug && <p>{`Status:${pageState.status} MediaToken:${pageState.mediaFileToken}`}</p>}
       <PageHeader
         title={t("headings.title")}
         subText={t("headings.subtitle")}

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

@@ -1,473 +0,0 @@
-import React, {useState} from "react";
-import { useParams, useHistory } from "react-router-dom";
-import { v4 as uuidv4 } from "uuid";
-import { faChevronRight } from "@fortawesome/pro-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useMedia } from "hooks";
-
-import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
-import { EnqueueVideoWorkflow } from "@storyteller/components/src/api/video_workflow";
-import { states, Action, State } from "../videoWorkflowReducer";
-import {
-  Accordion,
-  Button,
-  BasicVideo,
-  Checkbox,
-  ErrorMessage,
-  Input,
-  InputSeed,
-  NumberSliderV2,
-  Panel,
-  SelectModal,
-  Spinner,
-  TextArea
-} from "components/common";
-
-
-export default function PageWorkflowControls({
-  t, pageState, dispatchPageState, parentPath
-}: {
-  debug?: boolean;
-  t: Function;
-  pageState: State;
-  parentPath: string;
-  dispatchPageState: (action: Action) => void;
-}) {
-  const { mediaToken } = useParams<any>();
-  useMedia({
-    mediaToken: pageState.mediaFileToken || mediaToken,
-    onSuccess: (res: any) => {
-      dispatchPageState({
-        type: 'loadFileSuccess',
-        payload: {
-          mediaFile: res,
-          mediaFileToken: pageState.mediaFileToken || mediaToken
-        }
-      })
-    },
-  });
-
-  const [filterState, setFilterState] = useState({
-    outputPath: "vid2vid/SparseUpscaleInterp_00001.mp4",
-    workflowConfig: "weight_q8sz47gmfw2zx02snrbz88ns9",
-    seed: "",
-    sdModelToken: "",
-    loraModelToken: "",
-    posPrompt: "",
-    negPrompt: "",
-    firstPass: 1,
-    upscalePass: 0.42,
-    motionScale:1,
-    upscaleMultiplier: 1.5,
-    useEmptyLatent: false,
-    useFaceDetailer: false,
-    denoiseFaceDetailer: 0.45,
-    useLCM: false,
-    lcmCFG: 2,
-    lcmSteps: 8,
-    framesCap:16,
-    skipFrames:0,
-    nthFrames:2,
-    inputFps: 24,
-    interpolationMutiplier: 2,
-    cnTile: 0,
-    cnCanny: 0,
-    cnLinearAnime: 0,
-    cnLinearRealistic: 0,
-    cnDepth: 0,
-    cnOpenPose: 0,
-    cnPipeFace: 0,
-    cnSparse: 0.7,
-  });
-
-  const handleOnChange = (key: string, newValue:any,) => {
-    setFilterState((curr)=>({...curr, [key]: newValue}));
-  }
-
-  const history = useHistory();
-  const handleGenerate = ()=>{
-    console.log("filterState:")
-    console.log(filterState)
-
-    const request = {
-      "uuid_idempotency_token": uuidv4(),
-      "maybe_sd_model": filterState.sdModelToken,
-      "maybe_workflow_config": filterState.workflowConfig,
-      "maybe_input_file": pageState.mediaFileToken || mediaToken,
-      "maybe_output_path": filterState.outputPath,
-      "maybe_json_modifications": {
-        "$.510.inputs.Text": filterState.posPrompt,
-        "$.8.inputs.text": filterState.negPrompt,
-        "$.173.inputs.seed": filterState.seed,
-        "$.401.inputs.Value": filterState.firstPass,
-        "$.918.inputs.Value": filterState.motionScale,
-        "$.137.inputs.Value": filterState.framesCap,
-        "$.186.inputs.Value": filterState.skipFrames,
-        "$.140.inputs.Value": filterState.nthFrames,
-        "$.154.inputs.Value": filterState.inputFps,
-        "$.445.inputs.number": filterState.interpolationMutiplier,
-        "$.947.inputs.Value": filterState.cnTile,
-        "$.800.inputs.Value": filterState.cnCanny,
-        "$.797.inputs.Value": filterState.cnLinearAnime,
-        "$.796.inputs.Value": filterState.cnLinearRealistic,
-        "$.772.inputs.Value": filterState.cnDepth,
-        "$.771.inputs.Value": filterState.cnOpenPose,
-        "$.527.inputs.Value": filterState.cnPipeFace,
-        "$.403.inputs.Value": filterState.cnSparse
-      },
-    }
-    EnqueueVideoWorkflow(request).then(res => {
-      if (res.success && res.inference_job_token) {
-        dispatchPageState({
-          type: 'enqueueFilterSuccess',
-          payload: {
-            inferenceJobToken: res.inference_job_token
-          }
-        })
-      }else{
-        console.log(res);
-      }
-    })
-    dispatchPageState({type: 'enqueueFilter'})
-    history.push(`${parentPath}/jobs`);
-  }
-
-  if (pageState.mediaFile){
-    const mediaLink = new BucketConfig().getGcsUrl(pageState.mediaFile.public_bucket_path);
-
-    if (mediaLink)
-      return(
-        <>
-          <Panel>
-            <div className="row g-3 p-3">
-              <div className="col-5">
-                <BasicVideo src={mediaLink} />
-              </div>
-              <div className="col-1 d-flex align-items-center justify-items-center">
-                <FontAwesomeIcon icon={faChevronRight} className="fa-6x"/>
-              </div>
-              <div className="col-6">
-                <BasicVideo src={mediaLink} />
-              </div>
-            </div>
-          </Panel>
-          <Accordion className="mt-4">
-            <Accordion.Item title={"Basics"} defaultOpen>
-              <div className="row g-3 p-3">
-                <SelectModal 
-                  modalTitle="Select a Stable Diffusion Weight"
-                  label="Select a Stable Diffusion Weight"
-                  onSelect={({token})=>{
-                    handleOnChange("sdModelToken", token);
-                  }}
-                  tabs={[
-                    {
-                      label: "All Weights",
-                      tabKey: "allWeights",
-                      typeFilter: "sd_1.5",
-                      searcher: true,
-                      type: "weights",
-                    },
-                    {
-                      label: "Bookmarked",
-                      tabKey: "bookmarkedWeights",
-                      typeFilter: "sd_1.5",
-                      searcher: false,
-                      type: "weights",
-                    },
-                  ]}
-                />
-              </div>
-              <div className="row g-3 p-3">
-                <SelectModal
-                  modalTitle="Select a LoRA Weight"
-                  label="Additional LoRA Weight"
-                  onSelect={({token})=>{
-                    console.log(`calling from select modal result select ${token}`);
-                    handleOnChange("loraModelToken", token);
-                  }}
-                  tabs={[
-                    {
-                      label: "All LoRA Weights",
-                      tabKey: "allLoraWeights",
-                      typeFilter: "rvc_v2",
-                      searcher: true,
-                      type: "weights",
-                    },
-                    {
-                      label: "Bookmarked",
-                      tabKey: "bookmarkedLoraWeights",
-                      typeFilter: "rvc_v2",
-                      searcher: false,
-                      type: "weights",
-                    },
-                  ]}
-                />
-              </div>
-              <div className="row g-3 p-3">
-                <div className="col-md-6">
-                  <TextArea
-                    {...{
-                      label: "Prompt",
-                      placeholder: "Enter a prompt",
-                      onChange: (e:React.ChangeEvent<HTMLTextAreaElement>)=>handleOnChange("posPrompt", e.target.value),
-                      value: filterState.posPrompt,
-                      required: false,
-                    }}
-                  />
-                </div>
-                <div className="col-md-6">
-                  <TextArea
-                    {...{
-                      label: "Negative Prompt",
-                      placeholder: "Enter Negative Prompt",
-                      onChange: (e:React.ChangeEvent<HTMLTextAreaElement>)=>handleOnChange("negPrompt", e.target.value),
-                      value: filterState.negPrompt,
-                      required: false,
-                    }}
-                  />
-                </div>
-              </div>
-              <div className="row g-3 p-3">
-                <InputSeed label="Seed" onChange={
-                  (val:string)=>handleOnChange("seed", val)
-                }/>
-              </div>
-              
-            </Accordion.Item>
-            <Accordion.Item title="Advance" defaultOpen>
-              <div className="row g-3 p-3">
-                <div className="col-md-6">
-                  <NumberSliderV2 {...{
-                      min: 0.1, max: 1, step: 0.01,
-                      initialValue: filterState.firstPass,
-                      label: " Denoise First Pass",
-                      thumbTip: "Denoise First Pass",
-                      onChange: (val)=>{handleOnChange("firstPass",val)}
-                    }}/>
-                </div>
-                <div className="col-md-6">
-                  <NumberSliderV2 {...{
-                    min: 0.1, max: 1, step: 0.01,
-                    initialValue: filterState.upscalePass,
-                    label: "Denoise Upscale Pass",
-                    thumbTip: "Denoise Upscale Pass",
-                    onChange: (val)=>{handleOnChange("upscalePass", val)}
-                  }}/>
-                </div>
-              </div>
-              <div className="row g-3 p-3">
-                <div className="col-md-6">
-                  <NumberSliderV2 {...{
-                    min: 0.25, max: 2, step: 0.05,
-                    initialValue: filterState.motionScale,
-                    label: "Motion Scale",
-                    thumbTip: "Motion Scale",
-                    onChange: (val)=>{handleOnChange("motionScale", val)}
-                  }}/>
-                </div>
-                <div className="col-md-6">
-                  <NumberSliderV2 {...{
-                    min: 1.5, max: 2, step: 0.5,
-                    initialValue: filterState.upscaleMultiplier,
-                    label: "Upscale Multiplier",
-                    thumbTip: "Upscale Multiplier",
-                    onChange: (val)=>{handleOnChange("upscaleMultiplier", val)}
-                  }}/>
-                </div>
-              </div>
-              <div className="row g-3 p-3">
-                <div className="col-md-6">
-                  <Checkbox 
-                    label="Use Empty Latent" 
-                    checked={filterState.useEmptyLatent}
-                    onChange={(e:{target:{ checked: boolean, name:string, type: string }})=>{handleOnChange("useEmptyLatent", e.target.checked)}}
-                  />
-                </div>
-                <div className="col-md-6">
-                  <Checkbox 
-                    label="Use Face Detailer" 
-                    checked={filterState.useFaceDetailer}
-                    onChange={(e:{target:{ checked: boolean, name:string, type: string }})=>{handleOnChange("useFaceDetailer", e.target.checked)}}
-                  />
-                </div>
-              </div>
-              <div className="row g-3 p-3">
-                <div className="col-md-6">
-
-                </div>
-                <div className="col-md-6">
-                  <NumberSliderV2 {...{
-                    min: 0.1, max: 0.7, step: 0.01,
-                    initialValue: filterState.denoiseFaceDetailer,
-                    label: "Denoise Face Detailer",
-                    thumbTip: "Denoise Face Detailer",
-                    onChange: (val)=>{handleOnChange("denoiseFaceDetailer", val)}
-                  }}/>
-                </div>
-              </div>
-              <div className="row g-3 p-3">
-                <Checkbox 
-                  label="Use LCM" 
-                  checked={filterState.useLCM}
-                  onChange={(e:{target:{ checked: boolean, name:string, type: string }})=>{handleOnChange("useLCM", e.target.checked)}}
-                />
-              </div>
-              <div className="row g-3 p-3">
-                <div className="col-md-6">
-                  <NumberSliderV2 {...{
-                    min: 1, max: 10, step: 1,
-                    initialValue: filterState.lcmCFG,
-                    label: "LCM CFG",
-                    thumbTip: "LCM CFG",
-                    onChange: (val)=>{handleOnChange("lcmCFG", val)}
-                  }}/>
-                </div>
-                <div className="col-md-6">
-                  <NumberSliderV2 {...{
-                    min: 5, max: 15, step: 1,
-                    initialValue: filterState.lcmSteps,
-                    label: "LCM Steps",
-                    thumbTip: "LCM Steps",
-                    onChange: (val)=>{handleOnChange("lcmSteps", val)}
-                  }}/>
-                </div>
-              </div>
-            </Accordion.Item>
-            <Accordion.Item title="Control Nets" defaultOpen>
-              <div className="row g-3 p-3">
-                <div className="col-md-6">
-                  <NumberSliderV2 {...{
-                    min: 0, max: 1, step: 0.1,
-                    initialValue: filterState.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: filterState.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: filterState.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: filterState.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: filterState.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: filterState.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: filterState.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: filterState.cnTile,
-                    label: "Tile CN",
-                    thumbTip: "Tile CN",
-                    onChange: (val)=>{handleOnChange("cnTile", val)}
-                    }}/>
-                </div>
-              </div>
-            </Accordion.Item>
-            <Accordion.Item title="Video Settings">
-              <div className="row g-3 p-3">
-                <div className="col-md-6">
-                  <Input label="Width" />
-                </div>
-                <div className="col-md-6">
-                  <Input label="Height" />
-                </div>
-              </div>
-              <div className="row g-3 p-3">
-                <div className="col-md-6">
-                  <Input label="Frames Cap" />
-                </div>
-                <div className="col-md-6">
-                  <Input label="Skip Frames" />
-                </div>
-              </div>
-              <div className="row g-3 p-3">
-                <div className="col-md-6">
-                  <Input label="Every n-th Frame" />
-                </div>
-                <div className="col-md-6">
-                  <Input label="Input FPS" readOnly/>
-                </div>
-              </div>
-              <div className="row g-3 p-3">
-                <div className="col-md-6">
-                  <Input label="Interpolation Multiplier" />
-                </div>
-                <div className="col-md-6">
-                </div>
-              </div>
-            </Accordion.Item>
-          </Accordion>
-          <div className="row g-3 py-3">
-            <div className="col-12 d-flex justify-content-end">
-              <Button
-                label={t("Process Filter")}
-                onClick={handleGenerate}
-                variant="primary"
-              />
-            </div>
-          </div>
-        </>
-      );
-  }else if (pageState.status <= states.FILE_LOADING){
-    return (
-      <Panel>
-        <p>Loading Files</p>
-        <Spinner />
-      </Panel>
-    );
-  }
-  return <ErrorMessage />;
-}

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

@@ -0,0 +1,8 @@
+export function isInputValid(keyValues: {[key:string]:number|string|boolean|undefined}){
+  return (
+    keyValues.sdModelToken 
+    && keyValues.sdModelToken !== ""
+    && keyValues.posPrompt
+    && keyValues.posPrompt !== ""
+  );
+}

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

@@ -12,10 +12,8 @@ import {
   Accordion,
   Button,
   BasicVideo,
-  Checkbox,
   ErrorMessage,
   InputSeed,
-  NumberSliderV2,
   Panel,
   SelectModal,
   Spinner,
@@ -24,9 +22,11 @@ import {
 
 import SectionControlNets, {ControlNetsInitialValues as CnIvs} from "./sectionControlNets";
 import SectionVideoSettings from "./sectionVideoSettings";
+import SectionAdvanceOptions, {AdvanceOptionsInitialValues as AdvIvs} from "./sectionAdvanceOptions";
+import { isInputValid } from "./helpers";
 
 export default function PageFilterControls({
-  t, pageState, dispatchPageState, parentPath
+  debug, t, pageState, dispatchPageState, parentPath
 }: {
   debug?: boolean;
   t: Function;
@@ -49,7 +49,7 @@ export default function PageFilterControls({
     },
   });
 
-  const [filterState, setFilterState] = useState({
+  const [workflowValues, setworkflowValues] = useState({
     outputPath: "vid2vid/SparseUpscaleInterp_00001.mp4",
     workflowConfig: "weight_q8sz47gmfw2zx02snrbz88ns9",
     seed: "",
@@ -57,74 +57,68 @@ export default function PageFilterControls({
     loraModelToken: "",
     posPrompt: "",
     negPrompt: "",
-    firstPass: 1,
-    upscalePass: 0.42,
-    motionScale:1,
-    upscaleMultiplier: 1.5,
-    useEmptyLatent: false,
-    useFaceDetailer: false,
-    denoiseFaceDetailer: 0.45,
-    useLCM: false,
-    lcmCFG: 2,
-    lcmSteps: 8,
     framesCap:16,
     skipFrames:0,
     nthFrames:2,
     inputFps: 24,
     interpolationMutiplier: 2,
+    ...AdvIvs,
     ...CnIvs
   });
 
   const handleOnChange = (key: string, newValue:any,) => {
-    setFilterState((curr)=>({...curr, [key]: newValue}));
+    setworkflowValues((curr)=>({...curr, [key]: newValue}));
   }
 
   const history = useHistory();
   const handleGenerate = ()=>{
-    console.log("filterState:")
-    console.log(filterState)
+    if(debug) console.log(workflowValues)
 
-    const request = {
-      "uuid_idempotency_token": uuidv4(),
-      "maybe_sd_model": filterState.sdModelToken,
-      "maybe_workflow_config": filterState.workflowConfig,
-      "maybe_input_file": pageState.mediaFileToken || mediaToken,
-      "maybe_output_path": filterState.outputPath,
-      "maybe_json_modifications": {
-        "$.510.inputs.Text": filterState.posPrompt,
-        "$.8.inputs.text": filterState.negPrompt,
-        "$.173.inputs.seed": filterState.seed,
-        "$.401.inputs.Value": filterState.firstPass,
-        "$.918.inputs.Value": filterState.motionScale,
-        "$.137.inputs.Value": filterState.framesCap,
-        "$.186.inputs.Value": filterState.skipFrames,
-        "$.140.inputs.Value": filterState.nthFrames,
-        "$.154.inputs.Value": filterState.inputFps,
-        "$.445.inputs.number": filterState.interpolationMutiplier,
-        "$.947.inputs.Value": filterState.cnTile,
-        "$.800.inputs.Value": filterState.cnCanny,
-        "$.797.inputs.Value": filterState.cnLinearAnime,
-        "$.796.inputs.Value": filterState.cnLinearRealistic,
-        "$.772.inputs.Value": filterState.cnDepth,
-        "$.771.inputs.Value": filterState.cnOpenPose,
-        "$.527.inputs.Value": filterState.cnPipeFace,
-        "$.403.inputs.Value": filterState.cnSparse
-      },
-    }
-    EnqueueVideoWorkflow(request).then(res => {
-      if (res.success && res.inference_job_token) {
-        dispatchPageState({
-          type: 'enqueueFilterSuccess',
-          payload: {
-            inferenceJobToken: res.inference_job_token
-          }
-        })
-      }else{
-        console.log(res);
+    if (isInputValid(workflowValues)){
+      const request = {
+        "uuid_idempotency_token": uuidv4(),
+        "maybe_sd_model": workflowValues.sdModelToken,
+        "maybe_workflow_config": workflowValues.workflowConfig,
+        "maybe_input_file": pageState.mediaFileToken || mediaToken,
+        "maybe_output_path": workflowValues.outputPath,
+        "maybe_json_modifications": {
+          "$.510.inputs.Text": workflowValues.posPrompt,
+          "$.8.inputs.text": workflowValues.negPrompt,
+          "$.173.inputs.seed": workflowValues.seed,
+          "$.401.inputs.Value": workflowValues.firstPass,
+          "$.918.inputs.Value": workflowValues.motionScale,
+          "$.137.inputs.Value": workflowValues.framesCap,
+          "$.186.inputs.Value": workflowValues.skipFrames,
+          "$.140.inputs.Value": workflowValues.nthFrames,
+          "$.154.inputs.Value": workflowValues.inputFps,
+          "$.445.inputs.number": workflowValues.interpolationMutiplier,
+          "$.947.inputs.Value": workflowValues.cnTile,
+          "$.800.inputs.Value": workflowValues.cnCanny,
+          "$.797.inputs.Value": workflowValues.cnLinearAnime,
+          "$.796.inputs.Value": workflowValues.cnLinearRealistic,
+          "$.772.inputs.Value": workflowValues.cnDepth,
+          "$.771.inputs.Value": workflowValues.cnOpenPose,
+          "$.527.inputs.Value": workflowValues.cnPipeFace,
+          "$.403.inputs.Value": workflowValues.cnSparse
+        },
       }
-    })
-    dispatchPageState({type: 'enqueueFilter'})
-    history.push(`${parentPath}/jobs`);
+      EnqueueVideoWorkflow(request).then(res => {
+        if (res.success && res.inference_job_token) {
+          dispatchPageState({
+            type: 'enqueueFilterSuccess',
+            payload: {
+              inferenceJobToken: res.inference_job_token
+            }
+          })
+        }else{
+          console.log(res);
+        }
+      })
+      dispatchPageState({type: 'enqueueFilter'})
+      history.push(`${parentPath}/jobs`);
+    }else{
+      alert("you must pick an sd weight and input a prompt");
+    }
   }
 
   if (pageState.mediaFile){
@@ -136,17 +130,27 @@ export default function PageFilterControls({
           <Panel>
             <div className="row g-3 p-3">
               <div className="col-5">
-                <BasicVideo src={mediaLink} ref={videoRef}/>
+                <div className="fy-basic-video">
+                  <video controls ref={videoRef}>
+                    <source src={mediaLink} type="video/mp4"/>
+                  </video>
+                </div>
               </div>
-              <div className="col-1 d-flex align-items-center justify-items-center">
-                <FontAwesomeIcon icon={faChevronRight} className="fa-6x"/>
+              <div className="col-2 d-flex align-items-center justify-content-center">
+                <FontAwesomeIcon icon={faChevronRight} className="fa-7x"/>
               </div>
-              <div className="col-6">
+              <div className="col-5">
                 <BasicVideo src={mediaLink} />
               </div>
             </div>
           </Panel>
           <Accordion className="mt-4">
+            <Accordion.Item title="Video Settings">
+              <SectionVideoSettings
+                onChange={(key,val)=>handleOnChange(key,val)}
+                videoElement={videoRef?.current}
+              />
+            </Accordion.Item>
             <Accordion.Item title={"Basics"} defaultOpen>
               <div className="row g-3 p-3">
                 <SelectModal 
@@ -206,7 +210,7 @@ export default function PageFilterControls({
                       label: "Prompt",
                       placeholder: "Enter a prompt",
                       onChange: (e:React.ChangeEvent<HTMLTextAreaElement>)=>handleOnChange("posPrompt", e.target.value),
-                      value: filterState.posPrompt,
+                      value: workflowValues.posPrompt,
                       required: false,
                     }}
                   />
@@ -217,7 +221,7 @@ export default function PageFilterControls({
                       label: "Negative Prompt",
                       placeholder: "Enter Negative Prompt",
                       onChange: (e:React.ChangeEvent<HTMLTextAreaElement>)=>handleOnChange("negPrompt", e.target.value),
-                      value: filterState.negPrompt,
+                      value: workflowValues.negPrompt,
                       required: false,
                     }}
                   />
@@ -231,115 +235,17 @@ export default function PageFilterControls({
               
             </Accordion.Item>
             <Accordion.Item title="Advance" defaultOpen>
-              <div className="row g-3 p-3">
-                <div className="col-md-6">
-                  <NumberSliderV2 {...{
-                      min: 0.1, max: 1, step: 0.01,
-                      initialValue: filterState.firstPass,
-                      label: " Denoise First Pass",
-                      thumbTip: "Denoise First Pass",
-                      onChange: (val)=>{handleOnChange("firstPass",val)}
-                    }}/>
-                </div>
-                <div className="col-md-6">
-                  <NumberSliderV2 {...{
-                    min: 0.1, max: 1, step: 0.01,
-                    initialValue: filterState.upscalePass,
-                    label: "Denoise Upscale Pass",
-                    thumbTip: "Denoise Upscale Pass",
-                    onChange: (val)=>{handleOnChange("upscalePass", val)}
-                  }}/>
-                </div>
-              </div>
-              <div className="row g-3 p-3">
-                <div className="col-md-6">
-                  <NumberSliderV2 {...{
-                    min: 0.25, max: 2, step: 0.05,
-                    initialValue: filterState.motionScale,
-                    label: "Motion Scale",
-                    thumbTip: "Motion Scale",
-                    onChange: (val)=>{handleOnChange("motionScale", val)}
-                  }}/>
-                </div>
-                <div className="col-md-6">
-                  <NumberSliderV2 {...{
-                    min: 1.5, max: 2, step: 0.5,
-                    initialValue: filterState.upscaleMultiplier,
-                    label: "Upscale Multiplier",
-                    thumbTip: "Upscale Multiplier",
-                    onChange: (val)=>{handleOnChange("upscaleMultiplier", val)}
-                  }}/>
-                </div>
-              </div>
-              <div className="row g-3 p-3">
-                <div className="col-md-6">
-                  <Checkbox 
-                    label="Use Empty Latent" 
-                    checked={filterState.useEmptyLatent}
-                    onChange={(e:{target:{ checked: boolean, name:string, type: string }})=>{handleOnChange("useEmptyLatent", e.target.checked)}}
-                  />
-                </div>
-                <div className="col-md-6">
-                  <Checkbox 
-                    label="Use Face Detailer" 
-                    checked={filterState.useFaceDetailer}
-                    onChange={(e:{target:{ checked: boolean, name:string, type: string }})=>{handleOnChange("useFaceDetailer", e.target.checked)}}
-                  />
-                </div>
-              </div>
-              <div className="row g-3 p-3">
-                <div className="col-md-6">
-
-                </div>
-                <div className="col-md-6">
-                  <NumberSliderV2 {...{
-                    min: 0.1, max: 0.7, step: 0.01,
-                    initialValue: filterState.denoiseFaceDetailer,
-                    label: "Denoise Face Detailer",
-                    thumbTip: "Denoise Face Detailer",
-                    onChange: (val)=>{handleOnChange("denoiseFaceDetailer", val)}
-                  }}/>
-                </div>
-              </div>
-              <div className="row g-3 p-3">
-                <Checkbox 
-                  label="Use LCM" 
-                  checked={filterState.useLCM}
-                  onChange={(e:{target:{ checked: boolean, name:string, type: string }})=>{handleOnChange("useLCM", e.target.checked)}}
+              <SectionAdvanceOptions
+                  workflowValues={workflowValues}
+                  onChange={(key,val)=>handleOnChange(key,val)}
                 />
-              </div>
-              <div className="row g-3 p-3">
-                <div className="col-md-6">
-                  <NumberSliderV2 {...{
-                    min: 1, max: 10, step: 1,
-                    initialValue: filterState.lcmCFG,
-                    label: "LCM CFG",
-                    thumbTip: "LCM CFG",
-                    onChange: (val)=>{handleOnChange("lcmCFG", val)}
-                  }}/>
-                </div>
-                <div className="col-md-6">
-                  <NumberSliderV2 {...{
-                    min: 5, max: 15, step: 1,
-                    initialValue: filterState.lcmSteps,
-                    label: "LCM Steps",
-                    thumbTip: "LCM Steps",
-                    onChange: (val)=>{handleOnChange("lcmSteps", val)}
-                  }}/>
-                </div>
-              </div>
             </Accordion.Item>
             <Accordion.Item title="Control Nets" defaultOpen>
               <SectionControlNets
+                workflowValues={workflowValues}
                 onChange={(key,val)=>handleOnChange(key,val)}
               />
             </Accordion.Item>
-            <Accordion.Item title="Video Settings">
-              <SectionVideoSettings
-                onChange={(key,val)=>handleOnChange(key,val)}
-                videoElement={videoRef?.current}
-              />
-            </Accordion.Item>
           </Accordion>
           <div className="row g-3 py-3">
             <div className="col-12 d-flex justify-content-end">

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

@@ -0,0 +1,126 @@
+import React, { memo } from 'react'
+import { NumberSliderV2, Checkbox } from 'components/common'
+
+export const AdvanceOptionsInitialValues = {
+  firstPass: 1,
+  upscalePass: 0.42,
+  motionScale:1,
+  upscaleMultiplier: 1.5,
+  useEmptyLatent: false,
+  useFaceDetailer: false,
+  denoiseFaceDetailer: 0.45,
+  useLCM: false,
+  lcmCFG: 2,
+  lcmSteps: 8,
+}
+
+export default memo( function SectionAdvanceOptions({
+  workflowValues: wfVal, 
+  onChange : handleOnChange
+} : {
+  workflowValues : any
+  onChange: (key:string, val:number|boolean)=>void}
+){
+
+  return(
+    <>
+      <div className="row g-3 p-3">
+        <div className="col-md-6">
+          <NumberSliderV2 {...{
+              min: 0.1, max: 1, step: 0.01,
+              initialValue: wfVal.firstPass,
+              label: " Denoise First Pass",
+              thumbTip: "Denoise First Pass",
+              onChange: (val)=>{handleOnChange("firstPass",val)}
+            }}/>
+        </div>
+        <div className="col-md-6">
+          <NumberSliderV2 {...{
+            min: 0.1, max: 1, step: 0.01,
+            initialValue: wfVal.upscalePass,
+            label: "Denoise Upscale Pass",
+            thumbTip: "Denoise Upscale Pass",
+            onChange: (val)=>{handleOnChange("upscalePass", val)}
+          }}/>
+        </div>
+      </div>
+      <div className="row g-3 p-3">
+        <div className="col-md-6">
+          <NumberSliderV2 {...{
+            min: 0.25, max: 2, step: 0.05,
+            initialValue: wfVal.motionScale,
+            label: "Motion Scale",
+            thumbTip: "Motion Scale",
+            onChange: (val)=>{handleOnChange("motionScale", val)}
+          }}/>
+        </div>
+        <div className="col-md-6">
+          <NumberSliderV2 {...{
+            min: 1.5, max: 2, step: 0.5,
+            initialValue: wfVal.upscaleMultiplier,
+            label: "Upscale Multiplier",
+            thumbTip: "Upscale Multiplier",
+            onChange: (val)=>{handleOnChange("upscaleMultiplier", val)}
+          }}/>
+        </div>
+      </div>
+      <div className="row g-3 p-3">
+        <div className="col-md-6">
+          <Checkbox 
+            label="Use Empty Latent" 
+            checked={wfVal.useEmptyLatent}
+            onChange={(e:{target:{ checked: boolean, name:string, type: string }})=>{handleOnChange("useEmptyLatent", e.target.checked)}}
+          />
+        </div>
+        <div className="col-md-6">
+          <Checkbox 
+            label="Use Face Detailer" 
+            checked={wfVal.useFaceDetailer}
+            onChange={(e:{target:{ checked: boolean, name:string, type: string }})=>{handleOnChange("useFaceDetailer", e.target.checked)}}
+          />
+        </div>
+      </div>
+      <div className="row g-3 p-3">
+        <div className="col-md-6">
+
+        </div>
+        <div className="col-md-6">
+          <NumberSliderV2 {...{
+            min: 0.1, max: 0.7, step: 0.01,
+            initialValue: wfVal.denoiseFaceDetailer,
+            label: "Denoise Face Detailer",
+            thumbTip: "Denoise Face Detailer",
+            onChange: (val)=>{handleOnChange("denoiseFaceDetailer", val)}
+          }}/>
+        </div>
+      </div>
+      <div className="row g-3 p-3">
+        <Checkbox 
+          label="Use LCM" 
+          checked={wfVal.useLCM}
+          onChange={(e:{target:{ checked: boolean, name:string, type: string }})=>{handleOnChange("useLCM", e.target.checked)}}
+        />
+      </div>
+      <div className="row g-3 p-3">
+        <div className="col-md-6">
+          <NumberSliderV2 {...{
+            min: 1, max: 10, step: 1,
+            initialValue: wfVal.lcmCFG,
+            label: "LCM CFG",
+            thumbTip: "LCM CFG",
+            onChange: (val)=>{handleOnChange("lcmCFG", val)}
+          }}/>
+        </div>
+        <div className="col-md-6">
+          <NumberSliderV2 {...{
+            min: 5, max: 15, step: 1,
+            initialValue: wfVal.lcmSteps,
+            label: "LCM Steps",
+            thumbTip: "LCM Steps",
+            onChange: (val)=>{handleOnChange("lcmSteps", val)}
+          }}/>
+        </div>
+      </div>
+    </>
+  );
+});

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

@@ -1,5 +1,4 @@
 import React, { memo } from 'react'
-
 import { NumberSliderV2 } from 'components/common'
 
 export const ControlNetsInitialValues = {
@@ -13,17 +12,21 @@ export const ControlNetsInitialValues = {
   cnTile: 0,
 }
 
-export default memo( function SectionControlNets( 
-  {onChange : handleOnChange} : {onChange: (key:string, val:number)=>void}
+export default memo( function SectionControlNets({
+  workflowValues: wfVal, 
+  onChange : handleOnChange
+} : {
+  workflowValues : any
+  onChange: (key:string, val:number)=>void}
 ){
-  const iv = ControlNetsInitialValues;
+
   return(
     <>
       <div className="row g-3 p-3">
         <div className="col-md-6">
           <NumberSliderV2 {...{
             min: 0, max: 1, step: 0.1,
-            initialValue: iv.cnCanny,
+            initialValue: wfVal.cnCanny,
             label: "Canny",
             thumbTip: "Canny",
             onChange: (val)=>{handleOnChange("cnCanny", val)}
@@ -32,7 +35,7 @@ export default memo( function SectionControlNets(
         <div className="col-md-6">
           <NumberSliderV2 {...{
             min: 0, max: 1, step: 0.1,
-            initialValue: iv.cnLinearAnime,
+            initialValue: wfVal.cnLinearAnime,
             label: "Line Art Anime",
             thumbTip: "Line Art Anime",
             onChange: (val)=>{handleOnChange("cnLinearAnime", val)}
@@ -43,7 +46,7 @@ export default memo( function SectionControlNets(
         <div className="col-md-6">
           <NumberSliderV2 {...{
             min: 0, max: 1, step: 0.1,
-            initialValue: iv.cnDepth,
+            initialValue: wfVal.cnDepth,
             label: "Depth",
             thumbTip: "Depth",
             onChange: (val)=>{handleOnChange("cnDepth", val)}
@@ -52,7 +55,7 @@ export default memo( function SectionControlNets(
         <div className="col-md-6">
           <NumberSliderV2 {...{
             min: 0, max: 1, step: 0.1,
-            initialValue: iv.cnOpenPose,
+            initialValue: wfVal.cnOpenPose,
             label: "OpenPose",
             thumbTip: "OpenPose",
             onChange: (val)=>{handleOnChange("cnOpenPose", val)}
@@ -63,7 +66,7 @@ export default memo( function SectionControlNets(
         <div className="col-md-6">
           <NumberSliderV2 {...{
             min: 0, max: 1, step: 0.1,
-            initialValue: iv.cnPipeFace,
+            initialValue: wfVal.cnPipeFace,
             label: "Media Pipe Face",
             thumbTip: "Media Pipe Face",
             onChange: (val)=>{handleOnChange("cnPipeFace", val)}
@@ -72,7 +75,7 @@ export default memo( function SectionControlNets(
         <div className="col-md-6">
           <NumberSliderV2 {...{
             min: 0, max: 1, step: 0.1,
-            initialValue: iv.cnSparse,
+            initialValue: wfVal.cnSparse,
             label: "Sparse Scribble",
             thumbTip: "Sparse Scribble",
             onChange: (val)=>{handleOnChange("cnSparse", val)}
@@ -83,7 +86,7 @@ export default memo( function SectionControlNets(
         <div className="col-md-6">
           <NumberSliderV2 {...{
             min: 0, max: 1, step: 0.1,
-            initialValue: iv.cnLinearRealistic,
+            initialValue: wfVal.cnLinearRealistic,
             label: "Video CN (Linear Realistic)",
             thumbTip: "Video CN",
             onChange: (val)=>{handleOnChange("cnLinearRealistic", val)}
@@ -92,7 +95,7 @@ export default memo( function SectionControlNets(
         <div className="col-md-6">
           <NumberSliderV2 {...{
             min: 0, max: 1, step: 0.1,
-            initialValue: iv.cnTile,
+            initialValue: wfVal.cnTile,
             label: "Tile CN",
             thumbTip: "Tile CN",
             onChange: (val)=>{handleOnChange("cnTile", val)}

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

@@ -25,7 +25,7 @@ function VideoWorkflowJobList(){
   );
 }
 
-export default memo (function PageJobList({
+export default memo (function PageWorkflowJoblist({
   t, pageState, dispatchPageState
 }: {
   debug?: boolean;
@@ -37,7 +37,7 @@ export default memo (function PageJobList({
   return(
     <>
       <h1>Jobs</h1>
-      {pageState.status === states.FILTER_ENQUEUEING &&
+      {pageState.status === states.WORKFLOW_ENQUEUEING &&
         <div>
           <h2> Requesting Filter Job</h2>
           <Spinner />

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

@@ -32,7 +32,6 @@ export default function TabContentLibrary({
           modalTitle="Select a Video"
           label="Select a Video"
           onSelect={handleOnSelect}
-          value={{token: pageState.mediaFileToken || "", title: ""}}
           tabs={[
             {
               label: "All Videos",

packages/fakeyou.com/src/v2/view/pages/video_workflow/videoWorkflowReducer.tsx

@@ -8,8 +8,8 @@ export enum states{
   FILE_UPLOADED,
   FILE_LOADING,
   FILE_LOADED,
-  FILTER_ENQUEUEING,
-  FILTER_ENQUEUED
+  WORKFLOW_ENQUEUEING,
+  WORKFLOW_ENQUEUED
 }
 
 export type State = {
@@ -20,6 +20,7 @@ export type State = {
 }
 
 export type Action = 
+  | {type: 'reset'}
   | {type: 'stagedFile'}
   | {type: 'clearedFile'}
   | {type: 'selectedFile', payload: { mediaFileToken: string}}
@@ -67,14 +68,15 @@ export function reducer (state: State, action: Action): State {
     case 'enqueueFilter':
       return {
         ...state,
-        status: states.FILTER_ENQUEUEING
+        status: states.WORKFLOW_ENQUEUEING
       }
     case 'enqueueFilterSuccess':
       return {
         ...state,
-        status: states.FILTER_ENQUEUED,
+        status: states.WORKFLOW_ENQUEUED,
         inferenceJobToken: action.payload.inferenceJobToken
       }
+    case 'reset':
     default:
       return {status: states.NO_FILE};
       

packages/fakeyou.com/src/v2/view/pages/video_workflow/videoWorkflowRoutes.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import {Switch, Route, useRouteMatch, Redirect} from "react-router-dom";
+import {Switch, Route, useRouteMatch, Redirect, useHistory} from "react-router-dom";
 import PageWorkflowControls from "./components/pageWorkflowControls";
 import PageVideoProvision from "./components/pageVideoProvision";
-import PageJobList from "./components/pageJobList";
-import {State,Action} from "./videoWorkflowReducer";
+import PageWorkflowJoblist from "./components/pageWorkflowJoblist";
+import {states,State,Action} from "./videoWorkflowReducer";
 
 export default function SubRoutes ({
   debug, t, pageState, dispatchPageState
@@ -14,6 +14,15 @@ export default function SubRoutes ({
   dispatchPageState: (action: Action) => void
 }){
   const { path } = useRouteMatch();
+  const history = useHistory();
+  history.listen(({pathname}, action) => {
+    if ((pathname === path || pathname.match(/upload|select-media/g)) && pageState.status >= states.FILE_LOADING){
+      //reset page if landed on page "Freshly"
+      dispatchPageState({type: 'reset'})
+    }
+  })
+
+
   const commonPageProps = {
     debug, parentPath: path, t, pageState, dispatchPageState
   };
@@ -30,7 +39,7 @@ export default function SubRoutes ({
         <PageVideoProvision {...commonPageProps}/>
       </Route>
       <Route exact path={`${path}/jobs`}>
-        <PageJobList {...commonPageProps}/>
+        <PageWorkflowJoblist {...commonPageProps}/>
       </Route>
       <Route path={`${path}`}>
         <Redirect to={`${path}/upload`} />