feat: Add Swap Sizes

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"
     }
 }

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() {

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>
   );

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,