feat: Add Scan Models Advanced Add

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<string | null>) => {
       state.searchFolder = action.payload;
     },
+    setAdvancedAddScanModel: (state, action: PayloadAction<string | null>) => {
+      state.advancedAddScanModel = action.payload;
+    },
   },
 });
 
-export const { setSearchFolder } = modelManagerSlice.actions;
+export const { setSearchFolder, setAdvancedAddScanModel } =
+  modelManagerSlice.actions;
 
 export default modelManagerSlice.reducer;

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<CheckpointModelConfig>({
     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) {

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
               </IAIButton>
-              <IAIButton>Advanced</IAIButton>
+              <IAIButton
+                onClick={() => dispatch(setAdvancedAddScanModel(model))}
+                isLoading={isLoading}
+              >
+                Advanced
+              </IAIButton>
             </Flex>
           </Flex>
         ))}

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 && (
+      <Box
+        as={motion.div}
+        initial={{ x: -100, opacity: 0 }}
+        animate={{ x: 0, opacity: 1, transition: { duration: 0.2 } }}
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          minWidth: '50%',
+          maxHeight: window.innerHeight - 330,
+          overflow: 'scroll',
+          p: 4,
+          gap: 4,
+          borderRadius: 4,
+          bg: 'base.200',
+          _dark: {
+            bg: 'base.800',
+          },
+        }}
+      >
+        <Flex justifyContent="space-between" alignItems="center">
+          <Text size="xl" fontWeight={600}>
+            Add Checkpoint Model
+          </Text>
+          <IAIIconButton
+            icon={<FaTimes />}
+            aria-label="Close Advanced"
+            onClick={() => dispatch(setAdvancedAddScanModel(null))}
+            size="sm"
+          />
+        </Flex>
+        <AdvancedAddCheckpoint
+          key={advancedAddScanModel}
+          model_path={advancedAddScanModel}
+        />
+      </Box>
+    )
+  );
+}

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 (
-    <Flex flexDirection="column" w="100%" gap={2}>
+    <Flex flexDirection="column" w="100%" gap={4}>
       <SearchFolderForm />
-      <Flex sx={{ maxHeight: window.innerHeight - 330, overflow: 'scroll' }}>
-        <FoundModelsList />
+      <Flex gap={4}>
+        <Flex
+          sx={{
+            maxHeight: window.innerHeight - 330,
+            overflow: 'scroll',
+            gap: 4,
+            w: '100%',
+          }}
+        >
+          <FoundModelsList />
+        </Flex>
+        <ScanAdvancedAddModels />
       </Flex>
     </Flex>
   );