fix(lint): style issues in gui

gui/src/api/client.ts

@@ -19,8 +19,10 @@ export interface ApiClient {
   txt2img(params: Txt2ImgParams): Promise<string>;
 }
 
+export const STATUS_SUCCESS = 200;
+
 export async function imageFromResponse(res: Response) {
-  if (res.status === 200) {
+  if (res.status === STATUS_SUCCESS) {
     const imageBlob = await res.blob();
     return URL.createObjectURL(imageBlob);
   } else {
@@ -34,7 +36,6 @@ export function makeClient(root: string, f = fetch): ApiClient {
   return {
     async txt2img(params: Txt2ImgParams): Promise<string> {
       if (doesExist(pending)) {
-        console.log('skipping request, one is already pending');
         return pending;
       }
 
@@ -60,12 +61,12 @@ export function makeClient(root: string, f = fetch): ApiClient {
 
       url.searchParams.append('prompt', params.prompt);
 
-      pending = f(url).then((res) => {
+      pending = f(url).then((res) => imageFromResponse(res)).finally(() => {
         pending = undefined;
-        return imageFromResponse(res);
       });
 
+      // eslint-disable-next-line no-return-await
       return await pending;
     },
-  }
+  };
 }

gui/src/components/Txt2Img.tsx

@@ -24,9 +24,8 @@ export function Txt2Img(props: Txt2ImgProps) {
   const [scheduler, setScheduler] = useState('euler-a');
 
   async function getImage() {
-    const image = await client.txt2img({ ...params, prompt, scheduler });
-    console.log(prompt, image);
-    setImage(image);
+    const data = await client.txt2img({ ...params, prompt, scheduler });
+    setImage(data);
   }
 
   function renderImage() {
@@ -54,8 +53,8 @@ export function Txt2Img(props: Txt2ImgProps) {
         <MenuItem value='euler-a'>Euler A</MenuItem>
         <MenuItem value='dpm-multi'>DPM</MenuItem>
       </Select>
-      <ImageControl params={params} onChange={(params) => {
-        setParams(params);
+      <ImageControl params={params} onChange={(newParams) => {
+        setParams(newParams);
       }} />
       <TextField label="Prompt" variant="outlined" value={prompt} onChange={(event) => {
         setPrompt(event.target.value);

gui/src/main.tsx

@@ -1,20 +1,21 @@
+/* eslint-disable no-console */
 import { mustExist } from '@apextoaster/js-utils';
 import * as React from 'react';
 import ReactDOM from 'react-dom/client';
 
-import { makeClient } from './api/client.js';
+import { makeClient, STATUS_SUCCESS } from './api/client.js';
 import { OnnxWeb } from './components/OnnxWeb.js';
 
 export interface Config {
   api: {
     root: string;
-  }
+  };
 }
 
 export async function loadConfig() {
   const configPath = new URL('./config.json', window.origin);
   const configReq = await fetch(configPath);
-  if (configReq.status === 200) {
+  if (configReq.status === STATUS_SUCCESS) {
     return configReq.json();
   } else {
     throw new Error('could not load config');
@@ -32,5 +33,7 @@ export async function main() {
 
 window.addEventListener('load', () => {
   console.log('launching onnx-web');
-  main();
+  main().catch((err) => {
+    console.error('error in main', err);
+  });
 }, false);

gui/tsconfig.json

@@ -42,4 +42,3 @@
     "test/**/*"
   ]
 }
-