From 64d8d7700d10ee7e6089d358a7aa06ea00b7d4bb Mon Sep 17 00:00:00 2001 From: wil Date: Thu, 8 Feb 2024 12:37:34 -0500 Subject: [PATCH] better workflow control UI, framescap is more-o-less accurate --- .../pageWorkflowControls/helpers.tsx | 74 +++++++++++++++ .../pageWorkflowControls.tsx | 93 ++++++++----------- .../sectionAdvanceOptions.tsx | 3 +- .../sectionControlNets.tsx | 3 +- .../sectionVideoSettings.tsx | 44 ++++++--- 5 files changed, 150 insertions(+), 67 deletions(-) diff --git a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/helpers.tsx b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/helpers.tsx index 23304280db..8ccad27ece 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/helpers.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/helpers.tsx @@ -1,3 +1,46 @@ +import { v4 as uuidv4 } from "uuid"; + +export type WorkflowValuesType = { + // File Settings + fileToken: string; + outputPath: string; + // Video Settings + width: number; + height: number; + maxFrames: number; + framesCap: number; + skipFrames: number; + everyNthFrame: number; + inputFps: number; + interpolationMultiplier: number; + // Basic Inputs + workflowConfig: string; + seed: string; + sdModelToken: string; + loraModelToken: string; + posPrompt: string; + negPrompt: string; + // Advance Options Values + firstPass: number; + upscalePass: number; + motionScale: number; + upscaleMultiplier: number; + useEmptyLatent: boolean; + useFaceDetailer: boolean; + denoiseFaceDetailer: number; + useLCM: boolean; + lcmCFG: number; + lcmSteps: number; + // Control Net Values + cnCanny: number; + cnDepth: number; + cnLinearAnime: number; + cnLinearRealistic: number; + cnOpenPose: number; + cnPipeFace: number; + cnSparse: number; + cnTile: number; +} export function isInputValid(keyValues: {[key:string]:number|string|boolean|undefined}){ return ( keyValues.sdModelToken @@ -5,4 +48,35 @@ export function isInputValid(keyValues: {[key:string]:number|string|boolean|unde && keyValues.posPrompt && keyValues.posPrompt !== "" ); +} + +export function mapRequest(workflowValues: WorkflowValuesType){ + //TODO: improve the typing of this + return { + "uuid_idempotency_token": uuidv4(), + "maybe_sd_model": workflowValues.sdModelToken, + "maybe_workflow_config": workflowValues.workflowConfig, + "maybe_input_file": workflowValues.fileToken, + "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.everyNthFrame, + "$.154.inputs.Value": workflowValues.inputFps, + "$.445.inputs.number": workflowValues.interpolationMultiplier, + "$.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 + }, + } } \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/pageWorkflowControls.tsx b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/pageWorkflowControls.tsx index 485c6166c7..8b01e91ea8 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/pageWorkflowControls.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/pageWorkflowControls.tsx @@ -1,8 +1,5 @@ import React, {useState, useRef} 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"; @@ -11,7 +8,6 @@ import { states, Action, State } from "../../videoWorkflowReducer"; import { Accordion, Button, - BasicVideo, ErrorMessage, InputSeed, Panel, @@ -21,9 +17,13 @@ import { } from "components/common"; import SectionControlNets, {ControlNetsInitialValues as CnIvs} from "./sectionControlNets"; -import SectionVideoSettings from "./sectionVideoSettings"; +import SectionVideoSettings, {VideoSettingsInitialValues as VideoIvs} from "./sectionVideoSettings"; import SectionAdvanceOptions, {AdvanceOptionsInitialValues as AdvIvs} from "./sectionAdvanceOptions"; -import { isInputValid } from "./helpers"; +import { + isInputValid, + mapRequest, + WorkflowValuesType +} from "./helpers"; export default function PageFilterControls({ debug, t, pageState, dispatchPageState, parentPath @@ -49,7 +49,8 @@ export default function PageFilterControls({ }, }); - const [workflowValues, setworkflowValues] = useState({ + const [workflowValues, setworkflowValues] = useState({ + fileToken: pageState.mediaFileToken || mediaToken, outputPath: "vid2vid/SparseUpscaleInterp_00001.mp4", workflowConfig: "weight_q8sz47gmfw2zx02snrbz88ns9", seed: "", @@ -57,11 +58,7 @@ export default function PageFilterControls({ loraModelToken: "", posPrompt: "", negPrompt: "", - framesCap:16, - skipFrames:0, - nthFrames:2, - inputFps: 24, - interpolationMutiplier: 2, + ...VideoIvs, ...AdvIvs, ...CnIvs }); @@ -75,33 +72,8 @@ export default function PageFilterControls({ if(debug) console.log(workflowValues) 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 - }, - } + const request = mapRequest(workflowValues); + console.log(request); EnqueueVideoWorkflow(request).then(res => { if (res.success && res.inference_job_token) { dispatchPageState({ @@ -129,28 +101,43 @@ export default function PageFilterControls({ <>
-
+
-
-
- -
-
- +
+ handleOnChange(key,val)} + videoElement={videoRef?.current} + /> +
+
+
- - handleOnChange(key,val)} - videoElement={videoRef?.current} - /> -