feat(gui): add blend strength to inpainting controls

ssube · Jan 17, 2023 · 691aeab · 691aeab
1 parent d2c7fa9
commit 691aeab
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 0 deletions.
diff --git a/gui/src/client.ts b/gui/src/client.ts
@@ -47,6 +47,7 @@ export interface InpaintParams extends BaseImgParams {
 
   filter: string;
   noise: string;
+  strength: number;
 }
 
 export interface OutpaintPixels {
@@ -289,6 +290,7 @@ export function makeClient(root: string, f = fetch): ApiClient {
 
       url.searchParams.append('filter', params.filter);
       url.searchParams.append('noise', params.noise);
+      url.searchParams.append('strength', params.strength.toFixed(FIXED_FLOAT));
 
       if (doesExist(upscale)) {
         appendUpscaleToURL(url, upscale);

diff --git a/gui/src/components/Inpaint.tsx b/gui/src/components/Inpaint.tsx
@@ -10,6 +10,7 @@ import { MASK_LABELS, NOISE_LABELS } from '../strings.js';
 import { ImageControl } from './ImageControl.js';
 import { ImageInput } from './ImageInput.js';
 import { MaskCanvas } from './MaskCanvas.js';
+import { NumericField } from './NumericField.js';
 import { OutpaintControl } from './OutpaintControl.js';
 import { QueryList } from './QueryList.js';
 import { UpscaleControl } from './UpscaleControl.js';
@@ -56,6 +57,8 @@ export function Inpaint() {
   const noise = useStore(state, (s) => s.inpaint.noise);
   const mask = useStore(state, (s) => s.inpaint.mask);
   const source = useStore(state, (s) => s.inpaint.source);
+  const strength = useStore(state, (s) => s.inpaint.strength);
+
   // eslint-disable-next-line @typescript-eslint/unbound-method
   const setInpaint = useStore(state, (s) => s.setInpaint);
   // eslint-disable-next-line @typescript-eslint/unbound-method
@@ -108,6 +111,18 @@ export function Inpaint() {
         }}
       />
       <Stack direction='row' spacing={2}>
+        <NumericField
+          label='Strength'
+          min={config.strength.min}
+          max={config.strength.max}
+          step={config.strength.step}
+          value={strength}
+          onChange={(value) => {
+            setInpaint({
+              strength: value,
+            });
+          }}
+        />
         {/* TODO: numeric input for blend strength */}
         <QueryList
           id='masks'

diff --git a/gui/src/state.ts b/gui/src/state.ts
@@ -157,6 +157,7 @@ export function createStateSlices(base: ConfigParams) {
       mask: null,
       noise: 'histogram',
       source: null,
+      strength: 1.0,
     },
     setInpaint(params) {
       set((prev) => ({
@@ -174,6 +175,7 @@ export function createStateSlices(base: ConfigParams) {
           mask: null,
           noise: 'histogram',
           source: null,
+          strength: 1.0,
         },
       });
     },