feat: add tiled VAE parameter to client

api/onnx_web/params.py

@@ -398,12 +398,14 @@ class HighresParams:
         strength: float,
         method: Literal["bilinear", "lanczos", "upscale"] = "lanczos",
         iterations: int = 1,
+        tiled_vae: bool = False,
     ):
         self.scale = scale
         self.steps = steps
         self.strength = strength
         self.method = method
         self.iterations = iterations
+        self.tiled_vae = tiled_vae
 
     def resize(self, size: Size) -> Size:
         return Size(
@@ -418,4 +420,5 @@ class HighresParams:
             "scale": self.scale,
             "steps": self.steps,
             "strength": self.strength,
+            "tiled_vae": self.tiled_vae,
         }

api/onnx_web/server/params.py

@@ -13,7 +13,7 @@ from ..params import (
     Size,
     UpscaleParams,
 )
-from ..utils import get_and_clamp_float, get_and_clamp_int, get_from_list, get_not_empty
+from ..utils import get_and_clamp_float, get_and_clamp_int, get_boolean, get_from_list, get_not_empty
 from .context import ServerContext
 from .load import (
     get_available_platforms,
@@ -277,10 +277,13 @@ def highres_from_request() -> HighresParams:
         get_config_value("highresStrength", "min"),
     )
 
+    tiled_vae = get_boolean(request.args, "tiledVAE", get_config_value("tiledVAE"))
+
     return HighresParams(
         scale,
         steps,
         strength,
         method=method,
         iterations=iterations,
+        tiled_vae=tiled_vae,
     )

api/params.json

@@ -180,6 +180,9 @@
     "max": 1,
     "step": 0.01
   },
