[3.1] UI Fixes (#4376)

## What type of PR is this? (check all applicable)

- [x] Feature
- [x] Bug Fix


## Have you discussed this change with the InvokeAI team?
- [x] Yes

## Description
- Keep Boards Modal open by default.
- Combine Coherence and Mask settings under Compositing
- Auto Change Dimensions based on model type (option)
- Size resets are now model dependent
- Add Set Control Image Height & Width to Width and Height option.
- Fix numerous color & spacing issues (especially those pertaining to
sliders being too close to the bottom)
- Add Lock Ratio Option

Author: blessedcoolant

invokeai/frontend/web/public/locales/en.json

@@ -506,12 +506,13 @@
         "hiresStrength": "High Res Strength",
         "imageFit": "Fit Initial Image To Output Size",
         "codeformerFidelity": "Fidelity",
+        "compositingSettingsHeader": "Compositing Settings",
         "maskAdjustmentsHeader": "Mask Adjustments",
-        "maskBlur": "Mask Blur",
-        "maskBlurMethod": "Mask Blur Method",
+        "maskBlur": "Blur",
+        "maskBlurMethod": "Blur Method",
         "coherencePassHeader": "Coherence Pass",
-        "coherenceSteps": "Coherence Pass Steps",
-        "coherenceStrength": "Coherence Pass Strength",
+        "coherenceSteps": "Steps",
+        "coherenceStrength": "Strength",
         "seamLowThreshold": "Low",
         "seamHighThreshold": "High",
         "scaleBeforeProcessing": "Scale Before Processing",
@@ -569,6 +570,7 @@
         "useSlidersForAll": "Use Sliders For All Options",
         "showProgressInViewer": "Show Progress Images in Viewer",
         "antialiasProgressImages": "Antialias Progress Images",
+        "autoChangeDimensions": "Update W/H To Model Defaults On Change",
         "resetWebUI": "Reset Web UI",
         "resetWebUIDesc1": "Resetting the web UI only resets the browser's local cache of your images and remembered settings. It does not delete any images from disk.",
         "resetWebUIDesc2": "If images aren't showing up in the gallery or something else isn't working, please try resetting before submitting an issue on GitHub.",
@@ -712,7 +714,8 @@
     "ui": {
         "showProgressImages": "Show Progress Images",
         "hideProgressImages": "Hide Progress Images",
-        "swapSizes": "Swap Sizes"
+        "swapSizes": "Swap Sizes",
+        "lockRatio": "Lock Ratio"
     },
     "nodes": {
         "reloadNodeTemplates": "Reload Node Templates",

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

@@ -1,9 +1,12 @@
 import { logger } from 'app/logging/logger';
+import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
 import { controlNetRemoved } from 'features/controlNet/store/controlNetSlice';
 import { loraRemoved } from 'features/lora/store/loraSlice';
 import { modelSelected } from 'features/parameters/store/actions';
 import {
   modelChanged,
+  setHeight,
+  setWidth,
   vaeSelected,
 } from 'features/parameters/store/generationSlice';
 import { zMainOrOnnxModel } from 'features/parameters/types/parameterSchemas';
@@ -74,6 +77,22 @@ export const addModelSelectedListener = () => {
         }
       }
 
+      // Update Width / Height / Bounding Box Dimensions on Model Change
+      if (
+        state.generation.model?.base_model !== newModel.base_model &&
+        state.ui.shouldAutoChangeDimensions
+      ) {
+        if (['sdxl', 'sdxl-refiner'].includes(newModel.base_model)) {
+          dispatch(setWidth(1024));
+          dispatch(setHeight(1024));
+          dispatch(setBoundingBoxDimensions({ width: 1024, height: 1024 }));
+        } else {
+          dispatch(setWidth(512));
+          dispatch(setHeight(512));
+          dispatch(setBoundingBoxDimensions({ width: 512, height: 512 }));
+        }
+      }
+
       dispatch(modelChanged(newModel));
     },
   });

invokeai/frontend/web/src/app/store/store.ts

@@ -6,11 +6,11 @@ import {
   configureStore,
 } from '@reduxjs/toolkit';
 import canvasReducer from 'features/canvas/store/canvasSlice';
+import changeBoardModalReducer from 'features/changeBoardModal/store/slice';
 import controlNetReducer from 'features/controlNet/store/controlNetSlice';
+import deleteImageModalReducer from 'features/deleteImageModal/store/slice';
 import dynamicPromptsReducer from 'features/dynamicPrompts/store/dynamicPromptsSlice';
 import galleryReducer from 'features/gallery/store/gallerySlice';
