feat(ui): support negative controlnet weights

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

@@ -1,4 +1,5 @@
 import {
+  ChakraProps,
   FormControl,
   FormControlProps,
   FormLabel,
@@ -39,6 +40,11 @@ import { BiReset } from 'react-icons/bi';
 import IAIIconButton, { IAIIconButtonProps } from './IAIIconButton';
 import { roundDownToMultiple } from 'common/util/roundDownToMultiple';
 
+const SLIDER_MARK_STYLES: ChakraProps['sx'] = {
+  mt: 1.5,
+  fontSize: '2xs',
+};
+
 export type IAIFullSliderProps = {
   label?: string;
   value: number;
@@ -57,6 +63,7 @@ export type IAIFullSliderProps = {
   hideTooltip?: boolean;
   isCompact?: boolean;
   isDisabled?: boolean;
+  sliderMarks?: number[];
   sliderFormControlProps?: FormControlProps;
   sliderFormLabelProps?: FormLabelProps;
   sliderMarkProps?: Omit<SliderMarkProps, 'value'>;
@@ -88,6 +95,7 @@ const IAISlider = (props: IAIFullSliderProps) => {
     hideTooltip = false,
     isCompact = false,
     isDisabled = false,
+    sliderMarks,
     handleReset,
     sliderFormControlProps,
     sliderFormLabelProps,
@@ -198,14 +206,14 @@ const IAISlider = (props: IAIFullSliderProps) => {
           isDisabled={isDisabled}
           {...rest}
         >
-          {withSliderMarks && (
+          {withSliderMarks && !sliderMarks && (
             <>
               <SliderMark
                 value={min}
                 sx={{
                   insetInlineStart: '0 !important',
                   insetInlineEnd: 'unset !important',
-                  mt: 1.5,
+                  ...SLIDER_MARK_STYLES,
                 }}
                 {...sliderMarkProps}
               >
@@ -216,7 +224,7 @@ const IAISlider = (props: IAIFullSliderProps) => {
                 sx={{
                   insetInlineStart: 'unset !important',
                   insetInlineEnd: '0 !important',
-                  mt: 1.5,
+                  ...SLIDER_MARK_STYLES,
                 }}
                 {...sliderMarkProps}
               >
@@ -224,6 +232,56 @@ const IAISlider = (props: IAIFullSliderProps) => {
               </SliderMark>
             </>
           )}
+          {withSliderMarks && sliderMarks && (
+            <>
+              {sliderMarks.map((m, i) => {
+                if (i === 0) {
+                  return (
+                    <SliderMark
+                      key={m}
+                      value={m}
+                      sx={{
+                        insetInlineStart: '0 !important',
+                        insetInlineEnd: 'unset !important',
+                        ...SLIDER_MARK_STYLES,
+                      }}
+                      {...sliderMarkProps}
+                    >
+                      {m}
+                    </SliderMark>
+                  );
+                } else if (i === sliderMarks.length - 1) {
+                  return (
+                    <SliderMark
+                      key={m}
+                      value={m}
+                      sx={{
+                        insetInlineStart: 'unset !important',
+                        insetInlineEnd: '0 !important',
+                        ...SLIDER_MARK_STYLES,
+                      }}
+                      {...sliderMarkProps}
+                    >
+                      {m}
+                    </SliderMark>
+                  );
+                } else {
+                  return (
+                    <SliderMark
+                      key={m}
+                      value={m}
+                      sx={{
+                        ...SLIDER_MARK_STYLES,
+                      }}
+                      {...sliderMarkProps}
+                    >
+                      {m}
+                    </SliderMark>
+                  );
+                }
+              })}
+            </>
+          )}
 
           <SliderTrack {...sliderTrackProps}>
             <SliderFilledTrack />

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

@@ -143,7 +143,7 @@ const ControlNet = (props: ControlNetProps) => {
                 flexDir: 'column',
                 gap: 2,
                 w: 'full',
-                h: 24,
+                h: isExpanded ? 28 : 24,
                 paddingInlineStart: 1,
                 paddingInlineEnd: isExpanded ? 1 : 0,
                 pb: 2,
@@ -153,13 +153,13 @@ const ControlNet = (props: ControlNetProps) => {
               <ParamControlNetWeight
                 controlNetId={controlNetId}
                 weight={weight}
-                mini
+                mini={!isExpanded}
               />
               <ParamControlNetBeginEnd
                 controlNetId={controlNetId}
                 beginStepPct={beginStepPct}
                 endStepPct={endStepPct}
-                mini
+                mini={!isExpanded}
               />
             </Flex>
             {!isExpanded && (

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

@@ -1,4 +1,5 @@
 import {
+  ChakraProps,
   FormControl,
   FormLabel,
   HStack,
@@ -10,14 +11,19 @@ import {
   Tooltip,
 } from '@chakra-ui/react';
 import { useAppDispatch } from 'app/store/storeHooks';
-import IAIIconButton from 'common/components/IAIIconButton';
 import {
   controlNetBeginStepPctChanged,
   controlNetEndStepPctChanged,
 } from 'features/controlNet/store/controlNetSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { BiReset } from 'react-icons/bi';
+
+const SLIDER_MARK_STYLES: ChakraProps['sx'] = {
+  mt: 1.5,
+  fontSize: '2xs',
+  fontWeight: '500',
+  color: 'base.400',
+};
 
 type Props = {
   controlNetId: string;
@@ -29,7 +35,7 @@ type Props = {
 const formatPct = (v: number) => `${Math.round(v * 100)}%`;
 
 const ParamControlNetBeginEnd = (props: Props) => {
-  const { controlNetId, beginStepPct, endStepPct, mini = false } = props;
+  const { controlNetId, beginStepPct, mini = false, endStepPct } = props;
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
@@ -75,12 +81,9 @@ const ParamControlNetBeginEnd = (props: Props) => {
               <RangeSliderMark
                 value={0}
                 sx={{
-                  fontSize: 'xs',
-                  fontWeight: '500',
-                  color: 'base.200',
                   insetInlineStart: '0 !important',
                   insetInlineEnd: 'unset !important',
-                  mt: 1.5,
+                  ...SLIDER_MARK_STYLES,
                 }}
               >
                 0%
@@ -88,10 +91,7 @@ const ParamControlNetBeginEnd = (props: Props) => {
               <RangeSliderMark
                 value={0.5}
                 sx={{
-                  fontSize: 'xs',
+                  ...SLIDER_MARK_STYLES,
-                  fontWeight: '500',
-                  color: 'base.200',
-                  mt: 1.5,
                 }}
               >
                 50%
@@ -99,12 +99,9 @@ const ParamControlNetBeginEnd = (props: Props) => {
               <RangeSliderMark
                 value={1}
                 sx={{
-                  fontSize: 'xs',
-                  fontWeight: '500',
-                  color: 'base.200',
                   insetInlineStart: 'unset !important',
                   insetInlineEnd: '0 !important',
-                  mt: 1.5,
+                  ...SLIDER_MARK_STYLES,
                 }}
               >
                 100%
@@ -112,16 +109,6 @@ const ParamControlNetBeginEnd = (props: Props) => {
             </>
           )}
         </RangeSlider>
-
-        {!mini && (
-          <IAIIconButton
-            size="sm"
-            aria-label={t('accessibility.reset')}
-            tooltip={t('accessibility.reset')}
-            icon={<BiReset />}
-            onClick={handleStepPctReset}
-          />
-        )}
       </HStack>
     </FormControl>
   );

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

@@ -20,36 +20,17 @@ const ParamControlNetWeight = (props: ParamControlNetWeightProps) => {
     [controlNetId, dispatch]
   );
 
-  const handleWeightReset = () => {
-    dispatch(controlNetWeightChanged({ controlNetId, weight: 1 }));
-  };
-
-  if (mini) {
   return (
     <IAISlider
       label={'Weight'}
-        sliderFormLabelProps={{ pb: 1 }}
+      sliderFormLabelProps={{ pb: 2 }}
       value={weight}
       onChange={handleWeightChanged}
-        min={0}
+      min={-1}
-        max={1}
-        step={0.01}
-      />
-    );
-  }
-
-  return (
-    <IAISlider
-      label="Weight"
-      value={weight}
-      onChange={handleWeightChanged}
-      withInput
-      withReset
-      handleReset={handleWeightReset}
-      withSliderMarks
-      min={0}
       max={1}
       step={0.01}
+      withSliderMarks={!mini}
+      sliderMarks={[-1, 0, 1]}
     />
   );
 };

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

@@ -54,6 +54,7 @@ const CannyProcessor = (props: CannyProcessorProps) => {
         min={0}
         max={255}
         withInput
+        withSliderMarks
       />
       <IAISlider
         label="High Threshold"
@@ -64,6 +65,7 @@ const CannyProcessor = (props: CannyProcessorProps) => {
         min={0}
         max={255}
         withInput
+        withSliderMarks
       />
     </ProcessorWrapper>
   );

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

@@ -93,6 +93,7 @@ const ContentShuffleProcessor = (props: Props) => {
         min={0}
         max={4096}
         withInput
+        withSliderMarks
       />
       <IAISlider
         label="Image Resolution"
@@ -103,6 +104,7 @@ const ContentShuffleProcessor = (props: Props) => {
         min={0}
         max={4096}
         withInput
+        withSliderMarks
       />
       <IAISlider
         label="W"
@@ -113,6 +115,7 @@ const ContentShuffleProcessor = (props: Props) => {
         min={0}
         max={4096}
         withInput
+        withSliderMarks
       />
       <IAISlider
         label="H"
@@ -123,6 +126,7 @@ const ContentShuffleProcessor = (props: Props) => {
         min={0}
         max={4096}
         withInput
+        withSliderMarks
       />
       <IAISlider
         label="F"
@@ -133,6 +137,7 @@ const ContentShuffleProcessor = (props: Props) => {
         min={0}
         max={4096}
         withInput
+        withSliderMarks
       />
     </ProcessorWrapper>
   );

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

@@ -65,6 +65,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
         min={0}
         max={4096}
         withInput
+        withSliderMarks
       />
       <IAISlider
         label="Image Resolution"
@@ -75,6 +76,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
         min={0}
         max={4096}
         withInput
+        withSliderMarks
       />
       <IAISwitch
         label="Scribble"

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

@@ -54,6 +54,7 @@ const LineartAnimeProcessor = (props: Props) => {
         min={0}
         max={4096}
         withInput
+        withSliderMarks
       />
       <IAISlider
         label="Image Resolution"
@@ -64,6 +65,7 @@ const LineartAnimeProcessor = (props: Props) => {
         min={0}
         max={4096}
         withInput
+        withSliderMarks
       />
     </ProcessorWrapper>
   );

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

@@ -62,6 +62,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
         min={0}
         max={4096}
         withInput
+        withSliderMarks
       />
       <IAISlider
         label="Image Resolution"
@@ -72,6 +73,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
         min={0}
         max={4096}
         withInput
+        withSliderMarks
       />
       <IAISwitch
         label="Coarse"

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

@@ -50,6 +50,7 @@ const MediapipeFaceProcessor = (props: Props) => {
         min={1}
         max={20}
         withInput
+        withSliderMarks
       />
       <IAISlider
         label="Min Confidence"
@@ -61,6 +62,7 @@ const MediapipeFaceProcessor = (props: Props) => {
         max={1}
         step={0.01}
         withInput
+        withSliderMarks
       />
     </ProcessorWrapper>
   );

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

@@ -51,6 +51,7 @@ const MidasDepthProcessor = (props: Props) => {
         max={20}
         step={0.01}
         withInput
+        withSliderMarks
       />
       <IAISlider
         label="bg_th"
@@ -62,6 +63,7 @@ const MidasDepthProcessor = (props: Props) => {
         max={20}
         step={0.01}
         withInput
+        withSliderMarks
       />
     </ProcessorWrapper>
   );

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

@@ -76,6 +76,7 @@ const MlsdImageProcessor = (props: Props) => {
         min={0}
         max={4096}
         withInput
+        withSliderMarks
       />
       <IAISlider
         label="Image Resolution"
@@ -86,6 +87,7 @@ const MlsdImageProcessor = (props: Props) => {
         min={0}
         max={4096}
         withInput
+        withSliderMarks
       />
       <IAISlider
         label="W"
@@ -97,6 +99,7 @@ const MlsdImageProcessor = (props: Props) => {
         max={1}
         step={0.01}
         withInput
+        withSliderMarks
       />
       <IAISlider
         label="H"
@@ -108,6 +111,7 @@ const MlsdImageProcessor = (props: Props) => {
         max={1}
         step={0.01}
         withInput
+        withSliderMarks
       />
     </ProcessorWrapper>
   );

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

@@ -54,6 +54,7 @@ const NormalBaeProcessor = (props: Props) => {
         min={0}
         max={4096}
         withInput
+        withSliderMarks
       />
       <IAISlider
         label="Image Resolution"
@@ -64,6 +65,7 @@ const NormalBaeProcessor = (props: Props) => {
         min={0}
         max={4096}
         withInput
+        withSliderMarks
       />
     </ProcessorWrapper>
   );

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

@@ -62,6 +62,7 @@ const OpenposeProcessor = (props: Props) => {
         min={0}
         max={4096}
         withInput
+        withSliderMarks
       />
       <IAISlider
         label="Image Resolution"
@@ -72,6 +73,7 @@ const OpenposeProcessor = (props: Props) => {
         min={0}
         max={4096}
         withInput
+        withSliderMarks
       />
       <IAISwitch
         label="Hand and Face"

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

@@ -69,6 +69,7 @@ const PidiProcessor = (props: Props) => {
         min={0}
         max={4096}
         withInput
+        withSliderMarks
       />
       <IAISlider
         label="Image Resolution"
@@ -79,6 +80,7 @@ const PidiProcessor = (props: Props) => {
         min={0}
         max={4096}
         withInput
+        withSliderMarks
       />
       <IAISwitch
         label="Scribble"

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

@@ -23,7 +23,7 @@ type ControlNetProcessorsDict = Record<
  *
  * TODO: Generate from the OpenAPI schema
  */
-export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
+export const CONTROLNET_PROCESSORS = {
   none: {
     type: 'none',
     label: 'none',
@@ -129,7 +129,7 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
   },
   normalbae_image_processor: {
     type: 'normalbae_image_processor',
-    label: 'NormalBae',
+    label: 'Normal BAE',
     description: '',
     default: {
       id: 'normalbae_image_processor',
@@ -208,7 +208,7 @@ export const CONTROLNET_MODELS: Record<string, ControlNetModel> = {
   },
   'lllyasviel/control_v11p_sd15_seg': {
     type: 'lllyasviel/control_v11p_sd15_seg',
-    label: 'Segment Anything',
+    label: 'Segmentation',
   },
   'lllyasviel/control_v11p_sd15_lineart': {
     type: 'lllyasviel/control_v11p_sd15_lineart',

invokeai/frontend/web/src/theme/components/slider.ts

@@ -30,7 +30,7 @@ const invokeAIMark = defineStyle((_props) => {
   return {
     fontSize: 'xs',
     fontWeight: '500',
-    color: 'base.200',
+    color: 'base.400',
     mt: 2,
     insetInlineStart: 'unset',
   };