(feat:ui) Model Launchpad

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

@@ -763,7 +763,7 @@
         "convertToDiffusers": "Convert To Diffusers",
         "convertToDiffusersHelpText1": "This model will be converted to the 🧨 Diffusers format.",
         "convertToDiffusersHelpText2": "This process will replace your Model Manager entry with the Diffusers version of the same model.",
-        "convertToDiffusersHelpText3": "Your checkpoint file on disk WILL be deleted if it is in InvokeAI root folder. If it is in a custom location, then it WILL NOT be deleted.",
+        "convertToDiffusersHelpText3": "Your checkpoint file on disk WILL be deleted if it is in the InvokeAI root folder. If it is in a custom location, then it WILL NOT be deleted.",
         "convertToDiffusersHelpText4": "This is a one time process only. It might take around 30s-60s depending on the specifications of your computer.",
         "convertToDiffusersHelpText5": "Please make sure you have enough disk space. Models generally vary between 2GB-7GB in size.",
         "convertToDiffusersHelpText6": "Do you wish to convert this model?",
@@ -811,8 +811,7 @@
         "inplaceInstall": "In-place install",
         "inplaceInstallDesc": "Install models without copying the files. When using the model, it will be loaded from its this location. If disabled, the model file(s) will be copied into the Invoke-managed models directory during installation.",
         "install": "Install",
-        "installAll": "Install All",
-        "installRepo": "Install Repo",
+        "installAll": "Install All",        "installRepo": "Install Repo",
         "ipAdapters": "IP Adapters",
         "learnMoreAboutSupportedModels": "Learn more about the models we support",
         "load": "Load",
@@ -866,10 +865,25 @@
         "sigLip": "SigLIP",
         "spandrelImageToImage": "Image to Image (Spandrel)",
         "starterBundles": "Starter Bundles",
-        "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",
+        "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",
+        "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.",
+            "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",
+            "quickStart": "Quick Start Bundles",
+            "bundleDescription": "Each bundle includes essential models for each model family and curated base models to get started",
+            "browseAll": "Or browse all available models:"
+        },
         "controlLora": "Control LoRA",
+        "downloadBundle": "Download {bundleName} Bundle",
+        "startDownload": "Start Download",
+        "bundleDownloadConfirmation": "This will download all models associated with the {bundleName} bundle and may take some time. Model downloads can be cancelled at any time. Are you ready to begin?",
         "llavaOnevision": "LLaVA OneVision",
         "syncModels": "Sync Models",
         "textualInversions": "Textual Inversions",

invokeai/frontend/web/src/features/gallery/components/ImageViewer/NoContentForViewer.tsx

@@ -4,7 +4,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
 import { InvokeLogoIcon } from 'common/components/InvokeLogoIcon';
 import { LOADING_SYMBOL, useHasImages } from 'features/gallery/hooks/useHasImages';
-import { $installModelsTab } from 'features/modelManagerV2/subpanels/InstallModels';
+import { $installModelsTab } from 'features/modelManagerV2/store/installModelsStore';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { selectIsLocal } from 'features/system/store/configSlice';
 import { selectActiveTab } from 'features/ui/store/uiSelectors';

invokeai/frontend/web/src/features/modelManagerV2/hooks/useStarterModelsToast.tsx

@@ -1,6 +1,6 @@
 import { Button, Text, useToast } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
-import { $installModelsTab } from 'features/modelManagerV2/subpanels/InstallModels';
+import { $installModelsTab } from 'features/modelManagerV2/store/installModelsStore';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { setActiveTab } from 'features/ui/store/uiSlice';
 import { useCallback, useEffect, useState } from 'react';

invokeai/frontend/web/src/features/modelManagerV2/store/installModelsStore.ts

@@ -0,0 +1,7 @@
+import { atom } from 'nanostores';
+
+/**
+ * Atom to manage the active tab index for the Install Models panel.
+ * Moved to separate file to avoid circular dependencies.
+ */
+export const $installModelsTab = atom(0);

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