-import deleteImageModalReducer from 'features/deleteImageModal/store/slice';
-import changeBoardModalReducer from 'features/changeBoardModal/store/slice';
 import loraReducer from 'features/lora/store/loraSlice';
 import nodesReducer from 'features/nodes/store/nodesSlice';
 import generationReducer from 'features/parameters/store/generationSlice';

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

@@ -86,8 +86,8 @@ const IAICollapse = (props: IAIToggleCollapseProps) => {
       <Collapse in={isOpen} animateOpacity style={{ overflow: 'unset' }}>
         <Box
           sx={{
-            p: 2,
-            pt: 3,
+            p: 4,
+            pb: 4,
             borderBottomRadius: 'base',
             bg: 'base.150',
             _dark: {

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

@@ -5,16 +5,20 @@ import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAIDndImage from 'common/components/IAIDndImage';
+import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
 import {
   TypesafeDraggableData,
   TypesafeDroppableData,
 } from 'features/dnd/types';
+import { setHeight, setWidth } from 'features/parameters/store/generationSlice';
+import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { memo, useCallback, useMemo, useState } from 'react';
-import { FaSave, FaUndo } from 'react-icons/fa';
+import { FaRulerVertical, FaSave, FaUndo } from 'react-icons/fa';
 import {
   useAddImageToBoardMutation,
   useChangeImageIsIntermediateMutation,
   useGetImageDTOQuery,
+  useRemoveImageFromBoardMutation,
 } from 'services/api/endpoints/images';
 import { PostUploadAction } from 'services/api/types';
 import IAIDndImageIcon from '../../../common/components/IAIDndImageIcon';
@@ -54,6 +58,7 @@ const ControlNetImagePreview = ({ isSmall, controlNet }: Props) => {
   const dispatch = useAppDispatch();
 
   const { pendingControlImages, autoAddBoardId } = useAppSelector(selector);
+  const activeTabName = useAppSelector(activeTabNameSelector);
 
   const [isMouseOverImage, setIsMouseOverImage] = useState(false);
 
@@ -67,23 +72,54 @@ const ControlNetImagePreview = ({ isSmall, controlNet }: Props) => {
 
   const [changeIsIntermediate] = useChangeImageIsIntermediateMutation();
   const [addToBoard] = useAddImageToBoardMutation();
-
+  const [removeFromBoard] = useRemoveImageFromBoardMutation();
   const handleResetControlImage = useCallback(() => {
     dispatch(controlNetImageChanged({ controlNetId, controlImage: null }));
   }, [controlNetId, dispatch]);
 
-  const handleSaveControlImage = useCallback(() => {
+  const handleSaveControlImage = useCallback(async () => {
     if (!processedControlImage) {
       return;
     }
 
-    changeIsIntermediate({
+    await changeIsIntermediate({
       imageDTO: processedControlImage,
       is_intermediate: false,
-    });
+    }).unwrap();
+
+    if (autoAddBoardId !== 'none') {
+      addToBoard({
+        imageDTO: processedControlImage,
+        board_id: autoAddBoardId,
+      });
+    } else {
+      removeFromBoard({ imageDTO: processedControlImage });
+    }
+  }, [
+    processedControlImage,
+    changeIsIntermediate,
+    autoAddBoardId,
+    addToBoard,
+    removeFromBoard,
+  ]);
+
+  const handleSetControlImageToDimensions = useCallback(() => {
+    if (!processedControlImage) {
+      return;
+    }
 
-    addToBoard({ imageDTO: processedControlImage, board_id: autoAddBoardId });
-  }, [processedControlImage, autoAddBoardId, changeIsIntermediate, addToBoard]);
+    if (activeTabName === 'unifiedCanvas') {
+      dispatch(
+        setBoundingBoxDimensions({
+          width: processedControlImage.width,
+          height: processedControlImage.height,
+        })
+      );
+    } else {
+      dispatch(setWidth(processedControlImage.width));
+      dispatch(setHeight(processedControlImage.height));
+    }
+  }, [processedControlImage, activeTabName, dispatch]);
 
   const handleMouseEnter = useCallback(() => {
     setIsMouseOverImage(true);
@@ -144,21 +180,7 @@ const ControlNetImagePreview = ({ isSmall, controlNet }: Props) => {
         imageDTO={controlImage}
         isDropDisabled={shouldShowProcessedImage || !isEnabled}
         postUploadAction={postUploadAction}
-      >
-        <>
-          <IAIDndImageIcon
-            onClick={handleResetControlImage}
-            icon={controlImage ? <FaUndo /> : undefined}
-            tooltip="Reset Control Image"
-          />
-          <IAIDndImageIcon
-            onClick={handleSaveControlImage}
-            icon={controlImage ? <FaSave size={16} /> : undefined}
-            tooltip="Save Control Image"
-            styleOverrides={{ marginTop: 6 }}
-          />
-        </>
-      </IAIDndImage>
+      />
 
       <Box
         sx={{
@@ -179,22 +201,29 @@ const ControlNetImagePreview = ({ isSmall, controlNet }: Props) => {
           imageDTO={processedControlImage}
           isUploadDisabled={true}
           isDropDisabled={!isEnabled}
-        >
-          <>
-            <IAIDndImageIcon
-              onClick={handleResetControlImage}
-              icon={controlImage ? <FaUndo /> : undefined}
-              tooltip="Reset Control Image"
-            />
-            <IAIDndImageIcon
-              onClick={handleSaveControlImage}
-              icon={controlImage ? <FaSave size={16} /> : undefined}
-              tooltip="Save Control Image"
-              styleOverrides={{ marginTop: 6 }}
-            />
-          </>
-        </IAIDndImage>
+        />
       </Box>
+
+      <>
+        <IAIDndImageIcon
+          onClick={handleResetControlImage}
+          icon={controlImage ? <FaUndo /> : undefined}
+          tooltip="Reset Control Image"
+        />
+        <IAIDndImageIcon
+          onClick={handleSaveControlImage}
+          icon={controlImage ? <FaSave size={16} /> : undefined}
+          tooltip="Save Control Image"
+          styleOverrides={{ marginTop: 6 }}
+        />
+        <IAIDndImageIcon
+          onClick={handleSetControlImageToDimensions}
+          icon={controlImage ? <FaRulerVertical size={16} /> : undefined}
+          tooltip="Set Control Image Dimensions To W/H"
+          styleOverrides={{ marginTop: 12 }}
+        />
+      </>
+
       {pendingControlImages.includes(controlNetId) && (
         <Flex
           sx={{

invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCollapse.tsx

@@ -4,11 +4,11 @@ import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAICollapse from 'common/components/IAICollapse';
+import { memo } from 'react';
+import { useFeatureStatus } from '../../system/hooks/useFeatureStatus';
 import ParamDynamicPromptsCombinatorial from './ParamDynamicPromptsCombinatorial';
 import ParamDynamicPromptsToggle from './ParamDynamicPromptsEnabled';
 import ParamDynamicPromptsMaxPrompts from './ParamDynamicPromptsMaxPrompts';
-import { useFeatureStatus } from '../../system/hooks/useFeatureStatus';
-import { memo } from 'react';
 
 const selector = createSelector(
   stateSelector,

invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx

@@ -39,7 +39,7 @@ const ImageGalleryContent = () => {
   const { galleryView } = useAppSelector(selector);
   const dispatch = useAppDispatch();
   const { isOpen: isBoardListOpen, onToggle: onToggleBoardList } =
-    useDisclosure();
+    useDisclosure({ defaultIsOpen: true });
 
   const handleClickImages = useCallback(() => {
     dispatch(galleryViewChanged('images'));

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx

@@ -14,8 +14,9 @@ const selector = createSelector(
   [stateSelector, isStagingSelector],
   ({ canvas, generation }, isStaging) => {
     const { boundingBoxDimensions } = canvas;
-    const { aspectRatio } = generation;
+    const { model, aspectRatio } = generation;
     return {
+      model,
       boundingBoxDimensions,
       isStaging,
       aspectRatio,
@@ -26,11 +27,15 @@ const selector = createSelector(
 
 const ParamBoundingBoxWidth = () => {
   const dispatch = useAppDispatch();
-  const { boundingBoxDimensions, isStaging, aspectRatio } =
+  const { model, boundingBoxDimensions, isStaging, aspectRatio } =
     useAppSelector(selector);
 
   const { t } = useTranslation();
 
+  const initial = ['sdxl', 'sdxl-refiner'].includes(model?.base_model as string)
+    ? 1024
+    : 512;
+
   const handleChangeHeight = (v: number) => {
     dispatch(
       setBoundingBoxDimensions({
@@ -53,15 +58,15 @@ const ParamBoundingBoxWidth = () => {
     dispatch(
       setBoundingBoxDimensions({
         ...boundingBoxDimensions,
-        height: Math.floor(512),
+        height: Math.floor(initial),
       })
     );
     if (aspectRatio) {
-      const newWidth = roundToMultiple(512 * aspectRatio, 64);
+      const newWidth = roundToMultiple(initial * aspectRatio, 64);
       dispatch(
         setBoundingBoxDimensions({
           width: newWidth,
-          height: Math.floor(512),
+          height: Math.floor(initial),
         })
       );
     }
@@ -71,7 +76,7 @@ const ParamBoundingBoxWidth = () => {
     <IAISlider
       label={t('parameters.boundingBoxHeight')}
       min={64}
-      max={1024}
+      max={1536}
       step={64}
       value={boundingBoxDimensions.height}
       onChange={handleChangeHeight}