Merge pull request #143 from zero01101/a1111_hrfix_update

sigh
2023-01-02 21:32:39 -06:00 · 2023-01-02 21:32:39 -06:00 · f5c9fa0809
commit f5c9fa0809
parent 77c04e1a99 0376324666
4 changed files with 148 additions and 52 deletions
--- a/index.html
+++ b/index.html
@ -98,9 +98,12 @@
 						step="1" />
 					<br />
 					<input type="checkbox" id="cbxHRFix" onchange="changeHiResFix()" />
-					<label for="cbxHRFix">Auto txt2img HRfix</label>
+					<label for="cbxHRFix">Apply txt2img HRfix</label>
 					<br />
-					<div id="hrFixLock"></div>
+					<div id="hrFixScale"></div>
+					<label id="hrFixLabel">Choose HRfix upscaler</label>
+					<div id="hrFixUpscaler"></div>
+					<div id="hrDenoising"></div>
 					<input
 						type="checkbox"
 						id="cbxRestoreFaces"
@ -118,27 +121,27 @@
 					<div id="cfgScale"></div>
 					<div id="batchSize"></div>
 					<div id="batchCount"></div>
+					<label for="maskBlur">Mask blur:</label>
+					<span id="maskBlurText"></span>
+					<br />
+					<input
+						type="number"
+						id="maskBlur"
+						name="maskBlur"
+						min="0"
+						max="256"
+						value="0"
+						step="1"
+						onchange="changeMaskBlur()" />
+					<br />
+					<input
+						type="checkbox"
+						id="cbxSmooth"
+						checked
+						onchange="changeSmoothRendering()" />
+					<label for="cbxSmooth">Smooth Rendering</label>
 				</div>
-				<!-- Unsectioned -->
-				<label for="maskBlur">Mask blur:</label>
-				<span id="maskBlurText"></span>
-				<br />
-				<input
-					type="number"
-					id="maskBlur"
-					name="maskBlur"
-					min="0"
-					max="256"
-					value="0"
-					step="1"
-					onchange="changeMaskBlur()" />
-				<br />
-				<input
-					type="checkbox"
-					id="cbxSmooth"
-					checked
-					onchange="changeSmoothRendering()" />
-				<label for="cbxSmooth">Smooth Rendering</label>
+
 				<!-- Save/load image section -->
 				<button type="button" class="collapsible">Save/Upscaling</button>
 				<div class="content">
@ -187,7 +190,7 @@
 					<br />
 					<span id="version">
 						<a href="https://github.com/zero01101/openOutpaint" target="_blank">
-							Alpha release v0.0.12.3
+							Alpha release v0.0.12.5
 						</a>
 					</span>
 					<br />
@ -311,7 +314,7 @@
 				<div class="ui separator"></div>
 				<iframe
 					id="page-overlay"
-					src="pages/configuration.html?v=ae8af5d"></iframe>
+					src="pages/configuration.html?v=3d710ce"></iframe>
 			</div>
 		</div>

@ -337,7 +340,7 @@

 		<!-- Content -->
 		<script src="js/prompt.js?v=7a1c68c" type="text/javascript"></script>
-		<script src="js/index.js?v=133b74b" type="text/javascript"></script>
+		<script src="js/index.js?v=a30c20a" type="text/javascript"></script>

 		<script
 			src="js/ui/floating/history.js?v=fc92d14"
@ -351,7 +354,7 @@
 			src="js/ui/tool/generic.js?v=2bcd36d"
 			type="text/javascript"></script>

-		<script src="js/ui/tool/dream.js?v=832aa62" type="text/javascript"></script>
+		<script src="js/ui/tool/dream.js?v=45cb85f" type="text/javascript"></script>
 		<script
 			src="js/ui/tool/maskbrush.js?v=1e8a893"
 			type="text/javascript"></script>
