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 { useMutation, useQuery } from 'react-query';
|
||||||
|
|
||||||
import { ApiClient } from '../api/client.js';
|
import { ApiClient } from '../api/client.js';
|
||||||
|
import { ImageCard } from './ImageCard.js';
|
||||||
import { ImageControl, ImageParams } from './ImageControl.js';
|
import { ImageControl, ImageParams } from './ImageControl.js';
|
||||||
import { QueryList } from './QueryList.js';
|
import { QueryList } from './QueryList.js';
|
||||||
|
|
||||||
|
@ -61,23 +62,6 @@ export function Txt2Img(props: Txt2ImgProps) {
|
||||||
const [scheduler, setScheduler] = useState('euler-a');
|
const [scheduler, setScheduler] = useState('euler-a');
|
||||||
const [platform, setPlatform] = useState('cpu');
|
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>
|
return <Box>
|
||||||
<Stack spacing={2}>
|
<Stack spacing={2}>
|
||||||
<Stack direction='row' spacing={2}>
|
<Stack direction='row' spacing={2}>
|
||||||
|
@ -99,7 +83,7 @@ export function Txt2Img(props: Txt2ImgProps) {
|
||||||
setPrompt(event.target.value);
|
setPrompt(event.target.value);
|
||||||
}} />
|
}} />
|
||||||
<Button onClick={() => generate.mutate()}>Generate</Button>
|
<Button onClick={() => generate.mutate()}>Generate</Button>
|
||||||
{renderImage()}
|
<ImageCard result={generate} />
|
||||||
</Stack>
|
</Stack>
|
||||||
</Box>;
|
</Box>;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue