reuse ParamSpandrelModel for simple upscale

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

@@ -1,46 +0,0 @@
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { useModelCombobox } from 'common/hooks/useModelCombobox';
-import { simpleUpscaleModelChanged } from 'features/parameters/store/upscaleSlice';
-import { memo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useSpandrelImageToImageModels } from 'services/api/hooks/modelsByType';
-import type { SpandrelImageToImageModelConfig } from 'services/api/types';
-
-const ParamSimpleUpscale = () => {
-  const { t } = useTranslation();
-  const [modelConfigs, { isLoading }] = useSpandrelImageToImageModels();
-
-  const model = useAppSelector((s) => s.upscale.simpleUpscaleModel);
-
-  const dispatch = useAppDispatch();
-
-  const _onChange = useCallback(
-    (v: SpandrelImageToImageModelConfig | null) => {
-      dispatch(simpleUpscaleModelChanged(v));
-    },
-    [dispatch]
-  );
-
-  const { options, value, onChange, placeholder, noOptionsMessage } = useModelCombobox({
-    modelConfigs,
-    onChange: _onChange,
-    selectedModel: model,
-    isLoading,
-  });
-
-  return (
-    <FormControl orientation="vertical">
-      <FormLabel>{t('upscaling.upscaleModel')}</FormLabel>
-      <Combobox
-        value={value}
-        placeholder={placeholder}
-        options={options}
-        onChange={onChange}
-        noOptionsMessage={noOptionsMessage}
-      />
-    </FormControl>
-  );
-};
-
-export default memo(ParamSimpleUpscale);

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

@@ -1,17 +1,21 @@
 import { Box, Combobox, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useModelCombobox } from 'common/hooks/useModelCombobox';
-import { upscaleModelChanged } from 'features/parameters/store/upscaleSlice';
+import { simpleUpscaleModelChanged, upscaleModelChanged } from 'features/parameters/store/upscaleSlice';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSpandrelImageToImageModels } from 'services/api/hooks/modelsByType';
 import type { SpandrelImageToImageModelConfig } from 'services/api/types';
 
-const ParamSpandrelModel = () => {
+interface Props {
+  isMultidiffusion: boolean;
+}
+
+const ParamSpandrelModel = ({ isMultidiffusion }: Props) => {
   const { t } = useTranslation();
   const [modelConfigs, { isLoading }] = useSpandrelImageToImageModels();
 
-  const model = useAppSelector((s) => s.upscale.upscaleModel);
+  const model = useAppSelector((s) => isMultidiffusion ? s.upscale.upscaleModel : s.upscale.simpleUpscaleModel);
   const dispatch = useAppDispatch();
 
   const tooltipLabel = useMemo(() => {
@@ -23,9 +27,13 @@ const ParamSpandrelModel = () => {
 
   const _onChange = useCallback(
     (v: SpandrelImageToImageModelConfig | null) => {
-      dispatch(upscaleModelChanged(v));
+      if (isMultidiffusion) {
+        dispatch(upscaleModelChanged(v));
+      } else {
+        dispatch(simpleUpscaleModelChanged(v))
+      }
     },
-    [dispatch]
+    [isMultidiffusion, dispatch]
   );
 
   const { options, value, onChange, placeholder, noOptionsMessage } = useModelCombobox({

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

@@ -18,7 +18,7 @@ import { useTranslation } from 'react-i18next';
 import { PiFrameCornersBold } from 'react-icons/pi';
 import type { ImageDTO } from 'services/api/types';
 
-import ParamSimpleUpscale from './ParamSimpleUpscale';
+import ParamSpandrelModel from './ParamSpandrelModel';
 
 type Props = { imageDTO?: ImageDTO };
 
@@ -51,7 +51,7 @@ const ParamUpscalePopover = (props: Props) => {
       <PopoverContent>
         <PopoverBody w={96}>
           <Flex flexDirection="column" gap={4}>
-            <ParamSimpleUpscale />
+            <ParamSpandrelModel isMultidiffusion={false} />
             <UpscaleWarning usesTile={false} />
             <Button
               tooltip={detail}

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

@@ -54,7 +54,7 @@ export const UpscaleSettingsAccordion = memo(() => {
           <Flex gap={4}>
             <UpscaleInitialImage />
             <Flex direction="column" w="full" alignItems="center" gap={2}>
-              <ParamSpandrelModel />
+              <ParamSpandrelModel isMultidiffusion={true} />
               <UpscaleScaleSlider />
             </Flex>
           </Flex>