feat(ui): update openapi-fetch; fix upload issue

My PR to fix an issue with the handling of formdata in `openapi-fetch` is released. This means we no longer need to patch the package (no patches at all now!).

This PR bumps its version and adds a transformer to our typegen script to handle typing binary form fields correctly as `Blob`.

Also regens types.

invokeai/frontend/web/package.json

@@ -23,7 +23,7 @@
     "dev": "concurrently \"vite dev\" \"yarn run theme:watch\"",
     "dev:host": "concurrently \"vite dev --host\" \"yarn run theme:watch\"",
     "build": "yarn run lint && vite build",
-    "typegen": "npx openapi-typescript http://localhost:9090/openapi.json --output src/services/api/schema.d.ts -t",
+    "typegen": "npx ts-node scripts/typegen.ts",
     "preview": "vite preview",
     "lint:madge": "madge --circular src/main.tsx",
     "lint:eslint": "eslint --max-warnings=0 .",
@@ -83,7 +83,7 @@
     "konva": "^9.2.0",
     "lodash-es": "^4.17.21",
     "nanostores": "^0.9.2",
-    "openapi-fetch": "0.4.0",
+    "openapi-fetch": "^0.6.1",
     "overlayscrollbars": "^2.2.0",
     "overlayscrollbars-react": "^0.5.0",
     "patch-package": "^7.0.0",

invokeai/frontend/web/patches/openapi-fetch+0.4.0.patch

@@ -1,55 +0,0 @@
-diff --git a/node_modules/openapi-fetch/dist/index.js b/node_modules/openapi-fetch/dist/index.js
-index cd4528a..8976b51 100644
---- a/node_modules/openapi-fetch/dist/index.js
-+++ b/node_modules/openapi-fetch/dist/index.js
-@@ -1,5 +1,5 @@
- // settings & const
--const DEFAULT_HEADERS = {
-+const CONTENT_TYPE_APPLICATION_JSON = {
-     "Content-Type": "application/json",
- };
- const TRAILING_SLASH_RE = /\/*$/;
-@@ -29,18 +29,29 @@ export function createFinalURL(url, options) {
-     }
-     return finalURL;
- }
-+function stringifyBody(body) {
-+    if (body instanceof ArrayBuffer || body instanceof File || body instanceof DataView || body instanceof Blob || ArrayBuffer.isView(body) || body instanceof URLSearchParams || body instanceof FormData) {
-+      return;
-+    }
-+  
-+    if (typeof body === "string") {
-+      return body;
-+    }
-+  
-+    return JSON.stringify(body);
-+  }
-+  
- export default function createClient(clientOptions = {}) {
-     const { fetch = globalThis.fetch, ...options } = clientOptions;
--    const defaultHeaders = new Headers({
--        ...DEFAULT_HEADERS,
--        ...(options.headers ?? {}),
--    });
-+    const defaultHeaders = new Headers(options.headers ?? {});
-     async function coreFetch(url, fetchOptions) {
-         const { headers, body: requestBody, params = {}, parseAs = "json", querySerializer = defaultSerializer, ...init } = fetchOptions || {};
-         // URL
-         const finalURL = createFinalURL(url, { baseUrl: options.baseUrl, params, querySerializer });
-+        // Stringify body if needed
-+        const stringifiedBody = stringifyBody(requestBody);
-         // headers
--        const baseHeaders = new Headers(defaultHeaders); // clone defaults (don’t overwrite!)
-+        const baseHeaders = new Headers(stringifiedBody ? { ...CONTENT_TYPE_APPLICATION_JSON, ...defaultHeaders } : defaultHeaders); // clone defaults (don’t overwrite!)
-         const headerOverrides = new Headers(headers);
-         for (const [k, v] of headerOverrides.entries()) {
-             if (v === undefined || v === null)
-@@ -54,7 +65,7 @@ export default function createClient(clientOptions = {}) {
-             ...options,
-             ...init,
-             headers: baseHeaders,
--            body: typeof requestBody === "string" ? requestBody : JSON.stringify(requestBody),
-+            body: stringifiedBody ?? requestBody,
-         });
-         // handle empty content
-         // note: we return `{}` because we want user truthy checks for `.data` or `.error` to succeed

invokeai/frontend/web/scripts/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

invokeai/frontend/web/scripts/typegen.ts

@@ -0,0 +1,23 @@
+import fs from 'node:fs';
+import openapiTS from 'openapi-typescript';
+
+const OPENAPI_URL = 'http://localhost:9090/openapi.json';
+const OUTPUT_FILE = 'src/services/api/schema.d.ts';
+
+async function main() {
+  process.stdout.write(
+    `Generating types "${OPENAPI_URL}" --> "${OUTPUT_FILE}"...`
+  );
+  const types = await openapiTS(OPENAPI_URL, {
+    exportType: true,
+    transform: (schemaObject, metadata) => {
+      if ('format' in schemaObject && schemaObject.format === 'binary') {
+        return schemaObject.nullable ? 'Blob | null' : 'Blob';
+      }
+    },
+  });
+  fs.writeFileSync(OUTPUT_FILE, types);
+  process.stdout.write(` OK!\r\n`);
+}
+
+main();

invokeai/frontend/web/src/services/api/schema.d.ts

@@ -75,25 +75,37 @@ export type paths = {
      * @description Gets a list of models
      */
     get: operations["list_models"];
-    /**
-     * Update Model 
-     * @description Add Model
-     */
-    post: operations["update_model"];
-  };
-  "/api/v1/models/import": {
     /**
      * Import Model 
      * @description Add a model using its local path, repo_id, or remote URL
      */
     post: operations["import_model"];
   };
