feat: Make new tab for Model Manager

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",

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: <Icon as={FaLayerGroup} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
   //   content: <BatchTab />,
   // },
+  {
+    id: 'modelmanager',
+    icon: <Icon as={FaCube} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
+    content: <ModelManagerTab />,
+  },
 ];
 
 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}
           </TabPanels>
         </Panel>
-        {shouldPinGallery && shouldShowGallery && (
-          <>
-            <ResizeHandle />
-            <Panel
-              ref={galleryPanelRef}
-              onResize={handleResizeGallery}
-              id="gallery"
-              order={3}
-              defaultSize={
-                galleryMinSizePct > DEFAULT_GALLERY_PCT
-                  ? galleryMinSizePct
-                  : DEFAULT_GALLERY_PCT
-              }
-              minSize={galleryMinSizePct}
-              maxSize={50}
-            >
-              <ImageGalleryContent />
-            </Panel>
-          </>
-        )}
+        {shouldPinGallery &&
+          shouldShowGallery &&
+          !noGalleryTabs.includes(activeTabName) && (
+            <>
+              <ResizeHandle />
+              <Panel
+                ref={galleryPanelRef}
+                onResize={handleResizeGallery}
+                id="gallery"
+                order={3}
+                defaultSize={
+                  galleryMinSizePct > DEFAULT_GALLERY_PCT
+                    ? galleryMinSizePct
+                    : DEFAULT_GALLERY_PCT
+                }
+                minSize={galleryMinSizePct}
+                maxSize={50}
+              >
+                <ImageGalleryContent />
+              </Panel>
+            </>
+          )}
       </PanelGroup>
     </Tabs>
   );

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

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