feat(gui): add fill with white, toggle for outpainting
This commit is contained in:
parent
09c9b2c028
commit
0d53fdfe53
|
@ -46,6 +46,8 @@ export interface InpaintParams extends BaseImgParams {
|
|||
}
|
||||
|
||||
export interface OutpaintPixels {
|
||||
enabled: boolean;
|
||||
|
||||
left: number;
|
||||
right: number;
|
||||
top: number;
|
||||
|
|
|
@ -27,7 +27,7 @@ export function Inpaint(props: InpaintProps) {
|
|||
async function uploadSource(): Promise<void> {
|
||||
const outpaint = state.getState().outpaint; // TODO: seems shady
|
||||
|
||||
if (outpaint.bottom > 0 || outpaint.left > 0 || outpaint.right > 0 || outpaint.top > 0) {
|
||||
if (outpaint.enabled) {
|
||||
const output = await client.outpaint({
|
||||
...params,
|
||||
...outpaint,
|
||||
|
|
|
@ -233,8 +233,8 @@ export function MaskCanvas(props: MaskCanvasProps) {
|
|||
<Stack direction='row' spacing={4}>
|
||||
<NumericField
|
||||
label='Brush Color'
|
||||
min={0}
|
||||
max={255}
|
||||
min={COLORS.black}
|
||||
max={COLORS.white}
|
||||
step={1}
|
||||
value={brush.color}
|
||||
onChange={(color) => {
|
||||
|
@ -243,7 +243,7 @@ export function MaskCanvas(props: MaskCanvasProps) {
|
|||
/>
|
||||
<NumericField
|
||||
label='Brush Size'
|
||||
min={4}
|
||||
min={1}
|
||||
max={64}
|
||||
step={1}
|
||||
value={brush.size}
|
||||
|
@ -282,6 +282,16 @@ export function MaskCanvas(props: MaskCanvasProps) {
|
|||
}}>
|
||||
Fill with black
|
||||
</Button>
|
||||
<Button
|
||||
variant='outlined'
|
||||
startIcon={<FormatColorFill />}
|
||||
onClick={() => {
|
||||
floodCanvas(bufferRef, floodWhite);
|
||||
drawBuffer();
|
||||
save();
|
||||
}}>
|
||||
Fill with white
|
||||
</Button>
|
||||
<Button
|
||||
variant='outlined'
|
||||
startIcon={<Gradient />}
|
||||
|
@ -333,7 +343,11 @@ export function floodAbove(n: number): number {
|
|||
}
|
||||
|
||||
export function floodBlack(): number {
|
||||
return 0;
|
||||
return COLORS.black;
|
||||
}
|
||||
|
||||
export function floodWhite(): number {
|
||||
return COLORS.white;
|
||||
}
|
||||
|
||||
export function grayToRGB(n: number, o = 1.0): string {
|
||||
|
@ -355,7 +369,7 @@ function floodCanvas(ref: RefObject<HTMLCanvasElement>, flood: FloodFn) {
|
|||
pixels[i + 1] = final;
|
||||
pixels[i + 2] = final;
|
||||
// eslint-disable-next-line @typescript-eslint/no-magic-numbers
|
||||
pixels[i + 3] = 255;
|
||||
pixels[i + 3] = COLORS.white; // fully opaque
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -12,6 +12,7 @@ export function parseNumber(num: string, decimal = false): number {
|
|||
|
||||
export interface ImageControlProps {
|
||||
decimal?: boolean;
|
||||
disabled?: boolean;
|
||||
label: string;
|
||||
min: number;
|
||||
max: number;
|
||||
|
@ -22,10 +23,12 @@ export interface ImageControlProps {
|
|||
}
|
||||
|
||||
export function NumericField(props: ImageControlProps) {
|
||||
const { decimal, label, min, max, step, value } = props;
|
||||
const { decimal = false, disabled = false, label, min, max, step, value } = props;
|
||||
|
||||
return <Stack spacing={2}>
|
||||
<TextField
|
||||
label={label}
|
||||
disabled={disabled}
|
||||
variant='outlined'
|
||||
type='number'
|
||||
inputProps={{ min, max, step }}
|
||||
|
@ -37,6 +40,7 @@ export function NumericField(props: ImageControlProps) {
|
|||
}}
|
||||
/>
|
||||
<Slider
|
||||
disabled={disabled}
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import { mustExist } from '@apextoaster/js-utils';
|
||||
import { Stack } from '@mui/material';
|
||||
import { Check } from '@mui/icons-material';
|
||||
import { Stack, ToggleButton } from '@mui/material';
|
||||
import * as React from 'react';
|
||||
import { useContext } from 'react';
|
||||
import { useStore } from 'zustand';
|
||||
|
@ -21,8 +22,22 @@ export function OutpaintControl(props: OutpaintControlProps) {
|
|||
const setOutpaint = useStore(state, (s) => s.setOutpaint);
|
||||
|
||||
return <Stack direction='row' spacing={4}>
|
||||
<ToggleButton
|
||||
color='primary'
|
||||
selected={params.enabled}
|
||||
value='check'
|
||||
onChange={(event) => {
|
||||
setOutpaint({
|
||||
enabled: params.enabled === false,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Check />
|
||||
Outpainting
|
||||
</ToggleButton>
|
||||
<NumericField
|
||||
label='Left'
|
||||
disabled={params.enabled === false}
|
||||
min={0}
|
||||
max={config.width.max}
|
||||
step={config.width.step}
|
||||
|
@ -35,6 +50,7 @@ export function OutpaintControl(props: OutpaintControlProps) {
|
|||
/>
|
||||
<NumericField
|
||||
label='Right'
|
||||
disabled={params.enabled === false}
|
||||
min={0}
|
||||
max={config.width.max}
|
||||
step={config.width.step}
|
||||
|
@ -47,6 +63,7 @@ export function OutpaintControl(props: OutpaintControlProps) {
|
|||
/>
|
||||
<NumericField
|
||||
label='Top'
|
||||
disabled={params.enabled === false}
|
||||
min={0}
|
||||
max={config.height.max}
|
||||
step={config.height.step}
|
||||
|
@ -59,6 +76,7 @@ export function OutpaintControl(props: OutpaintControlProps) {
|
|||
/>
|
||||
<NumericField
|
||||
label='Bottom'
|
||||
disabled={params.enabled === false}
|
||||
min={0}
|
||||
max={config.height.max}
|
||||
step={config.height.step}
|
||||
|
|
|
@ -184,6 +184,7 @@ export function createStateSlices(base: ConfigParams) {
|
|||
|
||||
const createOutpaintSlice: StateCreator<OnnxState, [], [], OutpaintSlice> = (set) => ({
|
||||
outpaint: {
|
||||
enabled: false,
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
|
|
Loading…
Reference in New Issue