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 index 6f9a836902..d397058795 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/ModelManagerTab.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/ModelManagerTab.tsx @@ -1,7 +1,7 @@ import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react'; import i18n from 'i18n'; import { ReactNode, memo } from 'react'; -import AddModelsPanel from './subpanels/AddModelsPanel'; +import ImportModelsPanel from './subpanels/ImportModelsPanel'; import MergeModelsPanel from './subpanels/MergeModelsPanel'; import ModelManagerPanel from './subpanels/ModelManagerPanel'; @@ -22,7 +22,7 @@ const tabs: ModelManagerTabInfo[] = [ { id: 'importModels', label: i18n.t('modelManager.importModels'), - content: , + content: , }, { id: 'mergeModels', diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx index a3f7c404e2..ededadaa06 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx @@ -28,7 +28,9 @@ export default function AdvancedAddCheckpoint( const advancedAddCheckpointForm = useForm({ initialValues: { - model_name: model_path ? model_path.split('\\').splice(-1)[0] : '', + model_name: model_path + ? model_path.split('\\').splice(-1)[0].split('.')[0] + : '', base_model: 'sd-1', model_type: 'main', path: model_path ? model_path : '', diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/FoundModelsList.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/FoundModelsList.tsx index 8393ecdee2..ad245703c9 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/FoundModelsList.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/FoundModelsList.tsx @@ -36,6 +36,7 @@ export default function FoundModelsList() { const quickAddHandler = useCallback( (e: MouseEvent) => { + const model_name = e.currentTarget.id.split('\\').splice(-1)[0]; importMainModel({ body: { location: e.currentTarget.id, @@ -46,7 +47,7 @@ export default function FoundModelsList() { dispatch( addToast( makeToast({ - title: 'Added Model', + title: `Added Model: ${model_name}`, status: 'success', }) ) @@ -72,7 +73,24 @@ export default function FoundModelsList() { if (!searchFolder) return; if (!foundModels || foundModels.length === 0) { - return No Models Found; + return ( + + No Models Found + + ); } return ( @@ -81,6 +99,7 @@ export default function FoundModelsList() { flexDirection: 'column', gap: 2, w: '100%', + minW: '50%', }} > @@ -114,7 +133,7 @@ export default function FoundModelsList() { }} key={model} > - + {model.split('\\').slice(-1)[0]} diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx index 6f17b62c66..dd0aa818c8 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx @@ -6,7 +6,7 @@ import IAIIconButton from 'common/components/IAIIconButton'; import IAIInput from 'common/components/IAIInput'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; -import { FaSearch, FaTrash } from 'react-icons/fa'; +import { FaSearch, FaSync, FaTrash } from 'react-icons/fa'; import { setSearchFolder } from '../../store/modelManagerSlice'; type SearchFolderForm = { @@ -91,7 +91,7 @@ function SearchFolderForm() { } + icon={!searchFolder ? : } fontSize={18} size="sm" type="submit" diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ImportModelsPanel.tsx similarity index 89% rename from invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel.tsx rename to invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ImportModelsPanel.tsx index cac6c7a136..b0a8c124eb 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ImportModelsPanel.tsx @@ -1,4 +1,4 @@ -import { ButtonGroup, Divider, Flex } from '@chakra-ui/react'; +import { ButtonGroup, Flex } from '@chakra-ui/react'; import IAIButton from 'common/components/IAIButton'; import { useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -7,7 +7,7 @@ import ScanModels from './AddModelsPanel/ScanModels'; type AddModelTabs = 'add' | 'scan'; -export default function AddModelsPanel() { +export default function ImportModelsPanel() { const [addModelTab, setAddModelTab] = useState('add'); const { t } = useTranslation(); @@ -32,8 +32,6 @@ export default function AddModelsPanel() { - - {addModelTab == 'add' && } {addModelTab == 'scan' && }