feat(ui): restore tab names

invokeai/frontend/web/public/locales/en.json

@@ -54,7 +54,7 @@
         "img2img": "Image To Image",
         "unifiedCanvas": "Unified Canvas",
         "linear": "Linear",
-        "nodes": "Nodes",
+        "nodes": "Node Editor",
         "postprocessing": "Post Processing",
         "nodesDesc": "A node based system for the generation of images is under development currently. Stay tuned for updates about this amazing feature.",
         "postProcessing": "Post Processing",

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/userInvokedImageToImage.ts

@@ -10,7 +10,7 @@ const moduleLog = log.child({ namespace: 'invoke' });
 export const addUserInvokedImageToImageListener = () => {
   startAppListening({
     predicate: (action): action is ReturnType<typeof userInvoked> =>
-      userInvoked.match(action) && action.payload === 'image',
+      userInvoked.match(action) && action.payload === 'img2img',
     effect: (action, { getState, dispatch }) => {
       const state = getState();
 

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/userInvokedTextToImage.ts

@@ -10,7 +10,7 @@ const moduleLog = log.child({ namespace: 'invoke' });
 export const addUserInvokedTextToImageListener = () => {
   startAppListening({
     predicate: (action): action is ReturnType<typeof userInvoked> =>
-      userInvoked.match(action) && action.payload === 'text',
+      userInvoked.match(action) && action.payload === 'txt2img',
     effect: (action, { getState, dispatch }) => {
       const state = getState();
 

invokeai/frontend/web/src/common/hooks/useGlobalHotkeys.ts

@@ -61,11 +61,11 @@ export const useGlobalHotkeys = () => {
   });
 
   useHotkeys('1', () => {
-    dispatch(setActiveTab('text'));
+    dispatch(setActiveTab('txt2img'));
   });
 
   useHotkeys('2', () => {
-    dispatch(setActiveTab('image'));
+    dispatch(setActiveTab('img2img'));
   });
 
   useHotkeys('3', () => {

invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx

@@ -40,7 +40,7 @@ export const floatingParametersPanelButtonSelector = createSelector(
     const shouldShowParametersPanelButton =
       !canvasBetaLayoutCheck &&
       !shouldShowParametersPanel &&
-      ['text', 'image', 'unifiedCanvas'].includes(activeTabName);
+      ['txt2img', 'img2img', 'unifiedCanvas'].includes(activeTabName);
 
     return {
       shouldPinParametersPanel,

invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx

@@ -26,12 +26,12 @@ import { configSelector } from 'features/system/store/configSelectors';
 import { isEqual } from 'lodash-es';
 import { Panel, PanelGroup } from 'react-resizable-panels';
 import ImageGalleryContent from 'features/gallery/components/ImageGalleryContent';
-import TextTab from './tabs/text/TextTab';
+import TextToImageTab from './tabs/TextToImage/TextToImageTab';
 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';
+import ImageTab from './tabs/ImageToImage/ImageToImageTab';
 
 export interface InvokeTabInfo {
   id: InvokeTabName;
@@ -41,12 +41,12 @@ export interface InvokeTabInfo {
 
 const tabs: InvokeTabInfo[] = [
   {
-    id: 'text',
+    id: 'txt2img',
     icon: <Icon as={GoTextSize} sx={{ boxSize: 5 }} />,
-    content: <TextTab />,
+    content: <TextToImageTab />,
   },
   {
-    id: 'image',
+    id: 'img2img',
     icon: <Icon as={FaImage} sx={{ boxSize: 5 }} />,
     content: <ImageTab />,
   },

invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx

@@ -14,8 +14,8 @@ import {
 import { setShouldShowParametersPanel } from 'features/ui/store/uiSlice';
 import ResizableDrawer from './common/ResizableDrawer/ResizableDrawer';
 import PinParametersPanelButton from './PinParametersPanelButton';
-import TextTabParameters from './tabs/text/TextTabParameters';
+import TextToImageTabParameters from './tabs/TextToImage/TextToImageTabParameters';
-import ImageTabParameters from './tabs/image/ImageTabParameters';
+import ImageToImageTabParameters from './tabs/ImageToImage/ImageToImageTabParameters';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import UnifiedCanvasParameters from './tabs/UnifiedCanvas/UnifiedCanvasParameters';
 
@@ -50,12 +50,12 @@ const ParametersDrawer = () => {
   };
 
   const drawerContent = useMemo(() => {
-    if (activeTabName === 'text') {
+    if (activeTabName === 'txt2img') {
-      return <TextTabParameters />;
+      return <TextToImageTabParameters />;
     }
 
-    if (activeTabName === 'image') {
+    if (activeTabName === 'img2img') {
-      return <ImageTabParameters />;
+      return <ImageToImageTabParameters />;
     }
 
     if (activeTabName === 'unifiedCanvas') {

invokeai/frontend/web/src/features/ui/components/ParametersPinnedWrapper.tsx

@@ -3,10 +3,29 @@ import { PropsWithChildren, memo } from 'react';
 import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants';
 import OverlayScrollable from './common/OverlayScrollable';
 import PinParametersPanelButton from './PinParametersPanelButton';
+import { createSelector } from '@reduxjs/toolkit';
+import { uiSelector } from '../store/uiSelectors';
+import { useAppSelector } from 'app/store/storeHooks';
+
+const selector = createSelector(uiSelector, (ui) => {
+  const { shouldPinParametersPanel, shouldShowParametersPanel } = ui;
+
+  return {
+    shouldPinParametersPanel,
+    shouldShowParametersPanel,
+  };
+});
 
 type ParametersPinnedWrapperProps = PropsWithChildren;
 
 const ParametersPinnedWrapper = (props: ParametersPinnedWrapperProps) => {
+  const { shouldPinParametersPanel, shouldShowParametersPanel } =
+    useAppSelector(selector);
+
+  if (!(shouldPinParametersPanel && shouldShowParametersPanel)) {
+    return null;
+  }
+
   return (
     <Box
       sx={{

invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTab.tsx

@@ -1,43 +1,16 @@
-import { Box, Flex, Portal, TabPanel } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 import { memo, useCallback, useRef } from 'react';
-import {
+import { Panel, PanelGroup } from 'react-resizable-panels';
-  ImperativePanelHandle,
+import { useAppDispatch } from 'app/store/storeHooks';
-  Panel,
-  PanelGroup,
-} from 'react-resizable-panels';
-import PinParametersPanelButton from '../../PinParametersPanelButton';
-import { createSelector } from '@reduxjs/toolkit';
-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 ImageToImageTabParameters from './ImageToImageTabParameters';
-import ImageTabImageParameters from './ImageTabImageParameters';
+import TextToImageTabMain from '../TextToImage/TextToImageTabMain';
-import TextTabMain from '../text/TextTabMain';
-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 ImageToImageTab = () => {
-  const {
-    shouldPinGallery,
-    shouldShowGallery,
-    shouldPinParametersPanel,
-    shouldShowParametersPanel,
-    shouldShowImageParameters,
-  } = ui;
-
-  return {
-    shouldPinGallery,
-    shouldShowGallery,
-    shouldPinParametersPanel,
-    shouldShowParametersPanel,
-    shouldShowImageParameters,
-  };
-});
-
-const TextTab = () => {
   const dispatch = useAppDispatch();
   const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
 
@@ -49,21 +22,11 @@ const TextTab = () => {
     panelGroupRef.current.setLayout([50, 50]);
   }, []);
 
-  const {
-    shouldPinGallery,
-    shouldShowGallery,
-    shouldPinParametersPanel,
-    shouldShowParametersPanel,
-    shouldShowImageParameters,
-  } = useAppSelector(selector);
-
   return (
     <Flex sx={{ gap: 4, w: 'full', h: 'full' }}>
-      {shouldPinParametersPanel && shouldShowParametersPanel && (
+      <ParametersPinnedWrapper>
-        <ParametersPinnedWrapper>
+        <ImageToImageTabParameters />
-          <ImageTabParameters />
+      </ParametersPinnedWrapper>
-        </ParametersPinnedWrapper>
-      )}
       <Box sx={{ w: 'full', h: 'full' }}>
         <PanelGroup
           ref={panelGroupRef}
@@ -90,7 +53,7 @@ const TextTab = () => {
               dispatch(requestCanvasRescale());
             }}
           >
-            <TextTabMain />
+            <TextToImageTabMain />
           </Panel>
         </PanelGroup>
       </Box>
@@ -98,4 +61,4 @@ const TextTab = () => {
   );
 };
 
-export default memo(TextTab);
+export default memo(ImageToImageTab);

invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx

@@ -24,7 +24,7 @@ const selector = createSelector(
   defaultSelectorOptions
 );
 
-const ImageTabCoreParameters = () => {
+const ImageToImageTabCoreParameters = () => {
   const { shouldUseSliders } = useAppSelector(selector);
 
   return (
@@ -80,4 +80,4 @@ const ImageTabCoreParameters = () => {
   );
 };
 
-export default memo(ImageTabCoreParameters);
+export default memo(ImageToImageTabCoreParameters);

invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx

@@ -7,15 +7,15 @@ import ParamVariationCollapse from 'features/parameters/components/Parameters/Va
 import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
 import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
 import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
-import ImageTabCoreParameters from './ImageTabCoreParameters';
+import ImageToImageTabCoreParameters from './ImageToImageTabCoreParameters';
 
-const ImageTabParameters = () => {
+const ImageToImageTabParameters = () => {
   return (
     <>
       <ParamPositiveConditioning />
       <ParamNegativeConditioning />
       <ProcessButtons />
-      <ImageTabCoreParameters />
+      <ImageToImageTabCoreParameters />
       <ParamSeedCollapse />
       <ParamVariationCollapse />
       <ParamNoiseCollapse />
@@ -25,4 +25,4 @@ const ImageTabParameters = () => {
   );
 };
 
-export default memo(ImageTabParameters);
+export default memo(ImageToImageTabParameters);

invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTab.tsx

@@ -0,0 +1,18 @@
+import { Flex } from '@chakra-ui/react';
+import { memo } from 'react';
+import TextToImageTabMain from './TextToImageTabMain';
+import TextToImageTabParameters from './TextToImageTabParameters';
+import ParametersPinnedWrapper from '../../ParametersPinnedWrapper';
+
+const TextToImageTab = () => {
+  return (
+    <Flex sx={{ gap: 4, w: 'full', h: 'full' }}>
+      <ParametersPinnedWrapper>
+        <TextToImageTabParameters />
+      </ParametersPinnedWrapper>
+      <TextToImageTabMain />
+    </Flex>
+  );
+};
+
+export default memo(TextToImageTab);

invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx

@@ -22,7 +22,7 @@ const selector = createSelector(
   defaultSelectorOptions
 );
 
-const TextTabCoreParameters = () => {
+const TextToImageTabCoreParameters = () => {
   const { shouldUseSliders } = useAppSelector(selector);
 
   return (
@@ -74,4 +74,4 @@ const TextTabCoreParameters = () => {
   );
 };
 
-export default memo(TextTabCoreParameters);
+export default memo(TextToImageTabCoreParameters);

invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabMain.tsx

@@ -1,7 +1,7 @@
 import { Box, Flex } from '@chakra-ui/react';
 import CurrentImageDisplay from 'features/gallery/components/CurrentImageDisplay';
 
-const TextTabMain = () => {
+const TextToImageTabMain = () => {
   return (
     <Box
       sx={{
@@ -25,4 +25,4 @@ const TextTabMain = () => {
   );
 };
 
-export default TextTabMain;
+export default TextToImageTabMain;

invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx

@@ -8,15 +8,15 @@ import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/
 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 TextTabCoreParameters from './TextTabCoreParameters';
+import TextToImageTabCoreParameters from './TextToImageTabCoreParameters';
 
-const TextTabParameters = () => {
+const TextToImageTabParameters = () => {
   return (
     <>
       <ParamPositiveConditioning />
       <ParamNegativeConditioning />
       <ProcessButtons />
-      <TextTabCoreParameters />
+      <TextToImageTabCoreParameters />
       <ParamSeedCollapse />
       <ParamVariationCollapse />
       <ParamNoiseCollapse />
@@ -27,4 +27,4 @@ const TextTabParameters = () => {
   );
 };
 
-export default memo(TextTabParameters);
+export default memo(TextToImageTabParameters);

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

@@ -1,54 +1,29 @@
-import { Box, Flex, TabPanel } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 import { memo } from 'react';
-import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
-import PinParametersPanelButton from '../../PinParametersPanelButton';
-import ImageGalleryContent from 'features/gallery/components/ImageGalleryContent';
 import { createSelector } from '@reduxjs/toolkit';
 import { uiSelector } from 'features/ui/store/uiSelectors';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useAppSelector } from 'app/store/storeHooks';
-import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
 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 {
+  const { shouldUseCanvasBetaLayout } = ui;
-    shouldPinGallery,
-    shouldShowGallery,
-    shouldPinParametersPanel,
-    shouldShowParametersPanel,
-    shouldUseCanvasBetaLayout,
-  } = ui;
 
   return {
-    shouldPinGallery,
-    shouldShowGallery,
-    shouldPinParametersPanel,
-    shouldShowParametersPanel,
     shouldUseCanvasBetaLayout,
   };
 });
 
 const UnifiedCanvasTab = () => {
-  const dispatch = useAppDispatch();
+  const { shouldUseCanvasBetaLayout } = useAppSelector(selector);
-  const {
-    shouldPinGallery,
-    shouldShowGallery,
-    shouldPinParametersPanel,
-    shouldShowParametersPanel,
-    shouldUseCanvasBetaLayout,
-  } = useAppSelector(selector);
 
   return (
     <Flex sx={{ gap: 4, w: 'full', h: 'full' }}>
-      {shouldPinParametersPanel && shouldShowParametersPanel && (
+      <ParametersPinnedWrapper>
-        <ParametersPinnedWrapper>
+        <UnifiedCanvasParameters />
-          <UnifiedCanvasParameters />
+      </ParametersPinnedWrapper>
-        </ParametersPinnedWrapper>
-      )}
       {shouldUseCanvasBetaLayout ? (
         <UnifiedCanvasContentBeta />
       ) : (

invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTabImageParameters.tsx

@@ -1,61 +0,0 @@
-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);

invokeai/frontend/web/src/features/ui/components/tabs/text/TextTab.tsx

@@ -1,55 +0,0 @@
-import { Box, Flex, Portal, TabPanel } from '@chakra-ui/react';
-import { memo } from 'react';
-import { Panel, PanelGroup } from 'react-resizable-panels';
-import PinParametersPanelButton from '../../PinParametersPanelButton';
-import { createSelector } from '@reduxjs/toolkit';
-import { uiSelector } from 'features/ui/store/uiSelectors';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
-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 {
-    shouldPinGallery,
-    shouldShowGallery,
-    shouldPinParametersPanel,
-    shouldShowParametersPanel,
-    shouldShowImageParameters,
-  } = ui;
-
-  return {
-    shouldPinGallery,
-    shouldShowGallery,
-    shouldPinParametersPanel,
-    shouldShowParametersPanel,
-    shouldShowImageParameters,
-  };
-});
-
-const TextTab = () => {
-  const dispatch = useAppDispatch();
-  const {
-    shouldPinGallery,
-    shouldShowGallery,
-    shouldPinParametersPanel,
-    shouldShowParametersPanel,
-    shouldShowImageParameters,
-  } = useAppSelector(selector);
-
-  return (
-    <Flex sx={{ gap: 4, w: 'full', h: 'full' }}>
-      {shouldPinParametersPanel && shouldShowParametersPanel && (
-        <ParametersPinnedWrapper>
-          <TextTabParameters />
-        </ParametersPinnedWrapper>
-      )}
-      <TextTabMain />
-    </Flex>
-  );
-};
-
-export default memo(TextTab);

invokeai/frontend/web/src/features/ui/store/tabMap.ts

@@ -1,6 +1,6 @@
 export const tabMap = [
-  'text',
+  'txt2img',
-  'image',
+  'img2img',
   // 'generate',
   'unifiedCanvas',
   'nodes',

invokeai/frontend/web/src/features/ui/store/uiSlice.ts

@@ -105,11 +105,11 @@ export const uiSlice = createSlice({
       }
     },
     openAccordionItemsChanged: (state, action: PayloadAction<number[]>) => {
-      if (tabMap[state.activeTab] === 'text') {
+      if (tabMap[state.activeTab] === 'txt2img') {
         state.textTabAccordionState = action.payload;
       }
 
-      if (tabMap[state.activeTab] === 'image') {
+      if (tabMap[state.activeTab] === 'img2img') {
         state.imageTabAccordionState = action.payload;
       }