feat(gui): show recent image history
This commit is contained in:
parent
0376499cc7
commit
764a097efd
|
@ -1,47 +1,28 @@
|
|||
import { Card, CardContent, CardMedia, Paper, Stack } 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>;
|
||||
value: ApiResponse;
|
||||
}
|
||||
|
||||
export function ImageCard(props: ImageCardProps) {
|
||||
const { result } = props;
|
||||
const { value } = props;
|
||||
const { params, output } = value;
|
||||
|
||||
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>
|
||||
<Stack spacing={2}>
|
||||
<Paper>CFG: {params.cfg}</Paper>
|
||||
<Paper>Steps: {params.steps}</Paper>
|
||||
<Paper>Seed: {params.seed}</Paper>
|
||||
</Stack>
|
||||
</CardContent>
|
||||
</Card>;
|
||||
}
|
||||
|
||||
return <div>No result. Press Generate.</div>;
|
||||
return <Card sx={{ maxWidth: params.width }}>
|
||||
<CardMedia sx={{ height: params.height }}
|
||||
component='img'
|
||||
image={output}
|
||||
title={params.prompt}
|
||||
/>
|
||||
<CardContent>
|
||||
<Stack spacing={2}>
|
||||
<Paper>CFG: {params.cfg}</Paper>
|
||||
<Paper>Steps: {params.steps}</Paper>
|
||||
<Paper>Seed: {params.seed}</Paper>
|
||||
</Stack>
|
||||
</CardContent>
|
||||
</Card>;
|
||||
}
|
||||
|
|
|
@ -0,0 +1,47 @@
|
|||
import { useState } from 'react';
|
||||
import * as React from 'react';
|
||||
import { UseMutationResult } from 'react-query';
|
||||
import { Grid, Stack } from '@mui/material';
|
||||
|
||||
export interface MutationHistoryProps<T> {
|
||||
element: React.ComponentType<{value: T}>;
|
||||
limit: number;
|
||||
result: UseMutationResult<T, unknown, void>;
|
||||
|
||||
isPresent: (list: Array<T>, item: T) => boolean;
|
||||
}
|
||||
|
||||
export function MutationHistory<T>(props: MutationHistoryProps<T>) {
|
||||
const { limit, result } = props;
|
||||
const { status } = result;
|
||||
|
||||
const [history, setHistory] = useState<Array<T>>([]);
|
||||
const children = [];
|
||||
|
||||
if (status === 'loading') {
|
||||
children.push(<div>Generating...</div>);
|
||||
}
|
||||
|
||||
if (status === 'success') {
|
||||
const { data } = result;
|
||||
if (props.isPresent(history, data)) {
|
||||
// item already exists, skip it
|
||||
} else {
|
||||
setHistory([
|
||||
data,
|
||||
...history,
|
||||
].slice(0, limit));
|
||||
}
|
||||
}
|
||||
|
||||
if (history.length > 0) {
|
||||
children.push(...history.map((item) => <props.element value={item} />));
|
||||
} else {
|
||||
// only show the prompt when the button has not been pushed
|
||||
if (status !== 'loading') {
|
||||
children.push(<div>No results. Press Generate.</div>);
|
||||
}
|
||||
}
|
||||
|
||||
return <Grid container spacing={2}>{children.slice(0, limit).map((child) => <Grid xs={6}>{child}</Grid>)}</Grid>;
|
||||
}
|
|
@ -5,6 +5,7 @@ import { useMutation, useQuery } from 'react-query';
|
|||
import { ApiClient } from '../api/client.js';
|
||||
import { ImageCard } from './ImageCard.js';
|
||||
import { ImageControl, ImageParams } from './ImageControl.js';
|
||||
import { MutationHistory } from './MutationHistory.js';
|
||||
import { QueryList } from './QueryList.js';
|
||||
|
||||
const { useState } = React;
|
||||
|
@ -83,7 +84,9 @@ export function Txt2Img(props: Txt2ImgProps) {
|
|||
setPrompt(event.target.value);
|
||||
}} />
|
||||
<Button onClick={() => generate.mutate()}>Generate</Button>
|
||||
<ImageCard result={generate} />
|
||||
<MutationHistory result={generate} limit={4} element={ImageCard}
|
||||
isPresent={(list, item) => list.some((other) => item.output === other.output)}
|
||||
/>
|
||||
</Stack>
|
||||
</Box>;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue