diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index b9cfb2918c..7f6b196a06 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -2133,10 +2133,8 @@
"toGetStartedLocal": "To get started, make sure to download or import models needed to run Invoke. Then, enter a prompt in the box and click Invoke to generate your first image. Select a prompt template to improve results. You can choose to save your images directly to the Gallery or edit them to the Canvas.",
"toGetStarted": "To get started, enter a prompt in the box and click Invoke to generate your first image. Select a prompt template to improve results. You can choose to save your images directly to the Gallery or edit them to the Canvas.",
"gettingStartedSeries": "Want more guidance? Check out our Getting Started Series for tips on unlocking the full potential of the Invoke Studio.",
- "lowVRAMMode": "For best performance, follow the Low VRAM mode guide.",
- "downloadStarterModels": "Download Starter Models",
- "importModels": "Import Models",
- "noModelsInstalled": "It looks like you don't have any models installed"
+ "lowVRAMMode": "For best performance, follow our Low VRAM mode guide.",
+ "noModelsInstalled": "It looks like you don't have any models installed! You can download a starter model bundle or import models."
},
"whatsNew": {
"whatsNewInInvoke": "What's New in Invoke",
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/NoContentForViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/NoContentForViewer.tsx
index b2cfc1a3fb..08a2b0c3bd 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/NoContentForViewer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/NoContentForViewer.tsx
@@ -1,4 +1,15 @@
-import { Button, Divider, Flex, Icon, Link, Spinner, Text } from '@invoke-ai/ui-library';
+import {
+ Alert,
+ AlertDescription,
+ AlertIcon,
+ Button,
+ Divider,
+ Flex,
+ Icon,
+ Link,
+ Spinner,
+ Text,
+} from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { IAINoContentFallback } from 'common/components/IAIImageFallback';
import { InvokeLogoIcon } from 'common/components/InvokeLogoIcon';
@@ -13,21 +24,112 @@ import { Trans, useTranslation } from 'react-i18next';
import { PiArrowSquareOutBold, PiImageBold } from 'react-icons/pi';
import { useMainModels } from 'services/api/hooks/modelsByType';
-const ExternalLink = (props: PropsWithChildren<{ href: string }>) => {
- return (
-
- {props.children}
-
-
- );
-};
-
export const NoContentForViewer = memo(() => {
const hasImages = useHasImages();
const [mainModels, { data }] = useMainModels();
const isLocal = useAppSelector(selectIsLocal);
const isEnabled = useFeatureStatus('starterModels');
const { t } = useTranslation();
+
+ const showStarterBundles = useMemo(() => {
+ return isEnabled && data && mainModels.length === 0;
+ }, [mainModels.length, data, isEnabled]);
+
+ if (hasImages === LOADING_SYMBOL) {
+ // Blank bg w/ a spinner. The new user experience components below have an invoke logo, but it's not centered.
+ // If we show the logo while loading, there is an awkward layout shift where the invoke logo moves a bit. Less
+ // jarring to show a blank bg with a spinner - it will only be shown for a moment as we do the initial images
+ // fetching.
+ return ;
+ }
+
+ if (hasImages) {
+ return ;
+ }
+
+ return (
+
+
+
+ {isLocal ? : }
+ {showStarterBundles && }
+
+
+ {isLocal && }
+
+
+ );
+});
+
+NoContentForViewer.displayName = 'NoContentForViewer';
+
+const LoadingSpinner = () => {
+ return (
+
+
+
+ );
+};
+
+const ExternalLink = (props: PropsWithChildren<{ href: string }>) => {
+ return (
+
+ );
+};
+
+const InlineButton = (props: PropsWithChildren<{ onClick: () => void }>) => {
+ return (
+
+ );
+};
+
+const StrongComponent = ;
+
+const GetStartedLocal = () => {
+ return (
+
+
+
+ );
+};
+
+const GetStartedCommercial = () => {
+ return (
+
+
+
+ );
+};
+
+const GettingStartedVideosCallout = () => {
+ return (
+
+
+ ),
+ }}
+ />
+
+ );
+};
+
+const StarterBundlesCallout = () => {
const dispatch = useAppDispatch();
const handleClickDownloadStarterModels = useCallback(() => {
@@ -40,94 +142,31 @@ export const NoContentForViewer = memo(() => {
$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.
- // If we show the logo while loading, there is an awkward layout shift where the invoke logo moves a bit. Less
- // jarring to show a blank bg with a spinner - it will only be shown for a moment as we do the initial images
- // fetching.
-
-
-
- );
- }
-
- if (hasImages) {
- return ;
- }
-
return (
-
-
-
- {isLocal ? (
- <>
-
- ,
- }}
- />
-
-
- ,
- }}
- />
-
-
- ) : (
-
- ,
- }}
- />
-
- )}
-
- {showStarterBundles && (
-
-
- {t('newUserExperience.noModelsInstalled')}
-
-
-
-
- {t('common.or')}
-
-
-
-
- )}
-
-
-
-
-
- ),
- }}
- />
-
-
-
+
+ ,
+ ImportModelsButton: ,
+ }}
+ />
+
);
-});
+};
-NoContentForViewer.displayName = 'NoContentForViewer';
+const LowVRAMAlert = () => {
+ return (
+
+
+
+ ,
+ }}
+ />
+
+
+ );
+};