From b0f2ff917d36487efdd09a5cee4f403e67a92bc4 Mon Sep 17 00:00:00 2001 From: wil Date: Wed, 7 Feb 2024 10:07:36 -0500 Subject: [PATCH] second attempt to making the namespace change in the inference jobs end --- packages/components/src/api/ApiConfig.ts | 4 +- .../src/api/storyteller_filter/index.ts | 7 - .../EnqueueVideoWorkflow.tsx} | 8 +- .../src/api/video_workflow/index.ts | 7 + packages/components/src/jobs/InferenceJob.ts | 2 +- packages/fakeyou.com/src/App.tsx | 2 +- .../pages/video_workflow/VideoWorkflow.tsx | 4 +- .../components/pageFilterControls.tsx | 473 ++++++++++++++++++ .../video_workflow/components/pageJobList.tsx | 6 +- .../components/pageWorkflowControls/index.tsx | 1 + .../pageWorkflowControls.tsx | 15 +- 11 files changed, 502 insertions(+), 27 deletions(-) delete mode 100644 packages/components/src/api/storyteller_filter/index.ts rename packages/components/src/api/{storyteller_filter/EnqueueStorytellerFilter.tsx => video_workflow/EnqueueVideoWorkflow.tsx} (83%) create mode 100644 packages/components/src/api/video_workflow/index.ts create mode 100644 packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageFilterControls.tsx create mode 100644 packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/index.tsx rename packages/fakeyou.com/src/v2/view/pages/video_workflow/components/{ => pageWorkflowControls}/pageWorkflowControls.tsx (97%) diff --git a/packages/components/src/api/ApiConfig.ts b/packages/components/src/api/ApiConfig.ts index 59df11f2ba..42c934ed21 100644 --- a/packages/components/src/api/ApiConfig.ts +++ b/packages/components/src/api/ApiConfig.ts @@ -496,8 +496,8 @@ class ApiConfig { return `${this.getApiOrigin()}/v1/mocap/mocapnet/create`; } - // =============== Storyteller Filter =============== - enqueueStorytellerFilter(): string { + // =============== Video Workflow =============== + enqueueVideoWorkflow(): string { return `${this.getApiOrigin()}/v1/workflow/comfy/create`; } diff --git a/packages/components/src/api/storyteller_filter/index.ts b/packages/components/src/api/storyteller_filter/index.ts deleted file mode 100644 index aebe56e156..0000000000 --- a/packages/components/src/api/storyteller_filter/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type { - EnqueueStorytellerFilterRequest, EnqueueStorytellerFilterResponse, -} from './EnqueueStorytellerFilter'; - -export { - EnqueueStorytellerFilter -} from './EnqueueStorytellerFilter'; \ No newline at end of file diff --git a/packages/components/src/api/storyteller_filter/EnqueueStorytellerFilter.tsx b/packages/components/src/api/video_workflow/EnqueueVideoWorkflow.tsx similarity index 83% rename from packages/components/src/api/storyteller_filter/EnqueueStorytellerFilter.tsx rename to packages/components/src/api/video_workflow/EnqueueVideoWorkflow.tsx index 1da9000fc3..db261cff39 100644 --- a/packages/components/src/api/storyteller_filter/EnqueueStorytellerFilter.tsx +++ b/packages/components/src/api/video_workflow/EnqueueVideoWorkflow.tsx @@ -1,6 +1,6 @@ import { ApiConfig } from "@storyteller/components"; -export interface EnqueueStorytellerFilterRequest { +export interface EnqueueVideoWorkflowRequest { "uuid_idempotency_token": string, "maybe_sd_model": string, @@ -29,16 +29,16 @@ export interface EnqueueStorytellerFilterRequest { } } -export interface EnqueueStorytellerFilterResponse { +export interface EnqueueVideoWorkflowResponse { success: boolean, inference_job_token?: string, } -export async function EnqueueStorytellerFilter(request: EnqueueStorytellerFilterRequest) : Promise +export async function EnqueueVideoWorkflow(request: EnqueueVideoWorkflowRequest) : Promise { // const endpoint = "/v1/workflow/comfy/create"; - const endpoint = new ApiConfig().enqueueStorytellerFilter(); + const endpoint = new ApiConfig().enqueueVideoWorkflow(); return await fetch(endpoint, { method: 'POST', diff --git a/packages/components/src/api/video_workflow/index.ts b/packages/components/src/api/video_workflow/index.ts new file mode 100644 index 0000000000..6c3f2ee01b --- /dev/null +++ b/packages/components/src/api/video_workflow/index.ts @@ -0,0 +1,7 @@ +export type { + EnqueueVideoWorkflowRequest, EnqueueVideoWorkflowResponse, +} from './EnqueueVideoWorkflow'; + +export { + EnqueueVideoWorkflow +} from './EnqueueVideoWorkflow'; \ No newline at end of file diff --git a/packages/components/src/jobs/InferenceJob.ts b/packages/components/src/jobs/InferenceJob.ts index 88388e07b2..4ff6ad37db 100644 --- a/packages/components/src/jobs/InferenceJob.ts +++ b/packages/components/src/jobs/InferenceJob.ts @@ -12,7 +12,7 @@ export enum FrontendInferenceJobType { VideoMotionCapture, ConvertFbxtoGltf, EngineComposition, - StorytellerFilter, + VideoWorkflow, } // NB: Many of these fields are optional despite the response payload containing them diff --git a/packages/fakeyou.com/src/App.tsx b/packages/fakeyou.com/src/App.tsx index e6b7de0e21..1eaa81b114 100644 --- a/packages/fakeyou.com/src/App.tsx +++ b/packages/fakeyou.com/src/App.tsx @@ -210,7 +210,7 @@ function initInferenceJobsByCategoryMap(): Map< inferenceJobsByCategory.set(FrontendInferenceJobType.VideoMotionCapture, []); inferenceJobsByCategory.set(FrontendInferenceJobType.ImageGeneration, []); inferenceJobsByCategory.set(FrontendInferenceJobType.ConvertFbxtoGltf, []); - inferenceJobsByCategory.set(FrontendInferenceJobType.StorytellerFilter, []) + inferenceJobsByCategory.set(FrontendInferenceJobType.VideoWorkflow, []) return inferenceJobsByCategory; } diff --git a/packages/fakeyou.com/src/v2/view/pages/video_workflow/VideoWorkflow.tsx b/packages/fakeyou.com/src/v2/view/pages/video_workflow/VideoWorkflow.tsx index 0ea447f01f..ad2c8af1db 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_workflow/VideoWorkflow.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_workflow/VideoWorkflow.tsx @@ -26,7 +26,7 @@ export default function StorytellerFilter(props:{ const { enqueueInferenceJob } = props; useInferenceJobs( - FrontendInferenceJobType.StorytellerFilter + FrontendInferenceJobType.VideoWorkflow ); useEffect(() => { if ( @@ -35,7 +35,7 @@ export default function StorytellerFilter(props:{ ) { enqueueInferenceJob( pageState.inferenceJobToken, - FrontendInferenceJobType.StorytellerFilter + FrontendInferenceJobType.VideoWorkflow ); dispatchPageState({ type: "enqueueFilterSuccess", diff --git a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageFilterControls.tsx b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageFilterControls.tsx new file mode 100644 index 0000000000..8b3f149bb3 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageFilterControls.tsx @@ -0,0 +1,473 @@ +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(); + 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( + <> + +
+
+ +
+
+ +
+
+ +
+
+ + + +
+ { + 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", + }, + ]} + /> +
+
+ { + 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", + }, + ]} + /> +
+
+
+