From 98493ed9e2ec18881f553baedfa3e5f3912783d1 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 1 Jun 2023 21:26:45 +1000
Subject: [PATCH] feat(ui): reorg parameter panel to make room for controlnet

---
 .../web/src/common/components/IAISlider.tsx   |  2 +
 .../controlNet/store/controlNetSlice.ts       |  6 ++
 .../ControlNet/ParamControlNetCollapse.tsx    | 18 +++--
 .../Parameters/Seed/ParamSeedFull.tsx         | 17 +++++
 .../Parameters/Seed/ParamSeedRandomize.tsx    | 32 +++------
 .../Parameters/Seed/ParamSeedShuffle.tsx      | 13 ++++
 .../ImageToImageTabCoreParameters.tsx         | 72 ++++++++++---------
 .../ImageToImageTabParameters.tsx             |  2 -
 .../TextToImageTabCoreParameters.tsx          | 66 +++++++++--------
 .../TextToImage/TextToImageTabParameters.tsx  |  2 -
 .../UnifiedCanvasCoreParameters.tsx           | 71 +++++++++---------
 .../UnifiedCanvas/UnifiedCanvasParameters.tsx |  1 -
 12 files changed, 173 insertions(+), 129 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeedFull.tsx

diff --git a/invokeai/frontend/web/src/common/components/IAISlider.tsx b/invokeai/frontend/web/src/common/components/IAISlider.tsx
index 48080e8970..a2a3251f02 100644
--- a/invokeai/frontend/web/src/common/components/IAISlider.tsx
+++ b/invokeai/frontend/web/src/common/components/IAISlider.tsx
@@ -203,6 +203,7 @@ const IAISlider = (props: IAIFullSliderProps) => {
                 sx={{
                   insetInlineStart: '0 !important',
                   insetInlineEnd: 'unset !important',
+                  mt: 1.5,
                 }}
                 {...sliderMarkProps}
               >
@@ -213,6 +214,7 @@ const IAISlider = (props: IAIFullSliderProps) => {
                 sx={{
                   insetInlineStart: 'unset !important',
                   insetInlineEnd: '0 !important',
+                  mt: 1.5,
                 }}
                 {...sliderMarkProps}
               >
diff --git a/invokeai/frontend/web/src/features/controlNet/store/controlNetSlice.ts b/invokeai/frontend/web/src/features/controlNet/store/controlNetSlice.ts
index cb4f86ddb2..dbb45c25f1 100644
--- a/invokeai/frontend/web/src/features/controlNet/store/controlNetSlice.ts
+++ b/invokeai/frontend/web/src/features/controlNet/store/controlNetSlice.ts
@@ -62,16 +62,21 @@ export type ControlNet = {
 
 export type ControlNetState = {
   controlNets: Record<string, ControlNet>;
+  isEnabled: boolean;
 };
 
 export const initialControlNetState: ControlNetState = {
   controlNets: {},
+  isEnabled: false,
 };
 
 export const controlNetSlice = createSlice({
   name: 'controlNet',
   initialState: initialControlNetState,
   reducers: {
+    isControlNetEnabledToggled: (state) => {
+      state.isEnabled = !state.isEnabled;
+    },
     controlNetAdded: (
       state,
       action: PayloadAction<{ controlNetId: string }>
@@ -166,6 +171,7 @@ export const controlNetSlice = createSlice({
 });
 
 export const {
+  isControlNetEnabledToggled,
   controlNetAdded,
   controlNetAddedFromImage,
   controlNetRemoved,
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse.tsx
index 2c4088d376..52ea702c4c 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse.tsx
@@ -10,6 +10,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import {
   controlNetAdded,
   controlNetSelector,
+  isControlNetEnabledToggled,
 } from 'features/controlNet/store/controlNetSlice';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import { map } from 'lodash-es';
@@ -18,19 +19,22 @@ import { v4 as uuidv4 } from 'uuid';
 const selector = createSelector(
   controlNetSelector,
   (controlNet) => {
-    const { controlNets } = controlNet;
+    const { controlNets, isEnabled } = controlNet;
 
-    return { controlNets };
+    return { controlNets, isEnabled };
   },
   defaultSelectorOptions
 );
 
 const ParamControlNetCollapse = () => {
   const { t } = useTranslation();
-  const { isOpen, onToggle } = useDisclosure();
-  const { controlNets } = useAppSelector(selector);
+  const { controlNets, isEnabled } = useAppSelector(selector);
   const dispatch = useAppDispatch();
 
+  const handleClickControlNetToggle = useCallback(() => {
+    dispatch(isControlNetEnabledToggled());
+  }, [dispatch]);
+
   const handleClickedAddControlNet = useCallback(() => {
     dispatch(controlNetAdded({ controlNetId: uuidv4() }));
   }, [dispatch]);
@@ -38,9 +42,9 @@ const ParamControlNetCollapse = () => {
   return (
     <IAICollapse
       label={'ControlNet'}
-      // label={t('parameters.seamCorrectionHeader')}
-      isOpen={isOpen}
-      onToggle={onToggle}
+      isOpen={isEnabled}
+      onToggle={handleClickControlNetToggle}
+      withSwitch
     >
       <Flex sx={{ alignItems: 'flex-end' }}>
         <IAIIconButton
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeedFull.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeedFull.tsx
new file mode 100644
index 0000000000..75a5d189ae
--- /dev/null
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeedFull.tsx
@@ -0,0 +1,17 @@
+import { Flex } from '@chakra-ui/react';
+import { memo } from 'react';
+import ParamSeed from './ParamSeed';
+import ParamSeedShuffle from './ParamSeedShuffle';
+import ParamSeedRandomize from './ParamSeedRandomize';
+
+const ParamSeedFull = () => {
+  return (
+    <Flex sx={{ gap: 4, alignItems: 'center' }}>
+      <ParamSeed />
+      <ParamSeedShuffle />
+      <ParamSeedRandomize />
+    </Flex>
+  );
+};
+
+export default memo(ParamSeedFull);
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeedRandomize.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeedRandomize.tsx
index 13380f3660..6b1dd46780 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeedRandomize.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeedRandomize.tsx
@@ -2,30 +2,10 @@ import { ChangeEvent, memo } from 'react';
 
 import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import IAISwitch from 'common/components/IAISwitch';
 import { setShouldRandomizeSeed } from 'features/parameters/store/generationSlice';
 import { useTranslation } from 'react-i18next';
-import { FormControl, FormLabel, Switch } from '@chakra-ui/react';
-
-// export default function RandomizeSeed() {
-//   const dispatch = useAppDispatch();
-//   const { t } = useTranslation();
-
-//   const shouldRandomizeSeed = useAppSelector(
-//     (state: RootState) => state.generation.shouldRandomizeSeed
-//   );
-
-//   const handleChangeShouldRandomizeSeed = (e: ChangeEvent<HTMLInputElement>) =>
-//     dispatch(setShouldRandomizeSeed(e.target.checked));
-
-//   return (
-//     <Switch
-//       aria-label={t('parameters.randomizeSeed')}
-//       isChecked={shouldRandomizeSeed}
-//       onChange={handleChangeShouldRandomizeSeed}
-//     />
-//   );
-// }
+import { FormControl, FormLabel, Switch, Tooltip } from '@chakra-ui/react';
+import IAISwitch from 'common/components/IAISwitch';
 
 const ParamSeedRandomize = () => {
   const dispatch = useAppDispatch();
@@ -38,6 +18,14 @@ const ParamSeedRandomize = () => {
   const handleChangeShouldRandomizeSeed = (e: ChangeEvent<HTMLInputElement>) =>
     dispatch(setShouldRandomizeSeed(e.target.checked));
 
+  return (
+    <IAISwitch
+      label={t('common.random')}
+      isChecked={shouldRandomizeSeed}
+      onChange={handleChangeShouldRandomizeSeed}
+    />
+  );
+
   return (
     <FormControl
       sx={{
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeedShuffle.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeedShuffle.tsx
index dd1f05e2f9..6442e34268 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeedShuffle.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeedShuffle.tsx
@@ -3,9 +3,11 @@ import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from 'app/constants';
 import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
+import IAIIconButton from 'common/components/IAIIconButton';
 import randomInt from 'common/util/randomInt';
 import { setSeed } from 'features/parameters/store/generationSlice';
 import { useTranslation } from 'react-i18next';
+import { FaRandom } from 'react-icons/fa';
 
 export default function ParamSeedShuffle() {
   const dispatch = useAppDispatch();
@@ -17,6 +19,17 @@ export default function ParamSeedShuffle() {
   const handleClickRandomizeSeed = () =>
     dispatch(setSeed(randomInt(NUMPY_RAND_MIN, NUMPY_RAND_MAX)));
 
+  return (
+    <IAIIconButton
+      size="sm"
+      isDisabled={shouldRandomizeSeed}
+      aria-label={t('parameters.shuffle')}
+      tooltip={t('parameters.shuffle')}
+      onClick={handleClickRandomizeSeed}
+      icon={<FaRandom />}
+    />
+  );
+
   return (
     <IAIButton
       size="sm"
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx
index c4161154bb..cdbec9b55d 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx
@@ -1,5 +1,5 @@
 import { memo } from 'react';
-import { Flex } from '@chakra-ui/react';
+import { Box, Flex, useDisclosure } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { uiSelector } from 'features/ui/store/uiSelectors';
 import { useAppSelector } from 'app/store/storeHooks';
@@ -13,6 +13,8 @@ import ImageToImageStrength from 'features/parameters/components/Parameters/Imag
 import ImageToImageFit from 'features/parameters/components/Parameters/ImageToImage/ImageToImageFit';
 import { generationSelector } from 'features/parameters/store/generationSelectors';
 import ParamSchedulerAndModel from 'features/parameters/components/Parameters/Core/ParamSchedulerAndModel';
+import ParamSeedFull from 'features/parameters/components/Parameters/Seed/ParamSeedFull';
+import IAICollapse from 'common/components/IAICollapse';
 
 const selector = createSelector(
   [uiSelector, generationSelector],
@@ -27,43 +29,47 @@ const selector = createSelector(
 
 const ImageToImageTabCoreParameters = () => {
   const { shouldUseSliders, shouldFitToWidthHeight } = useAppSelector(selector);
+  const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
 
   return (
-    <Flex
-      sx={{
-        flexDirection: 'column',
-        gap: 2,
-        bg: 'base.800',
-        p: 4,
-        borderRadius: 'base',
-      }}
-    >
-      {shouldUseSliders ? (
-        <Flex sx={{ gap: 3, flexDirection: 'column' }}>
-          <ParamIterations />
-          <ParamSteps />
-          <ParamCFGScale />
-          <ParamWidth isDisabled={!shouldFitToWidthHeight} />
-          <ParamHeight isDisabled={!shouldFitToWidthHeight} />
-          <ImageToImageStrength />
-          <ImageToImageFit />
-          <ParamSchedulerAndModel />
-        </Flex>
-      ) : (
-        <Flex sx={{ gap: 2, flexDirection: 'column' }}>
-          <Flex gap={3}>
+    <IAICollapse label={'General'} isOpen={isOpen} onToggle={onToggle}>
+      <Flex
+        sx={{
+          flexDirection: 'column',
+          gap: 3,
+        }}
+      >
+        {shouldUseSliders ? (
+          <>
+            <ParamSchedulerAndModel />
+            <Box pt={2}>
+              <ParamSeedFull />
+            </Box>
             <ParamIterations />
             <ParamSteps />
             <ParamCFGScale />
-          </Flex>
-          <ParamSchedulerAndModel />
-          <ParamWidth isDisabled={!shouldFitToWidthHeight} />
-          <ParamHeight isDisabled={!shouldFitToWidthHeight} />
-          <ImageToImageStrength />
-          <ImageToImageFit />
-        </Flex>
-      )}
-    </Flex>
+            <ParamWidth isDisabled={!shouldFitToWidthHeight} />
+            <ParamHeight isDisabled={!shouldFitToWidthHeight} />
+          </>
+        ) : (
+          <>
+            <Flex gap={3}>
+              <ParamIterations />
+              <ParamSteps />
+              <ParamCFGScale />
+            </Flex>
+            <ParamSchedulerAndModel />
+            <Box pt={2}>
+              <ParamSeedFull />
+            </Box>
+            <ParamWidth isDisabled={!shouldFitToWidthHeight} />
+            <ParamHeight isDisabled={!shouldFitToWidthHeight} />
+          </>
+        )}
+        <ImageToImageStrength />
+        <ImageToImageFit />
+      </Flex>
+    </IAICollapse>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx
index dd2fd00d22..55d2c1def2 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx
@@ -2,7 +2,6 @@ import { memo } from 'react';
 import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
 import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning';
 import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning';
-import ParamSeedCollapse from 'features/parameters/components/Parameters/Seed/ParamSeedCollapse';
 import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse';
 import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
 import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
@@ -17,7 +16,6 @@ const ImageToImageTabParameters = () => {
       <ParamNegativeConditioning />
       <ProcessButtons />
       <ImageToImageTabCoreParameters />
-      <ParamSeedCollapse />
       <ParamControlNetCollapse />
       <ParamVariationCollapse />
       <ParamNoiseCollapse />
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx
index 59512775bc..07297bda31 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx
@@ -3,13 +3,15 @@ import ParamSteps from 'features/parameters/components/Parameters/Core/ParamStep
 import ParamCFGScale from 'features/parameters/components/Parameters/Core/ParamCFGScale';
 import ParamWidth from 'features/parameters/components/Parameters/Core/ParamWidth';
 import ParamHeight from 'features/parameters/components/Parameters/Core/ParamHeight';
-import { Flex } from '@chakra-ui/react';
+import { Box, Flex, useDisclosure } from '@chakra-ui/react';
 import { useAppSelector } from 'app/store/storeHooks';
 import { createSelector } from '@reduxjs/toolkit';
 import { uiSelector } from 'features/ui/store/uiSelectors';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import { memo } from 'react';
 import ParamSchedulerAndModel from 'features/parameters/components/Parameters/Core/ParamSchedulerAndModel';
+import IAICollapse from 'common/components/IAICollapse';
+import ParamSeedFull from 'features/parameters/components/Parameters/Seed/ParamSeedFull';
 
 const selector = createSelector(
   uiSelector,
@@ -23,39 +25,45 @@ const selector = createSelector(
 
 const TextToImageTabCoreParameters = () => {
   const { shouldUseSliders } = useAppSelector(selector);
+  const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
 
   return (
-    <Flex
-      sx={{
-        flexDirection: 'column',
-        gap: 2,
-        bg: 'base.800',
-        p: 4,
-        borderRadius: 'base',
-      }}
-    >
-      {shouldUseSliders ? (
-        <Flex sx={{ gap: 3, flexDirection: 'column' }}>
-          <ParamIterations />
-          <ParamSteps />
-          <ParamCFGScale />
-          <ParamWidth />
-          <ParamHeight />
-          <ParamSchedulerAndModel />
-        </Flex>
-      ) : (
-        <Flex sx={{ gap: 2, flexDirection: 'column' }}>
-          <Flex gap={3}>
+    <IAICollapse label={'General'} isOpen={isOpen} onToggle={onToggle}>
+      <Flex
+        sx={{
+          flexDirection: 'column',
+          gap: 3,
+        }}
+      >
+        {shouldUseSliders ? (
+          <>
+            <ParamSchedulerAndModel />
+            <Box pt={2}>
+              <ParamSeedFull />
+            </Box>
             <ParamIterations />
             <ParamSteps />
             <ParamCFGScale />
-          </Flex>
-          <ParamSchedulerAndModel />
-          <ParamWidth />
-          <ParamHeight />
-        </Flex>
-      )}
-    </Flex>
+            <ParamWidth />
+            <ParamHeight />
+          </>
+        ) : (
+          <>
+            <Flex gap={3}>
+              <ParamIterations />
+              <ParamSteps />
+              <ParamCFGScale />
+            </Flex>
+            <ParamSchedulerAndModel />
+            <Box pt={2}>
+              <ParamSeedFull />
+            </Box>
+            <ParamWidth />
+            <ParamHeight />
+          </>
+        )}
+      </Flex>
+    </IAICollapse>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx
index a1084c4b8d..a28fa71407 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx
@@ -2,7 +2,6 @@ import ProcessButtons from 'features/parameters/components/ProcessButtons/Proces
 import { memo } from 'react';
 import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning';
 import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning';
-import ParamSeedCollapse from 'features/parameters/components/Parameters/Seed/ParamSeedCollapse';
 import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse';
 import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
 import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
@@ -18,7 +17,6 @@ const TextToImageTabParameters = () => {
       <ParamNegativeConditioning />
       <ProcessButtons />
       <TextToImageTabCoreParameters />
-      <ParamSeedCollapse />
       <ParamControlNetCollapse />
       <ParamVariationCollapse />
       <ParamNoiseCollapse />
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx
index 1b6b61f018..42e19eb096 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx
@@ -1,5 +1,5 @@
 import { memo } from 'react';
-import { Flex } from '@chakra-ui/react';
+import { Box, Flex, useDisclosure } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { uiSelector } from 'features/ui/store/uiSelectors';
 import { useAppSelector } from 'app/store/storeHooks';
@@ -8,10 +8,11 @@ import ParamIterations from 'features/parameters/components/Parameters/Core/Para
 import ParamSteps from 'features/parameters/components/Parameters/Core/ParamSteps';
 import ParamCFGScale from 'features/parameters/components/Parameters/Core/ParamCFGScale';
 import ImageToImageStrength from 'features/parameters/components/Parameters/ImageToImage/ImageToImageStrength';
-import ImageToImageFit from 'features/parameters/components/Parameters/ImageToImage/ImageToImageFit';
 import ParamSchedulerAndModel from 'features/parameters/components/Parameters/Core/ParamSchedulerAndModel';
 import ParamBoundingBoxWidth from 'features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth';
 import ParamBoundingBoxHeight from 'features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight';
+import ParamSeedFull from 'features/parameters/components/Parameters/Seed/ParamSeedFull';
+import IAICollapse from 'common/components/IAICollapse';
 
 const selector = createSelector(
   uiSelector,
@@ -25,42 +26,46 @@ const selector = createSelector(
 
 const UnifiedCanvasCoreParameters = () => {
   const { shouldUseSliders } = useAppSelector(selector);
+  const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
 
   return (
-    <Flex
-      sx={{
-        flexDirection: 'column',
-        gap: 2,
-        bg: 'base.800',
-        p: 4,
-        borderRadius: 'base',
-      }}
-    >
-      {shouldUseSliders ? (
-        <Flex sx={{ gap: 3, flexDirection: 'column' }}>
-          <ParamIterations />
-          <ParamSteps />
-          <ParamCFGScale />
-          <ParamBoundingBoxWidth />
-          <ParamBoundingBoxHeight />
-          <ImageToImageStrength />
-          <ImageToImageFit />
-          <ParamSchedulerAndModel />
-        </Flex>
-      ) : (
-        <Flex sx={{ gap: 2, flexDirection: 'column' }}>
-          <Flex gap={3}>
+    <IAICollapse label={'General'} isOpen={isOpen} onToggle={onToggle}>
+      <Flex
+        sx={{
+          flexDirection: 'column',
+          gap: 3,
+        }}
+      >
+        {shouldUseSliders ? (
+          <>
+            <ParamSchedulerAndModel />
+            <Box pt={2}>
+              <ParamSeedFull />
+            </Box>
             <ParamIterations />
             <ParamSteps />
             <ParamCFGScale />
-          </Flex>
-          <ParamSchedulerAndModel />
-          <ParamBoundingBoxWidth />
-          <ParamBoundingBoxHeight />
-          <ImageToImageStrength />
-        </Flex>
-      )}
-    </Flex>
+            <ParamBoundingBoxWidth />
+            <ParamBoundingBoxHeight />
+          </>
+        ) : (
+          <>
+            <Flex gap={3}>
+              <ParamIterations />
+              <ParamSteps />
+              <ParamCFGScale />
+            </Flex>
+            <ParamSchedulerAndModel />
+            <Box pt={2}>
+              <ParamSeedFull />
+            </Box>
+            <ParamBoundingBoxWidth />
+            <ParamBoundingBoxHeight />
+          </>
+        )}
+        <ImageToImageStrength />
+      </Flex>
+    </IAICollapse>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx
index c4501ffc44..19ef7fd6fa 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx
@@ -16,7 +16,6 @@ const UnifiedCanvasParameters = () => {
       <ParamNegativeConditioning />
       <ProcessButtons />
       <UnifiedCanvasCoreParameters />
-      <ParamSeedCollapse />
       <ParamVariationCollapse />
       <ParamSymmetryCollapse />
       <ParamSeamCorrectionCollapse />