feat(ui): reorg parameter panel to make room for controlnet

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

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,

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, isEnabled } = useAppSelector(selector);
-  const { controlNets } = 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={isEnabled}
-      isOpen={isOpen}
+      onToggle={handleClickControlNetToggle}
-      onToggle={onToggle}
+      withSwitch
     >
       <Flex sx={{ alignItems: 'flex-end' }}>
         <IAIIconButton

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

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';
+import { FormControl, FormLabel, Switch, Tooltip } from '@chakra-ui/react';
-
+import IAISwitch from 'common/components/IAISwitch';
-// 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}
-//     />
-//   );
-// }
 
 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={{

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"

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 (
+    <IAICollapse label={'General'} isOpen={isOpen} onToggle={onToggle}>
       <Flex
         sx={{
           flexDirection: 'column',
-        gap: 2,
+          gap: 3,
-        bg: 'base.800',
-        p: 4,
-        borderRadius: 'base',
         }}
       >
         {shouldUseSliders ? (
-        <Flex sx={{ gap: 3, flexDirection: 'column' }}>
+          <>
+            <ParamSchedulerAndModel />
+            <Box pt={2}>
+              <ParamSeedFull />
+            </Box>
             <ParamIterations />
             <ParamSteps />
             <ParamCFGScale />
             <ParamWidth isDisabled={!shouldFitToWidthHeight} />
             <ParamHeight isDisabled={!shouldFitToWidthHeight} />
-          <ImageToImageStrength />
+          </>
-          <ImageToImageFit />
-          <ParamSchedulerAndModel />
-        </Flex>
         ) : (
-        <Flex sx={{ gap: 2, flexDirection: 'column' }}>
+          <>
             <Flex gap={3}>
               <ParamIterations />
               <ParamSteps />
               <ParamCFGScale />
             </Flex>
             <ParamSchedulerAndModel />
+            <Box pt={2}>
+              <ParamSeedFull />
+            </Box>
             <ParamWidth isDisabled={!shouldFitToWidthHeight} />
             <ParamHeight isDisabled={!shouldFitToWidthHeight} />
+          </>
+        )}
         <ImageToImageStrength />
         <ImageToImageFit />
       </Flex>
-      )}
+    </IAICollapse>
-    </Flex>
   );
 };
 

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 />

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 (
+    <IAICollapse label={'General'} isOpen={isOpen} onToggle={onToggle}>
       <Flex
         sx={{
           flexDirection: 'column',
-        gap: 2,
+          gap: 3,
-        bg: 'base.800',
-        p: 4,
-        borderRadius: 'base',
         }}
       >
         {shouldUseSliders ? (
-        <Flex sx={{ gap: 3, flexDirection: 'column' }}>
+          <>
+            <ParamSchedulerAndModel />
+            <Box pt={2}>
+              <ParamSeedFull />
+            </Box>
             <ParamIterations />
             <ParamSteps />
             <ParamCFGScale />
             <ParamWidth />
             <ParamHeight />
-          <ParamSchedulerAndModel />
+          </>
-        </Flex>
         ) : (
-        <Flex sx={{ gap: 2, flexDirection: 'column' }}>
+          <>
             <Flex gap={3}>
               <ParamIterations />
               <ParamSteps />
               <ParamCFGScale />
             </Flex>
             <ParamSchedulerAndModel />
+            <Box pt={2}>
+              <ParamSeedFull />
+            </Box>
             <ParamWidth />
             <ParamHeight />
-        </Flex>
+          </>
         )}
       </Flex>
+    </IAICollapse>
   );
 };
 

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 />

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 (
+    <IAICollapse label={'General'} isOpen={isOpen} onToggle={onToggle}>
       <Flex
         sx={{
           flexDirection: 'column',
-        gap: 2,
+          gap: 3,
-        bg: 'base.800',
-        p: 4,
-        borderRadius: 'base',
         }}
       >
         {shouldUseSliders ? (
-        <Flex sx={{ gap: 3, flexDirection: 'column' }}>
+          <>
+            <ParamSchedulerAndModel />
+            <Box pt={2}>
+              <ParamSeedFull />
+            </Box>
             <ParamIterations />
             <ParamSteps />
             <ParamCFGScale />
             <ParamBoundingBoxWidth />
             <ParamBoundingBoxHeight />
-          <ImageToImageStrength />
+          </>
-          <ImageToImageFit />
-          <ParamSchedulerAndModel />
-        </Flex>
         ) : (
-        <Flex sx={{ gap: 2, flexDirection: 'column' }}>
+          <>
             <Flex gap={3}>
               <ParamIterations />
               <ParamSteps />
               <ParamCFGScale />
             </Flex>
             <ParamSchedulerAndModel />
+            <Box pt={2}>
+              <ParamSeedFull />
+            </Box>
             <ParamBoundingBoxWidth />
             <ParamBoundingBoxHeight />
+          </>
+        )}
         <ImageToImageStrength />
       </Flex>
-      )}
+    </IAICollapse>
-    </Flex>
   );
 };
 

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx

@@ -16,7 +16,6 @@ const UnifiedCanvasParameters = () => {
       <ParamNegativeConditioning />
       <ProcessButtons />
       <UnifiedCanvasCoreParameters />
-      <ParamSeedCollapse />
       <ParamVariationCollapse />
       <ParamSymmetryCollapse />
       <ParamSeamCorrectionCollapse />