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