apextoaster
/
onnx-web
1
0
Fork 0
Code Actions

fix(gui): show parameters in a grid in the image card

This commit is contained in:
Sean Sube 2023-01-06 10:45:18 -06:00
parent bbd0e938c7
commit a950343f1b
3 changed files with 36 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
gui/src/api/client.ts
View File

@ -14,9 +14,19 @@ export interface Txt2ImgParams {
seed?: string; seed?: string;
} }
export interface Txt2ImgResponse extends Txt2ImgParams {
model: string;
platform: string;
scheduler: string;
width: number;
height: number;
seed: string;
}
export interface ApiResponse { export interface ApiResponse {
output: string; output: string;
params: Txt2ImgParams; params: Txt2ImgResponse;
} }
export interface ApiClient { export interface ApiClient {

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

@ -1,4 +1,4 @@
import { Card, CardContent, CardMedia, Paper, Stack } from '@mui/material'; import { Box, Card, CardContent, CardMedia, Grid, Paper } from '@mui/material';
import * as React from 'react'; import * as React from 'react';
import { ApiResponse } from '../api/client.js'; import { ApiResponse } from '../api/client.js';
@ -18,11 +18,28 @@ export function ImageCard(props: ImageCardProps) {
title={params.prompt} title={params.prompt}
/> />
<CardContent> <CardContent>
<Stack spacing={2}> <Box>
<Paper>CFG: {params.cfg}</Paper> <Grid container spacing={2}>
<Paper>Steps: {params.steps}</Paper> <Grid item xs={4}>
<Paper>Seed: {params.seed}</Paper> <Paper>CFG: {params.cfg}</Paper>
</Stack> </Grid>
<Grid item xs={4}>
<Paper>Steps: {params.steps}</Paper>
</Grid>
<Grid item xs={4}>
<Paper>Size: {params.width}x{params.height}</Paper>
</Grid>
<Grid item xs={6}>
<Paper>Seed: {params.seed}</Paper>
</Grid>
<Grid item xs={6}>
<Paper>Scheduler: {params.scheduler}</Paper>
</Grid>
<Grid item xs={12}>
<Paper>{params.prompt}</Paper>
</Grid>
</Grid>
</Box>
</CardContent> </CardContent>
</Card>; </Card>;
} }

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

@ -1,7 +1,7 @@
import { Grid } from '@mui/material';
import { useState } from 'react'; import { useState } from 'react';
import * as React from 'react'; import * as React from 'react';
import { UseMutationResult } from 'react-query'; import { UseMutationResult } from 'react-query';
import { Grid, Stack } from '@mui/material';
export interface MutationHistoryProps<T> { export interface MutationHistoryProps<T> {
element: React.ComponentType<{value: T}>; element: React.ComponentType<{value: T}>;
@ -43,5 +43,5 @@ export function MutationHistory<T>(props: MutationHistoryProps<T>) {
} }
} }
return <Grid container spacing={2}>{children.slice(0, limit).map((child) => <Grid xs={6}>{child}</Grid>)}</Grid>; return <Grid container spacing={2}>{children.slice(0, limit).map((child) => <Grid item xs={6}>{child}</Grid>)}</Grid>;
} }