diff --git a/gui/src/components/ImageCard.tsx b/gui/src/components/ImageCard.tsx index fcffbc13..b3b9a452 100644 --- a/gui/src/components/ImageCard.tsx +++ b/gui/src/components/ImageCard.tsx @@ -1,5 +1,5 @@ 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 * as React from 'react'; import { useContext, useState } from 'react'; @@ -95,18 +95,46 @@ export function ImageCard(props: ImageCardProps) { setAnchor(undefined); } + const [index, setIndex] = useState(0); + const model = mustDefault(MODEL_LABELS[params.model], params.model); const scheduler = mustDefault(SCHEDULER_LABELS[params.scheduler], params.scheduler); return + + + { + const prevIndex = index - 1; + if (prevIndex < 0) { + setIndex(output.length + prevIndex); + } else { + setIndex(prevIndex); + } + }}> + + + + + + {visibleIndex(index)} of {output.length} + + + + { + setIndex((index + 1) % output.length); + }}> + + + + Model: {model} Scheduler: {scheduler} Seed: {params.seed}