-  "/api/v1/models/{model_name}": {
+  "/api/v1/models/{base_model}/{model_type}/{model_name}": {
     /**
      * Delete Model 
      * @description Delete Model
      */
     delete: operations["del_model"];
+    /**
+     * Update Model 
+     * @description Add Model
+     */
+    patch: operations["update_model"];
+  };
+  "/api/v1/models/convert/{base_model}/{model_type}/{model_name}": {
+    /**
+     * Convert Model 
+     * @description Convert a checkpoint model into a diffusers model
+     */
+    put: operations["convert_model"];
+  };
+  "/api/v1/models/merge/{base_model}": {
+    /**
+     * Merge Models 
+     * @description Convert a checkpoint model into a diffusers model
+     */
+    put: operations["merge_models"];
   };
   "/api/v1/images/": {
     /**
@@ -234,23 +246,6 @@ export type components = {
        */
       b?: number;
     };
-    /** AddModelResult */
-    AddModelResult: {
-      /**
-       * Name 
-       * @description The name of the model after import
-       */
-      name: string;
-      /** @description The type of model */
-      model_type: components["schemas"]["ModelType"];
-      /** @description The base model */
-      base_model: components["schemas"]["BaseModelType"];
-      /**
-       * Config 
-       * @description The configuration of the model
-       */
-      config: components["schemas"]["ModelConfigBase"];
-    };
     /**
      * BaseModelType 
      * @description An enumeration. 
@@ -324,6 +319,48 @@ export type components = {
        */
       image_name: string;
     };
+    /** Body_import_model */
+    Body_import_model: {
+      /**
+       * Location 
+       * @description A model path, repo_id or URL to import
+       */
+      location: string;
+      /**
+       * Prediction Type 
+       * @description Prediction type for SDv2 checkpoint files 
+       * @default v_prediction 
+       * @enum {string}
+       */
+      prediction_type?: "v_prediction" | "epsilon" | "sample";
+    };
+    /** Body_merge_models */
+    Body_merge_models: {
+      /**
+       * Model Names 
+       * @description model name
+       */
+      model_names: (string)[];
+      /**
+       * Merged Model Name 
+       * @description Name of destination model
+       */
+      merged_model_name: string;
+      /**
+       * Alpha 
+       * @description Alpha weighting strength to apply to 2d and 3d models 
+       * @default 0.5
+       */
+      alpha?: number;
+      /** @description Interpolation method */
+      interp: components["schemas"]["MergeInterpolationMethod"];
+      /**
+       * Force 
+       * @description Force merging of models created with different versions of diffusers 
+       * @default false
+       */
+      force?: boolean;
+    };
     /** Body_remove_board_image */
     Body_remove_board_image: {
       /**
@@ -343,7 +380,7 @@ export type components = {
        * File 
        * Format: binary
        */
-      file: string;
+      file: Blob;
     };
     /**
      * CannyImageProcessorInvocation 
@@ -385,55 +422,6 @@ export type components = {
        */
       high_threshold?: number;
     };
-    /** CkptModelInfo */
-    CkptModelInfo: {
-      /**
-       * Description 
-       * @description A description of the model
-       */
-      description?: string;
-      /**
-       * Model Name 
-       * @description The name of the model
-       */
-      model_name: string;
-      /**
-       * Model Type 
-       * @description The type of the model
-       */
-      model_type: string;
-      /**
-       * Format 
-       * @default ckpt 
-       * @enum {string}
-       */
-      format?: "ckpt";
-      /**
-       * Config 
-       * @description The path to the model config
-       */
-      config: string;
-      /**
-       * Weights 
-       * @description The path to the model weights
-       */
-      weights: string;
-      /**
-       * Vae 
-       * @description The path to the model VAE
-       */
-      vae: string;
-      /**
-       * Width 
-       * @description The width of the model
-       */
-      width?: number;
-      /**
-       * Height 
-       * @description The height of the model
-       */
-      height?: number;
-    };
     /** ClipField */
     ClipField: {
       /**
@@ -836,19 +824,6 @@ export type components = {
        */
       control?: components["schemas"]["ControlField"];
     };
-    /** CreateModelRequest */
-    CreateModelRequest: {
-      /**
-       * Name 
-       * @description The name of the model
-       */
-      name: string;
-      /**
-       * Info 
-       * @description The model info
-       */
-      info: components["schemas"]["CkptModelInfo"] | components["schemas"]["DiffusersModelInfo"];
-    };
     /**
      * CvInpaintInvocation 
      * @description Simple inpaint using opencv.
@@ -882,45 +857,6 @@ export type components = {
        */
       mask?: components["schemas"]["ImageField"];
     };
-    /** DiffusersModelInfo */
-    DiffusersModelInfo: {
-      /**
-       * Description 
-       * @description A description of the model
-       */
-      description?: string;
-      /**
-       * Model Name 
-       * @description The name of the model
-       */
-      model_name: string;
-      /**
-       * Model Type 
-       * @description The type of the model
-       */
-      model_type: string;
-      /**
-       * Format 
-       * @default folder 
-       * @enum {string}
-       */
-      format?: "folder";
-      /**
-       * Vae 
-       * @description The VAE repo to use for this model
-       */
-      vae?: components["schemas"]["VaeRepo"];
-      /**
-       * Repo Id 
-       * @description The repo ID to use for this model
-       */
-      repo_id?: string;
-      /**
-       * Path 
-       * @description The path to the model
-       */
-      path?: string;
-    };
     /**
      * DivideInvocation 
      * @description Divides two numbers
@@ -1110,7 +1046,7 @@ export type components = {
        * @description The nodes in this graph
        */
       nodes?: {
-        [key: string]: (components["schemas"]["RangeInvocation"] | components["schemas"]["RangeOfSizeInvocation"] | components["schemas"]["RandomRangeInvocation"] | components["schemas"]["ImageCollectionInvocation"] | components["schemas"]["MainModelLoaderInvocation"] | components["schemas"]["LoraLoaderInvocation"] | components["schemas"]["VaeLoaderInvocation"] | components["schemas"]["CompelInvocation"] | components["schemas"]["ClipSkipInvocation"] | components["schemas"]["LoadImageInvocation"] | components["schemas"]["ShowImageInvocation"] | components["schemas"]["ImageCropInvocation"] | components["schemas"]["ImagePasteInvocation"] | components["schemas"]["MaskFromAlphaInvocation"] | components["schemas"]["ImageMultiplyInvocation"] | components["schemas"]["ImageChannelInvocation"] | components["schemas"]["ImageConvertInvocation"] | components["schemas"]["ImageBlurInvocation"] | components["schemas"]["ImageResizeInvocation"] | components["schemas"]["ImageScaleInvocation"] | components["schemas"]["ImageLerpInvocation"] | components["schemas"]["ImageInverseLerpInvocation"] | components["schemas"]["ControlNetInvocation"] | components["schemas"]["ImageProcessorInvocation"] | components["schemas"]["CvInpaintInvocation"] | components["schemas"]["TextToLatentsInvocation"] | components["schemas"]["LatentsToImageInvocation"] | components["schemas"]["ResizeLatentsInvocation"] | components["schemas"]["ScaleLatentsInvocation"] | components["schemas"]["ImageToLatentsInvocation"] | components["schemas"]["InpaintInvocation"] | components["schemas"]["InfillColorInvocation"] | components["schemas"]["InfillTileInvocation"] | components["schemas"]["InfillPatchMatchInvocation"] | components["schemas"]["AddInvocation"] | components["schemas"]["SubtractInvocation"] | components["schemas"]["MultiplyInvocation"] | components["schemas"]["DivideInvocation"] | components["schemas"]["RandomIntInvocation"] | components["schemas"]["NoiseInvocation"] | components["schemas"]["ParamIntInvocation"] | components["schemas"]["ParamFloatInvocation"] | components["schemas"]["FloatLinearRangeInvocation"] | components["schemas"]["StepParamEasingInvocation"] | components["schemas"]["DynamicPromptInvocation"] | components["schemas"]["RestoreFaceInvocation"] | components["schemas"]["UpscaleInvocation"] | components["schemas"]["GraphInvocation"] | components["schemas"]["IterateInvocation"] | components["schemas"]["CollectInvocation"] | components["schemas"]["CannyImageProcessorInvocation"] | components["schemas"]["HedImageProcessorInvocation"] | components["schemas"]["LineartImageProcessorInvocation"] | components["schemas"]["LineartAnimeImageProcessorInvocation"] | components["schemas"]["OpenposeImageProcessorInvocation"] | components["schemas"]["MidasDepthImageProcessorInvocation"] | components["schemas"]["NormalbaeImageProcessorInvocation"] | components["schemas"]["MlsdImageProcessorInvocation"] | components["schemas"]["PidiImageProcessorInvocation"] | components["schemas"]["ContentShuffleImageProcessorInvocation"] | components["schemas"]["ZoeDepthImageProcessorInvocation"] | components["schemas"]["MediapipeFaceProcessorInvocation"] | components["schemas"]["LeresImageProcessorInvocation"] | components["schemas"]["TileResamplerProcessorInvocation"] | components["schemas"]["SegmentAnythingProcessorInvocation"] | components["schemas"]["LatentsToLatentsInvocation"]) | undefined;
+        [key: string]: (components["schemas"]["LoadImageInvocation"] | components["schemas"]["ShowImageInvocation"] | components["schemas"]["ImageCropInvocation"] | components["schemas"]["ImagePasteInvocation"] | components["schemas"]["MaskFromAlphaInvocation"] | components["schemas"]["ImageMultiplyInvocation"] | components["schemas"]["ImageChannelInvocation"] | components["schemas"]["ImageConvertInvocation"] | components["schemas"]["ImageBlurInvocation"] | components["schemas"]["ImageResizeInvocation"] | components["schemas"]["ImageScaleInvocation"] | components["schemas"]["ImageLerpInvocation"] | components["schemas"]["ImageInverseLerpInvocation"] | components["schemas"]["ControlNetInvocation"] | components["schemas"]["ImageProcessorInvocation"] | components["schemas"]["MainModelLoaderInvocation"] | components["schemas"]["LoraLoaderInvocation"] | components["schemas"]["VaeLoaderInvocation"] | components["schemas"]["DynamicPromptInvocation"] | components["schemas"]["CompelInvocation"] | components["schemas"]["ClipSkipInvocation"] | components["schemas"]["AddInvocation"] | components["schemas"]["SubtractInvocation"] | components["schemas"]["MultiplyInvocation"] | components["schemas"]["DivideInvocation"] | components["schemas"]["RandomIntInvocation"] | components["schemas"]["ParamIntInvocation"] | components["schemas"]["ParamFloatInvocation"] | components["schemas"]["TextToLatentsInvocation"] | components["schemas"]["LatentsToImageInvocation"] | components["schemas"]["ResizeLatentsInvocation"] | components["schemas"]["ScaleLatentsInvocation"] | components["schemas"]["ImageToLatentsInvocation"] | components["schemas"]["CvInpaintInvocation"] | components["schemas"]["RangeInvocation"] | components["schemas"]["RangeOfSizeInvocation"] | components["schemas"]["RandomRangeInvocation"] | components["schemas"]["ImageCollectionInvocation"] | components["schemas"]["FloatLinearRangeInvocation"] | components["schemas"]["StepParamEasingInvocation"] | components["schemas"]["NoiseInvocation"] | components["schemas"]["UpscaleInvocation"] | components["schemas"]["RestoreFaceInvocation"] | components["schemas"]["InpaintInvocation"] | components["schemas"]["InfillColorInvocation"] | components["schemas"]["InfillTileInvocation"] | components["schemas"]["InfillPatchMatchInvocation"] | components["schemas"]["GraphInvocation"] | components["schemas"]["IterateInvocation"] | components["schemas"]["CollectInvocation"] | components["schemas"]["CannyImageProcessorInvocation"] | components["schemas"]["HedImageProcessorInvocation"] | components["schemas"]["LineartImageProcessorInvocation"] | components["schemas"]["LineartAnimeImageProcessorInvocation"] | components["schemas"]["OpenposeImageProcessorInvocation"] | components["schemas"]["MidasDepthImageProcessorInvocation"] | components["schemas"]["NormalbaeImageProcessorInvocation"] | components["schemas"]["MlsdImageProcessorInvocation"] | components["schemas"]["PidiImageProcessorInvocation"] | components["schemas"]["ContentShuffleImageProcessorInvocation"] | components["schemas"]["ZoeDepthImageProcessorInvocation"] | components["schemas"]["MediapipeFaceProcessorInvocation"] | components["schemas"]["LeresImageProcessorInvocation"] | components["schemas"]["TileResamplerProcessorInvocation"] | components["schemas"]["SegmentAnythingProcessorInvocation"] | components["schemas"]["LatentsToLatentsInvocation"]) | undefined;
       };
       /**
        * Edges 
@@ -1153,7 +1089,7 @@ export type components = {
        * @description The results of node executions
        */
       results: {
-        [key: string]: (components["schemas"]["IntCollectionOutput"] | components["schemas"]["FloatCollectionOutput"] | components["schemas"]["ImageCollectionOutput"] | components["schemas"]["ModelLoaderOutput"] | components["schemas"]["LoraLoaderOutput"] | components["schemas"]["VaeLoaderOutput"] | components["schemas"]["CompelOutput"] | components["schemas"]["ClipSkipInvocationOutput"] | components["schemas"]["ImageOutput"] | components["schemas"]["MaskOutput"] | components["schemas"]["ControlOutput"] | components["schemas"]["LatentsOutput"] | components["schemas"]["IntOutput"] | components["schemas"]["FloatOutput"] | components["schemas"]["NoiseOutput"] | components["schemas"]["PromptOutput"] | components["schemas"]["PromptCollectionOutput"] | components["schemas"]["GraphInvocationOutput"] | components["schemas"]["IterateInvocationOutput"] | components["schemas"]["CollectInvocationOutput"]) | undefined;
+        [key: string]: (components["schemas"]["ImageOutput"] | components["schemas"]["MaskOutput"] | components["schemas"]["ControlOutput"] | components["schemas"]["ModelLoaderOutput"] | components["schemas"]["LoraLoaderOutput"] | components["schemas"]["VaeLoaderOutput"] | components["schemas"]["PromptOutput"] | components["schemas"]["PromptCollectionOutput"] | components["schemas"]["CompelOutput"] | components["schemas"]["ClipSkipInvocationOutput"] | components["schemas"]["IntOutput"] | components["schemas"]["FloatOutput"] | components["schemas"]["LatentsOutput"] | components["schemas"]["IntCollectionOutput"] | components["schemas"]["FloatCollectionOutput"] | components["schemas"]["ImageCollectionOutput"] | components["schemas"]["NoiseOutput"] | components["schemas"]["GraphInvocationOutput"] | components["schemas"]["IterateInvocationOutput"] | components["schemas"]["CollectInvocationOutput"]) | undefined;
       };
       /**
        * Errors 
@@ -2055,24 +1991,6 @@ export type components = {
        */
       thumbnail_url: string;
     };