@@ -0,0 +1,279 @@
+import { Box, Button, Flex, Grid, Heading, Text } from '@invoke-ai/ui-library';
+import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
+import { flattenStarterModel, useBuildModelInstallArg } from 'features/modelManagerV2/hooks/useBuildModelsToInstall';
+import { $installModelsTab } from 'features/modelManagerV2/store/installModelsStore';
+import { toast } from 'features/toast/toast';
+import { flatMap, negate, uniqWith } from 'lodash-es';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiFolderOpenBold, PiLinkBold, PiStarBold } from 'react-icons/pi';
+import { SiHuggingface } from "react-icons/si";
+import { useGetStarterModelsQuery, useInstallModelMutation } from 'services/api/endpoints/models';
+
+export const LaunchpadForm = memo(() => {
+  const { t } = useTranslation();
+  const [installModel] = useInstallModelMutation();
+  const { getIsInstalled, buildModelInstallArg } = useBuildModelInstallArg();
+  const { data: starterModelsData } = useGetStarterModelsQuery();
+  // Function to install models from a bundle
+  const installBundle = useCallback((bundleName: string) => {
+    if (!starterModelsData?.starter_bundles) {
+      return;
+    }
+
+    const bundle = starterModelsData.starter_bundles[bundleName];
+    if (!bundle) {
+      return;
+    }
+
+    // Flatten the models and remove duplicates, which is expected as models can have the same dependencies
+    const flattenedModels = flatMap(bundle, flattenStarterModel);
+    const uniqueModels = uniqWith(
+      flattenedModels,
+      (m1, m2) => m1.source === m2.source || (m1.name === m2.name && m1.base === m2.base && m1.type === m2.type)
+    );
+    // We want to install models that are not installed and skip models that are already installed
+    const install = uniqueModels.filter(negate(getIsInstalled)).map(buildModelInstallArg);
+    const skip = uniqueModels.filter(getIsInstalled).map(buildModelInstallArg);
+
+    if (install.length === 0) {
+      toast({
+        status: 'info',
+        title: t('modelManager.bundleAlreadyInstalled', { bundleName }),
+        description: t('modelManager.allModelsAlreadyInstalled'),
+      });
+      return;
+    }
+
+    // Install all models in the bundle
+    install.forEach(installModel);
+
+    let description = t('modelManager.installingXModels', { count: install.length });
+    if (skip.length > 1) {
+      description += t('modelManager.skippingXDuplicates', { count: skip.length - 1 });
+    }
+
+    toast({
+      status: 'info',
+      title: t('modelManager.installingBundle'),
+      description,
+    });
+  }, [starterModelsData, getIsInstalled, buildModelInstallArg, installModel, t]);
+
+  const navigateToUrlTab = useCallback(() => {
+    $installModelsTab.set(1); // URL/Local Path tab (now index 1)
+  }, []);
+
+  const navigateToHuggingFaceTab = useCallback(() => {
+    $installModelsTab.set(2); // HuggingFace tab (now index 2)
+  }, []);
+
+  const navigateToScanFolderTab = useCallback(() => {
+    $installModelsTab.set(3); // Scan Folder tab (now index 3)
+  }, []);
+
+  const navigateToStarterModelsTab = useCallback(() => {
+    $installModelsTab.set(4); // Starter Models tab (now index 4)
+  }, []);
+  const handleSD15BundleClick = useCallback(() => {
+    installBundle('sd-1');
+  }, [installBundle]);
+
+  const handleSDXLBundleClick = useCallback(() => {
+    installBundle('sdxl');
+  }, [installBundle]);
+
+  const handleFluxBundleClick = useCallback(() => {
+    installBundle('flux');
+  }, [installBundle]);  return (
+    <Flex flexDir="column" height="100%" gap={3}>
+      <ScrollableContent>
+        <Flex flexDir="column" gap={6} p={3}>
+      {/* Welcome Section */}
+      <Box>
+        <Heading size="md" mb={1}>
+          {t('modelManager.launchpad.welcome')}
+        </Heading>
+        <Text color="base.300" fontSize="sm">
+          {t('modelManager.launchpad.description')}
+        </Text>
+      </Box>
+
+      {/* Manual Installation Options */}
+      <Box>
+        <Heading size="sm" mb={2}>
+          {t('modelManager.launchpad.manualInstall')}
+        </Heading>        <Grid templateColumns="repeat(auto-fit, minmax(280px, 1fr))" gap={3}>
+          <LaunchpadCard
+            title={t('modelManager.urlOrLocalPath')}
+            description={t('modelManager.launchpad.urlDescription')}
+            icon={<PiLinkBold size={24} />}
+            onClick={navigateToUrlTab}
+          />
+          <LaunchpadCard
+            title={t('modelManager.huggingFace')}
+            description={t('modelManager.launchpad.huggingFaceDescription')}
+            icon={<SiHuggingface  size={24} />}
+            onClick={navigateToHuggingFaceTab}
+          />
+          <LaunchpadCard
+            title={t('modelManager.scanFolder')}
+            description={t('modelManager.launchpad.scanFolderDescription')}
+            icon={<PiFolderOpenBold size={24} />}
+            onClick={navigateToScanFolderTab}
+          />
+        </Grid>
+      </Box>      {/* Recommended Section */}
+      <Box>
+        <Heading size="sm" mb={2}>
+          {t('modelManager.launchpad.recommendedModels')}
+        </Heading>
+        <Flex flexDir="column" gap={2}>          {/* Starter Model Bundles - More Prominent */}
+          <Box>
+            <Heading size="xs" color="base.100" mb={1}>
+              {t('modelManager.launchpad.quickStart')}
+            </Heading>
+            <Text fontSize="xs" color="base.300" mb={2}>
+              {t('modelManager.launchpad.bundleDescription')}
+            </Text>            <Grid templateColumns="repeat(auto-fit, minmax(180px, 1fr))" gap={2}>
+              <LaunchpadBundleCard
+                title="Stable Diffusion 1.5"
+                onClick={handleSD15BundleClick}
+              />
+              <LaunchpadBundleCard
+                title="SDXL"
+                onClick={handleSDXLBundleClick}
+              />
+              <LaunchpadBundleCard
+                title="FLUX.1 [dev]"
+                onClick={handleFluxBundleClick}
+              />
+            </Grid>
+          </Box>            {/* Browse All - Simple Link */}
+          <Box pt={1} borderTop="1px solid" borderColor="base.700">
+            <Text fontSize="xs" color="base.400" mb={1}>
+              {t('modelManager.launchpad.browseAll')}
+            </Text>
+            <Button
+              onClick={navigateToStarterModelsTab}
+              variant="link"              color="invokeBlue.300"
+              fontSize="sm"
+              fontWeight="medium"
+              p={0}
+              h="auto"
+              leftIcon={<PiStarBold size={16} />}
+              _hover={{
+                color: "invokeBlue.200",
+                textDecoration: "underline"
+              }}
+            >
+              {t('modelManager.launchpad.exploreStarter')}
+            </Button>          </Box>        </Flex>      </Box>
+        </Flex>
+      </ScrollableContent>
+    </Flex>
+  );
+});
+
+LaunchpadForm.displayName = 'LaunchpadForm';
+
+interface LaunchpadCardProps {
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  onClick: () => void;
+  variant?: 'default' | 'featured';
+}
+
+const LaunchpadCard = memo(({ title, description, icon, onClick, variant = 'default' }: LaunchpadCardProps) => {
+  return (    <Button
+      onClick={onClick}
+      variant="outline"
+      h="auto"
+      minH="50px"
+      p={4}
+      borderWidth={variant === 'featured' ? 2 : 1}
+      borderColor={variant === 'featured' ? 'invokeBlue.300' : 'base.700'}
+      bg={variant === 'featured' ? 'invokeBlue.900' : 'base.850'}
+      _hover={{
+        bg: variant === 'featured' ? 'invokeBlue.800' : 'base.800',
+        borderColor: variant === 'featured' ? 'invokeBlue.200' : 'base.600',
+        transform: 'translateY(-2px)',
+      }}
+      _active={{
+        transform: 'translateY(0px)',
+      }}
+      transition="all 0.2s"
+      cursor="pointer"
+      textAlign="left"
+      justifyContent="flex-start"
+      alignItems="flex-start"
+      flexDir="column"
+      gap={2}
+      borderRadius="lg"
+      whiteSpace="normal"
+    >
+      <Flex alignItems="center" gap={2} w="full">
+        <Box color={variant === 'featured' ? 'invokeBlue.200' : 'base.300'} flexShrink={0}>
+          {icon}
+        </Box>
+        <Heading size="sm" color={variant === 'featured' ? 'invokeBlue.50' : 'base.100'} noOfLines={2}>
+          {title}
+        </Heading>
+      </Flex>
+      <Text 
+        fontSize="sm" 
+        color={variant === 'featured' ? 'invokeBlue.200' : 'base.400'} 
+        lineHeight="1.4"
+        flex="1"
+        whiteSpace="normal"
+        wordBreak="break-word"
+      >
+        {description}
+      </Text>
+    </Button>
+  );
+});
+
+LaunchpadCard.displayName = 'LaunchpadCard';
+
+interface LaunchpadBundleCardProps {
+  title: string;
+  onClick: () => void;
+}
+
+const LaunchpadBundleCard = memo(({ title, onClick }: LaunchpadBundleCardProps) => {
+  return (
+    <Button
+      onClick={onClick}
+      variant="outline"
+      h="auto"
+      minH="40px"
+      p={3}
+      borderWidth={2}
+      borderColor="invokeBlue.400"
+      bg="invokeBlue.950"
+      _hover={{
+        bg: "invokeBlue.900",
+        borderColor: "invokeBlue.300",
+        transform: "translateY(-2px)",
+        boxShadow: "0 4px 20px rgba(66, 153, 225, 0.15)",
+      }}
+      _active={{
+        transform: "translateY(0px)",
+      }}
+      transition="all 0.2s"
+      cursor="pointer"
+      textAlign="center"
+      justifyContent="center"
+      alignItems="center"      borderRadius="lg"
+      whiteSpace="normal"
+    >
+      <Text fontSize="sm" fontWeight="bold" color="invokeBlue.100" noOfLines={1}>
+        {title}
+      </Text>
+    </Button>
+  );
+});
+
+LaunchpadBundleCard.displayName = 'LaunchpadBundleCard';