+  "tiledVAE": {
+    "default": false
+  },
   "tileOrder": {
     "default": "spiral",
     "keys": [

gui/Makefile

@@ -30,7 +30,7 @@ build-shebang: build
 bundle: build
 	node esbuild.js
 	cp -v src/index.html out/
-	cp -v examples/config.json out/
+	cp -v src/config.json out/
 
 COVER_OPTS := --all \
 		--exclude ".eslintrc.js" \

gui/esbuild.js

@@ -54,7 +54,7 @@ if (watch) {
         ],
         plugins: [
             ...plugins,
-            ...copyArray(['src/index.html', 'examples/config.json']),
+            ...copyArray(['src/index.html', 'src/config.json']),
         ],
         banner: {
             js: `new EventSource('/esbuild').addEventListener('change', () => location.reload());`,

gui/src/client/api.ts

@@ -160,6 +160,8 @@ export interface HighresParams {
   highresScale: number;
   highresSteps: number;
   highresStrength: number;
+
+  tiledVAE: boolean;
 }
 
 /**
@@ -453,6 +455,10 @@ export function appendUpscaleToURL(url: URL, upscale: UpscaleParams) {
 }
 
 export function appendHighresToURL(url: URL, highres: HighresParams) {
+  if (highres.tiledVAE) {
+    url.searchParams.append('tiledVAE', String(highres.tiledVAE));
+  }
+
   if (highres.enabled) {
     url.searchParams.append('highresIterations', highres.highresIterations.toFixed(FIXED_INTEGER));
     url.searchParams.append('highresMethod', highres.highresMethod);

gui/src/components/control/HighresControl.tsx

@@ -17,6 +17,18 @@ export function HighresControl() {
   const { t } = useTranslation();
 
   return <Stack direction='row' spacing={4}>
+    <FormControlLabel
+      label={t('parameter.tiledVAE')}
+      control={<Checkbox
+        checked={highres.tiledVAE}
+        value='check'
+        onChange={(event) => {
+          setHighres({
+            tiledVAE: highres.tiledVAE === false,
+          });
+        }}
+      />}
+    />
     <FormControlLabel
       label={t('parameter.highres.label')}
       control={<Checkbox
@@ -72,6 +84,7 @@ export function HighresControl() {
     <FormControl>
       <InputLabel id={'highres-method'}>{t('parameter.highres.method')}</InputLabel>
       <Select
+        disabled={highres.enabled === false}
         labelId={'highres-method'}
         label={t('parameter.highres.method')}
         value={highres.highresMethod}

gui/src/config.json

@@ -178,6 +178,9 @@
       "max": 1,
       "step": 0.01
     },
+    "tiledVAE": {
+      "default": false
+    },
     "tileOrder": {
       "default": "spiral",
       "keys": [

gui/src/config.ts

@@ -2,6 +2,10 @@ import { doesExist, Maybe } from '@apextoaster/js-utils';
 import { merge } from 'lodash';
 import { HighresParams, Img2ImgParams, InpaintParams, ModelParams, OutpaintParams, STATUS_SUCCESS, Txt2ImgParams, UpscaleParams } from './client/api.js';
 
+export interface ConfigBoolean {
+  default: boolean;
+}
+
 export interface ConfigNumber {
   default: number;
   min: number;
@@ -17,7 +21,7 @@ export interface ConfigString {
 /**
  * Helper type to filter keys whose value extends `TValid`.
  */
-export type KeyFilter<T extends object, TValid = number | string> = {
+export type KeyFilter<T extends object, TValid = boolean | number | string> = {
   [K in keyof T]: T[K] extends TValid ? K : never;
 }[keyof T];
 
@@ -32,13 +36,13 @@ export type ConfigFiles<T extends object> = {
  * Map numbers and strings to their corresponding config types and drop the rest of the fields.
  */
 export type ConfigRanges<T extends object> = {
-  [K in KeyFilter<T>]: T[K] extends number ? ConfigNumber : T[K] extends string ? ConfigString : never;
+  [K in KeyFilter<T>]: T[K] extends boolean ? ConfigBoolean : T[K] extends number ? ConfigNumber : T[K] extends string ? ConfigString : never;
 };
 
 /**
  * Keep fields whose value extends `TValid` and drop the rest.
  */
-export type ConfigState<T extends object, TValid = number | string> = {
+export type ConfigState<T extends object, TValid = boolean | number | string> = {
   [K in KeyFilter<T, TValid>]: T[K] extends TValid ? T[K] : never;
 };
 

gui/src/state.ts

@@ -447,6 +447,7 @@ export function createStateSlices(server: ServerParams) {
       highresSteps: server.highresSteps.default,
       highresScale: server.highresScale.default,
       highresStrength: server.highresStrength.default,
+      tiledVAE: server.tiledVAE.default,
     },
     setHighres(params) {
       set((prev) => ({
@@ -465,6 +466,7 @@ export function createStateSlices(server: ServerParams) {
           highresSteps: server.highresSteps.default,
           highresScale: server.highresScale.default,
           highresStrength: server.highresStrength.default,
+          tiledVAE: server.tiledVAE.default,
         },
       });
     },

gui/src/strings/de.ts

@@ -129,6 +129,7 @@ export const I18N_STRINGS_DE = {
         sourceFilter: '',
         steps: 'Schritte',
         strength: 'Stärke',
+        tiledVAE: '',
         tileOrder: '',
         upscale: {
           label: '',

gui/src/strings/en.ts

@@ -181,6 +181,7 @@ export const I18N_STRINGS_EN = {
         sourceFilter: 'Source Filter',
         steps: 'Steps',
         strength: 'Strength',
+        tiledVAE: 'Tiled VAE',
         tileOrder: 'Tile Order',
         upscale: {
           label: 'Upscale',

gui/src/strings/es.ts

@@ -129,6 +129,7 @@ export const I18N_STRINGS_ES = {
         sourceFilter: '',
         steps: 'Pasos',
         strength: 'Fuerza',
+        tiledVAE: '',
         tileOrder: 'Orden de secciones',
         upscale: {
           label: 'Aumento',

gui/src/strings/fr.ts

@@ -129,6 +129,7 @@ export const I18N_STRINGS_FR = {
         sourceFilter: '',
         steps: '',
         strength: '',
+        tiledVAE: '',
         tileOrder: '',
         upscale: {
           label: '',