feat(gui): add seed to image controls with random button (fixes #16)

gui/package.json

@@ -10,6 +10,7 @@
     "@apextoaster/js-utils": "^0.5.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "@mui/icons-material": "^5.11.0",
     "@mui/lab": "^5.0.0-alpha.114",
     "@mui/material": "^5.11.3",
     "@types/node": "^18.11.18",

gui/src/api/client.ts

@@ -11,7 +11,7 @@ export interface Txt2ImgParams {
 
   width?: number;
   height?: number;
-  seed?: string;
+  seed?: number;
 }
 
 export interface Txt2ImgResponse extends Txt2ImgParams {
@@ -21,7 +21,7 @@ export interface Txt2ImgResponse extends Txt2ImgParams {
 
   width: number;
   height: number;
-  seed: string;
+  seed: number;
 }
 
 export interface ApiResponse {
@@ -93,7 +93,7 @@ export function makeClient(root: string, f = fetch): ApiClient {
       }
 
       if (doesExist(params.seed)) {
-        url.searchParams.append('seed', params.seed);
+        url.searchParams.append('seed', params.seed.toFixed(0));
       }
 
       if (doesExist(params.model)) {

gui/src/components/ImageControl.tsx

@@ -1,11 +1,13 @@
 import { doesExist } from '@apextoaster/js-utils';
-import { Stack } from '@mui/material';
+import { IconButton, Stack } from '@mui/material';
+import { Casino } from '@mui/icons-material';
 import * as React from 'react';
 
 import { NumericField } from './NumericField';
 
 export interface ImageParams {
   cfg: number;
+  seed: number;
   steps: number;
   width: number;
   height: number;
@@ -84,5 +86,33 @@ export function ImageControl(props: ImageControlProps) {
         }}
       />
     </Stack>
+    <Stack direction='row' spacing={4}>
+      <NumericField
+        label='Seed'
+        min={-1}
+        max={Number.MAX_SAFE_INTEGER}
+        step={1}
+        value={params.seed}
+        onChange={(seed) => {
+          if (doesExist(props.onChange)) {
+            props.onChange({
+              ...params,
+              seed,
+            });
+          }
+        }}
+      />
+      <IconButton onClick={() => {
+        const seed = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER);
+        if (doesExist(props.onChange)) {
+          props.onChange({
+            ...params,
+            seed,
+          });
+        }
+      }}>
+        <Casino />
+      </IconButton>
+    </Stack>
   </Stack>;
 }

gui/src/components/Txt2Img.tsx

@@ -41,6 +41,7 @@ export function Txt2Img(props: Txt2ImgProps) {
 
   const [params, setParams] = useState<ImageParams>({
     cfg: 6,
+    seed: -1,
     steps: 25,
     width: 512,
     height: 512,

gui/yarn.lock

@@ -372,6 +372,13 @@
   resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.11.3.tgz#72c04a9f12b29186877992648d7cf1c22b95ba5c"
   integrity sha512-Bgb6//KtxY7IC7M5Pa5RKFX1wttc213mqpKqydnz3wn4BGDXfA5c0vf5nTu5zqsJeB4T3ysAJTRJhQ/E1GsZDQ==
 
+"@mui/icons-material@^5.11.0":
+  version "5.11.0"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.11.0.tgz#9ea6949278b2266d2683866069cd43009eaf6464"
+  integrity sha512-I2LaOKqO8a0xcLGtIozC9xoXjZAto5G5gh0FYUMAlbsIHNHIjn4Xrw9rvjY20vZonyiGrZNMAlAXYkY6JvhF6A==
+  dependencies:
+    "@babel/runtime" "^7.20.6"
+
 "@mui/lab@^5.0.0-alpha.114":
   version "5.0.0-alpha.114"
   resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.114.tgz#af4a1893a66bd1b99e8c4f15e51e8db51c094826"