feat(ui): revised simple upscale warning UI

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

@@ -1646,6 +1646,7 @@
         "structure": "Structure",
         "upscaleModel": "Upscale Model",
         "scale": "Scale",
+        "simpleUpscaleMissingModelWarning": "Visit the <LinkComponent>Model Manager</LinkComponent> to install an upscale (image to image) model.",
         "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",

invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSpandrelModel.tsx

@@ -54,6 +54,7 @@ const ParamSpandrelModel = ({ isMultidiffusion }: Props) => {
             options={options}
             onChange={onChange}
             noOptionsMessage={noOptionsMessage}
+            isDisabled={options.length === 0}
           />
         </Box>
       </Tooltip>

invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx

@@ -6,14 +6,16 @@ import {
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
+  Text,
   useDisclosure,
 } from '@invoke-ai/ui-library';
 import { upscaleRequested } from 'app/store/middleware/listenerMiddleware/listeners/upscaleRequested';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { $installModelsTab } from 'features/modelManagerV2/subpanels/InstallModels';
 import { useIsQueueMutationInProgress } from 'features/queue/hooks/useIsQueueMutationInProgress';
-import { UpscaleWarning } from 'features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleWarning';
+import { setActiveTab } from 'features/ui/store/uiSlice';
 import { memo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { PiFrameCornersBold } from 'react-icons/pi';
 import type { ImageDTO } from 'services/api/types';
 
@@ -51,7 +53,7 @@ const ParamUpscalePopover = (props: Props) => {
         <PopoverBody w={96}>
           <Flex flexDirection="column" gap={4}>
             <ParamSpandrelModel isMultidiffusion={false} />
-            <UpscaleWarning usesTile={false} />
+            {!simpleUpscaleModel && <MissingModelWarning />}
             <Button size="sm" isDisabled={!imageDTO || inProgress || !simpleUpscaleModel} onClick={handleClickUpscale}>
               {t('parameters.upscaleImage')}
             </Button>
@@ -63,3 +65,27 @@ const ParamUpscalePopover = (props: Props) => {
 };
 
 export default memo(ParamUpscalePopover);
+
+const MissingModelWarning = () => {
+  const dispatch = useAppDispatch();
+
+  const handleGoToModelManager = useCallback(() => {
+    dispatch(setActiveTab('models'));
+    $installModelsTab.set(3);
+  }, [dispatch]);
+
+  return (
+    <Flex bg="error.500" borderRadius="base" padding={4} direction="column" fontSize="sm" gap={2}>
+      <Text>
+        <Trans
+          i18nKey="upscaling.simpleUpscaleMissingModelWarning"
+          components={{
+            LinkComponent: (
+              <Button size="sm" flexGrow={0} variant="link" color="base.50" onClick={handleGoToModelManager} />
+            ),
+          }}
+        />
+      </Text>
+    </Flex>
+  );
+};

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

@@ -58,7 +58,7 @@ export const UpscaleSettingsAccordion = memo(() => {
               <UpscaleScaleSlider />
             </Flex>
           </Flex>
-          <UpscaleWarning usesTile={true} />
+          <UpscaleWarning />
         </Flex>
         <Expander label={t('accordions.advanced.options')} isOpen={isOpenExpander} onToggle={onToggleExpander}>
           <Flex gap={4} pb={4} flexDir="column">

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

@@ -7,14 +7,11 @@ import { useCallback, useEffect, useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useControlNetModels } from 'services/api/hooks/modelsByType';
 
-interface Props {
+export const UpscaleWarning = () => {
-  usesTile: boolean;
-}
-
-export const UpscaleWarning = ({ usesTile }: Props) => {
   const { t } = useTranslation();
   const model = useAppSelector((s) => s.generation.model);
-  const { tileControlnetModel, upscaleModel, simpleUpscaleModel } = useAppSelector((s) => s.upscale);
+  const upscaleModel = useAppSelector((s) => s.upscale.upscaleModel);
+  const tileControlnetModel = useAppSelector((s) => s.upscale.tileControlnetModel);
   const dispatch = useAppDispatch();
   const [modelConfigs, { isLoading }] = useControlNetModels();
   const disabledTabs = useAppSelector((s) => s.config.disabledTabs);
@@ -29,23 +26,18 @@ export const UpscaleWarning = ({ usesTile }: Props) => {
 
   const warnings = useMemo(() => {
     const _warnings: string[] = [];
-    if (!usesTile) {
-      if (!simpleUpscaleModel) {
-        _warnings.push(t('upscaling.upscaleModelDesc'));
-      }
-      return _warnings;
-    }
     if (!model) {
       _warnings.push(t('upscaling.mainModelDesc'));
     }
-    if (!tileControlnetModel && usesTile) {
+    if (!tileControlnetModel) {
       _warnings.push(t('upscaling.tileControlNetModelDesc'));
     }
     if (!upscaleModel) {
       _warnings.push(t('upscaling.upscaleModelDesc'));
     }
+
     return _warnings;
-  }, [model, upscaleModel, tileControlnetModel, usesTile, simpleUpscaleModel, t]);
+  }, [model, tileControlnetModel, upscaleModel, t]);
 
   const handleGoToModelManager = useCallback(() => {
     dispatch(setActiveTab('models'));