diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index ab5d536f0c..eb87ea6420 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -53,6 +53,7 @@
"linear": "Linear",
"nodes": "Node Editor",
"batch": "Batch Manager",
+ "modelmanager": "Model Manager",
"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",
diff --git a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
index 1b2ae81072..72722ea30e 100644
--- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
@@ -9,35 +9,35 @@ import {
Tooltip,
VisuallyHidden,
} from '@chakra-ui/react';
+import { createSelector } from '@reduxjs/toolkit';
+import AuxiliaryProgressIndicator from 'app/components/AuxiliaryProgressIndicator';
import { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
+import ImageGalleryContent from 'features/gallery/components/ImageGalleryContent';
import { setIsLightboxOpen } from 'features/lightbox/store/lightboxSlice';
+import { configSelector } from 'features/system/store/configSelectors';
import { InvokeTabName } from 'features/ui/store/tabMap';
import { setActiveTab, togglePanels } from 'features/ui/store/uiSlice';
-import { memo, MouseEvent, ReactNode, useCallback, useMemo } from 'react';
+import { ResourceKey } from 'i18next';
+import { isEqual } from 'lodash-es';
+import { MouseEvent, ReactNode, memo, useCallback, useMemo } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
+import { useTranslation } from 'react-i18next';
+import { FaCube, FaFont, FaImage } from 'react-icons/fa';
import { MdDeviceHub, MdGridOn } from 'react-icons/md';
+import { Panel, PanelGroup } from 'react-resizable-panels';
+import { useMinimumPanelSize } from '../hooks/useMinimumPanelSize';
import {
activeTabIndexSelector,
activeTabNameSelector,
} from '../store/uiSelectors';
-import { useTranslation } from 'react-i18next';
-import { ResourceKey } from 'i18next';
-import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
-import { createSelector } from '@reduxjs/toolkit';
-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 ImageTab from './tabs/ImageToImage/ImageToImageTab';
+import ModelManagerTab from './tabs/ModelManager/ModelManagerTab';
+import NodesTab from './tabs/Nodes/NodesTab';
+import ResizeHandle from './tabs/ResizeHandle';
import TextToImageTab from './tabs/TextToImage/TextToImageTab';
import UnifiedCanvasTab from './tabs/UnifiedCanvas/UnifiedCanvasTab';
-import NodesTab from './tabs/Nodes/NodesTab';
-import { FaFont, FaImage, FaLayerGroup } from 'react-icons/fa';
-import ResizeHandle from './tabs/ResizeHandle';
-import ImageTab from './tabs/ImageToImage/ImageToImageTab';
-import AuxiliaryProgressIndicator from 'app/components/AuxiliaryProgressIndicator';
-import { useMinimumPanelSize } from '../hooks/useMinimumPanelSize';
-import BatchTab from './tabs/Batch/BatchTab';
export interface InvokeTabInfo {
id: InvokeTabName;
@@ -71,6 +71,11 @@ const tabs: InvokeTabInfo[] = [
// icon: ,
// content: ,
// },
+ {
+ id: 'modelmanager',
+ icon: ,
+ content: ,
+ },
];
const enabledTabsSelector = createSelector(
@@ -96,6 +101,8 @@ const InvokeTabs = () => {
(state: RootState) => state.lightbox.isLightboxOpen
);
+ const noGalleryTabs: InvokeTabName[] = ['modelmanager'];
+
const { shouldPinGallery, shouldPinParametersPanel, shouldShowGallery } =
useAppSelector((state: RootState) => state.ui);
@@ -198,26 +205,28 @@ const InvokeTabs = () => {
{tabPanels}
- {shouldPinGallery && shouldShowGallery && (
- <>
-
- DEFAULT_GALLERY_PCT
- ? galleryMinSizePct
- : DEFAULT_GALLERY_PCT
- }
- minSize={galleryMinSizePct}
- maxSize={50}
- >
-
-
- >
- )}
+ {shouldPinGallery &&
+ shouldShowGallery &&
+ !noGalleryTabs.includes(activeTabName) && (
+ <>
+
+ DEFAULT_GALLERY_PCT
+ ? galleryMinSizePct
+ : DEFAULT_GALLERY_PCT
+ }
+ minSize={galleryMinSizePct}
+ maxSize={50}
+ >
+
+
+ >
+ )}
);
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/ModelManagerTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/ModelManagerTab.tsx
new file mode 100644
index 0000000000..31303c60a1
--- /dev/null
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/ModelManagerTab.tsx
@@ -0,0 +1,7 @@
+import { memo } from 'react';
+
+const ModelManagerTab = () => {
+ return 'Model Manager';
+};
+
+export default memo(ModelManagerTab);
diff --git a/invokeai/frontend/web/src/features/ui/store/tabMap.ts b/invokeai/frontend/web/src/features/ui/store/tabMap.ts
index 4f683c95cb..a2d64f0ab9 100644
--- a/invokeai/frontend/web/src/features/ui/store/tabMap.ts
+++ b/invokeai/frontend/web/src/features/ui/store/tabMap.ts
@@ -7,6 +7,7 @@ export const tabMap = [
'batch',
// 'postprocessing',
// 'training',
+ 'modelmanager',
] as const;
export type InvokeTabName = (typeof tabMap)[number];