Updated

Author: hipsterusername

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

@@ -2368,6 +2368,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, tileControlnetModelChanged, upscaleModelChanged } from 'features/parameters/store/upscaleSlice';
+import {
+  postProcessingModelChanged,
+  tileControlnetModelChanged,
+  upscaleModelChanged,
+} from 'features/parameters/store/upscaleSlice';
 import {
   zParameterCLIPEmbedModel,
   zParameterSpandrelImageToImageModel,
@@ -358,7 +362,7 @@ const handleTileControlNetModel: ModelHandler = (models, state, dispatch, log) =
 
   // 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(

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

@@ -1,8 +1,10 @@
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { useModelCombobox } from 'common/hooks/useModelCombobox';
+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 } from 'react';
+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';
@@ -11,26 +13,51 @@ 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 | null) => {
+    (controlNetModel: ControlNetModelConfig) => {
       dispatch(tileControlnetModelChanged(controlNetModel));
     },
     [dispatch]
   );
 
-  const { options, value, onChange, noOptionsMessage } = useModelCombobox({
-    modelConfigs,
-    onChange: _onChange,
-    selectedModel: tileControlNetModel,
-    isLoading,
-  });
+  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={!options.length} isInvalid={!options.length} minW={0} flexGrow={1} gap={2}>
-      <FormLabel m={0}>{t('controlNet')}</FormLabel>
-      <Combobox value={value} options={options} onChange={onChange} noOptionsMessage={noOptionsMessage} />
+    <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>
   );
 };

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

@@ -12,10 +12,10 @@ 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 ParamTileControlNetModel from 'features/parameters/components/Upscale/ParamTileControlNetModel';
 import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle';
 import { selectActiveTab } from 'features/ui/store/uiSelectors';
 import { memo, useMemo } from 'react';