feat(ui): add defaults for all processors

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

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 (
     <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

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 (
     <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

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 (
     <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

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<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

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 {
+import { RequiredMediapipeFaceProcessorInvocation } from 'features/controlNet/store/types';
-  RequiredContentShuffleImageProcessorInvocation,
+import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
-  RequiredMediapipeFaceProcessorInvocation,
+
-} from 'features/controlNet/store/types';
+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}

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 (
     <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}

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 (
     <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}

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 (
     <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

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<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

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<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

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',

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<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 =
+      state.controlNets[controlNetId].processorNode = CONTROLNET_PROCESSORS[
-        CONTROLNET_PROCESSORS[processorType].default;
+        processorType
+      ].default as RequiredControlNetProcessorNode;
     },
     shouldAutoProcessToggled: (state) => {
       state.shouldAutoProcess = !state.shouldAutoProcess;