feat(gui): add tile and stride params

gui/src/client/api.ts

@@ -48,6 +48,10 @@ export interface BaseImgParams {
   negativePrompt?: string;
 
   batch: number;
+  tiledVAE: boolean;
+  tiles: number;
+  overlap: number;
+
   cfg: number;
   steps: number;
   seed: number;
@@ -160,8 +164,6 @@ export interface HighresParams {
   highresScale: number;
   highresSteps: number;
   highresStrength: number;
-
-  tiledVAE: boolean;
 }
 
 /**
@@ -404,6 +406,9 @@ export function makeImageURL(root: string, type: string, params: BaseImgParams):
   url.searchParams.append('cfg', params.cfg.toFixed(FIXED_FLOAT));
   url.searchParams.append('eta', params.eta.toFixed(FIXED_FLOAT));
   url.searchParams.append('steps', params.steps.toFixed(FIXED_INTEGER));
+  url.searchParams.append('tiledVAE', String(params.tiledVAE));
+  url.searchParams.append('tiles', params.tiles.toFixed(FIXED_INTEGER));
+  url.searchParams.append('overlap', params.overlap.toFixed(FIXED_FLOAT));
 
   if (doesExist(params.scheduler)) {
     url.searchParams.append('scheduler', params.scheduler);
@@ -455,10 +460,6 @@ 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,18 +17,6 @@ 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

gui/src/components/control/ImageControl.tsx

@@ -1,6 +1,6 @@
 import { doesExist, mustDefault, mustExist } from '@apextoaster/js-utils';
 import { Casino } from '@mui/icons-material';
-import { Button, Stack } from '@mui/material';
+import { Button, Checkbox, FormControlLabel, Stack } from '@mui/material';
 import * as React from 'react';
 import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -84,6 +84,54 @@ export function ImageControl(props: ImageControlProps) {
           }
         }}
       />
+      <FormControlLabel
+        label={t('parameter.tiledVAE')}
+        control={<Checkbox
+          checked={controlState.tiledVAE}
+          value='check'
+          onChange={(event) => {
+            if (doesExist(props.onChange)) {
+              props.onChange({
+                ...controlState,
+                tiledVAE: controlState.tiledVAE === false,
+              });
+            }
+          }}
+        />}
+      />
+      <NumericField
+        label={t('parameter.tiles')}
+        min={params.tiles.min}
+        max={params.tiles.max}
+        step={params.tiles.step}
+        value={controlState.tiles}
+        onChange={(tiles) => {
+          if (doesExist(props.onChange)) {
+            props.onChange({
+              ...controlState,
+              tiles,
+            });
+          }
+        }}
+      />
+      <NumericField
+        decimal
+        label={t('parameter.overlap')}
+        min={params.overlap.min}
+        max={params.overlap.max}
+        step={params.overlap.step}
+        value={controlState.overlap}
+        onChange={(overlap) => {
+          if (doesExist(props.onChange)) {
+            props.onChange({
+              ...controlState,
+              overlap,
+            });
+          }
+        }}
+      />
+    </Stack>
+    <Stack direction='row' spacing={4}>
       <NumericField
         decimal
         label={t('parameter.cfg')}

gui/src/state.ts

@@ -217,6 +217,9 @@ export function baseParamsFromServer(defaults: ServerParams): Required<BaseImgPa
     scheduler: defaults.scheduler.default,
     steps: defaults.steps.default,
     seed: defaults.seed.default,
+    tiledVAE: defaults.tiledVAE.default,
+    tiles: defaults.tiles.default,
+    overlap: defaults.overlap.default,
   };
 }
 
@@ -447,7 +450,6 @@ 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) => ({
@@ -466,7 +468,6 @@ export function createStateSlices(server: ServerParams) {
           highresSteps: server.highresSteps.default,
           highresScale: server.highresScale.default,
           highresStrength: server.highresStrength.default,
-          tiledVAE: server.tiledVAE.default,
         },
       });
     },
@@ -537,7 +538,7 @@ export function createStateSlices(server: ServerParams) {
   const createResetSlice: Slice<ResetSlice> = (set) => ({
     resetAll() {
       set((prev) => {
-        const next = {...prev};
+        const next = { ...prev };
         next.resetImg2Img();
         next.resetInpaint();
         next.resetTxt2Img();