diff --git a/packages/components/src/api/video_styleTransfer/EnqueueVideoStyleTransfer.tsx b/packages/components/src/api/video_styleTransfer/EnqueueVideoStyleTransfer.tsx index 59b4d69195..17932e0662 100644 --- a/packages/components/src/api/video_styleTransfer/EnqueueVideoStyleTransfer.tsx +++ b/packages/components/src/api/video_styleTransfer/EnqueueVideoStyleTransfer.tsx @@ -1,31 +1,30 @@ import { ApiConfig } from "@storyteller/components"; export interface EnqueueVideoStyleTransferRequest { - "uuid_idempotency_token": string, - - "maybe_sd_model": string, - "maybe_workflow_config": string, - "maybe_input_file": string, - "maybe_output_path": string, + "uuid_idempotency_token":string; + "maybe_sd_model": string; + "maybe_workflow_config": string; + "maybe_input_file": string; + "maybe_output_path": string; + "creator_set_visibility": string; "maybe_json_modifications": { - "$.510.inputs.Text": string, - "$.8.inputs.text": string, - "$.173.inputs.seed": string, - "$.401.inputs.Value": number, - "$.918.inputs.Value": number, - "$.137.inputs.Value": number, - "$.186.inputs.Value": number, - "$.140.inputs.Value":number, - "$.154.inputs.Value": number, - "$.445.inputs.number": number, - "$.947.inputs.Value": number, - "$.800.inputs.Value": number, - "$.797.inputs.Value": number, - "$.796.inputs.Value": number, - "$.772.inputs.Value": number, - "$.771.inputs.Value": number, - "$.527.inputs.Value": number, - "$.403.inputs.Value": number, + "$.154.inputs.Value": number; + "$.510.inputs.Text": string; + "$.8.inputs.text": string; + + "$.800.inputs.Value": number; + "$.772.inputs.Value": number; + "$.797.inputs.Value": number; + "$.796.inputs.Value": number; + "$.1636.inputs.Value": number; + "$.771.inputs.Value": number; + "$.403.inputs.Value": number; + "$.1398.inputs.Value": number; + "$.1531.inputs.Value": number; + + "$.1449.inputs.filename_prefix": string; + // "$.208.inputs.lora_01": string; + // "$.208.inputs.strength_01": number; } } diff --git a/packages/components/src/api/video_workflow/EnqueueVideoWorkflow.tsx b/packages/components/src/api/video_workflow/EnqueueVideoWorkflow.tsx index db261cff39..d8dc8ff670 100644 --- a/packages/components/src/api/video_workflow/EnqueueVideoWorkflow.tsx +++ b/packages/components/src/api/video_workflow/EnqueueVideoWorkflow.tsx @@ -36,8 +36,6 @@ export interface EnqueueVideoWorkflowResponse { export async function EnqueueVideoWorkflow(request: EnqueueVideoWorkflowRequest) : Promise { - // const endpoint = "/v1/workflow/comfy/create"; - const endpoint = new ApiConfig().enqueueVideoWorkflow(); return await fetch(endpoint, { diff --git a/packages/fakeyou.com/src/components/common/Button/Button.tsx b/packages/fakeyou.com/src/components/common/Button/Button.tsx index 133ecf67e4..4b84d643bf 100644 --- a/packages/fakeyou.com/src/components/common/Button/Button.tsx +++ b/packages/fakeyou.com/src/components/common/Button/Button.tsx @@ -11,7 +11,7 @@ export default function Button({ label, icon, small, - variant = "primary", + variant: variantProps = "primary", to, href, target = "_self", @@ -22,8 +22,14 @@ export default function Button({ download, disabled, isLoading = false, + isActive, ...rest }: ButtonProps) { + let variant = variantProps; + if(isActive !== undefined){ + if(isActive) variant = "primary" + else variant = "secondary" + } let iconMarginClass = !square && label ? (iconFlip ? "ms-2" : "me-2") : ""; let IconComponent = icon ? ( diff --git a/packages/fakeyou.com/src/components/common/Button/ButtonProps.tsx b/packages/fakeyou.com/src/components/common/Button/ButtonProps.tsx index 9a0936fca5..a5226dd690 100644 --- a/packages/fakeyou.com/src/components/common/Button/ButtonProps.tsx +++ b/packages/fakeyou.com/src/components/common/Button/ButtonProps.tsx @@ -18,4 +18,5 @@ export default interface ButtonProps extends ButtonHTMLAttributes>; sessionWrapper: SessionWrapper; }){ - const debug = true; + const debug = false; const {t} = useLocalize("VideoStyleTransfer"); const { NO_FILE } = states; const [pageState, dispatchPageState] = useReducer(reducer, { diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/cnPresets.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/cnPresets.tsx new file mode 100644 index 0000000000..0ff64a0aa8 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/cnPresets.tsx @@ -0,0 +1,93 @@ +type CNPreset = + 'custom'| + 'closeup'| + 'halfbody'| + 'fullbody'| + 'landscape'| + 'typog'; + +const defaultPreset = { + cnCanny: 0, + cnDepth: 0.7, + cnLineArtAnime: 0.7, + cnLineArtRealistic: 0.7, + cnLipsStrength: 0, + cnOpenPose: 0.7, + cnPipeFace: 0.7, + cnSparseScribble: 0.7, + cnSoftEdge: 0.7, + cnRegularSteps: 30, +} +const closeupPreset = { + cnCanny: 0, + cnDepth: 0, + cnLineArtAnime: 0.7, + cnLineArtRealistic: 0, + cnLipsStrength: 0, + cnOpenPose: 0, + cnPipeFace: 0, + cnSparseScribble: 0.7, + cnSoftEdge: 0.7, + cnRegularSteps: 30, +} +const halfbodyPreset = { + cnCanny: 0, + cnDepth: 0, + cnLineArtAnime: 0.7, + cnLineArtRealistic: 0, + cnLipsStrength: 0, + cnOpenPose: 0.5, + cnPipeFace: 0, + cnSparseScribble: 0.7, + cnSoftEdge: 0.7, + cnRegularSteps: 30, +} +const fullbodyPreset = { + cnCanny: 0, + cnDepth: 0, + cnLineArtAnime: 0.7, + cnLineArtRealistic: 0, + cnLipsStrength: 0, + cnOpenPose: 1, + cnPipeFace: 0, + cnSparseScribble: 0.7, + cnSoftEdge: 0.7, + cnRegularSteps: 30, +} +const landscapePreset = { + cnCanny: 0.7, + cnDepth: 0.7, + cnLineArtAnime: 0.7, + cnLineArtRealistic: 0, + cnLipsStrength: 0, + cnOpenPose: 0, + cnPipeFace: 0, + cnSparseScribble: 0.7, + cnSoftEdge: 0.7, + cnRegularSteps: 30, +} + +const typogPreset = { + cnCanny: 0, + cnDepth: 0, + cnLineArtAnime: 0.7, + cnLineArtRealistic: 0, + cnLipsStrength: 0, + cnOpenPose: 0, + cnPipeFace: 0, + cnSparseScribble: 0, + cnSoftEdge: 0.7, + cnRegularSteps: 30, +} + +export type { + CNPreset +} +export { + defaultPreset, + closeupPreset, + halfbodyPreset, + fullbodyPreset, + landscapePreset, + typogPreset, +}; \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/defaultValues.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/defaultValues.tsx index 3ab578cd75..030ea0d7aa 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/defaultValues.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/defaultValues.tsx @@ -1,48 +1,34 @@ +import { defaultPreset as defaultCN } from "./cnPresets"; export {initialValues, hiddenValues}; const initialValues = { - //config + //files Settings + fileToken: "", outputPath: "", - workflowConfig: "weight_f5qh4s1dtp266yv313p09tkpa", - + //video Settings width: 544, height: 544, maxFrames: 17, framesCap: 16, skipFrames: 0, - everyNthFrame: 2, - inputFps: 24, - interpolationMultiplier: 2, - //basics - seed: "", + //Presents + // workflowConfig: "weight_f5qh4s1dtp266yv313p09tkpa", + workflowConfig: "weight_99tz2nzbp5x9v55gqn5ekj1sd", sdModelToken: "weight_83xpresyjswy97ppk0fyct146", loraModelToken: "weight_13yfxfafv195ejwh3meesebdk", + loraModelStrength: 1, + + //basics + inputFps: 24, posPrompt: "", negPrompt: "", - - //advance - firstPass: 0, - upscalePass: 0, - motionScale:0, - upscaleMultiplier: 0, - useEmptyLatent: false, - useFaceDetailer: false, - denoiseFaceDetailer: 0, - useLCM: false, - lcmCFG: 0, - lcmSteps: 0, + visibility: "private", //Control Net - cnCanny: 0.7, - cnDepth: 0.7, - cnLinearAnime: 0.7, - cnLinearRealistic: 0.7, - cnOpenPose: 0.7, - cnPipeFace: 0.7, - cnSparse: 0.7, - cnTile: 0.7, + ...defaultCN }; + const hiddenValues = { posPrompt: "(masterpiece,detailed,highres:1.4), ", negPrompt: "flare, lens flare, glare, naked, nsfw, text, logo, Shutterstock, watermark:1.3, embedding:easynegative, embedding:badhandv4,(worst quality, low quality:1.4), lowres, blurry, monochrome, ", diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/helpers.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/helpers.tsx index c2814757bd..bcb8b0d9ec 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/helpers.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/helpers.tsx @@ -1,7 +1,7 @@ import { v4 as uuidv4 } from "uuid"; import { hiddenValues } from "./defaultValues"; -export type WorkflowValuesType = { +export type VSTType = { // File Settings fileToken: string; outputPath: string; @@ -11,36 +11,30 @@ export type WorkflowValuesType = { maxFrames: number; framesCap: number; skipFrames: number; - everyNthFrame: number; - inputFps: number; - interpolationMultiplier: number; - // Basic Inputs + + // Presets workflowConfig: string; - seed: string; sdModelToken: string; - loraModelToken: string; + // loraModelToken: string; + // loraModelStrength: number; + + //basics + inputFps: number; 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 + visibility: string; + + //advance cnCanny: number; cnDepth: number; - cnLinearAnime: number; - cnLinearRealistic: number; + cnLineArtAnime: number; + cnLineArtRealistic: number; + cnLipsStrength: number; cnOpenPose: number; cnPipeFace: number; - cnSparse: number; - cnTile: number; + cnSparseScribble: number; + cnSoftEdge: number; + cnRegularSteps: number } export function isInputValid(keyValues: {[key:string]:number|string|boolean|undefined}){ @@ -52,35 +46,37 @@ export function isInputValid(keyValues: {[key:string]:number|string|boolean|unde ); } -export function mapRequest(workflowValues: WorkflowValuesType){ +export function mapRequest(vstValues: VSTType){ //TODO: improve the typing of this - return { + 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_sd_model": vstValues.sdModelToken, + "maybe_workflow_config":vstValues.workflowConfig, + "maybe_input_file": vstValues.fileToken, + "maybe_output_path":"", + "creator_set_visibility": vstValues.visibility, "maybe_json_modifications": { + "$.154.inputs.Value": vstValues.inputFps, "$.510.inputs.Text": - hiddenValues.posPrompt + workflowValues.posPrompt, + hiddenValues.posPrompt + vstValues.posPrompt, "$.8.inputs.text": - hiddenValues.negPrompt+ 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 + hiddenValues.negPrompt+ vstValues.negPrompt, + + "$.800.inputs.Value": 0, //vstValues.cnCanny, + "$.772.inputs.Value": vstValues.cnDepth, + "$.797.inputs.Value": vstValues.cnLineArtAnime, + "$.796.inputs.Value": vstValues.cnLineArtRealistic, + "$.1636.inputs.Value": 0, //vstValues.cnLipsStrength, + "$.771.inputs.Value": vstValues.cnOpenPose, + "$.403.inputs.Value": vstValues.cnSparseScribble, + "$.1398.inputs.Value": vstValues.cnSoftEdge, + "$.1531.inputs.Value": vstValues.cnRegularSteps, + + "$.1449.inputs.filename_prefix": "vid2vid/SparseUpscaleInterp", + + // "$.208.inputs.lora_01": vstValues.loraModelToken, + // "$.208.inputs.strength_01": vstValues.loraModelStrength }, + } } 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 13214da0ca..921700aad5 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 @@ -4,7 +4,7 @@ import { useParams, useHistory } from "react-router-dom"; import { Button, - Label, + // Label, Panel, NumberSliderV2, TextArea, @@ -12,15 +12,14 @@ import { } from "components/common"; import EnqueueVideoStyleTransfer from "@storyteller/components/src/api/video_styleTransfer"; -import generateRandomSeed from 'resources/generateRandomSeed'; import { Action, State } from "../../reducer"; -import { TableOfKeyValues } from "../../commons"; +// import { TableOfKeyValues } from "../../commons"; import { initialValues } from "./defaultValues"; import { mapRequest, - WorkflowValuesType, + VSTType, } from "./helpers"; import SectionAdvanceOptions from "./sectionAdvanceOptions"; @@ -39,10 +38,9 @@ export default function PageVSTApp({ const videoRef = useRef(null); const { mediaToken } = useParams(); - const [workflowValues, setWorkflowValues] = useState({ - fileToken: pageState.mediaFileToken || mediaToken, + const [vstValues, setVstValues] = useState({ ...initialValues, - seed: generateRandomSeed(), + fileToken: pageState.mediaFileToken || mediaToken, }); @@ -63,10 +61,10 @@ export default function PageVSTApp({ else if (debug) console.log(`aspectRaio: ${aspectRatio}`); } if(ve.duration){ - newValues.maxFrames = Math.floor(ve.duration)*workflowValues.inputFps; + newValues.maxFrames = Math.floor(ve.duration)*vstValues.inputFps; newValues.framesCap = newValues.maxFrames; } - setWorkflowValues((curr)=>({ + setVstValues((curr)=>({ ...curr, ...newValues, })) @@ -75,15 +73,15 @@ export default function PageVSTApp({ const handleOnChange = (val:{[key: string]: number|string|boolean|undefined}) => { - setWorkflowValues((curr)=>({...curr, ...val})); + setVstValues((curr)=>({...curr, ...val})); } const history = useHistory(); const handleGenerate = ()=>{ - if(debug) console.log(workflowValues) + if(debug) console.log(vstValues) - const request = mapRequest(workflowValues); + const request = mapRequest(vstValues); if (debug) console.log(request); EnqueueVideoStyleTransfer(request).then(res => { if (res.success && res.inference_job_token) { @@ -101,13 +99,18 @@ export default function PageVSTApp({ history.push(`${parentPath}/jobs`); } + // const handleFakeGen = ()=>{ + // const request = mapRequest(vstValues); + // console.log(request); + // } + return(
{ dispatchPageState({ @@ -120,41 +123,41 @@ export default function PageVSTApp({ }} />
-
+ {/*
-
+
*/}