mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-06 10:11:31 +00:00
Merge pull request #509 from storytold/feature/page/video_transfer
Feature/page/video transfer
This commit is contained in:
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, {
|
||||
|
||||
+93
@@ -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,
|
||||
};
|
||||
+14
-28
@@ -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, ",
|
||||
|
||||
+43
-47
@@ -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
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
+32
-24
@@ -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}
|
||||
|
||||
+169
-55
@@ -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>
|
||||
|
||||
+1
-1
@@ -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: "",
|
||||
|
||||
+1
-1
@@ -10,7 +10,7 @@ export const ControlNetsInitialValues = {
|
||||
cnOpenPose: 0,
|
||||
cnPipeFace: 0,
|
||||
cnSparse: 0.7,
|
||||
cnTile: 0,
|
||||
cnTile: 0.7,
|
||||
}
|
||||
|
||||
export default memo( function SectionControlNets({
|
||||
|
||||
Reference in new issue
Block a user