feat(ui): add mini/advanced controlnet ui

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

@@ -1,32 +1,42 @@
 import { memo, useCallback } from 'react';
 import {
-  ControlNet,
-  controlNetProcessedImageChanged,
+  ControlNetConfig,
+  controlNetAdded,
   controlNetRemoved,
+  controlNetToggled,
+  isControlNetImagePreprocessedToggled,
 } from '../store/controlNetSlice';
 import { useAppDispatch } from 'app/store/storeHooks';
 import ParamControlNetModel from './parameters/ParamControlNetModel';
 import ParamControlNetWeight from './parameters/ParamControlNetWeight';
 import {
-  Box,
+  Checkbox,
   Flex,
-  Tab,
+  FormControl,
+  FormLabel,
+  HStack,
   TabList,
-  TabPanel,
   TabPanels,
   Tabs,
-  Text,
+  Tab,
+  TabPanel,
+  Box,
 } from '@chakra-ui/react';
-import IAIButton from 'common/components/IAIButton';
-import { FaUndo } from 'react-icons/fa';
+import { FaCopy, FaTrash } from 'react-icons/fa';
+
+import ParamControlNetBeginEnd from './parameters/ParamControlNetBeginEnd';
+import ControlNetImagePreview from './ControlNetImagePreview';
+import IAIIconButton from 'common/components/IAIIconButton';
+import { v4 as uuidv4 } from 'uuid';
+import { useToggle } from 'react-use';
 import ParamControlNetProcessorSelect from './parameters/ParamControlNetProcessorSelect';
 import ControlNetProcessorComponent from './ControlNetProcessorComponent';
 import ControlNetPreprocessButton from './ControlNetPreprocessButton';
