apextoaster
/
onnx-web
1
0
Fork 0
Code Actions

lint(gui): add component keys, remove some arrow fns

This commit is contained in:
Sean Sube 2023-01-11 21:45:31 -06:00
parent f2b2366c91
commit 25b64cc3b0
3 changed files with 73 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
gui/src/components/ImageCard.tsx
View File

@ -11,7 +11,7 @@ export interface ImageCardProps {
onDelete?: (key: ApiResponse) => void;
}
export function GridItem(props: {xs: number; children: React.ReactNode}) {
export function GridItem(props: { xs: number; children: React.ReactNode }) {
return <Grid item xs={props.xs}>
<Paper elevation={0} sx={{ padding: 1 }}>{props.children}</Paper>
</Grid>;
@ -21,6 +21,16 @@ export function ImageCard(props: ImageCardProps) {
const { value } = props;
const { params, output } = value;
function deleteImage() {
if (doesExist(props.onDelete)) {
props.onDelete(value);
}
}
function downloadImage() {
window.open(output, '_blank');
}
return <Card sx={{ maxWidth: params.width }} elevation={2}>
<CardMedia sx={{ height: params.height }}
component='img'
@ -37,16 +47,12 @@ export function ImageCard(props: ImageCardProps) {
<GridItem xs={8}>Scheduler: {params.scheduler}</GridItem>
<GridItem xs={12}>{params.prompt}</GridItem>
<GridItem xs={2}>
<Button onClick={() => window.open(output, '_blank')}>
<Button onClick={downloadImage}>
<Download />
</Button>
</GridItem>
<GridItem xs={2}>
<Button onClick={() => {
if (doesExist(props.onDelete)) {
props.onDelete(value);
}
}}>
<Button onClick={deleteImage}>
<Delete />
</Button>
</GridItem>

4
gui/src/components/ImageHistory.tsx
View File

@ -16,7 +16,7 @@ export function ImageHistory() {
const children = [];
if (state.history.loading) {
children.push(<LoadingCard height={512} width={512} />); // TODO: get dimensions from config
children.push(<LoadingCard key='loading' height={512} width={512} />); // TODO: get dimensions from config
}
function removeHistory(image: ApiResponse) {
@ -24,7 +24,7 @@ export function ImageHistory() {
}
if (images.length > 0) {
children.push(...images.map((item) => <ImageCard value={item} onDelete={removeHistory} />));
children.push(...images.map((item) => <ImageCard key={item.output} value={item} onDelete={removeHistory} />));
} else {
if (state.history.loading === false) {
children.push(<div>No results. Press Generate.</div>);

118
gui/src/components/OnnxWeb.tsx
View File

@ -38,66 +38,64 @@ export function OnnxWeb(props: OnnxWebProps) {
});
return (
<div>
<Container>
<Box sx={{ my: 4 }}>
<Typography variant='h3' gutterBottom>
ONNX Web
</Typography>
<Container>
<Box sx={{ my: 4 }}>
<Typography variant='h3' gutterBottom>
ONNX Web
</Typography>
</Box>
<Box sx={{ mx: 4, my: 4 }}>
<Stack direction='row' spacing={2}>
<QueryList
id='models'
labels={MODEL_LABELS}
name='Model'
result={models}
value={model}
onChange={(value) => {
setModel(value);
}}
/>
<QueryList
id='platforms'
labels={PLATFORM_LABELS}
name='Platform'
result={platforms}
value={platform}
onChange={(value) => {
setPlatform(value);
}}
/>
</Stack>
</Box>
<TabContext value={tab}>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<TabList onChange={(_e, idx) => {
setTab(idx);
}}>
<Tab label='txt2img' value='txt2img' />
<Tab label='img2img' value='img2img' />
<Tab label='inpaint' value='inpaint' />
<Tab label='settings' value='settings' />
</TabList>
</Box>
<Box sx={{ mx: 4, my: 4 }}>
<Stack direction='row' spacing={2}>
<QueryList
id='models'
labels={MODEL_LABELS}
name='Model'
result={models}
value={model}
onChange={(value) => {
setModel(value);
}}
/>
<QueryList
id='platforms'
labels={PLATFORM_LABELS}
name='Platform'
result={platforms}
value={platform}
onChange={(value) => {
setPlatform(value);
}}
/>
</Stack>
</Box>
<TabContext value={tab}>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<TabList onChange={(_e, idx) => {
setTab(idx);
}}>
<Tab label='txt2img' value='txt2img' />
<Tab label='img2img' value='img2img' />
<Tab label='inpaint' value='inpaint' />
<Tab label='settings' value='settings' />
</TabList>
</Box>
<TabPanel value='txt2img'>
<Txt2Img config={config} model={model} platform={platform} />
</TabPanel>
<TabPanel value='img2img'>
<Img2Img config={config} model={model} platform={platform} />
</TabPanel>
<TabPanel value='inpaint'>
<Inpaint config={config} model={model} platform={platform} />
</TabPanel>
<TabPanel value='settings'>
<Settings config={config} />
</TabPanel>
</TabContext>
<Divider variant='middle' />
<Box sx={{ mx: 4, my: 4 }}>
<ImageHistory />
</Box>
</Container>
</div>
<TabPanel value='txt2img'>
<Txt2Img config={config} model={model} platform={platform} />
</TabPanel>
<TabPanel value='img2img'>
<Img2Img config={config} model={model} platform={platform} />
</TabPanel>
<TabPanel value='inpaint'>
<Inpaint config={config} model={model} platform={platform} />
</TabPanel>
<TabPanel value='settings'>
<Settings config={config} />
</TabPanel>
</TabContext>
<Divider variant='middle' />
<Box sx={{ mx: 4, my: 4 }}>
<ImageHistory />
</Box>
</Container>
);
}