[WebUI] Symmetry Settings (#2741)

Add the newly added Symmetry settings to the WebUI.

invokeai/frontend/dist/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>InvokeAI - A Stable Diffusion Toolkit</title>
     <link rel="shortcut icon" type="icon" href="./assets/favicon-0d253ced.ico" />
-    <script type="module" crossorigin src="./assets/index-53ecf883.js"></script>
+    <script type="module" crossorigin src="./assets/index-7d7a19f3.js"></script>
     <link rel="stylesheet" href="./assets/index-14cb2922.css">
   </head>
 

invokeai/frontend/dist/locales/en.json

@@ -441,6 +441,8 @@
         "infillScalingHeader": "Infill and Scaling",
         "img2imgStrength": "Image To Image Strength",
         "toggleLoopback": "Toggle Loopback",
+        "hSymmetryStep": "H Symmetry Step",
+        "vSymmetryStep": "V Symmetry Step",
         "invoke": "Invoke",
         "cancel": {
             "immediate": "Cancel immediately",

invokeai/frontend/public/locales/en.json

@@ -441,6 +441,8 @@
         "infillScalingHeader": "Infill and Scaling",
         "img2imgStrength": "Image To Image Strength",
         "toggleLoopback": "Toggle Loopback",
+        "hSymmetryStep": "H Symmetry Step",
+        "vSymmetryStep": "V Symmetry Step",
         "invoke": "Invoke",
         "cancel": {
             "immediate": "Cancel immediately",

invokeai/frontend/src/common/util/parameterTranslation.ts

@@ -65,6 +65,8 @@ export type BackendGenerationParameters = {
   with_variations?: Array<Array<number>>;
   variation_amount?: number;
   enable_image_debugging?: boolean;
+  h_symmetry_time_pct: number;
+  v_symmetry_time_pct: number;
 };
 
 export type BackendEsrGanParameters = {
@@ -141,6 +143,8 @@ export const frontendToBackendParameters = (
     tileSize,
     variationAmount,
     width,
+    horizontalSymmetryTimePercentage,
+    verticalSymmetryTimePercentage,
   } = generationState;
 
   const {
@@ -165,13 +169,22 @@ export const frontendToBackendParameters = (
     save_intermediates: saveIntermediatesInterval,
     generation_mode: generationMode,
     init_mask: '',
+    h_symmetry_time_pct: horizontalSymmetryTimePercentage,
+    v_symmetry_time_pct: verticalSymmetryTimePercentage,
   };
 
   let esrganParameters: false | BackendEsrGanParameters = false;
   let facetoolParameters: false | BackendFacetoolParameters = false;
 
-  // Multiplying it by 10000 so the Slider can have values between 0 and 1 which makes more sense
-  generationParameters.threshold = threshold * 1000;
+  generationParameters.h_symmetry_time_pct = Math.max(
+    0,
+    Math.min(1, horizontalSymmetryTimePercentage / steps)
+  );
+
+  generationParameters.v_symmetry_time_pct = Math.max(
+    0,
+    Math.min(1, verticalSymmetryTimePercentage / steps)
+  );
 
   if (negativePrompt !== '') {
     generationParameters.prompt = `${prompt} [${negativePrompt}]`;

invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/ImageToImageOutputSettings.tsx

@@ -1,10 +1,12 @@
 import { Flex } from '@chakra-ui/react';
 import SeamlessSettings from './SeamlessSettings';
+import SymmetrySettings from './SymmetrySettings';
 
 const ImageToImageOutputSettings = () => {
   return (
     <Flex gap={2} direction="column">
       <SeamlessSettings />
+      <SymmetrySettings />
     </Flex>
   );
 };

invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/OutputSettings.tsx

@@ -1,12 +1,14 @@
 import { Flex } from '@chakra-ui/react';
 import HiresSettings from './HiresSettings';
 import SeamlessSettings from './SeamlessSettings';
+import SymmetrySettings from './SymmetrySettings';
 
 const OutputSettings = () => {
   return (
     <Flex gap={2} direction="column">
       <SeamlessSettings />
       <HiresSettings />
+      <SymmetrySettings />
     </Flex>
   );
 };

invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/SymmetrySettings.tsx

@@ -0,0 +1,57 @@
+import { RootState } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
+import IAISlider from 'common/components/IAISlider';
+import {
+  setHorizontalSymmetryTimePercentage,
+  setVerticalSymmetryTimePercentage,
+} from 'features/parameters/store/generationSlice';
+import { useTranslation } from 'react-i18next';
+
+export default function SymmetrySettings() {
+  const horizontalSymmetryTimePercentage = useAppSelector(
+    (state: RootState) => state.generation.horizontalSymmetryTimePercentage
+  );
+
+  const verticalSymmetryTimePercentage = useAppSelector(
+    (state: RootState) => state.generation.verticalSymmetryTimePercentage
+  );
+
+  const steps = useAppSelector((state: RootState) => state.generation.steps);
+
+  const dispatch = useAppDispatch();
+
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <IAISlider
+        label={t('parameters.hSymmetryStep')}
+        value={horizontalSymmetryTimePercentage}
+        onChange={(v) => dispatch(setHorizontalSymmetryTimePercentage(v))}
+        min={0}
+        max={steps}
+        step={1}
+        withInput
+        inputWidth="6.5rem"
+        withSliderMarks
+        withReset
+        handleReset={() => dispatch(setHorizontalSymmetryTimePercentage(0))}
+        sliderMarkRightOffset={-6}
+      ></IAISlider>
+      <IAISlider
+        label={t('parameters.vSymmetryStep')}
+        value={verticalSymmetryTimePercentage}
+        onChange={(v) => dispatch(setVerticalSymmetryTimePercentage(v))}
+        min={0}
+        max={steps}
+        step={1}
+        withInput
+        inputWidth="6.5rem"
+        withSliderMarks
+        withReset
+        handleReset={() => dispatch(setVerticalSymmetryTimePercentage(0))}
+        sliderMarkRightOffset={-6}
+      ></IAISlider>
+    </>
+  );
+}

invokeai/frontend/src/features/parameters/components/AdvancedParameters/Seed/Threshold.tsx

@@ -15,8 +15,8 @@ export default function Threshold() {
     <IAISlider
       label={t('parameters.noiseThreshold')}
       min={0}
-      max={1}
-      step={0.005}
+      max={20}
+      step={0.1}
       onChange={(v) => dispatch(setThreshold(v))}
       handleReset={() => dispatch(setThreshold(0))}
       value={threshold}

invokeai/frontend/src/features/parameters/store/generationSlice.ts

@@ -32,6 +32,8 @@ export interface GenerationState {
   tileSize: number;
   variationAmount: number;
   width: number;
+  horizontalSymmetryTimePercentage: number;
+  verticalSymmetryTimePercentage: number;
 }
 
 const initialGenerationState: GenerationState = {
@@ -60,6 +62,8 @@ const initialGenerationState: GenerationState = {
   tileSize: 32,
   variationAmount: 0.1,
   width: 512,
+  horizontalSymmetryTimePercentage: 0,
+  verticalSymmetryTimePercentage: 0,
 };
 
 const initialState: GenerationState = initialGenerationState;
@@ -325,6 +329,18 @@ export const generationSlice = createSlice({
     setInfillMethod: (state, action: PayloadAction<string>) => {
       state.infillMethod = action.payload;
     },
+    setHorizontalSymmetryTimePercentage: (
+      state,
+      action: PayloadAction<number>
+    ) => {
+      state.horizontalSymmetryTimePercentage = action.payload;
+    },
+    setVerticalSymmetryTimePercentage: (
+      state,
+      action: PayloadAction<number>
+    ) => {
+      state.verticalSymmetryTimePercentage = action.payload;
+    },
   },
 });
 
@@ -362,6 +378,8 @@ export const {
   setTileSize,
   setVariationAmount,
   setWidth,
+  setHorizontalSymmetryTimePercentage,
+  setVerticalSymmetryTimePercentage,
 } = generationSlice.actions;
 
 export default generationSlice.reducer;

invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasOtherSettings.tsx

@@ -0,0 +1,5 @@
+import SymmetrySettings from 'features/parameters/components/AdvancedParameters/Output/SymmetrySettings';
+
+export default function UnifiedCanvasOtherSettings() {
+  return <SymmetrySettings />;
+}

invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasPanel.tsx

@@ -15,6 +15,7 @@ import NegativePromptInput from 'features/parameters/components/PromptInput/Nega
 import PromptInput from 'features/parameters/components/PromptInput/PromptInput';
 import InvokeOptionsPanel from 'features/ui/components/InvokeParametersPanel';
 import { useTranslation } from 'react-i18next';
+import UnifiedCanvasOtherSettings from './UnifiedCanvasOtherSettings';
 
 export default function UnifiedCanvasPanel() {
   const { t } = useTranslation();
@@ -46,6 +47,10 @@ export default function UnifiedCanvasPanel() {
       content: <VariationsSettings />,
       additionalHeaderComponents: <GenerateVariationsToggle />,
     },
+    output: {
+      header: `${t('parameters.otherOptions')}`,
+      content: <UnifiedCanvasOtherSettings />,
+    },
   };
 
   const unifiedCanvasImg2ImgAccordion = {