feat(gui): make an image card component showing params
This commit is contained in:
parent
1c9eed3a90
commit
b5d67b4886
|
@ -0,0 +1,49 @@
|
|||
import { Card, CardContent, CardMedia, List, Paper, Stack, Typography } from '@mui/material';
|
||||
import * as React from 'react';
|
||||
import { UseMutationResult } from 'react-query';
|
||||
|
||||
import { ApiResponse } from '../api/client.js';
|
||||
|
||||
export interface ImageCardProps {
|
||||
result: UseMutationResult<ApiResponse, unknown, void>;
|
||||
}
|
||||
|
||||
export function ImageCard(props: ImageCardProps) {
|
||||
const { result } = props;
|
||||
|
||||
if (result.status === 'error') {
|
||||
if (result.error instanceof Error) {
|
||||
return <div>{result.error.message}</div>;
|
||||
} else {
|
||||
return <div>Unknown error generating image.</div>;
|
||||
}
|
||||
}
|
||||
|
||||
if (result.status === 'loading') {
|
||||
return <div>Generating...</div>;
|
||||
}
|
||||
|
||||
if (result.status === 'success') {
|
||||
const { data } = result;
|
||||
const { params, output } = data;
|
||||
|
||||
return <Card sx={{ maxWidth: params.width }}>
|
||||
<CardMedia sx={{ height: params.height }}
|
||||
component='img'
|
||||
image={output}
|
||||
title={params.prompt}
|
||||
/>
|
||||
<CardContent>
|
||||
<Typography variant='body2'>
|
||||
<Stack spacing={1}>
|
||||
<Paper>CFG: {params.cfg}</Paper>
|
||||
<Paper>Steps: {params.steps}</Paper>
|
||||
<Paper>Seed: {params.seed}</Paper>
|
||||
</Stack>
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>;
|
||||
}
|
||||
|
||||
return <div>No result. Press Generate.</div>;
|
||||
}
|
|
@ -3,6 +3,7 @@ import * as React from 'react';
|
|||
import { useMutation, useQuery } from 'react-query';
|
||||
|
||||
import { ApiClient } from '../api/client.js';
|
||||
import { ImageCard } from './ImageCard.js';
|
||||
import { ImageControl, ImageParams } from './ImageControl.js';
|
||||
import { QueryList } from './QueryList.js';
|
||||
|
||||
|
@ -61,23 +62,6 @@ export function Txt2Img(props: Txt2ImgProps) {
|
|||
const [scheduler, setScheduler] = useState('euler-a');
|
||||
const [platform, setPlatform] = useState('cpu');
|
||||
|
||||
function renderImage() {
|
||||
switch (generate.status) {
|
||||
case 'error':
|
||||
if (generate.error instanceof Error) {
|
||||
return <div>{generate.error.message}</div>;
|
||||
} else {
|
||||
return <div>Unknown error generating image.</div>;
|
||||
}
|
||||
case 'loading':
|
||||
return <div>Generating...</div>;
|
||||
case 'success':
|
||||
return <img src={generate.data.output} />;
|
||||
default:
|
||||
return <div>No result. Press Generate.</div>;
|
||||
}
|
||||
}
|
||||
|
||||
return <Box>
|
||||
<Stack spacing={2}>
|
||||
<Stack direction='row' spacing={2}>
|
||||
|
@ -99,7 +83,7 @@ export function Txt2Img(props: Txt2ImgProps) {
|
|||
setPrompt(event.target.value);
|
||||
}} />
|
||||
<Button onClick={() => generate.mutate()}>Generate</Button>
|
||||
{renderImage()}
|
||||
<ImageCard result={generate} />
|
||||
</Stack>
|
||||
</Box>;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue