From 3858bef185d7d3ff5b71c6662de835b5a128ab92 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Sat, 25 Feb 2023 11:56:09 +1100 Subject: [PATCH] fix(ui): clamp symmetry steps to generation steps Also renamed the variables to `horizontalSymmetrySteps` as `TimePercentage` is not accurate. --- .../src/common/util/parameterTranslation.ts | 12 +++--- .../Output/SymmetrySettings.tsx | 24 +++++------ .../components/MainParameters/MainSteps.tsx | 14 ++++++- .../ProcessButtons/InvokeButton.tsx | 2 + .../parameters/store/generationSlice.ts | 40 +++++++++++-------- 5 files changed, 56 insertions(+), 36 deletions(-) diff --git a/invokeai/frontend/src/common/util/parameterTranslation.ts b/invokeai/frontend/src/common/util/parameterTranslation.ts index 3ea9e3bb29..07b8ac8ea1 100644 --- a/invokeai/frontend/src/common/util/parameterTranslation.ts +++ b/invokeai/frontend/src/common/util/parameterTranslation.ts @@ -144,8 +144,8 @@ export const frontendToBackendParameters = ( variationAmount, width, shouldUseSymmetry, - horizontalSymmetryTimePercentage, - verticalSymmetryTimePercentage, + horizontalSymmetrySteps, + verticalSymmetrySteps, } = generationState; const { @@ -185,17 +185,17 @@ export const frontendToBackendParameters = ( // Symmetry Settings if (shouldUseSymmetry) { - if (horizontalSymmetryTimePercentage > 0) { + if (horizontalSymmetrySteps > 0) { generationParameters.h_symmetry_time_pct = Math.max( 0, - Math.min(1, horizontalSymmetryTimePercentage / steps) + Math.min(1, horizontalSymmetrySteps / steps) ); } - if (verticalSymmetryTimePercentage > 0) { + if (verticalSymmetrySteps > 0) { generationParameters.v_symmetry_time_pct = Math.max( 0, - Math.min(1, verticalSymmetryTimePercentage / steps) + Math.min(1, verticalSymmetrySteps / steps) ); } } diff --git a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/SymmetrySettings.tsx b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/SymmetrySettings.tsx index 37bb7bdbda..bf3e49d34d 100644 --- a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/SymmetrySettings.tsx +++ b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/SymmetrySettings.tsx @@ -2,18 +2,18 @@ import { RootState } from 'app/store'; import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import IAISlider from 'common/components/IAISlider'; import { - setHorizontalSymmetryTimePercentage, - setVerticalSymmetryTimePercentage, + setHorizontalSymmetrySteps, + setVerticalSymmetrySteps, } from 'features/parameters/store/generationSlice'; import { useTranslation } from 'react-i18next'; export default function SymmetrySettings() { - const horizontalSymmetryTimePercentage = useAppSelector( - (state: RootState) => state.generation.horizontalSymmetryTimePercentage + const horizontalSymmetrySteps = useAppSelector( + (state: RootState) => state.generation.horizontalSymmetrySteps ); - const verticalSymmetryTimePercentage = useAppSelector( - (state: RootState) => state.generation.verticalSymmetryTimePercentage + const verticalSymmetrySteps = useAppSelector( + (state: RootState) => state.generation.verticalSymmetrySteps ); const steps = useAppSelector((state: RootState) => state.generation.steps); @@ -26,28 +26,28 @@ export default function SymmetrySettings() { <> dispatch(setHorizontalSymmetryTimePercentage(v))} + value={horizontalSymmetrySteps} + onChange={(v) => dispatch(setHorizontalSymmetrySteps(v))} min={0} max={steps} step={1} withInput withSliderMarks withReset - handleReset={() => dispatch(setHorizontalSymmetryTimePercentage(0))} + handleReset={() => dispatch(setHorizontalSymmetrySteps(0))} sliderMarkRightOffset={-6} > dispatch(setVerticalSymmetryTimePercentage(v))} + value={verticalSymmetrySteps} + onChange={(v) => dispatch(setVerticalSymmetrySteps(v))} min={0} max={steps} step={1} withInput withSliderMarks withReset - handleReset={() => dispatch(setVerticalSymmetryTimePercentage(0))} + handleReset={() => dispatch(setVerticalSymmetrySteps(0))} sliderMarkRightOffset={-6} > diff --git a/invokeai/frontend/src/features/parameters/components/MainParameters/MainSteps.tsx b/invokeai/frontend/src/features/parameters/components/MainParameters/MainSteps.tsx index 3be575f7bf..79edd27924 100644 --- a/invokeai/frontend/src/features/parameters/components/MainParameters/MainSteps.tsx +++ b/invokeai/frontend/src/features/parameters/components/MainParameters/MainSteps.tsx @@ -3,7 +3,10 @@ import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import IAINumberInput from 'common/components/IAINumberInput'; import IAISlider from 'common/components/IAISlider'; -import { setSteps } from 'features/parameters/store/generationSlice'; +import { + clampSymmetrySteps, + setSteps, +} from 'features/parameters/store/generationSlice'; import { useTranslation } from 'react-i18next'; export default function MainSteps() { @@ -14,7 +17,13 @@ export default function MainSteps() { ); const { t } = useTranslation(); - const handleChangeSteps = (v: number) => dispatch(setSteps(v)); + const handleChangeSteps = (v: number) => { + dispatch(setSteps(v)); + }; + + const handleBlur = () => { + dispatch(clampSymmetrySteps()); + }; return shouldUseSliders ? ( ); } diff --git a/invokeai/frontend/src/features/parameters/components/ProcessButtons/InvokeButton.tsx b/invokeai/frontend/src/features/parameters/components/ProcessButtons/InvokeButton.tsx index 504714d329..682d43366e 100644 --- a/invokeai/frontend/src/features/parameters/components/ProcessButtons/InvokeButton.tsx +++ b/invokeai/frontend/src/features/parameters/components/ProcessButtons/InvokeButton.tsx @@ -5,6 +5,7 @@ import IAIButton, { IAIButtonProps } from 'common/components/IAIButton'; import IAIIconButton, { IAIIconButtonProps, } from 'common/components/IAIIconButton'; +import { clampSymmetrySteps } from 'features/parameters/store/generationSlice'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { useHotkeys } from 'react-hotkeys-hook'; import { useTranslation } from 'react-i18next'; @@ -30,6 +31,7 @@ export default function InvokeButton(props: InvokeButton) { useHotkeys( ['ctrl+enter', 'meta+enter'], () => { + dispatch(clampSymmetrySteps()); dispatch(generateImage(activeTabName)); }, { diff --git a/invokeai/frontend/src/features/parameters/store/generationSlice.ts b/invokeai/frontend/src/features/parameters/store/generationSlice.ts index e05c49f3f7..6554d64c8f 100644 --- a/invokeai/frontend/src/features/parameters/store/generationSlice.ts +++ b/invokeai/frontend/src/features/parameters/store/generationSlice.ts @@ -4,6 +4,7 @@ import * as InvokeAI from 'app/invokeai'; import { getPromptAndNegative } from 'common/util/getPromptAndNegative'; import promptToString from 'common/util/promptToString'; import { seedWeightsToString } from 'common/util/seedWeightPairs'; +import { clamp } from 'lodash'; export interface GenerationState { cfgScale: number; @@ -33,8 +34,8 @@ export interface GenerationState { variationAmount: number; width: number; shouldUseSymmetry: boolean; - horizontalSymmetryTimePercentage: number; - verticalSymmetryTimePercentage: number; + horizontalSymmetrySteps: number; + verticalSymmetrySteps: number; } const initialGenerationState: GenerationState = { @@ -64,8 +65,8 @@ const initialGenerationState: GenerationState = { variationAmount: 0.1, width: 512, shouldUseSymmetry: false, - horizontalSymmetryTimePercentage: 0, - verticalSymmetryTimePercentage: 0, + horizontalSymmetrySteps: 0, + verticalSymmetrySteps: 0, }; const initialState: GenerationState = initialGenerationState; @@ -99,6 +100,18 @@ export const generationSlice = createSlice({ setSteps: (state, action: PayloadAction) => { state.steps = action.payload; }, + clampSymmetrySteps: (state) => { + state.horizontalSymmetrySteps = clamp( + state.horizontalSymmetrySteps, + 0, + state.steps + ); + state.verticalSymmetrySteps = clamp( + state.verticalSymmetrySteps, + 0, + state.steps + ); + }, setCfgScale: (state, action: PayloadAction) => { state.cfgScale = action.payload; }, @@ -334,22 +347,17 @@ export const generationSlice = createSlice({ setShouldUseSymmetry: (state, action: PayloadAction) => { state.shouldUseSymmetry = action.payload; }, - setHorizontalSymmetryTimePercentage: ( - state, - action: PayloadAction - ) => { - state.horizontalSymmetryTimePercentage = action.payload; + setHorizontalSymmetrySteps: (state, action: PayloadAction) => { + state.horizontalSymmetrySteps = action.payload; }, - setVerticalSymmetryTimePercentage: ( - state, - action: PayloadAction - ) => { - state.verticalSymmetryTimePercentage = action.payload; + setVerticalSymmetrySteps: (state, action: PayloadAction) => { + state.verticalSymmetrySteps = action.payload; }, }, }); export const { + clampSymmetrySteps, clearInitialImage, resetParametersState, resetSeed, @@ -384,8 +392,8 @@ export const { setVariationAmount, setWidth, setShouldUseSymmetry, - setHorizontalSymmetryTimePercentage, - setVerticalSymmetryTimePercentage, + setHorizontalSymmetrySteps, + setVerticalSymmetrySteps, } = generationSlice.actions; export default generationSlice.reducer;