apextoaster
/
onnx-web
1
0
Fork 0
Code Actions

fix(gui): read image size from its own field

This commit is contained in:
Sean Sube 2023-01-16 07:31:59 -06:00
parent 13a4fa2278
commit 4d6560aaba
3 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
gui/src/api/client.ts
View File

@ -70,7 +70,11 @@ export interface ApiResponse {
key: string; key: string;
url: string; url: string;
}; };
params: Txt2ImgResponse; params: Required<BaseImgParams>;
size: {
width: number;
height: number;
};
} }
export interface ApiReady { export interface ApiReady {
@ -307,11 +311,11 @@ export async function parseApiResponse(root: string, res: Response): Promise<Api
const data = await res.json() as LimitedResponse; const data = await res.json() as LimitedResponse;
const url = makeApiUrl(root, 'output', data.output).toString(); const url = makeApiUrl(root, 'output', data.output).toString();
return { return {
...data,
output: { output: {
key: data.output, key: data.output,
url, url,
}, },
params: data.params,
}; };
} else { } else {
throw new Error('request error'); throw new Error('request error');

8
gui/src/components/ImageCard.tsx
View File

@ -22,7 +22,7 @@ export function GridItem(props: { xs: number; children: React.ReactNode }) {
export function ImageCard(props: ImageCardProps) { export function ImageCard(props: ImageCardProps) {
const { value } = props; const { value } = props;
const { params, output } = value; const { params, output, size } = value;
const state = mustExist(useContext(StateContext)); const state = mustExist(useContext(StateContext));
// eslint-disable-next-line @typescript-eslint/unbound-method // eslint-disable-next-line @typescript-eslint/unbound-method
@ -59,8 +59,8 @@ export function ImageCard(props: ImageCardProps) {
window.open(output.url, '_blank'); window.open(output.url, '_blank');
} }
return <Card sx={{ maxWidth: params.width }} elevation={2}> return <Card sx={{ maxWidth: size.width }} elevation={2}>
<CardMedia sx={{ height: params.height }} <CardMedia sx={{ height: size.height }}
component='img' component='img'
image={output.url} image={output.url}
title={params.prompt} title={params.prompt}
@ -70,7 +70,7 @@ export function ImageCard(props: ImageCardProps) {
<Grid container spacing={2}> <Grid container spacing={2}>
<GridItem xs={4}>CFG: {params.cfg}</GridItem> <GridItem xs={4}>CFG: {params.cfg}</GridItem>
<GridItem xs={4}>Steps: {params.steps}</GridItem> <GridItem xs={4}>Steps: {params.steps}</GridItem>
<GridItem xs={4}>Size: {params.width}x{params.height}</GridItem> <GridItem xs={4}>Size: {size.width}x{size.height}</GridItem>
<GridItem xs={4}>Seed: {params.seed}</GridItem> <GridItem xs={4}>Seed: {params.seed}</GridItem>
<GridItem xs={8}>Scheduler: {params.scheduler}</GridItem> <GridItem xs={8}>Scheduler: {params.scheduler}</GridItem>
<GridItem xs={12}>{params.prompt}</GridItem> <GridItem xs={12}>{params.prompt}</GridItem>

6
gui/src/components/LoadingCard.tsx
View File

@ -31,9 +31,9 @@ export function LoadingCard(props: LoadingCardProps) {
} }
}, [ready.status, ready.data?.ready]); }, [ready.status, ready.data?.ready]);
return <Card sx={{ maxWidth: props.loading.params.width }}> return <Card sx={{ maxWidth: props.loading.size.width }}>
<CardContent sx={{ height: props.loading.params.height }}> <CardContent sx={{ height: props.loading.size.height }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: props.loading.params.height }}> <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: props.loading.size.height }}>
<CircularProgress /> <CircularProgress />
</div> </div>
</CardContent> </CardContent>