fix(gui): remove paragraph wrapping image details

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:

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));
 

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}>
+        <Stack spacing={2}>
           <Paper>CFG: {params.cfg}</Paper>
           <Paper>Steps: {params.steps}</Paper>
           <Paper>Seed: {params.seed}</Paper>
         </Stack>
-        </Typography>
       </CardContent>
     </Card>;
   }