feat(ui): disable controlnets during processing

invokeai/frontend/web/src/common/components/IAICustomSelect.tsx

@@ -18,7 +18,7 @@ import { useSelect } from 'downshift';
 import { isString } from 'lodash-es';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 
-import { memo, useMemo } from 'react';
+import { memo, useLayoutEffect, useMemo } from 'react';
 import { getInputOutlineStyles } from 'theme/util/getInputOutlineStyles';
 
 export type ItemTooltips = { [key: string]: string };
@@ -39,6 +39,7 @@ type IAICustomSelectProps = {
   tooltip?: string;
   tooltipProps?: Omit<TooltipProps, 'children'>;
   ellipsisPosition?: 'start' | 'end';
+  isDisabled?: boolean;
 };
 
 const IAICustomSelect = (props: IAICustomSelectProps) => {
@@ -52,6 +53,7 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
     data,
     value,
     onChange,
+    isDisabled = false,
   } = props;
 
   const values = useMemo(() => {
@@ -86,11 +88,17 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
     },
   });
 
-  const { refs, floatingStyles } = useFloating<HTMLButtonElement>({
+  const { refs, floatingStyles, update } = useFloating<HTMLButtonElement>({
-    whileElementsMounted: autoUpdate,
+    // whileElementsMounted: autoUpdate,
     middleware: [offset(4), shift({ crossAxis: true, padding: 8 })],
   });
 
+  useLayoutEffect(() => {
+    if (isOpen && refs.reference.current && refs.floating.current) {
+      return autoUpdate(refs.reference.current, refs.floating.current, update);
+    }
+  }, [isOpen, update, refs.floating, refs.reference]);
+
   const labelTextDirection = useMemo(() => {
     if (ellipsisPosition === 'start') {
       return document.dir === 'rtl' ? 'ltr' : 'rtl';
@@ -124,6 +132,8 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
             px: 2,
             gap: 2,
             justifyContent: 'space-between',
+            pointerEvents: isDisabled ? 'none' : undefined,
+            opacity: isDisabled ? 0.5 : undefined,
             ...getInputOutlineStyles(),
           }}
         >

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

@@ -2,6 +2,7 @@ import { useAppDispatch } from 'app/store/storeHooks';
 import IAICustomSelect, {
   IAICustomSelectOption,
 } from 'common/components/IAICustomSelect';
+import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
 import {
   CONTROLNET_MODELS,
   ControlNetModelName,
@@ -24,6 +25,7 @@ const DATA: IAICustomSelectOption[] = map(CONTROLNET_MODELS, (m) => ({
 const ParamControlNetModel = (props: ParamControlNetModelProps) => {
   const { controlNetId, model } = props;
   const dispatch = useAppDispatch();
+  const isReady = useIsReadyToInvoke();
 
   const handleModelChanged = useCallback(
     (val: string | null | undefined) => {
@@ -41,6 +43,7 @@ const ParamControlNetModel = (props: ParamControlNetModelProps) => {
       data={DATA}
       value={model}
       onChange={handleModelChanged}
+      isDisabled={!isReady}
       ellipsisPosition="start"
       withCheckIcon
     />

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

@@ -7,9 +7,11 @@ import {
   ControlNetProcessorType,
 } from '../../store/types';
 import { controlNetProcessorTypeChanged } from '../../store/controlNetSlice';
-import { useAppDispatch } from 'app/store/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { CONTROLNET_PROCESSORS } from '../../store/constants';
 import { map } from 'lodash-es';
+import { isProcessingSelector } from 'features/system/store/systemSelectors';
+import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
 
 type ParamControlNetProcessorSelectProps = {
   controlNetId: string;
@@ -37,6 +39,8 @@ const ParamControlNetProcessorSelect = (
 ) => {
   const { controlNetId, processorNode } = props;
   const dispatch = useAppDispatch();
+  const isReady = useIsReadyToInvoke();
+
   const handleProcessorTypeChanged = useCallback(
     (v: string | null | undefined) => {
       dispatch(
@@ -55,6 +59,7 @@ const ParamControlNetProcessorSelect = (
       data={CONTROLNET_PROCESSOR_TYPES}
       onChange={handleProcessorTypeChanged}
       withCheckIcon
+      isDisabled={!isReady}
     />
   );
 };

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

@@ -4,6 +4,7 @@ import { RequiredCannyImageProcessorInvocation } from 'features/controlNet/store
 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;
 
@@ -15,6 +16,7 @@ type CannyProcessorProps = {
 const CannyProcessor = (props: CannyProcessorProps) => {
   const { controlNetId, processorNode } = props;
   const { low_threshold, high_threshold } = processorNode;
+  const isReady = useIsReadyToInvoke();
   const processorChanged = useProcessorNodeChanged();
 
   const handleLowThresholdChanged = useCallback(
@@ -46,6 +48,7 @@ const CannyProcessor = (props: CannyProcessorProps) => {
   return (
     <ProcessorWrapper>
       <IAISlider
+        isDisabled={!isReady}
         label="Low Threshold"
         value={low_threshold}
         onChange={handleLowThresholdChanged}
@@ -57,6 +60,7 @@ const CannyProcessor = (props: CannyProcessorProps) => {
         withSliderMarks
       />
       <IAISlider
+        isDisabled={!isReady}
         label="High Threshold"
         value={high_threshold}
         onChange={handleHighThresholdChanged}

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

@@ -4,6 +4,7 @@ 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';
 
 const DEFAULTS = CONTROLNET_PROCESSORS.content_shuffle_image_processor.default;
 
@@ -16,6 +17,7 @@ const ContentShuffleProcessor = (props: Props) => {
   const { controlNetId, processorNode } = props;
   const { image_resolution, detect_resolution, w, h, f } = processorNode;
   const processorChanged = useProcessorNodeChanged();
+  const isReady = useIsReadyToInvoke();
 
   const handleDetectResolutionChanged = useCallback(
     (v: number) => {
@@ -94,6 +96,7 @@ const ContentShuffleProcessor = (props: Props) => {
         max={4096}
         withInput
         withSliderMarks
+        isDisabled={!isReady}
       />
       <IAISlider
         label="Image Resolution"
@@ -105,6 +108,7 @@ const ContentShuffleProcessor = (props: Props) => {
         max={4096}
         withInput
         withSliderMarks
+        isDisabled={!isReady}
       />
       <IAISlider
         label="W"
@@ -116,6 +120,7 @@ const ContentShuffleProcessor = (props: Props) => {
         max={4096}
         withInput
         withSliderMarks
+        isDisabled={!isReady}
       />
       <IAISlider
         label="H"
@@ -127,6 +132,7 @@ const ContentShuffleProcessor = (props: Props) => {
         max={4096}
         withInput
         withSliderMarks
+        isDisabled={!isReady}
       />
       <IAISlider
         label="F"
@@ -138,6 +144,7 @@ const ContentShuffleProcessor = (props: Props) => {
         max={4096}
         withInput
         withSliderMarks
+        isDisabled={!isReady}
       />
     </ProcessorWrapper>
   );

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

@@ -5,6 +5,7 @@ import { RequiredHedImageProcessorInvocation } from 'features/controlNet/store/t
 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;
 
@@ -18,7 +19,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
     controlNetId,
     processorNode: { detect_resolution, image_resolution, scribble },
   } = props;
-
+  const isReady = useIsReadyToInvoke();
   const processorChanged = useProcessorNodeChanged();
 
   const handleDetectResolutionChanged = useCallback(
@@ -66,6 +67,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
         max={4096}
         withInput
         withSliderMarks
+        isDisabled={!isReady}
       />
       <IAISlider
         label="Image Resolution"
@@ -77,11 +79,13 @@ const HedPreprocessor = (props: HedProcessorProps) => {
         max={4096}
         withInput
         withSliderMarks
+        isDisabled={!isReady}
       />
       <IAISwitch
         label="Scribble"
         isChecked={scribble}
         onChange={handleScribbleChanged}
+        isDisabled={!isReady}
       />
     </ProcessorWrapper>
   );

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

@@ -4,6 +4,7 @@ import { RequiredLineartAnimeImageProcessorInvocation } from 'features/controlNe
 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;
 
@@ -16,6 +17,7 @@ const LineartAnimeProcessor = (props: Props) => {
   const { controlNetId, processorNode } = props;
   const { image_resolution, detect_resolution } = processorNode;
   const processorChanged = useProcessorNodeChanged();
+  const isReady = useIsReadyToInvoke();
 
   const handleDetectResolutionChanged = useCallback(
     (v: number) => {
@@ -55,6 +57,7 @@ const LineartAnimeProcessor = (props: Props) => {
         max={4096}
         withInput
         withSliderMarks
+        isDisabled={!isReady}
       />
       <IAISlider
         label="Image Resolution"
@@ -66,6 +69,7 @@ const LineartAnimeProcessor = (props: Props) => {
         max={4096}
         withInput
         withSliderMarks
+        isDisabled={!isReady}
       />
     </ProcessorWrapper>
   );

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

@@ -5,6 +5,7 @@ import { RequiredLineartImageProcessorInvocation } from 'features/controlNet/sto
 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;
 
@@ -17,6 +18,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
   const { controlNetId, processorNode } = props;
   const { image_resolution, detect_resolution, coarse } = processorNode;
   const processorChanged = useProcessorNodeChanged();
+  const isReady = useIsReadyToInvoke();
 
   const handleDetectResolutionChanged = useCallback(
     (v: number) => {
@@ -63,6 +65,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
         max={4096}
         withInput
         withSliderMarks
+        isDisabled={!isReady}
       />
       <IAISlider
         label="Image Resolution"
@@ -74,11 +77,13 @@ const LineartProcessor = (props: LineartProcessorProps) => {
         max={4096}
         withInput
         withSliderMarks
+        isDisabled={!isReady}
       />
       <IAISwitch
         label="Coarse"
         isChecked={coarse}
         onChange={handleCoarseChanged}
+        isDisabled={!isReady}
       />
     </ProcessorWrapper>
   );

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

@@ -4,6 +4,7 @@ import { RequiredMediapipeFaceProcessorInvocation } from 'features/controlNet/st
 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;
 
@@ -16,6 +17,7 @@ const MediapipeFaceProcessor = (props: Props) => {
   const { controlNetId, processorNode } = props;
   const { max_faces, min_confidence } = processorNode;
   const processorChanged = useProcessorNodeChanged();
+  const isReady = useIsReadyToInvoke();
 
   const handleMaxFacesChanged = useCallback(
     (v: number) => {
@@ -51,6 +53,7 @@ const MediapipeFaceProcessor = (props: Props) => {
         max={20}
         withInput
         withSliderMarks
+        isDisabled={!isReady}
       />
       <IAISlider
         label="Min Confidence"
@@ -63,6 +66,7 @@ const MediapipeFaceProcessor = (props: Props) => {
         step={0.01}
         withInput
         withSliderMarks
+        isDisabled={!isReady}
       />
     </ProcessorWrapper>
   );

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

@@ -4,6 +4,7 @@ import { RequiredMidasDepthImageProcessorInvocation } from 'features/controlNet/
 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;
 
@@ -16,6 +17,7 @@ const MidasDepthProcessor = (props: Props) => {
   const { controlNetId, processorNode } = props;
   const { a_mult, bg_th } = processorNode;
   const processorChanged = useProcessorNodeChanged();
+  const isReady = useIsReadyToInvoke();
 
   const handleAMultChanged = useCallback(
     (v: number) => {
@@ -52,6 +54,7 @@ const MidasDepthProcessor = (props: Props) => {
         step={0.01}
         withInput
         withSliderMarks
+        isDisabled={!isReady}
       />
       <IAISlider
         label="bg_th"
@@ -64,6 +67,7 @@ const MidasDepthProcessor = (props: Props) => {
         step={0.01}
         withInput
         withSliderMarks
+        isDisabled={!isReady}
       />
     </ProcessorWrapper>
   );

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

@@ -4,6 +4,7 @@ import { RequiredMlsdImageProcessorInvocation } from 'features/controlNet/store/
 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;
 
@@ -16,6 +17,7 @@ const MlsdImageProcessor = (props: Props) => {
   const { controlNetId, processorNode } = props;
   const { image_resolution, detect_resolution, thr_d, thr_v } = processorNode;
   const processorChanged = useProcessorNodeChanged();
+  const isReady = useIsReadyToInvoke();
 
   const handleDetectResolutionChanged = useCallback(
     (v: number) => {
@@ -77,6 +79,7 @@ const MlsdImageProcessor = (props: Props) => {
         max={4096}
         withInput
         withSliderMarks
+        isDisabled={!isReady}
       />
       <IAISlider
         label="Image Resolution"
@@ -88,6 +91,7 @@ const MlsdImageProcessor = (props: Props) => {
         max={4096}
         withInput
         withSliderMarks
+        isDisabled={!isReady}
       />
       <IAISlider
         label="W"
@@ -100,6 +104,7 @@ const MlsdImageProcessor = (props: Props) => {
         step={0.01}
         withInput
         withSliderMarks
+        isDisabled={!isReady}
       />
       <IAISlider
         label="H"
@@ -112,6 +117,7 @@ const MlsdImageProcessor = (props: Props) => {
         step={0.01}
         withInput
         withSliderMarks
+        isDisabled={!isReady}
       />
     </ProcessorWrapper>
   );

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

@@ -4,6 +4,7 @@ import { RequiredNormalbaeImageProcessorInvocation } from 'features/controlNet/s
 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;
 
@@ -16,6 +17,7 @@ const NormalBaeProcessor = (props: Props) => {
   const { controlNetId, processorNode } = props;
   const { image_resolution, detect_resolution } = processorNode;
   const processorChanged = useProcessorNodeChanged();
+  const isReady = useIsReadyToInvoke();
 
   const handleDetectResolutionChanged = useCallback(
     (v: number) => {
@@ -55,6 +57,7 @@ const NormalBaeProcessor = (props: Props) => {
         max={4096}
         withInput
         withSliderMarks
+        isDisabled={!isReady}
       />
       <IAISlider
         label="Image Resolution"
@@ -66,6 +69,7 @@ const NormalBaeProcessor = (props: Props) => {
         max={4096}
         withInput
         withSliderMarks
+        isDisabled={!isReady}
       />
     </ProcessorWrapper>
   );

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

@@ -5,6 +5,7 @@ import { RequiredOpenposeImageProcessorInvocation } from 'features/controlNet/st
 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;
 
@@ -17,6 +18,7 @@ const OpenposeProcessor = (props: Props) => {
   const { controlNetId, processorNode } = props;
   const { image_resolution, detect_resolution, hand_and_face } = processorNode;
   const processorChanged = useProcessorNodeChanged();
+  const isReady = useIsReadyToInvoke();
 
   const handleDetectResolutionChanged = useCallback(
     (v: number) => {
@@ -63,6 +65,7 @@ const OpenposeProcessor = (props: Props) => {
         max={4096}
         withInput
         withSliderMarks
+        isDisabled={!isReady}
       />
       <IAISlider
         label="Image Resolution"
@@ -74,11 +77,13 @@ const OpenposeProcessor = (props: Props) => {
         max={4096}
         withInput
         withSliderMarks
+        isDisabled={!isReady}
       />
       <IAISwitch
         label="Hand and Face"
         isChecked={hand_and_face}
         onChange={handleHandAndFaceChanged}
+        isDisabled={!isReady}
       />
     </ProcessorWrapper>
   );

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

@@ -5,6 +5,7 @@ import { RequiredPidiImageProcessorInvocation } from 'features/controlNet/store/
 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;
 
@@ -17,6 +18,7 @@ const PidiProcessor = (props: Props) => {
   const { controlNetId, processorNode } = props;
   const { image_resolution, detect_resolution, scribble, safe } = processorNode;
   const processorChanged = useProcessorNodeChanged();
+  const isReady = useIsReadyToInvoke();
 
   const handleDetectResolutionChanged = useCallback(
     (v: number) => {
@@ -70,6 +72,7 @@ const PidiProcessor = (props: Props) => {
         max={4096}
         withInput
         withSliderMarks
+        isDisabled={!isReady}
       />
       <IAISlider
         label="Image Resolution"
@@ -81,13 +84,19 @@ const PidiProcessor = (props: Props) => {
         max={4096}
         withInput
         withSliderMarks
+        isDisabled={!isReady}
       />
       <IAISwitch
         label="Scribble"
         isChecked={scribble}
         onChange={handleScribbleChanged}
       />
-      <IAISwitch label="Safe" isChecked={safe} onChange={handleSafeChanged} />
+      <IAISwitch
+        label="Safe"
+        isChecked={safe}
+        onChange={handleSafeChanged}
+        isDisabled={!isReady}
+      />
     </ProcessorWrapper>
   );
 };

invokeai/frontend/web/src/features/system/store/systemSelectors.ts

@@ -47,3 +47,6 @@ export const languageSelector = createSelector(
   (system) => system.language,
   defaultSelectorOptions
 );
+
+export const isProcessingSelector = (state: RootState) =>
+  state.system.isProcessing;