feat(gui): add API server to settings

gui/src/client.ts

@@ -1,6 +1,6 @@
 import { doesExist } from '@apextoaster/js-utils';
 
-import { ConfigParams } from './config.js';
+import { ServerParams } from './config.js';
 
 export interface ModelParams {
   /**
@@ -107,7 +107,7 @@ export interface ApiClient {
   masks(): Promise<Array<string>>;
   models(): Promise<ModelsResponse>;
   noises(): Promise<Array<string>>;
-  params(): Promise<ConfigParams>;
+  params(): Promise<ServerParams>;
   platforms(): Promise<Array<string>>;
   schedulers(): Promise<Array<string>>;
 
@@ -122,7 +122,7 @@ export interface ApiClient {
 
 export const STATUS_SUCCESS = 200;
 
-export function paramsFromConfig(defaults: ConfigParams): Required<BaseImgParams> {
+export function paramsFromConfig(defaults: ServerParams): Required<BaseImgParams> {
   return {
     cfg: defaults.cfg.default,
     negativePrompt: defaults.negativePrompt.default,
@@ -213,10 +213,10 @@ export function makeClient(root: string, f = fetch): ApiClient {
       const res = await f(path);
       return await res.json() as Array<string>;
     },
-    async params(): Promise<ConfigParams> {
+    async params(): Promise<ServerParams> {
       const path = makeApiUrl(root, 'settings', 'params');
       const res = await f(path);
-      return await res.json() as ConfigParams;
+      return await res.json() as ServerParams;
     },
     async schedulers(): Promise<Array<string>> {
       const path = makeApiUrl(root, 'settings', 'schedulers');

gui/src/components/ImageCard.tsx

@@ -60,8 +60,8 @@ export function ImageCard(props: ImageCardProps) {
     window.open(output.url, '_blank');
   }
 
-  return <Card sx={{ maxWidth: config.width.default }} elevation={2}>
-    <CardMedia sx={{ height: config.height.default }}
+  return <Card sx={{ maxWidth: config.params.width.default }} elevation={2}>
+    <CardMedia sx={{ height: config.params.height.default }}
       component='img'
       image={output.url}
       title={params.prompt}

gui/src/components/ImageControl.tsx

@@ -6,17 +6,15 @@ import { useQuery } from 'react-query';
 import { useStore } from 'zustand';
 
 import { BaseImgParams } from '../client.js';
-import { ConfigParams, STALE_TIME } from '../config.js';
-import { ClientContext, OnnxState, StateContext } from '../state.js';
+import { STALE_TIME } from '../config.js';
+import { ClientContext, ConfigContext, OnnxState, StateContext } from '../state.js';
 import { SCHEDULER_LABELS } from '../strings.js';
 import { NumericField } from './NumericField.js';
 import { QueryList } from './QueryList.js';
 
 const { useContext } = React;
 
 export interface ImageControlProps {
-  config: ConfigParams;
-
   selector: (state: OnnxState) => BaseImgParams;
 
   onChange?: (params: BaseImgParams) => void;
@@ -26,10 +24,9 @@ export interface ImageControlProps {
  * doesn't need to use state, the parent component knows which params to pass
  */
 export function ImageControl(props: ImageControlProps) {
-  const { config } = props;
-
+  const { params } = mustExist(useContext(ConfigContext));
   const state = mustExist(useContext(StateContext));
-  const params = useStore(state, props.selector);
+  const controlState = useStore(state, props.selector);
 
   const client = mustExist(useContext(ClientContext));
   const schedulers = useQuery('schedulers', async () => client.schedulers(), {
@@ -44,11 +41,11 @@ export function ImageControl(props: ImageControlProps) {
       query={{
         result: schedulers,
       }}
-      value={mustDefault(params.scheduler, '')}
+      value={mustDefault(controlState.scheduler, '')}
       onChange={(value) => {
         if (doesExist(props.onChange)) {
           props.onChange({
-            ...params,
+            ...controlState,
             scheduler: value,
           });
         }
@@ -58,44 +55,44 @@ export function ImageControl(props: ImageControlProps) {
       <NumericField
         decimal
         label='CFG'
-        min={config.cfg.min}
-        max={config.cfg.max}
-        step={config.cfg.step}
-        value={params.cfg}
+        min={params.cfg.min}
+        max={params.cfg.max}
+        step={params.cfg.step}
+        value={controlState.cfg}
         onChange={(cfg) => {
           if (doesExist(props.onChange)) {
             props.onChange({
-              ...params,
+              ...controlState,
               cfg,
             });
           }
         }}
       />
       <NumericField
         label='Steps'
-        min={config.steps.min}
-        max={config.steps.max}
-        step={config.steps.step}
-        value={params.steps}
+        min={params.steps.min}
+        max={params.steps.max}
+        step={params.steps.step}
+        value={controlState.steps}
         onChange={(steps) => {
           if (doesExist(props.onChange)) {
             props.onChange({
-              ...params,
+              ...controlState,
               steps,
             });
           }
         }}
       />
       <NumericField
         label='Seed'
-        min={config.seed.min}
-        max={config.seed.max}
-        step={config.seed.step}
-        value={params.seed}
+        min={params.seed.min}
+        max={params.seed.max}
+        step={params.seed.step}
+        value={controlState.seed}
         onChange={(seed) => {
           if (doesExist(props.onChange)) {
             props.onChange({
-              ...params,
+              ...controlState,
               seed,
             });
           }
@@ -105,10 +102,10 @@ export function ImageControl(props: ImageControlProps) {
         variant='outlined'
         startIcon={<Casino />}
         onClick={() => {
-          const seed = Math.floor(Math.random() * config.seed.max);
+          const seed = Math.floor(Math.random() * params.seed.max);
           if (doesExist(props.onChange)) {
             props.onChange({
-              ...params,
+              ...controlState,
               seed,
             });
           }
@@ -117,18 +114,18 @@ export function ImageControl(props: ImageControlProps) {
         New Seed
       </Button>
     </Stack>
-    <TextField label='Prompt' variant='outlined' value={params.prompt} onChange={(event) => {
+    <TextField label='Prompt' variant='outlined' value={controlState.prompt} onChange={(event) => {
       if (doesExist(props.onChange)) {
         props.onChange({
-          ...params,
+          ...controlState,
           prompt: event.target.value,
         });
       }
     }} />
-    <TextField label='Negative Prompt' variant='outlined' value={params.negativePrompt} onChange={(event) => {
+    <TextField label='Negative Prompt' variant='outlined' value={controlState.negativePrompt} onChange={(event) => {
       if (doesExist(props.onChange)) {
         props.onChange({
-          ...params,
+          ...controlState,
           negativePrompt: event.target.value,
         });
       }

gui/src/components/Img2Img.tsx

@@ -14,7 +14,7 @@ import { UpscaleControl } from './UpscaleControl.js';
 const { useContext } = React;
 
 export function Img2Img() {
-  const config = mustExist(useContext(ConfigContext));
+  const { params } = mustExist(useContext(ConfigContext));
 
   async function uploadSource() {
     const { model, img2img, upscale } = state.getState();
@@ -48,21 +48,21 @@ export function Img2Img() {
           source: file,
         });
       }} />
-      <ImageControl config={config} selector={(s) => s.img2img} onChange={setImg2Img} />
+      <ImageControl selector={(s) => s.img2img} onChange={setImg2Img} />
       <NumericField
         decimal
         label='Strength'
-        min={config.strength.min}
-        max={config.strength.max}
-        step={config.strength.step}
+        min={params.strength.min}
+        max={params.strength.max}
+        step={params.strength.step}
         value={strength}
         onChange={(value) => {
           setImg2Img({
             strength: value,
           });
         }}
       />
-      <UpscaleControl config={config} />
+      <UpscaleControl />
       <Button onClick={() => upload.mutate()}>Generate</Button>
     </Stack>
   </Box>;

gui/src/components/Inpaint.tsx

@@ -18,7 +18,7 @@ import { UpscaleControl } from './UpscaleControl.js';
 const { useContext } = React;
 
 export function Inpaint() {
-  const config = mustExist(useContext(ConfigContext));
+  const { params } = mustExist(useContext(ConfigContext));
   const client = mustExist(useContext(ClientContext));
 
   const masks = useQuery('masks', async () => client.masks(), {
@@ -92,7 +92,6 @@ export function Inpaint() {
         }}
         renderImage={(image) =>
           <MaskCanvas
-            config={config}
             base={source}
             source={image}
             onSave={(file) => {
@@ -104,7 +103,6 @@ export function Inpaint() {
         }
       />
       <ImageControl
-        config={config}
         selector={(s) => s.inpaint}
         onChange={(newParams) => {
           setInpaint(newParams);
@@ -113,9 +111,9 @@ export function Inpaint() {
       <Stack direction='row' spacing={2}>
         <NumericField
           label='Strength'
-          min={config.strength.min}
-          max={config.strength.max}
-          step={config.strength.step}
+          min={params.strength.min}
+          max={params.strength.max}
+          step={params.strength.step}
           value={strength}
           onChange={(value) => {
             setInpaint({
@@ -153,8 +151,8 @@ export function Inpaint() {
           }}
         />
       </Stack>
-      <OutpaintControl config={config} />
-      <UpscaleControl config={config} />
+      <OutpaintControl />
+      <UpscaleControl />
       <Button onClick={() => upload.mutate()}>Generate</Button>
     </Stack>
   </Box>;

gui/src/components/LoadingCard.tsx

@@ -15,7 +15,7 @@ export interface LoadingCardProps {
 
 export function LoadingCard(props: LoadingCardProps) {
   const client = mustExist(React.useContext(ClientContext));
-  const config = mustExist(useContext(ConfigContext));
+  const { params } = mustExist(useContext(ConfigContext));
 
   // eslint-disable-next-line @typescript-eslint/unbound-method
   const pushHistory = useStore(mustExist(useContext(StateContext)), (state) => state.pushHistory);
@@ -32,13 +32,13 @@ export function LoadingCard(props: LoadingCardProps) {
     }
   }, [ready.status, ready.data?.ready]);
 
-  return <Card sx={{ maxWidth: config.width.default }}>
-    <CardContent sx={{ height: config.height.default }}>
+  return <Card sx={{ maxWidth: params.width.default }}>
+    <CardContent sx={{ height: params.height.default }}>
       <div style={{
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        minHeight: config.height.default,
+        minHeight: params.height.default,
       }}>
         <CircularProgress />
       </div>

gui/src/components/MaskCanvas.tsx

@@ -5,8 +5,8 @@ import { throttle } from 'lodash';
 import React, { RefObject, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useStore } from 'zustand';
 
-import { ConfigParams, SAVE_TIME } from '../config.js';
-import { StateContext } from '../state.js';
+import { SAVE_TIME } from '../config.js';
+import { ConfigContext, StateContext } from '../state.js';
 import { NumericField } from './NumericField';
 
 export const FULL_CIRCLE = 2 * Math.PI;
@@ -38,16 +38,15 @@ export interface Point {
 }
 
 export interface MaskCanvasProps {
-  config: ConfigParams;
-
   base?: Maybe<Blob>;
   source?: Maybe<Blob>;
 
   onSave: (blob: Blob) => void;
 }
 
 export function MaskCanvas(props: MaskCanvasProps) {
-  const { base, config, source } = props;
+  const { base, source } = props;
+  const { params } = mustExist(useContext(ConfigContext));
 
   function saveMask(): void {
     if (doesExist(bufferRef.current)) {
@@ -157,8 +156,8 @@ export function MaskCanvas(props: MaskCanvasProps) {
   }, [base]);
 
   const styles: React.CSSProperties = {
-    maxHeight: config.height.default,
-    maxWidth: config.width.default,
+    maxHeight: params.height.default,
+    maxWidth: params.width.default,
   };
 
   if (doesExist(background)) {
@@ -168,24 +167,24 @@ export function MaskCanvas(props: MaskCanvasProps) {
   return <Stack spacing={2}>
     <canvas
       ref={brushRef}
-      height={config.height.default}
-      width={config.width.default}
+      height={params.height.default}
+      width={params.width.default}
       style={{
         display: 'none',
       }}
     />
     <canvas
       ref={bufferRef}
-      height={config.height.default}
-      width={config.width.default}
+      height={params.height.default}
+      width={params.width.default}
       style={{
         display: 'none',
       }}
     />
     <canvas
       ref={canvasRef}
-      height={config.height.default}
-      width={config.width.default}
+      height={params.height.default}
+      width={params.width.default}
       style={styles}
       onClick={(event) => {
         const canvas = mustExist(canvasRef.current);