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