From 964c71dcb02d5ddbd1c376e963ddd0bf31a1bbe7 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Mon, 10 Jul 2023 18:10:57 +1200
Subject: [PATCH] feat: Add Swap Sizes

---
 invokeai/frontend/web/public/locales/en.json  |  5 +++--
 .../Parameters/Core/ParamAspectRatio.tsx      |  6 ++---
 .../components/Parameters/Core/ParamSize.tsx  | 22 +++++++++++++++----
 .../parameters/store/generationSlice.ts       |  8 ++++++-
 4 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 29a3c0907c..6734f1dcd1 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -529,7 +529,7 @@
         "showPreview": "Show Preview",
         "controlNetControlMode": "Control Mode",
         "clipSkip": "Clip Skip",
-        "aspectRatio": "Aspect Ratio"
+        "aspectRatio": "Ratio"
     },
     "settings": {
         "models": "Models",
@@ -672,6 +672,7 @@
     },
     "ui": {
         "showProgressImages": "Show Progress Images",
-        "hideProgressImages": "Hide Progress Images"
+        "hideProgressImages": "Hide Progress Images",
+        "swapSizes": "Swap Sizes"
     }
 }
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamAspectRatio.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamAspectRatio.tsx
index 1b575b5793..0a568fb84d 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamAspectRatio.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamAspectRatio.tsx
@@ -6,9 +6,9 @@ import { setAspectRatio } from 'features/ui/store/uiSlice';
 
 const aspectRatios = [
   { name: 'Free', value: null },
-  { name: '4:3', value: 4 / 3 },
-  { name: '16:9', value: 16 / 9 },
-  { name: '3:2', value: 3 / 2 },
+  { name: 'Portrait', value: 0.67 / 1 },
+  { name: 'Wide', value: 16 / 9 },
+  { name: 'Square', value: 1 / 1 },
 ];
 
 export default function ParamAspectRatio() {
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSize.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSize.tsx
index 15637bb091..496431ff3d 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSize.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSize.tsx
@@ -1,13 +1,17 @@
 import { Flex, Spacer, Text } from '@chakra-ui/react';
 import { RootState } from 'app/store/store';
-import { useAppSelector } from 'app/store/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAIIconButton from 'common/components/IAIIconButton';
+import { toggleSize } from 'features/parameters/store/generationSlice';
 import { useTranslation } from 'react-i18next';
+import { MdOutlineSwapVert } from 'react-icons/md';
 import ParamAspectRatio from './ParamAspectRatio';
 import ParamHeight from './ParamHeight';
 import ParamWidth from './ParamWidth';
 
 export default function ParamSize() {
   const { t } = useTranslation();
+  const dispatch = useAppDispatch();
   const shouldFitToWidthHeight = useAppSelector(
     (state: RootState) => state.generation.shouldFitToWidthHeight
   );
@@ -40,10 +44,20 @@ export default function ParamSize() {
         </Text>
         <Spacer />
         <ParamAspectRatio />
+        <IAIIconButton
+          tooltip={t('ui.swapSizes')}
+          aria-label={t('ui.swapSizes')}
+          size="sm"
+          icon={<MdOutlineSwapVert />}
+          fontSize={20}
+          onClick={() => dispatch(toggleSize())}
+        />
       </Flex>
-      <Flex gap={2} flexDirection="column">
-        <ParamWidth isDisabled={!shouldFitToWidthHeight} />
-        <ParamHeight isDisabled={!shouldFitToWidthHeight} />
+      <Flex gap={2} alignItems="center">
+        <Flex gap={2} flexDirection="column" width="full">
+          <ParamWidth isDisabled={!shouldFitToWidthHeight} />
+          <ParamHeight isDisabled={!shouldFitToWidthHeight} />
+        </Flex>
       </Flex>
     </Flex>
   );
diff --git a/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts b/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts
index 5e476e1b3b..56728f216f 100644
--- a/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts
+++ b/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts
@@ -143,6 +143,11 @@ export const generationSlice = createSlice({
     setWidth: (state, action: PayloadAction<number>) => {
       state.width = action.payload;
     },
+    toggleSize: (state) => {
+      const [width, height] = [state.width, state.height];
+      state.width = height;
+      state.height = width;
+    },
     setScheduler: (state, action: PayloadAction<SchedulerParam>) => {
       state.scheduler = action.payload;
     },
@@ -281,7 +286,9 @@ export const {
   resetParametersState,
   resetSeed,
   setCfgScale,
+  setWidth,
   setHeight,
+  toggleSize,
   setImg2imgStrength,
   setInfillMethod,
   setIterations,
@@ -302,7 +309,6 @@ export const {
   setThreshold,
   setTileSize,
   setVariationAmount,
-  setWidth,
   setShouldUseSymmetry,
   setHorizontalSymmetrySteps,
   setVerticalSymmetrySteps,