diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/store/modelManagerSlice.ts b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/store/modelManagerSlice.ts index c71407824e..30f0c5c41b 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/store/modelManagerSlice.ts +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/store/modelManagerSlice.ts @@ -2,10 +2,12 @@ import { PayloadAction, createSlice } from '@reduxjs/toolkit'; type ModelManagerState = { searchFolder: string | null; + advancedAddScanModel: string | null; }; const initialModelManagerState: ModelManagerState = { searchFolder: null, + advancedAddScanModel: null, }; export const modelManagerSlice = createSlice({ @@ -15,9 +17,13 @@ export const modelManagerSlice = createSlice({ setSearchFolder: (state, action: PayloadAction) => { state.searchFolder = action.payload; }, + setAdvancedAddScanModel: (state, action: PayloadAction) => { + state.advancedAddScanModel = action.payload; + }, }, }); -export const { setSearchFolder } = modelManagerSlice.actions; +export const { setSearchFolder, setAdvancedAddScanModel } = + modelManagerSlice.actions; export default modelManagerSlice.reducer; 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 d1dcf3819a..a3f7c404e2 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 @@ -10,20 +10,28 @@ import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useAddMainModelsMutation } from 'services/api/endpoints/models'; import { CheckpointModelConfig } from 'services/api/types'; +import { setAdvancedAddScanModel } from '../../store/modelManagerSlice'; import BaseModelSelect from '../shared/BaseModelSelect'; import CheckpointConfigsSelect from '../shared/CheckpointConfigsSelect'; import ModelVariantSelect from '../shared/ModelVariantSelect'; -export default function AdvancedAddCheckpoint() { +type AdvancedAddCheckpointProps = { + model_path?: string; +}; + +export default function AdvancedAddCheckpoint( + props: AdvancedAddCheckpointProps +) { const { t } = useTranslation(); const dispatch = useAppDispatch(); + const { model_path } = props; const advancedAddCheckpointForm = useForm({ initialValues: { - model_name: '', + model_name: model_path ? model_path.split('\\').splice(-1)[0] : '', base_model: 'sd-1', model_type: 'main', - path: '', + path: model_path ? model_path : '', description: '', model_format: 'checkpoint', error: undefined, @@ -52,6 +60,11 @@ export default function AdvancedAddCheckpoint() { ) ); advancedAddCheckpointForm.reset(); + + // Close Advanced Panel in Scan Models tab + if (model_path) { + dispatch(setAdvancedAddScanModel(null)); + } }) .catch((error) => { if (error) { 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 58914fe04f..8393ecdee2 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 @@ -11,6 +11,7 @@ import { useGetModelsInFolderQuery, useImportMainModelsMutation, } from 'services/api/endpoints/models'; +import { setAdvancedAddScanModel } from '../../store/modelManagerSlice'; export default function FoundModelsList() { const searchFolder = useAppSelector( @@ -137,7 +138,12 @@ export default function FoundModelsList() { > Quick Add - Advanced + dispatch(setAdvancedAddScanModel(model))} + isLoading={isLoading} + > + Advanced + ))} diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx new file mode 100644 index 0000000000..65454c3363 --- /dev/null +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx @@ -0,0 +1,56 @@ +import { Box, Flex, Text } from '@chakra-ui/react'; +import { RootState } from 'app/store/store'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import IAIIconButton from 'common/components/IAIIconButton'; +import { motion } from 'framer-motion'; +import { FaTimes } from 'react-icons/fa'; +import { setAdvancedAddScanModel } from '../../store/modelManagerSlice'; +import AdvancedAddCheckpoint from './AdvancedAddCheckpoint'; + +export default function ScanAdvancedAddModels() { + const advancedAddScanModel = useAppSelector( + (state: RootState) => state.modelmanager.advancedAddScanModel + ); + + const dispatch = useAppDispatch(); + + return ( + advancedAddScanModel && ( + + + + Add Checkpoint Model + + } + aria-label="Close Advanced" + onClick={() => dispatch(setAdvancedAddScanModel(null))} + size="sm" + /> + + + + ) + ); +} diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/ScanModels.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/ScanModels.tsx index e95264d2de..c7b4da9479 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/ScanModels.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/ScanModels.tsx @@ -1,13 +1,24 @@ import { Flex } from '@chakra-ui/react'; import FoundModelsList from './FoundModelsList'; +import ScanAdvancedAddModels from './ScanAdvancedAddModels'; import SearchFolderForm from './SearchFolderForm'; export default function ScanModels() { return ( - + - - + + + + + );