fix(ui): clamp symmetry steps to generation steps

Also renamed the variables to `horizontalSymmetrySteps` as `TimePercentage` is not accurate.

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

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() {
     <>
       <IAISlider
         label={t('parameters.hSymmetryStep')}
-        value={horizontalSymmetryTimePercentage}
-        onChange={(v) => 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}
       ></IAISlider>
       <IAISlider
         label={t('parameters.vSymmetryStep')}
-        value={verticalSymmetryTimePercentage}
-        onChange={(v) => 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}
       ></IAISlider>
     </>

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 ? (
     <IAISlider
@@ -41,6 +50,7 @@ export default function MainSteps() {
       width="auto"
       styleClass="main-settings-block"
       textAlign="center"
+      onBlur={handleBlur}
     />
   );
 }

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));
     },
     {

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<number>) => {
       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<number>) => {
       state.cfgScale = action.payload;
     },
@@ -334,22 +347,17 @@ export const generationSlice = createSlice({
     setShouldUseSymmetry: (state, action: PayloadAction<boolean>) => {
       state.shouldUseSymmetry = action.payload;
     },
-    setHorizontalSymmetryTimePercentage: (
-      state,
-      action: PayloadAction<number>
-    ) => {
-      state.horizontalSymmetryTimePercentage = action.payload;
+    setHorizontalSymmetrySteps: (state, action: PayloadAction<number>) => {
+      state.horizontalSymmetrySteps = action.payload;
     },
-    setVerticalSymmetryTimePercentage: (
-      state,
-      action: PayloadAction<number>
-    ) => {
-      state.verticalSymmetryTimePercentage = action.payload;
+    setVerticalSymmetrySteps: (state, action: PayloadAction<number>) => {
+      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;