sneedgroup-holder/openOutpaint
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #106 from zero01101/testing

Browse source 
rename keepMask to keepUnmask
This commit is contained in:
tim h 2022-12-16 20:05:46 -06:00 committed by GitHub
commit 56c2a6740a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 77 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

150
js/ui/tool/dream.js
View file

@ -117,15 +117,15 @@ const _dream = async (endpoint, request) => {
* @param {BoundingBox} bb Generated image placement location * @param {BoundingBox} bb Generated image placement location
* @param {object} options Options * @param {object} options Options
* @param {number} [options.drawEvery=0.2 / request.n_iter] Percentage delta to draw progress at (by default 20% of each iteration) * @param {number} [options.drawEvery=0.2 / request.n_iter] Percentage delta to draw progress at (by default 20% of each iteration)
* @param {HTMLCanvasElement} [options.keepMask=null] Whether to force keep image under fully opaque mask * @param {HTMLCanvasElement} [options.keepUnmask=null] Whether to force keep image under fully opaque mask
* @param {number} [options.keepMaskBlur=0] Blur when applying full resolution back to the image * @param {number} [options.keepUnmaskBlur=0] Blur when applying full resolution back to the image
* @returns {Promise<HTMLImageElement | null>} * @returns {Promise<HTMLImageElement | null>}
*/ */
const _generate = async (endpoint, request, bb, options = {}) => { const _generate = async (endpoint, request, bb, options = {}) => {
defaultOpt(options, { defaultOpt(options, {
drawEvery: 0.2 / request.n_iter, drawEvery: 0.2 / request.n_iter,
keepMask: null, keepUnmask: null,
keepMaskBlur: 0, keepUnmaskBlur: 0,
}); });
events.tool.dream.emit({event: "generate", request}); events.tool.dream.emit({event: "generate", request});
@ -195,30 +195,34 @@ const _generate = async (endpoint, request, bb, options = {}) => {
} }
// Save masked content // Save masked content
let keepMaskCanvas = null; let keepUnmaskCanvas = null;
let keepMaskCtx = null; let keepUnmaskCtx = null;
if (options.keepMask) { if (options.keepUnmask) {
const visibleCanvas = uil.getVisible({ const visibleCanvas = uil.getVisible({
x: bb.x - options.keepMaskBlur, x: bb.x - options.keepUnmaskBlur,
y: bb.y - options.keepMaskBlur, y: bb.y - options.keepUnmaskBlur,
w: bb.w + 2 * options.keepMaskBlur, w: bb.w + 2 * options.keepUnmaskBlur,
h: bb.h + 2 * options.keepMaskBlur, h: bb.h + 2 * options.keepUnmaskBlur,
}); });
const visibleCtx = visibleCanvas.getContext("2d"); const visibleCtx = visibleCanvas.getContext("2d");
const ctx = options.keepMask.getContext("2d", {willReadFrequently: true}); const ctx = options.keepUnmask.getContext("2d", {willReadFrequently: true});
// Save current image // Save current image
keepMaskCanvas = document.createElement("canvas"); keepUnmaskCanvas = document.createElement("canvas");
keepMaskCanvas.width = options.keepMask.width; keepUnmaskCanvas.width = options.keepUnmask.width;
keepMaskCanvas.height = options.keepMask.height; keepUnmaskCanvas.height = options.keepUnmask.height;
keepMaskCtx = keepMaskCanvas.getContext("2d", {willReadFrequently: true}); keepUnmaskCtx = keepUnmaskCanvas.getContext("2d", {
willReadFrequently: true,
});
if ( if (
visibleCanvas.width !== keepMaskCanvas.width + 2 * options.keepMaskBlur || visibleCanvas.width !==
visibleCanvas.height !== keepMaskCanvas.height + 2 * options.keepMaskBlur keepUnmaskCanvas.width + 2 * options.keepUnmaskBlur ||
visibleCanvas.height !==
keepUnmaskCanvas.height + 2 * options.keepUnmaskBlur
) { ) {
throw new Error( throw new Error(
"[dream] Provided mask is not the same size as the bounding box" "[dream] Provided mask is not the same size as the bounding box"
@ -228,15 +232,15 @@ const _generate = async (endpoint, request, bb, options = {}) => {
// Cut out changing elements // Cut out changing elements
const blurMaskCanvas = document.createElement("canvas"); const blurMaskCanvas = document.createElement("canvas");
// A bit bigger to handle literal corner cases // A bit bigger to handle literal corner cases
blurMaskCanvas.width = bb.w + options.keepMaskBlur * 2; blurMaskCanvas.width = bb.w + options.keepUnmaskBlur * 2;
blurMaskCanvas.height = bb.h + options.keepMaskBlur * 2; blurMaskCanvas.height = bb.h + options.keepUnmaskBlur * 2;
const blurMaskCtx = blurMaskCanvas.getContext("2d"); const blurMaskCtx = blurMaskCanvas.getContext("2d");
const blurMaskData = blurMaskCtx.getImageData( const blurMaskData = blurMaskCtx.getImageData(
options.keepMaskBlur, options.keepUnmaskBlur,
options.keepMaskBlur, options.keepUnmaskBlur,
keepMaskCanvas.width, keepUnmaskCanvas.width,
keepMaskCanvas.height keepUnmaskCanvas.height
); );
const image = blurMaskData.data; const image = blurMaskData.data;
@ -244,8 +248,8 @@ const _generate = async (endpoint, request, bb, options = {}) => {
const maskData = ctx.getImageData( const maskData = ctx.getImageData(
0, 0,
0, 0,
options.keepMask.width, options.keepUnmask.width,
options.keepMask.height options.keepUnmask.height
); );
const mask = maskData.data; const mask = maskData.data;
@ -263,18 +267,18 @@ const _generate = async (endpoint, request, bb, options = {}) => {
blurMaskCtx.putImageData( blurMaskCtx.putImageData(
blurMaskData, blurMaskData,
options.keepMaskBlur, options.keepUnmaskBlur,
options.keepMaskBlur options.keepUnmaskBlur
); );
visibleCtx.filter = `blur(${options.keepMaskBlur}px)`; visibleCtx.filter = `blur(${options.keepUnmaskBlur}px)`;
visibleCtx.globalCompositeOperation = "destination-out"; visibleCtx.globalCompositeOperation = "destination-out";
visibleCtx.drawImage(blurMaskCanvas, 0, 0); visibleCtx.drawImage(blurMaskCanvas, 0, 0);
keepMaskCtx.drawImage( keepUnmaskCtx.drawImage(
visibleCanvas, visibleCanvas,
-options.keepMaskBlur, -options.keepUnmaskBlur,
-options.keepMaskBlur -options.keepUnmaskBlur
); );
} }
@ -304,14 +308,14 @@ const _generate = async (endpoint, request, bb, options = {}) => {
// Creates new canvas for blurred mask // Creates new canvas for blurred mask
const blurMaskCanvas = document.createElement("canvas"); const blurMaskCanvas = document.createElement("canvas");
blurMaskCanvas.width = bb.w + options.keepMaskBlur * 2; blurMaskCanvas.width = bb.w + options.keepUnmaskBlur * 2;
blurMaskCanvas.height = bb.h + options.keepMaskBlur * 2; blurMaskCanvas.height = bb.h + options.keepUnmaskBlur * 2;
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, bb.w, bb.h); ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, bb.w, bb.h);
if (keepMaskCanvas) { if (keepUnmaskCanvas) {
ctx.drawImage(keepMaskCanvas, 0, 0); ctx.drawImage(keepUnmaskCanvas, 0, 0);
} }
layer.ctx.clearRect(0, 0, layer.canvas.width, layer.canvas.height); layer.ctx.clearRect(0, 0, layer.canvas.width, layer.canvas.height);
@ -416,8 +420,8 @@ const _generate = async (endpoint, request, bb, options = {}) => {
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, bb.w, bb.h); ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, bb.w, bb.h);
if (keepMaskCanvas) { if (keepUnmaskCanvas) {
ctx.drawImage(keepMaskCanvas, 0, 0); ctx.drawImage(keepUnmaskCanvas, 0, 0);
} }
commands.runCommand("drawImage", "Image Dream", { commands.runCommand("drawImage", "Image Dream", {
@ -820,8 +824,8 @@ const dream_generate_callback = async (bb, resolution, state) => {
// Dream // Dream
_generate("img2img", request, bb, { _generate("img2img", request, bb, {
keepMask: state.keepMasked ? bbCanvas : null, keepUnmask: state.keepUnmasked ? bbCanvas : null,
keepMaskBlur: state.keepMaskedBlur, keepUnmaskBlur: state.keepUnmaskedBlur,
}); });
} }
}; };
@ -1020,8 +1024,8 @@ const dream_img2img_callback = (bb, resolution, state) => {
// Dream // Dream
_generate("img2img", request, bb, { _generate("img2img", request, bb, {
keepMask: state.keepMasked ? bbCanvas : null, keepUnmask: state.keepUnmasked ? bbCanvas : null,
keepMaskBlur: state.keepMaskedBlur, keepUnmaskBlur: state.keepUnmaskedBlur,
}); });
}; };
@ -1127,8 +1131,8 @@ const dreamTool = () =>
state.cursorSize = 512; state.cursorSize = 512;
state.snapToGrid = true; state.snapToGrid = true;
state.invertMask = false; state.invertMask = false;
state.keepMasked = true; state.keepUnmasked = true;
state.keepMaskedBlur = 8; state.keepUnmaskedBlur = 8;
state.overMaskPx = 0; state.overMaskPx = 0;
state.erasePrevCursor = () => state.erasePrevCursor = () =>
@ -1350,26 +1354,26 @@ const dreamTool = () =>
).label; ).label;
// Keep Masked Content Checkbox // Keep Masked Content Checkbox
state.ctxmenu.keepMaskedLabel = _toolbar_input.checkbox( state.ctxmenu.keepUnmaskedLabel = _toolbar_input.checkbox(
state, state,
"keepMasked", "keepUnmasked",
"Keep Masked", "Keep Unmasked",
() => { () => {
if (state.keepMasked) { if (state.keepUnmasked) {
state.ctxmenu.keepMaskedBlurSlider.classList.remove( state.ctxmenu.keepUnmaskedBlurSlider.classList.remove(
"invisible" "invisible"
); );
} else { } else {
state.ctxmenu.keepMaskedBlurSlider.classList.add("invisible"); state.ctxmenu.keepUnmaskedBlurSlider.classList.add("invisible");
} }
} }
).label; ).label;
// Keep Masked Content Blur Slider // Keep Masked Content Blur Slider
state.ctxmenu.keepMaskedBlurSlider = _toolbar_input.slider( state.ctxmenu.keepUnmaskedBlurSlider = _toolbar_input.slider(
state, state,
"keepMaskedBlur", "keepUnmaskedBlur",
"Keep Masked Blur", "Keep Unmasked Blur",
{ {
min: 0, min: 0,
max: 64, max: 64,
@ -1397,8 +1401,8 @@ const dreamTool = () =>
menu.appendChild(document.createElement("br")); menu.appendChild(document.createElement("br"));
menu.appendChild(state.ctxmenu.invertMaskLabel); menu.appendChild(state.ctxmenu.invertMaskLabel);
menu.appendChild(document.createElement("br")); menu.appendChild(document.createElement("br"));
menu.appendChild(state.ctxmenu.keepMaskedLabel); menu.appendChild(state.ctxmenu.keepUnmaskedLabel);
menu.appendChild(state.ctxmenu.keepMaskedBlurSlider); menu.appendChild(state.ctxmenu.keepUnmaskedBlurSlider);
menu.appendChild(state.ctxmenu.overMaskPxLabel); menu.appendChild(state.ctxmenu.overMaskPxLabel);
}, },
shortcut: "D", shortcut: "D",
@ -1480,8 +1484,8 @@ const img2imgTool = () =>
state.cursorSize = 512; state.cursorSize = 512;
state.snapToGrid = true; state.snapToGrid = true;
state.invertMask = true; state.invertMask = true;
state.keepMasked = true; state.keepUnmasked = true;
state.keepMaskedBlur = 8; state.keepUnmaskedBlur = 8;
state.fullResolution = false; state.fullResolution = false;
state.denoisingStrength = 0.7; state.denoisingStrength = 0.7;
@ -1812,21 +1816,21 @@ const img2imgTool = () =>
).label; ).label;
// Keep Masked Content Checkbox // Keep Masked Content Checkbox
state.ctxmenu.keepMaskedLabel = _toolbar_input.checkbox( state.ctxmenu.keepUnmaskedLabel = _toolbar_input.checkbox(
state, state,
"keepMasked", "keepUnmasked",
"Keep Masked", "Keep Unmasked",
() => { () => {
if (state.keepMasked) { if (state.keepUnmasked) {
state.ctxmenu.keepMaskedBlurSlider.classList.remove( state.ctxmenu.keepUnmaskedBlurSlider.classList.remove(
"invisible" "invisible"
); );
state.ctxmenu.keepMaskedBlurSliderLinebreak.classList.add( state.ctxmenu.keepUnmaskedBlurSliderLinebreak.classList.add(
"invisible" "invisible"
); );
} else { } else {
state.ctxmenu.keepMaskedBlurSlider.classList.add("invisible"); state.ctxmenu.keepUnmaskedBlurSlider.classList.add("invisible");
state.ctxmenu.keepMaskedBlurSliderLinebreak.classList.remove( state.ctxmenu.keepUnmaskedBlurSliderLinebreak.classList.remove(
"invisible" "invisible"
); );
} }
@ -1834,10 +1838,10 @@ const img2imgTool = () =>
).label; ).label;
// Keep Masked Content Blur Slider // Keep Masked Content Blur Slider
state.ctxmenu.keepMaskedBlurSlider = _toolbar_input.slider( state.ctxmenu.keepUnmaskedBlurSlider = _toolbar_input.slider(
state, state,
"keepMaskedBlur", "keepUnmaskedBlur",
"Keep Masked Blur", "Keep Unmasked Blur",
{ {
min: 0, min: 0,
max: 64, max: 64,
@ -1846,9 +1850,9 @@ const img2imgTool = () =>
} }
).slider; ).slider;
state.ctxmenu.keepMaskedBlurSliderLinebreak = state.ctxmenu.keepUnmaskedBlurSliderLinebreak =
document.createElement("br"); document.createElement("br");
state.ctxmenu.keepMaskedBlurSliderLinebreak.classList.add( state.ctxmenu.keepUnmaskedBlurSliderLinebreak.classList.add(
"invisible" "invisible"
); );
@ -1898,9 +1902,9 @@ const img2imgTool = () =>
menu.appendChild(document.createElement("br")); menu.appendChild(document.createElement("br"));
menu.appendChild(state.ctxmenu.invertMaskLabel); menu.appendChild(state.ctxmenu.invertMaskLabel);
menu.appendChild(document.createElement("br")); menu.appendChild(document.createElement("br"));
menu.appendChild(state.ctxmenu.keepMaskedLabel); menu.appendChild(state.ctxmenu.keepUnmaskedLabel);
menu.appendChild(state.ctxmenu.keepMaskedBlurSlider); menu.appendChild(state.ctxmenu.keepUnmaskedBlurSlider);
menu.appendChild(state.ctxmenu.keepMaskedBlurSliderLinebreak); menu.appendChild(state.ctxmenu.keepUnmaskedBlurSliderLinebreak);
menu.appendChild(state.ctxmenu.fullResolutionLabel); menu.appendChild(state.ctxmenu.fullResolutionLabel);
menu.appendChild(document.createElement("br")); menu.appendChild(document.createElement("br"));
menu.appendChild(state.ctxmenu.denoisingStrengthSlider); menu.appendChild(state.ctxmenu.denoisingStrengthSlider);