fix(gui): read image size from its own field
This commit is contained in:
parent
13a4fa2278
commit
4d6560aaba
|
@ -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');
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue