From fa290aff8d57fa6eb824727d490bb99f0ca073cc Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Fri, 2 Jun 2023 18:20:44 +1000 Subject: [PATCH] feat(ui): add defaults for all processors --- .../components/processors/CannyProcessor.tsx | 13 +++++- .../processors/ContentShuffleProcessor.tsx | 43 +++++++++++++++++++ .../components/processors/HedProcessor.tsx | 19 ++++++++ .../processors/LineartAnimeProcessor.tsx | 19 ++++++++ .../processors/LineartProcessor.tsx | 19 ++++++++ .../processors/MediapipeFaceProcessor.tsx | 20 +++++++-- .../processors/MidasDepthProcessor.tsx | 15 +++++++ .../processors/MlsdImageProcessor.tsx | 31 +++++++++++++ .../processors/NormalBaeProcessor.tsx | 19 ++++++++ .../processors/OpenposeProcessor.tsx | 19 ++++++++ .../components/processors/PidiProcessor.tsx | 19 ++++++++ .../features/controlNet/store/constants.ts | 2 +- .../controlNet/store/controlNetSlice.ts | 9 ++-- 13 files changed, 237 insertions(+), 10 deletions(-) diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/CannyProcessor.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/CannyProcessor.tsx index 872be06177..336d7d8bab 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/processors/CannyProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/CannyProcessor.tsx @@ -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 diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/ContentShuffleProcessor.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/ContentShuffleProcessor.tsx index 480275cd1c..0d8b85b89b 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/processors/ContentShuffleProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/ContentShuffleProcessor.tsx @@ -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 ( { 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 diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/HedProcessor.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/HedProcessor.tsx index 22c5c487cd..23f79d69e2 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/processors/HedProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/HedProcessor.tsx @@ -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 ( { label="Image Resolution" value={image_resolution} onChange={handleImageResolutionChanged} + handleReset={handleImageResolutionReset} + withReset min={0} max={4096} withInput diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/LineartAnimeProcessor.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/LineartAnimeProcessor.tsx index 87a21f95f0..1ccdcbd197 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/processors/LineartAnimeProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/LineartAnimeProcessor.tsx @@ -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 ( { label="Image Resolution" value={image_resolution} onChange={handleImageResolutionChanged} + handleReset={handleImageResolutionReset} + withReset min={0} max={4096} withInput diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/LineartProcessor.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/LineartProcessor.tsx index 503fd73fa8..4376a0cbc3 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/processors/LineartProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/LineartProcessor.tsx @@ -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) => { 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 diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/MediapipeFaceProcessor.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/MediapipeFaceProcessor.tsx index f76f00c3b7..9a044560cf 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/processors/MediapipeFaceProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/MediapipeFaceProcessor.tsx @@ -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 ( { label="Min Confidence" value={min_confidence} onChange={handleMinConfidenceChanged} + handleReset={handleMinConfidenceReset} + withReset min={0} max={1} step={0.01} diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/MidasDepthProcessor.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/MidasDepthProcessor.tsx index 9a205f28b5..ece69e7f34 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/processors/MidasDepthProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/MidasDepthProcessor.tsx @@ -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 ( { label="bg_th" value={bg_th} onChange={handleBgThChanged} + handleReset={handleBgThReset} + withReset min={0} max={20} step={0.01} diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/MlsdImageProcessor.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/MlsdImageProcessor.tsx index e33b2102d1..9b15935ea7 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/processors/MlsdImageProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/MlsdImageProcessor.tsx @@ -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 ( { 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} diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/NormalBaeProcessor.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/NormalBaeProcessor.tsx index 61836e7668..79b6885669 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/processors/NormalBaeProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/NormalBaeProcessor.tsx @@ -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 ( { label="Image Resolution" value={image_resolution} onChange={handleImageResolutionChanged} + handleReset={handleImageResolutionReset} + withReset min={0} max={4096} withInput diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/OpenposeProcessor.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/OpenposeProcessor.tsx index 63556d4da4..40619a6d5f 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/processors/OpenposeProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/OpenposeProcessor.tsx @@ -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) => { 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 diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/PidiProcessor.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/PidiProcessor.tsx index 711d4930ab..a5e82ee8d0 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/processors/PidiProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/PidiProcessor.tsx @@ -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) => { 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 diff --git a/invokeai/frontend/web/src/features/controlNet/store/constants.ts b/invokeai/frontend/web/src/features/controlNet/store/constants.ts index d7a76b6a5e..a7e20a78d7 100644 --- a/invokeai/frontend/web/src/features/controlNet/store/constants.ts +++ b/invokeai/frontend/web/src/features/controlNet/store/constants.ts @@ -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', diff --git a/invokeai/frontend/web/src/features/controlNet/store/controlNetSlice.ts b/invokeai/frontend/web/src/features/controlNet/store/controlNetSlice.ts index 674e130bdc..764bac2d88 100644 --- a/invokeai/frontend/web/src/features/controlNet/store/controlNetSlice.ts +++ b/invokeai/frontend/web/src/features/controlNet/store/controlNetSlice.ts @@ -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 = { 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;