feat(ui): improve accordion ux

- Accordions now may be opened or closed regardless of whether or not their contents are enabled or active
- Accordions have a short text indicator alerting the user if their contents are enabled, either a simple `Enabled` or, for accordions like LoRA or ControlNet, `X Active` if any are active

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxCollapse.tsx

@@ -1,20 +1,15 @@
-import { Flex, useDisclosure } from '@chakra-ui/react';
-import { useTranslation } from 'react-i18next';
+import { Flex } from '@chakra-ui/react';
 import IAICollapse from 'common/components/IAICollapse';
 import { memo } from 'react';
-import ParamBoundingBoxWidth from './ParamBoundingBoxWidth';
+import { useTranslation } from 'react-i18next';
 import ParamBoundingBoxHeight from './ParamBoundingBoxHeight';
+import ParamBoundingBoxWidth from './ParamBoundingBoxWidth';
 
 const ParamBoundingBoxCollapse = () => {
   const { t } = useTranslation();
-  const { isOpen, onToggle } = useDisclosure();
 
   return (
-    <IAICollapse
-      label={t('parameters.boundingBoxHeader')}
-      isOpen={isOpen}
-      onToggle={onToggle}
-    >
+    <IAICollapse label={t('parameters.boundingBoxHeader')}>
       <Flex sx={{ gap: 2, flexDirection: 'column' }}>
         <ParamBoundingBoxWidth />
         <ParamBoundingBoxHeight />

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse.tsx

@@ -1,4 +1,4 @@
-import { Flex, useDisclosure } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -6,19 +6,14 @@ import IAICollapse from 'common/components/IAICollapse';
 import ParamInfillMethod from './ParamInfillMethod';
 import ParamInfillTilesize from './ParamInfillTilesize';
 import ParamScaleBeforeProcessing from './ParamScaleBeforeProcessing';
-import ParamScaledWidth from './ParamScaledWidth';
 import ParamScaledHeight from './ParamScaledHeight';
+import ParamScaledWidth from './ParamScaledWidth';
 
 const ParamInfillCollapse = () => {
   const { t } = useTranslation();
-  const { isOpen, onToggle } = useDisclosure();
 
   return (
-    <IAICollapse
-      label={t('parameters.infillScalingHeader')}
-      isOpen={isOpen}
-      onToggle={onToggle}
-    >
+    <IAICollapse label={t('parameters.infillScalingHeader')}>
       <Flex sx={{ gap: 2, flexDirection: 'column' }}>
         <ParamInfillMethod />
         <ParamInfillTilesize />

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamCorrection/ParamSeamCorrectionCollapse.tsx

@@ -1,22 +1,16 @@
+import IAICollapse from 'common/components/IAICollapse';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import ParamSeamBlur from './ParamSeamBlur';
 import ParamSeamSize from './ParamSeamSize';
 import ParamSeamSteps from './ParamSeamSteps';
 import ParamSeamStrength from './ParamSeamStrength';
-import { useDisclosure } from '@chakra-ui/react';
-import { useTranslation } from 'react-i18next';
-import IAICollapse from 'common/components/IAICollapse';
-import { memo } from 'react';
 
 const ParamSeamCorrectionCollapse = () => {
   const { t } = useTranslation();
-  const { isOpen, onToggle } = useDisclosure();
 
   return (
-    <IAICollapse
-      label={t('parameters.seamCorrectionHeader')}
-      isOpen={isOpen}
-      onToggle={onToggle}
-    >
+    <IAICollapse label={t('parameters.seamCorrectionHeader')}>
       <ParamSeamSize />
       <ParamSeamBlur />
       <ParamSeamStrength />

invokeai/frontend/web/src/features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse.tsx

@@ -1,41 +1,45 @@
 import { Divider, Flex } from '@chakra-ui/react';
-import { useTranslation } from 'react-i18next';
-import IAICollapse from 'common/components/IAICollapse';
-import { Fragment, memo, useCallback } from 'react';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { createSelector } from '@reduxjs/toolkit';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAIButton from 'common/components/IAIButton';
+import IAICollapse from 'common/components/IAICollapse';
+import ControlNet from 'features/controlNet/components/ControlNet';
+import ParamControlNetFeatureToggle from 'features/controlNet/components/parameters/ParamControlNetFeatureToggle';
 import {
   controlNetAdded,
   controlNetSelector,
-  isControlNetEnabledToggled,
 } from 'features/controlNet/store/controlNetSlice';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { map } from 'lodash-es';
-import { v4 as uuidv4 } from 'uuid';
+import { getValidControlNets } from 'features/controlNet/util/getValidControlNets';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
-import IAIButton from 'common/components/IAIButton';
-import ControlNet from 'features/controlNet/components/ControlNet';
+import { map } from 'lodash-es';
+import { Fragment, memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { v4 as uuidv4 } from 'uuid';
 
 const selector = createSelector(
   controlNetSelector,
   (controlNet) => {
     const { controlNets, isEnabled } = controlNet;
 
-    return { controlNetsArray: map(controlNets), isEnabled };
+    const validControlNets = getValidControlNets(controlNets);
+
+    const activeLabel =
+      isEnabled && validControlNets.length > 0
+        ? `${validControlNets.length} Active`
+        : undefined;
+
+    return { controlNetsArray: map(controlNets), activeLabel };
   },
   defaultSelectorOptions
 );
 
 const ParamControlNetCollapse = () => {
   const { t } = useTranslation();
-  const { controlNetsArray, isEnabled } = useAppSelector(selector);
+  const { controlNetsArray, activeLabel } = useAppSelector(selector);
   const isControlNetDisabled = useFeatureStatus('controlNet').isFeatureDisabled;
   const dispatch = useAppDispatch();
 
-  const handleClickControlNetToggle = useCallback(() => {
-    dispatch(isControlNetEnabledToggled());
-  }, [dispatch]);
-
   const handleClickedAddControlNet = useCallback(() => {
     dispatch(controlNetAdded({ controlNetId: uuidv4() }));
   }, [dispatch]);
@@ -45,13 +49,9 @@ const ParamControlNetCollapse = () => {
   }
 
   return (
-    <IAICollapse
-      label={'ControlNet'}
-      isOpen={isEnabled}
-      onToggle={handleClickControlNetToggle}
-      withSwitch
-    >
+    <IAICollapse label="ControlNet" activeLabel={activeLabel}>
       <Flex sx={{ flexDir: 'column', gap: 3 }}>
+        <ParamControlNetFeatureToggle />
         {controlNetsArray.map((c, i) => (
           <Fragment key={c.controlNetId}>
             {i > 0 && <Divider />}

invokeai/frontend/web/src/features/parameters/components/Parameters/Hires/ParamHiresCollapse.tsx

@@ -1,37 +1,39 @@
 import { Flex } from '@chakra-ui/react';
-import { useTranslation } from 'react-i18next';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { RootState } from 'app/store/store';
+import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from 'app/store/store';
+import { useAppSelector } from 'app/store/storeHooks';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAICollapse from 'common/components/IAICollapse';
-import { memo } from 'react';
-import { ParamHiresStrength } from './ParamHiresStrength';
-import { setHiresFix } from 'features/parameters/store/postprocessingSlice';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ParamHiresStrength } from './ParamHiresStrength';
+import { ParamHiresToggle } from './ParamHiresToggle';
+
+const selector = createSelector(
+  stateSelector,
+  (state) => {
+    const activeLabel = state.postprocessing.hiresFix ? 'Enabled' : undefined;
+
+    return { activeLabel };
+  },
+  defaultSelectorOptions
+);
 
 const ParamHiresCollapse = () => {
   const { t } = useTranslation();
-  const hiresFix = useAppSelector(
-    (state: RootState) => state.postprocessing.hiresFix
-  );
+  const { activeLabel } = useAppSelector(selector);
 
   const isHiresEnabled = useFeatureStatus('hires').isFeatureEnabled;
 
-  const dispatch = useAppDispatch();
-
-  const handleToggle = () => dispatch(setHiresFix(!hiresFix));
-
   if (!isHiresEnabled) {
     return null;
   }
 
   return (
-    <IAICollapse
-      label={t('parameters.hiresOptim')}
-      isOpen={hiresFix}
-      onToggle={handleToggle}
-      withSwitch
-    >
+    <IAICollapse label={t('parameters.hiresOptim')} activeLabel={activeLabel}>
       <Flex sx={{ gap: 2, flexDirection: 'column' }}>
+        <ParamHiresToggle />
         <ParamHiresStrength />
       </Flex>
     </IAICollapse>

invokeai/frontend/web/src/features/parameters/components/Parameters/Hires/ParamHiresToggle.tsx

@@ -23,7 +23,6 @@ export const ParamHiresToggle = () => {
   return (
     <IAISwitch
       label={t('parameters.hiresOptim')}
-      fontSize="md"
       isChecked={hiresFix}
       onChange={handleChangeHiresFix}
     />

invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseCollapse.tsx

@@ -1,27 +1,33 @@
-import { useTranslation } from 'react-i18next';
 import { Flex } from '@chakra-ui/react';
+import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from 'app/store/store';
+import { useAppSelector } from 'app/store/storeHooks';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAICollapse from 'common/components/IAICollapse';
-import ParamPerlinNoise from './ParamPerlinNoise';
-import ParamNoiseThreshold from './ParamNoiseThreshold';
-import { RootState } from 'app/store/store';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { setShouldUseNoiseSettings } from 'features/parameters/store/generationSlice';
-import { memo } from 'react';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import ParamNoiseThreshold from './ParamNoiseThreshold';
+import { ParamNoiseToggle } from './ParamNoiseToggle';
+import ParamPerlinNoise from './ParamPerlinNoise';
+
+const selector = createSelector(
+  stateSelector,
+  (state) => {
+    const { shouldUseNoiseSettings } = state.generation;
+    return {
+      activeLabel: shouldUseNoiseSettings ? 'Enabled' : undefined,
+    };
+  },
+  defaultSelectorOptions
+);
 
 const ParamNoiseCollapse = () => {
   const { t } = useTranslation();
 
   const isNoiseEnabled = useFeatureStatus('noise').isFeatureEnabled;
 
-  const shouldUseNoiseSettings = useAppSelector(
-    (state: RootState) => state.generation.shouldUseNoiseSettings
-  );
-
-  const dispatch = useAppDispatch();
-
-  const handleToggle = () =>
-    dispatch(setShouldUseNoiseSettings(!shouldUseNoiseSettings));
+  const { activeLabel } = useAppSelector(selector);
 
   if (!isNoiseEnabled) {
     return null;
@@ -30,11 +36,10 @@ const ParamNoiseCollapse = () => {
   return (
     <IAICollapse
       label={t('parameters.noiseSettings')}
-      isOpen={shouldUseNoiseSettings}
-      onToggle={handleToggle}
-      withSwitch
+      activeLabel={activeLabel}
     >
       <Flex sx={{ gap: 2, flexDirection: 'column' }}>
+        <ParamNoiseToggle />
         <ParamPerlinNoise />
         <ParamNoiseThreshold />
       </Flex>

invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseThreshold.tsx

@@ -1,18 +1,31 @@
-import { RootState } from 'app/store/store';
+import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAISlider from 'common/components/IAISlider';
 import { setThreshold } from 'features/parameters/store/generationSlice';
 import { useTranslation } from 'react-i18next';
 
+const selector = createSelector(
+  stateSelector,
+  (state) => {
+    const { shouldUseNoiseSettings, threshold } = state.generation;
+    return {
+      isDisabled: !shouldUseNoiseSettings,
+      threshold,
+    };
+  },
+  defaultSelectorOptions
+);
+
 export default function ParamNoiseThreshold() {
   const dispatch = useAppDispatch();
-  const threshold = useAppSelector(
-    (state: RootState) => state.generation.threshold
-  );
+  const { threshold, isDisabled } = useAppSelector(selector);
   const { t } = useTranslation();
 
   return (
     <IAISlider
+      isDisabled={isDisabled}
       label={t('parameters.noiseThreshold')}
       min={0}
       max={20}

invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseToggle.tsx

@@ -0,0 +1,27 @@
+import type { RootState } from 'app/store/store';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAISwitch from 'common/components/IAISwitch';
+import { setShouldUseNoiseSettings } from 'features/parameters/store/generationSlice';
+import { ChangeEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const ParamNoiseToggle = () => {
+  const dispatch = useAppDispatch();
+
+  const shouldUseNoiseSettings = useAppSelector(
+    (state: RootState) => state.generation.shouldUseNoiseSettings
+  );
+
+  const { t } = useTranslation();
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) =>
+    dispatch(setShouldUseNoiseSettings(e.target.checked));
+
+  return (
+    <IAISwitch
+      label="Enable Noise Settings"
+      isChecked={shouldUseNoiseSettings}
+      onChange={handleChange}
+    />
+  );
+};

invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamPerlinNoise.tsx

@@ -1,16 +1,31 @@
-import { RootState } from 'app/store/store';
+import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAISlider from 'common/components/IAISlider';
 import { setPerlin } from 'features/parameters/store/generationSlice';
 import { useTranslation } from 'react-i18next';
 
+const selector = createSelector(
+  stateSelector,
+  (state) => {
+    const { shouldUseNoiseSettings, perlin } = state.generation;
+    return {
+      isDisabled: !shouldUseNoiseSettings,
+      perlin,
+    };
+  },
+  defaultSelectorOptions
+);
+
 export default function ParamPerlinNoise() {
   const dispatch = useAppDispatch();
-  const perlin = useAppSelector((state: RootState) => state.generation.perlin);
+  const { perlin, isDisabled } = useAppSelector(selector);
   const { t } = useTranslation();
 
   return (
     <IAISlider
+      isDisabled={isDisabled}
       label={t('parameters.perlinNoise')}
       min={0}
       max={1}

invokeai/frontend/web/src/features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse.tsx

@@ -1,36 +1,46 @@
-import { useTranslation } from 'react-i18next';
 import { Box, Flex } from '@chakra-ui/react';
-import IAICollapse from 'common/components/IAICollapse';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { setSeamless } from 'features/parameters/store/generationSlice';
-import { memo } from 'react';
 import { createSelector } from '@reduxjs/toolkit';
-import { generationSelector } from 'features/parameters/store/generationSelectors';
+import { useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAICollapse from 'common/components/IAICollapse';
+import { generationSelector } from 'features/parameters/store/generationSelectors';
+import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import ParamSeamlessXAxis from './ParamSeamlessXAxis';
 import ParamSeamlessYAxis from './ParamSeamlessYAxis';
-import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
+
+const getActiveLabel = (seamlessXAxis: boolean, seamlessYAxis: boolean) => {
+  if (seamlessXAxis && seamlessYAxis) {
+    return 'X & Y';
+  }
+
+  if (seamlessXAxis) {
+    return 'X';
+  }
+
+  if (seamlessYAxis) {
+    return 'Y';
+  }
+};
 
 const selector = createSelector(
   generationSelector,
   (generation) => {
-    const { shouldUseSeamless, seamlessXAxis, seamlessYAxis } = generation;
+    const { seamlessXAxis, seamlessYAxis } = generation;
 
-    return { shouldUseSeamless, seamlessXAxis, seamlessYAxis };
+    const activeLabel = getActiveLabel(seamlessXAxis, seamlessYAxis);
+    return { activeLabel };
   },
   defaultSelectorOptions
 );
 
 const ParamSeamlessCollapse = () => {
   const { t } = useTranslation();
-  const { shouldUseSeamless } = useAppSelector(selector);
+  const { activeLabel } = useAppSelector(selector);
 
   const isSeamlessEnabled = useFeatureStatus('seamless').isFeatureEnabled;
 
-  const dispatch = useAppDispatch();
-
-  const handleToggle = () => dispatch(setSeamless(!shouldUseSeamless));
-
   if (!isSeamlessEnabled) {
     return null;
   }
@@ -38,9 +48,7 @@ const ParamSeamlessCollapse = () => {
   return (
     <IAICollapse
       label={t('parameters.seamlessTiling')}
-      isOpen={shouldUseSeamless}
-      onToggle={handleToggle}
-      withSwitch
+      activeLabel={activeLabel}
     >
       <Flex sx={{ gap: 5 }}>
         <Box flexGrow={1}>

invokeai/frontend/web/src/features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse.tsx

@@ -1,39 +1,39 @@
-import { memo } from 'react';
 import { Flex } from '@chakra-ui/react';
+import { memo } from 'react';
 import ParamSymmetryHorizontal from './ParamSymmetryHorizontal';
 import ParamSymmetryVertical from './ParamSymmetryVertical';
 
-import { useTranslation } from 'react-i18next';
+import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from 'app/store/store';
+import { useAppSelector } from 'app/store/storeHooks';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAICollapse from 'common/components/IAICollapse';
-import { RootState } from 'app/store/store';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { setShouldUseSymmetry } from 'features/parameters/store/generationSlice';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
+import { useTranslation } from 'react-i18next';
+import ParamSymmetryToggle from './ParamSymmetryToggle';
+
+const selector = createSelector(
+  stateSelector,
+  (state) => ({
+    activeLabel: state.generation.shouldUseSymmetry ? 'Enabled' : undefined,
+  }),
+  defaultSelectorOptions
+);
 
 const ParamSymmetryCollapse = () => {
   const { t } = useTranslation();
-  const shouldUseSymmetry = useAppSelector(
-    (state: RootState) => state.generation.shouldUseSymmetry
-  );
+  const { activeLabel } = useAppSelector(selector);
 
   const isSymmetryEnabled = useFeatureStatus('symmetry').isFeatureEnabled;
 
-  const dispatch = useAppDispatch();
-
-  const handleToggle = () => dispatch(setShouldUseSymmetry(!shouldUseSymmetry));
-
   if (!isSymmetryEnabled) {
     return null;
   }
 
   return (
-    <IAICollapse
-      label={t('parameters.symmetry')}
-      isOpen={shouldUseSymmetry}
-      onToggle={handleToggle}
-      withSwitch
-    >
+    <IAICollapse label={t('parameters.symmetry')} activeLabel={activeLabel}>
       <Flex sx={{ gap: 2, flexDirection: 'column' }}>
+        <ParamSymmetryToggle />
         <ParamSymmetryHorizontal />
         <ParamSymmetryVertical />
       </Flex>

invokeai/frontend/web/src/features/parameters/components/Parameters/Symmetry/ParamSymmetryToggle.tsx

@@ -12,6 +12,7 @@ export default function ParamSymmetryToggle() {
 
   return (
     <IAISwitch
+      label="Enable Symmetry"
       isChecked={shouldUseSymmetry}
       onChange={(e) => dispatch(setShouldUseSymmetry(e.target.checked))}
     />

invokeai/frontend/web/src/features/parameters/components/Parameters/Variations/ParamVariationCollapse.tsx

@@ -1,39 +1,42 @@
-import ParamVariationWeights from './ParamVariationWeights';
-import ParamVariationAmount from './ParamVariationAmount';
-import { useTranslation } from 'react-i18next';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { RootState } from 'app/store/store';
-import { setShouldGenerateVariations } from 'features/parameters/store/generationSlice';
 import { Flex } from '@chakra-ui/react';
+import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from 'app/store/store';
+import { useAppSelector } from 'app/store/storeHooks';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAICollapse from 'common/components/IAICollapse';
-import { memo } from 'react';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import ParamVariationAmount from './ParamVariationAmount';
+import { ParamVariationToggle } from './ParamVariationToggle';
+import ParamVariationWeights from './ParamVariationWeights';
+
+const selector = createSelector(
+  stateSelector,
+  (state) => {
+    const activeLabel = state.generation.shouldGenerateVariations
+      ? 'Enabled'
+      : undefined;
+
+    return { activeLabel };
+  },
+  defaultSelectorOptions
+);
 
 const ParamVariationCollapse = () => {
   const { t } = useTranslation();
-  const shouldGenerateVariations = useAppSelector(
-    (state: RootState) => state.generation.shouldGenerateVariations
-  );
+  const { activeLabel } = useAppSelector(selector);
 
   const isVariationEnabled = useFeatureStatus('variation').isFeatureEnabled;
 
-  const dispatch = useAppDispatch();
-
-  const handleToggle = () =>
-    dispatch(setShouldGenerateVariations(!shouldGenerateVariations));
-
   if (!isVariationEnabled) {
     return null;
   }
 
   return (
-    <IAICollapse
-      label={t('parameters.variations')}
-      isOpen={shouldGenerateVariations}
-      onToggle={handleToggle}
-      withSwitch
-    >
+    <IAICollapse label={t('parameters.variations')} activeLabel={activeLabel}>
       <Flex sx={{ gap: 2, flexDirection: 'column' }}>
+        <ParamVariationToggle />
         <ParamVariationAmount />
         <ParamVariationWeights />
       </Flex>

invokeai/frontend/web/src/features/parameters/components/Parameters/Variations/ParamVariationToggle.tsx

@@ -0,0 +1,27 @@
+import type { RootState } from 'app/store/store';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAISwitch from 'common/components/IAISwitch';
+import { setShouldGenerateVariations } from 'features/parameters/store/generationSlice';
+import { ChangeEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const ParamVariationToggle = () => {
+  const dispatch = useAppDispatch();
+
+  const shouldGenerateVariations = useAppSelector(
+    (state: RootState) => state.generation.shouldGenerateVariations
+  );
+
+  const { t } = useTranslation();
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) =>
+    dispatch(setShouldGenerateVariations(e.target.checked));
+
+  return (
+    <IAISwitch
+      label="Enable Variations"
+      isChecked={shouldGenerateVariations}
+      onChange={handleChange}
+    />
+  );
+};

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

@@ -49,7 +49,6 @@ export interface GenerationState {
   verticalSymmetrySteps: number;
   model: ModelParam;
   vae: VAEParam;
-  shouldUseSeamless: boolean;
   seamlessXAxis: boolean;
   seamlessYAxis: boolean;
 }
@@ -84,9 +83,8 @@ export const initialGenerationState: GenerationState = {
   verticalSymmetrySteps: 0,
   model: '',
   vae: '',
-  shouldUseSeamless: false,
-  seamlessXAxis: true,
-  seamlessYAxis: true,
+  seamlessXAxis: false,
+  seamlessYAxis: false,
 };
 
 const initialState: GenerationState = initialGenerationState;
@@ -144,9 +142,6 @@ export const generationSlice = createSlice({
     setImg2imgStrength: (state, action: PayloadAction<number>) => {
       state.img2imgStrength = action.payload;
     },
-    setSeamless: (state, action: PayloadAction<boolean>) => {
-      state.shouldUseSeamless = action.payload;
-    },
     setSeamlessXAxis: (state, action: PayloadAction<boolean>) => {
       state.seamlessXAxis = action.payload;
     },
@@ -268,7 +263,6 @@ export const {
   modelSelected,
   vaeSelected,
   setShouldUseNoiseSettings,
-  setSeamless,
   setSeamlessXAxis,
   setSeamlessYAxis,
 } = generationSlice.actions;