feat(gui): get default params and prompt from config
This commit is contained in:
parent
29c49085ce
commit
561fcb4d10
|
@ -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"
|
||||
}
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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}>
|
||||
|
|
|
@ -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');
|
||||
}
|
||||
}
|
|
@ -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>);
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue