feat(gui): add local params and API stub so client can load without a…

… server (#181)
ssube · Mar 5, 2023 · d5a3b0f · d5a3b0f
1 parent 643f7bb
commit d5a3b0f
Show file tree

Hide file tree

Showing 11 changed files with 365 additions and 125 deletions.
diff --git a/api/params.json b/api/params.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.7.1",
+  "version": "0.8.0",
   "batch": {
     "default": 1,
     "min": 1,

diff --git a/gui/esbuild.js b/gui/esbuild.js
@@ -5,8 +5,7 @@ import { copy } from 'esbuild-plugin-copy';
 
 function envTrue(key) {
     const val = (process.env[key] || '').toLowerCase();
-    return val == '1' || val == 't' || val == 'true' || val == 'y' || val == 'yes';
-
+    return val === '1' || val === 't' || val === 'true' || val === 'y' || val === 'yes';
 }
 
 const debug = envTrue('DEBUG');

diff --git a/gui/examples/config.json b/gui/examples/config.json
@@ -3,17 +3,167 @@
     "root": "http://127.0.0.1:5000"
   },
   "params": {
+    "version": "0.8.0",
+    "batch": {
+      "default": 1,
+      "min": 1,
+      "max": 5,
+      "step": 1
+    },
+    "bottom": {
+      "default": 0,
+      "min": 0,
+      "max": 512,
+      "step": 8
+    },
+    "cfg": {
+      "default": 6,
+      "min": 1,
+      "max": 30,
+      "step": 0.1
+    },
+    "correction": {
+      "default": "",
+      "keys": []
+    },
+    "denoise": {
+      "default": 0.5,
+      "min": 0,
+      "max": 1,
+      "step": 0.1
+    },
+    "eta": {
+      "default": 0.0,
+      "min": 0,
+      "max": 1,
+      "step": 0.01
+    },
+    "faceOutscale": {
+      "default": 1,
+      "min": 1,
+      "max": 4,
+      "step": 1
+    },
+    "faceStrength": {
+      "default": 0.5,
+      "min": 0,
+      "max": 1,
+      "step": 0.1
+    },
+    "fillColor": {
+      "default": "#000000",
+      "keys": []
+    },
+    "filter": {
+      "default": "none",
+      "keys": []
+    },
+    "height": {
+      "default": 512,
+      "min": 256,
+      "max": 1024,
+      "step": 8
+    },
+    "inversion": {
+      "default": "",
+      "keys": []
+    },
+    "left": {
+      "default": 0,
+      "min": 0,
+      "max": 512,
+      "step": 8
+    },
     "model": {
-      "default": "stable-diffusion-onnx-v1-5"
+      "default": "stable-diffusion-onnx-v1-5",
+      "keys": []
+    },
+    "negativePrompt": {
+      "default": "",
+      "keys": []
+    },
+    "noise": {
+      "default": "histogram",
+      "keys": []
+    },
+    "outscale": {
+      "default": 1,
+      "min": 1,
+      "max": 4,
+      "step": 1
     },
     "platform": {
-      "default": "amd"
+      "default": "amd",
+      "keys": []
+    },
+    "prompt": {
+      "default": "an astronaut eating a hamburger",
+      "keys": []
+    },
+    "right": {
+      "default": 0,
+      "min": 0,
+      "max": 512,
+      "step": 8
+    },
+    "scale": {
+      "default": 1,
+      "min": 1,
+      "max": 4,
+      "step": 1
     },
     "scheduler": {
-      "default": "euler-a"
+      "default": "euler-a",
+      "keys": []
     },
-    "prompt": {
-      "default": "an astronaut eating a hamburger"
+    "seed": {
+      "default": -1,
+      "min": -1,
+      "max": 4294967295,
+      "step": 1
+    },
+    "steps": {
+      "default": 25,
+      "min": 1,
+      "max": 200,
+      "step": 1
+    },
+    "strength": {
+      "default": 0.5,
+      "min": 0,
+      "max": 1,
+      "step": 0.01
+    },
+    "tileOrder": {
+      "default": "spiral",
+      "keys": [
+        "grid",
+        "spiral"
+      ]
+    },
+    "top": {
+      "default": 0,
+      "min": 0,
+      "max": 512,
+      "step": 8
+    },
+    "upscaleOrder": {
+      "default": "correction-first",
+      "keys": [
+        "correction-both",
+        "correction-first",
+        "correction-last"
+      ]
+    },
+    "upscaling": {
+      "default": "",
+      "keys": []
+    },
+    "width": {
+      "default": 512,
+      "min": 256,
+      "max": 1024,
+      "step": 8
     }
   }
 }
diff --git a/gui/src/client.ts → gui/src/client/api.ts b/gui/src/client.ts → gui/src/client/api.ts
@@ -1,8 +1,8 @@
 /* eslint-disable max-lines */
 import { doesExist } from '@apextoaster/js-utils';
 
-import { ServerParams } from './config.js';
-import { range } from './utils.js';
+import { ServerParams } from '../config.js';
+import { range } from '../utils.js';
 
 /**
  * Shared parameters for anything using models, which is pretty much everything.

diff --git a/gui/src/client/local.ts b/gui/src/client/local.ts
@@ -0,0 +1,59 @@
+import { BaseError } from 'noicejs';
+import { ApiClient } from './api.js';
+
+export class NoServerError extends BaseError {
+  constructor() {
+    super('cannot connect to server');
+  }
+}
+
+/**
+ * @TODO client-side inference with https://www.npmjs.com/package/onnxruntime-web
+ */
+export const LOCAL_CLIENT = {
+  async masks() {
+    throw new NoServerError();
+  },
+  async blend(model, params, upscale) {
+    throw new NoServerError();
+  },
+  async img2img(model, params, upscale) {
+    throw new NoServerError();
+  },
+  async txt2img(model, params, upscale) {
+    throw new NoServerError();
+  },
+  async inpaint(model, params, upscale) {
+    throw new NoServerError();
+  },
+  async upscale(model, params, upscale) {
+    throw new NoServerError();
+  },
+  async outpaint(model, params, upscale) {
+    throw new NoServerError();
+  },
+  async noises() {
+    throw new NoServerError();
+  },
+  async params() {
+    throw new NoServerError();
+  },
+  async ready(key) {
+    throw new NoServerError();
+  },
+  async cancel(key) {
+    throw new NoServerError();
+  },
+  async models() {
+    throw new NoServerError();
+  },
+  async platforms() {
+    throw new NoServerError();
+  },
+  async schedulers() {
+    throw new NoServerError();
+  },
+  async strings() {
+    return {};
+  },
+} as ApiClient;
diff --git a/gui/src/components/ImageCard.tsx b/gui/src/components/ImageCard.tsx
@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { useHash } from 'react-use/lib/useHash';
 import { useStore } from 'zustand';
 
-import { ImageResponse } from '../client.js';
+import { ImageResponse } from '../client/api.js';
 import { BLEND_SOURCES, ConfigContext, StateContext } from '../state.js';
 import { range, visibleIndex } from '../utils.js';
 

diff --git a/gui/src/components/LoadingCard.tsx b/gui/src/components/LoadingCard.tsx
@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { useMutation, useQuery } from 'react-query';
 import { useStore } from 'zustand';
 
-import { ImageResponse } from '../client.js';
+import { ImageResponse } from '../client/api.js';
 import { POLL_TIME } from '../config.js';
 import { ClientContext, ConfigContext, StateContext } from '../state.js';
 

diff --git a/gui/src/components/control/ImageControl.tsx b/gui/src/components/control/ImageControl.tsx
@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 import { useStore } from 'zustand';
 
-import { BaseImgParams } from '../../client.js';
+import { BaseImgParams } from '../../client/api.js';
 import { STALE_TIME } from '../../config.js';
 import { ClientContext, ConfigContext, OnnxState, StateContext } from '../../state.js';
 import { NumericField } from '../input/NumericField.js';

diff --git a/gui/src/config.ts b/gui/src/config.ts
@@ -1,6 +1,6 @@
 import { doesExist, Maybe } from '@apextoaster/js-utils';
 import { merge } from 'lodash';
-import { Img2ImgParams, InpaintParams, ModelParams, OutpaintParams, STATUS_SUCCESS, Txt2ImgParams, UpscaleParams } from './client.js';
+import { Img2ImgParams, InpaintParams, ModelParams, OutpaintParams, STATUS_SUCCESS, Txt2ImgParams, UpscaleParams } from './client/api.js';
 
 export interface ConfigNumber {
   default: number;
@@ -113,3 +113,16 @@ export function getApiRoot(config: Config): string {
     return config.api.root;
   }
 }
+
+export function isDebug(): boolean {
+  const query = new URLSearchParams(window.location.search);
+  const debug = query.get('debug');
+
+  if (doesExist(debug)) {
+    const val = debug.toLowerCase();
+    // eslint-disable-next-line no-restricted-syntax
+    return val === '1' || val === 't' || val === 'true' || val === 'y' || val === 'yes';
+  } else {
+    return false;
+  }
+}