update image card for multiple outputs
This commit is contained in:
parent
82016a163a
commit
5b1411e783
|
@ -145,7 +145,7 @@ export interface BlendParams {
|
|||
* General response for most image requests.
|
||||
*/
|
||||
export interface ImageResponse {
|
||||
output: Array<{
|
||||
outputs: Array<{
|
||||
key: string;
|
||||
url: string;
|
||||
}>;
|
||||
|
@ -258,7 +258,7 @@ export const FIXED_FLOAT = 2;
|
|||
export const STATUS_SUCCESS = 200;
|
||||
|
||||
export function equalResponse(a: ImageResponse, b: ImageResponse): boolean {
|
||||
return a.output === b.output;
|
||||
return a.outputs === b.outputs;
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -546,12 +546,12 @@ export function makeClient(root: string, f = fetch): ApiClient {
|
|||
* that into a full URL, since it already knows the root URL of the server.
|
||||
*/
|
||||
export async function parseApiResponse(root: string, res: Response): Promise<ImageResponse> {
|
||||
type LimitedResponse = Omit<ImageResponse, 'output'> & { output: Array<string> };
|
||||
type LimitedResponse = Omit<ImageResponse, 'outputs'> & { outputs: Array<string> };
|
||||
|
||||
if (res.status === STATUS_SUCCESS) {
|
||||
const data = await res.json() as LimitedResponse;
|
||||
|
||||
const images = data.output.map((output) => {
|
||||
const outputs = data.outputs.map((output) => {
|
||||
const url = new URL(joinPath('output', output), root).toString();
|
||||
return {
|
||||
key: output,
|
||||
|
@ -561,7 +561,7 @@ export async function parseApiResponse(root: string, res: Response): Promise<Ima
|
|||
|
||||
return {
|
||||
...data,
|
||||
output: images,
|
||||
outputs,
|
||||
};
|
||||
} else {
|
||||
throw new Error('request error');
|
||||
|
|
|
@ -25,7 +25,7 @@ export function GridItem(props: { xs: number; children: React.ReactNode }) {
|
|||
|
||||
export function ImageCard(props: ImageCardProps) {
|
||||
const { value } = props;
|
||||
const { params, output, size } = value;
|
||||
const { params, outputs, size } = value;
|
||||
|
||||
const [_hash, setHash] = useHash();
|
||||
const [anchor, setAnchor] = useState<Maybe<HTMLElement>>();
|
||||
|
@ -42,7 +42,7 @@ export function ImageCard(props: ImageCardProps) {
|
|||
const setBlend = useStore(state, (s) => s.setBlend);
|
||||
|
||||
async function loadSource() {
|
||||
const req = await fetch(output[0].url);
|
||||
const req = await fetch(outputs[index].url);
|
||||
return req.blob();
|
||||
}
|
||||
|
||||
|
@ -88,7 +88,7 @@ export function ImageCard(props: ImageCardProps) {
|
|||
}
|
||||
|
||||
function downloadImage() {
|
||||
window.open(output[0].url, '_blank');
|
||||
window.open(outputs[index].url, '_blank');
|
||||
}
|
||||
|
||||
function close() {
|
||||
|
@ -103,7 +103,7 @@ export function ImageCard(props: ImageCardProps) {
|
|||
return <Card sx={{ maxWidth: config.params.width.default }} elevation={2}>
|
||||
<CardMedia sx={{ height: config.params.height.default }}
|
||||
component='img'
|
||||
image={output[index].url}
|
||||
image={outputs[index].url}
|
||||
title={params.prompt}
|
||||
/>
|
||||
<CardContent>
|
||||
|
@ -114,7 +114,7 @@ export function ImageCard(props: ImageCardProps) {
|
|||
<IconButton onClick={() => {
|
||||
const prevIndex = index - 1;
|
||||
if (prevIndex < 0) {
|
||||
setIndex(output.length + prevIndex);
|
||||
setIndex(outputs.length + prevIndex);
|
||||
} else {
|
||||
setIndex(prevIndex);
|
||||
}
|
||||
|
@ -124,12 +124,12 @@ export function ImageCard(props: ImageCardProps) {
|
|||
</Tooltip>
|
||||
</GridItem>
|
||||
<GridItem xs={4}>
|
||||
{visibleIndex(index)} of {output.length}
|
||||
{visibleIndex(index)} of {outputs.length}
|
||||
</GridItem>
|
||||
<GridItem xs={4}>
|
||||
<Tooltip title='Next'>
|
||||
<IconButton onClick={() => {
|
||||
setIndex((index + 1) % output.length);
|
||||
setIndex((index + 1) % outputs.length);
|
||||
}}>
|
||||
<ArrowRight />
|
||||
</IconButton>
|
||||
|
|
|
@ -18,11 +18,11 @@ export function ImageHistory() {
|
|||
const children = [];
|
||||
|
||||
if (loading.length > 0) {
|
||||
children.push(...loading.map((item) => <LoadingCard key={`loading-${item.image.output[0].key}`} index={0} loading={item.image} />));
|
||||
children.push(...loading.map((item) => <LoadingCard key={`loading-${item.image.outputs[0].key}`} index={0} loading={item.image} />));
|
||||
}
|
||||
|
||||
if (history.length > 0) {
|
||||
children.push(...history.map((item) => <ImageCard key={`history-${item.output[0].key}`} value={item} onDelete={removeHistory} />));
|
||||
children.push(...history.map((item) => <ImageCard key={`history-${item.outputs[0].key}`} value={item} onDelete={removeHistory} />));
|
||||
} else {
|
||||
if (doesExist(loading) === false) {
|
||||
children.push(<Typography>No results. Press Generate.</Typography>);
|
||||
|
|
|
@ -33,8 +33,8 @@ export function LoadingCard(props: LoadingCardProps) {
|
|||
// eslint-disable-next-line @typescript-eslint/unbound-method
|
||||
const setReady = useStore(state, (s) => s.setReady);
|
||||
|
||||
const cancel = useMutation(() => client.cancel(loading.output[index].key));
|
||||
const ready = useQuery(`ready-${loading.output[index].key}`, () => client.ready(loading.output[index].key), {
|
||||
const cancel = useMutation(() => client.cancel(loading.outputs[index].key));
|
||||
const ready = useQuery(`ready-${loading.outputs[index].key}`, () => client.ready(loading.outputs[index].key), {
|
||||
// data will always be ready without this, even if the API says its not
|
||||
cacheTime: 0,
|
||||
refetchInterval: POLL_TIME,
|
||||
|
|
|
@ -164,7 +164,7 @@ export const STATE_KEY = 'onnx-web';
|
|||
/**
|
||||
* Current state version for zustand persistence.
|
||||
*/
|
||||
export const STATE_VERSION = 5;
|
||||
export const STATE_VERSION = 6;
|
||||
|
||||
export const BLEND_SOURCES = 2;
|
||||
|
||||
|
@ -311,7 +311,7 @@ export function createStateSlices(server: ServerParams) {
|
|||
clearLoading(image) {
|
||||
set((prev) => ({
|
||||
...prev,
|
||||
loading: prev.loading.filter((it) => it.image.output[0].key !== image.output[0].key),
|
||||
loading: prev.loading.filter((it) => it.image.outputs[0].key !== image.outputs[0].key),
|
||||
}));
|
||||
},
|
||||
pushHistory(image) {
|
||||
|
@ -321,7 +321,7 @@ export function createStateSlices(server: ServerParams) {
|
|||
image,
|
||||
...prev.history,
|
||||
].slice(0, prev.limit + DEFAULT_HISTORY.scrollback),
|
||||
loading: prev.loading.filter((it) => it.image.output[0].key !== image.output[0].key),
|
||||
loading: prev.loading.filter((it) => it.image.outputs[0].key !== image.outputs[0].key),
|
||||
}));
|
||||
},
|
||||
pushLoading(image) {
|
||||
|
@ -342,7 +342,7 @@ export function createStateSlices(server: ServerParams) {
|
|||
removeHistory(image) {
|
||||
set((prev) => ({
|
||||
...prev,
|
||||
history: prev.history.filter((it) => it.output !== image.output),
|
||||
history: prev.history.filter((it) => it.outputs !== image.outputs),
|
||||
}));
|
||||
},
|
||||
setLimit(limit) {
|
||||
|
@ -354,7 +354,7 @@ export function createStateSlices(server: ServerParams) {
|
|||
setReady(image, ready) {
|
||||
set((prev) => {
|
||||
const loading = [...prev.loading];
|
||||
const idx = loading.findIndex((it) => it.image.output[0].key === image.output[0].key);
|
||||
const idx = loading.findIndex((it) => it.image.outputs[0].key === image.outputs[0].key);
|
||||
if (idx >= 0) {
|
||||
loading[idx].ready = ready;
|
||||
} else {
|
||||
|
|
Loading…
Reference in New Issue