--- a/js/index.js
+++ b/js/index.js
@ -106,8 +106,10 @@ var stableDiffusionData = {
 	inpainting_fill: 2,
 	enable_hr: false,
 	restore_faces: false,
-	firstphase_width: 0,
-	firstphase_height: 0,
+	//firstphase_width: 0,
+	//firstphase_height: 0, //20230102 welp looks like the entire way HRfix is implemented has become bonkersly different
+	hr_scale: 2.0,
+	hr_upscaler: "None",
 	styles: [],
 	// here's some more fields that might be useful

@ -341,6 +343,12 @@ async function testHostConnection() {
 			const response = await fetch(
 				document.getElementById("host").value + "/sdapi/v1/options"
 			);
+			const optionsdata = await response.json();
+			if (optionsdata["use_scale_latent_for_hires_fix"]) {
+				const message = `You are using an outdated version of A1111 webUI.\nThe HRfix options will not work until you update to at least commit ef27a18\n(https://github.com/AUTOMATIC1111/stable-diffusion-webui/commit/ef27a18b6b7cb1a8eebdc9b2e88d25baf2c2414d)\nor newer.`;
+				console.error(message);
+				alert(message);
+			}
 			switch (response.status) {
 				case 200: {
 					setConnectionStatus("online");
@ -552,6 +560,15 @@ const upscalerAutoComplete = createAutoComplete(
 	document.getElementById("upscaler-ac-select")
 );

+const hrFixUpscalerAutoComplete = createAutoComplete(
+	"HRfix Upscaler",
+	document.getElementById("hrFixUpscaler")
+);
+hrFixUpscalerAutoComplete.onchange.on(({value}) => {
+	stableDiffusionData.hr_upscaler = value;
+	localStorage.setItem(`openoutpaint/hr_upscaler`, value);
+});
+
 const resSlider = makeSlider(
 	"Resolution",
 	document.getElementById("resolution"),
@ -563,8 +580,6 @@ const resSlider = makeSlider(
 	2,
 	(v) => {
 		stableDiffusionData.width = stableDiffusionData.height = v;
-		stableDiffusionData.firstphase_width =
-			stableDiffusionData.firstphase_height = v / 2;

 		toolbar.currentTool &&
 			toolbar.currentTool.redraw &&
@ -621,15 +636,27 @@ makeSlider(
 	1
 );

+// 20230102 grumble grumble
 makeSlider(
-	"HRfix Lock Px.",
-	document.getElementById("hrFixLock"),
-	"hr_fix_lock_px",
+	"HRfix Scale",
+	document.getElementById("hrFixScale"),
+	"hr_scale",
+	1.0,
+	4.0,
+	0.1,
+	2.0,
+	0.1
+);
+
+makeSlider(
+	"HRfix Denoising",
+	document.getElementById("hrDenoising"),
+	"denoising_strength",
 	0.0,
-	768.0,
-	256.0,
-	0.0,
-	1.0
+	1.0,
+	0.05,
+	0.7,
+	0.01
 );

 function changeMaskBlur() {
@ -649,6 +676,23 @@ function changeHiResFix() {
 		document.getElementById("cbxHRFix").checked
 	);
 	localStorage.setItem("openoutpaint/enable_hr", stableDiffusionData.enable_hr);
+	var hrfSlider = document.getElementById("hrFixScale");
+	var hrfOpotions = document.getElementById("hrFixUpscaler");
+	var hrfLabel = document.getElementById("hrFixLabel");
+	var hrfDenoiseSlider = document.getElementById("hrDenoising");
+	if (stableDiffusionData.enable_hr) {
+		hrfSlider.classList.remove("invisible");
+		hrfOpotions.classList.remove("invisible");
+		hrfLabel.classList.remove("invisible");
+		hrfDenoiseSlider.classList.remove("invisible");
+		//state.ctxmenu.keepUnmaskedBlurSliderLinebreak.classList.add("invisible");
+	} else {
+		hrfSlider.classList.add("invisible");
+		hrfOpotions.classList.add("invisible");
+		hrfLabel.classList.add("invisible");
+		hrfDenoiseSlider.classList.add("invisible");
+		//state.ctxmenu.keepUnmaskedBlurSliderLinebreak.classList.remove("invisible");
+	}
 }

 function changeRestoreFaces() {
@ -743,17 +787,26 @@ async function getUpscalers() {
 			"[index] purposefully_incorrect_data response, ignore above error"
 		);
 		// result = purposefully_incorrect_data response: Invalid upscaler, needs to be on of these: None , Lanczos , Nearest , LDSR , BSRGAN , R-ESRGAN General 4xV3 , R-ESRGAN 4x+ Anime6B , ScuNET , ScuNET PSNR , SwinIR_4x
-		const upscalers = data.detail
+		const upscalersPlusNone = data.detail
 			.split(": ")[1]
 			.split(",")
-			.map((v) => v.trim())
-			.filter((v) => v !== "None"); // converting the result to a list of upscalers
+			.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");
+		upscalersPlusNone.push("Latent (nearest)"); // GRUMBLE GRUMBLE

 		upscalerAutoComplete.options = upscalers.map((u) => {
 			return {name: u, value: u};
 		});
+		hrFixUpscalerAutoComplete.options = upscalersPlusNone.map((u) => {
+			return {name: u, value: u};
+		});

 		upscalerAutoComplete.value = upscalers[0];
+		hrFixUpscalerAutoComplete.value =
+			localStorage.getItem("openoutpaint/hr_upscaler") === null
+				? "None"
+				: localStorage.getItem("openoutpaint/hr_upscaler");
 	} catch (e) {
 		console.warn("[index] Failed to fetch upscalers:");
 		console.warn(e);
@ -1060,6 +1113,15 @@ function loadSettings() {
 			? true
 			: localStorage.getItem("openoutpaint/sync_cursor_size") === "true";

+	let _hrfix_scale =
+		localStorage.getItem("openoutpaint/hr_scale") === null
+			? 2.0
+			: localStorage.getItem("openoutpaint/hr_scale");
+
+	let _hrfix_denoising =
+		localStorage.getItem("openoutpaint/denoising_strength") === null
+			? 0.7
+			: localStorage.getItem("openoutpaint/denoising_strength");
 	// set the values into the UI
 	document.getElementById("maskBlur").value = Number(_mask_blur);
 	document.getElementById("seed").value = Number(_seed);
@ -1067,6 +1129,8 @@ function loadSettings() {
 	document.getElementById("cbxRestoreFaces").checked = Boolean(_restore_faces);
 	document.getElementById("cbxSyncCursorSize").checked =
 		Boolean(_sync_cursor_size);
+	document.getElementById("hrFixScale").value = Number(_hrfix_scale);
+	document.getElementById("hrDenoising").value = Number(_hrfix_denoising);
 }

 imageCollection.element.addEventListener(
--- a/js/ui/tool/dream.js
+++ b/js/ui/tool/dream.js
@ -130,6 +130,22 @@ const _dream = async (endpoint, request) => {
 	let data = null;
 	try {
 		generating = true;
+		if (
+			endpoint == "txt2img" &&
+			request.enable_hr &&
+			localStorage.getItem("openoutpaint/settings.hrfix-liar") == "true"
+		) {
+			/**
+			 * try and make the new HRfix method useful for our purposes
+			 * 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 newWidth = Math.floor(request.width / request.hr_scale);
+			var newHeight = Math.floor(request.height / request.hr_scale);
+			request.width = newWidth;
+			request.height = newHeight;
+		}
 		const response = await fetch(apiURL, {
 			method: "POST",
 			headers: {
@ -1387,18 +1403,6 @@ const dreamTool = () =>
 						h: stableDiffusionData.height,
 					};

-					//hacky set non-square auto hrfix values
-					let hrLockPx =
-						localStorage.getItem("openoutpaint/hr_fix_lock_px") ?? 0;
-					stableDiffusionData.firstphase_height =
-						hrLockPx == 0 || resolution.h / 2 <= hrLockPx
-							? resolution.h / 2
-							: hrLockPx;
-					stableDiffusionData.firstphase_width =
-						hrLockPx == 0 || resolution.w / 2 <= hrLockPx
-							? resolution.w / 2
-							: hrLockPx;
-
 					if (global.connection === "online") {
 						dream_generate_callback(bb, resolution, state);
 					} else {
@ -1492,8 +1496,14 @@ const dreamTool = () =>
 								state.ctxmenu.keepUnmaskedBlurSlider.classList.remove(
 									"invisible"
 								);
+								state.ctxmenu.keepUnmaskedBlurSliderLinebreak.classList.add(
+									"invisible"
+								);
 							} else {
 								state.ctxmenu.keepUnmaskedBlurSlider.classList.add("invisible");
+								state.ctxmenu.keepUnmaskedBlurSliderLinebreak.classList.remove(
+									"invisible"
+								);
 							}
 						}
 					).label;
@ -1511,6 +1521,12 @@ const dreamTool = () =>
 						}
 					).slider;

+					state.ctxmenu.keepUnmaskedBlurSliderLinebreak =
+						document.createElement("br");
+					state.ctxmenu.keepUnmaskedBlurSliderLinebreak.classList.add(
+						"invisible"
+					);
+
 					// Preserve Brushed Masks Checkbox
 					state.ctxmenu.preserveMasksLabel = _toolbar_input.checkbox(
 						state,
@ -1552,6 +1568,7 @@ const dreamTool = () =>
 				menu.appendChild(document.createElement("br"));
 				menu.appendChild(state.ctxmenu.keepUnmaskedLabel);
 				menu.appendChild(state.ctxmenu.keepUnmaskedBlurSlider);
+				menu.appendChild(state.ctxmenu.keepUnmaskedBlurSliderLinebreak);
 				menu.appendChild(state.ctxmenu.preserveMasksLabel);
 				menu.appendChild(document.createElement("br"));
 				menu.appendChild(state.ctxmenu.overMaskPxLabel);
--- a/pages/configuration.html
+++ b/pages/configuration.html
@ -84,6 +84,10 @@
 				step="0.1"
 				value="30.0" />
 		</label>
+		<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>
@ -92,6 +96,7 @@
 			const maxSteps = document.getElementById("max-steps");
 			const minCfg = document.getElementById("min-cfg");
 			const maxCfg = document.getElementById("max-cfg");
+			const hrfixLiar = document.getElementById("hrfix-liar");

 			function writeToLocalStorage() {
 				localStorage.setItem(
@ -105,6 +110,10 @@
 				localStorage.setItem("openoutpaint/settings.max-steps", maxSteps.value);
 				localStorage.setItem("openoutpaint/settings.min-cfg", minCfg.value);
 				localStorage.setItem("openoutpaint/settings.max-cfg", maxCfg.value);
+				localStorage.setItem(
+					"openoutpaint/settings.hrfix-liar",
+					hrfixLiar.checked
+				);
 			}

 			// Loads values from local storage
@ -118,6 +127,8 @@
 				localStorage.getItem("openoutpaint/settings.min-cfg") || -1;
 			maxCfg.value =
 				localStorage.getItem("openoutpaint/settings.max-cfg") || 30;
+			hrfixLiar.checked =
+				localStorage.getItem("openoutpaint/settings.hrfix-liar") || true;

 			writeToLocalStorage();

@ -126,6 +137,7 @@
 			maxSteps.onchange = writeToLocalStorage;
 			minCfg.onchange = writeToLocalStorage;
 			maxCfg.onchange = writeToLocalStorage;
+			hrfixLiar.onchange = writeToLocalStorage;
 		</script>
 	</body>
 </html>