only show starter bundles if feature is enabled and no models installed, update getting started text for local vs non-local

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

@@ -1,16 +1,22 @@
 import { Button, Divider, Flex, Spinner, Text } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
+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 { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
+import { selectIsLocal } from 'features/system/store/configSlice';
 import { setActiveTab } from 'features/ui/store/uiSlice';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { PiImageBold } from 'react-icons/pi';
+import { useMainModels } from 'services/api/hooks/modelsByType';
 
 export const NoContentForViewer = () => {
   const hasImages = useHasImages();
+  const [mainModels, { data }] = useMainModels();
+  const isLocal = useAppSelector(selectIsLocal);
+  const isEnabled = useFeatureStatus('starterModels');
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
 
@@ -24,6 +30,10 @@ export const NoContentForViewer = () => {
     $installModelsTab.set(0);
   }, [dispatch]);
 
+  const showStarterBundles = useMemo(() => {
+    return isEnabled && (data && mainModels.length === 0)
+  }, [mainModels.length, data, isEnabled])
+
   if (hasImages === LOADING_SYMBOL) {
     return (
       // Blank bg w/ a spinner. The new user experience components below have an invoke logo, but it's not centered.
@@ -45,15 +55,20 @@ export const NoContentForViewer = () => {
       <InvokeLogoIcon w={40} h={40} />
       <Flex flexDir="column" gap={8} alignItems="center" textAlign="center">
         <Text fontSize="md" color="base.200" pt={16}>
-          <Trans
-            i18nKey="newUserExperience.toGetStarted"
+          {isLocal ? <Trans
+            i18nKey="newUserExperience.toGetStartedLocal"
             components={{
               StrongComponent: <Text as="span" color="white" fontSize="md" fontWeight="semibold" />,
             }}
-          />
+          /> : <Trans
+          i18nKey="newUserExperience.toGetStarted"
+          components={{
+            StrongComponent: <Text as="span" color="white" fontSize="md" fontWeight="semibold" />,
+          }}
+        />}
         </Text>
 
-        <Flex flexDir="column" gap={2} alignItems="center">
+        {showStarterBundles && <Flex flexDir="column" gap={2} alignItems="center">
           <Text fontSize="md" color="base.200">
             {t('newUserExperience.noModelsInstalled')}
           </Text>
@@ -68,7 +83,7 @@ export const NoContentForViewer = () => {
               {t('newUserExperience.importModels')}
             </Button>
           </Flex>
-        </Flex>
+        </Flex>}
 
         <Divider />
 

invokeai/frontend/web/src/features/system/store/configSlice.ts

@@ -218,3 +218,6 @@ export const selectWorkflowFetchDebounce = createConfigSelector((config) => conf
 export const selectMetadataFetchDebounce = createConfigSelector((config) => config.metadataFetchDebounce ?? 300);
 
 export const selectIsModelsTabDisabled = createConfigSelector((config) => config.disabledTabs.includes('models'));
+
+export const selectIsLocal = createSelector(selectConfigSlice, (config) => config.isLocal);
+