From e09cf647790c32012bd889ab1690290f7631b119 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Thu, 9 Jan 2025 08:33:00 +1100 Subject: [PATCH] feat: more updates to first run view --- invokeai/frontend/web/public/locales/en.json | 6 +- .../ImageViewer/NoContentForViewer.tsx | 235 ++++++++++-------- 2 files changed, 139 insertions(+), 102 deletions(-) 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 ( + + + + , + }} + /> + + + ); +};