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 bf2782b525..05e0b09cee 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 @@ -15,6 +15,8 @@ const aspectRatios = [ { name: '1:1', value: 1 / 1 }, ]; +export const mappedAspectRatios = aspectRatios.map((ar) => ar.value); + export default function ParamAspectRatio() { const aspectRatio = useAppSelector( (state: RootState) => state.generation.aspectRatio diff --git a/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts b/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts index c7b8d2b41f..68bd051ee7 100644 --- a/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts +++ b/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts @@ -5,6 +5,7 @@ import { configChanged } from 'features/system/store/configSlice'; import { clamp } from 'lodash-es'; import { ImageDTO } from 'services/api/types'; +import { mappedAspectRatios } from '../components/Parameters/Core/ParamAspectRatio'; import { clipSkipMap } from '../types/constants'; import { CfgScaleParam, @@ -152,7 +153,7 @@ export const generationSlice = createSlice({ }, toggleSize: (state) => { const [width, height] = [state.width, state.height]; - if (![null, 2 / 3, 16 / 9, 1 / 1].includes(height / width)) { + if (!mappedAspectRatios.includes(height / width)) { state.aspectRatio = null; } state.width = height; @@ -280,7 +281,7 @@ export const generationSlice = createSlice({ setShouldLockAspectRatio: (state, action: PayloadAction) => { if ( action.payload === false && - ![null, 2 / 3, 16 / 9, 1 / 1].includes(state.aspectRatio) + !mappedAspectRatios.includes(state.aspectRatio) ) { state.aspectRatio = null; }