feat(gui): display multiple images on card
This commit is contained in:
parent
33ab23a474
commit
061718b477
|
@ -1,5 +1,5 @@
|
||||||
import { doesExist, Maybe, mustDefault, mustExist } from '@apextoaster/js-utils';
|
import { doesExist, Maybe, mustDefault, mustExist } from '@apextoaster/js-utils';
|
||||||
import { Blender, Brush, ContentCopy, Delete, Download, ZoomOutMap } from '@mui/icons-material';
|
import { ArrowLeft, ArrowRight, Blender, Brush, ContentCopy, Delete, Download, ZoomOutMap } from '@mui/icons-material';
|
||||||
import { Box, Card, CardContent, CardMedia, Grid, IconButton, Menu, MenuItem, Paper, Tooltip } from '@mui/material';
|
import { Box, Card, CardContent, CardMedia, Grid, IconButton, Menu, MenuItem, Paper, Tooltip } from '@mui/material';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { useContext, useState } from 'react';
|
import { useContext, useState } from 'react';
|
||||||
|
@ -95,18 +95,46 @@ export function ImageCard(props: ImageCardProps) {
|
||||||
setAnchor(undefined);
|
setAnchor(undefined);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const [index, setIndex] = useState(0);
|
||||||
|
|
||||||
const model = mustDefault(MODEL_LABELS[params.model], params.model);
|
const model = mustDefault(MODEL_LABELS[params.model], params.model);
|
||||||
const scheduler = mustDefault(SCHEDULER_LABELS[params.scheduler], params.scheduler);
|
const scheduler = mustDefault(SCHEDULER_LABELS[params.scheduler], params.scheduler);
|
||||||
|
|
||||||
return <Card sx={{ maxWidth: config.params.width.default }} elevation={2}>
|
return <Card sx={{ maxWidth: config.params.width.default }} elevation={2}>
|
||||||
<CardMedia sx={{ height: config.params.height.default }}
|
<CardMedia sx={{ height: config.params.height.default }}
|
||||||
component='img'
|
component='img'
|
||||||
image={output[0].url}
|
image={output[index].url}
|
||||||
title={params.prompt}
|
title={params.prompt}
|
||||||
/>
|
/>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<Box textAlign='center'>
|
<Box textAlign='center'>
|
||||||
<Grid container spacing={2}>
|
<Grid container spacing={2}>
|
||||||
|
<GridItem xs={4}>
|
||||||
|
<Tooltip title='Previous'>
|
||||||
|
<IconButton onClick={() => {
|
||||||
|
const prevIndex = index - 1;
|
||||||
|
if (prevIndex < 0) {
|
||||||
|
setIndex(output.length + prevIndex);
|
||||||
|
} else {
|
||||||
|
setIndex(prevIndex);
|
||||||
|
}
|
||||||
|
}}>
|
||||||
|
<ArrowLeft />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
</GridItem>
|
||||||
|
<GridItem xs={4}>
|
||||||
|
{visibleIndex(index)} of {output.length}
|
||||||
|
</GridItem>
|
||||||
|
<GridItem xs={4}>
|
||||||
|
<Tooltip title='Next'>
|
||||||
|
<IconButton onClick={() => {
|
||||||
|
setIndex((index + 1) % output.length);
|
||||||
|
}}>
|
||||||
|
<ArrowRight />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
</GridItem>
|
||||||
<GridItem xs={4}>Model: {model}</GridItem>
|
<GridItem xs={4}>Model: {model}</GridItem>
|
||||||
<GridItem xs={4}>Scheduler: {scheduler}</GridItem>
|
<GridItem xs={4}>Scheduler: {scheduler}</GridItem>
|
||||||
<GridItem xs={4}>Seed: {params.seed}</GridItem>
|
<GridItem xs={4}>Seed: {params.seed}</GridItem>
|
||||||
|
|
Loading…
Reference in New Issue