Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add Aspect Ratio

Browse Source
This commit is contained in:
blessedcoolant 2023-07-09 23:18:06 +12:00
parent 344d87c9f1
commit d01d5b6fa9
11 changed files with 140 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
invokeai/frontend/web/public/locales/en.json
View File

@ -528,7 +528,8 @@
"hidePreview": "Hide Preview",
"showPreview": "Show Preview",
"controlNetControlMode": "Control Mode",
"clipSkip": "Clip Skip"
"clipSkip": "Clip Skip",
"aspectRatio": "Aspect Ratio"
},
"settings": {
"models": "Models",

49
invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamAspectRatio.tsx Normal file
View File

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

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

@ -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

35
invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSize.tsx Normal file
View File

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

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

@ -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

10
invokeai/frontend/web/src/features/parameters/store/generationSlice.ts
View File

@ -2,10 +2,14 @@ import type { PayloadAction } from '@reduxjs/toolkit';
import { createSlice } from '@reduxjs/toolkit';
import { DEFAULT_SCHEDULER_NAME } from 'app/constants';
import { configChanged } from 'features/system/store/configSlice';
import { setShouldShowAdvancedOptions } from 'features/ui/store/uiSlice';
import {
setAspectRatio,
setShouldShowAdvancedOptions,
} from 'features/ui/store/uiSlice';
import { clamp } from 'lodash-es';
import { ImageDTO } from 'services/api/types';
import { clipSkipMap } from '../components/Parameters/Advanced/ParamClipSkip';
import { roundToEight } from '../components/Parameters/Core/ParamAspectRatio';
import {
CfgScaleParam,
HeightParam,
@ -262,6 +266,10 @@ export const generationSlice = createSlice({
const advancedOptionsStatus = action.payload;
if (!advancedOptionsStatus) state.clipSkip = 0;
});
builder.addCase(setAspectRatio, (state, action) => {
const ratio = action.payload;
if (ratio) state.height = roundToEight(state.width / ratio);
});
},
});

15
invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx
View File

@ -4,11 +4,10 @@ import { useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAICollapse from 'common/components/IAICollapse';
import ParamCFGScale from 'features/parameters/components/Parameters/Core/ParamCFGScale';
import ParamHeight from 'features/parameters/components/Parameters/Core/ParamHeight';
import ParamIterations from 'features/parameters/components/Parameters/Core/ParamIterations';
import ParamModelandVAEandScheduler from 'features/parameters/components/Parameters/Core/ParamModelandVAEandScheduler';
import ParamSize from 'features/parameters/components/Parameters/Core/ParamSize';
import ParamSteps from 'features/parameters/components/Parameters/Core/ParamSteps';
import ParamWidth from 'features/parameters/components/Parameters/Core/ParamWidth';
import ImageToImageFit from 'features/parameters/components/Parameters/ImageToImage/ImageToImageFit';
import ImageToImageStrength from 'features/parameters/components/Parameters/ImageToImage/ImageToImageStrength';
import ParamSeedFull from 'features/parameters/components/Parameters/Seed/ParamSeedFull';
@ -47,15 +46,14 @@ const ImageToImageTabCoreParameters = () => {
>
{shouldUseSliders ? (
<>
<ParamIterations />
<ParamSteps />
<ParamCFGScale />
<ParamModelandVAEandScheduler />
<Box pt={2}>
<ParamSeedFull />
</Box>
<ParamIterations />
<ParamSteps />
<ParamCFGScale />
<ParamWidth isDisabled={!shouldFitToWidthHeight} />
<ParamHeight isDisabled={!shouldFitToWidthHeight} />
<ParamSize />
</>
) : (
<>
@ -68,8 +66,7 @@ const ImageToImageTabCoreParameters = () => {
<Box pt={2}>
<ParamSeedFull />
</Box>
<ParamWidth isDisabled={!shouldFitToWidthHeight} />
<ParamHeight isDisabled={!shouldFitToWidthHeight} />
<ParamSize />
</>
)}
<ImageToImageStrength />

15
invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx
View File

@ -5,11 +5,10 @@ import { useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAICollapse from 'common/components/IAICollapse';
import ParamCFGScale from 'features/parameters/components/Parameters/Core/ParamCFGScale';
import ParamHeight from 'features/parameters/components/Parameters/Core/ParamHeight';
import ParamIterations from 'features/parameters/components/Parameters/Core/ParamIterations';
import ParamModelandVAEandScheduler from 'features/parameters/components/Parameters/Core/ParamModelandVAEandScheduler';
import ParamSize from 'features/parameters/components/Parameters/Core/ParamSize';
import ParamSteps from 'features/parameters/components/Parameters/Core/ParamSteps';
import ParamWidth from 'features/parameters/components/Parameters/Core/ParamWidth';
import ParamSeedFull from 'features/parameters/components/Parameters/Seed/ParamSeedFull';
import { memo } from 'react';
@ -43,15 +42,14 @@ const TextToImageTabCoreParameters = () => {
>
{shouldUseSliders ? (
<>
<ParamIterations />
<ParamSteps />
<ParamCFGScale />
<ParamModelandVAEandScheduler />
<Box pt={2}>
<ParamSeedFull />
</Box>
<ParamIterations />
<ParamSteps />
<ParamCFGScale />
<ParamWidth />
<ParamHeight />
<ParamSize />
</>
) : (
<>
@ -64,8 +62,7 @@ const TextToImageTabCoreParameters = () => {
<Box pt={2}>
<ParamSeedFull />
</Box>
<ParamWidth />
<ParamHeight />
<ParamSize />
</>
)}
</Flex>

6
invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx
View File

@ -44,13 +44,13 @@ const UnifiedCanvasCoreParameters = () => {
>
{shouldUseSliders ? (
<>
<ParamIterations />
<ParamSteps />
<ParamCFGScale />
<ParamModelandVAEandScheduler />
<Box pt={2}>
<ParamSeedFull />
</Box>
<ParamIterations />
<ParamSteps />
<ParamCFGScale />
<ParamBoundingBoxWidth />
<ParamBoundingBoxHeight />
</>

5
invokeai/frontend/web/src/features/ui/store/uiSlice.ts
View File

@ -21,6 +21,7 @@ export const initialUIState: UIState = {
shouldShowProgressInViewer: true,
shouldShowEmbeddingPicker: false,
shouldShowAdvancedOptions: false,
aspectRatio: null,
favoriteSchedulers: [],
};
@ -104,6 +105,9 @@ export const uiSlice = createSlice({
setShouldShowAdvancedOptions: (state, action: PayloadAction<boolean>) => {
state.shouldShowAdvancedOptions = action.payload;
},
setAspectRatio: (state, action: PayloadAction<number | null>) => {
state.aspectRatio = action.payload;
},
},
extraReducers(builder) {
builder.addCase(initialImageChanged, (state) => {
@ -132,6 +136,7 @@ export const {
favoriteSchedulersChanged,
toggleEmbeddingPicker,
setShouldShowAdvancedOptions,
setAspectRatio,
} = uiSlice.actions;
export default uiSlice.reducer;

1
invokeai/frontend/web/src/features/ui/store/uiTypes.ts
View File

@ -29,5 +29,6 @@ export interface UIState {
shouldShowProgressInViewer: boolean;
shouldShowEmbeddingPicker: boolean;
shouldShowAdvancedOptions: boolean;
aspectRatio: number | null;
favoriteSchedulers: SchedulerParam[];
}