Fixes: inpainting bug "images do not match"

frontend/dist/index.html

@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>InvokeAI - A Stable Diffusion Toolkit</title>
   <link rel="shortcut icon" type="icon" href="./assets/favicon.0d253ced.ico" />
-  <script type="module" crossorigin src="./assets/index.1d211108.js"></script>
+  <script type="module" crossorigin src="./assets/index.616d87b3.js"></script>
   <link rel="stylesheet" href="./assets/index.64a76932.css">
 </head>
 

frontend/src/app/socketio/listeners.ts

@@ -269,7 +269,7 @@ const makeSocketIOListeners = (
      * Callback to run when we receive a 'imageDeleted' event.
      */
     onImageDeleted: (data: InvokeAI.ImageDeletedResponse) => {
-      const { url, uuid, category } = data;
+      const { url } = data;
 
       // remove image from gallery
       dispatch(removeImage(data));

frontend/src/common/util/parameterTranslation.ts

@@ -100,30 +100,15 @@ export const frontendToBackendParameters = (
   if (generationMode === 'inpainting' && maskImageElement) {
     const {
       lines,
-      boundingBoxCoordinate: { x, y },
+      boundingBoxCoordinate,
-      boundingBoxDimensions: { width, height },
+      boundingBoxDimensions,
-      shouldShowBoundingBox,
       inpaintReplace,
       shouldUseInpaintReplace,
     } = inpaintingState;
 
-    let bx = x,
-      by = y,
-      bwidth = width,
-      bheight = height;
-
-    if (!shouldShowBoundingBox) {
-      bx = 0;
-      by = 0;
-      bwidth = maskImageElement.width;
-      bheight = maskImageElement.height;
-    }
-
     const boundingBox = {
-      x: bx,
+      ...boundingBoxCoordinate,
-      y: by,
+      ...boundingBoxDimensions,
-      width: bwidth,
-      height: bheight,
     };
 
     if (shouldUseInpaintReplace) {
@@ -134,7 +119,7 @@ export const frontendToBackendParameters = (
     generationParameters.strength = img2imgStrength;
     generationParameters.fit = false;
 
-    const maskDataURL = generateMask(maskImageElement, lines, boundingBox);
+    const maskDataURL = generateMask(maskImageElement, lines);
 
     generationParameters.init_mask = maskDataURL.split(
       'data:image/png;base64,'

frontend/src/features/gallery/CurrentImagePreview.tsx

@@ -62,11 +62,11 @@ export default function CurrentImagePreview(props: CurrentImagePreviewProps) {
   };
 
   const handleClickPrevButton = () => {
-    dispatch(selectPrevImage(currentCategory));
+    dispatch(selectPrevImage());
   };
 
   const handleClickNextButton = () => {
-    dispatch(selectNextImage(currentCategory));
+    dispatch(selectNextImage());
   };
 
   return (

frontend/src/features/gallery/ImageGallery.tsx

@@ -147,21 +147,13 @@ export default function ImageGallery() {
     [shouldShowGallery]
   );
 
-  useHotkeys(
+  useHotkeys('left', () => {
-    'left',
+    dispatch(selectPrevImage());
-    () => {
+  });
-      dispatch(selectPrevImage(currentCategory));
-    },
-    [currentCategory]
-  );
 
-  useHotkeys(
+  useHotkeys('right', () => {
-    'right',
+    dispatch(selectNextImage());
-    () => {
+  });
-      dispatch(selectNextImage(currentCategory));
-    },
-    [currentCategory]
-  );
 
   useHotkeys(
     'shift+p',

frontend/src/features/gallery/gallerySlice.ts

@@ -154,8 +154,7 @@ export const gallerySlice = createSlice({
     clearIntermediateImage: (state) => {
       state.intermediateImage = undefined;
     },
-    selectNextImage: (state, action: PayloadAction<GalleryCategory>) => {
+    selectNextImage: (state) => {
-      const category = action.payload;
       const { currentImage } = state;
       if (!currentImage) return;
       const tempImages =
@@ -172,8 +171,7 @@ export const gallerySlice = createSlice({
         }
       }
     },
-    selectPrevImage: (state, action: PayloadAction<GalleryCategory>) => {
+    selectPrevImage: (state) => {
-      const category = action.payload;
       const { currentImage } = state;
       if (!currentImage) return;
       const tempImages =

frontend/src/features/options/AdvancedOptions/Inpainting/BoundingBoxSettings.tsx

@@ -1,7 +1,6 @@
 import { Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import _ from 'lodash';
-import { ChangeEvent } from 'react';
 import { BiReset } from 'react-icons/bi';
 
 import {
@@ -14,13 +13,11 @@ import IAIIconButton from '../../../../common/components/IAIIconButton';
 
 import IAINumberInput from '../../../../common/components/IAINumberInput';
 import IAISlider from '../../../../common/components/IAISlider';
-import IAISwitch from '../../../../common/components/IAISwitch';
 import { roundDownToMultiple } from '../../../../common/util/roundDownToMultiple';
 import {
   InpaintingState,
   setBoundingBoxDimensions,
   setShouldLockBoundingBox,
-  setShouldShowBoundingBox,
   setShouldShowBoundingBoxFill,
 } from '../../../tabs/Inpainting/inpaintingSlice';
 
@@ -30,7 +27,6 @@ const boundingBoxDimensionsSelector = createSelector(
     const {
       canvasDimensions,
       boundingBoxDimensions,
-      shouldShowBoundingBox,
       shouldShowBoundingBoxFill,
       pastLines,
       futureLines,
@@ -39,7 +35,6 @@ const boundingBoxDimensionsSelector = createSelector(
     return {
       canvasDimensions,
       boundingBoxDimensions,
-      shouldShowBoundingBox,
       shouldShowBoundingBoxFill,
       pastLines,
       futureLines,
@@ -58,22 +53,28 @@ const BoundingBoxSettings = () => {
   const {
     canvasDimensions,
     boundingBoxDimensions,
-    shouldShowBoundingBox,
     shouldShowBoundingBoxFill,
     shouldLockBoundingBox,
   } = useAppSelector(boundingBoxDimensionsSelector);
 
   const handleChangeBoundingBoxWidth = (v: number) => {
-    dispatch(setBoundingBoxDimensions({ ...boundingBoxDimensions, width: Math.floor(v) }));
+    dispatch(
+      setBoundingBoxDimensions({
+        ...boundingBoxDimensions,
+        width: Math.floor(v),
+      })
+    );
   };
 
   const handleChangeBoundingBoxHeight = (v: number) => {
-    dispatch(setBoundingBoxDimensions({ ...boundingBoxDimensions, height: Math.floor(v) }));
+    dispatch(
+      setBoundingBoxDimensions({
+        ...boundingBoxDimensions,
+        height: Math.floor(v),
+      })
+    );
   };
 
-  const handleShowBoundingBox = (e: ChangeEvent<HTMLInputElement>) =>
-    dispatch(setShouldShowBoundingBox(e.target.checked));
-
   const handleChangeShouldShowBoundingBoxFill = () => {
     dispatch(setShouldShowBoundingBoxFill(!shouldShowBoundingBoxFill));
   };
@@ -104,11 +105,6 @@ const BoundingBoxSettings = () => {
     <div className="inpainting-bounding-box-settings">
       <div className="inpainting-bounding-box-header">
         <p>Inpaint Box</p>
-        <IAISwitch
-          isChecked={shouldShowBoundingBox}
-          width={'auto'}
-          onChange={handleShowBoundingBox}
-        />
       </div>
       <div className="inpainting-bounding-box-settings-items">
         <div className="inpainting-bounding-box-dimensions-slider-numberinput">
@@ -119,7 +115,6 @@ const BoundingBoxSettings = () => {
             step={64}
             value={boundingBoxDimensions.width}
             onChange={handleChangeBoundingBoxWidth}
-            isDisabled={!shouldShowBoundingBox}
             width={'5rem'}
           />
           <IAINumberInput
@@ -128,7 +123,6 @@ const BoundingBoxSettings = () => {
             min={64}
             max={roundDownToMultiple(canvasDimensions.width, 64)}
             step={64}
-            isDisabled={!shouldShowBoundingBox}
             width={'5rem'}
           />
           <IAIIconButton
@@ -138,10 +132,7 @@ const BoundingBoxSettings = () => {
             onClick={handleResetWidth}
             icon={<BiReset />}
             styleClass="inpainting-bounding-box-reset-icon-btn"
-            isDisabled={
+            isDisabled={canvasDimensions.width === boundingBoxDimensions.width}
-              !shouldShowBoundingBox ||
-              canvasDimensions.width === boundingBoxDimensions.width
-            }
           />
         </div>
         <div className="inpainting-bounding-box-dimensions-slider-numberinput">
@@ -152,7 +143,6 @@ const BoundingBoxSettings = () => {
             step={64}
             value={boundingBoxDimensions.height}
             onChange={handleChangeBoundingBoxHeight}
-            isDisabled={!shouldShowBoundingBox}
             width={'5rem'}
           />
           <IAINumberInput
@@ -162,7 +152,6 @@ const BoundingBoxSettings = () => {
             max={roundDownToMultiple(canvasDimensions.height, 64)}
             step={64}
             padding="0"
-            isDisabled={!shouldShowBoundingBox}
             width={'5rem'}
           />
           <IAIIconButton
@@ -173,7 +162,6 @@ const BoundingBoxSettings = () => {
             icon={<BiReset />}
             styleClass="inpainting-bounding-box-reset-icon-btn"
             isDisabled={
-              !shouldShowBoundingBox ||
               canvasDimensions.height === boundingBoxDimensions.height
             }
           />
@@ -184,14 +172,12 @@ const BoundingBoxSettings = () => {
             isChecked={shouldShowBoundingBoxFill}
             onChange={handleChangeShouldShowBoundingBoxFill}
             styleClass="inpainting-bounding-box-darken"
-            isDisabled={!shouldShowBoundingBox}
           />
           <IAICheckbox
             label="Lock Bounding Box"
             isChecked={shouldLockBoundingBox}
             onChange={handleChangeShouldLockBoundingBox}
             styleClass="inpainting-bounding-box-darken"
-            isDisabled={!shouldShowBoundingBox}
           />
         </Flex>
       </div>

frontend/src/features/tabs/Inpainting/InpaintingCanvas.tsx

@@ -56,7 +56,6 @@ const InpaintingCanvas = () => {
     shouldShowBoundingBoxFill,
     isDrawing,
     shouldLockBoundingBox,
-    shouldShowBoundingBox,
     boundingBoxDimensions,
   } = useAppSelector(inpaintingCanvasSelector);
 
@@ -301,10 +300,10 @@ const InpaintingCanvas = () => {
                 )}
               </Layer>
               <Layer>
-                {shouldShowBoundingBox && shouldShowBoundingBoxFill && (
+                {shouldShowBoundingBoxFill && (
                   <InpaintingBoundingBoxPreviewOverlay />
                 )}
-                {shouldShowBoundingBox && <InpaintingBoundingBoxPreview />}
+                <InpaintingBoundingBoxPreview />
                 {shouldLockBoundingBox && (
                   <InpaintingCanvasBrushPreviewOutline />
                 )}

frontend/src/features/tabs/Inpainting/InpaintingControls.tsx

@@ -51,7 +51,6 @@ const InpaintingControls = () => {
     isMaskEmpty,
     activeTabName,
     showDualDisplay,
-    shouldShowBoundingBox
   } = useAppSelector(inpaintingControlsSelector);
 
   const dispatch = useAppDispatch();
@@ -161,9 +160,9 @@ const InpaintingControls = () => {
       dispatch(toggleShouldLockBoundingBox());
     },
     {
-      enabled: activeTabName === 'inpainting' && shouldShowMask && shouldShowBoundingBox,
+      enabled: activeTabName === 'inpainting' && shouldShowMask,
     },
-    [activeTabName, shouldShowMask, shouldShowBoundingBox]
+    [activeTabName, shouldShowMask]
   );
 
   // Undo

frontend/src/features/tabs/Inpainting/inpaintingSlice.ts

@@ -37,7 +37,6 @@ export interface InpaintingState {
   boundingBoxDimensions: Dimensions;
   boundingBoxCoordinate: Vector2d;
   boundingBoxPreviewFill: RgbaColor;
-  shouldShowBoundingBox: boolean;
   shouldShowBoundingBoxFill: boolean;
   lines: MaskLine[];
   pastLines: MaskLine[][];
@@ -64,7 +63,6 @@ const initialInpaintingState: InpaintingState = {
   boundingBoxDimensions: { width: 64, height: 64 },
   boundingBoxCoordinate: { x: 0, y: 0 },
   boundingBoxPreviewFill: { r: 0, g: 0, b: 0, a: 0.7 },
-  shouldShowBoundingBox: false,
   shouldShowBoundingBoxFill: false,
   cursorPosition: null,
   lines: [],
@@ -304,9 +302,6 @@ export const inpaintingSlice = createSlice({
     setIsDrawing: (state, action: PayloadAction<boolean>) => {
       state.isDrawing = action.payload;
     },
-    setShouldShowBoundingBox: (state, action: PayloadAction<boolean>) => {
-      state.shouldShowBoundingBox = action.payload;
-    },
     setClearBrushHistory: (state) => {
       state.pastLines = [];
       state.futureLines = [];
@@ -352,7 +347,6 @@ export const {
   setShouldShowBoundingBoxFill,
   setIsDrawing,
   setShouldShowBrush,
-  setShouldShowBoundingBox,
   setClearBrushHistory,
   setShouldUseInpaintReplace,
   setInpaintReplace,

frontend/src/features/tabs/Inpainting/inpaintingSliceSelectors.ts

@@ -3,7 +3,6 @@ import _ from 'lodash';
 import { RootState } from '../../../app/store';
 import { activeTabNameSelector } from '../../options/optionsSelectors';
 import { OptionsState } from '../../options/optionsSlice';
-import { tabMap } from '../InvokeTabs';
 import { InpaintingState } from './inpaintingSlice';
 import { rgbaColorToRgbString } from './util/colorToString';
 
@@ -36,7 +35,6 @@ export const inpaintingControlsSelector = createSelector(
       pastLines,
       futureLines,
       shouldShowBoundingBoxFill,
-      shouldShowBoundingBox,
     } = inpainting;
 
     const { showDualDisplay } = options;
@@ -54,7 +52,6 @@ export const inpaintingControlsSelector = createSelector(
       activeTabName,
       showDualDisplay,
       shouldShowBoundingBoxFill,
-      shouldShowBoundingBox,
     };
   },
   {
@@ -79,7 +76,6 @@ export const inpaintingCanvasSelector = createSelector(
       shouldShowBoundingBoxFill,
       isDrawing,
       shouldLockBoundingBox,
-      shouldShowBoundingBox,
       boundingBoxDimensions,
     } = inpainting;
     return {
@@ -94,7 +90,6 @@ export const inpaintingCanvasSelector = createSelector(
       shouldShowBoundingBoxFill,
       isDrawing,
       shouldLockBoundingBox,
-      shouldShowBoundingBox,
       boundingBoxDimensions,
     };
   },

frontend/src/features/tabs/Inpainting/util/generateMask.ts

@@ -1,5 +1,4 @@
 import Konva from 'konva';
-import { IRect } from 'konva/lib/types';
 import { MaskLine } from '../inpaintingSlice';
 
 /**
@@ -12,11 +11,7 @@ import { MaskLine } from '../inpaintingSlice';
  * drawing the mask and compositing everything correctly to output a valid
  * mask image.
  */
-const generateMask = (
+const generateMask = (image: HTMLImageElement, lines: MaskLine[]) => {
-  image: HTMLImageElement,
-  lines: MaskLine[],
-  boundingBox: IRect
-) => {
   const { width, height } = image;
 
   const offscreenContainer = document.createElement('div');