diff --git a/gui/src/components/input/MaskCanvas.tsx b/gui/src/components/input/MaskCanvas.tsx index b74e7fad..0a3d12b7 100644 --- a/gui/src/components/input/MaskCanvas.tsx +++ b/gui/src/components/input/MaskCanvas.tsx @@ -94,6 +94,7 @@ export function MaskCanvas(props: MaskCanvasProps) { const { canvas, ctx } = getClearContext(bufferRef); ctx.globalAlpha = FULL_OPACITY; ctx.drawImage(image, 0, 0, canvas.width, canvas.height); + URL.revokeObjectURL(src); drawBuffer(); @@ -166,6 +167,12 @@ export function MaskCanvas(props: MaskCanvasProps) { } setBackground(URL.createObjectURL(source)); + + // initialize the mask if it does not exist + if (doesExist(mask) === false) { + getClearContext(bufferRef); + maskState.current = MASK_STATE.dirty; + } } }, [source]); diff --git a/gui/src/components/tab/Img2Img.tsx b/gui/src/components/tab/Img2Img.tsx index 0ac2dc2e..43a7d325 100644 --- a/gui/src/components/tab/Img2Img.tsx +++ b/gui/src/components/tab/Img2Img.tsx @@ -1,4 +1,4 @@ -import { mustExist } from '@apextoaster/js-utils'; +import { doesExist, mustExist } from '@apextoaster/js-utils'; import { Box, Button, Stack } from '@mui/material'; import * as React from 'react'; import { useMutation, useQueryClient } from 'react-query'; @@ -63,7 +63,11 @@ export function Img2Img() { }} /> - + ; } diff --git a/gui/src/components/tab/Inpaint.tsx b/gui/src/components/tab/Inpaint.tsx index 1328a7f8..fb0893c6 100644 --- a/gui/src/components/tab/Inpaint.tsx +++ b/gui/src/components/tab/Inpaint.tsx @@ -1,4 +1,4 @@ -import { mustExist } from '@apextoaster/js-utils'; +import { doesExist, mustExist } from '@apextoaster/js-utils'; import { Box, Button, Stack } from '@mui/material'; import * as React from 'react'; import { useMutation, useQuery, useQueryClient } from 'react-query'; @@ -161,7 +161,11 @@ export function Inpaint() { - + ; } diff --git a/gui/src/components/tab/Txt2Img.tsx b/gui/src/components/tab/Txt2Img.tsx index 4eb9b454..8eb70058 100644 --- a/gui/src/components/tab/Txt2Img.tsx +++ b/gui/src/components/tab/Txt2Img.tsx @@ -65,7 +65,10 @@ export function Txt2Img() { /> - + ; } diff --git a/gui/src/components/tab/Upscale.tsx b/gui/src/components/tab/Upscale.tsx index 5754c81a..8e9bef4e 100644 --- a/gui/src/components/tab/Upscale.tsx +++ b/gui/src/components/tab/Upscale.tsx @@ -1,4 +1,4 @@ -import { mustExist } from '@apextoaster/js-utils'; +import { doesExist, mustExist } from '@apextoaster/js-utils'; import { Box, Button, Stack } from '@mui/material'; import * as React from 'react'; import { useMutation, useQueryClient } from 'react-query'; @@ -12,8 +12,6 @@ import { UpscaleControl } from '../control/UpscaleControl.js'; const { useContext } = React; export function Upscale() { - const config = mustExist(useContext(ConfigContext)); - async function uploadSource() { const { model, upscale } = state.getState(); @@ -46,7 +44,11 @@ export function Upscale() { }); }} /> - + ; }