Adds inpaint size (as scale bounding box) to UI

frontend/src/common/util/parameterTranslation.ts

@@ -127,6 +127,8 @@ export const frontendToBackendParameters = (
       stageScale,
       isMaskEnabled,
       shouldPreserveMaskedArea,
+      shouldScaleBoundingBox,
+      scaledBoundingBoxDimensions,
     } = canvasState;
 
     const boundingBox = {
@@ -181,9 +183,13 @@ export const frontendToBackendParameters = (
 
     generationParameters.init_img = imageDataURL;
 
-    // TODO: The server metadata generation needs to be changed to fix this.
     generationParameters.progress_images = false;
 
+    if (shouldScaleBoundingBox) {
+      generationParameters.inpaint_width = scaledBoundingBoxDimensions.width;
+      generationParameters.inpaint_height = scaledBoundingBoxDimensions.height;
+    }
+
     generationParameters.seam_size = seamSize;
     generationParameters.seam_blur = seamBlur;
     generationParameters.seam_strength = seamStrength;

frontend/src/features/canvas/store/canvasSlice.ts

@@ -1,16 +1,18 @@
-import { createSlice } from '@reduxjs/toolkit';
 import type { PayloadAction } from '@reduxjs/toolkit';
-import { IRect, Vector2d } from 'konva/lib/types';
+import { createSlice } from '@reduxjs/toolkit';
-import { RgbaColor } from 'react-colorful';
 import * as InvokeAI from 'app/invokeai';
-import _ from 'lodash';
 import {
   roundDownToMultiple,
   roundToMultiple,
 } from 'common/util/roundDownToMultiple';
-import calculateScale from '../util/calculateScale';
+import { IRect, Vector2d } from 'konva/lib/types';
+import _ from 'lodash';
+import { RgbaColor } from 'react-colorful';
 import calculateCoordinates from '../util/calculateCoordinates';
+import calculateScale from '../util/calculateScale';
+import { STAGE_PADDING_PERCENTAGE } from '../util/constants';
 import floorCoordinates from '../util/floorCoordinates';
+import roundDimensionsTo64 from '../util/roundDimensionsTo64';
 import {
   CanvasImage,
   CanvasLayer,
@@ -22,8 +24,6 @@ import {
   isCanvasBaseImage,
   isCanvasMaskLine,
 } from './canvasTypes';
-import roundDimensionsTo64 from '../util/roundDimensionsTo64';
-import { STAGE_PADDING_PERCENTAGE } from '../util/constants';
 
 export const initialLayerState: CanvasLayerState = {
   objects: [],
@@ -64,11 +64,13 @@ const initialCanvasState: CanvasState = {
   maxHistory: 128,
   minimumStageScale: 1,
   pastLayerStates: [],
+  scaledBoundingBoxDimensions: { width: 512, height: 512 },
   shouldAutoSave: false,
   shouldCropToBoundingBoxOnSave: false,
   shouldDarkenOutsideBoundingBox: false,
   shouldLockBoundingBox: false,
   shouldPreserveMaskedArea: false,
+  shouldScaleBoundingBox: false,
   shouldShowBoundingBox: true,
   shouldShowBrush: true,
   shouldShowBrushPreview: false,
@@ -669,6 +671,15 @@ export const canvasSlice = createSlice({
         state.boundingBoxCoordinates = newBoundingBoxCoordinates;
       }
     },
+    setShouldScaleBoundingBox: (state, action: PayloadAction<boolean>) => {
+      state.shouldScaleBoundingBox = action.payload;
+    },
+    setScaledBoundingBoxDimensions: (
+      state,
+      action: PayloadAction<Dimensions>
+    ) => {
+      state.scaledBoundingBoxDimensions = action.payload;
+    },
     setShouldShowStagingImage: (state, action: PayloadAction<boolean>) => {
       state.shouldShowStagingImage = action.payload;
     },
@@ -720,9 +731,9 @@ export const {
   addImageToStagingArea,
   addLine,
   addPointToCurrentLine,
+  clearCanvasHistory,
   clearMask,
   commitColorPickerColor,
-  setColorPickerColor,
   commitStagingAreaImage,
   discardStagedImages,
   fitBoundingBoxToStage,
@@ -740,7 +751,7 @@ export const {
   setBrushColor,
   setBrushSize,
   setCanvasContainerDimensions,
-  clearCanvasHistory,
+  setColorPickerColor,
   setCursorPosition,
   setDoesCanvasNeedScaling,
   setInitialCanvasImage,
@@ -761,6 +772,7 @@ export const {
   setShouldDarkenOutsideBoundingBox,
   setShouldLockBoundingBox,
   setShouldPreserveMaskedArea,
+  setShouldScaleBoundingBox,
   setShouldShowBoundingBox,
   setShouldShowBrush,
   setShouldShowBrushPreview,
@@ -779,6 +791,7 @@ export const {
   toggleShouldLockBoundingBox,
   toggleTool,
   undo,
+  setScaledBoundingBoxDimensions,
 } = canvasSlice.actions;
 
 export default canvasSlice.reducer;

frontend/src/features/canvas/store/canvasTypes.ts

@@ -81,7 +81,7 @@ export interface CanvasState {
   brushColor: RgbaColor;
   brushSize: number;
   canvasContainerDimensions: Dimensions;
-  colorPickerColor: RgbaColor,
+  colorPickerColor: RgbaColor;
   cursorPosition: Vector2d | null;
   doesCanvasNeedScaling: boolean;
   futureLayerStates: CanvasLayerState[];
@@ -102,11 +102,13 @@ export interface CanvasState {
   maxHistory: number;
   minimumStageScale: number;
   pastLayerStates: CanvasLayerState[];
+  scaledBoundingBoxDimensions: Dimensions;
   shouldAutoSave: boolean;
   shouldCropToBoundingBoxOnSave: boolean;
   shouldDarkenOutsideBoundingBox: boolean;
   shouldLockBoundingBox: boolean;
   shouldPreserveMaskedArea: boolean;
+  shouldScaleBoundingBox: boolean;
   shouldShowBoundingBox: boolean;
   shouldShowBrush: boolean;
   shouldShowBrushPreview: boolean;

frontend/src/features/options/components/AdvancedOptions/Canvas/BoundingBoxSettings/BoundingBoxSettings.tsx

@@ -2,16 +2,27 @@ import { Box, Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store';
 import IAISlider from 'common/components/IAISlider';
+import IAISwitch from 'common/components/IAISwitch';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
-import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
+import {
+  setBoundingBoxDimensions,
+  setScaledBoundingBoxDimensions,
+  setShouldScaleBoundingBox,
+} from 'features/canvas/store/canvasSlice';
 import _ from 'lodash';
 
 const selector = createSelector(
   canvasSelector,
   (canvas) => {
-    const { boundingBoxDimensions } = canvas;
+    const {
+      boundingBoxDimensions,
+      shouldScaleBoundingBox,
+      scaledBoundingBoxDimensions,
+    } = canvas;
     return {
       boundingBoxDimensions,
+      shouldScaleBoundingBox,
+      scaledBoundingBoxDimensions,
     };
   },
   {
@@ -23,7 +34,11 @@ const selector = createSelector(
 
 const BoundingBoxSettings = () => {
   const dispatch = useAppDispatch();
-  const { boundingBoxDimensions } = useAppSelector(selector);
+  const {
+    boundingBoxDimensions,
+    shouldScaleBoundingBox,
+    scaledBoundingBoxDimensions,
+  } = useAppSelector(selector);
 
   const handleChangeWidth = (v: number) => {
     dispatch(
@@ -61,6 +76,42 @@ const BoundingBoxSettings = () => {
     );
   };
 
+  const handleChangeScaledWidth = (v: number) => {
+    dispatch(
+      setScaledBoundingBoxDimensions({
+        ...scaledBoundingBoxDimensions,
+        width: Math.floor(v),
+      })
+    );
+  };
+
+  const handleChangeScaledHeight = (v: number) => {
+    dispatch(
+      setScaledBoundingBoxDimensions({
+        ...scaledBoundingBoxDimensions,
+        height: Math.floor(v),
+      })
+    );
+  };
+
+  const handleResetScaledWidth = () => {
+    dispatch(
+      setScaledBoundingBoxDimensions({
+        ...scaledBoundingBoxDimensions,
+        width: Math.floor(512),
+      })
+    );
+  };
+
+  const handleResetScaledHeight = () => {
+    dispatch(
+      setScaledBoundingBoxDimensions({
+        ...scaledBoundingBoxDimensions,
+        height: Math.floor(512),
+      })
+    );
+  };
+
   return (
     <Flex direction="column" gap="1rem">
       <IAISlider
@@ -89,6 +140,43 @@ const BoundingBoxSettings = () => {
         withInput
         withReset
       />
+      <IAISwitch
+        label={'Scale Image Before Processing'}
+        isChecked={shouldScaleBoundingBox}
+        onChange={(e) => dispatch(setShouldScaleBoundingBox(e.target.checked))}
+      />
+      <IAISlider
+        isInputDisabled={!shouldScaleBoundingBox}
+        isResetDisabled={!shouldScaleBoundingBox}
+        isSliderDisabled={!shouldScaleBoundingBox}
+        label={'Scaled W'}
+        min={64}
+        max={1024}
+        step={64}
+        value={scaledBoundingBoxDimensions.width}
+        onChange={handleChangeScaledWidth}
+        handleReset={handleResetScaledWidth}
+        sliderNumberInputProps={{ max: 4096 }}
+        withSliderMarks
+        withInput
+        withReset
+      />
+      <IAISlider
+        isInputDisabled={!shouldScaleBoundingBox}
+        isResetDisabled={!shouldScaleBoundingBox}
+        isSliderDisabled={!shouldScaleBoundingBox}
+        label={'Scaled H'}
+        min={64}
+        max={1024}
+        step={64}
+        value={scaledBoundingBoxDimensions.height}
+        onChange={handleChangeScaledHeight}
+        handleReset={handleResetScaledHeight}
+        sliderNumberInputProps={{ max: 4096 }}
+        withSliderMarks
+        withInput
+        withReset
+      />
     </Flex>
   );
 };

frontend/src/features/options/components/AdvancedOptions/Canvas/CompositionOptions.tsx

@@ -135,10 +135,8 @@ const CompositionOptions = () => {
         validValues={availableInfillMethods}
         onChange={(e) => dispatch(setInfillMethod(e.target.value))}
       />
+      {infillMethod === 'tile' && (
         <IAISlider
-        isInputDisabled={infillMethod !== 'tile'}
-        isResetDisabled={infillMethod !== 'tile'}
-        isSliderDisabled={infillMethod !== 'tile'}
           sliderMarkRightOffset={-4}
           label={'Tile Size'}
           min={16}
@@ -155,6 +153,7 @@ const CompositionOptions = () => {
           withSliderMarks
           withReset
         />
+      )}
     </Flex>
   );
 };