feat(ui): disable specific controlnet inputs when that controlnet is disabled

The UX is clearer now, but it's still easy to miss that your individual controlnets are enabled, but the overall controlnet feature is disabled.

invokeai/frontend/web/src/features/controlNet/components/ControlNet.tsx

@@ -80,8 +80,8 @@ const ControlNet = (props: ControlNetProps) => {
     >
       <Flex sx={{ gap: 2 }}>
         <IAISwitch
-          tooltip="Toggle"
+          tooltip={'Toggle this ControlNet'}
-          aria-label="Toggle"
+          aria-label={'Toggle this ControlNet'}
           isChecked={isEnabled}
           onChange={handleToggleIsEnabled}
         />
@@ -143,9 +143,9 @@ const ControlNet = (props: ControlNetProps) => {
               borderRadius: 'full',
               top: 4,
               insetInlineEnd: 4,
-              bg: 'error.700',
+              bg: 'accent.700',
               _dark: {
-                bg: 'error.200',
+                bg: 'accent.400',
               },
             }}
           />

invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx

@@ -29,13 +29,18 @@ const ControlNetImagePreview = (props: Props) => {
         stateSelector,
         ({ controlNet }) => {
           const { pendingControlImages } = controlNet;
-          const { controlImage, processedControlImage, processorType } =
+          const {
-            controlNet.controlNets[controlNetId];
+            controlImage,
+            processedControlImage,
+            processorType,
+            isEnabled,
+          } = controlNet.controlNets[controlNetId];
 
           return {
             controlImageName: controlImage,
             processedControlImageName: processedControlImage,
             processorType,
+            isEnabled,
             pendingControlImages,
           };
         },
@@ -49,6 +54,7 @@ const ControlNetImagePreview = (props: Props) => {
     processedControlImageName,
     processorType,
     pendingControlImages,
+    isEnabled,
   } = useAppSelector(selector);
 
   const [isMouseOverImage, setIsMouseOverImage] = useState(false);
@@ -119,6 +125,8 @@ const ControlNetImagePreview = (props: Props) => {
         h: height,
         alignItems: 'center',
         justifyContent: 'center',
+        pointerEvents: isEnabled ? 'auto' : 'none',
+        opacity: isEnabled ? 1 : 0.5,
       }}
     >
       <IAIDndImage

invokeai/frontend/web/src/features/controlNet/components/ControlNetProcessorComponent.tsx

@@ -27,26 +27,36 @@ const ControlNetProcessorComponent = (props: ControlNetProcessorProps) => {
     () =>
       createSelector(
         stateSelector,
-        ({ controlNet }) => controlNet.controlNets[controlNetId]?.processorNode,
+        ({ controlNet }) => {
+          const { isEnabled, processorNode } =
+            controlNet.controlNets[controlNetId];
+
+          return { isEnabled, processorNode };
+        },
         defaultSelectorOptions
       ),
     [controlNetId]
   );
 
-  const processorNode = useAppSelector(selector);
+  const { isEnabled, processorNode } = useAppSelector(selector);
 
   if (processorNode.type === 'canny_image_processor') {
     return (
       <CannyProcessor
         controlNetId={controlNetId}
         processorNode={processorNode}
+        isEnabled={isEnabled}
       />
     );
   }
 
   if (processorNode.type === 'hed_image_processor') {
     return (
-      <HedProcessor controlNetId={controlNetId} processorNode={processorNode} />
+      <HedProcessor
+        controlNetId={controlNetId}
+        processorNode={processorNode}
+        isEnabled={isEnabled}
+      />
     );
   }
 
@@ -55,6 +65,7 @@ const ControlNetProcessorComponent = (props: ControlNetProcessorProps) => {
       <LineartProcessor
         controlNetId={controlNetId}
         processorNode={processorNode}
+        isEnabled={isEnabled}
       />
     );
   }
@@ -64,6 +75,7 @@ const ControlNetProcessorComponent = (props: ControlNetProcessorProps) => {
       <ContentShuffleProcessor
         controlNetId={controlNetId}
         processorNode={processorNode}
+        isEnabled={isEnabled}
       />
     );
   }
@@ -73,6 +85,7 @@ const ControlNetProcessorComponent = (props: ControlNetProcessorProps) => {
       <LineartAnimeProcessor
         controlNetId={controlNetId}
         processorNode={processorNode}
+        isEnabled={isEnabled}
       />
     );
   }
@@ -82,6 +95,7 @@ const ControlNetProcessorComponent = (props: ControlNetProcessorProps) => {
       <MediapipeFaceProcessor
         controlNetId={controlNetId}
         processorNode={processorNode}
+        isEnabled={isEnabled}
       />
     );
   }
