Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): add defaults for all processors

Browse Source
This commit is contained in:
psychedelicious 2023-06-02 18:20:44 +10:00
parent 3d99d7ae8b
commit fa290aff8d
13 changed files with 237 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
invokeai/frontend/web/src/features/controlNet/components/processors/CannyProcessor.tsx
View File

@ -3,6 +3,9 @@ import IAISlider from 'common/components/IAISlider';
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import { RequiredCannyImageProcessorInvocation } from 'features/controlNet/store/types';
import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
const DEFAULTS = CONTROLNET_PROCESSORS.canny_image_processor.default;
type CannyProcessorProps = {
controlNetId: string;
@ -22,7 +25,9 @@ const CannyProcessor = (props: CannyProcessorProps) => {
);
const handleLowThresholdReset = useCallback(() => {
processorChanged(controlNetId, { low_threshold: 100 });
processorChanged(controlNetId, {
low_threshold: DEFAULTS.low_threshold,
});
}, [controlNetId, processorChanged]);
const handleHighThresholdChanged = useCallback(
@ -33,7 +38,9 @@ const CannyProcessor = (props: CannyProcessorProps) => {
);
const handleHighThresholdReset = useCallback(() => {
processorChanged(controlNetId, { high_threshold: 200 });
processorChanged(controlNetId, {
high_threshold: DEFAULTS.high_threshold,
});
}, [controlNetId, processorChanged]);
return (
@ -43,6 +50,7 @@ const CannyProcessor = (props: CannyProcessorProps) => {
value={low_threshold}
onChange={handleLowThresholdChanged}
handleReset={handleLowThresholdReset}
withReset
min={0}
max={255}
withInput
@ -52,6 +60,7 @@ const CannyProcessor = (props: CannyProcessorProps) => {
value={high_threshold}
onChange={handleHighThresholdChanged}
handleReset={handleHighThresholdReset}
withReset
min={0}
max={255}
withInput

43
invokeai/frontend/web/src/features/controlNet/components/processors/ContentShuffleProcessor.tsx
View File

@ -3,6 +3,9 @@ import IAISlider from 'common/components/IAISlider';
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import { RequiredContentShuffleImageProcessorInvocation } from 'features/controlNet/store/types';
import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
const DEFAULTS = CONTROLNET_PROCESSORS.content_shuffle_image_processor.default;
type Props = {
controlNetId: string;
@ -21,6 +24,12 @@ const ContentShuffleProcessor = (props: Props) => {
[controlNetId, processorChanged]
);
const handleDetectResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
detect_resolution: DEFAULTS.detect_resolution,
});
}, [controlNetId, processorChanged]);
const handleImageResolutionChanged = useCallback(
(v: number) => {
processorChanged(controlNetId, { image_resolution: v });
@ -28,6 +37,12 @@ const ContentShuffleProcessor = (props: Props) => {
[controlNetId, processorChanged]
);
const handleImageResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
image_resolution: DEFAULTS.image_resolution,
});
}, [controlNetId, processorChanged]);
const handleWChanged = useCallback(
(v: number) => {
processorChanged(controlNetId, { w: v });
@ -35,6 +50,12 @@ const ContentShuffleProcessor = (props: Props) => {
[controlNetId, processorChanged]
);
const handleWReset = useCallback(() => {
processorChanged(controlNetId, {
w: DEFAULTS.w,
});
}, [controlNetId, processorChanged]);
const handleHChanged = useCallback(
(v: number) => {
processorChanged(controlNetId, { h: v });
@ -42,6 +63,12 @@ const ContentShuffleProcessor = (props: Props) => {
[controlNetId, processorChanged]
);
const handleHReset = useCallback(() => {
processorChanged(controlNetId, {
h: DEFAULTS.h,
});
}, [controlNetId, processorChanged]);
const handleFChanged = useCallback(
(v: number) => {
processorChanged(controlNetId, { f: v });
@ -49,12 +76,20 @@ const ContentShuffleProcessor = (props: Props) => {
[controlNetId, processorChanged]
);
const handleFReset = useCallback(() => {
processorChanged(controlNetId, {
f: DEFAULTS.f,
});
}, [controlNetId, processorChanged]);
return (
<Flex sx={{ flexDirection: 'column', gap: 2 }}>
<IAISlider
label="Detect Resolution"
value={detect_resolution}
onChange={handleDetectResolutionChanged}
handleReset={handleDetectResolutionReset}
withReset
min={0}
max={4096}
withInput
@ -63,6 +98,8 @@ const ContentShuffleProcessor = (props: Props) => {
label="Image Resolution"
value={image_resolution}
onChange={handleImageResolutionChanged}
handleReset={handleImageResolutionReset}
withReset
min={0}
max={4096}
withInput
@ -71,6 +108,8 @@ const ContentShuffleProcessor = (props: Props) => {
label="W"
value={w}
onChange={handleWChanged}
handleReset={handleWReset}
withReset
min={0}
max={4096}
withInput
@ -79,6 +118,8 @@ const ContentShuffleProcessor = (props: Props) => {
label="H"
value={h}
onChange={handleHChanged}
handleReset={handleHReset}
withReset
min={0}
max={4096}
withInput
@ -87,6 +128,8 @@ const ContentShuffleProcessor = (props: Props) => {
label="F"
value={f}
onChange={handleFChanged}
handleReset={handleFReset}
withReset
min={0}
max={4096}
withInput

19
invokeai/frontend/web/src/features/controlNet/components/processors/HedProcessor.tsx
View File

@ -4,6 +4,9 @@ import IAISwitch from 'common/components/IAISwitch';
import { ChangeEvent, memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import { RequiredHedImageProcessorInvocation } from 'features/controlNet/store/types';
import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
const DEFAULTS = CONTROLNET_PROCESSORS.hed_image_processor.default;
type HedProcessorProps = {
controlNetId: string;
@ -39,12 +42,26 @@ const HedPreprocessor = (props: HedProcessorProps) => {
[controlNetId, processorChanged]
);
const handleDetectResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
detect_resolution: DEFAULTS.detect_resolution,
});
}, [controlNetId, processorChanged]);
const handleImageResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
image_resolution: DEFAULTS.image_resolution,
});
}, [controlNetId, processorChanged]);
return (
<Flex sx={{ flexDirection: 'column', gap: 2 }}>
<IAISlider
label="Detect Resolution"
value={detect_resolution}
onChange={handleDetectResolutionChanged}
handleReset={handleDetectResolutionReset}
withReset
min={0}
max={4096}
withInput
@ -53,6 +70,8 @@ const HedPreprocessor = (props: HedProcessorProps) => {
label="Image Resolution"
value={image_resolution}
onChange={handleImageResolutionChanged}
handleReset={handleImageResolutionReset}
withReset
min={0}
max={4096}
withInput

19
invokeai/frontend/web/src/features/controlNet/components/processors/LineartAnimeProcessor.tsx
View File

@ -3,6 +3,9 @@ import IAISlider from 'common/components/IAISlider';
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import { RequiredLineartAnimeImageProcessorInvocation } from 'features/controlNet/store/types';
import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
const DEFAULTS = CONTROLNET_PROCESSORS.lineart_anime_image_processor.default;
type Props = {
controlNetId: string;
@ -28,12 +31,26 @@ const LineartAnimeProcessor = (props: Props) => {
[controlNetId, processorChanged]
);
const handleDetectResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
detect_resolution: DEFAULTS.detect_resolution,
});
}, [controlNetId, processorChanged]);
const handleImageResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
image_resolution: DEFAULTS.image_resolution,
});
}, [controlNetId, processorChanged]);
return (
<Flex sx={{ flexDirection: 'column', gap: 2 }}>
<IAISlider
label="Detect Resolution"
value={detect_resolution}
onChange={handleDetectResolutionChanged}
handleReset={handleDetectResolutionReset}
withReset
min={0}
max={4096}
withInput
@ -42,6 +59,8 @@ const LineartAnimeProcessor = (props: Props) => {
label="Image Resolution"
value={image_resolution}
onChange={handleImageResolutionChanged}
handleReset={handleImageResolutionReset}
withReset
min={0}
max={4096}
withInput

19
invokeai/frontend/web/src/features/controlNet/components/processors/LineartProcessor.tsx
View File

@ -4,6 +4,9 @@ import { ChangeEvent, memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import { RequiredLineartImageProcessorInvocation } from 'features/controlNet/store/types';
import IAISwitch from 'common/components/IAISwitch';
import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
const DEFAULTS = CONTROLNET_PROCESSORS.lineart_image_processor.default;
type LineartProcessorProps = {
controlNetId: string;
@ -29,6 +32,18 @@ const LineartProcessor = (props: LineartProcessorProps) => {
[controlNetId, processorChanged]
);
const handleDetectResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
detect_resolution: DEFAULTS.detect_resolution,
});
}, [controlNetId, processorChanged]);
const handleImageResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
image_resolution: DEFAULTS.image_resolution,
});
}, [controlNetId, processorChanged]);
const handleCoarseChanged = useCallback(
(e: ChangeEvent<HTMLInputElement>) => {
processorChanged(controlNetId, { coarse: e.target.checked });
@ -42,6 +57,8 @@ const LineartProcessor = (props: LineartProcessorProps) => {
label="Detect Resolution"
value={detect_resolution}
onChange={handleDetectResolutionChanged}
handleReset={handleDetectResolutionReset}
withReset
min={0}
max={4096}
withInput
@ -50,6 +67,8 @@ const LineartProcessor = (props: LineartProcessorProps) => {
label="Image Resolution"
value={image_resolution}
onChange={handleImageResolutionChanged}
handleReset={handleImageResolutionReset}
withReset
min={0}
max={4096}
withInput

20
invokeai/frontend/web/src/features/controlNet/components/processors/MediapipeFaceProcessor.tsx
View File

@ -2,10 +2,10 @@ import { Flex } from '@chakra-ui/react';
import IAISlider from 'common/components/IAISlider';
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import {
RequiredContentShuffleImageProcessorInvocation,
RequiredMediapipeFaceProcessorInvocation,
} from 'features/controlNet/store/types';
import { RequiredMediapipeFaceProcessorInvocation } from 'features/controlNet/store/types';
import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
const DEFAULTS = CONTROLNET_PROCESSORS.mediapipe_face_processor.default;
type Props = {
controlNetId: string;
@ -31,12 +31,22 @@ const MediapipeFaceProcessor = (props: Props) => {
[controlNetId, processorChanged]
);
const handleMaxFacesReset = useCallback(() => {
processorChanged(controlNetId, { max_faces: DEFAULTS.max_faces });
}, [controlNetId, processorChanged]);
const handleMinConfidenceReset = useCallback(() => {
processorChanged(controlNetId, { min_confidence: DEFAULTS.min_confidence });
}, [controlNetId, processorChanged]);
return (
<Flex sx={{ flexDirection: 'column', gap: 2 }}>
<IAISlider
label="Max Faces"
value={max_faces}
onChange={handleMaxFacesChanged}
handleReset={handleMaxFacesReset}
withReset
min={1}
max={20}
withInput
@ -45,6 +55,8 @@ const MediapipeFaceProcessor = (props: Props) => {
label="Min Confidence"
value={min_confidence}
onChange={handleMinConfidenceChanged}
handleReset={handleMinConfidenceReset}
withReset
min={0}
max={1}
step={0.01}

15
invokeai/frontend/web/src/features/controlNet/components/processors/MidasDepthProcessor.tsx
View File

@ -3,6 +3,9 @@ import IAISlider from 'common/components/IAISlider';
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import { RequiredMidasDepthImageProcessorInvocation } from 'features/controlNet/store/types';
import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
const DEFAULTS = CONTROLNET_PROCESSORS.midas_depth_image_processor.default;
type Props = {
controlNetId: string;
@ -28,12 +31,22 @@ const MidasDepthProcessor = (props: Props) => {
[controlNetId, processorChanged]
);
const handleAMultReset = useCallback(() => {
processorChanged(controlNetId, { a_mult: DEFAULTS.a_mult });
}, [controlNetId, processorChanged]);
const handleBgThReset = useCallback(() => {
processorChanged(controlNetId, { bg_th: DEFAULTS.bg_th });
}, [controlNetId, processorChanged]);
return (
<Flex sx={{ flexDirection: 'column', gap: 2 }}>
<IAISlider
label="a_mult"
value={a_mult}
onChange={handleAMultChanged}
handleReset={handleAMultReset}
withReset
min={0}
max={20}
step={0.01}
@ -43,6 +56,8 @@ const MidasDepthProcessor = (props: Props) => {
label="bg_th"
value={bg_th}
onChange={handleBgThChanged}
handleReset={handleBgThReset}
withReset
min={0}
max={20}
step={0.01}

31
invokeai/frontend/web/src/features/controlNet/components/processors/MlsdImageProcessor.tsx
View File

@ -3,6 +3,9 @@ import IAISlider from 'common/components/IAISlider';
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import { RequiredMlsdImageProcessorInvocation } from 'features/controlNet/store/types';
import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
const DEFAULTS = CONTROLNET_PROCESSORS.mlsd_image_processor.default;
type Props = {
controlNetId: string;
@ -42,12 +45,34 @@ const MlsdImageProcessor = (props: Props) => {
[controlNetId, processorChanged]
);
const handleDetectResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
detect_resolution: DEFAULTS.detect_resolution,
});
}, [controlNetId, processorChanged]);
const handleImageResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
image_resolution: DEFAULTS.image_resolution,
});
}, [controlNetId, processorChanged]);
const handleThrDReset = useCallback(() => {
processorChanged(controlNetId, { thr_d: DEFAULTS.thr_d });
}, [controlNetId, processorChanged]);
const handleThrVReset = useCallback(() => {
processorChanged(controlNetId, { thr_v: DEFAULTS.thr_v });
}, [controlNetId, processorChanged]);
return (
<Flex sx={{ flexDirection: 'column', gap: 2 }}>
<IAISlider
label="Detect Resolution"
value={detect_resolution}
onChange={handleDetectResolutionChanged}
handleReset={handleDetectResolutionReset}
withReset
min={0}
max={4096}
withInput
@ -56,6 +81,8 @@ const MlsdImageProcessor = (props: Props) => {
label="Image Resolution"
value={image_resolution}
onChange={handleImageResolutionChanged}
handleReset={handleImageResolutionReset}
withReset
min={0}
max={4096}
withInput
@ -64,6 +91,8 @@ const MlsdImageProcessor = (props: Props) => {
label="W"
value={thr_d}
onChange={handleThrDChanged}
handleReset={handleThrDReset}
withReset
min={0}
max={1}
step={0.01}
@ -73,6 +102,8 @@ const MlsdImageProcessor = (props: Props) => {
label="H"
value={thr_v}
onChange={handleThrVChanged}
handleReset={handleThrVReset}
withReset
min={0}
max={1}
step={0.01}

19
invokeai/frontend/web/src/features/controlNet/components/processors/NormalBaeProcessor.tsx
View File

@ -3,6 +3,9 @@ import IAISlider from 'common/components/IAISlider';
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import { RequiredNormalbaeImageProcessorInvocation } from 'features/controlNet/store/types';
import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
const DEFAULTS = CONTROLNET_PROCESSORS.normalbae_image_processor.default;
type Props = {
controlNetId: string;
@ -28,12 +31,26 @@ const NormalBaeProcessor = (props: Props) => {
[controlNetId, processorChanged]
);
const handleDetectResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
detect_resolution: DEFAULTS.detect_resolution,
});
}, [controlNetId, processorChanged]);
const handleImageResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
image_resolution: DEFAULTS.image_resolution,
});
}, [controlNetId, processorChanged]);
return (
<Flex sx={{ flexDirection: 'column', gap: 2 }}>
<IAISlider
label="Detect Resolution"
value={detect_resolution}
onChange={handleDetectResolutionChanged}
handleReset={handleDetectResolutionReset}
withReset
min={0}
max={4096}
withInput
@ -42,6 +59,8 @@ const NormalBaeProcessor = (props: Props) => {
label="Image Resolution"
value={image_resolution}
onChange={handleImageResolutionChanged}
handleReset={handleImageResolutionReset}
withReset
min={0}
max={4096}
withInput

19
invokeai/frontend/web/src/features/controlNet/components/processors/OpenposeProcessor.tsx
View File

@ -4,6 +4,9 @@ import { ChangeEvent, memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import { RequiredOpenposeImageProcessorInvocation } from 'features/controlNet/store/types';
import IAISwitch from 'common/components/IAISwitch';
import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
const DEFAULTS = CONTROLNET_PROCESSORS.openpose_image_processor.default;
type Props = {
controlNetId: string;
@ -29,6 +32,18 @@ const OpenposeProcessor = (props: Props) => {
[controlNetId, processorChanged]
);
const handleDetectResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
detect_resolution: DEFAULTS.detect_resolution,
});
}, [controlNetId, processorChanged]);
const handleImageResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
image_resolution: DEFAULTS.image_resolution,
});
}, [controlNetId, processorChanged]);
const handleHandAndFaceChanged = useCallback(
(e: ChangeEvent<HTMLInputElement>) => {
processorChanged(controlNetId, { hand_and_face: e.target.checked });
@ -42,6 +57,8 @@ const OpenposeProcessor = (props: Props) => {
label="Detect Resolution"
value={detect_resolution}
onChange={handleDetectResolutionChanged}
handleReset={handleDetectResolutionReset}
withReset
min={0}
max={4096}
withInput
@ -50,6 +67,8 @@ const OpenposeProcessor = (props: Props) => {
label="Image Resolution"
value={image_resolution}
onChange={handleImageResolutionChanged}
handleReset={handleImageResolutionReset}
withReset
min={0}
max={4096}
withInput

19
invokeai/frontend/web/src/features/controlNet/components/processors/PidiProcessor.tsx
View File

@ -4,6 +4,9 @@ import { ChangeEvent, memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import { RequiredPidiImageProcessorInvocation } from 'features/controlNet/store/types';
import IAISwitch from 'common/components/IAISwitch';
import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
const DEFAULTS = CONTROLNET_PROCESSORS.pidi_image_processor.default;
type Props = {
controlNetId: string;
@ -29,6 +32,18 @@ const PidiProcessor = (props: Props) => {
[controlNetId, processorChanged]
);
const handleDetectResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
detect_resolution: DEFAULTS.detect_resolution,
});
}, [controlNetId, processorChanged]);
const handleImageResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
image_resolution: DEFAULTS.image_resolution,
});
}, [controlNetId, processorChanged]);
const handleScribbleChanged = useCallback(
(e: ChangeEvent<HTMLInputElement>) => {
processorChanged(controlNetId, { scribble: e.target.checked });
@ -49,6 +64,8 @@ const PidiProcessor = (props: Props) => {
label="Detect Resolution"
value={detect_resolution}
onChange={handleDetectResolutionChanged}
handleReset={handleDetectResolutionReset}
withReset
min={0}
max={4096}
withInput
@ -57,6 +74,8 @@ const PidiProcessor = (props: Props) => {
label="Image Resolution"
value={image_resolution}
onChange={handleImageResolutionChanged}
handleReset={handleImageResolutionReset}
withReset
min={0}
max={4096}
withInput

2
invokeai/frontend/web/src/features/controlNet/store/constants.ts
View File

@ -22,7 +22,7 @@ type ControlNetProcessorsDict = Record<
*
* TODO: Generate from the OpenAPI schema
*/
export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
export const CONTROLNET_PROCESSORS = {
canny_image_processor: {
type: 'canny_image_processor',
label: 'Canny',

9
invokeai/frontend/web/src/features/controlNet/store/controlNetSlice.ts
View File

@ -4,6 +4,7 @@ import { RootState } from 'app/store/store';
import { ImageDTO } from 'services/api';
import {
ControlNetProcessorType,
RequiredCannyImageProcessorInvocation,
RequiredControlNetProcessorNode,
} from './types';
import { CONTROLNET_PROCESSORS } from './constants';
@ -30,7 +31,8 @@ export const initialControlNet: Omit<ControlNet, 'controlNetId'> = {
controlImage: null,
isControlImageProcessed: false,
processedControlImage: null,
processorNode: CONTROLNET_PROCESSORS.canny_image_processor.default,
processorNode: CONTROLNET_PROCESSORS.canny_image_processor
.default as RequiredCannyImageProcessorInvocation,
};
export type ControlNet = {
@ -180,8 +182,9 @@ export const controlNetSlice = createSlice({
}>
) => {
const { controlNetId, processorType } = action.payload;
state.controlNets[controlNetId].processorNode =
CONTROLNET_PROCESSORS[processorType].default;
state.controlNets[controlNetId].processorNode = CONTROLNET_PROCESSORS[
processorType
].default as RequiredControlNetProcessorNode;
},
shouldAutoProcessToggled: (state) => {
state.shouldAutoProcess = !state.shouldAutoProcess;