Only install starter models if not already installed

Author: brandonrising

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StartModelsResultItem.tsx

@@ -5,11 +5,13 @@ import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiPlusBold } from 'react-icons/pi';
 import type { GetStarterModelsResponse } from 'services/api/endpoints/models';
+import type { AnyModelConfig } from 'services/api/types';
 
 type Props = {
   result: GetStarterModelsResponse[number];
+  modelList: AnyModelConfig[];
 };
-export const StarterModelsResultItem = memo(({ result }: Props) => {
+export const StarterModelsResultItem = memo(({ result, modelList }: Props) => {
   const { t } = useTranslation();
   const allSources = useMemo(() => {
     const _allSources = [
@@ -38,9 +40,12 @@ export const StarterModelsResultItem = memo(({ result }: Props) => {
 
   const onClick = useCallback(() => {
     for (const { config, source } of allSources) {
+      if (modelList.some((mc) => config.base === mc.base && config.name === mc.name && config.type === mc.type)) {
+        continue;
+      }
       installModel({ config, source });
     }
-  }, [allSources, installModel]);
+  }, [modelList, allSources, installModel]);
 
   return (
     <Flex alignItems="center" justifyContent="space-between" w="100%" gap={3}>

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StarterModelsForm.tsx

@@ -1,17 +1,31 @@
 import { Flex } from '@invoke-ai/ui-library';
+import { EMPTY_ARRAY } from 'app/store/constants';
 import { FetchingModelsLoader } from 'features/modelManagerV2/subpanels/ModelManagerPanel/FetchingModelsLoader';
-import { memo } from 'react';
-import { useGetStarterModelsQuery } from 'services/api/endpoints/models';
+import { memo, useMemo } from 'react';
+import {
+  modelConfigsAdapterSelectors,
+  useGetModelConfigsQuery,
+  useGetStarterModelsQuery,
+} from 'services/api/endpoints/models';
 
 import { StarterModelsResults } from './StarterModelsResults';
 
 export const StarterModelsForm = memo(() => {
   const { isLoading, data } = useGetStarterModelsQuery();
+  const { data: modelListRes } = useGetModelConfigsQuery();
+
+  const modelList = useMemo(() => {
+    if (!modelListRes) {
+      return EMPTY_ARRAY;
+    }
+
+    return modelConfigsAdapterSelectors.selectAll(modelListRes);
+  }, [modelListRes]);
 
   return (
     <Flex flexDir="column" height="100%" gap={3}>
       {isLoading && <FetchingModelsLoader loadingMessage="Loading Embeddings..." />}
-      {data && <StarterModelsResults results={data} />}
+      {data && <StarterModelsResults results={data} modelList={modelList} />}
     </Flex>
   );
 });

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StarterModelsResults.tsx

@@ -5,14 +5,16 @@ import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiXBold } from 'react-icons/pi';
 import type { GetStarterModelsResponse } from 'services/api/endpoints/models';
+import type { AnyModelConfig } from 'services/api/types';
 
 import { StarterModelsResultItem } from './StartModelsResultItem';
 
 type StarterModelsResultsProps = {
   results: NonNullable<GetStarterModelsResponse>;
+  modelList: AnyModelConfig[];
 };
 
-export const StarterModelsResults = memo(({ results }: StarterModelsResultsProps) => {
+export const StarterModelsResults = memo(({ results, modelList }: StarterModelsResultsProps) => {
   const { t } = useTranslation();
   const [searchTerm, setSearchTerm] = useState('');
 
@@ -72,7 +74,7 @@ export const StarterModelsResults = memo(({ results }: StarterModelsResultsProps
         <ScrollableContent>
           <Flex flexDir="column" gap={3}>
             {filteredResults.map((result) => (
-              <StarterModelsResultItem key={result.source} result={result} />
+              <StarterModelsResultItem key={result.source} result={result} modelList={modelList} />
             ))}
           </Flex>
         </ScrollableContent>