removed redundant overmask toggle

overmaskpx = 0 effectively disables it anyway sets overmaskpx to a localstorage option removes moot "plain" mask monitor
zero01101 · Nov 20, 2022 · cf07ef2 · cf07ef2
1 parent 0ab96c0
commit cf07ef2
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 46 deletions.
diff --git a/README.md b/README.md
@@ -17,7 +17,7 @@ this is a completely vanilla javascript and html canvas outpainting convenience
   - easily change samplers/steps/CFG/etc options for each dream summoned from the latent void 
   - optional right-click to erase output image under cursor
   - optional grid snapping for precision
-  - optional overmasking for potentially better seams between outpaints and it _sorta_ works currently but it needs fixing
+  - optional overmasking for potentially better seams between outpaints and it _sorta_ works currently but it needs fixing - set overmask px value to 0 to disable the feature
   - optional hi-res fix for blank/txt2img dreams which, if enabled, uses image width/height / 2 as firstpass size
   - import arbitrary images and superimpose on the canvas wherever you'd like ([extra fun with transparent .pngs!](#arbitrary_transparent)) 
   - "temporary" monitors at the bottom to see exactly what mask/image you're feeding img2img, no i'm certainly not using them as actual imagedata sources or anything

diff --git a/index.html b/index.html
@@ -73,9 +73,7 @@
             <input type="checkbox" id="cbxErase" onchange="changeEraseMode()" disabled="disabled"><br />
             <label for="cbxHRFix">Auto txt2img HRfix?</label>
             <input type="checkbox" id="cbxHRFix" onchange="changeHiResFix()"><br />
-            <label for="cbxOverMask">Overmasking?</label>
-            <input type="checkbox" id="cbxOverMask" onchange="changeOverMask()" checked="checked"><br />
-            <label for="overMaskPx">Overmask px:</label>
+            <label for="overMaskPx">Overmask px (0 to disable):</label>
             <input type="number" id="overMaskPx" onchange="changeOverMaskPx()" min="0" max="128" value="16"
                 step="1" /><br />
             <label for="maskBlur">Mask blur:</label>
@@ -154,9 +152,9 @@
         </div>
         <div id="masks" class="masks">
             <div>
-                <canvas id="maskCanvasMonitor" class="maskCanvasMonitor" width="512" height="512">
-                    <p>lol ur browser sucks</p>
-                </canvas><br />
+                <!-- <canvas id="maskCanvasMonitor" class="maskCanvasMonitor" width="512" height="512">
+                        <p>lol ur browser sucks</p>
+                    </canvas><br /> -->
                 <canvas id="overMaskCanvasMonitor" class="overMaskCanvasMonitor" width="512" height="512">
                     <p>lol ur browser sucks</p>
                 </canvas><br />

diff --git a/js/index.js b/js/index.js
@@ -107,9 +107,7 @@ var backupMaskChunk = null;
 var backupMaskX = null;
 var backupMaskY = null;
 var totalImagesReturned;
-// var maskEdgePixels = {};
-var overMask = true;
-var overMaskPx = 10;
+var overMaskPx = 16;
 var drawTargets = []; // is this needed?  i only draw the last one anyway...
 var dropTargets = []; // uhhh yeah similar to the above but for arbitrary dropped images
 var arbitraryImage;