-    /** ImportModelResponse */
-    ImportModelResponse: {
-      /**
-       * Name 
-       * @description The name of the imported model
-       */
-      name: string;
-      /**
-       * Info 
-       * @description The model info
-       */
-      info: components["schemas"]["AddModelResult"];
-      /**
-       * Status 
-       * @description The status of the API response
-       */
-      status: string;
-    };
     /**
      * InfillColorInvocation 
      * @description Infills transparent areas of an image with a solid color
@@ -3020,6 +2938,12 @@ export type components = {
        */
       min_confidence?: number;
     };
+    /**
+     * MergeInterpolationMethod 
+     * @description An enumeration. 
+     * @enum {string}
+     */
+    MergeInterpolationMethod: "weighted_sum" | "sigmoid" | "inv_sigmoid" | "add_difference";
     /**
      * MidasDepthImageProcessorInvocation 
      * @description Applies Midas depth processing to image
@@ -3112,16 +3036,6 @@ export type components = {
        */
       thr_d?: number;
     };
-    /** ModelConfigBase */
-    ModelConfigBase: {
-      /** Path */
-      path: string;
-      /** Description */
-      description?: string;
-      /** Model Format */
-      model_format?: string;
-      error?: components["schemas"]["ModelError"];
-    };
     /**
      * ModelError 
      * @description An enumeration. 
@@ -3184,7 +3098,7 @@ export type components = {
     /** ModelsList */
     ModelsList: {
       /** Models */
-      models: (components["schemas"]["StableDiffusion1ModelDiffusersConfig"] | components["schemas"]["StableDiffusion1ModelCheckpointConfig"] | components["schemas"]["VaeModelConfig"] | components["schemas"]["LoRAModelConfig"] | components["schemas"]["ControlNetModelConfig"] | components["schemas"]["TextualInversionModelConfig"] | components["schemas"]["StableDiffusion2ModelDiffusersConfig"] | components["schemas"]["StableDiffusion2ModelCheckpointConfig"])[];
+      models: (components["schemas"]["StableDiffusion1ModelDiffusersConfig"] | components["schemas"]["StableDiffusion1ModelCheckpointConfig"] | components["schemas"]["VaeModelConfig"] | components["schemas"]["LoRAModelConfig"] | components["schemas"]["ControlNetModelConfig"] | components["schemas"]["TextualInversionModelConfig"] | components["schemas"]["StableDiffusion2ModelCheckpointConfig"] | components["schemas"]["StableDiffusion2ModelDiffusersConfig"])[];
     };
     /**
      * MultiplyInvocation 
@@ -4462,24 +4376,6 @@ export type components = {
      * @enum {string}
      */
     VaeModelFormat: "checkpoint" | "diffusers";
-    /** VaeRepo */
-    VaeRepo: {
-      /**
-       * Repo Id 
-       * @description The repo ID to use for this VAE
-       */
-      repo_id: string;
-      /**
-       * Path 
-       * @description The path to the VAE
-       */
-      path?: string;
-      /**
-       * Subfolder 
-       * @description The subfolder to use for this VAE
-       */
-      subfolder?: string;
-    };
     /** ValidationError */
     ValidationError: {
       /** Location */
@@ -4517,18 +4413,18 @@ export type components = {
        */
       image?: components["schemas"]["ImageField"];
     };
-    /**
-     * StableDiffusion1ModelFormat 
-     * @description An enumeration. 
-     * @enum {string}
-     */
-    StableDiffusion1ModelFormat: "checkpoint" | "diffusers";
     /**
      * StableDiffusion2ModelFormat 
      * @description An enumeration. 
      * @enum {string}
      */
     StableDiffusion2ModelFormat: "checkpoint" | "diffusers";
+    /**
+     * StableDiffusion1ModelFormat 
+     * @description An enumeration. 
+     * @enum {string}
+     */
+    StableDiffusion1ModelFormat: "checkpoint" | "diffusers";
   };
   responses: never;
   parameters: never;
