Merge pull request #509 from storytold/feature/page/video_transfer

Feature/page/video transfer
This commit is contained in:
wil authored and GitHub committed 2024-02-25 21:49:01 -05:00
commit f59de590d8
12 files changed
+385 -184

No files matched your search

@@ -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;
}
}
@@ -36,8 +36,6 @@ export interface EnqueueVideoWorkflowResponse {
export async function EnqueueVideoWorkflow(request: EnqueueVideoWorkflowRequest) : Promise<EnqueueVideoWorkflowResponse>
{
// const endpoint = "/v1/workflow/comfy/create";
const endpoint = new ApiConfig().enqueueVideoWorkflow();
return await fetch(endpoint, {
@@ -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 ? (
<FontAwesomeIcon icon={icon} className={iconMarginClass} />
@@ -18,4 +18,5 @@ export default interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElem
download?: boolean | string;
disabled?: boolean;
isLoading?: boolean;
isActive?: boolean;
}
@@ -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, {
@@ -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,
};
@@ -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, ",
@@ -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
},
}
}
@@ -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<HTMLVideoElement>(null);
const { mediaToken } = useParams<any>();
const [workflowValues, setWorkflowValues] = useState<WorkflowValuesType>({
fileToken: pageState.mediaFileToken || mediaToken,
const [vstValues, setVstValues] = useState<VSTType>({
...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(
<Panel className="mb-4 p-4">
<div className="row g-3 mb-4">
<div className="col-12 col-md-6">
<VideoFakeyou
label={t("video.label.original")}
mediaToken={workflowValues.fileToken}
mediaToken={vstValues.fileToken}
ref={videoRef}
onResponse={(res)=>{
dispatchPageState({
@@ -120,41 +123,41 @@ export default function PageVSTApp({
}}
/>
</div>
<div className="col-12 col-md-6">
{/* <div className="col-12 col-md-6">
<Label label={t("image.label.preview")}/>
{debug && <TableOfKeyValues keyValues={workflowValues} height={400}/>}
{debug && <TableOfKeyValues keyValues={vstValues} height={400}/>}
</div>
</div>
<div className="row g-3 mb-4">
<div className="row g-3 mb-4"> */}
<div className="col-12 col-md-6">
<TextArea
{...{
label: t("input.label.prompt"),
placeholder: t("input.placeholder.prompt"),
onChange: (e:React.ChangeEvent<HTMLTextAreaElement>)=>handleOnChange({posPrompt: e.target.value}),
value: workflowValues.posPrompt,
value: vstValues.posPrompt,
required: false,
}}
/>
</div>
<div className="col-12 col-md-6">
{/* </div>
<div className="col-12 col-md-6"> */}
<TextArea
{...{
label: t("input.label.negPrompt"),
placeholder: t("input.placeholder.negPrompt"),
onChange: (e:React.ChangeEvent<HTMLTextAreaElement>)=>handleOnChange({negPrompt: e.target.value}),
value: workflowValues.negPrompt,
value: vstValues.negPrompt,
required: false,
}}
/>
</div>
{/* </div>
</div>
<div className="row g-3 mb-4">
<div className="col-12 col-md-6">
<div className="col-12 col-md-6"> */}
<NumberSliderV2 {...{
min: 1, max: 60, step: 1,
initialValue: workflowValues.inputFps,
initialValue: vstValues.inputFps,
label: "Input FPS",
thumbTip: "Input FPS",
onChange: (val)=>{handleOnChange({inputFps: val})}
@@ -164,7 +167,7 @@ export default function PageVSTApp({
<div className="row g-3 mt-4">
<SectionAdvanceOptions
onChange={handleOnChange}
workflowValues={workflowValues}
vstValues={vstValues}
/>
</div>
<div className="row g-3 mt-4">
@@ -176,6 +179,11 @@ export default function PageVSTApp({
variant="primary"
/>
</NavLink>
{/* <Button
label="Fake Gen"
onClick={handleFakeGen}
variant="primary"
/> */}
<Button
label={t("button.enqueue")}
onClick={handleGenerate}
@@ -1,4 +1,4 @@
import React from 'react';
import React, {useState} from 'react';
import {
faFaceViewfinder,
@@ -16,24 +16,95 @@ import {
Label,
NumberSliderV2
} from 'components/common';
import { WorkflowValuesType } from './helpers';
import { VSTType } from './helpers';
import {
CNPreset,
closeupPreset,
halfbodyPreset,
fullbodyPreset,
landscapePreset,
typogPreset,
defaultPreset,
} from './cnPresets';
export default function sectionAdvanceOptions({
workflowValues: wfVal,
export default function SectionAdvanceOptions({
vstValues: vstVal,
onChange: handleOnChange
}:{
workflowValues : WorkflowValuesType,
vstValues : VSTType,
onChange: (val:{[key: string]: number|string|boolean|undefined})=>void
}){
const [preset, pickPreset] = useState<CNPreset>('custom')
function handlePreset(newPreset: CNPreset){
switch (newPreset){
case 'closeup':
handleOnChange(closeupPreset);
break;
case 'halfbody':
handleOnChange(halfbodyPreset);
break;
case 'fullbody':
handleOnChange(fullbodyPreset);
break;
case 'landscape':
handleOnChange(landscapePreset);
break;
case 'typog':
handleOnChange(typogPreset);
break;
case 'custom':
default:
handleOnChange(defaultPreset);
break;
}
pickPreset(newPreset);
}
return (
<>
<Label label="Video's Camera Angle"/>
<div className="d-flex justify-content-between w-100">
<Button icon={faFaceViewfinder} label="Face Closeups"/>
<Button icon={faUser} label="Half Body Shots"/>
<Button icon={faPerson} label="Full Body Shots"/>
<Button icon={faBuildingColumns} label="Architecture or Landscape"/>
<Button icon={faText} label="Flat Logos, or Typographies"/>
<div className="my-1 me-1">
<Button
icon={faFaceViewfinder}
label="Face Closeups"
isActive={preset==='closeup'}
onClick={()=>handlePreset('closeup')}
/>
</div>
<div className="m-1">
<Button
icon={faUser}
label="Half Body Shots"
isActive={preset==='halfbody'}
onClick={()=>handlePreset('halfbody')}
/>
</div>
<div className="m-1">
<Button
icon={faPerson}
label="Full Body Shots"
isActive={preset==='fullbody'}
onClick={()=>handlePreset('fullbody')}
/>
</div>
<div className="m-1">
<Button
icon={faBuildingColumns}
label="Architecture or Landscape"
isActive={preset==='landscape'}
onClick={()=>handlePreset('landscape')}
/>
</div>
<div className="my-1 ms-1">
<Button
icon={faText}
label="Flat Logos, or Typographies"
isActive={preset==='typog'}
onClick={()=>handlePreset('typog')}
/>
</div>
</div>
<Accordion className="mt-4">
<Accordion.Item title={"Advanced Options"}>
@@ -41,84 +112,127 @@ export default function sectionAdvanceOptions({
<div className="col-md-6">
<NumberSliderV2 {...{
min: 0, max: 1, step: 0.1,
initialValue: wfVal.cnCanny,
initialValue: vstVal.cnCanny,
label: "Canny",
thumbTip: "Canny",
onChange: (val)=>{handleOnChange({cnCanny: val})}
}}/>
onChange: (val)=>{
handleOnChange({cnCanny: val});
pickPreset('custom');
}
}}/>
</div>
<div className="col-md-6">
<NumberSliderV2 {...{
min: 0, max: 1, step: 0.1,
initialValue: wfVal.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: wfVal.cnDepth,
initialValue: vstVal.cnDepth,
label: "Depth",
thumbTip: "Depth",
onChange: (val)=>{handleOnChange({cnDepth: val})}
}}/>
onChange: (val)=>{
handleOnChange({cnDepth: val});
pickPreset('custom');
}
}}/>
</div>
</div>
<div className="row g-3 p-3">
<div className="col-md-6">
<NumberSliderV2 {...{
min: 0, max: 1, step: 0.1,
initialValue: vstVal.cnLineArtAnime,
label: "Line Art - Anime",
thumbTip: "Line Art - Anime",
onChange: (val)=>{
handleOnChange({cnLineArtAnime: val});
pickPreset('custom');
}
}}/>
</div>
<div className="col-md-6">
<NumberSliderV2 {...{
min: 0, max: 1, step: 0.1,
initialValue: wfVal.cnOpenPose,
initialValue: vstVal.cnLineArtRealistic,
label: "Line Art - Realistic",
thumbTip: "Line Art - Realistic)",
onChange: (val)=>{
handleOnChange({cnLineArtRealistic: val});
pickPreset('custom');
}
}}/>
</div>
</div>
<div className="row g-3 p-3">
<div className="col-md-6">
<NumberSliderV2 {...{
min: 0, max: 1, step: 0.1,
initialValue: vstVal.cnOpenPose,
label: "OpenPose",
thumbTip: "OpenPose",
onChange: (val)=>{handleOnChange({cnOpenPose: val})}
}}/>
onChange: (val)=>{
handleOnChange({cnOpenPose: val});
pickPreset('custom');
}
}}/>
</div>
</div>
<div className="row g-3 p-3">
<div className="col-md-6">
<NumberSliderV2 {...{
min: 0, max: 1, step: 0.1,
initialValue: wfVal.cnPipeFace,
initialValue: vstVal.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: wfVal.cnSparse,
label: "Sparse Scribble",
thumbTip: "Sparse Scribble",
onChange: (val)=>{handleOnChange({cnSparse: val})}
}}/>
onChange: (val)=>{
handleOnChange({cnPipeFace: val})
pickPreset('custom');
}
}}/>
</div>
</div>
<div className="row g-3 p-3">
<div className="col-md-6">
<NumberSliderV2 {...{
min: 0, max: 1, step: 0.1,
initialValue: wfVal.cnLinearRealistic,
label: "Video CN (Linear Realistic)",
thumbTip: "Video CN",
onChange: (val)=>{handleOnChange({cnLinearRealistic: val})}
}}/>
initialValue: vstVal.cnSparseScribble,
label: "Sparse Scribble",
thumbTip: "Sparse Scribble",
onChange: (val)=>{
handleOnChange({cnSparseScribble: val})
pickPreset('custom');
}
}}/>
</div>
<div className="col-md-6">
<NumberSliderV2 {...{
min: 0, max: 1, step: 0.1,
initialValue: wfVal.cnTile,
label: "Tile CN",
thumbTip: "Tile CN",
onChange: (val)=>{handleOnChange({cnTile: val})}
}}/>
initialValue: vstVal.cnSoftEdge,
label: "Soft Edge",
thumbTip: "SoftEdge",
onChange: (val)=>{
handleOnChange({cnSoftEdge: val});
pickPreset('custom');
}
}}/>
</div>
</div>
<div className="row g-3 p-3">
<div className="col-md-6">
<NumberSliderV2 {...{
min: 1, max: 64, step: 30,
initialValue: vstVal.cnRegularSteps,
label: "Regular Steps",
thumbTip: "Regular Steps",
onChange: (val)=>{
handleOnChange({cnRegularSteps: val});
pickPreset('custom');
}
}}/>
</div>
</div>
<div className="d-flex p-3 justify-content-end">
<Button icon={faRotateLeft} label="Reset"/>
<Button
icon={faRotateLeft}
label="Reset"
onClick={()=>{handlePreset('custom')}}
/>
</div>
</Accordion.Item>
</Accordion>
@@ -53,7 +53,7 @@ export default function PageFilterControls({
const [workflowValues, setWorkflowValues] = useState<WorkflowValuesType>({
fileToken: pageState.mediaFileToken || mediaToken,
outputPath: "vid2vid/SparseUpscaleInterp_00001.mp4",
outputPath: "",
workflowConfig: "weight_q8sz47gmfw2zx02snrbz88ns9",
seed: "",
sdModelToken: "",
@@ -10,7 +10,7 @@ export const ControlNetsInitialValues = {
cnOpenPose: 0,
cnPipeFace: 0,
cnSparse: 0.7,
cnTile: 0,
cnTile: 0.7,
}
export default memo( function SectionControlNets({