@@ -156,7 +154,6 @@ function startup() {
     changeSnapMode();
     changeMaskBlur();
     changeSeed();
-    changeOverMask();
     changeOverMaskPx();
     changeHiResFix();
     changeEnableErasing();
@@ -522,21 +519,18 @@ function mouseUp(evt) {
                 //check if there's image data already there
                 // console.log(downX + ":" + downY + " :: " + this.isCanvasBlank(downX, downY));
                 if (!isCanvasBlank(drawIt.x, drawIt.y, drawIt.w, drawIt.h, imgCanvas)) {
-                    // img2img
+                    // image exists, set up for img2img
                     var mainCanvasCtx = document.getElementById("canvas").getContext("2d");
                     const imgChunk = mainCanvasCtx.getImageData(drawIt.x, drawIt.y, drawIt.w, drawIt.h); // imagedata object of the image being outpainted
                     const imgChunkData = imgChunk.data; // imagedata.data object, a big inconvenient uint8clampedarray
                     // these are the 3 mask monitors on the bottom of the page
-                    var maskCanvas = document.getElementById("maskCanvasMonitor");
                     var initImgCanvas = document.getElementById("initImgCanvasMonitor");
                     var overMaskCanvas = document.getElementById("overMaskCanvasMonitor");
-                    overMaskCanvas.width = initImgCanvas.width = maskCanvas.width = target.w;
-                    overMaskCanvas.height = initImgCanvas.height = maskCanvas.height = target.h;
-                    var maskCanvasCtx = maskCanvas.getContext("2d");
+                    overMaskCanvas.width = initImgCanvas.width = target.w; //maskCanvas.width = target.w;
+                    overMaskCanvas.height = initImgCanvas.height = target.h; //maskCanvas.height = target.h;
                     var initImgCanvasCtx = initImgCanvas.getContext("2d");
                     var overMaskCanvasCtx = overMaskCanvas.getContext("2d");
                     // get blank pixels to use as mask
-                    const maskImgData = maskCanvasCtx.createImageData(drawIt.w, drawIt.h);
                     const initImgData = mainCanvasCtx.createImageData(drawIt.w, drawIt.h);
                     const overMaskImgData = overMaskCanvasCtx.createImageData(drawIt.w, drawIt.h);
                     // cover entire masks in black before adding masked areas
@@ -545,12 +539,7 @@ function mouseUp(evt) {
                         // l->r, top->bottom, R G B A pixel values in a big ol array
                         // make a simple mask            
                         if (imgChunkData[i + 3] == 0) { // rgba pixel values, 4th one is alpha, if it's 0 there's "nothing there" in the image display canvas and its time to outpaint
-                            maskImgData.data[i] = 255; // white mask gets painted over
-                            maskImgData.data[i + 1] = 255;
-                            maskImgData.data[i + 2] = 255;
-                            maskImgData.data[i + 3] = 255;
-
-                            overMaskImgData.data[i] = 255; //lets just set this up now
+                            overMaskImgData.data[i] = 255; // white mask gets painted over
                             overMaskImgData.data[i + 1] = 255;
                             overMaskImgData.data[i + 2] = 255;
                             overMaskImgData.data[i + 3] = 255;
@@ -561,15 +550,10 @@ function mouseUp(evt) {
                             initImgData.data[i + 2] = 0;
                             initImgData.data[i + 3] = 255;
                         } else { // leave these pixels alone 
-                            maskImgData.data[i] = 0; // black mask gets ignored for in/outpainting
-                            maskImgData.data[i + 1] = 0;
-                            maskImgData.data[i + 2] = 0;
-                            maskImgData.data[i + 3] = 255; // but it still needs an opaque alpha channel 
-
-                            overMaskImgData.data[i] = 0;
+                            overMaskImgData.data[i] = 0; // black mask gets ignored for in/outpainting
                             overMaskImgData.data[i + 1] = 0;
                             overMaskImgData.data[i + 2] = 0;
-                            overMaskImgData.data[i + 3] = 255;
+                            overMaskImgData.data[i + 3] = 255; // but it still needs an opaque alpha channel 
 
                             initImgData.data[i] = imgChunkData[i]; // put the original picture back in the painted area
                             initImgData.data[i + 1] = imgChunkData[i + 1];
@@ -685,10 +669,6 @@ function mouseUp(evt) {
                     const maskChunkData = maskChunk.data;
                     for (let i = 0; i < maskChunkData.length; i += 4) {
                         if (maskChunkData[i + 3] != 0) {
-                            maskImgData.data[i] = 255;
-                            maskImgData.data[i + 1] = 255;
-                            maskImgData.data[i + 2] = 255;
-                            maskImgData.data[i + 3] = 255;
                             overMaskImgData.data[i] = 255;
                             overMaskImgData.data[i + 1] = 255;
                             overMaskImgData.data[i + 2] = 255;
@@ -707,21 +687,17 @@ function mouseUp(evt) {
                     }
                     maskPaintCtx.putImageData(clearArea, drawIt.x, drawIt.y);
                     // mask monitors
-                    maskCanvasCtx.putImageData(maskImgData, 0, 0);
-                    var maskBase64 = maskCanvas.toDataURL();
                     overMaskCanvasCtx.putImageData(overMaskImgData, 0, 0); // :pray:
                     var overMaskBase64 = overMaskCanvas.toDataURL();
                     initImgCanvasCtx.putImageData(initImgData, 0, 0);
                     var initImgBase64 = initImgCanvas.toDataURL();
-                    // img2img
+                    // anyway all that to say NOW let's run img2img
                     endpoint = "img2img";
-                    var selectedMask = overMask ? overMaskBase64 : maskBase64;
-                    stableDiffusionData.mask = selectedMask;
-                    // stableDiffusionData.mask = maskBase64;
+                    stableDiffusionData.mask = overMaskBase64;
                     stableDiffusionData.init_images = [initImgBase64];
                     // slightly more involved than txt2img
                 } else {
-                    // txt2img
+                    // time to run txt2img
                     endpoint = "txt2img";
                     // easy enough
                 }
@@ -782,12 +758,9 @@ function changeSeed() {
     localStorage.setItem("seed", stableDiffusionData.seed);
 }
 
-function changeOverMask() {
-    overMask = document.getElementById("cbxOverMask").checked;
-}
-
 function changeOverMaskPx() {
     overMaskPx = document.getElementById("overMaskPx").value;
+    localStorage.setItem("overmask_px", overMaskPx);
 }
 
 function changeHiResFix() {
@@ -912,17 +885,19 @@ function checkIfWebuiIsRunning() {
 }
 
 function loadSettings() {
-    // set default values if not set                                    DEFAULTS
+    // set default values if not set
     var _sampler = localStorage.getItem("sampler") == null ? "DDIM" : localStorage.getItem("sampler");
     var _mask_blur = localStorage.getItem("mask_blur") == null ? 0 : localStorage.getItem("mask_blur");
     var _seed = localStorage.getItem("seed") == null ? -1 : localStorage.getItem("seed");
     var _enable_hr = Boolean(localStorage.getItem("enable_hr") == (null || "false") ? false : localStorage.getItem("enable_hr"));
     var _enable_erase = Boolean(localStorage.getItem("enable_erase") == (null || "false") ? false : localStorage.getItem("enable_erase"));
+    var _overmask_px = localStorage.getItem("overmask_px") == null ? 0 : localStorage.getItem("overmask_px");
 
     // set the values into the UI
     document.getElementById("samplerSelect").value = String(_sampler);
     document.getElementById("maskBlur").value = Number(_mask_blur);
     document.getElementById("seed").value = Number(_seed);
     document.getElementById("cbxHRFix").checked = Boolean(_enable_hr);
     document.getElementById("cbxEnableErasing").checked = Boolean(_enable_erase);
+    document.getElementById("overMaskPx").value = Number(_overmask_px);
 }