feat(ui): updated upscale tab warnings

Author: psychedelicious

invokeai/frontend/web/public/locales/en.json

@@ -1644,14 +1644,15 @@
     "upscaling": {
         "creativity": "Creativity",
         "structure": "Structure",
-        "toInstall": "to install",
         "upscaleModel": "Upscale Model",
         "scale": "Scale",
-        "visit": "Visit",
-        "warningNoMainModel": "a model",
-        "warningNoTile": "a {{base_model}} tile controlnet required by this feature",
-        "warningNoTileOrUpscaleModel": "an upscaler model and {{base_model}} tile controlnet required by this feature",
-        "warningNoUpscaleModel": "an upscaler model required by this feature"
+        "missingModelsWarning": "Visit the <LinkComponent>Model Manager</LinkComponent> to install the required models:",
+        "mainModelDesc": "Main model (SD1.5 or SDXL architecture)",
+        "tileControlNetModelDesc": "Tile ControlNet model for the chosen main model architecture",
+        "upscaleModelDesc": "Upscale (image to image) model",
+        "missingUpscaleInitialImage": "Missing initial image for upscaling",
+        "missingUpscaleModel": "Missing upscale model",
+        "missingTileControlNetModel": "No valid tile ControlNet models installed"
     },
     "ui": {
         "tabs": {

invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts

@@ -208,14 +208,13 @@ const createSelector = (templates: Templates) =>
             });
         } else if (activeTabName === 'upscaling') {
           if (!upscale.upscaleInitialImage) {
-            reasons.push({ content: 'No Initial image' });
+            reasons.push({ content: i18n.t('upscaling.missingUpscaleInitialImage') });
           }
           if (!upscale.upscaleModel) {
-            reasons.push({ content: 'No upscale model selected' });
+            reasons.push({ content: i18n.t('upscaling.missingUpscaleModel') });
           }
-
           if (!upscale.tileControlnetModel) {
-            reasons.push({ content: 'No valid tile controlnet available' });
+            reasons.push({ content: i18n.t('upscaling.missingTileControlNetModel') });
           }
         } else {
           // Handling for all other tabs

invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/MultidiffusionWarning.tsx

@@ -1,10 +1,10 @@
-import { Flex, Link, Text } from '@invoke-ai/ui-library';
+import { Button, Flex, ListItem, Text, UnorderedList } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { $installModelsTab } from 'features/modelManagerV2/subpanels/InstallModels';
 import { tileControlnetModelChanged } from 'features/parameters/store/upscaleSlice';
-import { MODEL_TYPE_SHORT_MAP } from 'features/parameters/types/constants';
 import { setActiveTab } from 'features/ui/store/uiSlice';
 import { useCallback, useEffect, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { useControlNetModels } from 'services/api/hooks/modelsByType';
 
 export const MultidiffusionWarning = () => {
@@ -23,38 +23,46 @@ export const MultidiffusionWarning = () => {
     dispatch(tileControlnetModelChanged(validModel || null));
   }, [model?.base, modelConfigs, dispatch]);
 
-  const warningText = useMemo(() => {
+  const warnings = useMemo(() => {
+    const _warnings: string[] = [];
     if (!model) {
-      return t('upscaling.warningNoMainModel');
+      _warnings.push(t('upscaling.mainModelDesc'));
     }
-    if (!upscaleModel && !tileControlnetModel) {
-      return t('upscaling.warningNoTileOrUpscaleModel', { base_model: MODEL_TYPE_SHORT_MAP[model.base] });
+    if (!tileControlnetModel) {
+      _warnings.push(t('upscaling.tileControlNetModelDesc'));
     }
     if (!upscaleModel) {
-      return t('upscaling.warningNoUpscaleModel');
-    }
-    if (!tileControlnetModel) {
-      return t('upscaling.warningNoTile', { base_model: MODEL_TYPE_SHORT_MAP[model.base] });
+      _warnings.push(t('upscaling.upscaleModelDesc'));
     }
+    return _warnings;
   }, [model, upscaleModel, tileControlnetModel, t]);
 
   const handleGoToModelManager = useCallback(() => {
     dispatch(setActiveTab('models'));
+    $installModelsTab.set(3);
   }, [dispatch]);
 
-  if (!warningText || isLoading || !shouldShowButton) {
-    return <></>;
+  if (!warnings.length || isLoading || !shouldShowButton) {
+    return null;
   }
 
   return (
-    <Flex bg="error.500" borderRadius="base" padding="2" direction="column">
-      <Text fontSize="xs" textAlign="center" display="inline-block">
-        {t('upscaling.visit')}{' '}
-        <Link fontWeight="bold" onClick={handleGoToModelManager}>
-          {t('modelManager.modelManager')}
-        </Link>{' '}
-        {t('upscaling.toInstall')} {warningText}.
+    <Flex bg="error.500" borderRadius="base" padding={4} direction="column" fontSize="sm" gap={2}>
+      <Text>
+        <Trans
+          i18nKey="upscaling.missingModelsWarning"
+          components={{
+            LinkComponent: (
+              <Button size="sm" flexGrow={0} variant="link" color="base.50" onClick={handleGoToModelManager} />
+            ),
+          }}
+        />
       </Text>
+      <UnorderedList>
+        {warnings.map((warning) => (
+          <ListItem key={warning}>{warning}</ListItem>
+        ))}
+      </UnorderedList>
     </Flex>
   );
 };