feat(ui): revert tabs to txt2img/img2img

2024-08-30 20:32:17 +00:00 · 2023-05-08 22:57:05 +10:00
parent 33c69359c2
commit c4b3a24ed7
41 changed files with 535 additions and 379 deletions
--- a/invokeai/frontend/web/src/features/ui/components/CreateParametersDrawer.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/CreateParametersDrawer.tsx
@ -1,115 +0,0 @@
-import { isEqual } from 'lodash-es';
-import ResizableDrawer from './common/ResizableDrawer/ResizableDrawer';
-import TextTabParameters from './tabs/text/TextTabParameters';
-import { createSelector } from '@reduxjs/toolkit';
-import { activeTabNameSelector, uiSelector } from '../store/uiSelectors';
-import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import {
-  setShouldShowParametersPanel,
-  toggleParametersPanel,
-} from '../store/uiSlice';
-import { memo } from 'react';
-import { Flex } from '@chakra-ui/react';
-import InvokeAILogoComponent from 'features/system/components/InvokeAILogoComponent';
-import PinParametersPanelButton from './PinParametersPanelButton';
-import { Panel, PanelGroup } from 'react-resizable-panels';
-import CreateSidePanelPinned from './tabs/text/TextTabSettingsPinned';
-import CreateTextParameters from './tabs/text/TextTabParameters';
-import ResizeHandle from './tabs/ResizeHandle';
-import CreateImageSettings from './tabs/image/ImageTabSettings';
-
-const selector = createSelector(
-  [uiSelector, activeTabNameSelector, lightboxSelector],
-  (ui, activeTabName, lightbox) => {
-    const {
-      shouldPinParametersPanel,
-      shouldShowParametersPanel,
-      shouldShowImageParameters,
-    } = ui;
-    const { isLightboxOpen } = lightbox;
-
-    return {
-      shouldPinParametersPanel,
-      shouldShowParametersPanel,
-      shouldShowImageParameters,
-    };
-  },
-  {
-    memoizeOptions: {
-      resultEqualityCheck: isEqual,
-    },
-  }
-);
-
-const CreateParametersPanel = () => {
-  const dispatch = useAppDispatch();
-  const {
-    shouldPinParametersPanel,
-    shouldShowParametersPanel,
-    shouldShowImageParameters,
-  } = useAppSelector(selector);
-
-  const handleClosePanel = () => {
-    dispatch(setShouldShowParametersPanel(false));
-  };
-
-  if (shouldPinParametersPanel) {
-    return null;
-  }
-
-  return (
-    <ResizableDrawer
-      direction="left"
-      isResizable={true}
-      isOpen={shouldShowParametersPanel}
-      onClose={handleClosePanel}
-      minWidth={500}
-    >
-      <Flex flexDir="column" position="relative" h="full" w="full">
-        <Flex
-          paddingTop={1.5}
-          paddingBottom={4}
-          justifyContent="space-between"
-          alignItems="center"
-        >
-          <InvokeAILogoComponent />
-          <PinParametersPanelButton />
-        </Flex>
-        <PanelGroup
-          autoSaveId="createTab_floatingParameters"
-          direction="horizontal"
-          style={{ height: '100%', width: '100%' }}
-        >
-          <>
-            <Panel
-              id="createTab_textParameters"
-              order={0}
-              defaultSize={25}
-              minSize={25}
-              style={{ position: 'relative' }}
-            >
-              <CreateTextParameters />
-            </Panel>
-            {shouldShowImageParameters && (
-              <>
-                <ResizeHandle />
-                <Panel
-                  id="createTab_imageParameters"
-                  order={1}
-                  defaultSize={25}
-                  minSize={25}
-                  style={{ position: 'relative' }}
-                >
-                  <CreateImageSettings />
-                </Panel>
-              </>
-            )}
-          </>
-        </PanelGroup>
-      </Flex>
-    </ResizableDrawer>
-  );
-};
-
-export default memo(CreateParametersPanel);
--- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
@ -33,7 +33,6 @@ import { useTranslation } from 'react-i18next';
 import { ResourceKey } from 'i18next';
 import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
 import NodeEditor from 'features/nodes/components/NodeEditor';
-import GenerateWorkspace from './tabs/text/GenerateWorkspace';
 import { createSelector } from '@reduxjs/toolkit';
 import { BsLightningChargeFill } from 'react-icons/bs';
 import { configSelector } from 'features/system/store/configSelectors';
@ -43,7 +42,7 @@ import Scrollable from './common/Scrollable';
 import TextTabParameters from './tabs/text/TextTabParameters';
 import PinParametersPanelButton from './PinParametersPanelButton';
 import ParametersSlide from './common/ParametersSlide';
