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)}%)`;