@@ -4639,7 +4535,7 @@ export type operations = {
     };
     requestBody: {
       content: {
-        "application/json": components["schemas"]["RangeInvocation"] | components["schemas"]["RangeOfSizeInvocation"] | components["schemas"]["RandomRangeInvocation"] | components["schemas"]["ImageCollectionInvocation"] | components["schemas"]["MainModelLoaderInvocation"] | components["schemas"]["LoraLoaderInvocation"] | components["schemas"]["VaeLoaderInvocation"] | components["schemas"]["CompelInvocation"] | components["schemas"]["ClipSkipInvocation"] | components["schemas"]["LoadImageInvocation"] | components["schemas"]["ShowImageInvocation"] | components["schemas"]["ImageCropInvocation"] | components["schemas"]["ImagePasteInvocation"] | components["schemas"]["MaskFromAlphaInvocation"] | components["schemas"]["ImageMultiplyInvocation"] | components["schemas"]["ImageChannelInvocation"] | components["schemas"]["ImageConvertInvocation"] | components["schemas"]["ImageBlurInvocation"] | components["schemas"]["ImageResizeInvocation"] | components["schemas"]["ImageScaleInvocation"] | components["schemas"]["ImageLerpInvocation"] | components["schemas"]["ImageInverseLerpInvocation"] | components["schemas"]["ControlNetInvocation"] | components["schemas"]["ImageProcessorInvocation"] | components["schemas"]["CvInpaintInvocation"] | components["schemas"]["TextToLatentsInvocation"] | components["schemas"]["LatentsToImageInvocation"] | components["schemas"]["ResizeLatentsInvocation"] | components["schemas"]["ScaleLatentsInvocation"] | components["schemas"]["ImageToLatentsInvocation"] | components["schemas"]["InpaintInvocation"] | components["schemas"]["InfillColorInvocation"] | components["schemas"]["InfillTileInvocation"] | components["schemas"]["InfillPatchMatchInvocation"] | components["schemas"]["AddInvocation"] | components["schemas"]["SubtractInvocation"] | components["schemas"]["MultiplyInvocation"] | components["schemas"]["DivideInvocation"] | components["schemas"]["RandomIntInvocation"] | components["schemas"]["NoiseInvocation"] | components["schemas"]["ParamIntInvocation"] | components["schemas"]["ParamFloatInvocation"] | components["schemas"]["FloatLinearRangeInvocation"] | components["schemas"]["StepParamEasingInvocation"] | components["schemas"]["DynamicPromptInvocation"] | components["schemas"]["RestoreFaceInvocation"] | components["schemas"]["UpscaleInvocation"] | components["schemas"]["GraphInvocation"] | components["schemas"]["IterateInvocation"] | components["schemas"]["CollectInvocation"] | components["schemas"]["CannyImageProcessorInvocation"] | components["schemas"]["HedImageProcessorInvocation"] | components["schemas"]["LineartImageProcessorInvocation"] | components["schemas"]["LineartAnimeImageProcessorInvocation"] | components["schemas"]["OpenposeImageProcessorInvocation"] | components["schemas"]["MidasDepthImageProcessorInvocation"] | components["schemas"]["NormalbaeImageProcessorInvocation"] | components["schemas"]["MlsdImageProcessorInvocation"] | components["schemas"]["PidiImageProcessorInvocation"] | components["schemas"]["ContentShuffleImageProcessorInvocation"] | components["schemas"]["ZoeDepthImageProcessorInvocation"] | components["schemas"]["MediapipeFaceProcessorInvocation"] | components["schemas"]["LeresImageProcessorInvocation"] | components["schemas"]["TileResamplerProcessorInvocation"] | components["schemas"]["SegmentAnythingProcessorInvocation"] | components["schemas"]["LatentsToLatentsInvocation"];
+        "application/json": components["schemas"]["LoadImageInvocation"] | components["schemas"]["ShowImageInvocation"] | components["schemas"]["ImageCropInvocation"] | components["schemas"]["ImagePasteInvocation"] | components["schemas"]["MaskFromAlphaInvocation"] | components["schemas"]["ImageMultiplyInvocation"] | components["schemas"]["ImageChannelInvocation"] | components["schemas"]["ImageConvertInvocation"] | components["schemas"]["ImageBlurInvocation"] | components["schemas"]["ImageResizeInvocation"] | components["schemas"]["ImageScaleInvocation"] | components["schemas"]["ImageLerpInvocation"] | components["schemas"]["ImageInverseLerpInvocation"] | components["schemas"]["ControlNetInvocation"] | components["schemas"]["ImageProcessorInvocation"] | components["schemas"]["MainModelLoaderInvocation"] | components["schemas"]["LoraLoaderInvocation"] | components["schemas"]["VaeLoaderInvocation"] | components["schemas"]["DynamicPromptInvocation"] | components["schemas"]["CompelInvocation"] | components["schemas"]["ClipSkipInvocation"] | components["schemas"]["AddInvocation"] | components["schemas"]["SubtractInvocation"] | components["schemas"]["MultiplyInvocation"] | components["schemas"]["DivideInvocation"] | components["schemas"]["RandomIntInvocation"] | components["schemas"]["ParamIntInvocation"] | components["schemas"]["ParamFloatInvocation"] | components["schemas"]["TextToLatentsInvocation"] | components["schemas"]["LatentsToImageInvocation"] | components["schemas"]["ResizeLatentsInvocation"] | components["schemas"]["ScaleLatentsInvocation"] | components["schemas"]["ImageToLatentsInvocation"] | components["schemas"]["CvInpaintInvocation"] | components["schemas"]["RangeInvocation"] | components["schemas"]["RangeOfSizeInvocation"] | components["schemas"]["RandomRangeInvocation"] | components["schemas"]["ImageCollectionInvocation"] | components["schemas"]["FloatLinearRangeInvocation"] | components["schemas"]["StepParamEasingInvocation"] | components["schemas"]["NoiseInvocation"] | components["schemas"]["UpscaleInvocation"] | components["schemas"]["RestoreFaceInvocation"] | components["schemas"]["InpaintInvocation"] | components["schemas"]["InfillColorInvocation"] | components["schemas"]["InfillTileInvocation"] | components["schemas"]["InfillPatchMatchInvocation"] | components["schemas"]["GraphInvocation"] | components["schemas"]["IterateInvocation"] | components["schemas"]["CollectInvocation"] | components["schemas"]["CannyImageProcessorInvocation"] | components["schemas"]["HedImageProcessorInvocation"] | components["schemas"]["LineartImageProcessorInvocation"] | components["schemas"]["LineartAnimeImageProcessorInvocation"] | components["schemas"]["OpenposeImageProcessorInvocation"] | components["schemas"]["MidasDepthImageProcessorInvocation"] | components["schemas"]["NormalbaeImageProcessorInvocation"] | components["schemas"]["MlsdImageProcessorInvocation"] | components["schemas"]["PidiImageProcessorInvocation"] | components["schemas"]["ContentShuffleImageProcessorInvocation"] | components["schemas"]["ZoeDepthImageProcessorInvocation"] | components["schemas"]["MediapipeFaceProcessorInvocation"] | components["schemas"]["LeresImageProcessorInvocation"] | components["schemas"]["TileResamplerProcessorInvocation"] | components["schemas"]["SegmentAnythingProcessorInvocation"] | components["schemas"]["LatentsToLatentsInvocation"];
       };
     };
     responses: {
@@ -4676,7 +4572,7 @@ export type operations = {
     };
     requestBody: {
       content: {
-        "application/json": components["schemas"]["RangeInvocation"] | components["schemas"]["RangeOfSizeInvocation"] | components["schemas"]["RandomRangeInvocation"] | components["schemas"]["ImageCollectionInvocation"] | components["schemas"]["MainModelLoaderInvocation"] | components["schemas"]["LoraLoaderInvocation"] | components["schemas"]["VaeLoaderInvocation"] | components["schemas"]["CompelInvocation"] | components["schemas"]["ClipSkipInvocation"] | components["schemas"]["LoadImageInvocation"] | components["schemas"]["ShowImageInvocation"] | components["schemas"]["ImageCropInvocation"] | components["schemas"]["ImagePasteInvocation"] | components["schemas"]["MaskFromAlphaInvocation"] | components["schemas"]["ImageMultiplyInvocation"] | components["schemas"]["ImageChannelInvocation"] | components["schemas"]["ImageConvertInvocation"] | components["schemas"]["ImageBlurInvocation"] | components["schemas"]["ImageResizeInvocation"] | components["schemas"]["ImageScaleInvocation"] | components["schemas"]["ImageLerpInvocation"] | components["schemas"]["ImageInverseLerpInvocation"] | components["schemas"]["ControlNetInvocation"] | components["schemas"]["ImageProcessorInvocation"] | components["schemas"]["CvInpaintInvocation"] | components["schemas"]["TextToLatentsInvocation"] | components["schemas"]["LatentsToImageInvocation"] | components["schemas"]["ResizeLatentsInvocation"] | components["schemas"]["ScaleLatentsInvocation"] | components["schemas"]["ImageToLatentsInvocation"] | components["schemas"]["InpaintInvocation"] | components["schemas"]["InfillColorInvocation"] | components["schemas"]["InfillTileInvocation"] | components["schemas"]["InfillPatchMatchInvocation"] | components["schemas"]["AddInvocation"] | components["schemas"]["SubtractInvocation"] | components["schemas"]["MultiplyInvocation"] | components["schemas"]["DivideInvocation"] | components["schemas"]["RandomIntInvocation"] | components["schemas"]["NoiseInvocation"] | components["schemas"]["ParamIntInvocation"] | components["schemas"]["ParamFloatInvocation"] | components["schemas"]["FloatLinearRangeInvocation"] | components["schemas"]["StepParamEasingInvocation"] | components["schemas"]["DynamicPromptInvocation"] | components["schemas"]["RestoreFaceInvocation"] | components["schemas"]["UpscaleInvocation"] | components["schemas"]["GraphInvocation"] | components["schemas"]["IterateInvocation"] | components["schemas"]["CollectInvocation"] | components["schemas"]["CannyImageProcessorInvocation"] | components["schemas"]["HedImageProcessorInvocation"] | components["schemas"]["LineartImageProcessorInvocation"] | components["schemas"]["LineartAnimeImageProcessorInvocation"] | components["schemas"]["OpenposeImageProcessorInvocation"] | components["schemas"]["MidasDepthImageProcessorInvocation"] | components["schemas"]["NormalbaeImageProcessorInvocation"] | components["schemas"]["MlsdImageProcessorInvocation"] | components["schemas"]["PidiImageProcessorInvocation"] | components["schemas"]["ContentShuffleImageProcessorInvocation"] | components["schemas"]["ZoeDepthImageProcessorInvocation"] | components["schemas"]["MediapipeFaceProcessorInvocation"] | components["schemas"]["LeresImageProcessorInvocation"] | components["schemas"]["TileResamplerProcessorInvocation"] | components["schemas"]["SegmentAnythingProcessorInvocation"] | components["schemas"]["LatentsToLatentsInvocation"];
+        "application/json": components["schemas"]["LoadImageInvocation"] | components["schemas"]["ShowImageInvocation"] | components["schemas"]["ImageCropInvocation"] | components["schemas"]["ImagePasteInvocation"] | components["schemas"]["MaskFromAlphaInvocation"] | components["schemas"]["ImageMultiplyInvocation"] | components["schemas"]["ImageChannelInvocation"] | components["schemas"]["ImageConvertInvocation"] | components["schemas"]["ImageBlurInvocation"] | components["schemas"]["ImageResizeInvocation"] | components["schemas"]["ImageScaleInvocation"] | components["schemas"]["ImageLerpInvocation"] | components["schemas"]["ImageInverseLerpInvocation"] | components["schemas"]["ControlNetInvocation"] | components["schemas"]["ImageProcessorInvocation"] | components["schemas"]["MainModelLoaderInvocation"] | components["schemas"]["LoraLoaderInvocation"] | components["schemas"]["VaeLoaderInvocation"] | components["schemas"]["DynamicPromptInvocation"] | components["schemas"]["CompelInvocation"] | components["schemas"]["ClipSkipInvocation"] | components["schemas"]["AddInvocation"] | components["schemas"]["SubtractInvocation"] | components["schemas"]["MultiplyInvocation"] | components["schemas"]["DivideInvocation"] | components["schemas"]["RandomIntInvocation"] | components["schemas"]["ParamIntInvocation"] | components["schemas"]["ParamFloatInvocation"] | components["schemas"]["TextToLatentsInvocation"] | components["schemas"]["LatentsToImageInvocation"] | components["schemas"]["ResizeLatentsInvocation"] | components["schemas"]["ScaleLatentsInvocation"] | components["schemas"]["ImageToLatentsInvocation"] | components["schemas"]["CvInpaintInvocation"] | components["schemas"]["RangeInvocation"] | components["schemas"]["RangeOfSizeInvocation"] | components["schemas"]["RandomRangeInvocation"] | components["schemas"]["ImageCollectionInvocation"] | components["schemas"]["FloatLinearRangeInvocation"] | components["schemas"]["StepParamEasingInvocation"] | components["schemas"]["NoiseInvocation"] | components["schemas"]["UpscaleInvocation"] | components["schemas"]["RestoreFaceInvocation"] | components["schemas"]["InpaintInvocation"] | components["schemas"]["InfillColorInvocation"] | components["schemas"]["InfillTileInvocation"] | components["schemas"]["InfillPatchMatchInvocation"] | components["schemas"]["GraphInvocation"] | components["schemas"]["IterateInvocation"] | components["schemas"]["CollectInvocation"] | components["schemas"]["CannyImageProcessorInvocation"] | components["schemas"]["HedImageProcessorInvocation"] | components["schemas"]["LineartImageProcessorInvocation"] | components["schemas"]["LineartAnimeImageProcessorInvocation"] | components["schemas"]["OpenposeImageProcessorInvocation"] | components["schemas"]["MidasDepthImageProcessorInvocation"] | components["schemas"]["NormalbaeImageProcessorInvocation"] | components["schemas"]["MlsdImageProcessorInvocation"] | components["schemas"]["PidiImageProcessorInvocation"] | components["schemas"]["ContentShuffleImageProcessorInvocation"] | components["schemas"]["ZoeDepthImageProcessorInvocation"] | components["schemas"]["MediapipeFaceProcessorInvocation"] | components["schemas"]["LeresImageProcessorInvocation"] | components["schemas"]["TileResamplerProcessorInvocation"] | components["schemas"]["SegmentAnythingProcessorInvocation"] | components["schemas"]["LatentsToLatentsInvocation"];
       };
     };
     responses: {
@@ -4895,59 +4791,35 @@ export type operations = {
       };
     };
   };
