feat(ui): use enriched starter model metadata

Author: psychedelicious

invokeai/frontend/web/public/locales/en.json

@@ -873,18 +873,19 @@
         "starterBundleHelpText": "Easily install all models needed to get started with a base model, including a main model, controlnets, IP adapters, and more. Selecting a bundle will skip any models that you already have installed.",
         "starterModels": "Starter Models",
         "starterModelsInModelManager": "Starter Models can be found in Model Manager",
+        "bundleAlreadyInstalled": "Bundle {{bundleName}} already installed",
         "launchpadTab": "Launchpad",
         "launchpad": {
             "welcome": "Welcome to Model Management",
-            "description": "Invoke requires you to install or import models to utilize many of the features in the platform. In order to get started, you can begin by adding models to your InvokeAI installation. Choose from manual installation options or explore curated starter models.",
+            "description": "Invoke requires models to be installed to utilize most features of the platform. Choose from manual installation options or explore curated starter models.",
             "manualInstall": "Manual Installation",
             "urlDescription": "Install models from a URL or local file path. Perfect for specific models you want to add.",
             "huggingFaceDescription": "Browse and install models directly from HuggingFace repositories.",
             "scanFolderDescription": "Scan a local folder to automatically detect and install models.",
             "recommendedModels": "Recommended Models",
-            "exploreStarter": "Browse all available starter models",
+            "exploreStarter": "Or browse all available starter models",
             "quickStart": "Quick Start Bundles",
-            "bundleDescription": "Each bundle includes essential models for each model family and curated base models to get started",
+            "bundleDescription": "Each bundle includes essential models for each model family and curated base models to get started.",
             "browseAll": "Or browse all available models:",
             "stableDiffusion15": "Stable Diffusion 1.5",
             "sdxl": "SDXL",

invokeai/frontend/web/src/features/modelManagerV2/hooks/useStarterBundleInstall.ts

@@ -3,7 +3,7 @@ import { toast } from 'features/toast/toast';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useInstallModelMutation } from 'services/api/endpoints/models';
-import type { StarterModel } from 'services/api/types';
+import type { S } from 'services/api/types';
 
 import { flattenStarterModel, useBuildModelInstallArg } from './useBuildModelsToInstall';
 
@@ -13,9 +13,9 @@ export const useStarterBundleInstall = () => {
   const { t } = useTranslation();
 
   const getModelsToInstall = useCallback(
-    (bundle: StarterModel[]) => {
+    (bundle: S['StarterModelBundle']) => {
       // Flatten the models and remove duplicates, which is expected as models can have the same dependencies
-      const flattenedModels = flatMap(bundle, flattenStarterModel);
+      const flattenedModels = flatMap(bundle.models, flattenStarterModel);
       const uniqueModels = uniqWith(
         flattenedModels,
         (m1, m2) => m1.source === m2.source || (m1.name === m2.name && m1.base === m2.base && m1.type === m2.type)
@@ -30,17 +30,15 @@ export const useStarterBundleInstall = () => {
   );
 
   const installBundle = useCallback(
-    (bundle: StarterModel[], bundleName?: string) => {
+    (bundle: S['StarterModelBundle']) => {
       const modelsToInstall = getModelsToInstall(bundle);
 
       if (modelsToInstall.install.length === 0) {
-        if (bundleName) {
-          toast({
-            status: 'info',
-            title: t('modelManager.bundleAlreadyInstalled', { bundleName }),
-            description: t('modelManager.allModelsAlreadyInstalled'),
-          });
-        }
+        toast({
+          status: 'info',
+          title: t('modelManager.bundleAlreadyInstalled', { bundleName: bundle.name }),
+          description: t('modelManager.allModelsAlreadyInstalled'),
+        });
         return;
       }
 

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/LaunchpadForm/LaunchpadForm.tsx

@@ -25,7 +25,7 @@ export const LaunchpadForm = memo(() => {
         return;
       }
 
-      installBundle(bundle, bundleName);
+      installBundle(bundle);
     },
     [starterModelsData, installBundle]
   );

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

@@ -4,25 +4,25 @@ import { isMainModelBase } from 'features/nodes/types/common';
 import { MODEL_TYPE_SHORT_MAP } from 'features/parameters/types/constants';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import type { StarterModel } from 'services/api/types';
+import type { S } from 'services/api/types';
 
-export const StarterBundle = ({ bundleName, bundle }: { bundleName: string; bundle: StarterModel[] }) => {
+export const StarterBundle = ({ bundle }: { bundle: S['StarterModelBundle'] }) => {
   const { installBundle, getModelsToInstall } = useStarterBundleInstall();
   const { t } = useTranslation();
 
-  const modelsToInstall = useMemo(() => getModelsToInstall(bundle), [getModelsToInstall, bundle]);
+  const modelsToInstall = useMemo(() => getModelsToInstall(bundle), [bundle, getModelsToInstall]);
 
   const handleClickBundle = useCallback(() => {
-    installBundle(bundle, bundleName);
-  }, [installBundle, bundle, bundleName]);
+    installBundle(bundle);
+  }, [installBundle, bundle]);
 
   return (
     <Tooltip
       label={
         <Flex flexDir="column" p={1}>
-          <Text>{t('modelManager.includesNModels', { n: bundle.length })}:</Text>
+          <Text>{t('modelManager.includesNModels', { n: bundle.models.length })}:</Text>
           <UnorderedList>
-            {bundle.map((model, index) => (
+            {bundle.models.map((model, index) => (
               <ListItem key={index} wordBreak="break-all">
                 {model.name}
               </ListItem>
@@ -33,10 +33,10 @@ export const StarterBundle = ({ bundleName, bundle }: { bundleName: string; bund
     >
       <Button size="sm" onClick={handleClickBundle} py={6} isDisabled={modelsToInstall.install.length === 0}>
         <Flex flexDir="column">
-          <Text>{isMainModelBase(bundleName) ? MODEL_TYPE_SHORT_MAP[bundleName] : bundleName}</Text>
+          <Text>{isMainModelBase(bundle.name) ? MODEL_TYPE_SHORT_MAP[bundle.name] : bundle.name}</Text>
           {modelsToInstall.install.length > 0 && (
             <Text fontSize="xs">
-              ({bundle.length} {t('settings.models')})
+              ({bundle.models.length} {t('settings.models')})
             </Text>
           )}
           {modelsToInstall.install.length === 0 && <Text fontSize="xs">{t('common.installed')}</Text>}

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

@@ -61,8 +61,8 @@ export const StarterModelsResults = memo(({ results }: StarterModelsResultsProps
               </Tooltip>
             </Flex>
             <Flex gap={2}>
-              {map(results.starter_bundles, (bundle, bundleName) => (
-                <StarterBundle key={bundleName} bundleName={bundleName} bundle={bundle} />
+              {map(results.starter_bundles, (bundle) => (
+                <StarterBundle key={bundle.name} bundle={bundle} />
               ))}
             </Flex>
           </Flex>