From ce6052d68e283d51201c41e8bb63880d0b570010 Mon Sep 17 00:00:00 2001 From: tim h Date: Wed, 21 Feb 2024 08:18:28 -0600 Subject: [PATCH] ui works --- README.md | 1 + css/icons.css | 6 ++ index.html | 8 +- js/extensions.js | 6 ++ js/ui/tool/dream.js | 226 ++++++++++++++++++++++++++++++++++++--- pages/configuration.html | 2 +- res/icons/squircle.svg | 1 + 7 files changed, 229 insertions(+), 21 deletions(-) create mode 100644 res/icons/squircle.svg diff --git a/README.md b/README.md index 879c083..4c98f21 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,7 @@ this is a completely vanilla javascript and html canvas outpainting convenience ## features +- [soft inpainting](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/14208) support - SDXL "support"! (please check outpaint/inpaint fill types in the context menus and fiddle with denoising a LOT for img2img, it's touchy) - [now available as an extension for webUI!](https://github.com/zero01101/openOutpaint-webUI-extension) you can find it under the default "available" section in the webUI _extensions_ tab - **_NOTE: extension still requires `--api` flag in webui-user launch script_** diff --git a/css/icons.css b/css/icons.css index 08e7c00..214460d 100644 --- a/css/icons.css +++ b/css/icons.css @@ -196,3 +196,9 @@ -webkit-mask-image: url("../res/icons/clipboard-list.svg"); mask-image: url("../res/icons/clipboard-list.svg"); } + +.ui.inline-icon.icon-squircle::after, +.ui.icon > .icon-squircle { + -webkit-mask-image: url("../res/icons/squircle.svg"); + mask-image: url("../res/icons/squircle.svg"); +} diff --git a/index.html b/index.html index 727c27d..6bb6f8a 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ openOutpaint 🐠 - + @@ -337,7 +337,7 @@
- v20240127.001 + v202402-03xx.00x TODO CHANGEME
- + @@ -574,7 +574,7 @@ src="js/ui/tool/generic.js?v=3e678e0" type="text/javascript"> - + diff --git a/js/extensions.js b/js/extensions.js index b4e8448..d80fdcd 100644 --- a/js/extensions.js +++ b/js/extensions.js @@ -53,6 +53,7 @@ const extensions = { console.warn("[index] Failed to fetch extensions"); console.warn(e); } + this.checkForSoftInpainting(); this.checkForDynamicPrompts(); this.checkForControlNet( controlNetModelAutoComplete, @@ -64,6 +65,11 @@ const extensions = { //checkForSAG(); //?? }, + async checkForSoftInpainting() { + this.alwaysOnScripts = true; + //TODO implement, inpaint/img2img only + }, + async checkForDynamicPrompts() { if ( this.enabledExtensions.filter((e) => e.includes("dynamic prompts")) diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js index 7938e0b..b0a1d01 100644 --- a/js/ui/tool/dream.js +++ b/js/ui/tool/dream.js @@ -62,12 +62,9 @@ const _monitorProgress = (bb, oncheck = null) => { } const timeSpent = performance.now() - init; - setTimeout( - () => { - if (running) _checkProgress(); - }, - Math.max(0, minDelay - timeSpent) - ); + setTimeout(() => { + if (running) _checkProgress(); + }, Math.max(0, minDelay - timeSpent)); }; _checkProgress(); @@ -1841,8 +1838,8 @@ const dreamTool = () => state.cursorSize > stableDiffusionData.width ? "#FBB5" : state.cursorSize < stableDiffusionData.width - ? "#BFB5" - : "#FFF5"; + ? "#BFB5" + : "#FFF5"; state.erasePrevReticle = _tool._reticle_draw( bb, @@ -1869,8 +1866,8 @@ const dreamTool = () => state.cursorSize > stableDiffusionData.width ? "#FBB5" : state.cursorSize < stableDiffusionData.width - ? "#BFB5" - : "#FFF5"; + ? "#BFB5" + : "#FFF5"; state.erasePrevReticle = _tool._reticle_draw( getBoundingBox( evn.x, @@ -2385,8 +2382,8 @@ const img2imgTool = () => state.cursorSize > stableDiffusionData.width ? "#FBB5" : state.cursorSize < stableDiffusionData.width - ? "#BFB5" - : "#FFF5"; + ? "#BFB5" + : "#FFF5"; state.erasePrevReticle = _tool._reticle_draw( bb, "Img2Img", @@ -2423,8 +2420,8 @@ const img2imgTool = () => state.cursorSize > stableDiffusionData.width ? "#FBB5" : state.cursorSize < stableDiffusionData.width - ? "#BFB5" - : "#FFF5"; + ? "#BFB5" + : "#FFF5"; state.erasePrevReticle = _tool._reticle_draw( bb, "Img2Img", @@ -2717,7 +2714,7 @@ const img2imgTool = () => ).slider; // Border Mask Gradient Checkbox - state.ctxmenu.borderMaskGradientCheckbox = _toolbar_input.checkbox( + state.ctxmenu.borderMaskGradientLabel = _toolbar_input.checkbox( state, "openoutpaint/img2img-gradient", "gradient", @@ -2745,6 +2742,152 @@ const img2imgTool = () => } ).checkbox; + // soft inpainting checkbox - arg 0 + state.ctxmenu.softInpaintLabel = _toolbar_input.checkbox( + state, + "openoutpaint/img2img-softinpaint", + "softInpaint", + "Soft Inpainting", + "icon-squircle", + () => { + if (state.softInpaint) { + state.ctxmenu.softInpaintScheduleBiasSlider.classList.remove( + "invisible" + ); + state.ctxmenu.softInpaintMaskInfluenceSlider.classList.remove( + "invisible" + ); + state.ctxmenu.softInpaintDifferenceContrastSlider.classList.remove( + "invisible" + ); + state.ctxmenu.softInpaintDifferenceThresholdSlider.classList.remove( + "invisible" + ); + state.ctxmenu.softInpaintPreservationStrengthSlider.classList.remove( + "invisible" + ); + state.ctxmenu.softInpaintTransitionContrastBoostSlider.classList.remove( + "invisible" + ); + // state.ctxmenu.softInpaintSliderLinebreak.classList.add( + // "invisible" + // ); + } else { + state.ctxmenu.softInpaintScheduleBiasSlider.classList.add( + "invisible" + ); + state.ctxmenu.softInpaintMaskInfluenceSlider.classList.add( + "invisible" + ); + state.ctxmenu.softInpaintDifferenceContrastSlider.classList.add( + "invisible" + ); + state.ctxmenu.softInpaintDifferenceThresholdSlider.classList.add( + "invisible" + ); + state.ctxmenu.softInpaintPreservationStrengthSlider.classList.add( + "invisible" + ); + state.ctxmenu.softInpaintTransitionContrastBoostSlider.classList.add( + "invisible" + ); + // state.ctxmenu.softInpaintSliderLinebreak.classList.remove( + // "invisible" + // ); + } + } + ).checkbox; + + // soft inpainting schedule bias - arg 1, def 1 + state.ctxmenu.softInpaintScheduleBiasSlider = _toolbar_input.slider( + state, + "openoutpaint/img2img-softinpaintschedulebias", + "softInpaintScheduleBias", + "Schedule Bias", + { + min: 0, + max: 8, + step: 0.25, + textStep: 0.01, + } + ).slider; + + // soft inpainting preservation strength - arg 2, def 0.5 + state.ctxmenu.softInpaintPreservationStrengthSlider = + _toolbar_input.slider( + state, + "openoutpaint/img2img-softinpaintpreservationstrength", + "softInpaintPreservationStrength", + "Preservation Strength", + { + min: 0, + max: 8, + step: 0.25, + textStep: 0.01, + } + ).slider; + + // soft inpainting transition contrast boost - arg 3, def 4 + state.ctxmenu.softInpaintTransitionContrastBoostSlider = + _toolbar_input.slider( + state, + "openoutpaint/img2img-softinpainttransitioncontrastboost", + "softInpaintTransitionContrastBoost", + "Transition Contrast Boost", + { + min: 0, + max: 32, + step: 0.5, + textStep: 0.01, + } + ).slider; + + //0.5 2 + + // soft inpainting mask influence - arg 4, def 0 + state.ctxmenu.softInpaintMaskInfluenceSlider = _toolbar_input.slider( + state, + "openoutpaint/img2img-softinpaintmaskinfluence", + "softInpaintMaskInfluence", + "Mask Influence", + { + min: 0, + max: 1, + step: 0.1, + textStep: 0.01, + } + ).slider; + + // soft inpainting difference threshold - arg 5, def 0.5 + state.ctxmenu.softInpaintDifferenceThresholdSlider = + _toolbar_input.slider( + state, + "openoutpaint/img2img-softinpaintdifferencethreshold", + "softInpaintDifferenceThreshold", + "Difference Threshold", + { + min: 0, + max: 8, + step: 0.25, + textStep: 0.01, + } + ).slider; + + // soft inpainting difference contrast - arg 6, def 2 + state.ctxmenu.softInpaintDifferenceContrastSlider = + _toolbar_input.slider( + state, + "openoutpaint/img2img-softinpaintdifferenceContrast", + "softInpaintDifferenceContrast", + "Difference Contrast", + { + min: 0, + max: 8, + step: 0.25, + textStep: 0.01, + } + ).slider; + // Border Mask Size Slider state.ctxmenu.borderMaskSlider = _toolbar_input.slider( state, @@ -2858,8 +3001,17 @@ const img2imgTool = () => const btnArray2 = document.createElement("div"); btnArray2.classList.add("checkbox-array"); btnArray2.appendChild(state.ctxmenu.fullResolutionLabel); - btnArray2.appendChild(state.ctxmenu.borderMaskGradientCheckbox); + btnArray2.appendChild(state.ctxmenu.borderMaskGradientLabel); + btnArray2.appendChild(state.ctxmenu.softInpaintLabel); menu.appendChild(btnArray2); + menu.appendChild(state.ctxmenu.softInpaintScheduleBiasSlider); + menu.appendChild(state.ctxmenu.softInpaintPreservationStrengthSlider); + menu.appendChild( + state.ctxmenu.softInpaintTransitionContrastBoostSlider + ); + menu.appendChild(state.ctxmenu.softInpaintMaskInfluenceSlider); + menu.appendChild(state.ctxmenu.softInpaintDifferenceThresholdSlider); + menu.appendChild(state.ctxmenu.softInpaintDifferenceContrastSlider); menu.appendChild(state.ctxmenu.borderMaskSlider); menu.appendChild(state.ctxmenu.eagerGenerateCountLabel); @@ -2878,6 +3030,48 @@ const img2imgTool = () => state.ctxmenu.carveBlurSlider.classList.add("invisible"); state.ctxmenu.carveThresholdSlider.classList.add("invisible"); } + + if ( + localStorage.getItem("openoutpaint/img2img-softinpaint") == "true" + ) { + state.ctxmenu.softInpaintScheduleBiasSlider.classList.remove( + "invisible" + ); + state.ctxmenu.softInpaintMaskInfluenceSlider.classList.remove( + "invisible" + ); + state.ctxmenu.softInpaintDifferenceContrastSlider.classList.remove( + "invisible" + ); + state.ctxmenu.softInpaintDifferenceThresholdSlider.classList.remove( + "invisible" + ); + state.ctxmenu.softInpaintPreservationStrengthSlider.classList.remove( + "invisible" + ); + state.ctxmenu.softInpaintTransitionContrastBoostSlider.classList.remove( + "invisible" + ); + } else { + state.ctxmenu.softInpaintScheduleBiasSlider.classList.add( + "invisible" + ); + state.ctxmenu.softInpaintMaskInfluenceSlider.classList.add( + "invisible" + ); + state.ctxmenu.softInpaintDifferenceContrastSlider.classList.add( + "invisible" + ); + state.ctxmenu.softInpaintDifferenceThresholdSlider.classList.add( + "invisible" + ); + state.ctxmenu.softInpaintPreservationStrengthSlider.classList.add( + "invisible" + ); + state.ctxmenu.softInpaintTransitionContrastBoostSlider.classList.add( + "invisible" + ); + } }, shortcut: "I", } diff --git a/pages/configuration.html b/pages/configuration.html index 1a241e4..87e300f 100644 --- a/pages/configuration.html +++ b/pages/configuration.html @@ -5,7 +5,7 @@ openOutpaint 🐠 - + diff --git a/res/icons/squircle.svg b/res/icons/squircle.svg new file mode 100644 index 0000000..8eea9d8 --- /dev/null +++ b/res/icons/squircle.svg @@ -0,0 +1 @@ + \ No newline at end of file