From bc1d9748cebfa3185af7b5acaa24bf711023093f Mon Sep 17 00:00:00 2001
From: chainchompa <chainchompa@gmail.com>
Date: Tue, 23 Jul 2024 10:04:31 -0400
Subject: [PATCH 1/8] updated upscale warning to work for simple upscale

---
 .../components/Upscale/ParamUpscaleSettings.tsx        |  2 ++
 .../UpscaleSettingsAccordion.tsx                       |  4 ++--
 .../{MultidiffusionWarning.tsx => UpscaleWarning.tsx}  | 10 +++++++---
 3 files changed, 11 insertions(+), 5 deletions(-)
 rename invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/{MultidiffusionWarning.tsx => UpscaleWarning.tsx} (92%)

diff --git a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx
index c0309bebe4..1b4145ff03 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx
@@ -12,6 +12,7 @@ import { upscaleRequested } from 'app/store/middleware/listenerMiddleware/listen
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useIsAllowedToUpscale } from 'features/parameters/hooks/useIsAllowedToUpscale';
 import { useIsQueueMutationInProgress } from 'features/queue/hooks/useIsQueueMutationInProgress';
+import { UpscaleWarning } from 'features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleWarning';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiFrameCornersBold } from 'react-icons/pi';
@@ -51,6 +52,7 @@ const ParamUpscalePopover = (props: Props) => {
         <PopoverBody minW={96}>
           <Flex flexDirection="column" gap={4}>
             <ParamESRGANModel />
+            <UpscaleWarning usesTile={false} />
             <Button
               tooltip={detail}
               size="sm"
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleSettingsAccordion.tsx
index 6002b76521..49ecc6c7e2 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleSettingsAccordion.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleSettingsAccordion.tsx
@@ -11,8 +11,8 @@ import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { MultidiffusionWarning } from './MultidiffusionWarning';
 import { UpscaleInitialImage } from './UpscaleInitialImage';
+import { UpscaleWarning } from './UpscaleWarning';
 
 const selector = createMemoizedSelector([selectUpscalelice], (upscaleSlice) => {
   const { upscaleModel, upscaleInitialImage, scale } = upscaleSlice;
@@ -58,7 +58,7 @@ export const UpscaleSettingsAccordion = memo(() => {
               <UpscaleScaleSlider />
             </Flex>
           </Flex>
-          <MultidiffusionWarning />
+          <UpscaleWarning usesTile={true} />
         </Flex>
         <Expander label={t('accordions.advanced.options')} isOpen={isOpenExpander} onToggle={onToggleExpander}>
           <Flex gap={4} pb={4} flexDir="column">
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/MultidiffusionWarning.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleWarning.tsx
similarity index 92%
rename from invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/MultidiffusionWarning.tsx
rename to invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleWarning.tsx
index f3e2aa6604..e20bf3bc5e 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/MultidiffusionWarning.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleWarning.tsx
@@ -7,7 +7,11 @@ import { useCallback, useEffect, useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useControlNetModels } from 'services/api/hooks/modelsByType';
 
-export const MultidiffusionWarning = () => {
+interface Props {
+  usesTile: boolean;
+}
+
+export const UpscaleWarning = ({ usesTile }: Props) => {
   const { t } = useTranslation();
   const model = useAppSelector((s) => s.generation.model);
   const { tileControlnetModel, upscaleModel } = useAppSelector((s) => s.upscale);
@@ -28,14 +32,14 @@ export const MultidiffusionWarning = () => {
     if (!model) {
       _warnings.push(t('upscaling.mainModelDesc'));
     }
-    if (!tileControlnetModel) {
+    if (!tileControlnetModel && usesTile) {
       _warnings.push(t('upscaling.tileControlNetModelDesc'));
     }
     if (!upscaleModel) {
       _warnings.push(t('upscaling.upscaleModelDesc'));
     }
     return _warnings;
-  }, [model, upscaleModel, tileControlnetModel, t]);
+  }, [model, upscaleModel, tileControlnetModel, usesTile, t]);
 
   const handleGoToModelManager = useCallback(() => {
     dispatch(setActiveTab('models'));

From c098edc6b277d70dc429fd798108465d70137e92 Mon Sep 17 00:00:00 2001
From: chainchompa <chainchompa@gmail.com>
Date: Tue, 23 Jul 2024 10:15:31 -0400
Subject: [PATCH 2/8] updated simple upscale to use spandrel node and list of
 available spandrel models

---
 .../listeners/upscaleRequested.ts             |  3 +-
 .../util/graph/buildAdHocUpscaleGraph.ts      | 37 +++++-----
 .../Upscale/ParamRealESRGANModel.tsx          | 72 -------------------
 .../components/Upscale/ParamSimpleUpscale.tsx | 46 ++++++++++++
 .../Upscale/ParamUpscaleSettings.tsx          |  6 +-
 .../parameters/hooks/useIsAllowedToUpscale.ts | 11 +--
 .../features/parameters/store/upscaleSlice.ts |  6 ++
 7 files changed, 82 insertions(+), 99 deletions(-)
 delete mode 100644 invokeai/frontend/web/src/features/parameters/components/Upscale/ParamRealESRGANModel.tsx
 create mode 100644 invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSimpleUpscale.tsx

diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/upscaleRequested.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/upscaleRequested.ts
index ce480a3573..903bfc01ae 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/upscaleRequested.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/upscaleRequested.ts
@@ -18,7 +18,6 @@ export const addUpscaleRequestedListener = (startAppListening: AppStartListening
       const log = logger('session');
 
       const { imageDTO } = action.payload;
-      const { image_name } = imageDTO;
       const state = getState();
 
       const { isAllowedToUpscale, detailTKey } = createIsAllowedToUpscaleSelector(imageDTO)(state);
@@ -41,7 +40,7 @@ export const addUpscaleRequestedListener = (startAppListening: AppStartListening
         prepend: true,
         batch: {
           graph: buildAdHocUpscaleGraph({
-            image_name,
+            image: imageDTO,
             state,
           }),
           runs: 1,
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildAdHocUpscaleGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildAdHocUpscaleGraph.ts
index 60343c5e89..e23d6c49d7 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildAdHocUpscaleGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildAdHocUpscaleGraph.ts
@@ -1,39 +1,40 @@
 import type { RootState } from 'app/store/store';
-import { getBoardField } from 'features/nodes/util/graph/graphBuilderUtils';
-import type { Graph, Invocation, NonNullableGraph } from 'services/api/types';
+import type { Graph, ImageDTO, Invocation, NonNullableGraph } from 'services/api/types';
+import { assert } from 'tsafe';
 
 import { addCoreMetadataNode, upsertMetadata } from './canvas/metadata';
-import { ESRGAN } from './constants';
+import { SPANDREL } from './constants';
 
 type Arg = {
-  image_name: string;
+  image: ImageDTO;
   state: RootState;
 };
 
-export const buildAdHocUpscaleGraph = ({ image_name, state }: Arg): Graph => {
-  const { esrganModelName } = state.postprocessing;
+export const buildAdHocUpscaleGraph = ({ image, state }: Arg): Graph => {
+  const { simpleUpscaleModel } = state.upscale;
 
-  const realesrganNode: Invocation<'esrgan'> = {
-    id: ESRGAN,
-    type: 'esrgan',
-    image: { image_name },
-    model_name: esrganModelName,
-    is_intermediate: false,
-    board: getBoardField(state),
+  assert(simpleUpscaleModel, 'No upscale model found in state');
+
+  const upscaleNode: Invocation<'spandrel_image_to_image'> = {
+    id: SPANDREL,
+    type: 'spandrel_image_to_image',
+    image_to_image_model: simpleUpscaleModel,
+    tile_size: 500,
+    image,
   };
 
   const graph: NonNullableGraph = {
-    id: `adhoc-esrgan-graph`,
+    id: `adhoc-upscale-graph`,
     nodes: {
-      [ESRGAN]: realesrganNode,
+      [SPANDREL]: upscaleNode,
     },
     edges: [],
   };
 
-  addCoreMetadataNode(graph, {}, ESRGAN);
+  addCoreMetadataNode(graph, {}, SPANDREL);
   upsertMetadata(graph, {
-    esrgan_model: esrganModelName,
+    spandrel_model: simpleUpscaleModel,
   });
 
   return graph;
-};
+};
\ No newline at end of file
diff --git a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamRealESRGANModel.tsx b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamRealESRGANModel.tsx
deleted file mode 100644
index d02bfd2b03..0000000000
--- a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamRealESRGANModel.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import type { GroupBase } from 'chakra-react-select';
-import { esrganModelNameChanged, isParamESRGANModelName } from 'features/parameters/store/postprocessingSlice';
-import { memo, useCallback, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-const options: GroupBase<ComboboxOption>[] = [
-  {
-    label: 'x2 Upscalers',
-    options: [
-      {
-        label: 'RealESRGAN x2 Plus',
-        value: 'RealESRGAN_x2plus.pth',
-        description: 'Attempts to retain sharpness, low smoothing',
-      },
-    ],
-  },
-  {
-    label: 'x4 Upscalers',
-    options: [
-      {
-        label: 'RealESRGAN x4 Plus',
-        value: 'RealESRGAN_x4plus.pth',
-        description: 'Best for photos and highly detailed images, medium smoothing',
-      },
-      {
-        label: 'RealESRGAN x4 Plus (anime 6B)',
-        value: 'RealESRGAN_x4plus_anime_6B.pth',
-        description: 'Best for anime/manga, high smoothing',
-      },
-      {
-        label: 'ESRGAN SRx4',
-        value: 'ESRGAN_SRx4_DF2KOST_official-ff704c30.pth',
-        description: 'Retains sharpness, low smoothing',
-      },
-    ],
-  },
-];
-
-const ParamESRGANModel = () => {
-  const { t } = useTranslation();
-
-  const esrganModelName = useAppSelector((s) => s.postprocessing.esrganModelName);
-
-  const dispatch = useAppDispatch();
-
-  const onChange = useCallback<ComboboxOnChange>(
-    (v) => {
-      if (!isParamESRGANModelName(v?.value)) {
-        return;
-      }
-      dispatch(esrganModelNameChanged(v.value));
-    },
-    [dispatch]
-  );
-
-  const value = useMemo(
-    () => options.flatMap((o) => o.options).find((m) => m.value === esrganModelName),
-    [esrganModelName]
-  );
-
-  return (
-    <FormControl orientation="vertical">
-      <FormLabel>{t('models.esrganModel')}</FormLabel>
-      <Combobox value={value} onChange={onChange} options={options} />
-    </FormControl>
-  );
-};
-
-export default memo(ParamESRGANModel);
diff --git a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSimpleUpscale.tsx b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSimpleUpscale.tsx
new file mode 100644
index 0000000000..19a622fc0c
--- /dev/null
+++ b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSimpleUpscale.tsx
@@ -0,0 +1,46 @@
+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);
\ No newline at end of file
diff --git a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx
index 1b4145ff03..efb1e79ae2 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx
+++ b/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 ParamESRGANModel from './ParamRealESRGANModel';
+import ParamSimpleUpscale from './ParamSimpleUpscale';
 
 type Props = { imageDTO?: ImageDTO };
 
@@ -49,9 +49,9 @@ const ParamUpscalePopover = (props: Props) => {
         />
       </PopoverTrigger>
       <PopoverContent>
-        <PopoverBody minW={96}>
+        <PopoverBody w={96}>
           <Flex flexDirection="column" gap={4}>
-            <ParamESRGANModel />
+            <ParamSimpleUpscale />
             <UpscaleWarning usesTile={false} />
             <Button
               tooltip={detail}
diff --git a/invokeai/frontend/web/src/features/parameters/hooks/useIsAllowedToUpscale.ts b/invokeai/frontend/web/src/features/parameters/hooks/useIsAllowedToUpscale.ts
index 95fc52df22..e7d157fcc3 100644
--- a/invokeai/frontend/web/src/features/parameters/hooks/useIsAllowedToUpscale.ts
+++ b/invokeai/frontend/web/src/features/parameters/hooks/useIsAllowedToUpscale.ts
@@ -1,6 +1,6 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
-import { selectPostprocessingSlice } from 'features/parameters/store/postprocessingSlice';
+import { selectUpscalelice } from 'features/parameters/store/upscaleSlice';
 import { selectConfigSlice } from 'features/system/store/configSlice';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -55,13 +55,16 @@ const getDetailTKey = (isAllowedToUpscale?: ReturnType<typeof getIsAllowedToUpsc
 };
 
 export const createIsAllowedToUpscaleSelector = (imageDTO?: ImageDTO) =>
-  createMemoizedSelector(selectPostprocessingSlice, selectConfigSlice, (postprocessing, config) => {
-    const { esrganModelName } = postprocessing;
+  createMemoizedSelector(selectUpscalelice, selectConfigSlice, (upscale, config) => {
+    const { simpleUpscaleModel } = upscale;
     const { maxUpscalePixels } = config;
+    if (!simpleUpscaleModel) {
+      return { isAllowedToUpscale: false, detailTKey: undefined };
+    }
 
     const upscaledPixels = getUpscaledPixels(imageDTO, maxUpscalePixels);
     const isAllowedToUpscale = getIsAllowedToUpscale(upscaledPixels, maxUpscalePixels);
-    const scaleFactor = esrganModelName.includes('x2') ? 2 : 4;
+    const scaleFactor = simpleUpscaleModel.name.includes('x2') ? 2 : 4;
     const detailTKey = getDetailTKey(isAllowedToUpscale, scaleFactor);
     return {
       isAllowedToUpscale: scaleFactor === 2 ? isAllowedToUpscale.x2 : isAllowedToUpscale.x4,
diff --git a/invokeai/frontend/web/src/features/parameters/store/upscaleSlice.ts b/invokeai/frontend/web/src/features/parameters/store/upscaleSlice.ts
index f0b8d81ad8..8e565962d7 100644
--- a/invokeai/frontend/web/src/features/parameters/store/upscaleSlice.ts
+++ b/invokeai/frontend/web/src/features/parameters/store/upscaleSlice.ts
@@ -12,6 +12,7 @@ interface UpscaleState {
   creativity: number;
   tileControlnetModel: ControlNetModelConfig | null;
   scale: number;
+  simpleUpscaleModel: ParameterSpandrelImageToImageModel | null;
 }
 
 const initialUpscaleState: UpscaleState = {
@@ -22,6 +23,7 @@ const initialUpscaleState: UpscaleState = {
   creativity: 0,
   tileControlnetModel: null,
   scale: 4,
+  simpleUpscaleModel: null,
 };
 
 export const upscaleSlice = createSlice({
@@ -46,6 +48,9 @@ export const upscaleSlice = createSlice({
     scaleChanged: (state, action: PayloadAction<number>) => {
       state.scale = action.payload;
     },
+    simpleUpscaleModelChanged: (state, action: PayloadAction<ParameterSpandrelImageToImageModel | null>) => {
+      state.simpleUpscaleModel = action.payload;
+    },
   },
 });
 
@@ -56,6 +61,7 @@ export const {
   creativityChanged,
   tileControlnetModelChanged,
   scaleChanged,
+  simpleUpscaleModelChanged,
 } = upscaleSlice.actions;
 
 export const selectUpscalelice = (state: RootState) => state.upscale;

From a2f49ef7c1afa1dc5b8c1475c8c693bed412fced Mon Sep 17 00:00:00 2001
From: chainchompa <chainchompa@gmail.com>
Date: Tue, 23 Jul 2024 10:22:38 -0400
Subject: [PATCH 3/8] cleanup esrgan frontend code

---
 invokeai/frontend/web/src/app/store/store.ts  |  3 --
 .../util/graph/buildAdHocUpscaleGraph.ts      |  2 +-
 .../features/nodes/util/graph/constants.ts    |  1 -
 .../components/Upscale/ParamSimpleUpscale.tsx |  2 +-
 .../parameters/store/postprocessingSlice.ts   | 53 -------------------
 5 files changed, 2 insertions(+), 59 deletions(-)
 delete mode 100644 invokeai/frontend/web/src/features/parameters/store/postprocessingSlice.ts

diff --git a/invokeai/frontend/web/src/app/store/store.ts b/invokeai/frontend/web/src/app/store/store.ts
index 1a4093dfc5..6ae2011355 100644
--- a/invokeai/frontend/web/src/app/store/store.ts
+++ b/invokeai/frontend/web/src/app/store/store.ts
@@ -25,7 +25,6 @@ import { nodesPersistConfig, nodesSlice, nodesUndoableConfig } from 'features/no
 import { workflowSettingsPersistConfig, workflowSettingsSlice } from 'features/nodes/store/workflowSettingsSlice';
 import { workflowPersistConfig, workflowSlice } from 'features/nodes/store/workflowSlice';
 import { generationPersistConfig, generationSlice } from 'features/parameters/store/generationSlice';
-import { postprocessingPersistConfig, postprocessingSlice } from 'features/parameters/store/postprocessingSlice';
 import { upscalePersistConfig, upscaleSlice } from 'features/parameters/store/upscaleSlice';
 import { queueSlice } from 'features/queue/store/queueSlice';
 import { sdxlPersistConfig, sdxlSlice } from 'features/sdxl/store/sdxlSlice';
@@ -53,7 +52,6 @@ const allReducers = {
   [gallerySlice.name]: gallerySlice.reducer,
   [generationSlice.name]: generationSlice.reducer,
   [nodesSlice.name]: undoable(nodesSlice.reducer, nodesUndoableConfig),
-  [postprocessingSlice.name]: postprocessingSlice.reducer,
   [systemSlice.name]: systemSlice.reducer,
   [configSlice.name]: configSlice.reducer,
   [uiSlice.name]: uiSlice.reducer,
@@ -104,7 +102,6 @@ const persistConfigs: { [key in keyof typeof allReducers]?: PersistConfig } = {
   [galleryPersistConfig.name]: galleryPersistConfig,
   [generationPersistConfig.name]: generationPersistConfig,
   [nodesPersistConfig.name]: nodesPersistConfig,
-  [postprocessingPersistConfig.name]: postprocessingPersistConfig,
   [systemPersistConfig.name]: systemPersistConfig,
   [workflowPersistConfig.name]: workflowPersistConfig,
   [uiPersistConfig.name]: uiPersistConfig,
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildAdHocUpscaleGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildAdHocUpscaleGraph.ts
index e23d6c49d7..0fae75491f 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildAdHocUpscaleGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildAdHocUpscaleGraph.ts
@@ -37,4 +37,4 @@ export const buildAdHocUpscaleGraph = ({ image, state }: Arg): Graph => {
   });
 
   return graph;
-};
\ No newline at end of file
+};
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/constants.ts b/invokeai/frontend/web/src/features/nodes/util/graph/constants.ts
index 200b8305e3..5bc2192f53 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/constants.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/constants.ts
@@ -36,7 +36,6 @@ export const CONTROL_NET_COLLECT = 'control_net_collect';
 export const IP_ADAPTER_COLLECT = 'ip_adapter_collect';
 export const T2I_ADAPTER_COLLECT = 't2i_adapter_collect';
 export const METADATA = 'core_metadata';
-export const ESRGAN = 'esrgan';
 export const SPANDREL = 'spandrel';
 export const SDXL_MODEL_LOADER = 'sdxl_model_loader';
 export const SDXL_DENOISE_LATENTS = 'sdxl_denoise_latents';
diff --git a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSimpleUpscale.tsx b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSimpleUpscale.tsx
index 19a622fc0c..b5712b54f6 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSimpleUpscale.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSimpleUpscale.tsx
@@ -43,4 +43,4 @@ const ParamSimpleUpscale = () => {
   );
 };
 
-export default memo(ParamSimpleUpscale);
\ No newline at end of file
+export default memo(ParamSimpleUpscale);
diff --git a/invokeai/frontend/web/src/features/parameters/store/postprocessingSlice.ts b/invokeai/frontend/web/src/features/parameters/store/postprocessingSlice.ts
deleted file mode 100644
index c15bf982b8..0000000000
--- a/invokeai/frontend/web/src/features/parameters/store/postprocessingSlice.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import type { PayloadAction } from '@reduxjs/toolkit';
-import { createSlice } from '@reduxjs/toolkit';
-import type { PersistConfig, RootState } from 'app/store/store';
-import { z } from 'zod';
-
-const zParamESRGANModelName = z.enum([
-  'RealESRGAN_x4plus.pth',
-  'RealESRGAN_x4plus_anime_6B.pth',
-  'ESRGAN_SRx4_DF2KOST_official-ff704c30.pth',
-  'RealESRGAN_x2plus.pth',
-]);
-type ParamESRGANModelName = z.infer<typeof zParamESRGANModelName>;
-export const isParamESRGANModelName = (v: unknown): v is ParamESRGANModelName =>
-  zParamESRGANModelName.safeParse(v).success;
-
-interface PostprocessingState {
-  _version: 1;
-  esrganModelName: ParamESRGANModelName;
-}
-
-const initialPostprocessingState: PostprocessingState = {
-  _version: 1,
-  esrganModelName: 'RealESRGAN_x4plus.pth',
-};
-
-export const postprocessingSlice = createSlice({
-  name: 'postprocessing',
-  initialState: initialPostprocessingState,
-  reducers: {
-    esrganModelNameChanged: (state, action: PayloadAction<ParamESRGANModelName>) => {
-      state.esrganModelName = action.payload;
-    },
-  },
-});
-
-export const { esrganModelNameChanged } = postprocessingSlice.actions;
-
-export const selectPostprocessingSlice = (state: RootState) => state.postprocessing;
-
-/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-const migratePostprocessingState = (state: any): any => {
-  if (!('_version' in state)) {
-    state._version = 1;
-  }
-  return state;
-};
-
-export const postprocessingPersistConfig: PersistConfig<PostprocessingState> = {
-  name: postprocessingSlice.name,
-  initialState: initialPostprocessingState,
-  migrate: migratePostprocessingState,
-  persistDenylist: [],
-};

From 8e89157a830f3eb6352064daaeed407021c43a0b Mon Sep 17 00:00:00 2001
From: chainchompa <chainchompa@gmail.com>
Date: Tue, 23 Jul 2024 11:36:17 -0400
Subject: [PATCH 4/8] reuse ParamSpandrelModel for simple upscale

---
 .../components/Upscale/ParamSimpleUpscale.tsx | 46 -------------------
 .../components/Upscale/ParamSpandrelModel.tsx | 18 ++++++--
 .../Upscale/ParamUpscaleSettings.tsx          |  4 +-
 .../UpscaleSettingsAccordion.tsx              |  2 +-
 4 files changed, 16 insertions(+), 54 deletions(-)
 delete mode 100644 invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSimpleUpscale.tsx

diff --git a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSimpleUpscale.tsx b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSimpleUpscale.tsx
deleted file mode 100644
index b5712b54f6..0000000000
--- a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSimpleUpscale.tsx
+++ /dev/null
@@ -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);
diff --git a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSpandrelModel.tsx b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSpandrelModel.tsx
index 11216692ec..aec3d9417b 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSpandrelModel.tsx
+++ b/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({
diff --git a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx
index efb1e79ae2..99adbb0e0e 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx
+++ b/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}
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleSettingsAccordion.tsx
index 49ecc6c7e2..ddd5435205 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleSettingsAccordion.tsx
+++ b/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>

From b46b20210dd1d2dceae8042581afc8444a996a55 Mon Sep 17 00:00:00 2001
From: chainchompa <chainchompa@gmail.com>
Date: Tue, 23 Jul 2024 11:53:43 -0400
Subject: [PATCH 5/8] handle simple upscale models on modelsLoaded

---
 .../listeners/modelsLoaded.ts                 | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelsLoaded.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelsLoaded.ts
index 2ace69c54e..5d7213bb57 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelsLoaded.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelsLoaded.ts
@@ -10,7 +10,7 @@ import { heightChanged, widthChanged } from 'features/controlLayers/store/contro
 import { loraRemoved } from 'features/lora/store/loraSlice';
 import { calculateNewSize } from 'features/parameters/components/ImageSize/calculateNewSize';
 import { modelChanged, vaeSelected } from 'features/parameters/store/generationSlice';
-import { upscaleModelChanged } from 'features/parameters/store/upscaleSlice';
+import { simpleUpscaleModelChanged, upscaleModelChanged } from 'features/parameters/store/upscaleSlice';
 import { zParameterModel, zParameterVAEModel } from 'features/parameters/types/parameterSchemas';
 import { getIsSizeOptimal, getOptimalDimension } from 'features/parameters/util/optimalDimension';
 import { refinerModelChanged } from 'features/sdxl/store/sdxlSlice';
@@ -43,6 +43,7 @@ export const addModelsLoadedListener = (startAppListening: AppStartListening) =>
       handleLoRAModels(models, state, dispatch, log);
       handleControlAdapterModels(models, state, dispatch, log);
       handleSpandrelImageToImageModels(models, state, dispatch, log);
+      handleSimpleUpscaleModels(models, state, dispatch, log);
     },
   });
 };
@@ -204,3 +205,23 @@ const handleSpandrelImageToImageModels: ModelHandler = (models, state, dispatch,
 
   dispatch(upscaleModelChanged(null));
 };
+
+const handleSimpleUpscaleModels: ModelHandler = (models, state, dispatch, _log) => {
+  const currentSimpleUpscaleModel = state.upscale.simpleUpscaleModel;
+  const upscaleModels = models.filter(isSpandrelImageToImageModelConfig);
+
+  if (currentSimpleUpscaleModel) {
+    const isCurrentSimpleUpscaleModelAvailable = upscaleModels.some((m) => m.key === currentSimpleUpscaleModel.key);
+    if (isCurrentSimpleUpscaleModelAvailable) {
+      return;
+    }
+  }
+
+  const firstModel = upscaleModels[0];
+  if (firstModel) {
+    dispatch(simpleUpscaleModelChanged(firstModel));
+    return;
+  }
+
+  dispatch(simpleUpscaleModelChanged(null));
+};

From cbce89162b50a656730f671fd494a2a073ff5097 Mon Sep 17 00:00:00 2001
From: chainchompa <chainchompa@gmail.com>
Date: Tue, 23 Jul 2024 12:15:26 -0400
Subject: [PATCH 6/8] update simple upscale metadata to match upscale metadata

---
 .../listeners/upscaleRequested.ts                 |  2 +-
 .../nodes/util/graph/buildAdHocUpscaleGraph.ts    | 15 +++++++++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/upscaleRequested.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/upscaleRequested.ts
index 903bfc01ae..d5fd1ae8ca 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/upscaleRequested.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/upscaleRequested.ts
@@ -39,7 +39,7 @@ export const addUpscaleRequestedListener = (startAppListening: AppStartListening
       const enqueueBatchArg: BatchConfig = {
         prepend: true,
         batch: {
-          graph: buildAdHocUpscaleGraph({
+          graph: await buildAdHocUpscaleGraph({
             image: imageDTO,
             state,
           }),
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildAdHocUpscaleGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildAdHocUpscaleGraph.ts
index 0fae75491f..0c6a0803ad 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildAdHocUpscaleGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildAdHocUpscaleGraph.ts
@@ -1,8 +1,14 @@
 import type { RootState } from 'app/store/store';
-import type { Graph, ImageDTO, Invocation, NonNullableGraph } from 'services/api/types';
+import { fetchModelConfigWithTypeGuard } from 'features/metadata/util/modelFetchingHelpers';
+import {
+  type ImageDTO,
+  type Invocation,
+  isSpandrelImageToImageModelConfig,
+  type NonNullableGraph,
+} from 'services/api/types';
 import { assert } from 'tsafe';
 
-import { addCoreMetadataNode, upsertMetadata } from './canvas/metadata';
+import { addCoreMetadataNode, getModelMetadataField, upsertMetadata } from './canvas/metadata';
 import { SPANDREL } from './constants';
 
 type Arg = {
@@ -10,7 +16,7 @@ type Arg = {
   state: RootState;
 };
 
-export const buildAdHocUpscaleGraph = ({ image, state }: Arg): Graph => {
+export const buildAdHocUpscaleGraph = async ({ image, state }: Arg): Promise<NonNullableGraph> => {
   const { simpleUpscaleModel } = state.upscale;
 
   assert(simpleUpscaleModel, 'No upscale model found in state');
@@ -30,10 +36,11 @@ export const buildAdHocUpscaleGraph = ({ image, state }: Arg): Graph => {
     },
     edges: [],
   };
+  const modelConfig = await fetchModelConfigWithTypeGuard(simpleUpscaleModel.key, isSpandrelImageToImageModelConfig);
 
   addCoreMetadataNode(graph, {}, SPANDREL);
   upsertMetadata(graph, {
-    spandrel_model: simpleUpscaleModel,
+    upscale_model: getModelMetadataField(modelConfig),
   });
 
   return graph;

From e1a718b51227f90a2dfbe460b15ff713f25add96 Mon Sep 17 00:00:00 2001
From: chainchompa <chainchompa@gmail.com>
Date: Tue, 23 Jul 2024 12:16:35 -0400
Subject: [PATCH 7/8] cleanup

---
 .../parameters/components/Upscale/ParamSpandrelModel.tsx      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSpandrelModel.tsx b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSpandrelModel.tsx
index aec3d9417b..ae76e7d607 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSpandrelModel.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSpandrelModel.tsx
@@ -15,7 +15,7 @@ const ParamSpandrelModel = ({ isMultidiffusion }: Props) => {
   const { t } = useTranslation();
   const [modelConfigs, { isLoading }] = useSpandrelImageToImageModels();
 
-  const model = useAppSelector((s) => isMultidiffusion ? s.upscale.upscaleModel : s.upscale.simpleUpscaleModel);
+  const model = useAppSelector((s) => (isMultidiffusion ? s.upscale.upscaleModel : s.upscale.simpleUpscaleModel));
   const dispatch = useAppDispatch();
 
   const tooltipLabel = useMemo(() => {
@@ -30,7 +30,7 @@ const ParamSpandrelModel = ({ isMultidiffusion }: Props) => {
       if (isMultidiffusion) {
         dispatch(upscaleModelChanged(v));
       } else {
-        dispatch(simpleUpscaleModelChanged(v))
+        dispatch(simpleUpscaleModelChanged(v));
       }
     },
     [isMultidiffusion, dispatch]

From 6317cf8ef9a8afeaf36cd8c6b45453a0cda8458e Mon Sep 17 00:00:00 2001
From: chainchompa <chainchompa@gmail.com>
Date: Tue, 23 Jul 2024 13:13:09 -0400
Subject: [PATCH 8/8] move handleSimpleUpscaleModels logic into
 handleSpandrelImageToImageModels listener

---
 .../listeners/modelsLoaded.ts                 | 39 +++++--------------
 1 file changed, 10 insertions(+), 29 deletions(-)

diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelsLoaded.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelsLoaded.ts
index 5d7213bb57..000154542e 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelsLoaded.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelsLoaded.ts
@@ -43,7 +43,6 @@ export const addModelsLoadedListener = (startAppListening: AppStartListening) =>
       handleLoRAModels(models, state, dispatch, log);
       handleControlAdapterModels(models, state, dispatch, log);
       handleSpandrelImageToImageModels(models, state, dispatch, log);
-      handleSimpleUpscaleModels(models, state, dispatch, log);
     },
   });
 };
@@ -187,41 +186,23 @@ const handleControlAdapterModels: ModelHandler = (models, state, dispatch, _log)
 };
 
 const handleSpandrelImageToImageModels: ModelHandler = (models, state, dispatch, _log) => {
-  const currentUpscaleModel = state.upscale.upscaleModel;
+  const { upscaleModel: currentUpscaleModel, simpleUpscaleModel: currentSimpleUpscaleModel } = state.upscale;
   const upscaleModels = models.filter(isSpandrelImageToImageModelConfig);
+  const firstModel = upscaleModels[0] || null;
 
-  if (currentUpscaleModel) {
-    const isCurrentUpscaleModelAvailable = upscaleModels.some((m) => m.key === currentUpscaleModel.key);
-    if (isCurrentUpscaleModelAvailable) {
-      return;
-    }
-  }
+  const isCurrentUpscaleModelAvailable = currentUpscaleModel
+    ? upscaleModels.some((m) => m.key === currentUpscaleModel.key)
+    : false;
 
-  const firstModel = upscaleModels[0];
-  if (firstModel) {
+  if (!isCurrentUpscaleModelAvailable) {
     dispatch(upscaleModelChanged(firstModel));
-    return;
   }
 
-  dispatch(upscaleModelChanged(null));
-};
+  const isCurrentSimpleUpscaleModelAvailable = currentSimpleUpscaleModel
+    ? upscaleModels.some((m) => m.key === currentSimpleUpscaleModel.key)
+    : false;
 
-const handleSimpleUpscaleModels: ModelHandler = (models, state, dispatch, _log) => {
-  const currentSimpleUpscaleModel = state.upscale.simpleUpscaleModel;
-  const upscaleModels = models.filter(isSpandrelImageToImageModelConfig);
-
-  if (currentSimpleUpscaleModel) {
-    const isCurrentSimpleUpscaleModelAvailable = upscaleModels.some((m) => m.key === currentSimpleUpscaleModel.key);
-    if (isCurrentSimpleUpscaleModelAvailable) {
-      return;
-    }
-  }
-
-  const firstModel = upscaleModels[0];
-  if (firstModel) {
+  if (!isCurrentSimpleUpscaleModelAvailable) {
     dispatch(simpleUpscaleModelChanged(firstModel));
-    return;
   }
-
-  dispatch(simpleUpscaleModelChanged(null));
 };