[WebUI] Symmetry Fix (#2745)

Symmetry now has a toggle on and off. Won't be passed if not enabled.
Symmetry settings now moved to their accordion.

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-7d7a19f3.js"></script>
+    <script type="module" crossorigin src="./assets/index-762ec810.js"></script>
     <link rel="stylesheet" href="./assets/index-14cb2922.css">
   </head>
 

invokeai/frontend/dist/locales/en.json

@@ -441,6 +441,7 @@
         "infillScalingHeader": "Infill and Scaling",
         "img2imgStrength": "Image To Image Strength",
         "toggleLoopback": "Toggle Loopback",
+        "symmetry": "Symmetry",
         "hSymmetryStep": "H Symmetry Step",
         "vSymmetryStep": "V Symmetry Step",
         "invoke": "Invoke",

invokeai/frontend/public/locales/en.json

@@ -441,6 +441,7 @@
         "infillScalingHeader": "Infill and Scaling",
         "img2imgStrength": "Image To Image Strength",
         "toggleLoopback": "Toggle Loopback",
+        "symmetry": "Symmetry",
         "hSymmetryStep": "H Symmetry Step",
         "vSymmetryStep": "V Symmetry Step",
         "invoke": "Invoke",

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

@@ -65,8 +65,8 @@ export type BackendGenerationParameters = {
   with_variations?: Array<Array<number>>;
   variation_amount?: number;
   enable_image_debugging?: boolean;
-  h_symmetry_time_pct: number;
+  h_symmetry_time_pct?: number;
-  v_symmetry_time_pct: number;
+  v_symmetry_time_pct?: number;
 };
 
 export type BackendEsrGanParameters = {
@@ -143,6 +143,7 @@ export const frontendToBackendParameters = (
     tileSize,
     variationAmount,
     width,
+    shouldUseSymmetry,
     horizontalSymmetryTimePercentage,
     verticalSymmetryTimePercentage,
   } = generationState;
@@ -169,23 +170,11 @@ 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;
 
-  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}]`;
   }
@@ -194,6 +183,23 @@ export const frontendToBackendParameters = (
     ? randomInt(NUMPY_RAND_MIN, NUMPY_RAND_MAX)
     : seed;
 
+  // Symmetry Settings
+  if (shouldUseSymmetry) {
+    if (horizontalSymmetryTimePercentage > 0) {
+      generationParameters.h_symmetry_time_pct = Math.max(
+        0,
+        Math.min(1, horizontalSymmetryTimePercentage / steps)
+      );
+    }
+
+    if (horizontalSymmetryTimePercentage > 0) {
+      generationParameters.v_symmetry_time_pct = Math.max(
+        0,
+        Math.min(1, verticalSymmetryTimePercentage / steps)
+      );
+    }
+  }
+
   // txt2img exclusive parameters
   if (generationMode === 'txt2img') {
     generationParameters.hires_fix = hiresFix;

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

@@ -1,12 +1,10 @@
 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,14 +1,12 @@
 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

@@ -32,7 +32,6 @@ export default function SymmetrySettings() {
         max={steps}
         step={1}
         withInput
-        inputWidth="6.5rem"
         withSliderMarks
         withReset
         handleReset={() => dispatch(setHorizontalSymmetryTimePercentage(0))}
@@ -46,7 +45,6 @@ export default function SymmetrySettings() {
         max={steps}
         step={1}
         withInput
-        inputWidth="6.5rem"
         withSliderMarks
         withReset
         handleReset={() => dispatch(setVerticalSymmetryTimePercentage(0))}

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

@@ -0,0 +1,19 @@
+import { RootState } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
+import IAISwitch from 'common/components/IAISwitch';
+import { setShouldUseSymmetry } from 'features/parameters/store/generationSlice';
+
+export default function SymmetryToggle() {
+  const shouldUseSymmetry = useAppSelector(
+    (state: RootState) => state.generation.shouldUseSymmetry
+  );
+
+  const dispatch = useAppDispatch();
+
+  return (
+    <IAISwitch
+      isChecked={shouldUseSymmetry}
+      onChange={(e) => dispatch(setShouldUseSymmetry(e.target.checked))}
+    />
+  );
+}

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

@@ -23,7 +23,7 @@ export default function Threshold() {
       withInput
       withReset
       withSliderMarks
-      inputWidth="6rem"
+      sliderMarkRightOffset={-4}
     />
   );
 }

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

@@ -32,6 +32,7 @@ export interface GenerationState {
   tileSize: number;
   variationAmount: number;
   width: number;
+  shouldUseSymmetry: boolean;
   horizontalSymmetryTimePercentage: number;
   verticalSymmetryTimePercentage: number;
 }
@@ -62,6 +63,7 @@ const initialGenerationState: GenerationState = {
   tileSize: 32,
   variationAmount: 0.1,
   width: 512,
+  shouldUseSymmetry: false,
   horizontalSymmetryTimePercentage: 0,
   verticalSymmetryTimePercentage: 0,
 };
@@ -329,6 +331,9 @@ export const generationSlice = createSlice({
     setInfillMethod: (state, action: PayloadAction<string>) => {
       state.infillMethod = action.payload;
     },
+    setShouldUseSymmetry: (state, action: PayloadAction<boolean>) => {
+      state.shouldUseSymmetry = action.payload;
+    },
     setHorizontalSymmetryTimePercentage: (
       state,
       action: PayloadAction<number>
@@ -378,6 +383,7 @@ export const {
   setTileSize,
   setVariationAmount,
   setWidth,
+  setShouldUseSymmetry,
   setHorizontalSymmetryTimePercentage,
   setVerticalSymmetryTimePercentage,
 } = generationSlice.actions;

invokeai/frontend/src/features/ui/components/ImageToImage/ImageToImagePanel.tsx

@@ -3,6 +3,8 @@ import { Feature } from 'app/features';
 import FaceRestoreSettings from 'features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreSettings';
 import FaceRestoreToggle from 'features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreToggle';
 import ImageToImageOutputSettings from 'features/parameters/components/AdvancedParameters/Output/ImageToImageOutputSettings';
+import SymmetrySettings from 'features/parameters/components/AdvancedParameters/Output/SymmetrySettings';
+import SymmetryToggle from 'features/parameters/components/AdvancedParameters/Output/SymmetryToggle';
 import SeedSettings from 'features/parameters/components/AdvancedParameters/Seed/SeedSettings';
 import UpscaleSettings from 'features/parameters/components/AdvancedParameters/Upscale/UpscaleSettings';
 import UpscaleToggle from 'features/parameters/components/AdvancedParameters/Upscale/UpscaleToggle';
@@ -44,6 +46,11 @@ export default function ImageToImagePanel() {
       content: <UpscaleSettings />,
       additionalHeaderComponents: <UpscaleToggle />,
     },
+    symmetry: {
+      header: `${t('parameters.symmetry')}`,
+      content: <SymmetrySettings />,
+      additionalHeaderComponents: <SymmetryToggle />,
+    },
     other: {
       header: `${t('parameters.otherOptions')}`,
       feature: Feature.OTHER,

invokeai/frontend/src/features/ui/components/TextToImage/TextToImagePanel.tsx

@@ -3,6 +3,8 @@ import { Feature } from 'app/features';
 import FaceRestoreSettings from 'features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreSettings';
 import FaceRestoreToggle from 'features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreToggle';
 import OutputSettings from 'features/parameters/components/AdvancedParameters/Output/OutputSettings';
+import SymmetrySettings from 'features/parameters/components/AdvancedParameters/Output/SymmetrySettings';
+import SymmetryToggle from 'features/parameters/components/AdvancedParameters/Output/SymmetryToggle';
 import SeedSettings from 'features/parameters/components/AdvancedParameters/Seed/SeedSettings';
 import UpscaleSettings from 'features/parameters/components/AdvancedParameters/Upscale/UpscaleSettings';
 import UpscaleToggle from 'features/parameters/components/AdvancedParameters/Upscale/UpscaleToggle';
@@ -43,6 +45,11 @@ export default function TextToImagePanel() {
       content: <UpscaleSettings />,
       additionalHeaderComponents: <UpscaleToggle />,
     },
+    symmetry: {
+      header: `${t('parameters.symmetry')}`,
+      content: <SymmetrySettings />,
+      additionalHeaderComponents: <SymmetryToggle />,
+    },
     other: {
       header: `${t('parameters.otherOptions')}`,
       feature: Feature.OTHER,

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

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

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

@@ -5,6 +5,8 @@ import BoundingBoxSettings from 'features/parameters/components/AdvancedParamete
 import InfillAndScalingSettings from 'features/parameters/components/AdvancedParameters/Canvas/InfillAndScalingSettings';
 import SeamCorrectionSettings from 'features/parameters/components/AdvancedParameters/Canvas/SeamCorrection/SeamCorrectionSettings';
 import ImageToImageStrength from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageStrength';
+import SymmetrySettings from 'features/parameters/components/AdvancedParameters/Output/SymmetrySettings';
+import SymmetryToggle from 'features/parameters/components/AdvancedParameters/Output/SymmetryToggle';
 import SeedSettings from 'features/parameters/components/AdvancedParameters/Seed/SeedSettings';
 import GenerateVariationsToggle from 'features/parameters/components/AdvancedParameters/Variations/GenerateVariations';
 import VariationsSettings from 'features/parameters/components/AdvancedParameters/Variations/VariationsSettings';
@@ -15,7 +17,6 @@ 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();
@@ -47,9 +48,10 @@ export default function UnifiedCanvasPanel() {
       content: <VariationsSettings />,
       additionalHeaderComponents: <GenerateVariationsToggle />,
     },
-    output: {
+    symmetry: {
-      header: `${t('parameters.otherOptions')}`,
+      header: `${t('parameters.symmetry')}`,
-      content: <UnifiedCanvasOtherSettings />,
+      content: <SymmetrySettings />,
+      additionalHeaderComponents: <SymmetryToggle />,
     },
   };