invoke-ai · psychedelicious · Jul 23, 2024 · Jul 23, 2024 · Jul 23, 2024 · Jul 23, 2024
@@ -1643,19 +1643,16 @@
     },
     "upscaling": {
         "creativity": "Creativity",
-        "currentImageSize": "Current Image Size",
-        "outputImageSize": "Output Image Size",
-        "sharpness": "Sharpness",
         "structure": "Structure",
-        "toInstall": "to install",
-        "upscaleModel": "Upcale Model",
+        "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",
-        "upscalingFromTo": "Upscaling from {{from}} to {{to}}"
+        "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": {

@@ -2,7 +2,7 @@ import { enqueueRequested } from 'app/store/actions';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
 import { isImageViewerOpenChanged } from 'features/gallery/store/gallerySlice';
 import { prepareLinearUIBatch } from 'features/nodes/util/graph/buildLinearBatchConfig';
-import { buildMultidiffusionUpscsaleGraph } from 'features/nodes/util/graph/buildMultidiffusionUpscaleGraph';
+import { buildMultidiffusionUpscaleGraph } from 'features/nodes/util/graph/buildMultidiffusionUpscaleGraph';
 import { queueApi } from 'services/api/endpoints/queue';
 
 export const addEnqueueRequestedUpscale = (startAppListening: AppStartListening) => {
@@ -14,7 +14,7 @@ export const addEnqueueRequestedUpscale = (startAppListening: AppStartListening)
       const { shouldShowProgressInViewer } = state.ui;
       const { prepend } = action.payload;
 
-      const graph = await buildMultidiffusionUpscsaleGraph(state);
+      const graph = await buildMultidiffusionUpscaleGraph(state);
 
       const batchConfig = prepareLinearUIBatch(state, graph, prepend);
 

@@ -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

@@ -1,5 +1,6 @@
 import { Button, Text, useToast } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
+import { $installModelsTab } from 'features/modelManagerV2/subpanels/InstallModels';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { setActiveTab } from 'features/ui/store/uiSlice';
 import { useCallback, useEffect, useState } from 'react';
@@ -44,6 +45,7 @@ const ToastDescription = () => {
 
   const onClick = useCallback(() => {
     dispatch(setActiveTab('models'));
+    $installModelsTab.set(3);
     toast.close(TOAST_ID);
   }, [dispatch, toast]);
 

@@ -30,7 +30,7 @@ export const StarterModelsResultItem = ({ result }: Props) => {
     <Flex alignItems="center" justifyContent="space-between" w="100%" gap={3}>
       <Flex fontSize="sm" flexDir="column">
         <Flex gap={3}>
-          <Badge h="min-content">{result.type.replace('_', ' ')}</Badge>
+          <Badge h="min-content">{result.type.replaceAll('_', ' ')}</Badge>
           <ModelBaseBadge base={result.base} />
           <Text fontWeight="semibold">{result.name}</Text>
         </Flex>

@@ -18,14 +18,17 @@ export const StarterModelsResults = ({ results }: StarterModelsResultsProps) =>
 
   const filteredResults = useMemo(() => {
     return results.filter((result) => {
-      const name = result.name.toLowerCase();
-      const type = result.type.toLowerCase();
-      return name.includes(searchTerm.toLowerCase()) || type.includes(searchTerm.toLowerCase());
+      const trimmedSearchTerm = searchTerm.trim().toLowerCase();
+      const matchStrings = [result.name.toLowerCase(), result.type.toLowerCase(), result.description.toLowerCase()];
+      if (result.type === 'spandrel_image_to_image') {
+        matchStrings.push('upscale');
+      }
+      return matchStrings.some((matchString) => matchString.includes(trimmedSearchTerm));
     });
   }, [results, searchTerm]);
 
   const handleSearch: ChangeEventHandler<HTMLInputElement> = useCallback((e) => {
-    setSearchTerm(e.target.value.trim());
+    setSearchTerm(e.target.value);
   }, []);
 
   const clearSearch = useCallback(() => {

@@ -1,28 +1,28 @@
 import { Box, Flex, Heading, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
 import { StarterModelsForm } from 'features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StarterModelsForm';
-import { useMemo } from 'react';
+import { atom } from 'nanostores';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useMainModels } from 'services/api/hooks/modelsByType';
 
 import { HuggingFaceForm } from './AddModelPanel/HuggingFaceFolder/HuggingFaceForm';
 import { InstallModelForm } from './AddModelPanel/InstallModelForm';
 import { ModelInstallQueue } from './AddModelPanel/ModelInstallQueue/ModelInstallQueue';
 import { ScanModelsForm } from './AddModelPanel/ScanFolder/ScanFolderForm';
 
+export const $installModelsTab = atom(0);
+
 export const InstallModels = () => {
   const { t } = useTranslation();
-  const [mainModels, { data }] = useMainModels();
-  const defaultIndex = useMemo(() => {
-    if (data && mainModels.length) {
-      return 0;
-    }
-    return 3;
-  }, [data, mainModels.length]);
+  const index = useStore($installModelsTab);
+  const onChange = useCallback((index: number) => {
+    $installModelsTab.set(index);
+  }, []);
 
   return (
     <Flex layerStyle="first" borderRadius="base" w="full" h="full" flexDir="column" gap={4}>
       <Heading fontSize="xl">{t('modelManager.addModel')}</Heading>
-      <Tabs variant="collapse" height="50%" display="flex" flexDir="column" defaultIndex={defaultIndex}>
+      <Tabs variant="collapse" height="50%" display="flex" flexDir="column" index={index} onChange={onChange}>
         <TabList>
           <Tab>{t('modelManager.urlOrLocalPath')}</Tab>
           <Tab>{t('modelManager.huggingFace')}</Tab>

@@ -24,7 +24,7 @@ import { addLoRAs } from './generation/addLoRAs';
 import { addSDXLLoRas } from './generation/addSDXLLoRAs';
 import { getBoardField, getSDXLStylePrompts } from './graphBuilderUtils';
 
-export const buildMultidiffusionUpscsaleGraph = async (state: RootState): Promise<GraphType> => {
+export const buildMultidiffusionUpscaleGraph = async (state: RootState): Promise<GraphType> => {
   const { model, cfgScale: cfg_scale, scheduler, steps, vaePrecision, seed, vae } = state.generation;
   const { positivePrompt, negativePrompt } = state.controlLayers.present;
   const { upscaleModel, upscaleInitialImage, structure, creativity, tileControlnetModel, scale } = state.upscale;
@@ -213,7 +213,7 @@ export const buildMultidiffusionUpscsaleGraph = async (state: RootState): Promis
     control_model: tileControlnetModel,
     control_mode: 'balanced',
     resize_mode: 'just_resize',
-    control_weight: (structure + 10) * 0.0325 + 0.15 + 0.15,
+    control_weight: (structure + 10) * 0.0325 + 0.3,
     begin_step_percent: 0,
     end_step_percent: (structure + 10) * 0.025 + 0.3,
   });
@@ -226,7 +226,7 @@ export const buildMultidiffusionUpscsaleGraph = async (state: RootState): Promis
     control_model: tileControlnetModel,
     control_mode: 'balanced',
     resize_mode: 'just_resize',
-    control_weight: ((structure + 10) * 0.0325 + 0.15) * 0.15,
+    control_weight: ((structure + 10) * 0.0325 + 0.15) * 0.45,
     begin_step_percent: (structure + 10) * 0.025 + 0.3,
     end_step_percent: 0.85,
   });

@@ -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>
   );
 };
@@ -49,14 +49,16 @@ export const UpscaleSettingsAccordion = memo(() => {
 
   return (
     <StandaloneAccordion label="Upscale" badges={badges} isOpen={isOpenAccordion} onToggle={onToggleAccordion}>
-      <Flex pt={4} px={4} w="full" h="full" flexDir="column" data-testid="image-settings-accordion">
-        <Flex gap={4}>
-          <UpscaleInitialImage />
-          <Flex direction="column" w="full" alignItems="center" gap={2}>
-            <ParamSpandrelModel />
-            <UpscaleScaleSlider />
-            <MultidiffusionWarning />
+      <Flex pt={4} px={4} w="full" h="full" flexDir="column" data-testid="upscale-settings-accordion">
+        <Flex flexDir="column" gap={4}>
+          <Flex gap={4}>
+            <UpscaleInitialImage />
+            <Flex direction="column" w="full" alignItems="center" gap={2}>
+              <ParamSpandrelModel />
+              <UpscaleScaleSlider />
+            </Flex>
           </Flex>
+          <MultidiffusionWarning />
         </Flex>
         <Expander label={t('accordions.advanced.options')} isOpen={isOpenExpander} onToggle={onToggleExpander}>
           <Flex gap={4} pb={4} flexDir="column">