From 0376499cc77823df18459b63207a7aa5569791d7 Mon Sep 17 00:00:00 2001
From: Sean Sube <seansube@gmail.com>
Date: Fri, 6 Jan 2023 08:40:48 -0600
Subject: [PATCH] fix(gui): remove paragraph wrapping image details

---
 README.md                        |  1 +
 gui/src/api/client.ts            | 14 +++++++++-----
 gui/src/components/ImageCard.tsx | 14 ++++++--------
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index 93002edf..edf5d6bd 100644
--- a/README.md
+++ b/README.md
@@ -121,6 +121,7 @@ Install the following packages for AI:
 > pip install numpy>=1.20,<1.24   # version is important, 1.24 removed the deprecated np.float symbol
 > pip install accelerate diffusers transformers ftfy spacy scipy
 > pip install onnx onnxruntime torch
+# TODO: is pytorch needed?
 ```
 
 If you are running on Windows, install the DirectML ONNX runtime as well:
diff --git a/gui/src/api/client.ts b/gui/src/api/client.ts
index 46a87c52..9b4ac842 100644
--- a/gui/src/api/client.ts
+++ b/gui/src/api/client.ts
@@ -29,10 +29,14 @@ export interface ApiClient {
 
 export const STATUS_SUCCESS = 200;
 
+export function joinPath(...parts: Array<string>): string {
+  return parts.join('/');
+}
+
 export async function imageFromResponse(root: string, res: Response): Promise<ApiResponse> {
   if (res.status === STATUS_SUCCESS) {
     const data = await res.json() as ApiResponse;
-    const output = new URL(['output', data.output].join('/'), root).toString();
+    const output = new URL(joinPath('output', data.output), root).toString();
     return {
       output,
       params: data.params,
@@ -47,17 +51,17 @@ export function makeClient(root: string, f = fetch): ApiClient {
 
   return {
     async models(): Promise<Array<string>> {
-      const path = new URL('/settings/models', root);
+      const path = new URL(joinPath('settings', 'models'), root);
       const res = await f(path);
       return await res.json() as Array<string>;
     },
     async schedulers(): Promise<Array<string>> {
-      const path = new URL('/settings/schedulers', root);
+      const path = new URL(joinPath('settings', 'schedulers'), root);
       const res = await f(path);
       return await res.json() as Array<string>;
     },
     async platforms(): Promise<Array<string>> {
-      const path = new URL('/settings/platforms', root);
+      const path = new URL(joinPath('settings', 'platforms'), root);
       const res = await f(path);
       return await res.json() as Array<string>;
     },
@@ -66,7 +70,7 @@ export function makeClient(root: string, f = fetch): ApiClient {
         return pending;
       }
 
-      const url = new URL('/txt2img', root);
+      const url = new URL('txt2img', root);
       url.searchParams.append('cfg', params.cfg.toFixed(0));
       url.searchParams.append('steps', params.steps.toFixed(0));
 
diff --git a/gui/src/components/ImageCard.tsx b/gui/src/components/ImageCard.tsx
index b5a841b1..e0a36bc9 100644
--- a/gui/src/components/ImageCard.tsx
+++ b/gui/src/components/ImageCard.tsx
@@ -1,4 +1,4 @@
-import { Card, CardContent, CardMedia, List, Paper, Stack, Typography } from '@mui/material';
+import { Card, CardContent, CardMedia, Paper, Stack } from '@mui/material';
 import * as React from 'react';
 import { UseMutationResult } from 'react-query';
 
@@ -34,13 +34,11 @@ export function ImageCard(props: ImageCardProps) {
         title={params.prompt}
       />
       <CardContent>
-        <Typography variant='body2'>
-          <Stack spacing={1}>
-            <Paper>CFG: {params.cfg}</Paper>
-            <Paper>Steps: {params.steps}</Paper>
-            <Paper>Seed: {params.seed}</Paper>
-          </Stack>
-        </Typography>
+        <Stack spacing={2}>
+          <Paper>CFG: {params.cfg}</Paper>
+          <Paper>Steps: {params.steps}</Paper>
+          <Paper>Seed: {params.seed}</Paper>
+        </Stack>
       </CardContent>
     </Card>;
   }