invokeai/frontend/web/src/features/modelManagerV2/subpanels/InstallModels.tsx

@@ -1,18 +1,17 @@
 import { Box, Button, Flex, Heading, Tab, TabList, TabPanel, TabPanels, Tabs, Text } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
+import { $installModelsTab } from 'features/modelManagerV2/store/installModelsStore';
 import { StarterModelsForm } from 'features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StarterModelsForm';
-import { atom } from 'nanostores';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiInfoBold } from 'react-icons/pi';
 
 import { HuggingFaceForm } from './AddModelPanel/HuggingFaceFolder/HuggingFaceForm';
 import { InstallModelForm } from './AddModelPanel/InstallModelForm';
+import { LaunchpadForm } from './AddModelPanel/LaunchpadForm/LaunchpadForm';
 import { ModelInstallQueue } from './AddModelPanel/ModelInstallQueue/ModelInstallQueue';
 import { ScanModelsForm } from './AddModelPanel/ScanFolder/ScanFolderForm';
 
-export const $installModelsTab = atom(0);
-
 export const InstallModels = memo(() => {
   const { t } = useTranslation();
   const index = useStore($installModelsTab);
@@ -31,16 +30,16 @@ export const InstallModels = memo(() => {
         <Button alignItems="center" variant="link" leftIcon={<PiInfoBold />} onClick={onClickLearnMore}>
           <Text variant="subtext">{t('modelManager.learnMoreAboutSupportedModels')}</Text>
         </Button>
-      </Flex>
-
-      <Tabs variant="collapse" height="50%" display="flex" flexDir="column" index={index} onChange={onChange}>
-        <TabList>
+      </Flex>      <Tabs variant="collapse" height="50%" display="flex" flexDir="column" index={index} onChange={onChange}>        <TabList>
+          <Tab>{t('modelManager.launchpadTab')}</Tab>
           <Tab>{t('modelManager.urlOrLocalPath')}</Tab>
           <Tab>{t('modelManager.huggingFace')}</Tab>
           <Tab>{t('modelManager.scanFolder')}</Tab>
           <Tab>{t('modelManager.starterModels')}</Tab>
-        </TabList>
-        <TabPanels p={3} height="100%">
+        </TabList>        <TabPanels p={3} height="100%">
+          <TabPanel height="100%">
+            <LaunchpadForm />
+          </TabPanel>
           <TabPanel>
             <InstallModelForm />
           </TabPanel>