feat(ui):Upscaling Flexibility

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

@@ -2396,6 +2396,7 @@
         "upscaleModel": "Upscale Model",
         "postProcessingModel": "Post-Processing Model",
         "scale": "Scale",
+        "tileControl": "Tile Control",
         "postProcessingMissingModelWarning": "Visit the <LinkComponent>Model Manager</LinkComponent> to install a post-processing (image to image) model.",
         "missingModelsWarning": "Visit the <LinkComponent>Model Manager</LinkComponent> to install the required models:",
         "mainModelDesc": "Main model (SD1.5 or SDXL architecture)",

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelsLoaded.ts

@@ -15,7 +15,11 @@ import { refImageModelChanged, selectRefImagesSlice } from 'features/controlLaye
 import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
 import { getEntityIdentifier, isFLUXReduxConfig, isIPAdapterConfig } from 'features/controlLayers/store/types';
 import { modelSelected } from 'features/parameters/store/actions';
-import { postProcessingModelChanged, upscaleModelChanged } from 'features/parameters/store/upscaleSlice';
+import {
+  postProcessingModelChanged,
+  tileControlnetModelChanged,
+  upscaleModelChanged,
+} from 'features/parameters/store/upscaleSlice';
 import {
   zParameterCLIPEmbedModel,
   zParameterSpandrelImageToImageModel,
@@ -28,6 +32,7 @@ import type { AnyModelConfig } from 'services/api/types';
 import {
   isCLIPEmbedModelConfig,
   isControlLayerModelConfig,
+  isControlNetModelConfig,
   isFluxReduxModelConfig,
   isFluxVAEModelConfig,
   isIPAdapterModelConfig,
@@ -71,6 +76,7 @@ export const addModelsLoadedListener = (startAppListening: AppStartListening) =>
       handleControlAdapterModels(models, state, dispatch, log);
       handlePostProcessingModel(models, state, dispatch, log);
       handleUpscaleModel(models, state, dispatch, log);
+      handleTileControlNetModel(models, state, dispatch, log);
       handleIPAdapterModels(models, state, dispatch, log);
       handleT5EncoderModels(models, state, dispatch, log);
       handleCLIPEmbedModels(models, state, dispatch, log);
@@ -345,6 +351,46 @@ const handleUpscaleModel: ModelHandler = (models, state, dispatch, log) => {
   }
 };
 
+const handleTileControlNetModel: ModelHandler = (models, state, dispatch, log) => {
+  const selectedTileControlNetModel = state.upscale.tileControlnetModel;
+  const controlNetModels = models.filter(isControlNetModelConfig);
+
+  // If the currently selected model is available, we don't need to do anything
+  if (selectedTileControlNetModel && controlNetModels.some((m) => m.key === selectedTileControlNetModel.key)) {
+    return;
+  }
+
+  // Find a model with "Tile" in the name, case-insensitive
+  const tileModel = controlNetModels.find((m) => m.name.toLowerCase().includes('tile'));
+
+  // If we have a tile model, select it
+  if (tileModel) {
+    log.debug(
+      { selectedTileControlNetModel, tileModel },
+      'No selected tile ControlNet model or selected model is not available, selecting tile model'
+    );
+    dispatch(tileControlnetModelChanged(tileModel));
+    return;
+  }
+
+  // Otherwise, select the first available ControlNet model
+  const firstModel = controlNetModels[0] || null;
+  if (firstModel) {
+    log.debug(
+      { selectedTileControlNetModel, firstModel },
+      'No tile ControlNet model found, selecting first available ControlNet model'
+    );
+    dispatch(tileControlnetModelChanged(firstModel));
+    return;
+  }
+
+  // No available models, we should clear the selected model - but only if we have one selected
+  if (selectedTileControlNetModel) {
+    log.debug({ selectedTileControlNetModel }, 'Selected tile ControlNet model is not available, clearing');
+    dispatch(tileControlnetModelChanged(null));
+  }
+};
+
 const handleT5EncoderModels: ModelHandler = (models, state, dispatch, log) => {
   const selectedT5EncoderModel = state.params.t5EncoderModel;
   const t5EncoderModels = models.filter((m) => isT5EncoderModelConfig(m));

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

@@ -0,0 +1,72 @@
+import { FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
+import { selectBase } from 'features/controlLayers/store/paramsSlice';
+import { ModelPicker } from 'features/parameters/components/ModelPicker';
+import { selectTileControlNetModel, tileControlnetModelChanged } from 'features/parameters/store/upscaleSlice';
+import { memo, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useControlNetModels } from 'services/api/hooks/modelsByType';
+import type { ControlNetModelConfig } from 'services/api/types';
+
+const ParamTileControlNetModel = () => {
+  const dispatch = useAppDispatch();
+  const { t } = useTranslation();
+  const tileControlNetModel = useAppSelector(selectTileControlNetModel);
+  const currentBaseModel = useAppSelector(selectBase);
+  const [modelConfigs, { isLoading }] = useControlNetModels();
+
+  const _onChange = useCallback(
+    (controlNetModel: ControlNetModelConfig) => {
+      dispatch(tileControlnetModelChanged(controlNetModel));
+    },
+    [dispatch]
+  );
+
+  const filteredModelConfigs = useMemo(() => {
+    if (!currentBaseModel) {
+      return [];
+    }
+    return modelConfigs.filter((model) => {
+      const isCompatible = model.base === currentBaseModel;
+      const isTileOrMultiModel =
+        model.name.toLowerCase().includes('tile') || model.name.toLowerCase().includes('union');
+      return isCompatible && isTileOrMultiModel;
+    });
+  }, [modelConfigs, currentBaseModel]);
+
+  const getIsOptionDisabled = useCallback(
+    (model: ControlNetModelConfig): boolean => {
+      const isCompatible = currentBaseModel === model.base;
+      const hasMainModel = Boolean(currentBaseModel);
+      return !hasMainModel || !isCompatible;
+    },
+    [currentBaseModel]
+  );
+
+  return (
+    <FormControl
+      isDisabled={!filteredModelConfigs.length}
+      isInvalid={!filteredModelConfigs.length}
+      minW={0}
+      flexGrow={1}
+      gap={2}
+    >
+      <InformationalPopover feature="controlNet">
+        <FormLabel m={0}>{t('upscaling.tileControl')}</FormLabel>
+      </InformationalPopover>
+      <ModelPicker
+        modelConfigs={filteredModelConfigs}
+        selectedModelConfig={tileControlNetModel ?? undefined}
+        onChange={_onChange}
+        getIsOptionDisabled={getIsOptionDisabled}
+        placeholder={t('common.placeholderSelectAModel')}
+        noOptionsText={t('upscaling.missingTileControlNetModel')}
+        isDisabled={isLoading || !filteredModelConfigs.length}
+        isInvalid={!filteredModelConfigs.length}
+      />
+    </FormControl>
+  );
+};
+
+export default memo(ParamTileControlNetModel);

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

@@ -12,10 +12,12 @@ import ParamClipSkip from 'features/parameters/components/Advanced/ParamClipSkip
 import ParamT5EncoderModelSelect from 'features/parameters/components/Advanced/ParamT5EncoderModelSelect';
 import ParamSeamlessXAxis from 'features/parameters/components/Seamless/ParamSeamlessXAxis';
 import ParamSeamlessYAxis from 'features/parameters/components/Seamless/ParamSeamlessYAxis';
+import ParamTileControlNetModel from 'features/parameters/components/Upscale/ParamTileControlNetModel';
 import ParamFLUXVAEModelSelect from 'features/parameters/components/VAEModel/ParamFLUXVAEModelSelect';
 import ParamVAEModelSelect from 'features/parameters/components/VAEModel/ParamVAEModelSelect';
 import ParamVAEPrecision from 'features/parameters/components/VAEModel/ParamVAEPrecision';
 import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle';
+import { selectActiveTab } from 'features/ui/store/uiSelectors';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useGetModelConfigQuery } from 'services/api/endpoints/models';
@@ -33,6 +35,7 @@ export const AdvancedSettingsAccordion = memo(() => {
   const { currentData: vaeConfig } = useGetModelConfigQuery(vaeKey ?? skipToken);
   const isFLUX = useAppSelector(selectIsFLUX);
   const isSD3 = useAppSelector(selectIsSD3);
+  const activeTab = useAppSelector(selectActiveTab);
 
   const selectBadges = useMemo(
     () =>
@@ -112,6 +115,7 @@ export const AdvancedSettingsAccordion = memo(() => {
             <ParamCLIPGEmbedModelSelect />
           </FormControlGroup>
         )}
+        {activeTab === 'upscaling' && <ParamTileControlNetModel />}
       </Flex>
     </StandaloneAccordion>
   );

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

@@ -41,8 +41,9 @@ export const UpscaleScaleSlider = memo(() => {
           value={scale}
           onChange={onChange}
           defaultValue={4}
-          min={2}
+          min={1}
           max={16}
+          step={0.5}
           format={formatValue}
         />
       </Flex>