-import ParamControlNetBeginEnd from './parameters/ParamControlNetBeginEnd';
-import ControlNetImagePreview from './ControlNetImagePreview';
+import IAIButton from 'common/components/IAIButton';
+import IAISwitch from 'common/components/IAISwitch';
 
 type ControlNetProps = {
-  controlNet: ControlNet;
+  controlNet: ControlNetConfig;
 };
 
 const ControlNet = (props: ControlNetProps) => {
@@ -38,24 +48,160 @@ const ControlNet = (props: ControlNetProps) => {
     beginStepPct,
     endStepPct,
     controlImage,
-    isControlImageProcessed,
+    isPreprocessed: isControlImageProcessed,
     processedControlImage,
     processorNode,
   } = props.controlNet;
   const dispatch = useAppDispatch();
-  const handleReset = useCallback(() => {
-    dispatch(
-      controlNetProcessedImageChanged({
-        controlNetId,
-        processedControlImage: null,
-      })
-    );
+  const [shouldShowAdvanced, onToggleAdvanced] = useToggle(true);
+
+  const handleDelete = useCallback(() => {
+    dispatch(controlNetRemoved({ controlNetId }));
   }, [controlNetId, dispatch]);
 
-  const handleControlNetRemoved = useCallback(() => {
-    dispatch(controlNetRemoved(controlNetId));
+  const handleDuplicate = useCallback(() => {
+    dispatch(
+      controlNetAdded({ controlNetId: uuidv4(), controlNet: props.controlNet })
+    );
+  }, [dispatch, props.controlNet]);
+
+  const handleToggleIsEnabled = useCallback(() => {
+    dispatch(controlNetToggled({ controlNetId }));
   }, [controlNetId, dispatch]);
 
+  const handleToggleIsPreprocessed = useCallback(() => {
+    dispatch(isControlNetImagePreprocessedToggled({ controlNetId }));
+  }, [controlNetId, dispatch]);
+
+  return (
+    <Flex
+      sx={{
+        flexDir: 'column',
+        gap: 2,
+        p: 2,
+        bg: 'base.850',
+        borderRadius: 'base',
+      }}
+    >
+      <HStack>
+        <IAISwitch
+          aria-label="Toggle ControlNet"
+          isChecked={isEnabled}
+          onChange={handleToggleIsEnabled}
+        />
+        <Box
+          w="full"
+          opacity={isEnabled ? 1 : 0.5}
+          pointerEvents={isEnabled ? 'auto' : 'none'}
+          transitionProperty="common"
+          transitionDuration="0.1s"
+        >
+          <ParamControlNetModel controlNetId={controlNetId} model={model} />
+        </Box>
+        <IAIIconButton
+          size="sm"
+          tooltip="Duplicate ControlNet"
+          aria-label="Duplicate ControlNet"
+          onClick={handleDuplicate}
+          icon={<FaCopy />}
+        />
+        <IAIIconButton
+          size="sm"
+          tooltip="Delete ControlNet"
+          aria-label="Delete ControlNet"
+          colorScheme="error"
+          onClick={handleDelete}
+          icon={<FaTrash />}
+        />
+      </HStack>
+      {isEnabled && (
+        <>
+          <Flex sx={{ gap: 4 }}>
+            {!shouldShowAdvanced && (
+              <Flex
+                sx={{
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  h: 32,
+                  w: 32,
+                  aspectRatio: '1/1',
+                }}
+              >
+                <ControlNetImagePreview controlNet={props.controlNet} />
+              </Flex>
+            )}
+            <Flex
+              sx={{
+                flexDir: 'column',
+                gap: 2,
+                w: 'full',
+                paddingInlineEnd: 2,
+                pb: shouldShowAdvanced ? 0 : 2,
+                justifyContent: 'space-between',
+              }}
+            >
+              <Flex
+                sx={{
+                  justifyContent: 'space-between',
+                  w: 'full',
+                }}
+              >
+                <FormControl>
+                  <HStack>
+                    <Checkbox
+                      isChecked={isControlImageProcessed}
+                      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}
+                mini
+              />
+              <ParamControlNetBeginEnd
+                controlNetId={controlNetId}
+                beginStepPct={beginStepPct}
+                endStepPct={endStepPct}
+                mini
+              />
+            </Flex>
+          </Flex>
+          {shouldShowAdvanced && (
+            <>
+              <Box pt={2}>
+                <ControlNetImagePreview controlNet={props.controlNet} />
+              </Box>
+              {!isControlImageProcessed && (
+                <>
+                  <ParamControlNetProcessorSelect
+                    controlNetId={controlNetId}
+                    processorNode={processorNode}
+                  />
+                  <ControlNetProcessorComponent
+                    controlNetId={controlNetId}
+                    processorNode={processorNode}
+                  />
+                </>
+              )}
+            </>
+          )}
+        </>
+      )}
+    </Flex>
+  );
+
   return (
     <Flex sx={{ flexDir: 'column', gap: 3 }}>
       <ControlNetImagePreview controlNet={props.controlNet} />
@@ -101,18 +247,18 @@ const ControlNet = (props: ControlNetProps) => {
               processorNode={processorNode}
             />
             <ControlNetPreprocessButton controlNet={props.controlNet} />
-            <IAIButton
+            {/* <IAIButton
               size="sm"
               leftIcon={<FaUndo />}
               onClick={handleReset}
               isDisabled={Boolean(!processedControlImage)}
             >
               Reset Processing
-            </IAIButton>
+            </IAIButton> */}
           </TabPanel>
         </TabPanels>
       </Tabs>
-      <IAIButton onClick={handleControlNetRemoved}>Remove ControlNet</IAIButton>
+      <IAIButton onClick={handleDelete}>Remove ControlNet</IAIButton>
     </Flex>
   );
 };

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

@@ -1,7 +1,7 @@
 import { memo, useCallback, useRef, useState } from 'react';
 import { ImageDTO } from 'services/api';
 import {
-  ControlNet,
+  ControlNetConfig,
   controlNetImageChanged,
   controlNetSelector,
 } from '../store/controlNetSlice';
@@ -24,7 +24,7 @@ const selector = createSelector(
 );
 
 type Props = {
-  controlNet: ControlNet;
+  controlNet: ControlNetConfig;
 };
 
 const ControlNetImagePreview = (props: Props) => {
@@ -32,7 +32,7 @@ const ControlNetImagePreview = (props: Props) => {
     controlNetId,
     controlImage,
     processedControlImage,
-    isControlImageProcessed,
+    isPreprocessed: isControlImageProcessed,
   } = props.controlNet;
   const dispatch = useAppDispatch();
   const { isProcessingControlImage } = useAppSelector(selector);
@@ -63,63 +63,62 @@ const ControlNetImagePreview = (props: Props) => {
       <IAIDndImage
         image={controlImage}
         onDrop={handleControlImageChanged}
-        isDropDisabled={Boolean(processedControlImage)}
+        isDropDisabled={Boolean(
+          processedControlImage && !isControlImageProcessed
+        )}
       />
       <AnimatePresence>
-        {controlImage &&
-          processedControlImage &&
-          shouldShowProcessedImage &&
-          !isProcessingControlImage && (
-            <motion.div
-              initial={{
-                opacity: 0,
-              }}
-              animate={{
-                opacity: 1,
-                transition: { duration: 0.1 },
-              }}
-              exit={{
-                opacity: 0,
-                transition: { duration: 0.1 },
+        {shouldShowProcessedImage && (
+          <motion.div
+            initial={{
+              opacity: 0,
+            }}
+            animate={{
+              opacity: 1,
+              transition: { duration: 0.1 },
+            }}
+            exit={{
+              opacity: 0,
+              transition: { duration: 0.1 },
+            }}
+          >
+            <Box
+              sx={{
+                position: 'absolute',
+                w: 'full',
+                h: 'full',
+                top: 0,
+                insetInlineStart: 0,
               }}
             >
+              {shouldShowProcessedImageBackdrop && (
+                <Box
+                  sx={{
+                    w: 'full',
+                    h: 'full',
+                    bg: 'base.900',
+                    opacity: 0.7,
+                  }}
+                />
+              )}
               <Box
                 sx={{
                   position: 'absolute',
-                  w: 'full',
-                  h: 'full',
                   top: 0,
                   insetInlineStart: 0,
+                  w: 'full',
+                  h: 'full',
                 }}
               >
-                {shouldShowProcessedImageBackdrop && (
-                  <Box
-                    sx={{
-                      w: 'full',
-                      h: 'full',
-                      bg: 'base.900',
-                      opacity: 0.7,
-                    }}
-                  />
-                )}
-                <Box
-                  sx={{
-                    position: 'absolute',
-                    top: 0,
-                    insetInlineStart: 0,
-                    w: 'full',
-                    h: 'full',
-                  }}
-                >
-                  <IAIDndImage
-                    image={processedControlImage}
-                    onDrop={handleControlImageChanged}
-                    payloadImage={controlImage}
-                  />
-                </Box>
+                <IAIDndImage
+                  image={processedControlImage}
+                  onDrop={handleControlImageChanged}
+                  payloadImage={controlImage}
+                />
               </Box>
-            </motion.div>
-          )}
+            </Box>
+          </motion.div>
+        )}
       </AnimatePresence>
       {isProcessingControlImage && (
         <Box

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

@@ -1,153 +0,0 @@
-import { memo, useCallback } from 'react';
-import {
-  ControlNet,
-  controlNetAdded,
-  controlNetRemoved,
-  controlNetToggled,
-  isControlNetImageProcessedToggled,
-} from '../store/controlNetSlice';
-import { useAppDispatch } from 'app/store/storeHooks';
-import ParamControlNetModel from './parameters/ParamControlNetModel';
-import ParamControlNetWeight from './parameters/ParamControlNetWeight';
-import {
-  Checkbox,
-  Flex,
-  FormControl,
-  FormLabel,
-  HStack,
-} from '@chakra-ui/react';
-import { FaCopy, FaTrash } from 'react-icons/fa';
-import ParamControlNetBeginEnd from './parameters/ParamControlNetBeginEnd';
-import ControlNetImagePreview from './ControlNetImagePreview';
-import IAIIconButton from 'common/components/IAIIconButton';
-import { v4 as uuidv4 } from 'uuid';
-
-type ControlNetProps = {
-  controlNet: ControlNet;
-};
-
-const ControlNet = (props: ControlNetProps) => {
-  const {
-    controlNetId,
-    isEnabled,
-    model,
-    weight,
-    beginStepPct,
-    endStepPct,
-    controlImage,
-    isControlImageProcessed,
-    processedControlImage,
-    processorNode,
-  } = props.controlNet;
-  const dispatch = useAppDispatch();
-
-  const handleDelete = useCallback(() => {
-    dispatch(controlNetRemoved(controlNetId));
-  }, [controlNetId, dispatch]);
-
-  const handleDuplicate = useCallback(() => {
-    dispatch(
-      controlNetAdded({ controlNetId: uuidv4(), controlNet: props.controlNet })
-    );
-  }, [dispatch, props.controlNet]);
-
-  const handleToggleIsEnabled = useCallback(() => {
-    dispatch(controlNetToggled(controlNetId));
-  }, [controlNetId, dispatch]);
-
-  const handleToggleIsPreprocessed = useCallback(() => {
-    dispatch(isControlNetImageProcessedToggled(controlNetId));
-  }, [controlNetId, dispatch]);
-
-  return (
-    <Flex
-      sx={{
-        flexDir: 'column',
-        gap: 2,
-      }}
-    >
-      <HStack>
-        <ParamControlNetModel controlNetId={controlNetId} model={model} />
-        <IAIIconButton
-          size="sm"
-          tooltip="Duplicate ControlNet"
-          aria-label="Duplicate ControlNet"
-          onClick={handleDuplicate}
-          icon={<FaCopy />}
-        />
-        <IAIIconButton
-          size="sm"
-          tooltip="Delete ControlNet"
-          aria-label="Delete ControlNet"
-          colorScheme="error"
-          onClick={handleDelete}
-          icon={<FaTrash />}
-        />
-      </HStack>
-      <Flex
-        sx={{
-          gap: 4,
-          paddingInlineEnd: 2,
-        }}
-      >
-        <Flex
-          sx={{
-            alignItems: 'center',
-            justifyContent: 'center',
-            h: 32,
-            w: 32,
-            aspectRatio: '1/1',
-          }}
-        >
-          <ControlNetImagePreview controlNet={props.controlNet} />
-        </Flex>
-        <Flex
-          sx={{
-            flexDir: 'column',
-            gap: 2,
-            w: 'full',
-            justifyContent: 'space-between',
-          }}
-        >
-          <ParamControlNetWeight
-            controlNetId={controlNetId}
-            weight={weight}
-            mini
-          />
-          <ParamControlNetBeginEnd
-            controlNetId={controlNetId}
-            beginStepPct={beginStepPct}
-            endStepPct={endStepPct}
-            mini
-          />
-          <Flex
-            sx={{
-              justifyContent: 'space-between',
-            }}
-          >
-            <FormControl>
-              <HStack>
-                <Checkbox
-                  isChecked={isEnabled}
-                  onChange={handleToggleIsEnabled}
-                />
-                <FormLabel>Enabled</FormLabel>
-              </HStack>
-            </FormControl>
-            <FormControl>
-              <HStack>
-                <Checkbox
-                  isChecked={isControlImageProcessed}
-                  onChange={handleToggleIsPreprocessed}
-                />
-                <FormLabel>Preprocessed</FormLabel>
-              </HStack>
-            </FormControl>
-          </Flex>
-        </Flex>
-      </Flex>
-    </Flex>
-  );
-};
-
-export default memo(ControlNet);

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

@@ -1,12 +1,12 @@
 import IAIButton from 'common/components/IAIButton';
 import { memo, useCallback } from 'react';
-import { ControlNet } from '../store/controlNetSlice';
+import { ControlNetConfig } from '../store/controlNetSlice';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { controlNetImageProcessed } from '../store/actions';
 import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
 
 type Props = {
-  controlNet: ControlNet;
+  controlNet: ControlNetConfig;
 };
 
 const ControlNetPreprocessButton = (props: Props) => {

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

@@ -1,58 +0,0 @@
-import { useAppDispatch } from 'app/store/storeHooks';
-import IAISlider from 'common/components/IAISlider';
-import {
-  controlNetBeginStepPctChanged,
-  controlNetEndStepPctChanged,
-} from 'features/controlNet/store/controlNetSlice';
-import { memo, useCallback } from 'react';
-
-type ParamControlNetBeginStepPctProps = {
-  controlNetId: string;
-  beginStepPct: number;
-};
-
-const ParamControlNetBeginStepPct = (
-  props: ParamControlNetBeginStepPctProps
-) => {
-  const { controlNetId, beginStepPct } = props;
-  const dispatch = useAppDispatch();
-
-  const handleBeginStepPctChanged = useCallback(
-    (beginStepPct: number) => {
-      dispatch(controlNetBeginStepPctChanged({ controlNetId, beginStepPct }));
-    },
-    [controlNetId, dispatch]
-  );
-
-  const handleBeginStepPctReset = useCallback(() => {
-    dispatch(controlNetBeginStepPctChanged({ controlNetId, beginStepPct: 0 }));
-  }, [controlNetId, dispatch]);
-
-  const handleEndStepPctChanged = useCallback(
-    (endStepPct: number) => {
-      dispatch(controlNetEndStepPctChanged({ controlNetId, endStepPct }));
-    },
-    [controlNetId, dispatch]
-  );
-
-  const handleEndStepPctReset = useCallback(() => {
-    dispatch(controlNetEndStepPctChanged({ controlNetId, endStepPct: 0 }));
-  }, [controlNetId, dispatch]);
-
-  return (
-    <IAISlider
-      label="Begin Step %"
-      value={beginStepPct}
-      onChange={handleBeginStepPctChanged}
-      withInput
-      withReset
-      handleReset={handleBeginStepPctReset}
-      withSliderMarks
-      min={0}
-      max={1}
-      step={0.01}
-    />
-  );
-};
-
-export default memo(ParamControlNetBeginStepPct);

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

@@ -1,42 +0,0 @@
-import { useAppDispatch } from 'app/store/storeHooks';
-import IAISlider from 'common/components/IAISlider';
-import { controlNetEndStepPctChanged } from 'features/controlNet/store/controlNetSlice';
-import { memo, useCallback } from 'react';
-
-type ParamControlNetEndStepPctProps = {
-  controlNetId: string;
-  endStepPct: number;
-};
-
-const ParamControlNetEndStepPct = (props: ParamControlNetEndStepPctProps) => {
-  const { controlNetId, endStepPct } = props;
-  const dispatch = useAppDispatch();
-
-  const handleEndStepPctChanged = useCallback(
-    (endStepPct: number) => {
-      dispatch(controlNetEndStepPctChanged({ controlNetId, endStepPct }));
-    },
-    [controlNetId, dispatch]
-  );
-
-  const handleEndStepPctReset = () => {
-    dispatch(controlNetEndStepPctChanged({ controlNetId, endStepPct: 0 }));
-  };
-
-  return (
-    <IAISlider
-      label="End Step %"
-      value={endStepPct}
-      onChange={handleEndStepPctChanged}
-      withInput
-      withReset
-      handleReset={handleEndStepPctReset}
-      withSliderMarks
-      min={0}
-      max={1}
-      step={0.01}
-    />
-  );
-};
-
-export default memo(ParamControlNetEndStepPct);

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

@@ -13,7 +13,7 @@ const ParamControlNetIsEnabled = (props: ParamControlNetIsEnabledProps) => {
   const dispatch = useAppDispatch();
 
   const handleIsEnabledChanged = useCallback(() => {
-    dispatch(controlNetToggled(controlNetId));
+    dispatch(controlNetToggled({ controlNetId }));
   }, [dispatch, controlNetId]);
 
   return (

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

@@ -3,7 +3,7 @@ import IAIFullCheckbox from 'common/components/IAIFullCheckbox';
 import IAISwitch from 'common/components/IAISwitch';
 import {
   controlNetToggled,
-  isControlNetImageProcessedToggled,
+  isControlNetImagePreprocessedToggled,
 } from 'features/controlNet/store/controlNetSlice';
 import { memo, useCallback } from 'react';
 
@@ -18,7 +18,7 @@ const ParamControlNetIsEnabled = (props: ParamControlNetIsEnabledProps) => {
 
   const handleIsControlImageProcessedToggled = useCallback(() => {
     dispatch(
-      isControlNetImageProcessedToggled({
+      isControlNetImagePreprocessedToggled({
         controlNetId,
       })
     );

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

@@ -3,8 +3,8 @@ import IAICustomSelect from 'common/components/IAICustomSelect';
 import {
   CONTROLNET_MODELS,
   ControlNetModel,
-  controlNetModelChanged,
-} from 'features/controlNet/store/controlNetSlice';
+} from 'features/controlNet/store/constants';
+import { controlNetModelChanged } from 'features/controlNet/store/controlNetSlice';
 import { memo, useCallback } from 'react';
 
 type ParamIsControlNetModelProps = {