install model if diffusers or single file, cleaned up backend logic to not mess with existing model install

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/HuggingFaceFolder/HuggingFaceForm.tsx

@@ -1,24 +1,69 @@
 import { Button, Flex, FormControl, FormErrorMessage, FormLabel, Input } from '@invoke-ai/ui-library';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { addToast } from 'features/system/store/systemSlice';
+import { makeToast } from 'features/system/util/makeToast';
 import type { ChangeEventHandler } from 'react';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLazyGetHuggingFaceModelsQuery } from 'services/api/endpoints/models';
+import { useInstallModelMutation, useLazyGetHuggingFaceModelsQuery } from 'services/api/endpoints/models';
 
 import { HuggingFaceResults } from './HuggingFaceResults';
 
 export const HuggingFaceForm = () => {
   const [huggingFaceRepo, setHuggingFaceRepo] = useState('');
+  const [displayResults, setDisplayResults] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
   const { t } = useTranslation();
+  const dispatch = useAppDispatch();
 
   const [_getHuggingFaceModels, { isLoading, data }] = useLazyGetHuggingFaceModelsQuery();
+  const [installModel] = useInstallModelMutation();
+
+  const handleInstallModel = useCallback((source: string) => {
+    installModel({ source })
+      .unwrap()
+      .then((_) => {
+        dispatch(
+          addToast(
+            makeToast({
+              title: t('toast.modelAddedSimple'),
+              status: 'success',
+            })
+          )
+        );
+      })
+      .catch((error) => {
+        if (error) {
+          dispatch(
+            addToast(
+              makeToast({
+                title: `${error.data.detail} `,
+                status: 'error',
+              })
+            )
+          );
+        }
+      });
+  }, [installModel, dispatch, t]);
 
   const scanFolder = useCallback(async () => {
-    _getHuggingFaceModels(huggingFaceRepo).catch((error) => {
-      if (error) {
-        setErrorMessage(error.data.detail);
-      }
-    });
+    _getHuggingFaceModels(huggingFaceRepo)
+      .then((response) => {
+        if (response.data?.some((result) => result.endsWith('model_index.json'))) {
+          handleInstallModel(huggingFaceRepo);
+          setDisplayResults(false);
+        } else if (response.data?.length === 1 && response.data[0]) {
+          handleInstallModel(response.data[0]);
+          setDisplayResults(false);
+        } else {
+          setDisplayResults(true);
+        }
+      })
+      .catch((error) => {
+        if (error) {
+          setErrorMessage(error.data.detail);
+        }
+      });
   }, [_getHuggingFaceModels, huggingFaceRepo]);
 
   const handleSetHuggingFaceRepo: ChangeEventHandler<HTMLInputElement> = useCallback((e) => {
@@ -43,7 +88,7 @@ export const HuggingFaceForm = () => {
           {!!errorMessage.length && <FormErrorMessage>{errorMessage}</FormErrorMessage>}
         </Flex>
       </FormControl>
-      {data && <HuggingFaceResults results={data} />}
+      {data && displayResults && <HuggingFaceResults results={data} />}
     </Flex>
   );
 };

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/HuggingFaceFolder/HuggingFaceResults.tsx

@@ -21,7 +21,6 @@ import { useInstallModelMutation } from 'services/api/endpoints/models';
 import { HuggingFaceResultItem } from './HuggingFaceResultItem';
 
 type HuggingFaceResultsProps = {
-  // results: HuggingFaceFolderResponse;
   results: string[];
 };