@@ -91,6 +105,7 @@ const ControlNetProcessorComponent = (props: ControlNetProcessorProps) => {
       <MidasDepthProcessor
         controlNetId={controlNetId}
         processorNode={processorNode}
+        isEnabled={isEnabled}
       />
     );
   }
@@ -100,6 +115,7 @@ const ControlNetProcessorComponent = (props: ControlNetProcessorProps) => {
       <MlsdImageProcessor
         controlNetId={controlNetId}
         processorNode={processorNode}
+        isEnabled={isEnabled}
       />
     );
   }
@@ -109,6 +125,7 @@ const ControlNetProcessorComponent = (props: ControlNetProcessorProps) => {
       <NormalBaeProcessor
         controlNetId={controlNetId}
         processorNode={processorNode}
+        isEnabled={isEnabled}
       />
     );
   }
@@ -118,6 +135,7 @@ const ControlNetProcessorComponent = (props: ControlNetProcessorProps) => {
       <OpenposeProcessor
         controlNetId={controlNetId}
         processorNode={processorNode}
+        isEnabled={isEnabled}
       />
     );
   }
@@ -127,6 +145,7 @@ const ControlNetProcessorComponent = (props: ControlNetProcessorProps) => {
       <PidiProcessor
         controlNetId={controlNetId}
         processorNode={processorNode}
+        isEnabled={isEnabled}
       />
     );
   }
@@ -136,6 +155,7 @@ const ControlNetProcessorComponent = (props: ControlNetProcessorProps) => {
       <ZoeDepthProcessor
         controlNetId={controlNetId}
         processorNode={processorNode}
+        isEnabled={isEnabled}
       />
     );
   }

invokeai/frontend/web/src/features/controlNet/components/ParamControlNetShouldAutoConfig.tsx

@@ -18,14 +18,17 @@ const ParamControlNetShouldAutoConfig = (props: Props) => {
     () =>
       createSelector(
         stateSelector,
-        ({ controlNet }) =>
+        ({ controlNet }) => {
-          controlNet.controlNets[controlNetId]?.shouldAutoConfig,
+          const { isEnabled, shouldAutoConfig } =
+            controlNet.controlNets[controlNetId];
+          return { isEnabled, shouldAutoConfig };
+        },
         defaultSelectorOptions
       ),
     [controlNetId]
   );
 
