feat(gui): add blend strength to inpainting controls
This commit is contained in:
parent
d2c7fa97e7
commit
691aeabfd9
|
@ -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);
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue