feat(gui): load models from server
This commit is contained in:
parent
4cb6ce8da3
commit
46e047bd0a
|
@ -1,13 +1,17 @@
|
|||
import { doesExist } from '@apextoaster/js-utils';
|
||||
|
||||
export interface Txt2ImgParams {
|
||||
model?: string;
|
||||
platform?: string;
|
||||
scheduler?: string;
|
||||
|
||||
prompt: string;
|
||||
cfg: number;
|
||||
steps: number;
|
||||
|
||||
width?: number;
|
||||
height?: number;
|
||||
seed?: string;
|
||||
scheduler?: string;
|
||||
}
|
||||
|
||||
export interface ApiResponse {
|
||||
|
@ -16,8 +20,10 @@ export interface ApiResponse {
|
|||
}
|
||||
|
||||
export interface ApiClient {
|
||||
models(): Promise<Array<string>>;
|
||||
platforms(): Promise<Array<string>>;
|
||||
schedulers(): Promise<Array<string>>;
|
||||
|
||||
txt2img(params: Txt2ImgParams): Promise<ApiResponse>;
|
||||
}
|
||||
|
||||
|
@ -40,6 +46,11 @@ export function makeClient(root: string, f = fetch): ApiClient {
|
|||
let pending: Promise<ApiResponse> | undefined;
|
||||
|
||||
return {
|
||||
async models(): Promise<Array<string>> {
|
||||
const path = new URL('/settings/models', root);
|
||||
const res = await f(path);
|
||||
return await res.json() as Array<string>;
|
||||
},
|
||||
async schedulers(): Promise<Array<string>> {
|
||||
const path = new URL('/settings/schedulers', root);
|
||||
const res = await f(path);
|
||||
|
@ -71,6 +82,14 @@ export function makeClient(root: string, f = fetch): ApiClient {
|
|||
url.searchParams.append('seed', params.seed);
|
||||
}
|
||||
|
||||
if (doesExist(params.model)) {
|
||||
url.searchParams.append('model', params.model);
|
||||
}
|
||||
|
||||
if (doesExist(params.platform)) {
|
||||
url.searchParams.append('platform', params.platform);
|
||||
}
|
||||
|
||||
if (doesExist(params.scheduler)) {
|
||||
url.searchParams.append('scheduler', params.scheduler);
|
||||
}
|
||||
|
|
|
@ -1,9 +1,11 @@
|
|||
import { mustExist } from '@apextoaster/js-utils';
|
||||
import { TabContext, TabList, TabPanel } from '@mui/lab';
|
||||
import { Box, Container, MenuItem, Select, Tab, Typography } from '@mui/material';
|
||||
import * as React from 'react';
|
||||
import { useQuery } from 'react-query';
|
||||
|
||||
import { ApiClient } from '../api/client.js';
|
||||
import { Txt2Img } from './Txt2Img.js';
|
||||
import { STALE_TIME, Txt2Img } from './Txt2Img.js';
|
||||
|
||||
const { useState } = React;
|
||||
|
||||
|
@ -13,22 +15,38 @@ export interface OnnxWebProps {
|
|||
|
||||
export function OnnxWeb(props: OnnxWebProps) {
|
||||
const [tab, setTab] = useState('1');
|
||||
const [model, setModel] = useState('v1.5');
|
||||
const [model, setModel] = useState('stable-diffusion-onnx-v1-5');
|
||||
|
||||
const models = useQuery('models', async () => props.client.models(), {
|
||||
staleTime: STALE_TIME,
|
||||
});
|
||||
|
||||
function renderModels() {
|
||||
switch (models.status) {
|
||||
case 'error':
|
||||
return <MenuItem value='error'>Error</MenuItem>;
|
||||
case 'loading':
|
||||
return <MenuItem value='loading'>Loading</MenuItem>;
|
||||
case 'success':
|
||||
return mustExist(models.data).map((name) => <MenuItem key={name} value={name}>{name}</MenuItem>);
|
||||
default:
|
||||
return <MenuItem value='error'>Unknown Error</MenuItem>;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Container>
|
||||
<Box sx={{ my: 4 }}>
|
||||
<Typography variant='h3' gutterBottom>
|
||||
ONNX Web GUI
|
||||
ONNX Web
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ my: 4 }}>
|
||||
<Select value={model} onChange={(e) => {
|
||||
setModel(e.target.value);
|
||||
}}>
|
||||
<MenuItem value='v1.4'>Stable Diffusion v1.4</MenuItem>
|
||||
<MenuItem value='v1.5'>Stable Diffusion v1.5</MenuItem>
|
||||
{renderModels()}
|
||||
</Select>
|
||||
</Box>
|
||||
<TabContext value={tab}>
|
||||
|
@ -42,7 +60,7 @@ export function OnnxWeb(props: OnnxWebProps) {
|
|||
</TabList>
|
||||
</Box>
|
||||
<TabPanel value="1">
|
||||
<Txt2Img {...props} />
|
||||
<Txt2Img client={props.client} model={model} />
|
||||
</TabPanel>
|
||||
<TabPanel value="2">
|
||||
<Box>
|
||||
|
|
|
@ -8,7 +8,7 @@ import { ImageControl, ImageParams } from './ImageControl.js';
|
|||
|
||||
const { useState } = React;
|
||||
|
||||
const STALE_TIME = 3_000;
|
||||
export const STALE_TIME = 3_000;
|
||||
|
||||
// TODO: set up i18next
|
||||
const PLATFORM_NAMES: Record<string, string> = {
|
||||
|
@ -28,13 +28,19 @@ const SCHEDULER_NAMES: Record<string, string> = {
|
|||
|
||||
export interface Txt2ImgProps {
|
||||
client: ApiClient;
|
||||
model: string;
|
||||
}
|
||||
|
||||
export function Txt2Img(props: Txt2ImgProps) {
|
||||
const { client } = props;
|
||||
|
||||
async function generateImage() {
|
||||
return client.txt2img({ ...params, prompt, scheduler });
|
||||
return client.txt2img({
|
||||
...params,
|
||||
model: props.model,
|
||||
prompt,
|
||||
scheduler,
|
||||
});
|
||||
}
|
||||
|
||||
const generate = useMutation(generateImage);
|
||||
|
|
Loading…
Reference in New Issue