From 15385773c208dc4064132cdce0fa41bf4e6acdff Mon Sep 17 00:00:00 2001
From: AlexL <github@leual.ch>
Date: Thu, 4 Jan 2024 17:39:35 +0100
Subject: [PATCH] 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};