From 2328c5f46a76d7d08067f9fc3a9611000cdda83f Mon Sep 17 00:00:00 2001
From: Sean Sube <seansube@gmail.com>
Date: Sun, 8 Jan 2023 13:14:57 -0600
Subject: [PATCH] feat(gui): add strength to img2img controls

---
 gui/src/api/client.ts               |  1 +
 gui/src/components/Img2Img.tsx      | 13 +++++++++++++
 gui/src/components/NumericField.tsx |  2 +-
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/gui/src/api/client.ts b/gui/src/api/client.ts
index 76524a44..8c15e7f5 100644
--- a/gui/src/api/client.ts
+++ b/gui/src/api/client.ts
@@ -26,6 +26,7 @@ export interface BaseImgParams {
 
 export interface Img2ImgParams extends BaseImgParams {
   source: File;
+  strength: number;
 }
 
 export type Img2ImgResponse = Required<Omit<Img2ImgParams, 'file'>>;
diff --git a/gui/src/components/Img2Img.tsx b/gui/src/components/Img2Img.tsx
index 61e8297a..09129942 100644
--- a/gui/src/components/Img2Img.tsx
+++ b/gui/src/components/Img2Img.tsx
@@ -9,6 +9,7 @@ import { SCHEDULER_LABELS } from '../strings.js';
 import { ImageCard } from './ImageCard.js';
 import { ImageControl } from './ImageControl.js';
 import { MutationHistory } from './MutationHistory.js';
+import { NumericField } from './NumericField.js';
 import { QueryList } from './QueryList.js';
 
 const { useState } = React;
@@ -31,6 +32,7 @@ export function Img2Img(props: Img2ImgProps) {
       model,
       platform,
       scheduler,
+      strength,
       source: mustExist(source), // TODO: show an error if this doesn't exist
     });
   }
@@ -50,6 +52,7 @@ export function Img2Img(props: Img2ImgProps) {
   });
 
   const [source, setSource] = useState<File>();
+  const [strength, setStrength] = useState(0.5);
   const [params, setParams] = useState<BaseImgParams>({
     cfg: 6,
     seed: -1,
@@ -76,6 +79,16 @@ export function Img2Img(props: Img2ImgProps) {
       <ImageControl params={params} onChange={(newParams) => {
         setParams(newParams);
       }} />
+      <NumericField
+        label='Width'
+        min={0}
+        max={1}
+        step='any'
+        value={strength}
+        onChange={(value) => {
+          setStrength(value);
+        }}
+      />
       <Button onClick={() => upload.mutate()}>Generate</Button>
       <MutationHistory result={upload} limit={4} element={ImageCard}
         isEqual={(a, b) => a.output === b.output}
diff --git a/gui/src/components/NumericField.tsx b/gui/src/components/NumericField.tsx
index ffe13f5a..d089a499 100644
--- a/gui/src/components/NumericField.tsx
+++ b/gui/src/components/NumericField.tsx
@@ -6,7 +6,7 @@ export interface ImageControlProps {
   label: string;
   min: number;
   max: number;
-  step: number;
+  step: number | 'any';
   value: number;
 
   onChange?: (value: number) => void;