apextoaster
/
onnx-web
1
0
Fork 0
Code Actions

feat(gui): add button to download image metadata JSON

This commit is contained in:
Sean Sube 2023-07-02 13:13:47 -05:00
parent a7be651032
commit be396099ef
Signed by: ssube
GPG Key ID: 3EED7B957D362AF1
1 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
gui/src/components/card/ImageCard.tsx
View File

@ -28,7 +28,8 @@ export function ImageCard(props: ImageCardProps) {
const { params, outputs, size } = image;
const [_hash, setHash] = useHash();
const [anchor, setAnchor] = useState<Maybe<HTMLElement>>();
const [blendAnchor, setBlendAnchor] = useState<Maybe<HTMLElement>>();
const [saveAnchor, setSaveAnchor] = useState<Maybe<HTMLElement>>();
const config = mustExist(useContext(ConfigContext));
const state = mustExist(useContext(StateContext));
@ -91,8 +92,14 @@ export function ImageCard(props: ImageCardProps) {
window.open(outputs[index].url, '_blank');
}
function downloadMetadata() {
window.open(outputs[index].url + '.json', '_blank');
}
function close() {
setAnchor(undefined);
// TODO: split these up
setBlendAnchor(undefined);
setSaveAnchor(undefined);
}
const [index, setIndex] = useState(0);
@ -151,10 +158,20 @@ export function ImageCard(props: ImageCardProps) {
</GridItem>
<GridItem xs={2}>
<Tooltip title={t('tooltip.save')}>
<IconButton onClick={downloadImage}>
<IconButton onClick={(event) => {
setSaveAnchor(event.currentTarget);
}}>
<Download />
</IconButton>
</Tooltip>
<Menu
anchorEl={saveAnchor}
open={doesExist(saveAnchor)}
onClose={close}
>
<MenuItem key='save-image' onClick={downloadImage}>{t('save.image')}</MenuItem>
<MenuItem key='save-metadata' onClick={downloadMetadata}>{t('save.metadata')}</MenuItem>
</Menu>
</GridItem>
<GridItem xs={2}>
<Tooltip title={t('tab.img2img')}>
@ -180,14 +197,14 @@ export function ImageCard(props: ImageCardProps) {
<GridItem xs={2}>
<Tooltip title={t('tab.blend')}>
<IconButton onClick={(event) => {
setAnchor(event.currentTarget);
setBlendAnchor(event.currentTarget);
}}>
<Blender />
</IconButton>
</Tooltip>
<Menu
anchorEl={anchor}
open={doesExist(anchor)}
anchorEl={blendAnchor}
open={doesExist(blendAnchor)}
onClose={close}
>
{range(BLEND_SOURCES).map((idx) => <MenuItem key={idx} onClick={() => {