resolve conflicts

2024-08-30 20:32:17 +00:00 · 2023-06-10 10:13:54 -04:00
parent a87d52a389 30f20b55d5
commit 3d2ff7755e
26 changed files with 535 additions and 217 deletions
--- a/invokeai/frontend/install/model_install.py
+++ b/invokeai/frontend/install/model_install.py
@ -28,7 +28,7 @@ import torch
 from npyscreen import widget
 from omegaconf import OmegaConf

-import invokeai.backend.util.logging as logger
+from invokeai.backend.util.logging import InvokeAILogger

 from invokeai.backend.install.model_install_backend import (
    Dataset_path,
@ -939,6 +939,7 @@ def main():
    if opt.full_precision:
        invoke_args.extend(['--precision','float32'])
    config.parse_args(invoke_args)
+    logger = InvokeAILogger().getLogger(config=config)

    if not (config.root_dir / config.conf_path.parent).exists():
        logger.info(
--- a/invokeai/frontend/web/src/app/components/App.tsx
+++ b/invokeai/frontend/web/src/app/components/App.tsx
@ -22,6 +22,7 @@ import { APP_HEIGHT, APP_WIDTH } from 'theme/util/constants';
 import GlobalHotkeys from './GlobalHotkeys';
 import Toaster from './Toaster';
 import DeleteImageModal from 'features/gallery/components/DeleteImageModal';
+import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';

 const DEFAULT_CONFIG = {};

@ -66,10 +67,17 @@ const App = ({
      setIsReady(true);
    }

+    if (isApplicationReady) {
+      // TODO: This is a jank fix for canvas not filling the screen on first load
+      setTimeout(() => {
+        dispatch(requestCanvasRescale());
+      }, 200);
+    }
+
    return () => {
      setIsReady && setIsReady(false);
    };
-  }, [isApplicationReady, setIsReady]);
+  }, [dispatch, isApplicationReady, setIsReady]);

  return (
    <>
--- a/invokeai/frontend/web/src/app/components/ImageDnd/ImageDndContext.tsx
+++ b/invokeai/frontend/web/src/app/components/ImageDnd/ImageDndContext.tsx
@ -40,11 +40,11 @@ const ImageDndContext = (props: ImageDndContextProps) => {
  );

  const mouseSensor = useSensor(MouseSensor, {
-    activationConstraint: { delay: 250, tolerance: 5 },
+    activationConstraint: { delay: 150, tolerance: 5 },
  });

  const touchSensor = useSensor(TouchSensor, {
-    activationConstraint: { delay: 250, tolerance: 5 },
+    activationConstraint: { delay: 150, tolerance: 5 },
  });
  // TODO: Use KeyboardSensor - needs composition of multiple collisionDetection algos
  // Alternatively, fix `rectIntersection` collection detection to work with the drag overlay
--- a/invokeai/frontend/web/src/common/components/IAICustomSelect.tsx
+++ b/invokeai/frontend/web/src/common/components/IAICustomSelect.tsx
@ -2,7 +2,6 @@ import { CheckIcon, ChevronUpIcon } from '@chakra-ui/icons';
 import {
  Box,
  Flex,
-  FlexProps,
  FormControl,
  FormControlProps,
  FormLabel,
@ -16,6 +15,7 @@ import {
 } from '@chakra-ui/react';
 import { autoUpdate, offset, shift, useFloating } from '@floating-ui/react-dom';
 import { useSelect } from 'downshift';
+import { isString } from 'lodash-es';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';

 import { memo, useMemo } from 'react';
@ -23,15 +23,19 @@ import { getInputOutlineStyles } from 'theme/util/getInputOutlineStyles';

 export type ItemTooltips = { [key: string]: string };

+export type IAICustomSelectOption = {
+  value: string;
+  label: string;
+  tooltip?: string;
+};
+
 type IAICustomSelectProps = {
  label?: string;
-  items: string[];
-  itemTooltips?: ItemTooltips;
-  selectedItem: string;
-  setSelectedItem: (v: string | null | undefined) => void;
+  value: string;
+  data: IAICustomSelectOption[] | string[];
+  onChange: (v: string) => void;
  withCheckIcon?: boolean;
  formControlProps?: FormControlProps;
-  buttonProps?: FlexProps;
  tooltip?: string;
  tooltipProps?: Omit<TooltipProps, 'children'>;
  ellipsisPosition?: 'start' | 'end';
@ -40,18 +44,33 @@ type IAICustomSelectProps = {
 const IAICustomSelect = (props: IAICustomSelectProps) => {
  const {
    label,
-    items,
-    itemTooltips,
-    setSelectedItem,
-    selectedItem,
    withCheckIcon,
    formControlProps,
    tooltip,
-    buttonProps,
    tooltipProps,
    ellipsisPosition = 'end',
+    data,
+    value,
+    onChange,
  } = props;

+  const values = useMemo(() => {
+    return data.map<IAICustomSelectOption>((v) => {
+      if (isString(v)) {
+        return { value: v, label: v };
+      }
+      return v;
+    });
+  }, [data]);
+
+  const stringValues = useMemo(() => {
+    return values.map((v) => v.value);
+  }, [values]);
+
+  const valueData = useMemo(() => {
+    return values.find((v) => v.value === value);
+  }, [values, value]);
+
  const {
    isOpen,
    getToggleButtonProps,
@ -60,10 +79,11 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
    highlightedIndex,
    getItemProps,
  } = useSelect({
-    items,
-    selectedItem,
-    onSelectedItemChange: ({ selectedItem: newSelectedItem }) =>
-      setSelectedItem(newSelectedItem),
+    items: stringValues,
+    selectedItem: value,
+    onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {
+      newSelectedItem && onChange(newSelectedItem);
+    },
  });

  const { refs, floatingStyles } = useFloating<HTMLButtonElement>({
@ -93,8 +113,7 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
      )}
      <Tooltip label={tooltip} {...tooltipProps}>
        <Flex
-          {...getToggleButtonProps({ ref: refs.setReference })}
-          {...buttonProps}
+          {...getToggleButtonProps({ ref: refs.reference })}
          sx={{
            alignItems: 'center',
            userSelect: 'none',
@ -119,7 +138,7 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
              direction: labelTextDirection,
            }}
          >
-            {selectedItem}
+            {valueData?.label}
          </Text>
          <ChevronUpIcon
            sx={{
@ -135,7 +154,7 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
        {isOpen && (
          <List
            as={Flex}
-            ref={refs.setFloating}
+            ref={refs.floating}
            sx={{
              ...floatingStyles,
              top: 0,
@ -155,8 +174,8 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
            }}
          >
            <OverlayScrollbarsComponent>
-              {items.map((item, index) => {
-                const isSelected = selectedItem === item;
+              {values.map((v, index) => {
+                const isSelected = value === v.value;
                const isHighlighted = highlightedIndex === index;
                const fontWeight = isSelected ? 700 : 500;
                const bg = isHighlighted
@ -166,9 +185,9 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
                  : undefined;
                return (
                  <Tooltip
-                    isDisabled={!itemTooltips}
-                    key={`${item}${index}`}
-                    label={itemTooltips?.[item]}
+                    isDisabled={!v.tooltip}
+                    key={`${v.value}${index}`}
+                    label={v.tooltip}
                    hasArrow
                    placement="right"
                  >
@ -182,8 +201,7 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
                        transitionProperty: 'common',
                        transitionDuration: '0.15s',
                      }}
-                      key={`${item}${index}`}
-                      {...getItemProps({ item, index })}
+                      {...getItemProps({ item: v.value, index })}
                    >
                      {withCheckIcon ? (
                        <Grid gridTemplateColumns="1.25rem auto">
@ -198,7 +216,7 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
                                fontWeight,
                              }}
                            >
-                              {item}
+                              {v.label}
                            </Text>
                          </GridItem>
                        </Grid>
@ -210,7 +228,7 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
                            fontWeight,
                          }}
                        >
-                          {item}
+                          {v.label}
                        </Text>
                      )}
                    </ListItem>
--- a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
@ -14,7 +14,7 @@ import ImageMetadataOverlay from 'common/components/ImageMetadataOverlay';
 import { AnimatePresence } from 'framer-motion';
 import { ReactElement, SyntheticEvent, useCallback } from 'react';
 import { memo, useRef } from 'react';
-import { FaImage, FaTimes, FaUpload } from 'react-icons/fa';
+import { FaImage, FaTimes, FaUndo, FaUpload } from 'react-icons/fa';
 import { ImageDTO } from 'services/api';
 import { v4 as uuidv4 } from 'uuid';
 import IAIDropOverlay from './IAIDropOverlay';
@ -174,14 +174,13 @@ const IAIDndImage = (props: IAIDndImageProps) => {
                position: 'absolute',
                top: 0,
                right: 0,
-                p: 2,
              }}
            >
              <IAIIconButton
                size={resetIconSize}
                tooltip="Reset Image"
                aria-label="Reset Image"
-                icon={<FaTimes />}
+                icon={<FaUndo />}
                onClick={onReset}
              />
            </Box>
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx
@ -16,7 +16,6 @@ import {
  setShouldShowIntermediates,
  setShouldSnapToGrid,
 } from 'features/canvas/store/canvasSlice';
-import EmptyTempFolderButtonModal from 'features/system/components/ClearTempFolderButtonModal';
 import { isEqual } from 'lodash-es';

 import { ChangeEvent } from 'react';
@ -159,7 +158,6 @@ const IAICanvasSettingsButtonPopover = () => {
          onChange={(e) => dispatch(setShouldAntialias(e.target.checked))}
        />
        <ClearCanvasHistoryButtonModal />
-        <EmptyTempFolderButtonModal />
      </Flex>
    </IAIPopover>
  );
--- a/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts
+++ b/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts
@ -30,7 +30,10 @@ import {
 } from './canvasTypes';
 import { ImageDTO } from 'services/api';
 import { sessionCanceled } from 'services/thunks/session';
-import { setShouldUseCanvasBetaLayout } from 'features/ui/store/uiSlice';
+import {
+  setActiveTab,
+  setShouldUseCanvasBetaLayout,
+} from 'features/ui/store/uiSlice';
 import { imageUrlsReceived } from 'services/thunks/image';

 export const initialLayerState: CanvasLayerState = {
@ -857,6 +860,11 @@ export const canvasSlice = createSlice({
    builder.addCase(setShouldUseCanvasBetaLayout, (state, action) => {
      state.doesCanvasNeedScaling = true;
    });
+
+    builder.addCase(setActiveTab, (state, action) => {
+      state.doesCanvasNeedScaling = true;
+    });
+
    builder.addCase(imageUrlsReceived.fulfilled, (state, action) => {
      const { image_name, image_origin, image_url, thumbnail_url } =
        action.payload;
--- a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx
+++ b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx
@ -1,17 +1,26 @@
 import { useAppDispatch } from 'app/store/storeHooks';
-import IAICustomSelect from 'common/components/IAICustomSelect';
+import IAICustomSelect, {
+  IAICustomSelectOption,
+} from 'common/components/IAICustomSelect';
 import {
  CONTROLNET_MODELS,
-  ControlNetModel,
+  ControlNetModelName,
 } from 'features/controlNet/store/constants';
 import { controlNetModelChanged } from 'features/controlNet/store/controlNetSlice';
+import { map } from 'lodash-es';
 import { memo, useCallback } from 'react';

 type ParamControlNetModelProps = {
  controlNetId: string;
-  model: ControlNetModel;
+  model: ControlNetModelName;
 };

+const DATA: IAICustomSelectOption[] = map(CONTROLNET_MODELS, (m) => ({
+  value: m.type,
+  label: m.label,
+  tooltip: m.type,
+}));
+
 const ParamControlNetModel = (props: ParamControlNetModelProps) => {
  const { controlNetId, model } = props;
  const dispatch = useAppDispatch();
@ -19,7 +28,7 @@ const ParamControlNetModel = (props: ParamControlNetModelProps) => {
  const handleModelChanged = useCallback(
    (val: string | null | undefined) => {
      // TODO: do not cast
-      const model = val as ControlNetModel;
+      const model = val as ControlNetModelName;
      dispatch(controlNetModelChanged({ controlNetId, model }));
    },
    [controlNetId, dispatch]
@ -29,9 +38,9 @@ const ParamControlNetModel = (props: ParamControlNetModelProps) => {
    <IAICustomSelect
      tooltip={model}
      tooltipProps={{ placement: 'top', hasArrow: true }}
-      items={CONTROLNET_MODELS}
-      selectedItem={model}
-      setSelectedItem={handleModelChanged}
+      data={DATA}
+      value={model}
+      onChange={handleModelChanged}
      ellipsisPosition="start"
      withCheckIcon
    />
--- a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetProcessorSelect.tsx
+++ b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetProcessorSelect.tsx
@ -1,4 +1,6 @@
-import IAICustomSelect from 'common/components/IAICustomSelect';
+import IAICustomSelect, {
+  IAICustomSelectOption,
+} from 'common/components/IAICustomSelect';
 import { memo, useCallback } from 'react';
 import {
  ControlNetProcessorNode,
@ -7,15 +9,28 @@ import {
 import { controlNetProcessorTypeChanged } from '../../store/controlNetSlice';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { CONTROLNET_PROCESSORS } from '../../store/constants';
+import { map } from 'lodash-es';

 type ParamControlNetProcessorSelectProps = {
  controlNetId: string;
  processorNode: ControlNetProcessorNode;
 };

-const CONTROLNET_PROCESSOR_TYPES = Object.keys(
-  CONTROLNET_PROCESSORS
-) as ControlNetProcessorType[];
+const CONTROLNET_PROCESSOR_TYPES: IAICustomSelectOption[] = map(
+  CONTROLNET_PROCESSORS,
+  (p) => ({
+    value: p.type,
+    label: p.label,
+    tooltip: p.description,
+  })
+).sort((a, b) =>
+  // sort 'none' to the top
+  a.value === 'none'
+    ? -1
+    : b.value === 'none'
+    ? 1
+    : a.label.localeCompare(b.label)
+);

 const ParamControlNetProcessorSelect = (
  props: ParamControlNetProcessorSelectProps
@ -36,9 +51,9 @@ const ParamControlNetProcessorSelect = (
  return (
    <IAICustomSelect
      label="Processor"
-      items={CONTROLNET_PROCESSOR_TYPES}
-      selectedItem={processorNode.type ?? 'canny_image_processor'}
-      setSelectedItem={handleProcessorTypeChanged}
+      value={processorNode.type ?? 'canny_image_processor'}
+      data={CONTROLNET_PROCESSOR_TYPES}
+      onChange={handleProcessorTypeChanged}
      withCheckIcon
    />
  );
--- a/invokeai/frontend/web/src/features/controlNet/store/constants.ts
+++ b/invokeai/frontend/web/src/features/controlNet/store/constants.ts
@ -5,12 +5,12 @@ import {
 } from './types';

 type ControlNetProcessorsDict = Record<
-  ControlNetProcessorType,
+  string,
  {
-    type: ControlNetProcessorType;
+    type: ControlNetProcessorType | 'none';
    label: string;
    description: string;
-    default: RequiredControlNetProcessorNode;
+    default: RequiredControlNetProcessorNode | { type: 'none' };
  }
 >;

@ -23,10 +23,10 @@ type ControlNetProcessorsDict = Record<
 *
 * TODO: Generate from the OpenAPI schema
 */
-export const CONTROLNET_PROCESSORS = {
+export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
  none: {
    type: 'none',
-    label: 'None',
+    label: 'none',
    description: '',
    default: {
      type: 'none',
@ -116,7 +116,7 @@ export const CONTROLNET_PROCESSORS = {
  },
  mlsd_image_processor: {
    type: 'mlsd_image_processor',
-    label: 'MLSD',
+    label: 'M-LSD',
    description: '',
    default: {
      id: 'mlsd_image_processor',
@ -174,39 +174,84 @@ export const CONTROLNET_PROCESSORS = {
  },
 };

-export const CONTROLNET_MODELS = [
-  'lllyasviel/control_v11p_sd15_canny',
-  'lllyasviel/control_v11p_sd15_inpaint',
-  'lllyasviel/control_v11p_sd15_mlsd',
-  'lllyasviel/control_v11f1p_sd15_depth',
-  'lllyasviel/control_v11p_sd15_normalbae',
-  'lllyasviel/control_v11p_sd15_seg',
-  'lllyasviel/control_v11p_sd15_lineart',
-  'lllyasviel/control_v11p_sd15s2_lineart_anime',
-  'lllyasviel/control_v11p_sd15_scribble',
-  'lllyasviel/control_v11p_sd15_softedge',
-  'lllyasviel/control_v11e_sd15_shuffle',
-  'lllyasviel/control_v11p_sd15_openpose',
-  'lllyasviel/control_v11f1e_sd15_tile',
-  'lllyasviel/control_v11e_sd15_ip2p',
-  'CrucibleAI/ControlNetMediaPipeFace',
-];
-
-export type ControlNetModel = (typeof CONTROLNET_MODELS)[number];
-
-export const CONTROLNET_MODEL_MAP: Record<
-  ControlNetModel,
-  ControlNetProcessorType
-> = {
-  'lllyasviel/control_v11p_sd15_canny': 'canny_image_processor',
-  'lllyasviel/control_v11p_sd15_mlsd': 'mlsd_image_processor',
-  'lllyasviel/control_v11f1p_sd15_depth': 'midas_depth_image_processor',
-  'lllyasviel/control_v11p_sd15_normalbae': 'normalbae_image_processor',
-  'lllyasviel/control_v11p_sd15_lineart': 'lineart_image_processor',
-  'lllyasviel/control_v11p_sd15s2_lineart_anime':
-    'lineart_anime_image_processor',
-  'lllyasviel/control_v11p_sd15_softedge': 'hed_image_processor',
-  'lllyasviel/control_v11e_sd15_shuffle': 'content_shuffle_image_processor',
-  'lllyasviel/control_v11p_sd15_openpose': 'openpose_image_processor',
-  'CrucibleAI/ControlNetMediaPipeFace': 'mediapipe_face_processor',
+type ControlNetModel = {
+  type: string;
+  label: string;
+  description?: string;
+  defaultProcessor?: ControlNetProcessorType;
 };
+
+export const CONTROLNET_MODELS: Record<string, ControlNetModel> = {
+  'lllyasviel/control_v11p_sd15_canny': {
+    type: 'lllyasviel/control_v11p_sd15_canny',
+    label: 'Canny',
+    defaultProcessor: 'canny_image_processor',
+  },
+  'lllyasviel/control_v11p_sd15_inpaint': {
+    type: 'lllyasviel/control_v11p_sd15_inpaint',
+    label: 'Inpaint',
+  },
+  'lllyasviel/control_v11p_sd15_mlsd': {
+    type: 'lllyasviel/control_v11p_sd15_mlsd',
+    label: 'M-LSD',
+    defaultProcessor: 'mlsd_image_processor',
+  },
+  'lllyasviel/control_v11f1p_sd15_depth': {
+    type: 'lllyasviel/control_v11f1p_sd15_depth',
+    label: 'Depth',
+    defaultProcessor: 'midas_depth_image_processor',
+  },
+  'lllyasviel/control_v11p_sd15_normalbae': {
+    type: 'lllyasviel/control_v11p_sd15_normalbae',
+    label: 'Normal Map (BAE)',
+    defaultProcessor: 'normalbae_image_processor',
+  },
+  'lllyasviel/control_v11p_sd15_seg': {
+    type: 'lllyasviel/control_v11p_sd15_seg',
+    label: 'Segment Anything',
+  },
+  'lllyasviel/control_v11p_sd15_lineart': {
+    type: 'lllyasviel/control_v11p_sd15_lineart',
+    label: 'Lineart',
+    defaultProcessor: 'lineart_image_processor',
+  },
+  'lllyasviel/control_v11p_sd15s2_lineart_anime': {
+    type: 'lllyasviel/control_v11p_sd15s2_lineart_anime',
+    label: 'Lineart Anime',
+    defaultProcessor: 'lineart_anime_image_processor',
+  },
+  'lllyasviel/control_v11p_sd15_scribble': {
+    type: 'lllyasviel/control_v11p_sd15_scribble',
+    label: 'Scribble',
+  },
+  'lllyasviel/control_v11p_sd15_softedge': {
+    type: 'lllyasviel/control_v11p_sd15_softedge',
+    label: 'Soft Edge',
+    defaultProcessor: 'hed_image_processor',
+  },
+  'lllyasviel/control_v11e_sd15_shuffle': {
+    type: 'lllyasviel/control_v11e_sd15_shuffle',
+    label: 'Content Shuffle',
+    defaultProcessor: 'content_shuffle_image_processor',
+  },
+  'lllyasviel/control_v11p_sd15_openpose': {
+    type: 'lllyasviel/control_v11p_sd15_openpose',
+    label: 'Openpose',
+    defaultProcessor: 'openpose_image_processor',
+  },
+  'lllyasviel/control_v11f1e_sd15_tile': {
+    type: 'lllyasviel/control_v11f1e_sd15_tile',
+    label: 'Tile (experimental)',
+  },
+  'lllyasviel/control_v11e_sd15_ip2p': {
+    type: 'lllyasviel/control_v11e_sd15_ip2p',
+    label: 'Pix2Pix (experimental)',
+  },
+  'CrucibleAI/ControlNetMediaPipeFace': {
+    type: 'CrucibleAI/ControlNetMediaPipeFace',
+    label: 'Mediapipe Face',
+    defaultProcessor: 'mediapipe_face_processor',
+  },
+};
+
+export type ControlNetModelName = keyof typeof CONTROLNET_MODELS;
--- a/invokeai/frontend/web/src/features/controlNet/store/controlNetSlice.ts
+++ b/invokeai/frontend/web/src/features/controlNet/store/controlNetSlice.ts
@ -9,9 +9,8 @@ import {
 } from './types';
 import {
  CONTROLNET_MODELS,
-  CONTROLNET_MODEL_MAP,
  CONTROLNET_PROCESSORS,
-  ControlNetModel,
+  ControlNetModelName,
 } from './constants';
 import { controlNetImageProcessed } from './actions';
 import { imageDeleted, imageUrlsReceived } from 'services/thunks/image';
@ -21,7 +20,7 @@ import { appSocketInvocationError } from 'services/events/actions';

 export const initialControlNet: Omit<ControlNetConfig, 'controlNetId'> = {
  isEnabled: true,
-  model: CONTROLNET_MODELS[0],
+  model: CONTROLNET_MODELS['lllyasviel/control_v11p_sd15_canny'].type,
  weight: 1,
  beginStepPct: 0,
  endStepPct: 1,
@ -36,7 +35,7 @@ export const initialControlNet: Omit<ControlNetConfig, 'controlNetId'> = {
 export type ControlNetConfig = {
  controlNetId: string;
  isEnabled: boolean;
-  model: ControlNetModel;
+  model: ControlNetModelName;
  weight: number;
  beginStepPct: number;
  endStepPct: number;
@ -138,14 +137,17 @@ export const controlNetSlice = createSlice({
    },
    controlNetModelChanged: (
      state,
-      action: PayloadAction<{ controlNetId: string; model: ControlNetModel }>
+      action: PayloadAction<{
+        controlNetId: string;
+        model: ControlNetModelName;
+      }>
    ) => {
      const { controlNetId, model } = action.payload;
      state.controlNets[controlNetId].model = model;
      state.controlNets[controlNetId].processedControlImage = null;

      if (state.controlNets[controlNetId].shouldAutoConfig) {
-        const processorType = CONTROLNET_MODEL_MAP[model];
+        const processorType = CONTROLNET_MODELS[model].defaultProcessor;
        if (processorType) {
          state.controlNets[controlNetId].processorType = processorType;
          state.controlNets[controlNetId].processorNode = CONTROLNET_PROCESSORS[
@ -225,7 +227,8 @@ export const controlNetSlice = createSlice({
      if (newShouldAutoConfig) {
        // manage the processor for the user
        const processorType =
-          CONTROLNET_MODEL_MAP[state.controlNets[controlNetId].model];
+          CONTROLNET_MODELS[state.controlNets[controlNetId].model]
+            .defaultProcessor;
        if (processorType) {
          state.controlNets[controlNetId].processorType = processorType;
          state.controlNets[controlNetId].processorNode = CONTROLNET_PROCESSORS[
--- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildImageToImageGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildImageToImageGraph.ts
@ -342,7 +342,10 @@ export const buildImageToImageGraph = (state: RootState): Graph => {
    });
  }

-  if (shouldFitToWidthHeight) {
+  if (
+    shouldFitToWidthHeight &&
+    (initialImage.width !== width || initialImage.height !== height)
+  ) {
    // The init image needs to be resized to the specified width and height before being passed to `IMAGE_TO_LATENTS`

    // Create a resize node, explicitly setting its image
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamScheduler.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamScheduler.tsx
@ -14,9 +14,11 @@ const selector = createSelector(
  (ui, generation) => {
    // TODO: DPMSolverSinglestepScheduler is fixed in https://github.com/huggingface/diffusers/pull/3413
    // but we need to wait for the next release before removing this special handling.
-    const allSchedulers = ui.schedulers.filter((scheduler) => {
-      return !['dpmpp_2s'].includes(scheduler);
-    });
+    const allSchedulers = ui.schedulers
+      .filter((scheduler) => {
+        return !['dpmpp_2s'].includes(scheduler);
+      })
+      .sort((a, b) => a.localeCompare(b));

    return {
      scheduler: generation.scheduler,
@ -45,9 +47,9 @@ const ParamScheduler = () => {
  return (
    <IAICustomSelect
      label={t('parameters.scheduler')}
-      selectedItem={scheduler}
-      setSelectedItem={handleChange}
-      items={allSchedulers}
+      value={scheduler}
+      data={allSchedulers}
+      onChange={handleChange}
      withCheckIcon
    />
  );
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImagePreview.tsx
@ -58,6 +58,7 @@ const InitialImagePreview = () => {
        onReset={handleReset}
        fallback={<IAIImageFallback sx={{ bg: 'none' }} />}
        postUploadAction={{ type: 'SET_INITIAL_IMAGE' }}
+        withResetIcon
      />
    </Flex>
  );
--- a/invokeai/frontend/web/src/features/system/components/ClearTempFolderButtonModal.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ClearTempFolderButtonModal.tsx
@ -1,41 +0,0 @@
-// import { emptyTempFolder } from 'app/socketio/actions';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import IAIAlertDialog from 'common/components/IAIAlertDialog';
-import IAIButton from 'common/components/IAIButton';
-import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
-import {
-  clearCanvasHistory,
-  resetCanvas,
-} from 'features/canvas/store/canvasSlice';
-import { useTranslation } from 'react-i18next';
-import { FaTrash } from 'react-icons/fa';
-
-const EmptyTempFolderButtonModal = () => {
-  const isStaging = useAppSelector(isStagingSelector);
-  const dispatch = useAppDispatch();
-  const { t } = useTranslation();
-
-  const acceptCallback = () => {
-    dispatch(emptyTempFolder());
-    dispatch(resetCanvas());
-    dispatch(clearCanvasHistory());
-  };
-
-  return (
-    <IAIAlertDialog
-      title={t('unifiedCanvas.emptyTempImageFolder')}
-      acceptCallback={acceptCallback}
-      acceptButtonText={t('unifiedCanvas.emptyFolder')}
-      triggerComponent={
-        <IAIButton leftIcon={<FaTrash />} size="sm" isDisabled={isStaging}>
-          {t('unifiedCanvas.emptyTempImageFolder')}
-        </IAIButton>
-      }
-    >
-      <p>{t('unifiedCanvas.emptyTempImagesFolderMessage')}</p>
-      <br />
-      <p>{t('unifiedCanvas.emptyTempImagesFolderConfirm')}</p>
-    </IAIAlertDialog>
-  );
-};
-export default EmptyTempFolderButtonModal;
--- a/invokeai/frontend/web/src/features/system/components/ModelSelect.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ModelSelect.tsx
@ -4,34 +4,29 @@ import { isEqual } from 'lodash-es';
 import { useTranslation } from 'react-i18next';

 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import {
-  selectModelsAll,
-  selectModelsById,
-  selectModelsIds,
-} from '../store/modelSlice';
+import { selectModelsAll, selectModelsById } from '../store/modelSlice';
 import { RootState } from 'app/store/store';
 import { modelSelected } from 'features/parameters/store/generationSlice';
 import { generationSelector } from 'features/parameters/store/generationSelectors';
 import IAICustomSelect, {
-  ItemTooltips,
+  IAICustomSelectOption,
 } from 'common/components/IAICustomSelect';

 const selector = createSelector(
  [(state: RootState) => state, generationSelector],
  (state, generation) => {
    const selectedModel = selectModelsById(state, generation.model);
-    const allModelNames = selectModelsIds(state).map((id) => String(id));
-    const allModelTooltips = selectModelsAll(state).reduce(
-      (allModelTooltips, model) => {
-        allModelTooltips[model.name] = model.description ?? '';
-        return allModelTooltips;
-      },
-      {} as ItemTooltips
-    );
+
+    const modelData = selectModelsAll(state)
+      .map<IAICustomSelectOption>((m) => ({
+        value: m.name,
+        label: m.name,
+        tooltip: m.description,
+      }))
+      .sort((a, b) => a.label.localeCompare(b.label));
    return {
-      allModelNames,
-      allModelTooltips,
      selectedModel,
+      modelData,
    };
  },
  {
@ -44,8 +39,7 @@ const selector = createSelector(
 const ModelSelect = () => {
  const dispatch = useAppDispatch();
  const { t } = useTranslation();
-  const { allModelNames, allModelTooltips, selectedModel } =
-    useAppSelector(selector);
+  const { selectedModel, modelData } = useAppSelector(selector);
  const handleChangeModel = useCallback(
    (v: string | null | undefined) => {
      if (!v) {
@ -60,10 +54,9 @@ const ModelSelect = () => {
    <IAICustomSelect
      label={t('modelManager.model')}
      tooltip={selectedModel?.description}
-      items={allModelNames}
-      itemTooltips={allModelTooltips}
-      selectedItem={selectedModel?.name ?? ''}
-      setSelectedItem={handleChangeModel}
+      data={modelData}
+      value={selectedModel?.name ?? ''}
+      onChange={handleChangeModel}
      withCheckIcon={true}
      tooltipProps={{ placement: 'top', hasArrow: true }}
    />
--- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
@ -14,7 +14,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setIsLightboxOpen } from 'features/lightbox/store/lightboxSlice';
 import { InvokeTabName } from 'features/ui/store/tabMap';
 import { setActiveTab, togglePanels } from 'features/ui/store/uiSlice';
-import { memo, ReactNode, useCallback, useMemo } from 'react';
+import { memo, MouseEvent, ReactNode, useCallback, useMemo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { MdDeviceHub, MdGridOn } from 'react-icons/md';
 import { GoTextSize } from 'react-icons/go';
@ -47,22 +47,22 @@ export interface InvokeTabInfo {
 const tabs: InvokeTabInfo[] = [
  {
    id: 'txt2img',
-    icon: <Icon as={GoTextSize} sx={{ boxSize: 6 }} />,
+    icon: <Icon as={GoTextSize} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
    content: <TextToImageTab />,
  },
  {
    id: 'img2img',
-    icon: <Icon as={FaImage} sx={{ boxSize: 6 }} />,
+    icon: <Icon as={FaImage} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
    content: <ImageTab />,
  },
  {
    id: 'unifiedCanvas',
-    icon: <Icon as={MdGridOn} sx={{ boxSize: 6 }} />,
+    icon: <Icon as={MdGridOn} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
    content: <UnifiedCanvasTab />,
  },
  {
    id: 'nodes',
-    icon: <Icon as={MdDeviceHub} sx={{ boxSize: 6 }} />,
+    icon: <Icon as={MdDeviceHub} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
    content: <NodesTab />,
  },
 ];
@ -119,6 +119,12 @@ const InvokeTabs = () => {
    }
  }, [dispatch, activeTabName]);

+  const handleClickTab = useCallback((e: MouseEvent<HTMLElement>) => {
+    if (e.target instanceof HTMLElement) {
+      e.target.blur();
+    }
+  }, []);
+
  const tabs = useMemo(
    () =>
      enabledTabs.map((tab) => (
@ -128,7 +134,7 @@ const InvokeTabs = () => {
          label={String(t(`common.${tab.id}` as ResourceKey))}
          placement="end"
        >
-          <Tab>
+          <Tab onClick={handleClickTab}>
            <VisuallyHidden>
              {String(t(`common.${tab.id}` as ResourceKey))}
            </VisuallyHidden>
@ -136,7 +142,7 @@ const InvokeTabs = () => {
          </Tab>
        </Tooltip>
      )),
-    [t, enabledTabs]
+    [enabledTabs, t, handleClickTab]
  );

  const tabPanels = useMemo(
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasSettings.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasSettings.tsx
@ -12,7 +12,6 @@ import {
  setShouldShowCanvasDebugInfo,
  setShouldShowIntermediates,
 } from 'features/canvas/store/canvasSlice';
-import EmptyTempFolderButtonModal from 'features/system/components/ClearTempFolderButtonModal';

 import { FaWrench } from 'react-icons/fa';

@ -105,7 +104,6 @@ const UnifiedCanvasSettings = () => {
          onChange={(e) => dispatch(setShouldAntialias(e.target.checked))}
        />
        <ClearCanvasHistoryButtonModal />
-        <EmptyTempFolderButtonModal />
      </Flex>
    </IAIPopover>
  );
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasContent.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasContent.tsx
@ -55,8 +55,6 @@ const UnifiedCanvasContent = () => {
  });

  useLayoutEffect(() => {
-    dispatch(requestCanvasRescale());
-
    const resizeCallback = () => {
      dispatch(requestCanvasRescale());
    };