apextoaster
/
onnx-web
1
0
Fork 0
Code Actions

lint(gui): clean up inpainting constants, styles

This commit is contained in:
Sean Sube 2023-01-08 21:14:24 -06:00
parent 5e712923db
commit 1e2321f843
2 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
gui/.eslintrc.json
View File

@ -210,6 +210,7 @@
"ignore": [ "ignore": [
0, 0,
1, 1,
2,
10 10
], ],
"ignoreEnums": true "ignoreEnums": true

27
gui/src/components/Inpaint.tsx
View File

@ -1,4 +1,3 @@
/* eslint-disable @typescript-eslint/no-magic-numbers */
import { doesExist, mustExist } from '@apextoaster/js-utils'; import { doesExist, mustExist } from '@apextoaster/js-utils';
import { FormatColorFill, Gradient } from '@mui/icons-material'; import { FormatColorFill, Gradient } from '@mui/icons-material';
import { Box, Button, Stack } from '@mui/material'; import { Box, Button, Stack } from '@mui/material';
@ -16,15 +15,23 @@ import { QueryList } from './QueryList.js';
const { useEffect, useRef, useState } = React; const { useEffect, useRef, useState } = React;
export const DEFAULT_BRUSH = 8;
export const FULL_CIRCLE = 2 * Math.PI; export const FULL_CIRCLE = 2 * Math.PI;
export const PIXEL_SIZE = 4;
export const PIXEL_WEIGHT = 3;
export const COLORS = { export const COLORS = {
black: 0, black: 0,
white: 255, white: 255,
}; };
export const THRESHOLDS = {
lower: 34,
upper: 224,
};
export function floodBelow(n: number): number { export function floodBelow(n: number): number {
if (n < 224) { if (n < THRESHOLDS.upper) {
return COLORS.black; return COLORS.black;
} else { } else {
return COLORS.white; return COLORS.white;
@ -32,7 +39,7 @@ export function floodBelow(n: number): number {
} }
export function floodAbove(n: number): number { export function floodAbove(n: number): number {
if (n > 32) { if (n > THRESHOLDS.lower) {
return COLORS.white; return COLORS.white;
} else { } else {
return COLORS.black; return COLORS.black;
@ -104,8 +111,8 @@ export function Inpaint(props: InpaintProps) {
for (let x = 0; x < canvas.width; ++x) { for (let x = 0; x < canvas.width; ++x) {
for (let y = 0; y < canvas.height; ++y) { for (let y = 0; y < canvas.height; ++y) {
const i = (y * canvas.width * 4) + (x * 4); const i = (y * canvas.width * PIXEL_SIZE) + (x * PIXEL_SIZE);
const hue = (pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3; const hue = (pixels[i] + pixels[i + 1] + pixels[i + 2]) / PIXEL_WEIGHT;
pixels[i] = hue; pixels[i] = hue;
pixels[i + 1] = hue; pixels[i + 1] = hue;
pixels[i + 2] = hue; pixels[i + 2] = hue;
@ -123,8 +130,8 @@ export function Inpaint(props: InpaintProps) {
for (let x = 0; x < canvas.width; ++x) { for (let x = 0; x < canvas.width; ++x) {
for (let y = 0; y < canvas.height; ++y) { for (let y = 0; y < canvas.height; ++y) {
const i = (y * canvas.width * 4) + (x * 4); const i = (y * canvas.width * PIXEL_SIZE) + (x * PIXEL_SIZE);
const hue = (pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3; const hue = (pixels[i] + pixels[i + 1] + pixels[i + 2]) / PIXEL_WEIGHT;
const final = flooder(hue); const final = flooder(hue);
pixels[i] = final; pixels[i] = final;
@ -147,7 +154,7 @@ export function Inpaint(props: InpaintProps) {
const [painting, setPainting] = useState(false); const [painting, setPainting] = useState(false);
const [brushColor, setBrushColor] = useState(0); const [brushColor, setBrushColor] = useState(0);
const [brushSize, setBrushSize] = useState(4); const [brushSize, setBrushSize] = useState(DEFAULT_BRUSH);
const [source, setSource] = useState<File>(); const [source, setSource] = useState<File>();
const [params, setParams] = useState<BaseImgParams>({ const [params, setParams] = useState<BaseImgParams>({
@ -252,7 +259,7 @@ export function Inpaint(props: InpaintProps) {
}} }}
/> />
<Button <Button
startIcon={<FormatColorFill htmlColor='black' />} startIcon={<FormatColorFill />}
onClick={() => floodMask(floodBelow)}> onClick={() => floodMask(floodBelow)}>
Gray to black Gray to black
</Button> </Button>
@ -262,7 +269,7 @@ export function Inpaint(props: InpaintProps) {
Grayscale Grayscale
</Button> </Button>
<Button <Button
startIcon={<FormatColorFill htmlColor='white' sx={{ bgcolor: 'text.primary' }} />} startIcon={<FormatColorFill />}
onClick={() => floodMask(floodAbove)}> onClick={() => floodMask(floodAbove)}>
Gray to white Gray to white
</Button> </Button>