feat: Add Aspect Ratio

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamAspectRatio.tsx

@@ -0,0 +1,49 @@
+import { Flex } from '@chakra-ui/react';
+import { RootState } from 'app/store/store';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAIButton from 'common/components/IAIButton';
+import { setAspectRatio } from 'features/ui/store/uiSlice';
+import { ReactNode } from 'react';
+
+const aspectRatios = [
+  { name: 'Free', value: null },
+  { name: '4:3', value: 4 / 3 },
+  { name: '16:9', value: 16 / 9 },
+  { name: '3:2', value: 3 / 2 },
+];
+
+export const roundToEight = (number: number) => {
+  return Math.round(number / 8) * 8;
+};
+
+export default function ParamAspectRatio() {
+  const aspectRatio = useAppSelector(
+    (state: RootState) => state.ui.aspectRatio
+  );
+
+  const dispatch = useAppDispatch();
+
+  const renderAspectRatios = () => {
+    const aspectRatiosToRender: ReactNode[] = [];
+    aspectRatios.forEach((ratio) => {
+      aspectRatiosToRender.push(
+        <IAIButton
+          key={ratio.name}
+          size="sm"
+          width="max-content"
+          isChecked={aspectRatio === ratio.value}
+          onClick={() => dispatch(setAspectRatio(ratio.value))}
+        >
+          {ratio.name}
+        </IAIButton>
+      );
+    });
+    return aspectRatiosToRender;
+  };
+
+  return (
+    <Flex gap={2} w="100%">
+      {renderAspectRatios()}
+    </Flex>
+  );
+}

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamHeight.tsx

@@ -3,18 +3,21 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAISlider, { IAIFullSliderProps } from 'common/components/IAISlider';
 import { generationSelector } from 'features/parameters/store/generationSelectors';
-import { setHeight } from 'features/parameters/store/generationSlice';
+import { setHeight, setWidth } from 'features/parameters/store/generationSlice';
 import { configSelector } from 'features/system/store/configSelectors';
 import { hotkeysSelector } from 'features/ui/store/hotkeysSlice';
+import { uiSelector } from 'features/ui/store/uiSelectors';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { roundToEight } from './ParamAspectRatio';
 
 const selector = createSelector(
-  [generationSelector, hotkeysSelector, configSelector],
-  (generation, hotkeys, config) => {
+  [generationSelector, hotkeysSelector, configSelector, uiSelector],
+  (generation, hotkeys, config, ui) => {
     const { initial, min, sliderMax, inputMax, fineStep, coarseStep } =
       config.sd.height;
     const { height } = generation;
+    const { aspectRatio } = ui;
 
     const step = hotkeys.shift ? fineStep : coarseStep;
 
@@ -25,6 +28,7 @@ const selector = createSelector(
       sliderMax,
       inputMax,
       step,
+      aspectRatio,
     };
   },
   defaultSelectorOptions
@@ -36,7 +40,7 @@ type ParamHeightProps = Omit<
 >;
 
 const ParamHeight = (props: ParamHeightProps) => {
-  const { height, initial, min, sliderMax, inputMax, step } =
+  const { height, initial, min, sliderMax, inputMax, step, aspectRatio } =
     useAppSelector(selector);
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
@@ -44,13 +48,15 @@ const ParamHeight = (props: ParamHeightProps) => {
   const handleChange = useCallback(
     (v: number) => {
       dispatch(setHeight(v));
+      if (aspectRatio) dispatch(setWidth(roundToEight(height * aspectRatio)));
     },
-    [dispatch]
+    [dispatch, height, aspectRatio]
   );
 
   const handleReset = useCallback(() => {
     dispatch(setHeight(initial));
-  }, [dispatch, initial]);
+    if (aspectRatio) dispatch(setWidth(roundToEight(height * aspectRatio)));
+  }, [dispatch, initial, height, aspectRatio]);
 
   return (
     <IAISlider

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSize.tsx

@@ -0,0 +1,35 @@
+import { Flex, Text } from '@chakra-ui/react';
+import { RootState } from 'app/store/store';
+import { useAppSelector } from 'app/store/storeHooks';
+import { useTranslation } from 'react-i18next';
+import ParamAspectRatio from './ParamAspectRatio';
+import ParamHeight from './ParamHeight';
+import ParamWidth from './ParamWidth';
+
+export default function ParamSize() {
+  const { t } = useTranslation();
+  const shouldFitToWidthHeight = useAppSelector(
+    (state: RootState) => state.generation.shouldFitToWidthHeight
+  );
+  return (
+    <Flex
+      gap={2}
+      bg="base.900"
+      p={4}
+      borderRadius={4}
+      flexDirection="column"
+      w="100%"
+    >
+      <Flex alignItems="center" gap={2}>
+        <Text fontSize={14} width="full" color="base.300">
+          {t('parameters.aspectRatio')}
+        </Text>
+        <ParamAspectRatio />
+      </Flex>
+      <Flex gap={2} flexDirection="column">
+        <ParamWidth isDisabled={!shouldFitToWidthHeight} />
+        <ParamHeight isDisabled={!shouldFitToWidthHeight} />
+      </Flex>
+    </Flex>
+  );
+}

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamWidth.tsx

@@ -3,18 +3,21 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAISlider, { IAIFullSliderProps } from 'common/components/IAISlider';
 import { generationSelector } from 'features/parameters/store/generationSelectors';
-import { setWidth } from 'features/parameters/store/generationSlice';
+import { setHeight, setWidth } from 'features/parameters/store/generationSlice';
 import { configSelector } from 'features/system/store/configSelectors';
 import { hotkeysSelector } from 'features/ui/store/hotkeysSlice';
+import { uiSelector } from 'features/ui/store/uiSelectors';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { roundToEight } from './ParamAspectRatio';
 
 const selector = createSelector(
-  [generationSelector, hotkeysSelector, configSelector],
-  (generation, hotkeys, config) => {
+  [generationSelector, hotkeysSelector, configSelector, uiSelector],
+  (generation, hotkeys, config, ui) => {
     const { initial, min, sliderMax, inputMax, fineStep, coarseStep } =
       config.sd.width;
     const { width } = generation;
+    const { aspectRatio } = ui;
 
     const step = hotkeys.shift ? fineStep : coarseStep;
 
@@ -25,6 +28,7 @@ const selector = createSelector(
       sliderMax,
       inputMax,
       step,
+      aspectRatio,
     };
   },
   defaultSelectorOptions
@@ -33,7 +37,7 @@ const selector = createSelector(
 type ParamWidthProps = Omit<IAIFullSliderProps, 'label' | 'value' | 'onChange'>;
 
 const ParamWidth = (props: ParamWidthProps) => {
-  const { width, initial, min, sliderMax, inputMax, step } =
+  const { width, initial, min, sliderMax, inputMax, step, aspectRatio } =
     useAppSelector(selector);
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
@@ -41,13 +45,15 @@ const ParamWidth = (props: ParamWidthProps) => {
   const handleChange = useCallback(
     (v: number) => {
       dispatch(setWidth(v));
+      if (aspectRatio) dispatch(setHeight(roundToEight(width / aspectRatio)));
     },
-    [dispatch]
+    [dispatch, aspectRatio, width]
   );
 
   const handleReset = useCallback(() => {
     dispatch(setWidth(initial));
-  }, [dispatch, initial]);
+    if (aspectRatio) dispatch(setHeight(roundToEight(width / aspectRatio)));
+  }, [dispatch, initial, width, aspectRatio]);
 
   return (
     <IAISlider