feat(ui): updated controlnet logic/ui

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetAutoProcess.ts

@@ -6,7 +6,6 @@ import {
   controlNetImageChanged,
   controlNetProcessorParamsChanged,
   controlNetProcessorTypeChanged,
-  isControlNetImagePreprocessedToggled,
 } from 'features/controlNet/store/controlNetSlice';
 import { RootState } from 'app/store/store';
 
@@ -16,25 +15,22 @@ const predicate = (action: AnyAction, state: RootState) => {
   const isActionMatched =
     controlNetProcessorParamsChanged.match(action) ||
     controlNetImageChanged.match(action) ||
-    controlNetProcessorTypeChanged.match(action) ||
-    isControlNetImagePreprocessedToggled.match(action);
+    controlNetProcessorTypeChanged.match(action);
 
   if (!isActionMatched) {
     return false;
   }
 
-  const { controlNetId } = action.payload;
+  const { controlImage, processorType } =
+    state.controlNet.controlNets[action.payload.controlNetId];
 
-  const shouldAutoProcess =
-    !state.controlNet.controlNets[controlNetId].isPreprocessed;
+  const isProcessorSelected = processorType !== 'none';
 
   const isBusy = state.system.isProcessing;
 
-  const hasControlImage = Boolean(
-    state.controlNet.controlNets[controlNetId].controlImage
-  );
+  const hasControlImage = Boolean(controlImage);
 
-  return shouldAutoProcess && !isBusy && hasControlImage;
+  return isProcessorSelected && !isBusy && hasControlImage;
 };
 
 /**

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

@@ -4,7 +4,6 @@ import {
   controlNetAdded,
   controlNetRemoved,
   controlNetToggled,
-  isControlNetImagePreprocessedToggled,
 } from '../store/controlNetSlice';
 import { useAppDispatch } from 'app/store/storeHooks';
 import ParamControlNetModel from './parameters/ParamControlNetModel';
@@ -22,7 +21,7 @@ import {
   TabPanel,
   Box,
 } from '@chakra-ui/react';
-import { FaCopy, FaTrash } from 'react-icons/fa';
+import { FaCopy, FaPlus, FaTrash, FaWrench } from 'react-icons/fa';
 
 import ParamControlNetBeginEnd from './parameters/ParamControlNetBeginEnd';
 import ControlNetImagePreview from './ControlNetImagePreview';
@@ -34,6 +33,7 @@ import ControlNetProcessorComponent from './ControlNetProcessorComponent';
 import ControlNetPreprocessButton from './ControlNetPreprocessButton';
 import IAIButton from 'common/components/IAIButton';
 import IAISwitch from 'common/components/IAISwitch';
+import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons';
 
 type ControlNetProps = {
   controlNet: ControlNetConfig;
@@ -48,12 +48,12 @@ const ControlNet = (props: ControlNetProps) => {
     beginStepPct,
     endStepPct,
     controlImage,
-    isPreprocessed,
     processedControlImage,
     processorNode,
+    processorType,
   } = props.controlNet;
   const dispatch = useAppDispatch();
-  const [shouldShowAdvanced, onToggleAdvanced] = useToggle(true);
+  const [shouldShowAdvanced, onToggleAdvanced] = useToggle(false);
 
   const handleDelete = useCallback(() => {
     dispatch(controlNetRemoved({ controlNetId }));
@@ -69,23 +69,20 @@ const ControlNet = (props: ControlNetProps) => {
     dispatch(controlNetToggled({ controlNetId }));
   }, [controlNetId, dispatch]);
 
-  const handleToggleIsPreprocessed = useCallback(() => {
-    dispatch(isControlNetImagePreprocessedToggled({ controlNetId }));
-  }, [controlNetId, dispatch]);
-
   return (
     <Flex
       sx={{
         flexDir: 'column',
         gap: 2,
-        p: 2,
+        p: 3,
         bg: 'base.850',
         borderRadius: 'base',
       }}
     >
       <Flex sx={{ gap: 2 }}>
         <IAISwitch
-          aria-label="Toggle ControlNet"
+          tooltip="Toggle"
+          aria-label="Toggle"
           isChecked={isEnabled}
           onChange={handleToggleIsEnabled}
         />
@@ -103,19 +100,38 @@ const ControlNet = (props: ControlNetProps) => {
         </Box>
         <IAIIconButton
           size="sm"
-          tooltip="Duplicate ControlNet"
-          aria-label="Duplicate ControlNet"
+          tooltip="Duplicate"
+          aria-label="Duplicate"
           onClick={handleDuplicate}
           icon={<FaCopy />}
         />
         <IAIIconButton
           size="sm"
-          tooltip="Delete ControlNet"
-          aria-label="Delete ControlNet"
+          tooltip="Delete"
+          aria-label="Delete"
           colorScheme="error"
           onClick={handleDelete}
           icon={<FaTrash />}
         />
+        <IAIIconButton
+          size="sm"
+          aria-label="Expand"
+          onClick={onToggleAdvanced}
+          variant="link"
+          icon={
+            <ChevronUpIcon
+              sx={{
+                boxSize: 4,
+                color: 'base.300',
+                transform: shouldShowAdvanced
+                  ? 'rotate(0deg)'
+                  : 'rotate(180deg)',
+                transitionProperty: 'common',
+                transitionDuration: 'normal',
+              }}
+            />
+          }
+        />
       </Flex>
       {isEnabled && (
         <>
@@ -125,38 +141,13 @@ const ControlNet = (props: ControlNetProps) => {
                 flexDir: 'column',
                 gap: 2,
                 w: 'full',
-                h: 32,
-                paddingInlineStart: 2,
-                paddingInlineEnd: shouldShowAdvanced ? 2 : 0,
+                h: 24,
+                paddingInlineStart: 1,
+                paddingInlineEnd: shouldShowAdvanced ? 1 : 0,
                 pb: 2,
                 justifyContent: 'space-between',
               }}
             >
-              <Flex
-                sx={{
-                  justifyContent: 'space-between',
-                  w: 'full',
-                }}
-              >
-                <FormControl>
-                  <HStack>
-                    <Checkbox
-                      isChecked={isPreprocessed}
-                      onChange={handleToggleIsPreprocessed}
-                    />
-                    <FormLabel>Preprocessed</FormLabel>
-                  </HStack>
-                </FormControl>
-                <FormControl>
-                  <HStack>
-                    <Checkbox
-                      isChecked={shouldShowAdvanced}
-                      onChange={onToggleAdvanced}
-                    />
-                    <FormLabel>Advanced</FormLabel>
-                  </HStack>
-                </FormControl>
-              </Flex>
               <ParamControlNetWeight
                 controlNetId={controlNetId}
                 weight={weight}
@@ -174,8 +165,8 @@ const ControlNet = (props: ControlNetProps) => {
                 sx={{
                   alignItems: 'center',
                   justifyContent: 'center',
-                  h: 32,
-                  w: 32,
+                  h: 24,
+                  w: 24,
                   aspectRatio: '1/1',
                 }}
               >
@@ -188,18 +179,14 @@ const ControlNet = (props: ControlNetProps) => {
               <Box pt={2}>
                 <ControlNetImagePreview controlNet={props.controlNet} />
               </Box>
-              {!isPreprocessed && (
-                <>
-                  <ParamControlNetProcessorSelect
-                    controlNetId={controlNetId}
-                    processorNode={processorNode}
-                  />
-                  <ControlNetProcessorComponent
-                    controlNetId={controlNetId}
-                    processorNode={processorNode}
-                  />
-                </>
-              )}
+              <ParamControlNetProcessorSelect
+                controlNetId={controlNetId}
+                processorNode={processorNode}
+              />
+              <ControlNetProcessorComponent
+                controlNetId={controlNetId}
+                processorNode={processorNode}
+              />
             </>
           )}
         </>

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

@@ -28,12 +28,8 @@ type Props = {
 };
 
 const ControlNetImagePreview = (props: Props) => {
-  const {
-    controlNetId,
-    controlImage,
-    processedControlImage,
-    isPreprocessed: isControlImageProcessed,
-  } = props.controlNet;
+  const { controlNetId, controlImage, processedControlImage, processorType } =
+    props.controlNet;
   const dispatch = useAppDispatch();
   const { isProcessingControlImage } = useAppSelector(selector);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -56,7 +52,7 @@ const ControlNetImagePreview = (props: Props) => {
     processedControlImage &&
     !isMouseOverImage &&
     !isProcessingControlImage &&
-    !isControlImageProcessed;
+    processorType !== 'none';
 
   return (
     <Box ref={containerRef} sx={{ position: 'relative', w: 'full', h: 'full' }}>
@@ -64,7 +60,7 @@ const ControlNetImagePreview = (props: Props) => {
         image={controlImage}
         onDrop={handleControlImageChanged}
         isDropDisabled={Boolean(
-          processedControlImage && !isControlImageProcessed
+          processedControlImage && processorType !== 'none'
         )}
       />
       <AnimatePresence>

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

@@ -27,9 +27,12 @@ const ParamIsControlNetModel = (props: ParamIsControlNetModelProps) => {
 
   return (
     <IAICustomSelect
+      tooltip={model}
+      tooltipProps={{ placement: 'top', hasArrow: true }}
       items={CONTROLNET_MODELS}
       selectedItem={model}
       setSelectedItem={handleModelChanged}
+      ellipsisPosition="start"
       withCheckIcon
     />
   );

invokeai/frontend/web/src/features/controlNet/components/processors/common/ProcessorWrapper.tsx

@@ -4,7 +4,5 @@ import { PropsWithChildren } from 'react';
 type Props = PropsWithChildren;
 
 export default function ProcessorWrapper(props: Props) {
-  return (
-    <Flex sx={{ flexDirection: 'column', gap: 2, p: 2 }}>{props.children}</Flex>
-  );
+  return <Flex sx={{ flexDirection: 'column', gap: 2 }}>{props.children}</Flex>;
 }

invokeai/frontend/web/src/features/controlNet/store/constants.ts

@@ -24,6 +24,14 @@ type ControlNetProcessorsDict = Record<
  * TODO: Generate from the OpenAPI schema
  */
 export const CONTROLNET_PROCESSORS = {
+  none: {
+    type: 'none',
+    label: 'None',
+    description: '',
+    default: {
+      type: 'none',
+    },
+  },
   canny_image_processor: {
     type: 'canny_image_processor',
     label: 'Canny',

invokeai/frontend/web/src/features/controlNet/store/controlNetSlice.ts

@@ -21,8 +21,8 @@ export const initialControlNet: Omit<ControlNetConfig, 'controlNetId'> = {
   beginStepPct: 0,
   endStepPct: 1,
   controlImage: null,
-  isPreprocessed: false,
   processedControlImage: null,
+  processorType: 'canny_image_processor',
   processorNode: CONTROLNET_PROCESSORS.canny_image_processor
     .default as RequiredCannyImageProcessorInvocation,
 };
@@ -35,8 +35,8 @@ export type ControlNetConfig = {
   beginStepPct: number;
   endStepPct: number;
   controlImage: ImageDTO | null;
-  isPreprocessed: boolean;
   processedControlImage: ImageDTO | null;
+  processorType: ControlNetProcessorType;
   processorNode: RequiredControlNetProcessorNode;
 };
 
@@ -110,19 +110,11 @@ export const controlNetSlice = createSlice({
       state.controlNets[controlNetId].processedControlImage = null;
       if (
         controlImage !== null &&
-        !state.controlNets[controlNetId].isPreprocessed
+        state.controlNets[controlNetId].processorType !== 'none'
       ) {
         state.isProcessingControlImage = true;
       }
     },
-    isControlNetImagePreprocessedToggled: (
-      state,
-      action: PayloadAction<{ controlNetId: string }>
-    ) => {
-      const { controlNetId } = action.payload;
-      state.controlNets[controlNetId].isPreprocessed =
-        !state.controlNets[controlNetId].isPreprocessed;
-    },
     controlNetProcessedImageChanged: (
       state,
       action: PayloadAction<{
@@ -188,6 +180,7 @@ export const controlNetSlice = createSlice({
       }>
     ) => {
       const { controlNetId, processorType } = action.payload;
+      state.controlNets[controlNetId].processorType = processorType;
       state.controlNets[controlNetId].processorNode = CONTROLNET_PROCESSORS[
         processorType
       ].default as RequiredControlNetProcessorNode;
@@ -210,7 +203,6 @@ export const {
   controlNetAddedFromImage,
   controlNetRemoved,
   controlNetImageChanged,
-  isControlNetImagePreprocessedToggled,
   controlNetProcessedImageChanged,
   controlNetToggled,
   controlNetModelChanged,

invokeai/frontend/web/src/features/controlNet/store/types.ts

@@ -36,7 +36,7 @@ export type ControlNetProcessorNode =
  * Any ControlNet processor type
  */
 export type ControlNetProcessorType = NonNullable<
-  ControlNetProcessorNode['type']
+  ControlNetProcessorNode['type'] | 'none'
 >;
 
 /**

invokeai/frontend/web/src/features/nodes/util/addControlNetToLinearGraph.ts

@@ -33,13 +33,12 @@ export const addControlNetToLinearGraph = (
       const {
         controlNetId,
         isEnabled,
-        isPreprocessed: isControlImageProcessed,
         controlImage,
         processedControlImage,
         beginStepPct,
         endStepPct,
         model,
-        processorNode,
+        processorType,
         weight,
       } = controlNet;
 
@@ -57,14 +56,14 @@ export const addControlNetToLinearGraph = (
         control_weight: weight,
       };
 
-      if (processedControlImage && !isControlImageProcessed) {
+      if (processedControlImage && processorType !== 'none') {
         // We've already processed the image in the app, so we can just use the processed image
         const { image_name, image_origin } = processedControlImage;
         controlNetNode.image = {
           image_name,
           image_origin,
         };
-      } else if (controlImage && isControlImageProcessed) {
+      } else if (controlImage && processorType !== 'none') {
         // The control image is preprocessed
         const { image_name, image_origin } = controlImage;
         controlNetNode.image = {