-  /**
-   * Update Model 
-   * @description Add Model
-   */
-  update_model: {
-    requestBody: {
-      content: {
-        "application/json": components["schemas"]["CreateModelRequest"];
-      };
-    };
-    responses: {
-      /** @description Successful Response */
-      200: {
-        content: {
-          "application/json": unknown;
-        };
-      };
-      /** @description Validation Error */
-      422: {
-        content: {
-          "application/json": components["schemas"]["HTTPValidationError"];
-        };
-      };
-    };
-  };
   /**
    * Import Model 
    * @description Add a model using its local path, repo_id, or remote URL
    */
   import_model: {
-    parameters: {
+    requestBody: {
-      query: {
+      content: {
-        /** @description A model path, repo_id or URL to import */
+        "application/json": components["schemas"]["Body_import_model"];
-        name: string;
-        /** @description Prediction type for SDv2 checkpoint files */
-        prediction_type?: "v_prediction" | "epsilon" | "sample";
       };
     };
     responses: {
       /** @description The model imported successfully */
       201: {
         content: {
-          "application/json": components["schemas"]["ImportModelResponse"];
+          "application/json": components["schemas"]["StableDiffusion1ModelDiffusersConfig"] | components["schemas"]["StableDiffusion1ModelCheckpointConfig"] | components["schemas"]["VaeModelConfig"] | components["schemas"]["LoRAModelConfig"] | components["schemas"]["ControlNetModelConfig"] | components["schemas"]["TextualInversionModelConfig"] | components["schemas"]["StableDiffusion2ModelCheckpointConfig"] | components["schemas"]["StableDiffusion2ModelDiffusersConfig"];
         };
       };
       /** @description The model could not be found */
       404: never;
+      /** @description There is already a model corresponding to this path or repo_id */
+      409: never;
       /** @description Validation Error */
       422: {
         content: {
           "application/json": components["schemas"]["HTTPValidationError"];
         };
       };
+      /** @description The model appeared to import successfully, but could not be found in the model manager */
+      424: never;
     };
   };
   /**
@@ -4957,6 +4829,11 @@ export type operations = {
   del_model: {
     parameters: {
       path: {
+        /** @description Base model */
+        base_model: components["schemas"]["BaseModelType"];
+        /** @description The type of model */
+        model_type: components["schemas"]["ModelType"];
+        /** @description model name */
         model_name: string;
       };
     };
