Merge pull request #157 from zero01101/newer_hrfix_compatibility

experimental? newer hrfix stuff

css/index.css

@@ -644,3 +644,9 @@ select > .style-select-option:active {
 .button.tool.active {
 	background-color: rgb(60, 60, 130);
 }
+
+/* Miscellaneous garbage */
+
+.thirdwidth {
+	max-width: 33%;
+}

index.html

@@ -7,7 +7,7 @@
 		<link href="css/colors.css?v=3f81e80" rel="stylesheet" />
 		<link href="css/icons.css?v=caa702e" rel="stylesheet" />
 
-		<link href="css/index.css?v=69d3b9e" rel="stylesheet" />
+		<link href="css/index.css?v=5b8d4d6" rel="stylesheet" />
 		<link href="css/layers.css?v=b4fbf61" rel="stylesheet" />
 
 		<link href="css/ui/generic.css?v=4b9afe2" rel="stylesheet" />
@@ -98,10 +98,20 @@
 						step="1" />
 					<br />
 					<input type="checkbox" id="cbxHRFix" onchange="changeHiResFix()" />
-					<label for="cbxHRFix">Apply txt2img HRfix</label>
+					<label for="cbxHRFix">Apply Txt2Img HRfix</label>
 					<br />
+					<input
+						type="checkbox"
+						id="cbxHRFSquare"
+						onchange="changeHiResSquare()"
+						class="hrfix" />
+					<label for="cbxHRFSquare" class="hrfix">
+						Square Firstpass Aspect
+					</label>
+					<br class="hrfix" />
 					<div id="hrFixScale" class="hrfix"></div>
 					<div id="hrFixLockPx" class="hrfix"></div>
+					<div id="hrFixSteps" class="hrfix"></div>
 					<label id="hrFixLabel" class="hrfix">Choose HRfix upscaler</label>
 					<div id="hrFixUpscaler" class="hrfix"></div>
 					<div id="hrDenoising" class="hrfix"></div>
@@ -341,7 +351,7 @@
 
 		<!-- Content -->
 		<script src="js/prompt.js?v=7a1c68c" type="text/javascript"></script>
-		<script src="js/index.js?v=afc36b6" type="text/javascript"></script>
+		<script src="js/index.js?v=c6539e5" type="text/javascript"></script>
 
 		<script
 			src="js/ui/floating/history.js?v=fc92d14"
@@ -355,7 +365,7 @@
 			src="js/ui/tool/generic.js?v=2bcd36d"
 			type="text/javascript"></script>
 
-		<script src="js/ui/tool/dream.js?v=1f10ae6" type="text/javascript"></script>
+		<script src="js/ui/tool/dream.js?v=18e3b66" type="text/javascript"></script>
 		<script
 			src="js/ui/tool/maskbrush.js?v=1e8a893"
 			type="text/javascript"></script>

js/index.js

@@ -111,6 +111,10 @@ var stableDiffusionData = {
 	//firstphase_height: 0, //20230102 welp looks like the entire way HRfix is implemented has become bonkersly different
 	hr_scale: 2.0,
 	hr_upscaler: "None",
+	hr_second_pass_steps: 0,
+	hr_resize_x: 0,
+	hr_resize_y: 0,
+	hr_square_aspect: false,
 	styles: [],
 	// here's some more fields that might be useful
 
@@ -161,6 +165,7 @@ function startup() {
 	changeSmoothRendering();
 	changeSeed();
 	changeHiResFix();
+	changeHiResSquare();
 	changeRestoreFaces();
 	changeSyncCursorSize();
 }
@@ -679,6 +684,17 @@ const lockPxSlider = makeSlider(
 	1
 );
 
+const hrStepsSlider = makeSlider(
+	"HRfix Steps",
+	document.getElementById("hrFixSteps"),
+	"hr_second_pass_steps",
+	0,
+	localStorage.getItem("openoutpaint/settings.max-steps") || 70,
+	5,
+	0,
+	1
+);
+
 function changeMaskBlur() {
 	stableDiffusionData.mask_blur = parseInt(
 		document.getElementById("maskBlur").value
@@ -691,33 +707,43 @@ function changeSeed() {
 	localStorage.setItem("openoutpaint/seed", stableDiffusionData.seed);
 }
 
+function changeHRFX() {
+	stableDiffusionData.hr_resize_x =
+		document.getElementById("hr_resize_x").value;
+}
+
+function changeHRFY() {
+	stableDiffusionData.hr_resize_y =
+		document.getElementById("hr_resize_y").value;
+}
+
 function changeHiResFix() {
 	stableDiffusionData.enable_hr = Boolean(
 		document.getElementById("cbxHRFix").checked
 	);
 	localStorage.setItem("openoutpaint/enable_hr", stableDiffusionData.enable_hr);
-	var hrfSlider = document.getElementById("hrFixScale");
+	// var hrfSlider = document.getElementById("hrFixScale");
-	var hrfOpotions = document.getElementById("hrFixUpscaler");
+	// var hrfOpotions = document.getElementById("hrFixUpscaler");
-	var hrfLabel = document.getElementById("hrFixLabel");
+	// var hrfLabel = document.getElementById("hrFixLabel");
-	var hrfDenoiseSlider = document.getElementById("hrDenoising");
+	// var hrfDenoiseSlider = document.getElementById("hrDenoising");
-	var hrfLockPxSlider = document.getElementById("hrFixLockPx");
+	// var hrfLockPxSlider = document.getElementById("hrFixLockPx");
 	if (stableDiffusionData.enable_hr) {
-		hrfSlider.classList.remove("invisible");
+		document
-		hrfOpotions.classList.remove("invisible");
+			.querySelectorAll(".hrfix")
-		hrfLabel.classList.remove("invisible");
+			.forEach((el) => el.classList.remove("invisible"));
-		hrfDenoiseSlider.classList.remove("invisible");
-		hrfLockPxSlider.classList.remove("invisible");
-		//state.ctxmenu.keepUnmaskedBlurSliderLinebreak.classList.add("invisible");
 	} else {
-		hrfSlider.classList.add("invisible");
+		document
-		hrfOpotions.classList.add("invisible");
+			.querySelectorAll(".hrfix")
-		hrfLabel.classList.add("invisible");
+			.forEach((el) => el.classList.add("invisible"));
-		hrfDenoiseSlider.classList.add("invisible");
-		hrfLockPxSlider.classList.add("invisible");
-		//state.ctxmenu.keepUnmaskedBlurSliderLinebreak.classList.remove("invisible");
 	}
 }
 
+function changeHiResSquare() {
+	stableDiffusionData.hr_square_aspect = Boolean(
+		document.getElementById("cbxHRFSquare").checked
+	);
+}
+
 function changeRestoreFaces() {
 	stableDiffusionData.restore_faces = Boolean(
 		document.getElementById("cbxRestoreFaces").checked
@@ -815,7 +841,17 @@ async function getUpscalers() {
 			.split(",")
 			.map((v) => v.trim()); // need "None" for stupid hrfix changes razza frazza
 		const upscalers = upscalersPlusNone.filter((v) => v !== "None"); // converting the result to a list of upscalers
+		// upscalersPlusNone.push([
+		// 	"Latent",
+		// 	"Latent (antialiased)",
+		// 	"Latent (bicubic)",
+		// 	"Latent (bicubic, antialiased)",
+		// 	"Latent (nearest)",
+		// ]);
 		upscalersPlusNone.push("Latent");
+		upscalersPlusNone.push("Latent (antialiased)");
+		upscalersPlusNone.push("Latent (bicubic)");
+		upscalersPlusNone.push("Latent (bicubic, antialiased)");
 		upscalersPlusNone.push("Latent (nearest)"); // GRUMBLE GRUMBLE
 
 		upscalerAutoComplete.options = upscalers.map((u) => {

js/ui/tool/dream.js

@@ -156,6 +156,7 @@ const _dream = async (endpoint, request) => {
 		generating(false);
 	}
 	var responseSubdata = JSON.parse(data.info);
+	console.debug(responseSubdata);
 	var returnData = {
 		images: data.images,
 		seeds: responseSubdata.all_seeds,
@@ -815,41 +816,64 @@ const dream_generate_callback = async (bb, resolution, state) => {
 
 	// Use txt2img if canvas is blank
 	if (isCanvasBlank(0, 0, bb.w, bb.h, visibleCanvas)) {
-		if (
+		if (!global.isOldHRFix && request.enable_hr) {
-			!global.isOldHRFix &&
-			request.enable_hr &&
-			localStorage.getItem("openoutpaint/settings.hrfix-liar") == "true"
-		) {
 			/**
 			 * try and make the new HRfix method useful for our purposes
+			 */
+			// laziness convenience
+			let lockpx = stableDiffusionData.hr_fix_lock_px;
+			if (lockpx > 0) {
+				// find the most appropriate scale factor for hrfix
+				var widthFactor =
+					request.width / lockpx <= 4 ? request.width / lockpx : 4;
+				var heightFactor =
+					request.height / lockpx <= 4 ? request.height / lockpx : 4;
+				var factor = heightFactor > widthFactor ? heightFactor : widthFactor;
+				request.hr_scale = hrFixScaleSlider.value = factor < 1 ? 1 : factor;
+			}
+			// moar laziness convenience
+			var divW = Math.floor(request.width / request.hr_scale);
+			var divH = Math.floor(request.height / request.hr_scale);
+
+			if (localStorage.getItem("openoutpaint/settings.hrfix-liar") == "true") {
+				/**
 				 * since it now returns an image that's been upscaled x the hr_scale parameter,
 				 * we cheekily lie to SD and tell it that the original dimensions are _divided_
 				 * by the scale factor so it returns something about the same size as we wanted initially
 				 */
-
+				var firstpassWidth = divW;
-			// ok so instead, only do that if stableDiffusionData.hr_fix_lock_px > 0
+				var firstpassHeight = divH; // liar's firstpass output resolution
-			if (stableDiffusionData.hr_fix_lock_px > 0) {
+				var desiredWidth = request.width;
-				// find the appropriate scale factor for hrfix
+				var desiredHeight = request.height; // truthful desired output resolution
-				var widthFactor =
+			} else {
-					request.width / stableDiffusionData.hr_fix_lock_px <= 4
+				// use scale normally, dump supersampled image into undersized reticle
-						? request.width / stableDiffusionData.hr_fix_lock_px
+				var desiredWidth = request.width * request.hr_scale;
-						: 4;
+				var desiredHeight = request.height * request.hr_scale; //desired 2nd-pass output resolution
-				var heightFactor =
+				var firstpassWidth = request.width;
-					request.height / stableDiffusionData.hr_fix_lock_px <= 4
+				var firstpassHeight = request.height;
-						? request.height / stableDiffusionData.hr_fix_lock_px
-						: 4;
-				var factor = heightFactor > widthFactor ? heightFactor : widthFactor;
-				request.hr_scale = hrFixScaleSlider.value = factor < 1 ? 1 : factor;
 			}
 
-			var newWidth = Math.floor(request.width / request.hr_scale);
+			// ensure firstpass "resolution" complies with lockpx
-			var newHeight = Math.floor(request.height / request.hr_scale);
+			if (lockpx > 0) {
-			request.width = newWidth;
+				//sigh repeated loop
-			request.height = newHeight;
+				firstpassWidth = divW < lockpx ? divW : lockpx;
+				firstpassHeight = divH < lockpx ? divH : lockpx;
+			}
+
+			if (stableDiffusionData.hr_square_aspect) {
+				larger =
+					firstpassWidth > firstpassHeight ? firstpassWidth : firstpassHeight;
+				firstpassWidth = firstpassHeight = larger;
+			}
+			request.width = firstpassWidth;
+			request.height = firstpassHeight;
+			request.hr_resize_x = desiredWidth;
+			request.hr_resize_y = desiredHeight;
 		}
 
 		// For compatibility with the old HRFix API
 		if (global.isOldHRFix && request.enable_hr) {
+			// For compatibility with the old HRFix API
 			request.firstphase_width = request.width / 2;
 			request.firstphase_height = request.height / 2;
 		}

pages/configuration.html

@@ -7,7 +7,7 @@
 		<link href="../css/colors.css?v=3f81e80" rel="stylesheet" />
 		<link href="../css/icons.css?v=caa702e" rel="stylesheet" />
 
-		<link href="../css/index.css?v=69d3b9e" rel="stylesheet" />
+		<link href="../css/index.css?v=5b8d4d6" rel="stylesheet" />
 		<link href="../css/layers.css?v=b4fbf61" rel="stylesheet" />
 
 		<link href="../css/ui/generic.css?v=4b9afe2" rel="stylesheet" />
@@ -84,11 +84,12 @@
 				step="0.1"
 				value="30.0" />
 		</label>
+		<!-- <p>Refresh the page to apply aabove.</p> -->
+		<hr />
 		<label style="display: flex">
 			Lie to HRfix:
 			<input id="hrfix-liar" class="canvas-size-input" type="checkbox" />
 		</label>
-		<p>Refresh the page to apply settings.</p>
 
 		<script>
 			const canvasWidth = document.getElementById("canvas-width");
@@ -127,8 +128,11 @@
 				localStorage.getItem("openoutpaint/settings.min-cfg") || -1;
 			maxCfg.value =
 				localStorage.getItem("openoutpaint/settings.max-cfg") || 30;
-			hrfixLiar.checked =
+			let _enable_dishonesty =
-				localStorage.getItem("openoutpaint/settings.hrfix-liar") || true;
+				localStorage.getItem("openoutpaint/settings.hrfix-liar") === null
+					? true
+					: localStorage.getItem("openoutpaint/settings.hrfix-liar") === "true";
+			hrfixLiar.checked = _enable_dishonesty;
 
 			writeToLocalStorage();