sdkit 1.0.151 - An option to use strict mask borders

scripts/check_modules.py

@@ -18,7 +18,7 @@ os_name = platform.system()
 modules_to_check = {
     "torch": ("1.11.0", "1.13.1", "2.0.0"),
     "torchvision": ("0.12.0", "0.14.1", "0.15.1"),
-    "sdkit": "1.0.148",
+    "sdkit": "1.0.151",
     "stable-diffusion-sdkit": "2.1.4",
     "rich": "12.6.0",
     "uvicorn": "0.19.0",

ui/easydiffusion/types.py

@@ -21,6 +21,7 @@ class GenerateImageRequest(BaseModel):
     control_alpha: Union[float, List[float]] = None
     prompt_strength: float = 0.8
     preserve_init_image_color_profile = False
+    strict_mask_border = False
 
     sampler_name: str = None  # "ddim", "plms", "heun", "euler", "euler_a", "dpm2", "dpm2_a", "lms"
     hypernetwork_strength: float = 0

ui/index.html

@@ -109,6 +109,7 @@
                     </div>
 
                     <div id="apply_color_correction_setting" class="pl-5"><input id="apply_color_correction" name="apply_color_correction" type="checkbox"> <label for="apply_color_correction">Preserve color profile <small>(helps during inpainting)</small></label></div>
+                    <div id="strict_mask_border_setting" class="pl-5"><input id="strict_mask_border" name="strict_mask_border" type="checkbox"> <label for="strict_mask_border">Strict Mask Border <small>(won't modify outside the mask, but the mask border might be visible)</small></label></div>
 
                 </div>
 

ui/media/js/image-editor.js

@@ -626,6 +626,7 @@ class ImageEditor {
                 .getImageData(0, 0, this.width, this.height)
                 .data.some((channel) => channel !== 0)
             maskSetting.checked = !is_blank
+            maskSetting.dispatchEvent(new Event("change"))
         }
         this.hide()
     }

ui/media/js/main.js

@@ -49,6 +49,7 @@ const taskConfigSetup = {
         use_lora_model: { label: "Lora Model", visible: ({ reqBody }) => !!reqBody?.use_lora_model },
         lora_alpha: { label: "Lora Strength", visible: ({ reqBody }) => !!reqBody?.use_lora_model },
         preserve_init_image_color_profile: "Preserve Color Profile",
+        strict_mask_border: "Strict Mask Border",
     },
     pluginTaskConfig: {},
     getCSSKey: (key) =>
@@ -93,7 +94,9 @@ let initImageSizeBox = document.querySelector("#init_image_size_box")
 let maskImageSelector = document.querySelector("#mask")
 let maskImagePreview = document.querySelector("#mask_preview")
 let applyColorCorrectionField = document.querySelector("#apply_color_correction")
+let strictMaskBorderField = document.querySelector("#strict_mask_border")
 let colorCorrectionSetting = document.querySelector("#apply_color_correction_setting")
+let strictMaskBorderSetting = document.querySelector("#strict_mask_border_setting")
 let promptStrengthSlider = document.querySelector("#prompt_strength_slider")
 let promptStrengthField = document.querySelector("#prompt_strength")
 let samplerField = document.querySelector("#sampler_name")
@@ -1386,6 +1389,7 @@ function getCurrentUserRequest() {
         // }
         if (maskSetting.checked) {
             newTask.reqBody.mask = imageInpainter.getImg()
+            newTask.reqBody.strict_mask_border = strictMaskBorderField.checked
         }
         newTask.reqBody.preserve_init_image_color_profile = applyColorCorrectionField.checked
         if (!testDiffusers.checked) {
@@ -2091,6 +2095,7 @@ function img2imgLoad() {
     }
     initImagePreviewContainer.classList.add("has-image")
     colorCorrectionSetting.style.display = ""
+    strictMaskBorderSetting.style.display = maskSetting.checked ? "" : "none"
 
     initImageSizeBox.textContent = initImagePreview.naturalWidth + " x " + initImagePreview.naturalHeight
     imageEditor.setImage(this.src, initImagePreview.naturalWidth, initImagePreview.naturalHeight)
@@ -2108,6 +2113,7 @@ function img2imgUnload() {
     }
     initImagePreviewContainer.classList.remove("has-image")
     colorCorrectionSetting.style.display = "none"
+    strictMaskBorderSetting.style.display = "none"
     imageEditor.setImage(null, parseInt(widthField.value), parseInt(heightField.value))
 }
 initImagePreview.addEventListener("load", img2imgLoad)
@@ -2116,6 +2122,9 @@ initImageClearBtn.addEventListener("click", img2imgUnload)
 maskSetting.addEventListener("click", function() {
     onDimensionChange()
 })
+maskSetting.addEventListener("change", function() {
+    strictMaskBorderSetting.style.display = this.checked ? "" : "none"
+})
 
 promptsFromFileBtn.addEventListener("click", function() {
     promptsFromFileSelector.click()
@@ -2583,15 +2592,17 @@ createLoraEntries()
 ////////////////////////////// Image Size Widget //////////////////////////////////////////
 
 function roundToMultiple(number, n) {
-    if (n=="") { n=1 }
+    if (n == "") {
-    return Math.round(number / n) * n;
+        n = 1
+    }
+    return Math.round(number / n) * n
 }
 
 function addImageSizeOption(size) {
-    let sizes = Object.values(widthField.options).map(o => o.value)
+    let sizes = Object.values(widthField.options).map((o) => o.value)
     if (!sizes.includes(String(size))) {
         sizes.push(String(size))
-        sizes.sort( (a,b) => Number(a)-Number(b) )
+        sizes.sort((a, b) => Number(a) - Number(b))
 
         let option = document.createElement("option")
         option.value = size
@@ -2600,10 +2611,9 @@ function addImageSizeOption(size) {
         widthField.add(option, sizes.indexOf(String(size)))
         heightField.add(option.cloneNode(true), sizes.indexOf(String(size)))
     }
-
 }
 
-function setImageWidthHeight(w,h) {
+function setImageWidthHeight(w, h) {
     let step = customWidthField.step
     w = roundToMultiple(w, step)
     h = roundToMultiple(h, step)
@@ -2611,8 +2621,8 @@ function setImageWidthHeight(w,h) {
     addImageSizeOption(w)
     addImageSizeOption(h)
 
-    widthField.value=w
+    widthField.value = w
-    heightField.value=h
+    heightField.value = h
     widthField.dispatchEvent(new Event("change"))
     heightField.dispatchEvent(new Event("change"))
 }
@@ -2620,25 +2630,26 @@ function setImageWidthHeight(w,h) {
 function enlargeImageSize(factor) {
     let step = customWidthField.step
 
-    let w = roundToMultiple(widthField.value*factor, step)
+    let w = roundToMultiple(widthField.value * factor, step)
-    let h = roundToMultiple(heightField.value*factor, step)
+    let h = roundToMultiple(heightField.value * factor, step)
     customWidthField.value = w
     customHeightField.value = h
 }
 
 let recentResolutionsValues = []
 
-;(function() { ///// Init resolutions dropdown
+;(function() {
+    ///// Init resolutions dropdown
     function makeResolutionButtons() {
         recentResolutionList.innerHTML = ""
-        recentResolutionsValues.forEach( el => {
+        recentResolutionsValues.forEach((el) => {
             let button = document.createElement("button")
             button.classList.add("tertiaryButton")
-            button.style.width="8em"
+            button.style.width = "8em"
             button.innerHTML = `${el.w}×${el.h}`
             button.addEventListener("click", () => {
-                customWidthField.value=el.w
+                customWidthField.value = el.w
-                customHeightField.value=el.h
+                customHeightField.value = el.h
                 hidePopup()
             })
             recentResolutionList.appendChild(button)
@@ -2665,7 +2676,7 @@ let recentResolutionsValues = []
     customWidthField.addEventListener("change", () => {
         let w = customWidthField.value
         customWidthField.value = roundToMultiple(w, customWidthField.step)
-        if (w!=customWidthField.value) {
+        if (w != customWidthField.value) {
             showToast(`Rounded width to the closest multiple of ${customWidthField.step}.`)
         }
     })
@@ -2673,7 +2684,7 @@ let recentResolutionsValues = []
     customHeightField.addEventListener("change", () => {
         let h = customHeightField.value
         customHeightField.value = roundToMultiple(h, customHeightField.step)
-        if (h!=customHeightField.value) {
+        if (h != customHeightField.value) {
             showToast(`Rounded height to the closest multiple of ${customHeightField.step}.`)
         }
     })
@@ -2682,24 +2693,24 @@ let recentResolutionsValues = []
         let w = widthField.value
         let h = heightField.value
 
-        recentResolutionsValues = recentResolutionsValues.filter(el => (el.w!=w || el.h!=h))
+        recentResolutionsValues = recentResolutionsValues.filter((el) => el.w != w || el.h != h)
-        recentResolutionsValues.unshift({w: w, h:h})
+        recentResolutionsValues.unshift({ w: w, h: h })
-        recentResolutionsValues = recentResolutionsValues.slice(0,8)
+        recentResolutionsValues = recentResolutionsValues.slice(0, 8)
 
         localStorage.recentResolutionsValues = JSON.stringify(recentResolutionsValues)
         makeResolutionButtons()
     })
 
     let _jsonstring = localStorage.recentResolutionsValues
-    if (_jsonstring==undefined) {
+    if (_jsonstring == undefined) {
         recentResolutionsValues = [
-            {w:512,h:512},
+            { w: 512, h: 512 },
-            {w:640,h:448},
+            { w: 640, h: 448 },
-            {w:448,h:640},
+            { w: 448, h: 640 },
-            {w:512,h:768},
+            { w: 512, h: 768 },
-            {w:768,h:512},
+            { w: 768, h: 512 },
-            {w:1024,h:768},
+            { w: 1024, h: 768 },
-            {w:768,h:1024},
+            { w: 768, h: 1024 },
         ]
         localStorage.recentResolutionsValues = JSON.stringify(recentResolutionsValues)
     } else {
@@ -2707,7 +2718,7 @@ let recentResolutionsValues = []
     }
     makeResolutionButtons()
 
-    recentResolutionsValues.forEach( val => {
+    recentResolutionsValues.forEach((val) => {
         addImageSizeOption(val.w)
         addImageSizeOption(val.h)
     })
@@ -2746,4 +2757,3 @@ let recentResolutionsValues = []
         heightField.value = temp
     })
 })()
-