ui consistency, moved is_diffusers logic to backend, extended HuggingFaceMetadata, removed logic from service

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

@@ -53,11 +53,11 @@ export const HuggingFaceForm = () => {
     _getHuggingFaceModels(huggingFaceRepo)
       .unwrap()
       .then((response) => {
-        if (response.some((result: string) => result.endsWith('model_index.json'))) {
+        if (response.is_diffusers) {
           handleInstallModel(huggingFaceRepo);
           setDisplayResults(false);
-        } else if (response.length === 1 && response[0]) {
-          handleInstallModel(response[0]);
+        } else if (response.urls?.length === 1 && response.urls[0]) {
+          handleInstallModel(response.urls[0]);
           setDisplayResults(false);
         } else {
           setDisplayResults(true);
@@ -75,26 +75,27 @@ export const HuggingFaceForm = () => {
 
   return (
     <Flex flexDir="column" height="100%">
-      <FormControl isInvalid={!!errorMessage.length} w="full">
-        <Flex flexDir="column" w="full">
-          <Flex gap={2} alignItems="flex-end" justifyContent="space-between">
-            <Flex direction="column" w="full">
-              <FormLabel>{t('modelManager.huggingFaceRepoID')}</FormLabel>
-              <Input
-                placeholder={t('modelManager.huggingFacePlaceholder')}
-                value={huggingFaceRepo}
-                onChange={handleSetHuggingFaceRepo}
-              />
-            </Flex>
-
-            <Button onClick={getModels} isLoading={isLoading} isDisabled={huggingFaceRepo.length === 0}>
-              {t('modelManager.addModel')}
-            </Button>
-          </Flex>
-          {!!errorMessage.length && <FormErrorMessage>{errorMessage}</FormErrorMessage>}
+      <FormControl isInvalid={!!errorMessage.length} w="full" orientation="vertical">
+        <FormLabel>{t('modelManager.huggingFaceRepoID')}</FormLabel>
+        <Flex gap={3} alignItems="center" w="full">
+          <Input
+            placeholder={t('modelManager.huggingFacePlaceholder')}
+            value={huggingFaceRepo}
+            onChange={handleSetHuggingFaceRepo}
+          />
+          <Button
+            onClick={getModels}
+            isLoading={isLoading}
+            isDisabled={huggingFaceRepo.length === 0}
+            size="sm"
+            flexShrink={0}
+          >
+            {t('modelManager.addModel')}
+          </Button>
         </Flex>
+        {!!errorMessage.length && <FormErrorMessage>{errorMessage}</FormErrorMessage>}
       </FormControl>
-      {data && displayResults && <HuggingFaceResults results={data} />}
+      {data && data.urls && displayResults && <HuggingFaceResults results={data.urls} />}
     </Flex>
   );
 };

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

@@ -77,7 +77,7 @@ export const HuggingFaceResults = ({ results }: HuggingFaceResultsProps) => {
 
   return (
     <>
-      <Divider mt={4} />
+      <Divider mt={6} />
       <Flex flexDir="column" gap={2} mt={4} height="100%">
         <Flex justifyContent="space-between" alignItems="center">
           <Heading fontSize="md" as="h4">

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanFolder/ScanFolderForm.tsx

@@ -36,24 +36,21 @@ export const ScanModelsForm = () => {
 
   return (
     <Flex flexDir="column" height="100%">
-      <FormControl isInvalid={!!errorMessage.length} w="full">
-        <Flex flexDir="column" w="full">
-          <Flex gap={2} alignItems="flex-end" justifyContent="space-between">
-            <Flex direction="column" w="full">
-              <FormLabel>{t('common.folder')}</FormLabel>
-              <Input placeholder={t('modelManager.scanPlaceholder')} value={scanPath} onChange={handleSetScanPath} />
-            </Flex>
-
-            <Button
-              onClick={scanFolder}
-              isLoading={isLoading}
-              isDisabled={scanPath === undefined || scanPath.length === 0}
-            >
-              {t('modelManager.scanFolder')}
-            </Button>
-          </Flex>
-          {!!errorMessage.length && <FormErrorMessage>{errorMessage}</FormErrorMessage>}
+      <FormControl isInvalid={!!errorMessage.length} w="full" orientation="vertical">
+        <FormLabel>{t('common.folder')}</FormLabel>
+        <Flex gap={3} alignItems="center" w="full">
+          <Input placeholder={t('modelManager.scanPlaceholder')} value={scanPath} onChange={handleSetScanPath} />
+          <Button
+            onClick={scanFolder}
+            isLoading={isLoading}
+            isDisabled={scanPath === undefined || scanPath.length === 0}
+            size="sm"
+            flexShrink={0}
+          >
+            {t('modelManager.scanFolder')}
+          </Button>
         </Flex>
+        {!!errorMessage.length && <FormErrorMessage>{errorMessage}</FormErrorMessage>}
       </FormControl>
       {data && <ScanModelsResults results={data} />}
     </Flex>

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanFolder/ScanFolderResults.tsx

@@ -80,7 +80,7 @@ export const ScanModelsResults = ({ results }: ScanModelResultsProps) => {
 
   return (
     <>
-      <Divider mt={4} />
+      <Divider mt={6} />
       <Flex flexDir="column" gap={2} mt={4} height="100%">
         <Flex justifyContent="space-between" alignItems="center">
           <Heading fontSize="md" as="h4">