diff --git a/gui/examples/config.json b/gui/examples/config.json index e088b494..0f1b17a8 100644 --- a/gui/examples/config.json +++ b/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" } } \ No newline at end of file diff --git a/gui/src/components/OnnxWeb.tsx b/gui/src/components/OnnxWeb.tsx index c197b1e8..e947df0e 100644 --- a/gui/src/components/OnnxWeb.tsx +++ b/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) { - + diff --git a/gui/src/components/Txt2Img.tsx b/gui/src/components/Txt2Img.tsx index e68503b4..7a778bcd 100644 --- a/gui/src/components/Txt2Img.tsx +++ b/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 = { 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({ 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 diff --git a/gui/src/config.ts b/gui/src/config.ts new file mode 100644 index 00000000..9017563d --- /dev/null +++ b/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 { + 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'); + } +} diff --git a/gui/src/main.tsx b/gui/src/main.tsx index 6ea715f0..32c0a63a 100644 --- a/gui/src/main.tsx +++ b/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 { - 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( - + ); } diff --git a/gui/src/types.ts b/gui/src/types.ts new file mode 100644 index 00000000..e69de29b