@@ -4979,6 +4856,114 @@ export type operations = {
       };
     };
   };
+  /**
+   * Update Model 
+   * @description Add Model
+   */
+  update_model: {
+    parameters: {
+      path: {
+        /** @description Base model */
+        base_model: components["schemas"]["BaseModelType"];
+        /** @description The type of model */
+        model_type: components["schemas"]["ModelType"];
+        /** @description model name */
+        model_name: string;
+      };
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["StableDiffusion1ModelDiffusersConfig"] | components["schemas"]["StableDiffusion1ModelCheckpointConfig"] | components["schemas"]["VaeModelConfig"] | components["schemas"]["LoRAModelConfig"] | components["schemas"]["ControlNetModelConfig"] | components["schemas"]["TextualInversionModelConfig"] | components["schemas"]["StableDiffusion2ModelCheckpointConfig"] | components["schemas"]["StableDiffusion2ModelDiffusersConfig"];
+      };
+    };
+    responses: {
+      /** @description The model was updated successfully */
+      200: {
+        content: {
+          "application/json": components["schemas"]["StableDiffusion1ModelDiffusersConfig"] | components["schemas"]["StableDiffusion1ModelCheckpointConfig"] | components["schemas"]["VaeModelConfig"] | components["schemas"]["LoRAModelConfig"] | components["schemas"]["ControlNetModelConfig"] | components["schemas"]["TextualInversionModelConfig"] | components["schemas"]["StableDiffusion2ModelCheckpointConfig"] | components["schemas"]["StableDiffusion2ModelDiffusersConfig"];
+        };
+      };
+      /** @description Bad request */
+      400: never;
+      /** @description The model could not be found */
+      404: never;
+      /** @description Validation Error */
+      422: {
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+    };
+  };
+  /**
+   * Convert Model 
+   * @description Convert a checkpoint model into a diffusers model
+   */
+  convert_model: {
+    parameters: {
+      path: {
+        /** @description Base model */
+        base_model: components["schemas"]["BaseModelType"];
+        /** @description The type of model */
+        model_type: components["schemas"]["ModelType"];
+        /** @description model name */
+        model_name: string;
+      };
+    };
+    responses: {
+      /** @description Model converted successfully */
+      200: {
+        content: {
+          "application/json": components["schemas"]["StableDiffusion1ModelDiffusersConfig"] | components["schemas"]["StableDiffusion1ModelCheckpointConfig"] | components["schemas"]["VaeModelConfig"] | components["schemas"]["LoRAModelConfig"] | components["schemas"]["ControlNetModelConfig"] | components["schemas"]["TextualInversionModelConfig"] | components["schemas"]["StableDiffusion2ModelCheckpointConfig"] | components["schemas"]["StableDiffusion2ModelDiffusersConfig"];
+        };
+      };
+      /** @description Bad request */
+      400: never;
+      /** @description Model not found */
+      404: never;
+      /** @description Validation Error */
+      422: {
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+    };
+  };
+  /**
+   * Merge Models 
+   * @description Convert a checkpoint model into a diffusers model
+   */
+  merge_models: {
+    parameters: {
+      path: {
+        /** @description Base model */
+        base_model: components["schemas"]["BaseModelType"];
+      };
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["Body_merge_models"];
+      };
+    };
+    responses: {
+      /** @description Model converted successfully */
+      200: {
+        content: {
+          "application/json": components["schemas"]["StableDiffusion1ModelDiffusersConfig"] | components["schemas"]["StableDiffusion1ModelCheckpointConfig"] | components["schemas"]["VaeModelConfig"] | components["schemas"]["LoRAModelConfig"] | components["schemas"]["ControlNetModelConfig"] | components["schemas"]["TextualInversionModelConfig"] | components["schemas"]["StableDiffusion2ModelCheckpointConfig"] | components["schemas"]["StableDiffusion2ModelDiffusersConfig"];
+        };
+      };
+      /** @description Incompatible models */
+      400: never;
+      /** @description One or more models not found */
+      404: never;
+      /** @description Validation Error */
+      422: {
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+    };
+  };
   /**
    * List Images With Metadata 
    * @description Gets a list of images

invokeai/frontend/web/src/services/api/thunks/image.ts

@@ -157,8 +157,6 @@ export const imageUploaded = createAppAsyncThunk<
     session_id,
   } = arg;
   const { post } = $client.get();
-  const formData = new FormData();
-  formData.append('file', file);
   const { data, error, response } = await post('/api/v1/images/', {
     params: {
       query: {
@@ -167,10 +165,12 @@ export const imageUploaded = createAppAsyncThunk<
         session_id,
       },
     },
-    // TODO: Proper handling of `multipart/form-data` is coming soon, will fix type issues
+    body: { file },
-    // https://github.com/drwpow/openapi-typescript/issues/1123
+    bodySerializer: (body) => {
-    // @ts-ignore
+      const formData = new FormData();
-    body: formData,
+      formData.append('file', body.file);
+      return formData;
+    },
   });
 
   if (error) {

invokeai/frontend/web/tsconfig.json

@@ -23,5 +23,11 @@
   },
   "include": ["src/**/*.ts", "src/**/*.tsx", "*.d.ts"],
   "exclude": ["src/services/fixtures/*", "node_modules", "dist"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "references": [{ "path": "./tsconfig.node.json" }],
+  "ts-node": {
+    "compilerOptions": {
+      "jsx": "preserve"
+    },
+    "esm": true
+  }
 }

invokeai/frontend/web/yarn.lock

@@ -4941,10 +4941,10 @@ open@^8.4.0:
     is-docker "^2.1.1"
     is-wsl "^2.2.0"
 
-openapi-fetch@0.4.0:
+openapi-fetch@^0.6.1:
-  version "0.4.0"
+  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/openapi-fetch/-/openapi-fetch-0.4.0.tgz#45c368321ba6c15bc2e168e7dc3fbf322e9cca6d"
+  resolved "https://registry.yarnpkg.com/openapi-fetch/-/openapi-fetch-0.6.1.tgz#90d785ead213b82beb8f094a756ad9320ba28b32"
-  integrity sha512-4lzZtH5J1ZH9EXfmpcmKi0gOgjy0hc6BAcucAdCmLHY6jZopMeGP51vD3Cd4rE1nTFMfJzmYDc8ar0+364gBVw==
+  integrity sha512-CGWPqqtL31uC2e4eEU9NHoqYMXnJ7Jk4H/4Yguil4tO22MIZi91hlQJ/51E8CiaKdSTODh03yF4ndjIOABVHUw==
 
 openapi-types@^12.1.3:
   version "12.1.3"