From 4d6560aaba1a0964193ea5c8d72408dc4ed72296 Mon Sep 17 00:00:00 2001
From: Sean Sube <seansube@gmail.com>
Date: Mon, 16 Jan 2023 07:31:59 -0600
Subject: [PATCH] fix(gui): read image size from its own field

---
 gui/src/api/client.ts              | 8 ++++++--
 gui/src/components/ImageCard.tsx   | 8 ++++----
 gui/src/components/LoadingCard.tsx | 6 +++---
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/gui/src/api/client.ts b/gui/src/api/client.ts
index ed3ba66a..45912b94 100644
--- a/gui/src/api/client.ts
+++ b/gui/src/api/client.ts
@@ -70,7 +70,11 @@ export interface ApiResponse {
     key: string;
     url: string;
   };
-  params: Txt2ImgResponse;
+  params: Required<BaseImgParams>;
+  size: {
+    width: number;
+    height: number;
+  };
 }
 
 export interface ApiReady {
@@ -307,11 +311,11 @@ export async function parseApiResponse(root: string, res: Response): Promise<Api
     const data = await res.json() as LimitedResponse;
     const url = makeApiUrl(root, 'output', data.output).toString();
     return {
+      ...data,
       output: {
         key: data.output,
         url,
       },
-      params: data.params,
     };
   } else {
     throw new Error('request error');
diff --git a/gui/src/components/ImageCard.tsx b/gui/src/components/ImageCard.tsx
index 0c7b2517..d9a97ce0 100644
--- a/gui/src/components/ImageCard.tsx
+++ b/gui/src/components/ImageCard.tsx
@@ -22,7 +22,7 @@ export function GridItem(props: { xs: number; children: React.ReactNode }) {
 
 export function ImageCard(props: ImageCardProps) {
   const { value } = props;
-  const { params, output } = value;
+  const { params, output, size } = value;
 
   const state = mustExist(useContext(StateContext));
   // eslint-disable-next-line @typescript-eslint/unbound-method
@@ -59,8 +59,8 @@ export function ImageCard(props: ImageCardProps) {
     window.open(output.url, '_blank');
   }
 
-  return <Card sx={{ maxWidth: params.width }} elevation={2}>
-    <CardMedia sx={{ height: params.height }}
+  return <Card sx={{ maxWidth: size.width }} elevation={2}>
+    <CardMedia sx={{ height: size.height }}
       component='img'
       image={output.url}
       title={params.prompt}
@@ -70,7 +70,7 @@ export function ImageCard(props: ImageCardProps) {
         <Grid container spacing={2}>
           <GridItem xs={4}>CFG: {params.cfg}</GridItem>
           <GridItem xs={4}>Steps: {params.steps}</GridItem>
-          <GridItem xs={4}>Size: {params.width}x{params.height}</GridItem>
+          <GridItem xs={4}>Size: {size.width}x{size.height}</GridItem>
           <GridItem xs={4}>Seed: {params.seed}</GridItem>
           <GridItem xs={8}>Scheduler: {params.scheduler}</GridItem>
           <GridItem xs={12}>{params.prompt}</GridItem>
diff --git a/gui/src/components/LoadingCard.tsx b/gui/src/components/LoadingCard.tsx
index b9415395..b1683fce 100644
--- a/gui/src/components/LoadingCard.tsx
+++ b/gui/src/components/LoadingCard.tsx
@@ -31,9 +31,9 @@ export function LoadingCard(props: LoadingCardProps) {
     }
   }, [ready.status, ready.data?.ready]);
 
-  return <Card sx={{ maxWidth: props.loading.params.width }}>
-    <CardContent sx={{ height: props.loading.params.height }}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: props.loading.params.height }}>
+  return <Card sx={{ maxWidth: props.loading.size.width }}>
+    <CardContent sx={{ height: props.loading.size.height }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: props.loading.size.height }}>
         <CircularProgress />
       </div>
     </CardContent>