feat(gui): get default params and prompt from config

gui/examples/config.json

@@ -1,5 +1,11 @@
 {
   "api": {
     "root": "http://127.0.0.1:5000"
+  },
+  "default": {
+    "model": "stable-diffusion-onnx-v1-5",
+    "platform": "amd",
+    "scheduler": "euler-a",
+    "prompt": "an astronaut eating a hamburger"
   }
 }

gui/src/components/OnnxWeb.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { useQuery } from 'react-query';
 
 import { ApiClient } from '../api/client.js';
+import { Config } from '../config.js';
 import { QueryList } from './QueryList.js';
 import { STALE_TIME, Txt2Img } from './Txt2Img.js';
 
@@ -11,6 +12,7 @@ const { useState } = React;
 
 export interface OnnxWebProps {
   client: ApiClient;
+  config: Config;
 }
 
 const MODEL_LABELS = {
@@ -18,8 +20,10 @@ const MODEL_LABELS = {
 };
 
 export function OnnxWeb(props: OnnxWebProps) {
+  const { client, config } = props;
+
   const [tab, setTab] = useState('1');
-  const [model, setModel] = useState('stable-diffusion-onnx-v1-5');
+  const [model, setModel] = useState(config.default.model);
 
   const models = useQuery('models', async () => props.client.models(), {
     staleTime: STALE_TIME,
@@ -49,7 +53,7 @@ export function OnnxWeb(props: OnnxWebProps) {
             </TabList>
           </Box>
           <TabPanel value="1">
-            <Txt2Img client={props.client} model={model} />
+            <Txt2Img client={client} config={config} model={model} />
           </TabPanel>
           <TabPanel value="2">
             <Box>

gui/src/components/Txt2Img.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { useMutation, useQuery } from 'react-query';
 
 import { ApiClient } from '../api/client.js';
+import { Config } from '../config.js';
 import { ImageCard } from './ImageCard.js';
 import { ImageControl, ImageParams } from './ImageControl.js';
 import { MutationHistory } from './MutationHistory.js';
@@ -30,6 +31,7 @@ const SCHEDULER_LABELS: Record<string, string> = {
 
 export interface Txt2ImgProps {
   client: ApiClient;
+  config: Config;
   model: string;
 }
 
@@ -53,15 +55,15 @@ export function Txt2Img(props: Txt2ImgProps) {
     staleTime: STALE_TIME,
   });
 
-  const [prompt, setPrompt] = useState('an astronaut eating a hamburger');
   const [params, setParams] = useState<ImageParams>({
     cfg: 6,
     steps: 25,
     width: 512,
     height: 512,
   });
-  const [scheduler, setScheduler] = useState('euler-a');
-  const [platform, setPlatform] = useState('amd');
+  const [prompt, setPrompt] = useState(props.config.default.prompt);
+  const [platform, setPlatform] = useState(props.config.default.platform);
+  const [scheduler, setScheduler] = useState(props.config.default.scheduler);
 
   return <Box>
     <Stack spacing={2}>

gui/src/config.ts

@@ -0,0 +1,23 @@
+import { STATUS_SUCCESS } from './api/client.js';
+
+export interface Config {
+  api: {
+    root: string;
+  };
+  default: {
+    model: string;
+    platform: string;
+    scheduler: string;
+    prompt: string;
+  };
+}
+
+export async function loadConfig(): Promise<Config> {
+  const configPath = new URL('./config.json', window.origin);
+  const configReq = await fetch(configPath);
+  if (configReq.status === STATUS_SUCCESS) {
+    return configReq.json();
+  } else {
+    throw new Error('could not load config');
+  }
+}

gui/src/main.tsx

@@ -4,24 +4,9 @@ import * as React from 'react';
 import ReactDOM from 'react-dom/client';
 import { QueryClient, QueryClientProvider } from 'react-query';
 
-import { makeClient, STATUS_SUCCESS } from './api/client.js';
+import { makeClient } from './api/client.js';
 import { OnnxWeb } from './components/OnnxWeb.js';
-
-export interface Config {
-  api: {
-    root: string;
-  };
-}
-
-export async function loadConfig(): Promise<Config> {
-  const configPath = new URL('./config.json', window.origin);
-  const configReq = await fetch(configPath);
-  if (configReq.status === STATUS_SUCCESS) {
-    return configReq.json();
-  } else {
-    throw new Error('could not load config');
-  }
-}
+import { loadConfig } from './config.js';
 
 export async function main() {
   const config = await loadConfig();
@@ -31,7 +16,7 @@ export async function main() {
   const appElement = mustExist(document.getElementById('app'));
   const app = ReactDOM.createRoot(appElement);
   app.render(<QueryClientProvider client={query}>
-    <OnnxWeb client={client} />
+    <OnnxWeb client={client} config={config} />
   </QueryClientProvider>);
 }