From 556ec5cb7b23911a75f1eb6fab301b23e3a3ccd7 Mon Sep 17 00:00:00 2001 From: AlexL Date: Thu, 4 Jan 2024 14:36:59 +0100 Subject: [PATCH 1/4] Added upscale options --- index.html | 7 +++++-- js/index.js | 14 ++++++++++++-- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 5abdeda..8e2e125 100644 --- a/index.html +++ b/index.html @@ -294,8 +294,11 @@
- +
diff --git a/js/index.js b/js/index.js index d3e4213..6a22c34 100644 --- a/js/index.js +++ b/js/index.js @@ -1430,7 +1430,7 @@ async function getSamplers() { } } -async function upscaleAndDownload() { +async function upscaleAndDownload(download = false, add_resource = false) { // 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 @@ -1481,7 +1481,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("Upscaled image", img); + } + if (download == true){ + console.log("Download upscaled") + link.click(); + } }); } } From 15385773c208dc4064132cdce0fa41bf4e6acdff Mon Sep 17 00:00:00 2001 From: AlexL Date: Thu, 4 Jan 2024 17:39:35 +0100 Subject: [PATCH 2/4] added resource upscale --- css/ui/generic.css | 5 +++++ js/index.js | 35 +++++++++++++++++++++++------------ js/ui/tool/stamp.js | 28 ++++++++++++++++++++++++++++ 3 files changed, 56 insertions(+), 12 deletions(-) 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/js/index.js b/js/index.js index 6a22c34..c3909ef 100644 --- a/js/index.js +++ b/js/index.js @@ -1430,7 +1430,7 @@ async function getSamplers() { } } -async function upscaleAndDownload(download = false, add_resource = false) { +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 +1438,29 @@ async function upscaleAndDownload(download = false, add_resource = false) { ? 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; + + 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 recourse 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, @@ -1486,7 +1497,7 @@ async function upscaleAndDownload(download = false, add_resource = false) { console.log("Add upscaled to resource") const img = new Image(); img.src = link.href; - tools.stamp.state.addResource("Upscaled image", img); + tools.stamp.state.addResource(guid()+" (upscaled)", img); } if (download == true){ console.log("Download upscaled") diff --git a/js/ui/tool/stamp.js b/js/ui/tool/stamp.js index 30f0297..8870258 100644 --- a/js/ui/tool/stamp.js +++ b/js/ui/tool/stamp.js @@ -284,6 +284,33 @@ 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 +327,7 @@ const stampTool = () => actionArray.appendChild(saveButton); actionArray.appendChild(trashButton); + actionArray.appendChild(upscaleButton); resourceWrapper.appendChild(actionArray); state.ctxmenu.resourceList.appendChild(resourceWrapper); resource.dom = {wrapper: resourceWrapper}; From b63f25472f225f37e8bb550fd429689d6794ab9f Mon Sep 17 00:00:00 2001 From: AlexL Date: Sat, 13 Jan 2024 16:24:51 +0100 Subject: [PATCH 3/4] upscaler to localstorage --- js/index.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/js/index.js b/js/index.js index c3909ef..d6ca363 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/hr_upscaler") === null + ? upscalers[0] + : localStorage.getItem("openoutpaint/upscaler"); + hrFixUpscalerAutoComplete.value = localStorage.getItem("openoutpaint/hr_upscaler") === null ? "None" @@ -1440,6 +1444,7 @@ async function upscaleAndDownload(download = false, add_resource = false, aCanva var upscaler = upscalerAutoComplete.value; var croppedCanvas = null; var imgdata = null; + localStorage.setItem("openoutpaint/upscaler", upscaler); if (aCanvas == null) { console.log("Upscaling main canvas."); @@ -1550,8 +1555,7 @@ function loadSettings() { document.getElementById("seed").value = Number(_seed); document.getElementById("cbxHRFix").checked = Boolean(_enable_hr); document.getElementById("cbxRestoreFaces").checked = Boolean(_restore_faces); - document.getElementById("cbxSyncCursorSize").checked = - Boolean(_sync_cursor_size); + document.getElementById("cbxSyncCursorSize").checked = Boolean(_sync_cursor_size); document.getElementById("hrFixScale").value = Number(_hrfix_scale); document.getElementById("hrDenoising").value = Number(_hrfix_denoising); document.getElementById("hrFixLockPx").value = Number(_hrfix_lock_px); From 57037f28c618d2c2b5825a1c26e6506ea5c98458 Mon Sep 17 00:00:00 2001 From: AlexL Date: Sat, 13 Jan 2024 16:28:41 +0100 Subject: [PATCH 4/4] upscaler to localstorage --- js/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/index.js b/js/index.js index d6ca363..dcc45d3 100644 --- a/js/index.js +++ b/js/index.js @@ -1187,7 +1187,7 @@ async function getUpscalers() { }); upscalerAutoComplete.value = - localStorage.getItem("openoutpaint/hr_upscaler") === null + localStorage.getItem("openoutpaint/upscaler") === null ? upscalers[0] : localStorage.getItem("openoutpaint/upscaler");