fix(gui): show parameters in a grid in the image card
This commit is contained in:
parent
bbd0e938c7
commit
a950343f1b
|
@ -14,9 +14,19 @@ export interface Txt2ImgParams {
|
|||
seed?: string;
|
||||
}
|
||||
|
||||
export interface Txt2ImgResponse extends Txt2ImgParams {
|
||||
model: string;
|
||||
platform: string;
|
||||
scheduler: string;
|
||||
|
||||
width: number;
|
||||
height: number;
|
||||
seed: string;
|
||||
}
|
||||
|
||||
export interface ApiResponse {
|
||||
output: string;
|
||||
params: Txt2ImgParams;
|
||||
params: Txt2ImgResponse;
|
||||
}
|
||||
|
||||
export interface ApiClient {
|
||||
|
|
|
@ -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 { ApiResponse } from '../api/client.js';
|
||||
|
@ -18,11 +18,28 @@ export function ImageCard(props: ImageCardProps) {
|
|||
title={params.prompt}
|
||||
/>
|
||||
<CardContent>
|
||||
<Stack spacing={2}>
|
||||
<Box>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={4}>
|
||||
<Paper>CFG: {params.cfg}</Paper>
|
||||
</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>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Paper>Scheduler: {params.scheduler}</Paper>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Paper>{params.prompt}</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>;
|
||||
}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import { Grid } from '@mui/material';
|
||||
import { useState } from 'react';
|
||||
import * as React from 'react';
|
||||
import { UseMutationResult } from 'react-query';
|
||||
import { Grid, Stack } from '@mui/material';
|
||||
|
||||
export interface MutationHistoryProps<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>;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue