allow client to load without a server

api/params.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.1",
+  "version": "0.8.0",
   "batch": {
     "default": 1,
     "min": 1,

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');

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
     }
   }
 }

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.

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;

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';
 

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';
 

gui/src/components/LoadingScreen.tsx

@@ -0,0 +1,25 @@
+import { Box, CircularProgress, Stack, Typography } from '@mui/material';
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+
+export function LoadingScreen() {
+  const { t } = useTranslation();
+
+  return <Box sx={{
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: window.innerHeight,
+  }}>
+    <Stack
+      direction='column'
+      spacing={2}
+      sx={{ alignItems: 'center' }}
+    >
+      <CircularProgress />
+      <Typography>
+        {t('loading.server')}
+      </Typography>
+    </Stack>
+  </Box>;
+}

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';

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;
+  }
+}