feat(ui): organize parameters panels

2024-08-30 20:32:17 +00:00 · 2023-05-09 18:12:34 +10:00
parent ec6c8e2a38
commit c565812723
64 changed files with 880 additions and 996 deletions
--- a/invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx
@ -14,10 +14,10 @@ import {
 import { setShouldShowParametersPanel } from 'features/ui/store/uiSlice';
 import ResizableDrawer from './common/ResizableDrawer/ResizableDrawer';
 import PinParametersPanelButton from './PinParametersPanelButton';
-import TextTabParametersDrawer from './tabs/text/TextTabParametersDrawer';
 import TextTabParameters from './tabs/text/TextTabParameters';
 import ImageTabParameters from './tabs/image/ImageTabParameters';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import UnifiedCanvasParameters from './tabs/UnifiedCanvas/UnifiedCanvasParameters';

 const selector = createSelector(
  [uiSelector, activeTabNameSelector, lightboxSelector],
@ -59,18 +59,26 @@ const ParametersDrawer = () => {
    }

    if (activeTabName === 'unifiedCanvas') {
-      return null;
+      return <UnifiedCanvasParameters />;
    }
+
+    return null;
  }, [activeTabName]);

+  if (shouldPinParametersPanel) {
+    return null;
+  }
+
  return (
    <ResizableDrawer
      direction="left"
      isResizable={false}
-      isOpen={shouldShowParametersPanel && !shouldPinParametersPanel}
+      isOpen={shouldShowParametersPanel}
      onClose={handleClosePanel}
    >
-      <Flex flexDir="column" position="relative" h="full" w="full">
+      <Flex
+        sx={{ flexDir: 'column', h: 'full', w: PARAMETERS_PANEL_WIDTH, gap: 2 }}
+      >
        <Flex
          paddingTop={1.5}
          paddingBottom={4}
@ -81,9 +89,7 @@ const ParametersDrawer = () => {
          <PinParametersPanelButton />
        </Flex>
        <OverlayScrollable>
-          <Box sx={{ h: 'full', w: PARAMETERS_PANEL_WIDTH }}>
-            {drawerContent}
-          </Box>
+          <Flex sx={{ flexDir: 'column', gap: 2 }}>{drawerContent}</Flex>
        </OverlayScrollable>
      </Flex>
    </ResizableDrawer>
--- a/invokeai/frontend/web/src/features/ui/components/ParametersPinnedWrapper.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/ParametersPinnedWrapper.tsx
@ -0,0 +1,39 @@
+import { Box, Flex } from '@chakra-ui/react';
+import { PropsWithChildren, memo } from 'react';
+import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants';
+import OverlayScrollable from './common/OverlayScrollable';
+import PinParametersPanelButton from './PinParametersPanelButton';
+
+type ParametersPinnedWrapperProps = PropsWithChildren;
+
+const ParametersPinnedWrapper = (props: ParametersPinnedWrapperProps) => {
+  return (
+    <Box
+      sx={{
+        position: 'relative',
+        h: 'full',
+        w: PARAMETERS_PANEL_WIDTH,
+        flexShrink: 0,
+      }}
+    >
+      <OverlayScrollable>
+        <Flex
+          sx={{
+            gap: 2,
+            flexDirection: 'column',
+            h: 'full',
+            w: 'full',
+            position: 'absolute',
+          }}
+        >
+          {props.children}
+        </Flex>
+      </OverlayScrollable>
+      <PinParametersPanelButton
+        sx={{ position: 'absolute', top: 0, insetInlineEnd: 0 }}
+      />
+    </Box>
+  );
+};
+
+export default memo(ParametersPinnedWrapper);
--- a/invokeai/frontend/web/src/features/ui/components/common/OverlayScrollable.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/common/OverlayScrollable.tsx
@ -5,7 +5,7 @@ const OverlayScrollable = (props: PropsWithChildren) => {
  return (
    <OverlayScrollbarsComponent
      defer
-      style={{ height: '100%' }}
+      style={{ height: '100%', width: '100%' }}
      options={{
        scrollbars: {
          visibility: 'auto',
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasContent.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasContent.tsx
@ -1,6 +1,5 @@
 import { Box, Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-// import IAICanvas from 'features/canvas/components/IAICanvas';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAICanvas from 'features/canvas/components/IAICanvas';
 import IAICanvasResizer from 'features/canvas/components/IAICanvasResizer';
@ -9,7 +8,7 @@ import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
 import { isEqual } from 'lodash-es';

-import { useLayoutEffect } from 'react';
+import { memo, useLayoutEffect } from 'react';

 const selector = createSelector(
  [canvasSelector],
@ -80,4 +79,4 @@ const UnifiedCanvasContent = () => {
  );
 };

-export default UnifiedCanvasContent;
+export default memo(UnifiedCanvasContent);
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx
@ -0,0 +1,83 @@
+import { memo } from 'react';
+import { Box, Flex } from '@chakra-ui/react';
+import { createSelector } from '@reduxjs/toolkit';
+import { uiSelector } from 'features/ui/store/uiSelectors';
+import { useAppSelector } from 'app/store/storeHooks';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import ModelSelect from 'features/system/components/ModelSelect';
+import ParamIterations from 'features/parameters/components/Parameters/Core/ParamIterations';
+import ParamSteps from 'features/parameters/components/Parameters/Core/ParamSteps';
+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 ImageToImageStrength from 'features/parameters/components/Parameters/ImageToImage/ImageToImageStrength';
+import ImageToImageFit from 'features/parameters/components/Parameters/ImageToImage/ImageToImageFit';
+import ParamSampler from 'features/parameters/components/Parameters/Core/ParamSampler';
+
+const selector = createSelector(
+  uiSelector,
+  (ui) => {
+    const { shouldUseSliders } = ui;
+
+    return { shouldUseSliders };
+  },
+  defaultSelectorOptions
+);
+
+const UnifiedCanvasCoreParameters = () => {
+  const { shouldUseSliders } = useAppSelector(selector);
+
+  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 />
+          <ImageToImageStrength />
+          <ImageToImageFit />
+          <Flex gap={3} w="full">
+            <Box flexGrow={2}>
+              <ParamSampler />
+            </Box>
+            <Box flexGrow={3}>
+              <ModelSelect />
+            </Box>
+          </Flex>
+        </Flex>
+      ) : (
+        <Flex sx={{ gap: 2, flexDirection: 'column' }}>
+          <Flex gap={3}>
+            <ParamIterations />
+            <ParamSteps />
+            <ParamCFGScale />
+          </Flex>
+          <ParamWidth />
+          <ParamHeight />
+          <Flex gap={3} w="full">
+            <Box flexGrow={2}>
+              <ParamSampler />
+            </Box>
+            <Box flexGrow={3}>
+              <ModelSelect />
+            </Box>
+          </Flex>
+          <ImageToImageStrength />
+          <ImageToImageFit />
+        </Flex>
+      )}
+    </Flex>
+  );
+};
+
+export default memo(UnifiedCanvasCoreParameters);
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx
@ -1,101 +1,30 @@
-import { Flex } from '@chakra-ui/react';
-import { Feature } from 'app/features';
-import BoundingBoxSettings from 'features/parameters/components/AdvancedParameters/Canvas/BoundingBox/BoundingBoxSettings';
-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 MainSettings from 'features/parameters/components/MainParameters/MainSettings';
-import ParametersAccordion, {
-  ParametersAccordionItems,
-} from 'features/parameters/components/ParametersAccordion';
 import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
-import { useTranslation } from 'react-i18next';
-import OverlayScrollable from '../../common/OverlayScrollable';
-// import ParamSeedSettings from 'features/parameters/components/Parameters/Seed/ParamSeedSettings';
-// import ParamVariationSettings from 'features/parameters/components/Parameters/Variations/ParamVariationSettings';
-// import ParamSymmetrySettings from 'features/parameters/components/Parameters/Symmetry/ParamSymmetrySettings';
-// import ParamVariationToggle from 'features/parameters/components/Parameters/Variations/ParamVariationToggle';
-// import ParamSymmetryToggle from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryToggle';
-import ParamPositiveConditioning from 'features/parameters/components/Parameters/ParamPositiveConditioning';
-import ParamNegativeConditioning from 'features/parameters/components/Parameters/ParamNegativeConditioning';
 import ParamSeedCollapse from 'features/parameters/components/Parameters/Seed/ParamSeedCollapse';
 import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse';
 import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
+import ParamBoundingBoxCollapse from 'features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxCollapse';
+import ParamInfillAndScalingCollapse from 'features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse';
+import ParamSeamCorrectionCollapse from 'features/parameters/components/Parameters/Canvas/SeamCorrection/ParamSeamCorrectionCollapse';
+import UnifiedCanvasCoreParameters from './UnifiedCanvasCoreParameters';
+import { memo } from 'react';
+import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning';
+import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning';

-export default function UnifiedCanvasParameters() {
-  const { t } = useTranslation();
-
-  const unifiedCanvasAccordions: ParametersAccordionItems = {
-    general: {
-      name: 'general',
-      header: `${t('parameters.general')}`,
-      feature: undefined,
-      content: <MainSettings />,
-    },
-    unifiedCanvasImg2Img: {
-      name: 'unifiedCanvasImg2Img',
-      header: `${t('parameters.imageToImage')}`,
-      feature: undefined,
-      content: <ImageToImageStrength />,
-    },
-    // seed: {
-    //   name: 'seed',
-    //   header: `${t('parameters.seed')}`,
-    //   feature: Feature.SEED,
-    //   content: <ParamSeedSettings />,
-    // },
-    boundingBox: {
-      name: 'boundingBox',
-      header: `${t('parameters.boundingBoxHeader')}`,
-      feature: Feature.BOUNDING_BOX,
-      content: <BoundingBoxSettings />,
-    },
-    seamCorrection: {
-      name: 'seamCorrection',
-      header: `${t('parameters.seamCorrectionHeader')}`,
-      feature: Feature.SEAM_CORRECTION,
-      content: <SeamCorrectionSettings />,
-    },
-    infillAndScaling: {
-      name: 'infillAndScaling',
-      header: `${t('parameters.infillScalingHeader')}`,
-      feature: Feature.INFILL_AND_SCALING,
-      content: <InfillAndScalingSettings />,
-    },
-    // variations: {
-    //   name: 'variations',
-    //   header: `${t('parameters.variations')}`,
-    //   feature: Feature.VARIATIONS,
-    //   content: <ParamVariationSettings />,
-    //   additionalHeaderComponents: <ParamVariationToggle />,
-    // },
-    // symmetry: {
-    //   name: 'symmetry',
-    //   header: `${t('parameters.symmetry')}`,
-    //   content: <ParamSymmetrySettings />,
-    //   additionalHeaderComponents: <ParamSymmetryToggle />,
-    // },
-  };
-
+const UnifiedCanvasParameters = () => {
  return (
-    <OverlayScrollable>
-      <Flex
-        sx={{
-          gap: 2,
-          flexDirection: 'column',
-          h: 'full',
-          w: 'full',
-          position: 'absolute',
-        }}
-      >
-        <ParamPositiveConditioning />
-        <ParamNegativeConditioning />
-        <ProcessButtons />
-        <ParamSeedCollapse />
-        <ParamVariationCollapse />
-        <ParamSymmetryCollapse />
-        <ParametersAccordion accordionItems={unifiedCanvasAccordions} />
-      </Flex>
-    </OverlayScrollable>
+    <>
+      <ParamPositiveConditioning />
+      <ParamNegativeConditioning />
+      <ProcessButtons />
+      <UnifiedCanvasCoreParameters />
+      <ParamSeedCollapse />
+      <ParamVariationCollapse />
+      <ParamSymmetryCollapse />
+      <ParamBoundingBoxCollapse />
+      <ParamSeamCorrectionCollapse />
+      <ParamInfillAndScalingCollapse />
+    </>
  );
-}
+};
+
+export default memo(UnifiedCanvasParameters);
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasTab.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasTab.tsx
@ -1,4 +1,4 @@
-import { TabPanel } from '@chakra-ui/react';
+import { Box, Flex, TabPanel } from '@chakra-ui/react';
 import { memo } from 'react';
 import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 import PinParametersPanelButton from '../../PinParametersPanelButton';
@ -11,6 +11,8 @@ import UnifiedCanvasContent from './UnifiedCanvasContent';
 import ResizeHandle from '../ResizeHandle';
 import UnifiedCanvasParameters from './UnifiedCanvasParameters';
 import UnifiedCanvasContentBeta from './UnifiedCanvasBeta/UnifiedCanvasContentBeta';
+import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants';
+import ParametersPinnedWrapper from '../../ParametersPinnedWrapper';

 const selector = createSelector(uiSelector, (ui) => {
  const {
@ -41,42 +43,18 @@ const UnifiedCanvasTab = () => {
  } = useAppSelector(selector);

  return (
-    <PanelGroup
-      autoSaveId="canvasTab"
-      direction="horizontal"
-      style={{ height: '100%', width: '100%' }}
-    >
+    <Flex sx={{ gap: 4, w: 'full', h: 'full' }}>
      {shouldPinParametersPanel && shouldShowParametersPanel && (
-        <>
-          <Panel
-            id="canvasTab_parameters"
-            order={0}
-            defaultSize={30}
-            minSize={20}
-            style={{ position: 'relative' }}
-          >
-            <UnifiedCanvasParameters />
-            <PinParametersPanelButton
-              sx={{ position: 'absolute', top: 0, insetInlineEnd: 0 }}
-            />
-          </Panel>
-          <ResizeHandle />
-        </>
+        <ParametersPinnedWrapper>
+          <UnifiedCanvasParameters />
+        </ParametersPinnedWrapper>
      )}
-      <Panel
-        order={1}
-        minSize={30}
-        onResize={() => {
-          dispatch(requestCanvasRescale());
-        }}
-      >
-        {shouldUseCanvasBetaLayout ? (
-          <UnifiedCanvasContentBeta />
-        ) : (
-          <UnifiedCanvasContent />
-        )}
-      </Panel>
-    </PanelGroup>
+      {shouldUseCanvasBetaLayout ? (
+        <UnifiedCanvasContentBeta />
+      ) : (
+        <UnifiedCanvasContent />
+      )}
+    </Flex>
  );
 };

--- a/invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTab.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTab.tsx
@ -14,10 +14,10 @@ import ResizeHandle from '../ResizeHandle';
 import ImageTabParameters from './ImageTabParameters';
 import ImageTabImageParameters from './ImageTabImageParameters';
 import TextTabMain from '../text/TextTabMain';
-import InitialImagePreview from 'features/parameters/components/AdvancedParameters/ImageToImage/InitialImagePreview';
-import InitialImageDisplay from 'features/parameters/components/AdvancedParameters/ImageToImage/InitialImageDisplay';
 import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants';
 import { ImperativePanelGroupHandle } from 'react-resizable-panels';
+import ParametersPinnedWrapper from '../../ParametersPinnedWrapper';
+import InitialImageDisplay from 'features/parameters/components/Parameters/ImageToImage/InitialImageDisplay';

 const selector = createSelector(uiSelector, (ui) => {
  const {
@ -60,19 +60,9 @@ const TextTab = () => {
  return (
    <Flex sx={{ gap: 4, w: 'full', h: 'full' }}>
      {shouldPinParametersPanel && shouldShowParametersPanel && (
-        <Box
-          sx={{
-            position: 'relative',
-            h: 'full',
-            w: PARAMETERS_PANEL_WIDTH,
-            flexShrink: 0,
-          }}
-        >
+        <ParametersPinnedWrapper>
          <ImageTabParameters />
-          <PinParametersPanelButton
-            sx={{ position: 'absolute', top: 0, insetInlineEnd: 0 }}
-          />
-        </Box>
+        </ParametersPinnedWrapper>
      )}
      <Box sx={{ w: 'full', h: 'full' }}>
        <PanelGroup
--- a/invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTabCoreParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTabCoreParameters.tsx
@ -0,0 +1,83 @@
+import { memo } from 'react';
+import { Box, Flex } from '@chakra-ui/react';
+import { createSelector } from '@reduxjs/toolkit';
+import { uiSelector } from 'features/ui/store/uiSelectors';
+import { useAppSelector } from 'app/store/storeHooks';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import ParamIterations from 'features/parameters/components/Parameters/Core/ParamIterations';
+import ParamSteps from 'features/parameters/components/Parameters/Core/ParamSteps';
+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 ParamSampler from 'features/parameters/components/Parameters/Core/ParamSampler';
+import ModelSelect from 'features/system/components/ModelSelect';
+import ImageToImageStrength from 'features/parameters/components/Parameters/ImageToImage/ImageToImageStrength';
+import ImageToImageFit from 'features/parameters/components/Parameters/ImageToImage/ImageToImageFit';
+
+const selector = createSelector(
+  uiSelector,
+  (ui) => {
+    const { shouldUseSliders } = ui;
+
+    return { shouldUseSliders };
+  },
+  defaultSelectorOptions
+);
+
+const ImageTabCoreParameters = () => {
+  const { shouldUseSliders } = useAppSelector(selector);
+
+  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 />
+          <ImageToImageStrength />
+          <ImageToImageFit />
+          <Flex gap={3} w="full">
+            <Box flexGrow={2}>
+              <ParamSampler />
+            </Box>
+            <Box flexGrow={3}>
+              <ModelSelect />
+            </Box>
+          </Flex>
+        </Flex>
+      ) : (
+        <Flex sx={{ gap: 2, flexDirection: 'column' }}>
+          <Flex gap={3}>
+            <ParamIterations />
+            <ParamSteps />
+            <ParamCFGScale />
+          </Flex>
+          <ParamWidth />
+          <ParamHeight />
+          <Flex gap={3} w="full">
+            <Box flexGrow={2}>
+              <ParamSampler />
+            </Box>
+            <Box flexGrow={3}>
+              <ModelSelect />
+            </Box>
+          </Flex>
+          <ImageToImageStrength />
+          <ImageToImageFit />
+        </Flex>
+      )}
+    </Flex>
+  );
+};
+
+export default memo(ImageTabCoreParameters);
--- a/invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTabParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTabParameters.tsx
@ -1,112 +1,27 @@
-import { Box, Flex } from '@chakra-ui/react';
-import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
 import { memo } from 'react';
-import OverlayScrollable from '../../common/OverlayScrollable';
-import ParamPositiveConditioning from 'features/parameters/components/Parameters/ParamPositiveConditioning';
-import ParamNegativeConditioning from 'features/parameters/components/Parameters/ParamNegativeConditioning';
-import { createSelector } from '@reduxjs/toolkit';
-import { uiSelector } from 'features/ui/store/uiSelectors';
-import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import ParamIterations from 'features/parameters/components/Parameters/ParamIterations';
-import ParamSteps from 'features/parameters/components/Parameters/ParamSteps';
-import ParamCFGScale from 'features/parameters/components/Parameters/ParamCFGScale';
-import ParamWidth from 'features/parameters/components/Parameters/ParamWidth';
-import ParamHeight from 'features/parameters/components/Parameters/ParamHeight';
-import ParamScheduler from 'features/parameters/components/Parameters/ParamScheduler';
-import ModelSelect from 'features/system/components/ModelSelect';
+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';
-import ParamHiresCollapse from 'features/parameters/components/Parameters/Hires/ParamHiresCollapse';
 import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
-import ImageToImageStrength from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageStrength';
-import ImageToImageFit from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageFit';
-
-const selector = createSelector(
-  uiSelector,
-  (ui) => {
-    const { shouldUseSliders } = ui;
-
-    return { shouldUseSliders };
-  },
-  defaultSelectorOptions
-);
+import ImageTabCoreParameters from './ImageTabCoreParameters';

 const ImageTabParameters = () => {
-  const { shouldUseSliders } = useAppSelector(selector);
-
  return (
-    <OverlayScrollable>
-      <Flex
-        sx={{
-          gap: 2,
-          flexDirection: 'column',
-          h: 'full',
-          w: 'full',
-          position: 'absolute',
-        }}
-      >
-        <ParamPositiveConditioning />
-        <ParamNegativeConditioning />
-        <ProcessButtons />
-        <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 />
-              <ImageToImageStrength />
-              <ImageToImageFit />
-              <Flex gap={3} w="full">
-                <Box flexGrow={2}>
-                  <ParamScheduler />
-                </Box>
-                <Box flexGrow={3}>
-                  <ModelSelect />
-                </Box>
-              </Flex>
-            </Flex>
-          ) : (
-            <Flex sx={{ gap: 2, flexDirection: 'column' }}>
-              <Flex gap={3}>
-                <ParamIterations />
-                <ParamSteps />
-                <ParamCFGScale />
-              </Flex>
-              <ParamWidth />
-              <ParamHeight />
-              <Flex gap={3} w="full">
-                <Box flexGrow={2}>
-                  <ParamScheduler />
-                </Box>
-                <Box flexGrow={3}>
-                  <ModelSelect />
-                </Box>
-              </Flex>
-              <ImageToImageStrength />
-              <ImageToImageFit />
-            </Flex>
-          )}
-        </Flex>
-        <ParamSeedCollapse />
-        <ParamVariationCollapse />
-        <ParamNoiseCollapse />
-        <ParamSymmetryCollapse />
-        <ParamSeamlessCollapse />
-      </Flex>
-    </OverlayScrollable>
+    <>
+      <ParamPositiveConditioning />
+      <ParamNegativeConditioning />
+      <ProcessButtons />
+      <ImageTabCoreParameters />
+      <ParamSeedCollapse />
+      <ParamVariationCollapse />
+      <ParamNoiseCollapse />
+      <ParamSymmetryCollapse />
+      <ParamSeamlessCollapse />
+    </>
  );
 };

--- a/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTab.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTab.tsx
@ -10,6 +10,7 @@ import TextTabMain from './TextTabMain';
 import ResizeHandle from '../ResizeHandle';
 import TextTabParameters from './TextTabParameters';
 import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants';
+import ParametersPinnedWrapper from '../../ParametersPinnedWrapper';

 const selector = createSelector(uiSelector, (ui) => {
  const {
@ -42,19 +43,9 @@ const TextTab = () => {
  return (
    <Flex sx={{ gap: 4, w: 'full', h: 'full' }}>
      {shouldPinParametersPanel && shouldShowParametersPanel && (
-        <Box
-          sx={{
-            position: 'relative',
-            h: 'full',
-            // w: PARAMETERS_PANEL_WIDTH,
-            flexShrink: 0,
-          }}
-        >
+        <ParametersPinnedWrapper>
          <TextTabParameters />
-          <PinParametersPanelButton
-            sx={{ position: 'absolute', top: 0, insetInlineEnd: 0 }}
-          />
-        </Box>
+        </ParametersPinnedWrapper>
      )}
      <TextTabMain />
    </Flex>
--- a/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTabCoreParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTabCoreParameters.tsx
@ -0,0 +1,77 @@
+import ParamIterations from 'features/parameters/components/Parameters/Core/ParamIterations';
+import ParamSteps from 'features/parameters/components/Parameters/Core/ParamSteps';
+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 ParamSampler from 'features/parameters/components/Parameters/Core/ParamSampler';
+import ModelSelect from 'features/system/components/ModelSelect';
+import { Box, Flex } 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';
+
+const selector = createSelector(
+  uiSelector,
+  (ui) => {
+    const { shouldUseSliders } = ui;
+
+    return { shouldUseSliders };
+  },
+  defaultSelectorOptions
+);
+
+const TextTabCoreParameters = () => {
+  const { shouldUseSliders } = useAppSelector(selector);
+
+  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 />
+          <Flex gap={3} w="full">
+            <Box flexGrow={2}>
+              <ParamSampler />
+            </Box>
+            <Box flexGrow={3}>
+              <ModelSelect />
+            </Box>
+          </Flex>
+        </Flex>
+      ) : (
+        <Flex sx={{ gap: 2, flexDirection: 'column' }}>
+          <Flex gap={3}>
+            <ParamIterations />
+            <ParamSteps />
+            <ParamCFGScale />
+          </Flex>
+          <Flex gap={3} w="full">
+            <Box flexGrow={2}>
+              <ParamSampler />
+            </Box>
+            <Box flexGrow={3}>
+              <ModelSelect />
+            </Box>
+          </Flex>
+          <ParamWidth />
+          <ParamHeight />
+        </Flex>
+      )}
+    </Flex>
+  );
+};
+
+export default memo(TextTabCoreParameters);
--- a/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTabParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTabParameters.tsx
@ -1,107 +1,29 @@
-import { Box, Flex } from '@chakra-ui/react';
 import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
 import { memo } from 'react';
-import OverlayScrollable from '../../common/OverlayScrollable';
-import ParamPositiveConditioning from 'features/parameters/components/Parameters/ParamPositiveConditioning';
-import ParamNegativeConditioning from 'features/parameters/components/Parameters/ParamNegativeConditioning';
-import { createSelector } from '@reduxjs/toolkit';
-import { uiSelector } from 'features/ui/store/uiSelectors';
-import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import ParamIterations from 'features/parameters/components/Parameters/ParamIterations';
-import ParamSteps from 'features/parameters/components/Parameters/ParamSteps';
-import ParamCFGScale from 'features/parameters/components/Parameters/ParamCFGScale';
-import ParamWidth from 'features/parameters/components/Parameters/ParamWidth';
-import ParamHeight from 'features/parameters/components/Parameters/ParamHeight';
-import ParamScheduler from 'features/parameters/components/Parameters/ParamScheduler';
-import ModelSelect from 'features/system/components/ModelSelect';
+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';
 import ParamHiresCollapse from 'features/parameters/components/Parameters/Hires/ParamHiresCollapse';
 import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
-import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants';
-
-const selector = createSelector(
-  uiSelector,
-  (ui) => {
-    const { shouldUseSliders } = ui;
-
-    return { shouldUseSliders };
-  },
-  defaultSelectorOptions
-);
+import TextTabCoreParameters from './TextTabCoreParameters';

 const TextTabParameters = () => {
-  const { shouldUseSliders } = useAppSelector(selector);
-
  return (
-    <OverlayScrollable>
-      <Flex
-        sx={{
-          gap: 2,
-          flexDirection: 'column',
-          h: 'full',
-          w: 'full',
-        }}
-      >
-        <ParamPositiveConditioning />
-        <ParamNegativeConditioning />
-        <ProcessButtons />
-        <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 />
-              <Flex gap={3} w="full">
-                <Box flexGrow={2}>
-                  <ParamScheduler />
-                </Box>
-                <Box flexGrow={3}>
-                  <ModelSelect />
-                </Box>
-              </Flex>
-            </Flex>
-          ) : (
-            <Flex sx={{ gap: 2, flexDirection: 'column' }}>
-              <Flex gap={3}>
-                <ParamIterations />
-                <ParamSteps />
-                <ParamCFGScale />
-              </Flex>
-              <Flex gap={3} w="full">
-                <Box flexGrow={2}>
-                  <ParamScheduler />
-                </Box>
-                <Box flexGrow={3}>
-                  <ModelSelect />
-                </Box>
-              </Flex>
-              <ParamWidth />
-              <ParamHeight />
-            </Flex>
-          )}
-        </Flex>
-        <ParamSeedCollapse />
-        <ParamVariationCollapse />
-        <ParamNoiseCollapse />
-        <ParamSymmetryCollapse />
-        <ParamHiresCollapse />
-        <ParamSeamlessCollapse />
-      </Flex>
-    </OverlayScrollable>
+    <>
+      <ParamPositiveConditioning />
+      <ParamNegativeConditioning />
+      <ProcessButtons />
+      <TextTabCoreParameters />
+      <ParamSeedCollapse />
+      <ParamVariationCollapse />
+      <ParamNoiseCollapse />
+      <ParamSymmetryCollapse />
+      <ParamHiresCollapse />
+      <ParamSeamlessCollapse />
+    </>
  );
 };