diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index bf6b59dfd3b..037017cdb99 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -122,6 +122,7 @@ "goTo": "Go to", "hotkeysLabel": "Hotkeys", "loadingImage": "Loading Image", + "loadingModel": "Loading Model", "imageFailedToLoad": "Unable to Load Image", "img2img": "Image To Image", "inpaint": "inpaint", diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress.tsx index 3368b457138..ca09b10cff2 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress.tsx @@ -1,13 +1,15 @@ import { Alert, AlertDescription, AlertIcon, AlertTitle } from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; import { useAppSelector } from 'app/store/storeHooks'; +import { useDeferredModelLoadingInvocationProgressMessage } from 'features/controlLayers/hooks/useDeferredModelLoadingInvocationProgressMessage'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; +import { selectIsLocal } from 'features/system/store/configSlice'; import { selectSystemShouldShowInvocationProgressDetail } from 'features/system/store/systemSlice'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; import { $invocationProgressMessage } from 'services/events/stores'; -const CanvasAlertsInvocationProgressContent = memo(() => { +const CanvasAlertsInvocationProgressContentLocal = memo(() => { const { t } = useTranslation(); const invocationProgressMessage = useStore($invocationProgressMessage); @@ -23,23 +25,44 @@ const CanvasAlertsInvocationProgressContent = memo(() => { ); }); -CanvasAlertsInvocationProgressContent.displayName = 'CanvasAlertsInvocationProgressContent'; +CanvasAlertsInvocationProgressContentLocal.displayName = 'CanvasAlertsInvocationProgressContentLocal'; + +const CanvasAlertsInvocationProgressContentCommercial = memo(() => { + const message = useDeferredModelLoadingInvocationProgressMessage(); + + if (!message) { + return null; + } + + return ( + + + {message} + + ); +}); +CanvasAlertsInvocationProgressContentCommercial.displayName = 'CanvasAlertsInvocationProgressContentCommercial'; export const CanvasAlertsInvocationProgress = memo(() => { const isProgressMessageAlertEnabled = useFeatureStatus('invocationProgressAlert'); const shouldShowInvocationProgressDetail = useAppSelector(selectSystemShouldShowInvocationProgressDetail); + const isLocal = useAppSelector(selectIsLocal); // The alert is disabled at the system level if (!isProgressMessageAlertEnabled) { return null; } + if (!isLocal) { + return ; + } + // The alert is disabled at the user level if (!shouldShowInvocationProgressDetail) { return null; } - return ; + return ; }); CanvasAlertsInvocationProgress.displayName = 'CanvasAlertsInvocationProgress'; diff --git a/invokeai/frontend/web/src/features/controlLayers/hooks/useDeferredModelLoadingInvocationProgressMessage.ts b/invokeai/frontend/web/src/features/controlLayers/hooks/useDeferredModelLoadingInvocationProgressMessage.ts new file mode 100644 index 00000000000..5a458040dfe --- /dev/null +++ b/invokeai/frontend/web/src/features/controlLayers/hooks/useDeferredModelLoadingInvocationProgressMessage.ts @@ -0,0 +1,31 @@ +import { useStore } from '@nanostores/react'; +import { useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { $invocationProgressMessage } from 'services/events/stores'; + +export const useDeferredModelLoadingInvocationProgressMessage = () => { + const { t } = useTranslation(); + const invocationProgressMessage = useStore($invocationProgressMessage); + const [delayedMessage, setDelayedMessage] = useState(null); + + useEffect(() => { + if (!invocationProgressMessage) { + setDelayedMessage(null); + return; + } + + if (invocationProgressMessage && !invocationProgressMessage.startsWith('Loading model')) { + setDelayedMessage(null); + return; + } + + // Set a timeout to update delayedMessage after 5 seconds + const timer = setTimeout(() => { + setDelayedMessage(`${t('common.loadingModel')}...`); + }, 5000); + + return () => clearTimeout(timer); // Cleanup on effect re-run + }, [invocationProgressMessage, t]); + + return delayedMessage; +}; diff --git a/invokeai/frontend/web/src/services/events/stores.ts b/invokeai/frontend/web/src/services/events/stores.ts index c7ad1c10420..b0b02e02c4d 100644 --- a/invokeai/frontend/web/src/services/events/stores.ts +++ b/invokeai/frontend/web/src/services/events/stores.ts @@ -15,6 +15,7 @@ export const $invocationProgressMessage = computed($lastProgressEvent, (val) => if (!val) { return null; } + let message = val.message; if (val.percentage) { message += ` (${round(val.percentage * 100)}%)`;