feat: Add ControlNet Resize Mode to Linear UI

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

@@ -24,6 +24,7 @@ import ParamControlNetShouldAutoConfig from './ParamControlNetShouldAutoConfig';
 import ParamControlNetBeginEnd from './parameters/ParamControlNetBeginEnd';
 import ParamControlNetControlMode from './parameters/ParamControlNetControlMode';
 import ParamControlNetProcessorSelect from './parameters/ParamControlNetProcessorSelect';
+import ParamControlNetResizeMode from './parameters/ParamControlNetResizeMode';
 
 type ControlNetProps = {
   controlNetId: string;
@@ -151,7 +152,7 @@ const ControlNet = (props: ControlNetProps) => {
           />
         )}
       </Flex>
-      <Flex sx={{ w: 'full', flexDirection: 'column' }}>
+      <Flex sx={{ w: 'full', flexDirection: 'column', gap: 2 }}>
         <Flex sx={{ gap: 4, w: 'full', alignItems: 'center' }}>
           <Flex
             sx={{
@@ -183,9 +184,8 @@ const ControlNet = (props: ControlNetProps) => {
             </Flex>
           )}
         </Flex>
-        <Box mt={2}>
+        <ParamControlNetControlMode controlNetId={controlNetId} />
-          <ParamControlNetControlMode controlNetId={controlNetId} />
+        <ParamControlNetResizeMode controlNetId={controlNetId} />
-        </Box>
         <ParamControlNetProcessorSelect controlNetId={controlNetId} />
       </Flex>
 

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

@@ -0,0 +1,62 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from 'app/store/store';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAIMantineSelect from 'common/components/IAIMantineSelect';
+import {
+  ResizeModes,
+  controlNetResizeModeChanged,
+} from 'features/controlNet/store/controlNetSlice';
+import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+type ParamControlNetResizeModeProps = {
+  controlNetId: string;
+};
+
+const RESIZE_MODE_DATA = [
+  { label: 'Resize', value: 'just_resize' },
+  { label: 'Crop', value: 'crop_resize' },
+  { label: 'Fill', value: 'fill_resize' },
+];
+
+export default function ParamControlNetResizeMode(
+  props: ParamControlNetResizeModeProps
+) {
+  const { controlNetId } = props;
+  const dispatch = useAppDispatch();
+  const selector = useMemo(
+    () =>
+      createSelector(
+        stateSelector,
+        ({ controlNet }) => {
+          const { resizeMode, isEnabled } =
+            controlNet.controlNets[controlNetId];
+          return { resizeMode, isEnabled };
+        },
+        defaultSelectorOptions
+      ),
+    [controlNetId]
+  );
+
+  const { resizeMode, isEnabled } = useAppSelector(selector);
+
+  const { t } = useTranslation();
+
+  const handleResizeModeChange = useCallback(
+    (resizeMode: ResizeModes) => {
+      dispatch(controlNetResizeModeChanged({ controlNetId, resizeMode }));
+    },
+    [controlNetId, dispatch]
+  );
+
+  return (
+    <IAIMantineSelect
+      disabled={!isEnabled}
+      label="Resize Mode"
+      data={RESIZE_MODE_DATA}
+      value={String(resizeMode)}
+      onChange={handleResizeModeChange}
+    />
+  );
+}

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

@@ -3,6 +3,7 @@ import { RootState } from 'app/store/store';
 import { ControlNetModelParam } from 'features/parameters/types/parameterSchemas';
 import { cloneDeep, forEach } from 'lodash-es';
 import { imagesApi } from 'services/api/endpoints/images';
+import { components } from 'services/api/schema';
 import { isAnySessionRejected } from 'services/api/thunks/session';
 import { appSocketInvocationError } from 'services/events/actions';
 import { controlNetImageProcessed } from './actions';
@@ -16,11 +17,13 @@ import {
   RequiredControlNetProcessorNode,
 } from './types';
 
-export type ControlModes =
+export type ControlModes = NonNullable<
-  | 'balanced'
+  components['schemas']['ControlNetInvocation']['control_mode']
-  | 'more_prompt'
+>;
-  | 'more_control'
+
-  | 'unbalanced';
+export type ResizeModes = NonNullable<
+  components['schemas']['ControlNetInvocation']['resize_mode']
+>;
 
 export const initialControlNet: Omit<ControlNetConfig, 'controlNetId'> = {
   isEnabled: true,
@@ -29,6 +32,7 @@ export const initialControlNet: Omit<ControlNetConfig, 'controlNetId'> = {
   beginStepPct: 0,
   endStepPct: 1,
   controlMode: 'balanced',
+  resizeMode: 'just_resize',
   controlImage: null,
   processedControlImage: null,
   processorType: 'canny_image_processor',
@@ -45,6 +49,7 @@ export type ControlNetConfig = {
   beginStepPct: number;
   endStepPct: number;
   controlMode: ControlModes;
+  resizeMode: ResizeModes;
   controlImage: string | null;
   processedControlImage: string | null;
   processorType: ControlNetProcessorType;
@@ -215,6 +220,16 @@ export const controlNetSlice = createSlice({
       const { controlNetId, controlMode } = action.payload;
       state.controlNets[controlNetId].controlMode = controlMode;
     },
+    controlNetResizeModeChanged: (
+      state,
+      action: PayloadAction<{
+        controlNetId: string;
+        resizeMode: ResizeModes;
+      }>
+    ) => {
+      const { controlNetId, resizeMode } = action.payload;
+      state.controlNets[controlNetId].resizeMode = resizeMode;
+    },
     controlNetProcessorParamsChanged: (
       state,
       action: PayloadAction<{
@@ -342,6 +357,7 @@ export const {
   controlNetBeginStepPctChanged,
   controlNetEndStepPctChanged,
   controlNetControlModeChanged,
+  controlNetResizeModeChanged,
   controlNetProcessorParamsChanged,
   controlNetProcessorTypeChanged,
   controlNetReset,

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

@@ -48,6 +48,7 @@ export const addControlNetToLinearGraph = (
           beginStepPct,
           endStepPct,
           controlMode,
+          resizeMode,
           model,
           processorType,
           weight,
@@ -60,6 +61,7 @@ export const addControlNetToLinearGraph = (
           begin_step_percent: beginStepPct,
           end_step_percent: endStepPct,
           control_mode: controlMode,
+          resize_mode: resizeMode,
           control_model: model as ControlNetInvocation['control_model'],
           control_weight: weight,
         };

invokeai/frontend/web/src/services/api/schema.d.ts

@@ -167,7 +167,7 @@ export type paths = {
   "/api/v1/images/clear-intermediates": {
     /**
      * Clear Intermediates 
-     * @description Clears first 100 intermediates
+     * @description Clears all intermediates
      */
     post: operations["clear_intermediates"];
   };
@@ -800,6 +800,13 @@ export type components = {
        * @enum {string}
        */
       control_mode?: "balanced" | "more_prompt" | "more_control" | "unbalanced";
+      /**
+       * Resize Mode 
+       * @description The resize mode to use 
+       * @default just_resize 
+       * @enum {string}
+       */
+      resize_mode?: "just_resize" | "crop_resize" | "fill_resize" | "just_resize_simple";
     };
     /**
      * ControlNetInvocation 
@@ -859,6 +866,13 @@ export type components = {
        * @enum {string}
        */
       control_mode?: "balanced" | "more_prompt" | "more_control" | "unbalanced";
+      /**
+       * Resize Mode 
+       * @description The resize mode used 
+       * @default just_resize 
+       * @enum {string}
+       */
+      resize_mode?: "just_resize" | "crop_resize" | "fill_resize" | "just_resize_simple";
     };
     /** ControlNetModelConfig */
     ControlNetModelConfig: {
@@ -5324,11 +5338,11 @@ export type components = {
       image?: components["schemas"]["ImageField"];
     };
     /**
-     * StableDiffusion2ModelFormat 
+     * StableDiffusion1ModelFormat 
      * @description An enumeration. 
      * @enum {string}
      */
-    StableDiffusion2ModelFormat: "checkpoint" | "diffusers";
+    StableDiffusion1ModelFormat: "checkpoint" | "diffusers";
     /**
      * StableDiffusionXLModelFormat 
      * @description An enumeration. 
@@ -5336,11 +5350,11 @@ export type components = {
      */
     StableDiffusionXLModelFormat: "checkpoint" | "diffusers";
     /**
-     * StableDiffusion1ModelFormat 
+     * StableDiffusion2ModelFormat 
      * @description An enumeration. 
      * @enum {string}
      */
-    StableDiffusion1ModelFormat: "checkpoint" | "diffusers";
+    StableDiffusion2ModelFormat: "checkpoint" | "diffusers";
   };
   responses: never;
   parameters: never;
@@ -6125,7 +6139,7 @@ export type operations = {
   };
   /**
    * Clear Intermediates 
-   * @description Clears first 100 intermediates
+   * @description Clears all intermediates
    */
   clear_intermediates: {
     responses: {