Merge branch 'main' into compact-checkboxes

.devtools/sethooks.ps1

@@ -0,0 +1,4 @@
+git config core.eol lf
+git config core.autocrlf input
+
+git config core.hooksPath .githooks/windows

.devtools/sethooks.sh

@@ -1,3 +1,3 @@
 #!/usr/bin/sh
 
-git config core.hooksPath .githooks
+git config core.hooksPath .githooks/linux

.devtools/updatehashes.ps1

@@ -0,0 +1,27 @@
+# Updates html files with cache busting urls including file hashes.
+
+# Actual file processing
+$htmlfiles = Get-ChildItem -Path . -Recurse -Filter "*.html" | Where {$_.FullName -notlike "*\node_modules\*"} | Resolve-path -relative
+foreach ($htmlfile in $htmlfiles) {
+    Write-Host "[info] Processing '${htmlfile}' for cache busting..." -ForegroundColor Blue
+
+    $resfiles = (@(Get-ChildItem -Path . -Recurse -Filter "*.css") + (Get-ChildItem -Path . -Recurse -Filter "*.js")) | Resolve-Path -relative
+
+    if ($args[0] -eq "gitadd") {
+        $resfiles = (git status -s | Select-String -Pattern "[A-Z]  .+") | ForEach-Object { -split $_.Line | Select-Object -Last 1 }
+    }
+
+    foreach ($resfile in $resfiles) {
+        $resfile = $resfile -replace '\\', '/' -replace '\./', ''
+        # Check if resource is used in html file
+        if ($null -ne (Select-String -Path $htmlfile -Pattern $resfile)) {
+            $hash = (Get-FileHash $resfile -Algorithm SHA1).Hash
+            
+            # This is just for cache busting...
+            # If 7 first characters of SHA1 is okay for git, it should be more than enough for us
+            $hash = $hash.Substring(0, 7).ToLower()
+
+            (Get-Content -Raw -Path $htmlfile).replace('\r\n', "\n") -replace "$resfile(\?v=[a-z0-9]+)?", "${resfile}?v=$hash" | Set-Content $htmlfile
+        }
+    }
+}

.gitattributes

@@ -0,0 +1 @@
+* text eol=lf

.githooks/windows/pre-commit

@@ -0,0 +1,9 @@
+#!/bin/sh
+#
+# Script to perform some basic operations to the code before committing.
+
+# Adds file hashes to html script imports for cache busting purposes
+powershell .devtools/updatehashes.ps1 gitadd
+
+# Adds file to current commit
+git add "**.html"

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=3071414" 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=2e14402" 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>

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
 
@@ -340,6 +342,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");
@@ -551,6 +559,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"),
@@ -562,8 +579,6 @@ const resSlider = makeSlider(
 	2,
 	(v) => {
 		stableDiffusionData.width = stableDiffusionData.height = v;
-		stableDiffusionData.firstphase_width =
-			stableDiffusionData.firstphase_height = v / 2;
 
 		toolbar.currentTool &&
 			toolbar.currentTool.redraw &&
@@ -620,15 +635,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() {
@@ -648,6 +675,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() {
@@ -742,17 +786,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);
@@ -1082,6 +1135,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);
@@ -1089,6 +1151,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(

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 {
@@ -1495,8 +1499,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"
+								);
 							}
 						}
 					).checkbox;
@@ -1514,6 +1524,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,
@@ -1560,6 +1576,9 @@ const dreamTool = () =>
 				array.appendChild(state.ctxmenu.keepUnmaskedLabel);
 				menu.appendChild(array);
 				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);
 				menu.appendChild(state.ctxmenu.eagerGenerateCountLabel);
 			},

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>

pages/embed.test.html

@@ -8,6 +8,7 @@
 		<iframe
 			id="openoutpaint"
 			style="width: 100%; height: 800px"
+			src="../index.html?v=e2520a0"
 			src="../index.html?v=49afaa2"
 			frameborder="0"></iframe>
 		<button id="add-res">Add Resource</button>