-  const shouldAutoConfig = useAppSelector(selector);
+  const { isEnabled, shouldAutoConfig } = useAppSelector(selector);
   const isBusy = useAppSelector(selectIsBusy);
 
   const handleShouldAutoConfigChanged = useCallback(() => {
@@ -38,7 +41,7 @@ const ParamControlNetShouldAutoConfig = (props: Props) => {
       aria-label="Auto configure processor"
       isChecked={shouldAutoConfig}
       onChange={handleShouldAutoConfigChanged}
-      isDisabled={isBusy}
+      isDisabled={isBusy || !isEnabled}
     />
   );
 };

invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetBeginEnd.tsx

@@ -34,16 +34,16 @@ const ParamControlNetBeginEnd = (props: Props) => {
       createSelector(
         stateSelector,
         ({ controlNet }) => {
-          const { beginStepPct, endStepPct } =
+          const { beginStepPct, endStepPct, isEnabled } =
             controlNet.controlNets[controlNetId];
-          return { beginStepPct, endStepPct };
+          return { beginStepPct, endStepPct, isEnabled };
         },
         defaultSelectorOptions
       ),
     [controlNetId]
   );
 
-  const { beginStepPct, endStepPct } = useAppSelector(selector);
+  const { beginStepPct, endStepPct, isEnabled } = useAppSelector(selector);
 
   const handleStepPctChanged = useCallback(
     (v: number[]) => {
@@ -61,7 +61,7 @@ const ParamControlNetBeginEnd = (props: Props) => {
   }, [controlNetId, dispatch]);
 
   return (
-    <FormControl>
+    <FormControl isDisabled={!isEnabled}>
       <FormLabel>Begin / End Step Percentage</FormLabel>
       <HStack w="100%" gap={2} alignItems="center">
         <RangeSlider
@@ -72,6 +72,7 @@ const ParamControlNetBeginEnd = (props: Props) => {
           max={1}
           step={0.01}
           minStepsBetweenThumbs={5}
+          isDisabled={!isEnabled}
         >
           <RangeSliderTrack>
             <RangeSliderFilledTrack />

invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetControlMode.tsx

@@ -30,13 +30,17 @@ export default function ParamControlNetControlMode(
     () =>
       createSelector(
         stateSelector,
-        ({ controlNet }) => controlNet.controlNets[controlNetId]?.controlMode,
+        ({ controlNet }) => {
+          const { controlMode, isEnabled } =
+            controlNet.controlNets[controlNetId];
+          return { controlMode, isEnabled };
+        },
         defaultSelectorOptions
       ),
     [controlNetId]
   );
 
-  const controlMode = useAppSelector(selector);
+  const { controlMode, isEnabled } = useAppSelector(selector);
 
   const { t } = useTranslation();
 
@@ -49,6 +53,7 @@ export default function ParamControlNetControlMode(
 
   return (
     <IAIMantineSelect
+      disabled={!isEnabled}
       label={t('parameters.controlNetControlMode')}
       data={CONTROL_MODE_DATA}
       value={String(controlMode)}

invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetIsEnabled.tsx

@@ -1,28 +0,0 @@
-import { useAppDispatch } from 'app/store/storeHooks';
-import IAISwitch from 'common/components/IAISwitch';
-import { controlNetToggled } from 'features/controlNet/store/controlNetSlice';
-import { memo, useCallback } from 'react';
-
-type ParamControlNetIsEnabledProps = {
-  controlNetId: string;
-  isEnabled: boolean;
-};
-
-const ParamControlNetIsEnabled = (props: ParamControlNetIsEnabledProps) => {
-  const { controlNetId, isEnabled } = props;
-  const dispatch = useAppDispatch();
-
-  const handleIsEnabledChanged = useCallback(() => {
-    dispatch(controlNetToggled({ controlNetId }));
-  }, [dispatch, controlNetId]);
-
-  return (
-    <IAISwitch
-      label="Enabled"
-      isChecked={isEnabled}
-      onChange={handleIsEnabledChanged}
-    />
-  );
-};
-
-export default memo(ParamControlNetIsEnabled);

invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx

@@ -29,14 +29,15 @@ const ParamControlNetModel = (props: ParamControlNetModelProps) => {
         ({ generation, controlNet }) => {
           const { model } = generation;
           const controlNetModel = controlNet.controlNets[controlNetId]?.model;
-          return { mainModel: model, controlNetModel };
+          const isEnabled = controlNet.controlNets[controlNetId]?.isEnabled;
+          return { mainModel: model, controlNetModel, isEnabled };
         },
         defaultSelectorOptions
       ),
     [controlNetId]
   );
 
-  const { mainModel, controlNetModel } = useAppSelector(selector);
+  const { mainModel, controlNetModel, isEnabled } = useAppSelector(selector);
 
   const { data: controlNetModels } = useGetControlNetModelsQuery();
 
@@ -110,7 +111,7 @@ const ParamControlNetModel = (props: ParamControlNetModelProps) => {
       placeholder="Select a model"
       value={selectedModel?.id ?? null}
       onChange={handleModelChanged}
-      disabled={isBusy}
+      disabled={isBusy || !isEnabled}
       tooltip={selectedModel?.description}
     />
   );

invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetProcessorSelect.tsx

@@ -57,16 +57,18 @@ const ParamControlNetProcessorSelect = (
     () =>
       createSelector(
         stateSelector,
-        ({ controlNet }) => ({
+        ({ controlNet }) => {
-          processorNode: controlNet.controlNets[controlNetId]?.processorNode,
+          const { isEnabled, processorNode } =
-        }),
+            controlNet.controlNets[controlNetId];
+          return { isEnabled, processorNode };
+        },
         defaultSelectorOptions
       ),
     [controlNetId]
   );
   const isBusy = useAppSelector(selectIsBusy);
   const controlNetProcessors = useAppSelector(selector);
-  const { processorNode } = useAppSelector(processorNodeSelector);
+  const { isEnabled, processorNode } = useAppSelector(processorNodeSelector);
 
   const handleProcessorTypeChanged = useCallback(
     (v: string | null) => {
@@ -86,7 +88,7 @@ const ParamControlNetProcessorSelect = (
       value={processorNode.type ?? 'canny_image_processor'}
       data={controlNetProcessors}
       onChange={handleProcessorTypeChanged}
-      disabled={isBusy}
+      disabled={isBusy || !isEnabled}
     />
   );
 };

invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetWeight.tsx

@@ -17,13 +17,16 @@ const ParamControlNetWeight = (props: ParamControlNetWeightProps) => {
     () =>
       createSelector(
         stateSelector,
-        ({ controlNet }) => controlNet.controlNets[controlNetId]?.weight,
+        ({ controlNet }) => {
+          const { weight, isEnabled } = controlNet.controlNets[controlNetId];
+          return { weight, isEnabled };
+        },
         defaultSelectorOptions
       ),
     [controlNetId]
   );
 
-  const weight = useAppSelector(selector);
+  const { weight, isEnabled } = useAppSelector(selector);
   const handleWeightChanged = useCallback(
     (weight: number) => {
       dispatch(controlNetWeightChanged({ controlNetId, weight }));
@@ -33,6 +36,7 @@ const ParamControlNetWeight = (props: ParamControlNetWeightProps) => {
 
   return (
     <IAISlider
+      isDisabled={!isEnabled}
       label={'Weight'}
       value={weight}
       onChange={handleWeightChanged}

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

@@ -1,22 +1,25 @@
+import { useAppSelector } from 'app/store/storeHooks';
 import IAISlider from 'common/components/IAISlider';
 import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
 import { RequiredCannyImageProcessorInvocation } from 'features/controlNet/store/types';
+import { selectIsBusy } from 'features/system/store/systemSelectors';
 import { memo, useCallback } from 'react';
 import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
 import ProcessorWrapper from './common/ProcessorWrapper';
-import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
 
-const DEFAULTS = CONTROLNET_PROCESSORS.canny_image_processor.default;
+const DEFAULTS = CONTROLNET_PROCESSORS.canny_image_processor
+  .default as RequiredCannyImageProcessorInvocation;
 
 type CannyProcessorProps = {
   controlNetId: string;
   processorNode: RequiredCannyImageProcessorInvocation;
+  isEnabled: boolean;
 };
 
 const CannyProcessor = (props: CannyProcessorProps) => {
-  const { controlNetId, processorNode } = props;
+  const { controlNetId, processorNode, isEnabled } = props;
   const { low_threshold, high_threshold } = processorNode;
-  const isReady = useIsReadyToInvoke();
+  const isBusy = useAppSelector(selectIsBusy);
   const processorChanged = useProcessorNodeChanged();
 
   const handleLowThresholdChanged = useCallback(
@@ -48,7 +51,7 @@ const CannyProcessor = (props: CannyProcessorProps) => {
   return (
     <ProcessorWrapper>
       <IAISlider
-        isDisabled={!isReady}
+        isDisabled={isBusy || !isEnabled}
         label="Low Threshold"
         value={low_threshold}
         onChange={handleLowThresholdChanged}
@@ -60,7 +63,7 @@ const CannyProcessor = (props: CannyProcessorProps) => {
         withSliderMarks
       />
       <IAISlider
-        isDisabled={!isReady}
+        isDisabled={isBusy || !isEnabled}
         label="High Threshold"
         value={high_threshold}
         onChange={handleHighThresholdChanged}

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

@@ -4,20 +4,23 @@ import { RequiredContentShuffleImageProcessorInvocation } from 'features/control
 import { memo, useCallback } from 'react';
 import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
 import ProcessorWrapper from './common/ProcessorWrapper';
-import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectIsBusy } from 'features/system/store/systemSelectors';
 
-const DEFAULTS = CONTROLNET_PROCESSORS.content_shuffle_image_processor.default;
+const DEFAULTS = CONTROLNET_PROCESSORS.content_shuffle_image_processor
+  .default as RequiredContentShuffleImageProcessorInvocation;
 
 type Props = {
   controlNetId: string;
   processorNode: RequiredContentShuffleImageProcessorInvocation;
+  isEnabled: boolean;
 };
 
 const ContentShuffleProcessor = (props: Props) => {
-  const { controlNetId, processorNode } = props;
+  const { controlNetId, processorNode, isEnabled } = props;
   const { image_resolution, detect_resolution, w, h, f } = processorNode;
   const processorChanged = useProcessorNodeChanged();
-  const isReady = useIsReadyToInvoke();
+  const isBusy = useAppSelector(selectIsBusy);
 
   const handleDetectResolutionChanged = useCallback(
     (v: number) => {
@@ -96,7 +99,7 @@ const ContentShuffleProcessor = (props: Props) => {
         max={4096}
         withInput
         withSliderMarks
-        isDisabled={!isReady}
+        isDisabled={isBusy || !isEnabled}
       />
       <IAISlider
         label="Image Resolution"
@@ -108,7 +111,7 @@ const ContentShuffleProcessor = (props: Props) => {
         max={4096}
         withInput
         withSliderMarks
-        isDisabled={!isReady}
+        isDisabled={isBusy || !isEnabled}
       />
       <IAISlider
         label="W"
@@ -120,7 +123,7 @@ const ContentShuffleProcessor = (props: Props) => {
         max={4096}
         withInput
         withSliderMarks
-        isDisabled={!isReady}
+        isDisabled={isBusy || !isEnabled}
       />
       <IAISlider
         label="H"
@@ -132,7 +135,7 @@ const ContentShuffleProcessor = (props: Props) => {
         max={4096}
         withInput
         withSliderMarks
-        isDisabled={!isReady}
+        isDisabled={isBusy || !isEnabled}
       />
       <IAISlider
         label="F"
@@ -144,7 +147,7 @@ const ContentShuffleProcessor = (props: Props) => {
         max={4096}
         withInput
         withSliderMarks
-        isDisabled={!isReady}
+        isDisabled={isBusy || !isEnabled}
       />
     </ProcessorWrapper>
   );

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

@@ -1,25 +1,29 @@
+import { useAppSelector } from 'app/store/storeHooks';
 import IAISlider from 'common/components/IAISlider';
 import IAISwitch from 'common/components/IAISwitch';
 import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
 import { RequiredHedImageProcessorInvocation } from 'features/controlNet/store/types';
+import { selectIsBusy } from 'features/system/store/systemSelectors';
 import { ChangeEvent, memo, useCallback } from 'react';
 import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
 import ProcessorWrapper from './common/ProcessorWrapper';
-import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
 
-const DEFAULTS = CONTROLNET_PROCESSORS.hed_image_processor.default;
+const DEFAULTS = CONTROLNET_PROCESSORS.hed_image_processor
+  .default as RequiredHedImageProcessorInvocation;
 
 type HedProcessorProps = {
   controlNetId: string;
   processorNode: RequiredHedImageProcessorInvocation;
+  isEnabled: boolean;
 };
 
 const HedPreprocessor = (props: HedProcessorProps) => {
   const {
     controlNetId,
     processorNode: { detect_resolution, image_resolution, scribble },
+    isEnabled,
   } = props;
-  const isReady = useIsReadyToInvoke();
+  const isBusy = useAppSelector(selectIsBusy);
   const processorChanged = useProcessorNodeChanged();
 
   const handleDetectResolutionChanged = useCallback(
@@ -67,7 +71,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
         max={4096}
         withInput
         withSliderMarks
-        isDisabled={!isReady}
+        isDisabled={isBusy || !isEnabled}
       />
       <IAISlider
         label="Image Resolution"
@@ -79,13 +83,13 @@ const HedPreprocessor = (props: HedProcessorProps) => {
         max={4096}
         withInput
         withSliderMarks
-        isDisabled={!isReady}
+        isDisabled={isBusy || !isEnabled}
       />
       <IAISwitch
         label="Scribble"
         isChecked={scribble}
         onChange={handleScribbleChanged}
-        isDisabled={!isReady}
+        isDisabled={isBusy || !isEnabled}
       />
     </ProcessorWrapper>
   );

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

@@ -1,23 +1,26 @@
+import { useAppSelector } from 'app/store/storeHooks';
 import IAISlider from 'common/components/IAISlider';
 import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
 import { RequiredLineartAnimeImageProcessorInvocation } from 'features/controlNet/store/types';
+import { selectIsBusy } from 'features/system/store/systemSelectors';
 import { memo, useCallback } from 'react';
 import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
 import ProcessorWrapper from './common/ProcessorWrapper';
-import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
 
-const DEFAULTS = CONTROLNET_PROCESSORS.lineart_anime_image_processor.default;
+const DEFAULTS = CONTROLNET_PROCESSORS.lineart_anime_image_processor
+  .default as RequiredLineartAnimeImageProcessorInvocation;
 
 type Props = {
   controlNetId: string;
   processorNode: RequiredLineartAnimeImageProcessorInvocation;
+  isEnabled: boolean;
 };
 
 const LineartAnimeProcessor = (props: Props) => {
-  const { controlNetId, processorNode } = props;
+  const { controlNetId, processorNode, isEnabled } = props;
   const { image_resolution, detect_resolution } = processorNode;
   const processorChanged = useProcessorNodeChanged();
-  const isReady = useIsReadyToInvoke();
+  const isBusy = useAppSelector(selectIsBusy);
 
   const handleDetectResolutionChanged = useCallback(
     (v: number) => {
@@ -57,7 +60,7 @@ const LineartAnimeProcessor = (props: Props) => {
         max={4096}
         withInput
         withSliderMarks
-        isDisabled={!isReady}
+        isDisabled={isBusy || !isEnabled}
       />
       <IAISlider
         label="Image Resolution"
@@ -69,7 +72,7 @@ const LineartAnimeProcessor = (props: Props) => {
         max={4096}
         withInput
         withSliderMarks
-        isDisabled={!isReady}
+        isDisabled={isBusy || !isEnabled}
       />
     </ProcessorWrapper>
   );

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

@@ -1,24 +1,27 @@
+import { useAppSelector } from 'app/store/storeHooks';
 import IAISlider from 'common/components/IAISlider';
 import IAISwitch from 'common/components/IAISwitch';
 import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
 import { RequiredLineartImageProcessorInvocation } from 'features/controlNet/store/types';
+import { selectIsBusy } from 'features/system/store/systemSelectors';
 import { ChangeEvent, memo, useCallback } from 'react';
 import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
 import ProcessorWrapper from './common/ProcessorWrapper';
-import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
 
-const DEFAULTS = CONTROLNET_PROCESSORS.lineart_image_processor.default;
+const DEFAULTS = CONTROLNET_PROCESSORS.lineart_image_processor
+  .default as RequiredLineartImageProcessorInvocation;
 
 type LineartProcessorProps = {
   controlNetId: string;
   processorNode: RequiredLineartImageProcessorInvocation;
+  isEnabled: boolean;
 };
 
 const LineartProcessor = (props: LineartProcessorProps) => {
-  const { controlNetId, processorNode } = props;
+  const { controlNetId, processorNode, isEnabled } = props;
   const { image_resolution, detect_resolution, coarse } = processorNode;
   const processorChanged = useProcessorNodeChanged();
-  const isReady = useIsReadyToInvoke();
+  const isBusy = useAppSelector(selectIsBusy);
 
   const handleDetectResolutionChanged = useCallback(
     (v: number) => {
@@ -65,7 +68,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
         max={4096}
         withInput
         withSliderMarks
-        isDisabled={!isReady}
+        isDisabled={isBusy || !isEnabled}
       />
       <IAISlider
         label="Image Resolution"
@@ -77,13 +80,13 @@ const LineartProcessor = (props: LineartProcessorProps) => {
         max={4096}
         withInput
         withSliderMarks
-        isDisabled={!isReady}
+        isDisabled={isBusy || !isEnabled}
       />
       <IAISwitch
         label="Coarse"
         isChecked={coarse}
         onChange={handleCoarseChanged}
-        isDisabled={!isReady}
+        isDisabled={isBusy || !isEnabled}
       />
     </ProcessorWrapper>
   );

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

@@ -1,23 +1,26 @@
+import { useAppSelector } from 'app/store/storeHooks';
 import IAISlider from 'common/components/IAISlider';
 import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
 import { RequiredMediapipeFaceProcessorInvocation } from 'features/controlNet/store/types';
+import { selectIsBusy } from 'features/system/store/systemSelectors';
 import { memo, useCallback } from 'react';
 import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
 import ProcessorWrapper from './common/ProcessorWrapper';
-import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
 
-const DEFAULTS = CONTROLNET_PROCESSORS.mediapipe_face_processor.default;
+const DEFAULTS = CONTROLNET_PROCESSORS.mediapipe_face_processor
+  .default as RequiredMediapipeFaceProcessorInvocation;
 
 type Props = {
   controlNetId: string;
   processorNode: RequiredMediapipeFaceProcessorInvocation;
+  isEnabled: boolean;
 };
 
 const MediapipeFaceProcessor = (props: Props) => {
-  const { controlNetId, processorNode } = props;
+  const { controlNetId, processorNode, isEnabled } = props;
   const { max_faces, min_confidence } = processorNode;
   const processorChanged = useProcessorNodeChanged();
-  const isReady = useIsReadyToInvoke();
+  const isBusy = useAppSelector(selectIsBusy);
 
   const handleMaxFacesChanged = useCallback(
     (v: number) => {
@@ -53,7 +56,7 @@ const MediapipeFaceProcessor = (props: Props) => {
         max={20}
         withInput
         withSliderMarks
-        isDisabled={!isReady}
+        isDisabled={isBusy || !isEnabled}
       />
       <IAISlider
         label="Min Confidence"
@@ -66,7 +69,7 @@ const MediapipeFaceProcessor = (props: Props) => {
         step={0.01}
         withInput
         withSliderMarks
-        isDisabled={!isReady}
+        isDisabled={isBusy || !isEnabled}
       />
     </ProcessorWrapper>
   );

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

@@ -1,23 +1,26 @@
+import { useAppSelector } from 'app/store/storeHooks';
 import IAISlider from 'common/components/IAISlider';
 import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
 import { RequiredMidasDepthImageProcessorInvocation } from 'features/controlNet/store/types';
+import { selectIsBusy } from 'features/system/store/systemSelectors';
 import { memo, useCallback } from 'react';
 import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
 import ProcessorWrapper from './common/ProcessorWrapper';
-import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
 
-const DEFAULTS = CONTROLNET_PROCESSORS.midas_depth_image_processor.default;
+const DEFAULTS = CONTROLNET_PROCESSORS.midas_depth_image_processor
+  .default as RequiredMidasDepthImageProcessorInvocation;
 
 type Props = {
   controlNetId: string;
   processorNode: RequiredMidasDepthImageProcessorInvocation;
+  isEnabled: boolean;
 };
 
 const MidasDepthProcessor = (props: Props) => {
-  const { controlNetId, processorNode } = props;
+  const { controlNetId, processorNode, isEnabled } = props;
   const { a_mult, bg_th } = processorNode;
   const processorChanged = useProcessorNodeChanged();
-  const isReady = useIsReadyToInvoke();
+  const isBusy = useAppSelector(selectIsBusy);
 
   const handleAMultChanged = useCallback(
     (v: number) => {
@@ -54,7 +57,7 @@ const MidasDepthProcessor = (props: Props) => {
         step={0.01}
         withInput
         withSliderMarks
-        isDisabled={!isReady}
+        isDisabled={isBusy || !isEnabled}
       />
       <IAISlider
         label="bg_th"
@@ -67,7 +70,7 @@ const MidasDepthProcessor = (props: Props) => {
         step={0.01}
         withInput
         withSliderMarks
-        isDisabled={!isReady}
+        isDisabled={isBusy || !isEnabled}
       />
     </ProcessorWrapper>
   );

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

@@ -1,23 +1,26 @@
+import { useAppSelector } from 'app/store/storeHooks';
 import IAISlider from 'common/components/IAISlider';
 import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
 import { RequiredMlsdImageProcessorInvocation } from 'features/controlNet/store/types';
+import { selectIsBusy } from 'features/system/store/systemSelectors';
 import { memo, useCallback } from 'react';
 import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
 import ProcessorWrapper from './common/ProcessorWrapper';
-import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
 
-const DEFAULTS = CONTROLNET_PROCESSORS.mlsd_image_processor.default;
+const DEFAULTS = CONTROLNET_PROCESSORS.mlsd_image_processor
+  .default as RequiredMlsdImageProcessorInvocation;
 
 type Props = {
   controlNetId: string;
   processorNode: RequiredMlsdImageProcessorInvocation;
+  isEnabled: boolean;
 };
 
 const MlsdImageProcessor = (props: Props) => {
-  const { controlNetId, processorNode } = props;
+  const { controlNetId, processorNode, isEnabled } = props;
   const { image_resolution, detect_resolution, thr_d, thr_v } = processorNode;
   const processorChanged = useProcessorNodeChanged();
-  const isReady = useIsReadyToInvoke();
+  const isBusy = useAppSelector(selectIsBusy);
 
   const handleDetectResolutionChanged = useCallback(
     (v: number) => {
@@ -79,7 +82,7 @@ const MlsdImageProcessor = (props: Props) => {
         max={4096}
         withInput
         withSliderMarks
-        isDisabled={!isReady}
+        isDisabled={isBusy || !isEnabled}
       />
       <IAISlider
         label="Image Resolution"
@@ -91,7 +94,7 @@ const MlsdImageProcessor = (props: Props) => {
         max={4096}
         withInput
         withSliderMarks
-        isDisabled={!isReady}
+        isDisabled={isBusy || !isEnabled}
       />
       <IAISlider
         label="W"
@@ -104,7 +107,7 @@ const MlsdImageProcessor = (props: Props) => {
         step={0.01}
         withInput
         withSliderMarks
-        isDisabled={!isReady}
+        isDisabled={isBusy || !isEnabled}
       />
       <IAISlider
         label="H"
@@ -117,7 +120,7 @@ const MlsdImageProcessor = (props: Props) => {
         step={0.01}
         withInput
         withSliderMarks
-        isDisabled={!isReady}
+        isDisabled={isBusy || !isEnabled}
       />
     </ProcessorWrapper>
   );

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

@@ -1,23 +1,26 @@
+import { useAppSelector } from 'app/store/storeHooks';
 import IAISlider from 'common/components/IAISlider';
 import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
 import { RequiredNormalbaeImageProcessorInvocation } from 'features/controlNet/store/types';
+import { selectIsBusy } from 'features/system/store/systemSelectors';
 import { memo, useCallback } from 'react';
 import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
 import ProcessorWrapper from './common/ProcessorWrapper';
-import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
 
-const DEFAULTS = CONTROLNET_PROCESSORS.normalbae_image_processor.default;
+const DEFAULTS = CONTROLNET_PROCESSORS.normalbae_image_processor
+  .default as RequiredNormalbaeImageProcessorInvocation;
 
 type Props = {
   controlNetId: string;
   processorNode: RequiredNormalbaeImageProcessorInvocation;
+  isEnabled: boolean;
 };
 
 const NormalBaeProcessor = (props: Props) => {
-  const { controlNetId, processorNode } = props;
+  const { controlNetId, processorNode, isEnabled } = props;
   const { image_resolution, detect_resolution } = processorNode;
   const processorChanged = useProcessorNodeChanged();
-  const isReady = useIsReadyToInvoke();
+  const isBusy = useAppSelector(selectIsBusy);
 
   const handleDetectResolutionChanged = useCallback(
     (v: number) => {
@@ -57,7 +60,7 @@ const NormalBaeProcessor = (props: Props) => {
         max={4096}
         withInput
         withSliderMarks
-        isDisabled={!isReady}
+        isDisabled={isBusy || !isEnabled}
       />
       <IAISlider
         label="Image Resolution"
@@ -69,7 +72,7 @@ const NormalBaeProcessor = (props: Props) => {
         max={4096}
         withInput
         withSliderMarks
-        isDisabled={!isReady}
+        isDisabled={isBusy || !isEnabled}
       />
     </ProcessorWrapper>
   );

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

@@ -1,24 +1,27 @@
+import { useAppSelector } from 'app/store/storeHooks';
 import IAISlider from 'common/components/IAISlider';
 import IAISwitch from 'common/components/IAISwitch';
 import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
 import { RequiredOpenposeImageProcessorInvocation } from 'features/controlNet/store/types';
+import { selectIsBusy } from 'features/system/store/systemSelectors';
 import { ChangeEvent, memo, useCallback } from 'react';
 import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
 import ProcessorWrapper from './common/ProcessorWrapper';
-import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
 
-const DEFAULTS = CONTROLNET_PROCESSORS.openpose_image_processor.default;
+const DEFAULTS = CONTROLNET_PROCESSORS.openpose_image_processor
+  .default as RequiredOpenposeImageProcessorInvocation;
 
 type Props = {
   controlNetId: string;
   processorNode: RequiredOpenposeImageProcessorInvocation;
+  isEnabled: boolean;
 };
 
 const OpenposeProcessor = (props: Props) => {
-  const { controlNetId, processorNode } = props;
+  const { controlNetId, processorNode, isEnabled } = props;
   const { image_resolution, detect_resolution, hand_and_face } = processorNode;
   const processorChanged = useProcessorNodeChanged();
-  const isReady = useIsReadyToInvoke();
+  const isBusy = useAppSelector(selectIsBusy);
 
   const handleDetectResolutionChanged = useCallback(
     (v: number) => {
@@ -65,7 +68,7 @@ const OpenposeProcessor = (props: Props) => {
         max={4096}
         withInput
         withSliderMarks
-        isDisabled={!isReady}
+        isDisabled={isBusy || !isEnabled}
       />
       <IAISlider
         label="Image Resolution"
@@ -77,13 +80,13 @@ const OpenposeProcessor = (props: Props) => {
         max={4096}
         withInput
         withSliderMarks
-        isDisabled={!isReady}
+        isDisabled={isBusy || !isEnabled}
       />
       <IAISwitch
         label="Hand and Face"
         isChecked={hand_and_face}
         onChange={handleHandAndFaceChanged}
-        isDisabled={!isReady}
+        isDisabled={isBusy || !isEnabled}
       />
     </ProcessorWrapper>
   );

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

@@ -1,24 +1,27 @@
+import { useAppSelector } from 'app/store/storeHooks';
 import IAISlider from 'common/components/IAISlider';
 import IAISwitch from 'common/components/IAISwitch';
 import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
 import { RequiredPidiImageProcessorInvocation } from 'features/controlNet/store/types';
+import { selectIsBusy } from 'features/system/store/systemSelectors';
 import { ChangeEvent, memo, useCallback } from 'react';
 import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
 import ProcessorWrapper from './common/ProcessorWrapper';
-import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
 
-const DEFAULTS = CONTROLNET_PROCESSORS.pidi_image_processor.default;
+const DEFAULTS = CONTROLNET_PROCESSORS.pidi_image_processor
+  .default as RequiredPidiImageProcessorInvocation;
 
 type Props = {
   controlNetId: string;
   processorNode: RequiredPidiImageProcessorInvocation;
+  isEnabled: boolean;
 };
 
 const PidiProcessor = (props: Props) => {
-  const { controlNetId, processorNode } = props;
+  const { controlNetId, processorNode, isEnabled } = props;
   const { image_resolution, detect_resolution, scribble, safe } = processorNode;
   const processorChanged = useProcessorNodeChanged();
-  const isReady = useIsReadyToInvoke();
+  const isBusy = useAppSelector(selectIsBusy);
 
   const handleDetectResolutionChanged = useCallback(
     (v: number) => {
@@ -72,7 +75,7 @@ const PidiProcessor = (props: Props) => {
         max={4096}
         withInput
         withSliderMarks
-        isDisabled={!isReady}
+        isDisabled={isBusy || !isEnabled}
       />
       <IAISlider
         label="Image Resolution"
@@ -84,7 +87,7 @@ const PidiProcessor = (props: Props) => {
         max={4096}
         withInput
         withSliderMarks
-        isDisabled={!isReady}
+        isDisabled={isBusy || !isEnabled}
       />
       <IAISwitch
         label="Scribble"
@@ -95,7 +98,7 @@ const PidiProcessor = (props: Props) => {
         label="Safe"
         isChecked={safe}
         onChange={handleSafeChanged}
-        isDisabled={!isReady}
+        isDisabled={isBusy || !isEnabled}
       />
     </ProcessorWrapper>
   );

invokeai/frontend/web/src/features/controlNet/components/processors/ZoeDepthProcessor.tsx

@@ -4,6 +4,7 @@ import { memo } from 'react';
 type Props = {
   controlNetId: string;
   processorNode: RequiredZoeDepthImageProcessorInvocation;
+  isEnabled: boolean;
 };
 
 const ZoeDepthProcessor = (props: Props) => {