-import ImageGalleryPanel from 'features/gallery/components/ImageGalleryPanel';
+import GalleryDrawer from 'features/gallery/components/ImageGalleryPanel';
 import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 import ImageGalleryContent from 'features/gallery/components/ImageGalleryContent';
 import TextTabMain from './tabs/text/TextTabMain';
@ -54,6 +53,7 @@ import UnifiedCanvasTab from './tabs/UnifiedCanvas/UnifiedCanvasTab';
 import NodesTab from './tabs/Nodes/NodesTab';
 import { FaImage } from 'react-icons/fa';
 import ResizeHandle from './tabs/ResizeHandle';
+import ImageTab from './tabs/image/ImageTab';

 export interface InvokeTabInfo {
  id: InvokeTabName;
@ -70,7 +70,7 @@ const tabs: InvokeTabInfo[] = [
  {
    id: 'image',
    icon: <Icon as={FaImage} sx={{ boxSize: 5 }} />,
-    content: <TextTab />,
+    content: <ImageTab />,
  },
  {
    id: 'unifiedCanvas',
@ -114,22 +114,6 @@ const InvokeTabs = () => {

  const dispatch = useAppDispatch();

-  useHotkeys('1', () => {
-    dispatch(setActiveTab('text'));
-  });
-
-  useHotkeys('2', () => {
-    dispatch(setActiveTab('image'));
-  });
-
-  useHotkeys('3', () => {
-    dispatch(setActiveTab('unifiedCanvas'));
-  });
-
-  useHotkeys('4', () => {
-    dispatch(setActiveTab('nodes'));
-  });
-
  // Lightbox Hotkey
  useHotkeys(
    'z',
@ -200,7 +184,7 @@ const InvokeTabs = () => {
        direction="horizontal"
        style={{ height: '100%', width: '100%' }}
      >
-        <Panel id="tabContent">
+        <Panel id="main">
          <TabPanels style={{ height: '100%', width: '100%' }}>
            {tabPanels}
          </TabPanels>
@ -208,7 +192,13 @@ const InvokeTabs = () => {
        {shouldPinGallery && shouldShowGallery && (
          <>
            <ResizeHandle />
-            <Panel id="gallery" order={3} defaultSize={10} minSize={10}>
+            <Panel
+              id="gallery"
+              order={3}
+              defaultSize={10}
+              minSize={10}
+              maxSize={50}
+            >
              <ImageGalleryContent />
            </Panel>
          </>
--- a/invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx
@ -0,0 +1,32 @@
+import { useAppSelector } from 'app/store/storeHooks';
+import { memo } from 'react';
+import { activeTabNameSelector } from '../store/uiSelectors';
+import TextTabParametersDrawer from './tabs/text/TextTabParametersDrawer';
+import { RootState } from 'app/store/store';
+
+const ParametersDrawer = () => {
+  const activeTabName = useAppSelector(activeTabNameSelector);
+  const shouldPinParametersPanel = useAppSelector(
+    (state: RootState) => state.ui.shouldPinParametersPanel
+  );
+
+  if (shouldPinParametersPanel) {
+    return null;
+  }
+
+  if (activeTabName === 'text') {
+    return <TextTabParametersDrawer />;
+  }
+
+  if (activeTabName === 'image') {
+    return null;
+  }
+
+  if (activeTabName === 'unifiedCanvas') {
+    return null;
+  }
+
+  return null;
+};
+
+export default memo(ParametersDrawer);
--- a/invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTab.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTab.tsx
@ -7,6 +7,11 @@ import { uiSelector } from 'features/ui/store/uiSelectors';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
 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';

 const selector = createSelector(uiSelector, (ui) => {
  const {
@ -38,20 +43,20 @@ const TextTab = () => {

  return (
    <PanelGroup
-      autoSaveId="textTab"
+      autoSaveId="imageTab"
      direction="horizontal"
      style={{ height: '100%', width: '100%' }}
    >
      {shouldPinParametersPanel && shouldShowParametersPanel && (
        <>
          <Panel
-            id="textTab_settings"
+            id="imageTab_parameters"
            order={0}
            defaultSize={25}
            minSize={25}
            style={{ position: 'relative' }}
          >
-            {/* <TextTabSettings /> */}
+            <ImageTabParameters />
            <PinParametersPanelButton
              sx={{ position: 'absolute', top: 0, insetInlineEnd: 0 }}
            />
@ -59,15 +64,34 @@ const TextTab = () => {
          <ResizeHandle />
        </>
      )}
-      <Panel
-        id="textTab_main"
-        order={2}
-        minSize={30}
-        onResize={() => {
-          dispatch(requestCanvasRescale());
-        }}
-      >
-        {/* <TextTabMain /> */}
+      <Panel id="imageTab_content" order={1}>
+        <PanelGroup
+          autoSaveId="imageTab_contentWrapper"
+          direction="horizontal"
+          style={{ height: '100%', width: '100%' }}
+        >
+          <Panel
+            id="imageTab_initImage"
+            order={0}
+            defaultSize={50}
+            minSize={25}
+            style={{ position: 'relative' }}
+          >
+            <InitialImageDisplay />
+          </Panel>
+          <ResizeHandle />
+          <Panel
+            id="imageTab_selectedImage"
+            order={1}
+            defaultSize={50}
+            minSize={25}
+            onResize={() => {
+              dispatch(requestCanvasRescale());
+            }}
+          >
+            <TextTabMain />
+          </Panel>
+        </PanelGroup>
      </Panel>
    </PanelGroup>
  );
--- a/invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTabImageParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTabImageParameters.tsx
@ -0,0 +1,61 @@
+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 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 InitialImagePreview from 'features/parameters/components/AdvancedParameters/ImageToImage/InitialImagePreview';
+import ImageToImageStrength from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageStrength';
+import ImageToImageFit from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageFit';
+import InitialImageButtons from 'common/components/ImageToImageButtons';
+
+const selector = createSelector(
+  uiSelector,
+  (ui) => {
+    const { shouldUseSliders } = ui;
+
+    return { shouldUseSliders };
+  },
+  defaultSelectorOptions
+);
+
+const ImageTabParameters = () => {
+  const { shouldUseSliders } = useAppSelector(selector);
+
+  return (
+    <OverlayScrollable>
+      <Flex
+        sx={{
+          gap: 2,
+          flexDirection: 'column',
+          h: 'full',
+          w: 'full',
+          position: 'absolute',
+        }}
+      >
+        <InitialImageButtons />
+        <InitialImagePreview />
+        <ImageToImageFit />
+      </Flex>
+    </OverlayScrollable>
+  );
+};
+
+export default memo(ImageTabParameters);
--- a/invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTabParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTabParameters.tsx
@ -0,0 +1,113 @@
+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 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
+);
+
+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>
+  );
+};
+
+export default memo(ImageTabParameters);
--- a/invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTabSettings.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTabSettings.tsx
@ -1,53 +0,0 @@
-import { memo } from 'react';
-import OverlayScrollable from '../../common/OverlayScrollable';
-import ImageToImageSettings from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageSettings';
-import {
-  Box,
-  ButtonGroup,
-  Collapse,
-  Flex,
-  Heading,
-  HStack,
-  Image,
-  Spacer,
-  useDisclosure,
-  VStack,
-} from '@chakra-ui/react';
-import { motion } from 'framer-motion';
-
-import IAIButton from 'common/components/IAIButton';
-import ImageFit from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageFit';
-import ImageToImageStrength from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageStrength';
-import IAIIconButton from 'common/components/IAIIconButton';
-
-import { useTranslation } from 'react-i18next';
-import { useState } from 'react';
-import { FaUndo, FaUpload } from 'react-icons/fa';
-import ImagePromptHeading from 'common/components/ImageToImageSettingsHeader';
-import InitialImagePreview from 'features/parameters/components/AdvancedParameters/ImageToImage/InitialImagePreview';
-
-const CreateImageSettings = () => {
-  return (
-    <OverlayScrollable>
-      <Flex
-        sx={{
-          gap: 2,
-          flexDirection: 'column',
-          h: 'full',
-          w: 'full',
-          position: 'absolute',
-          borderRadius: 'base',
-          // bg: 'base.850',
-          // p: 2,
-        }}
-      >
-        <ImagePromptHeading />
-        <InitialImagePreview />
-        <ImageToImageStrength />
-        <ImageFit />
-      </Flex>
-    </OverlayScrollable>
-  );
-};
-
-export default memo(CreateImageSettings);
--- a/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTab.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTab.tsx
@ -8,7 +8,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
 import TextTabMain from './TextTabMain';
 import ResizeHandle from '../ResizeHandle';
-import TextTabSettings from './TextTabParameters';
+import TextTabParameters from './TextTabParameters';

 const selector = createSelector(uiSelector, (ui) => {
  const {
@ -47,13 +47,13 @@ const TextTab = () => {
      {shouldPinParametersPanel && shouldShowParametersPanel && (
        <>
          <Panel
-            id="textTab_settings"
+            id="textTab_parameters"
            order={0}
            defaultSize={25}
            minSize={25}
            style={{ position: 'relative' }}
          >
-            <TextTabSettings />
+            <TextTabParameters />
            <PinParametersPanelButton
              sx={{ position: 'absolute', top: 0, insetInlineEnd: 0 }}
            />
@ -61,14 +61,7 @@ const TextTab = () => {
          <ResizeHandle />
        </>
      )}
-      <Panel
-        id="textTab_main"
-        order={2}
-        minSize={30}
-        onResize={() => {
-          dispatch(requestCanvasRescale());
-        }}
-      >
+      <Panel id="textTab_content" order={2} minSize={30}>
        <TextTabMain />
      </Panel>
    </PanelGroup>
--- a/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTabMain.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTabMain.tsx
@ -1,6 +1,5 @@
 import { Box, Flex } from '@chakra-ui/react';
 import CurrentImageDisplay from 'features/gallery/components/CurrentImageDisplay';
-import ProgressImagePreview from 'features/parameters/components/ProgressImagePreview';

 const TextTabMain = () => {
  return (
--- a/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTabParametersDrawer.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTabParametersDrawer.tsx
@ -0,0 +1,73 @@
+import { isEqual } from 'lodash-es';
+import ResizableDrawer from '../../common/ResizableDrawer/ResizableDrawer';
+import TextTabParameters from './TextTabParameters';
+import { createSelector } from '@reduxjs/toolkit';
+import { activeTabNameSelector, uiSelector } from '../../../store/uiSelectors';
+import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { setShouldShowParametersPanel } from '../../../store/uiSlice';
+import { memo } from 'react';
+import { Flex } from '@chakra-ui/react';
+import InvokeAILogoComponent from 'features/system/components/InvokeAILogoComponent';
+import PinParametersPanelButton from '../../PinParametersPanelButton';
+import { Panel, PanelGroup } from 'react-resizable-panels';
+
+const selector = createSelector(
+  [uiSelector, activeTabNameSelector, lightboxSelector],
+  (ui, activeTabName, lightbox) => {
+    const {
+      shouldPinParametersPanel,
+      shouldShowParametersPanel,
+      shouldShowImageParameters,
+    } = ui;
+
+    const { isLightboxOpen } = lightbox;
+
+    return {
+      activeTabName,
+      shouldPinParametersPanel,
+      shouldShowParametersPanel,
+      shouldShowImageParameters,
+    };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: isEqual,
+    },
+  }
+);
+
+const TextTabParametersDrawer = () => {
+  const dispatch = useAppDispatch();
+  const { shouldPinParametersPanel, shouldShowParametersPanel } =
+    useAppSelector(selector);
+
+  const handleClosePanel = () => {
+    dispatch(setShouldShowParametersPanel(false));
+  };
+
+  return (
+    <ResizableDrawer
+      direction="left"
+      isResizable={true}
+      isOpen={shouldShowParametersPanel}
+      onClose={handleClosePanel}
+      minWidth={500}
+    >
+      <Flex flexDir="column" position="relative" h="full" w="full">
+        <Flex
+          paddingTop={1.5}
+          paddingBottom={4}
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <InvokeAILogoComponent />
+          <PinParametersPanelButton />
+        </Flex>
+        <TextTabParameters />
+      </Flex>
+    </ResizableDrawer>
+  );
+};
+
+export default memo(TextTabParametersDrawer);
--- a/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTabSettingsPinned.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTabSettingsPinned.tsx
@ -1,69 +0,0 @@
-import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { uiSelector } from 'features/ui/store/uiSelectors';
-import { memo } from 'react';
-import { Panel } from 'react-resizable-panels';
-import CreateTextParameters from './TextTabParameters';
-import PinParametersPanelButton from '../../PinParametersPanelButton';
-import ResizeHandle from '../ResizeHandle';
-import ImageToImageSettings from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageSettings';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import CreateImageSettings from '../image/ImageTabSettings';
-
-const selector = createSelector(
-  uiSelector,
-  (ui) => {
-    const {
-      shouldPinParametersPanel,
-      shouldShowParametersPanel,
-      shouldShowImageParameters,
-    } = ui;
-
-    return {
-      shouldPinParametersPanel,
-      shouldShowParametersPanel,
-      shouldShowImageParameters,
-    };
-  },
-  defaultSelectorOptions
-);
-
-const CreateSidePanelPinned = () => {
-  const dispatch = useAppDispatch();
-  const {
-    shouldPinParametersPanel,
-    shouldShowParametersPanel,
-    shouldShowImageParameters,
-  } = useAppSelector(selector);
-  return (
-    <>
-      <Panel
-        order={0}
-        defaultSize={25}
-        minSize={25}
-        style={{ position: 'relative' }}
-      >
-        <CreateTextParameters />
-        <PinParametersPanelButton
-          sx={{ position: 'absolute', top: 0, insetInlineEnd: 0 }}
-        />
-      </Panel>
-      {shouldShowImageParameters && (
-        <>
-          <ResizeHandle />
-          <Panel
-            order={1}
-            defaultSize={25}
-            minSize={25}
-            style={{ position: 'relative' }}
-          >
-            <CreateImageSettings />
-          </Panel>
-        </>
-      )}
-      <ResizeHandle />
-    </>
-  );
-};
-
-export default memo(CreateSidePanelPinned);