diff --git a/css/ui/generic.css b/css/ui/generic.css index 036b905..dbefb05 100644 --- a/css/ui/generic.css +++ b/css/ui/generic.css @@ -449,3 +449,8 @@ select > option:checked::after { -webkit-mask-image: url("../../res/icons/download.svg"); mask-image: url("../../res/icons/download.svg"); } + +.list .actions > .upscale-btn > *:first-child { + -webkit-mask-image: url("../../res/icons/scaling.svg"); + mask-image: url("../../res/icons/scaling.svg"); +} diff --git a/index.html b/index.html index f101ea2..727c27d 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ - + @@ -294,8 +294,11 @@
- +
@@ -334,8 +337,7 @@
- Alpha release v0.0.16.6 - v2023xxxx.001 //TODO update + v20240127.001
- + - + @@ -580,9 +582,9 @@ src="js/ui/tool/colorbrush.js?v=84ff9fa" type="text/javascript"> - + diff --git a/js/index.js b/js/index.js index d3e4213..c1442d9 100644 --- a/js/index.js +++ b/js/index.js @@ -1186,7 +1186,11 @@ async function getUpscalers() { return {name: u, value: u}; }); - upscalerAutoComplete.value = upscalers[0]; + upscalerAutoComplete.value = + localStorage.getItem("openoutpaint/upscaler") === null + ? upscalers[0] + : localStorage.getItem("openoutpaint/upscaler"); + hrFixUpscalerAutoComplete.value = localStorage.getItem("openoutpaint/hr_upscaler") === null ? "None" @@ -1430,7 +1434,11 @@ async function getSamplers() { } } -async function upscaleAndDownload() { +async function upscaleAndDownload( + download = false, + add_resource = false, + aCanvas = null +) { // Future improvements: some upscalers take a while to upscale, so we should show a loading bar or something, also a slider for the upscale amount // get cropped canvas, send it to upscaler, download result @@ -1438,18 +1446,30 @@ async function upscaleAndDownload() { ? localStorage.getItem("openoutpaint/upscale_x") : 2; var upscaler = upscalerAutoComplete.value; - var croppedCanvas = cropCanvas( - uil.getVisible({ - x: 0, - y: 0, - w: imageCollection.size.w, - h: imageCollection.size.h, - }) - ); - if (croppedCanvas != null) { + var croppedCanvas = null; + var imgdata = null; + localStorage.setItem("openoutpaint/upscaler", upscaler); + + if (aCanvas == null) { + console.log("Upscaling main canvas."); + croppedCanvas = cropCanvas( + uil.getVisible({ + x: 0, + y: 0, + w: imageCollection.size.w, + h: imageCollection.size.h, + }) + ); + imgdata = croppedCanvas.canvas.toDataURL("image/png"); + } else { + console.log("Upscaling resource canvas."); + imgdata = aCanvas.toDataURL("image/png"); + } + + if (imgdata != null) { var url = document.getElementById("host").value + "/sdapi/v1/extra-single-image/"; - var imgdata = croppedCanvas.canvas.toDataURL("image/png"); + var data = { "resize-mode": 0, // 0 = just resize, 1 = crop and resize, 2 = resize and fill i assume based on theimg2img tabs options upscaling_resize: upscale_factor, @@ -1481,7 +1501,17 @@ async function upscaleAndDownload() { upscale_factor + ".png"; link.href = "data:image/png;base64," + data["image"]; - link.click(); + + if (add_resource == true) { + console.log("Add upscaled to resource"); + const img = new Image(); + img.src = link.href; + tools.stamp.state.addResource(guid() + " (upscaled)", img); + } + if (download == true) { + console.log("Download upscaled"); + link.click(); + } }); } } diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js index 4e5f5bf..7938e0b 100644 --- a/js/ui/tool/dream.js +++ b/js/ui/tool/dream.js @@ -62,9 +62,12 @@ 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(); @@ -1838,8 +1841,8 @@ const dreamTool = () => state.cursorSize > stableDiffusionData.width ? "#FBB5" : state.cursorSize < stableDiffusionData.width - ? "#BFB5" - : "#FFF5"; + ? "#BFB5" + : "#FFF5"; state.erasePrevReticle = _tool._reticle_draw( bb, @@ -1866,8 +1869,8 @@ const dreamTool = () => state.cursorSize > stableDiffusionData.width ? "#FBB5" : state.cursorSize < stableDiffusionData.width - ? "#BFB5" - : "#FFF5"; + ? "#BFB5" + : "#FFF5"; state.erasePrevReticle = _tool._reticle_draw( getBoundingBox( evn.x, @@ -2012,12 +2015,12 @@ const dreamTool = () => state.ctxmenu.keepUnmaskedBlurSlider.classList.remove( "invisible" ); - state.ctxmenu.keepUnmaskedBlurSliderLinebreak.classList.add( + state.ctxmenu.keepUnmaskedBlurSliderLinebreak.classList.remove( "invisible" ); } else { state.ctxmenu.keepUnmaskedBlurSlider.classList.add("invisible"); - state.ctxmenu.keepUnmaskedBlurSliderLinebreak.classList.remove( + state.ctxmenu.keepUnmaskedBlurSliderLinebreak.classList.add( "invisible" ); } @@ -2181,6 +2184,20 @@ const dreamTool = () => menu.appendChild(state.ctxmenu.outpaintTypeSelect); menu.appendChild(state.ctxmenu.overMaskPxLabel); menu.appendChild(state.ctxmenu.eagerGenerateCountLabel); + + if (localStorage.getItem("openoutpaint/dream-keepunmasked") == "true") { + state.ctxmenu.keepUnmaskedBlurSlider.classList.remove("invisible"); + } else { + state.ctxmenu.keepUnmaskedBlurSlider.classList.add("invisible"); + } + + if (localStorage.getItem("openoutpaint/dream-removebg") == "true") { + state.ctxmenu.carveBlurSlider.classList.remove("invisible"); + state.ctxmenu.carveThresholdSlider.classList.remove("invisible"); + } else { + state.ctxmenu.carveBlurSlider.classList.add("invisible"); + state.ctxmenu.carveThresholdSlider.classList.add("invisible"); + } }, shortcut: "D", } @@ -2368,8 +2385,8 @@ const img2imgTool = () => state.cursorSize > stableDiffusionData.width ? "#FBB5" : state.cursorSize < stableDiffusionData.width - ? "#BFB5" - : "#FFF5"; + ? "#BFB5" + : "#FFF5"; state.erasePrevReticle = _tool._reticle_draw( bb, "Img2Img", @@ -2406,8 +2423,8 @@ const img2imgTool = () => state.cursorSize > stableDiffusionData.width ? "#FBB5" : state.cursorSize < stableDiffusionData.width - ? "#BFB5" - : "#FFF5"; + ? "#BFB5" + : "#FFF5"; state.erasePrevReticle = _tool._reticle_draw( bb, "Img2Img", @@ -2845,6 +2862,22 @@ const img2imgTool = () => menu.appendChild(btnArray2); menu.appendChild(state.ctxmenu.borderMaskSlider); menu.appendChild(state.ctxmenu.eagerGenerateCountLabel); + + if ( + localStorage.getItem("openoutpaint/img2img-keepunmasked") == "true" + ) { + state.ctxmenu.keepUnmaskedBlurSlider.classList.remove("invisible"); + } else { + state.ctxmenu.keepUnmaskedBlurSlider.classList.add("invisible"); + } + + if (localStorage.getItem("openoutpaint/img2img-removebg") == "true") { + state.ctxmenu.carveBlurSlider.classList.remove("invisible"); + state.ctxmenu.carveThresholdSlider.classList.remove("invisible"); + } else { + state.ctxmenu.carveBlurSlider.classList.add("invisible"); + state.ctxmenu.carveThresholdSlider.classList.add("invisible"); + } }, shortcut: "I", } diff --git a/js/ui/tool/select.js b/js/ui/tool/select.js index ef38bfc..f89da91 100644 --- a/js/ui/tool/select.js +++ b/js/ui/tool/select.js @@ -420,7 +420,7 @@ const selectTransformTool = () => const lscursor = m.transformPoint({x: sx, y: sy}); const xs = lscursor.x / scaling.handle.x; - const xy = lscursor.y / scaling.handle.y; + const ys = lscursor.y / scaling.handle.y; let xscale = 1; let yscale = 1; @@ -429,7 +429,7 @@ const selectTransformTool = () => xscale = xs; yscale = ys; } else { - xscale = yscale = Math.max(xs, xy); + xscale = yscale = Math.max(xs, ys); } state.selected.scale = {x: xscale, y: yscale}; diff --git a/js/ui/tool/stamp.js b/js/ui/tool/stamp.js index 30f0297..d847cf0 100644 --- a/js/ui/tool/stamp.js +++ b/js/ui/tool/stamp.js @@ -284,6 +284,32 @@ const stampTool = () => saveButton.appendChild(document.createElement("div")); saveButton.classList.add("download-btn"); + const upscaleButton = document.createElement("button"); + upscaleButton.addEventListener( + "click", + (evn) => { + evn.stopPropagation(); + const canvas = document.createElement("canvas"); + canvas.width = resource.image.width; + canvas.height = resource.image.height; + canvas.getContext("2d").drawImage(resource.image, 0, 0); + console.log("[Stamp]", canvas); + upscaleAndDownload(false, true, canvas); + + /* + downloadCanvas({ + canvas, + filename: `openOutpaint - resource '${resource.name}'.png`, + + }); + */ + }, + {passive: false} + ); + upscaleButton.title = "Upscale Resource"; + upscaleButton.appendChild(document.createElement("div")); + upscaleButton.classList.add("upscale-btn"); + const trashButton = document.createElement("button"); trashButton.addEventListener( "click", @@ -300,6 +326,7 @@ const stampTool = () => actionArray.appendChild(saveButton); actionArray.appendChild(trashButton); + actionArray.appendChild(upscaleButton); resourceWrapper.appendChild(actionArray); state.ctxmenu.resourceList.appendChild(resourceWrapper); resource.dom = {wrapper: resourceWrapper}; diff --git a/pages/configuration.html b/pages/configuration.html index 9c156c5..1a241e4 100644 --- a/pages/configuration.html +++ b/pages/configuration.html @@ -10,7 +10,7 @@ - + @@ -258,7 +258,8 @@ ? true : localStorage.getItem( "openoutpaint/settings.update-prompt-on-more-button" - ) === "true"; + ) === "true"; + updatePromptOnMoreButton.checked = _enable_update_prompt_on_more_button; let _enable_jump_to_1st_new_on_more_button = localStorage.getItem( @@ -267,7 +268,8 @@ ? true : localStorage.getItem( "openoutpaint/settings.jump-to-1st-new-on-more-button" - ) === "true"; + ) === "true"; + jumpTo1stNewOnMoreButton.checked = _enable_jump_to_1st_new_on_more_button; writeToLocalStorage();