From 4fd4aee2abbc9e3b3659173c09ffb5b3853c603b Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Wed, 30 Aug 2023 05:49:57 +1200
Subject: [PATCH] feat: Auto Change Dimensions on Model Switch by Type

---
 invokeai/frontend/web/public/locales/en.json  |  1 +
 .../listeners/modelSelected.ts                | 19 +++++++++++++++++++
 .../BoundingBox/ParamBoundingBoxHeight.tsx    |  2 +-
 .../BoundingBox/ParamBoundingBoxWidth.tsx     |  2 +-
 .../SettingsModal/SettingsModal.tsx           | 16 +++++++++++++++-
 .../web/src/features/ui/store/uiSlice.ts      |  5 +++++
 .../web/src/features/ui/store/uiTypes.ts      |  1 +
 7 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 3907acdc60..c9f6a2f2f4 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -570,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.",
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelSelected.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelSelected.ts
index e44cbe504a..240890f043 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelSelected.ts
+++ b/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));
     },
   });
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx
index 64e44e63d0..1e2ef833e8 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx
@@ -71,7 +71,7 @@ const ParamBoundingBoxWidth = () => {
     <IAISlider
       label={t('parameters.boundingBoxHeight')}
       min={64}
-      max={1024}
+      max={1536}
       step={64}
       value={boundingBoxDimensions.height}
       onChange={handleChangeHeight}
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx
index d5671fb0c0..0a75754074 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx
@@ -71,7 +71,7 @@ const ParamBoundingBoxWidth = () => {
     <IAISlider
       label={t('parameters.boundingBoxWidth')}
       min={64}
-      max={1024}
+      max={1536}
       step={64}
       value={boundingBoxDimensions.width}
       onChange={handleChangeWidth}
diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
index 9f9f9fc58a..c1d02aed50 100644
--- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
@@ -30,6 +30,7 @@ import {
   shouldUseWatermarkerChanged,
 } from 'features/system/store/systemSlice';
 import {
+  setShouldAutoChangeDimensions,
   setShouldShowProgressInViewer,
   setShouldUseSliders,
 } from 'features/ui/store/uiSlice';
@@ -68,7 +69,11 @@ const selector = createSelector(
       shouldUseWatermarker,
     } = system;
 
-    const { shouldUseSliders, shouldShowProgressInViewer } = ui;
+    const {
+      shouldUseSliders,
+      shouldShowProgressInViewer,
+      shouldAutoChangeDimensions,
+    } = ui;
 
     const { shouldShowAdvancedOptions } = generation;
 
@@ -83,6 +88,7 @@ const selector = createSelector(
       shouldShowAdvancedOptions,
       shouldUseNSFWChecker,
       shouldUseWatermarker,
+      shouldAutoChangeDimensions,
     };
   },
   {
@@ -158,6 +164,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
     shouldShowAdvancedOptions,
     shouldUseNSFWChecker,
     shouldUseWatermarker,
+    shouldAutoChangeDimensions,
   } = useAppSelector(selector);
 
   const handleClickResetWebUI = useCallback(() => {
@@ -297,6 +304,13 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
                     )
                   }
                 />
+                <SettingSwitch
+                  label={t('settings.autoChangeDimensions')}
+                  isChecked={shouldAutoChangeDimensions}
+                  onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                    dispatch(setShouldAutoChangeDimensions(e.target.checked))
+                  }
+                />
                 {shouldShowLocalizationToggle && (
                   <IAIMantineSelect
                     disabled={!isLocalizationEnabled}
diff --git a/invokeai/frontend/web/src/features/ui/store/uiSlice.ts b/invokeai/frontend/web/src/features/ui/store/uiSlice.ts
index 2e4227e8e6..82c9ef4e77 100644
--- a/invokeai/frontend/web/src/features/ui/store/uiSlice.ts
+++ b/invokeai/frontend/web/src/features/ui/store/uiSlice.ts
@@ -15,6 +15,7 @@ export const initialUIState: UIState = {
   shouldHidePreview: false,
   shouldShowProgressInViewer: true,
   shouldShowEmbeddingPicker: false,
+  shouldAutoChangeDimensions: false,
   favoriteSchedulers: [],
   globalContextMenuCloseTrigger: 0,
   panels: {},
@@ -57,6 +58,9 @@ export const uiSlice = createSlice({
     toggleEmbeddingPicker: (state) => {
       state.shouldShowEmbeddingPicker = !state.shouldShowEmbeddingPicker;
     },
+    setShouldAutoChangeDimensions: (state, action: PayloadAction<boolean>) => {
+      state.shouldAutoChangeDimensions = action.payload;
+    },
     contextMenusClosed: (state) => {
       state.globalContextMenuCloseTrigger += 1;
     },
@@ -84,6 +88,7 @@ export const {
   setShouldShowProgressInViewer,
   favoriteSchedulersChanged,
   toggleEmbeddingPicker,
+  setShouldAutoChangeDimensions,
   contextMenusClosed,
   panelsChanged,
 } = uiSlice.actions;
diff --git a/invokeai/frontend/web/src/features/ui/store/uiTypes.ts b/invokeai/frontend/web/src/features/ui/store/uiTypes.ts
index 0f0ed64f97..41a359a651 100644
--- a/invokeai/frontend/web/src/features/ui/store/uiTypes.ts
+++ b/invokeai/frontend/web/src/features/ui/store/uiTypes.ts
@@ -21,6 +21,7 @@ export interface UIState {
   shouldHidePreview: boolean;
   shouldShowProgressInViewer: boolean;
   shouldShowEmbeddingPicker: boolean;
+  shouldAutoChangeDimensions: boolean;
   favoriteSchedulers: SchedulerParam[];
   globalContextMenuCloseTrigger: number;
   panels: Record<string, string>;