feat(ui): deferred invocation progress details for model loading

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",

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(() => {
     </Alert>
   );
 });
-CanvasAlertsInvocationProgressContent.displayName = 'CanvasAlertsInvocationProgressContent';
+CanvasAlertsInvocationProgressContentLocal.displayName = 'CanvasAlertsInvocationProgressContentLocal';
+
+const CanvasAlertsInvocationProgressContentCommercial = memo(() => {
+  const message = useDeferredModelLoadingInvocationProgressMessage();
+
+  if (!message) {
+    return null;
+  }
+
+  return (
+    <Alert status="loading" borderRadius="base" fontSize="sm" shadow="md" w="fit-content">
+      <AlertIcon />
+      <AlertDescription>{message}</AlertDescription>
+    </Alert>
+  );
+});
+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 <CanvasAlertsInvocationProgressContentCommercial />;
+  }
+
   // The alert is disabled at the user level
   if (!shouldShowInvocationProgressDetail) {
     return null;
   }
 
-  return <CanvasAlertsInvocationProgressContent />;
+  return <CanvasAlertsInvocationProgressContentLocal />;
 });
 
 CanvasAlertsInvocationProgress.displayName = 'CanvasAlertsInvocationProgress';

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<string | null>(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;
+};

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