diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel.tsx index b22a303571..ddf0874b21 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel.tsx @@ -17,19 +17,23 @@ export default function ModelManagerPanel() { const renderModelEditTabs = () => { if (!openModel || !mainModels) return; - if (mainModels['entities'][openModel]['model_format'] === 'diffusers') { + const openedModelData = mainModels['entities'][openModel]; + + if (openedModelData && openedModelData.model_format === 'diffusers') { return ( ); - } else { + } + + if (openedModelData && openedModelData.model_format === 'checkpoint') { return ( ); diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx index 5dbb64ca7d..1eeb6d2fc8 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx @@ -45,7 +45,7 @@ export default function CheckpointModelEdit(props: CheckpointModelEditProps) { const { modelToEdit, retrievedModel } = props; - const [updateMainModel, { error }] = useUpdateMainModelsMutation(); + const [updateMainModel, { error, isLoading }] = useUpdateMainModelsMutation(); const dispatch = useAppDispatch(); const { t } = useTranslation(); @@ -145,7 +145,11 @@ export default function CheckpointModelEdit(props: CheckpointModelEditProps) { label={t('modelManager.config')} {...checkpointEditForm.getInputProps('config')} /> - + {t('modelManager.updateModel')} diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx index 696a620d65..377317775b 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx @@ -42,7 +42,7 @@ export default function DiffusersModelEdit(props: DiffusersModelEditProps) { ); const { retrievedModel, modelToEdit } = props; - const [updateMainModel, { error }] = useUpdateMainModelsMutation(); + const [updateMainModel, { isLoading, error }] = useUpdateMainModelsMutation(); const dispatch = useAppDispatch(); const { t } = useTranslation(); @@ -129,7 +129,11 @@ export default function DiffusersModelEdit(props: DiffusersModelEditProps) { label={t('modelManager.vaeLocation')} {...diffusersEditForm.getInputProps('vae')} /> - + {t('modelManager.updateModel')} diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelList.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelList.tsx index eb05e70357..3eee71e576 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelList.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelList.tsx @@ -50,7 +50,7 @@ const ModelList = () => { const [searchText, setSearchText] = useState(''); const [isSelectedFilter, setIsSelectedFilter] = useState< - 'all' | 'ckpt' | 'diffusers' + 'all' | 'checkpoint' | 'diffusers' >('all'); const [_, startTransition] = useTransition(); @@ -73,35 +73,39 @@ const ModelList = () => { const modelList = mainModels.entities; Object.keys(modelList).forEach((model, i) => { - if ( - modelList[model].name.toLowerCase().includes(searchText.toLowerCase()) - ) { + const modelInfo = modelList[model]; + + // If no model info found for a model, ignore it + if (!modelInfo) return; + + if (modelInfo.name.toLowerCase().includes(searchText.toLowerCase())) { filteredModelListItemsToRender.push( ); - if (modelList[model]?.model_format === isSelectedFilter) { + if (modelInfo?.model_format === isSelectedFilter) { localFilteredModelListItemsToRender.push( ); } } - if (modelList[model]?.model_format !== 'diffusers') { + + if (modelInfo?.model_format !== 'diffusers') { ckptModelListItemsToRender.push( ); } else { @@ -109,8 +113,8 @@ const ModelList = () => { ); } @@ -170,7 +174,7 @@ const ModelList = () => { )} - {isSelectedFilter === 'ckpt' && ( + {isSelectedFilter === 'checkpoint' && ( {ckptModelListItemsToRender} @@ -206,8 +210,8 @@ const ModelList = () => { /> setIsSelectedFilter('ckpt')} - isActive={isSelectedFilter === 'ckpt'} + onClick={() => setIsSelectedFilter('checkpoint')} + isActive={isSelectedFilter === 'checkpoint'} />