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

gui/src/api/client.ts

@@ -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 {

gui/src/components/ImageCard.tsx

@@ -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}>
-        <Paper>CFG: {params.cfg}</Paper>
-        <Paper>Steps: {params.steps}</Paper>
-        <Paper>Seed: {params.seed}</Paper>
-      </Stack>
+      <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>
+          </Grid>
+          <Grid item xs={6}>
+            <Paper>Scheduler: {params.scheduler}</Paper>
+          </Grid>
+          <Grid item xs={12}>
+            <Paper>{params.prompt}</Paper>
+          </Grid>
+        </Grid>
+      </Box>
     </CardContent>
   </Card>;
 }

gui/src/components/MutationHistory.tsx

@@ -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>;
 }