1
0
Fork 0

feat(gui): add blend strength to inpainting controls

This commit is contained in:
Sean Sube 2023-01-17 17:59:07 -06:00
parent d2c7fa97e7
commit 691aeabfd9
3 changed files with 19 additions and 0 deletions

View File

@ -47,6 +47,7 @@ export interface InpaintParams extends BaseImgParams {
filter: string; filter: string;
noise: string; noise: string;
strength: number;
} }
export interface OutpaintPixels { export interface OutpaintPixels {
@ -289,6 +290,7 @@ export function makeClient(root: string, f = fetch): ApiClient {
url.searchParams.append('filter', params.filter); url.searchParams.append('filter', params.filter);
url.searchParams.append('noise', params.noise); url.searchParams.append('noise', params.noise);
url.searchParams.append('strength', params.strength.toFixed(FIXED_FLOAT));
if (doesExist(upscale)) { if (doesExist(upscale)) {
appendUpscaleToURL(url, upscale); appendUpscaleToURL(url, upscale);

View File

@ -10,6 +10,7 @@ import { MASK_LABELS, NOISE_LABELS } from '../strings.js';
import { ImageControl } from './ImageControl.js'; import { ImageControl } from './ImageControl.js';
import { ImageInput } from './ImageInput.js'; import { ImageInput } from './ImageInput.js';
import { MaskCanvas } from './MaskCanvas.js'; import { MaskCanvas } from './MaskCanvas.js';
import { NumericField } from './NumericField.js';
import { OutpaintControl } from './OutpaintControl.js'; import { OutpaintControl } from './OutpaintControl.js';
import { QueryList } from './QueryList.js'; import { QueryList } from './QueryList.js';
import { UpscaleControl } from './UpscaleControl.js'; import { UpscaleControl } from './UpscaleControl.js';
@ -56,6 +57,8 @@ export function Inpaint() {
const noise = useStore(state, (s) => s.inpaint.noise); const noise = useStore(state, (s) => s.inpaint.noise);
const mask = useStore(state, (s) => s.inpaint.mask); const mask = useStore(state, (s) => s.inpaint.mask);
const source = useStore(state, (s) => s.inpaint.source); const source = useStore(state, (s) => s.inpaint.source);
const strength = useStore(state, (s) => s.inpaint.strength);
// eslint-disable-next-line @typescript-eslint/unbound-method // eslint-disable-next-line @typescript-eslint/unbound-method
const setInpaint = useStore(state, (s) => s.setInpaint); const setInpaint = useStore(state, (s) => s.setInpaint);
// eslint-disable-next-line @typescript-eslint/unbound-method // eslint-disable-next-line @typescript-eslint/unbound-method
@ -108,6 +111,18 @@ export function Inpaint() {
}} }}
/> />
<Stack direction='row' spacing={2}> <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 */} {/* TODO: numeric input for blend strength */}
<QueryList <QueryList
id='masks' id='masks'

View File

@ -157,6 +157,7 @@ export function createStateSlices(base: ConfigParams) {
mask: null, mask: null,
noise: 'histogram', noise: 'histogram',
source: null, source: null,
strength: 1.0,
}, },
setInpaint(params) { setInpaint(params) {
set((prev) => ({ set((prev) => ({
@ -174,6 +175,7 @@ export function createStateSlices(base: ConfigParams) {
mask: null, mask: null,
noise: 'histogram', noise: 'histogram',
source: null, source: null,
strength: 1.0,
}, },
}); });
}, },