Merge branch 'main' into fix-addon-black-screen

css/icons.css

@@ -1,3 +1,34 @@
+.ui.inline-icon {
+	position: relative;
+
+	display: flex;
+}
+
+.ui.inline-icon::after {
+	content: "";
+	display: block;
+
+	position: absolute;
+
+	box-sizing: border-box;
+
+	margin: auto;
+	top: 15%;
+	bottom: 15%;
+
+	mask-size: contain;
+	mask-repeat: no-repeat;
+
+	max-height: 70%;
+	aspect-ratio: 1;
+
+	left: 0;
+	right: 0;
+
+	background-color: var(--c-text);
+}
+
+.ui.inline-icon.icon-eye-off::after,
 .ui.icon > .icon-eye-off {
 	-webkit-mask-image: url("../res/icons/eye-off.svg");
 	mask-image: url("../res/icons/eye-off.svg");
@@ -42,3 +73,57 @@
 	-webkit-mask-image: url("../res/icons/settings.svg");
 	mask-image: url("../res/icons/settings.svg");
 }
+
+.ui.inline-icon.icon-grid::after,
+.ui.icon > .icon-grid {
+	-webkit-mask-image: url("../res/icons/grid.svg");
+	mask-image: url("../res/icons/grid.svg");
+}
+
+.ui.inline-icon.icon-venetian-mask::after,
+.ui.icon > .icon-venetian-mask {
+	-webkit-mask-image: url("../res/icons/venetian-mask.svg");
+	mask-image: url("../res/icons/venetian-mask.svg");
+}
+
+.ui.inline-icon.icon-brush::after,
+.ui.icon > .icon-brush {
+	-webkit-mask-image: url("../res/icons/brush.svg");
+	mask-image: url("../res/icons/brush.svg");
+}
+
+.ui.inline-icon.icon-paintbrush::after,
+.ui.icon > .icon-paintbrush {
+	-webkit-mask-image: url("../res/icons/paintbrush.svg");
+	mask-image: url("../res/icons/paintbrush.svg");
+}
+
+.ui.inline-icon.icon-expand::after,
+.ui.icon > .icon-expand {
+	-webkit-mask-image: url("../res/icons/expand.svg");
+	mask-image: url("../res/icons/expand.svg");
+}
+
+.ui.inline-icon.icon-pin::after,
+.ui.icon > .icon-pin {
+	-webkit-mask-image: url("../res/icons/pin.svg");
+	mask-image: url("../res/icons/pin.svg");
+}
+
+.ui.inline-icon.icon-box-select::after,
+.ui.icon > .icon-box-select {
+	-webkit-mask-image: url("../res/icons/box-select.svg");
+	mask-image: url("../res/icons/box-select.svg");
+}
+
+.ui.inline-icon.icon-maximize::after,
+.ui.icon > .icon-maximize {
+	-webkit-mask-image: url("../res/icons/maximize.svg");
+	mask-image: url("../res/icons/maximize.svg");
+}
+
+.ui.inline-icon.icon-clipboard-list::after,
+.ui.icon > .icon-clipboard-list {
+	-webkit-mask-image: url("../res/icons/clipboard-list.svg");
+	mask-image: url("../res/icons/clipboard-list.svg");
+}

css/ui/generic.css

@@ -37,6 +37,8 @@
 /* Slider Input */
 div.slider-wrapper {
 	margin: 5px;
+	margin-left: 0;
+	margin-right: 0;
 }
 
 div.slider-wrapper {
@@ -100,6 +102,83 @@ div.slider-wrapper > input.text {
 	background-color: transparent;
 }
 
+/* Checkbox Input */
+div.checkbox-array {
+	display: flex;
+
+	margin-top: 5px;
+	margin-bottom: 5px;
+}
+
+input.oo-checkbox[type="checkbox"] {
+	/* Hide original checkbox */
+	-webkit-appearance: none;
+	appearance: none;
+
+	flex: 1;
+
+	margin: 0;
+
+	min-width: 28px;
+	height: 28px;
+
+	background-color: var(--c-primary);
+
+	cursor: pointer;
+}
+
+input.oo-checkbox[type="checkbox"]:disabled {
+	background-color: #666 !important;
+	cursor: default !important;
+}
+
+input.oo-checkbox[type="checkbox"]:disabled:hover {
+	filter: none !important;
+}
+
+input.oo-checkbox[type="checkbox"]:checked::after {
+	background-color: #66f;
+}
+
+input.oo-checkbox[type="checkbox"]:hover {
+	background-color: var(--c-hover);
+}
+
+input.oo-checkbox[type="checkbox"]:active {
+	filter: brightness(120%);
+}
+
+input.oo-checkbox[type="checkbox"]:first-child {
+	border-top-left-radius: 5px;
+	border-bottom-left-radius: 5px;
+}
+
+input.oo-checkbox[type="checkbox"]:last-child {
+	border-top-right-radius: 5px;
+	border-bottom-right-radius: 5px;
+}
+
+/* Mask Inversion Checkbox */
+input.oo-checkbox[type="checkbox"].invert-mask-checkbox::after {
+	background-color: var(--c-text);
+}
+
+input.oo-checkbox[type="checkbox"].invert-mask-checkbox:hover {
+	filter: brightness(120%);
+}
+
+input.oo-checkbox[type="checkbox"].invert-mask-checkbox:active {
+	filter: brightness(140%);
+}
+
+input.oo-checkbox[type="checkbox"].invert-mask-checkbox {
+	background-color: #922;
+}
+
+input.oo-checkbox[type="checkbox"].invert-mask-checkbox:checked {
+	background-color: #229;
+}
+
 /* Bare Select */
 
 .bareselector {

index.html

@@ -5,12 +5,12 @@
 		<title>openOutpaint 🐠</title>
 		<!-- CSS Variables -->
 		<link href="css/colors.css?v=3f81e80" rel="stylesheet" />
-		<link href="css/icons.css?v=a25504c" rel="stylesheet" />
+		<link href="css/icons.css?v=caa702e" rel="stylesheet" />
 
 		<link href="css/index.css?v=69d3b9e" rel="stylesheet" />
 		<link href="css/layers.css?v=b4fbf61" rel="stylesheet" />
 
-		<link href="css/ui/generic.css?v=79bee9b" rel="stylesheet" />
+		<link href="css/ui/generic.css?v=4b9afe2" rel="stylesheet" />
 
 		<link href="css/ui/history.css?v=0b03861" rel="stylesheet" />
 		<link href="css/ui/layers.css?v=4fd95fe" rel="stylesheet" />
@@ -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,12 +314,12 @@
 				<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>
 
 		<!-- Basics -->
-		<script src="js/global.js?v=3da0b2e" type="text/javascript"></script>
+		<script src="js/global.js?v=1807d6e" type="text/javascript"></script>
 
 		<!-- Base Libs -->
 		<script src="js/lib/util.js?v=7f6847c" type="text/javascript"></script>
@@ -325,7 +328,7 @@
 		<script src="js/lib/layers.js?v=a1f8aea" type="text/javascript"></script>
 		<script src="js/lib/commands.js?v=00464cb" type="text/javascript"></script>
 
-		<script src="js/lib/toolbar.js?v=d483951" type="text/javascript"></script>
+		<script src="js/lib/toolbar.js?v=d15051f" type="text/javascript"></script>
 		<script src="js/lib/ui.js?v=76ede2b" type="text/javascript"></script>
 
 		<script
@@ -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=1fba031" type="text/javascript"></script>
 
 		<script
 			src="js/ui/floating/history.js?v=fc92d14"
@@ -356,14 +359,14 @@
 			src="js/ui/tool/maskbrush.js?v=1e8a893"
 			type="text/javascript"></script>
 		<script
-			src="js/ui/tool/colorbrush.js?v=1bd7288"
+			src="js/ui/tool/colorbrush.js?v=8acb4f6"
 			type="text/javascript"></script>
 		<script
-			src="js/ui/tool/select.js?v=533feab"
+			src="js/ui/tool/select.js?v=ade791e"
 			type="text/javascript"></script>
-		<script src="js/ui/tool/stamp.js?v=81b8908" type="text/javascript"></script>
+		<script src="js/ui/tool/stamp.js?v=3c07ac8" type="text/javascript"></script>
 		<script
-			src="js/ui/tool/interrogate.js?v=af51c4d"
+			src="js/ui/tool/interrogate.js?v=e579ff1"
 			type="text/javascript"></script>
 
 		<!-- Initialize -->

js/global.js

@@ -3,6 +3,11 @@
  */
 
 const global = {
+	// If this is the first run of openOutpaint
+	get firstRun() {
+		return this._firstRun;
+	},
+
 	// Connection
 	_connection: "offline",
 	set connection(v) {
@@ -46,3 +51,5 @@ const global = {
 		this.debug = !this.debug;
 	},
 };
+
+global._firstRun = !localStorage.getItem("openoutpaint/host");

js/index.js

@@ -103,11 +103,13 @@ var stableDiffusionData = {
 	mask: "",
 	init_images: [],
 	inpaint_full_res: false,
-	inpainting_fill: 2,
+	inpainting_fill: 1,
 	enable_hr: false,
 	restore_faces: false,
-	firstphase_width: 0,
+	//firstphase_width: 0,
-	firstphase_height: 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
 
@@ -137,7 +139,6 @@ var host = "";
 var url = "/sdapi/v1/";
 const basePixelCount = 64; //64 px - ALWAYS 64 PX
 
-//
 function startup() {
 	testHostConfiguration();
 	loadSettings();
@@ -341,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");
@@ -552,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"),
@@ -563,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 &&
@@ -621,15 +635,27 @@ makeSlider(
 	1
 );
 
+// 20230102 grumble grumble
 makeSlider(
-	"HRfix Lock Px.",
+	"HRfix Scale",
-	document.getElementById("hrFixLock"),
+	document.getElementById("hrFixScale"),
-	"hr_fix_lock_px",
+	"hr_scale",
+	1.0,
+	4.0,
+	0.1,
+	2.0,
+	0.1
+);
+
+makeSlider(
+	"HRfix Denoising",
+	document.getElementById("hrDenoising"),
+	"hr_denoising_strength",
 	0.0,
-	768.0,
+	1.0,
-	256.0,
+	0.05,
-	0.0,
+	0.7,
-	1.0
+	0.01
 );
 
 function changeMaskBlur() {
@@ -649,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() {
@@ -743,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())
+			.map((v) => v.trim()); // need "None" for stupid hrfix changes razza frazza
-			.filter((v) => v !== "None"); // converting the result to a list of upscalers
+		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);
@@ -804,12 +856,14 @@ async function getUpscalers() {
 }
 
 async function getModels() {
-	var url = document.getElementById("host").value + "/sdapi/v1/sd-models";
+	const url = document.getElementById("host").value + "/sdapi/v1/sd-models";
+	let opt = null;
+
 	try {
 		const response = await fetch(url);
 		const data = await response.json();
 
-		modelAutoComplete.options = data.map((option) => ({
+		opt = data.map((option) => ({
 			name: option.title,
 			value: option.title,
 			optionelcb: (el) => {
@@ -818,6 +872,8 @@ async function getModels() {
 			},
 		}));
 
+		modelAutoComplete.options = opt;
+
 		try {
 			const optResponse = await fetch(
 				document.getElementById("host").value + "/sdapi/v1/options"
@@ -838,10 +894,10 @@ async function getModels() {
 
 	modelAutoComplete.onchange.on(async ({value}) => {
 		console.log(`[index] Changing model to [${value}]`);
-		var payload = {
+		const payload = {
 			sd_model_checkpoint: value,
 		};
-		var url = document.getElementById("host").value + "/sdapi/v1/options/";
+		const url = document.getElementById("host").value + "/sdapi/v1/options/";
 		try {
 			await fetch(url, {
 				method: "POST",
@@ -861,6 +917,25 @@ async function getModels() {
 			);
 		}
 	});
+
+	// If first time running, ask if user wants to switch to an inpainting model
+	if (global.firstRun && !modelAutoComplete.value.includes("inpainting")) {
+		const inpainting = opt.find(({name}) => name.includes("inpainting"));
+
+		let message =
+			"It seems this is your first time using openOutpaint. It is highly recommended that you switch to an inpainting model. \
+			These are highlighted as green in the model selector.";
+
+		if (inpainting) {
+			message += `\n\nWe have found the inpainting model\n\n - ${inpainting.name}\n\navailable in the webui. Do you want to switch to it?`;
+			if (confirm(message)) {
+				modelAutoComplete.value = inpainting.value;
+			}
+		} else {
+			message += `\n\nNo inpainting model seems to be available in the webui. It is recommended that you download an inpainting model, or outpainting results may not be optimal.`;
+			alert(message);
+		}
+	}
 }
 
 async function getConfig() {
@@ -1060,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/hr_denoising_strength") === null
+			? 0.7
+			: localStorage.getItem("openoutpaint/hr_denoising_strength");
 	// set the values into the UI
 	document.getElementById("maskBlur").value = Number(_mask_blur);
 	document.getElementById("seed").value = Number(_seed);
@@ -1067,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/lib/toolbar.js

@@ -145,17 +145,24 @@ const toolbar = {
  * Premade inputs for populating the context menus
  */
 const _toolbar_input = {
-	checkbox: (state, dataKey, text, cb = null) => {
+	checkbox: (state, dataKey, text, classes, cb = null) => {
 		if (state[dataKey] === undefined) state[dataKey] = false;
 
 		const checkbox = document.createElement("input");
 		checkbox.type = "checkbox";
+		checkbox.classList.add("oo-checkbox", "ui", "inline-icon");
+
+		if (typeof classes === "string") classes = [classes];
+
+		if (classes) checkbox.classList.add(...classes);
 		checkbox.checked = state[dataKey];
 		checkbox.onchange = () => {
 			state[dataKey] = checkbox.checked;
 			cb && cb();
 		};
 
+		checkbox.title = text;
+
 		const label = document.createElement("label");
 		label.appendChild(checkbox);
 		label.appendChild(new Text(text));

js/ui/tool/colorbrush.js

@@ -349,13 +349,16 @@ const colorBrushTool = () =>
 					state.ctxmenu = {};
 
 					// Affects Mask Checkbox
+					const array = document.createElement("div");
 					const affectMaskCheckbox = _toolbar_input.checkbox(
 						state,
 						"affectMask",
-						"Affect Mask"
+						"Affect Mask",
-					).label;
+						"icon-venetian-mask"
+					).checkbox;
+					array.appendChild(affectMaskCheckbox);
 
-					state.ctxmenu.affectMaskCheckbox = affectMaskCheckbox;
+					state.ctxmenu.affectMaskCheckbox = array;
 
 					// Brush size slider
 					const brushSizeSlider = _toolbar_input.slider(

js/ui/tool/dream.js

@@ -130,6 +130,25 @@ 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;
+		}
+		if (endpoint == "txt2img") {
+			request.denoising_strength = stableDiffusionData.hr_denoising_strength;
+		}
 		const response = await fetch(apiURL, {
 			method: "POST",
 			headers: {
@@ -977,7 +996,7 @@ const dream_img2img_callback = (bb, resolution, state) => {
 	request.height = resolution.h;
 
 	request.denoising_strength = state.denoisingStrength;
-	request.inpainting_fill = state.inpainting_fill; //let's see how this works //1; // For img2img use original
+	request.inpainting_fill = state.inpainting_fill ?? 1; //let's see how this works //1; // For img2img use original
 
 	// Load prompt (maybe we should add some events so we don't have to do this)
 	request.prompt = document.getElementById("prompt").value;
@@ -1392,18 +1411,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 {
@@ -1474,34 +1481,43 @@ const dreamTool = () =>
 					state.ctxmenu.snapToGridLabel = _toolbar_input.checkbox(
 						state,
 						"snapToGrid",
-						"Snap To Grid"
+						"Snap To Grid",
-					).label;
+						"icon-grid"
+					).checkbox;
 
 					// Invert Mask Checkbox
 					state.ctxmenu.invertMaskLabel = _toolbar_input.checkbox(
 						state,
 						"invertMask",
 						"Invert Mask",
+						["icon-venetian-mask", "invert-mask-checkbox"],
 						() => {
 							setMask(state.invertMask ? "hold" : "clear");
 						}
-					).label;
+					).checkbox;
 
 					// Keep Masked Content Checkbox
 					state.ctxmenu.keepUnmaskedLabel = _toolbar_input.checkbox(
 						state,
 						"keepUnmasked",
 						"Keep Unmasked",
+						"icon-pin",
 						() => {
 							if (state.keepUnmasked) {
 								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;
+					).checkbox;
 
 					// Keep Masked Content Blur Slider
 					state.ctxmenu.keepUnmaskedBlurSlider = _toolbar_input.slider(
@@ -1516,12 +1532,19 @@ 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,
 						"preserveMasks",
-						"Preserve Brushed Masks"
+						"Preserve Brushed Masks",
-					).label;
+						"icon-paintbrush"
+					).checkbox;
 
 					// Overmasking Slider
 					state.ctxmenu.overMaskPxLabel = _toolbar_input.slider(
@@ -1551,14 +1574,19 @@ const dreamTool = () =>
 				}
 
 				menu.appendChild(state.ctxmenu.cursorSizeSlider);
-				menu.appendChild(state.ctxmenu.snapToGridLabel);
+				const array = document.createElement("div");
-				menu.appendChild(document.createElement("br"));
+				array.classList.add("checkbox-array");
-				menu.appendChild(state.ctxmenu.invertMaskLabel);
+				array.appendChild(state.ctxmenu.snapToGridLabel);
-				menu.appendChild(document.createElement("br"));
+				//menu.appendChild(document.createElement("br"));
-				menu.appendChild(state.ctxmenu.keepUnmaskedLabel);
+				array.appendChild(state.ctxmenu.invertMaskLabel);
+				array.appendChild(state.ctxmenu.preserveMasksLabel);
+				//menu.appendChild(document.createElement("br"));
+				array.appendChild(state.ctxmenu.keepUnmaskedLabel);
+				menu.appendChild(array);
 				menu.appendChild(state.ctxmenu.keepUnmaskedBlurSlider);
-				menu.appendChild(state.ctxmenu.preserveMasksLabel);
+				// menu.appendChild(state.ctxmenu.keepUnmaskedBlurSliderLinebreak);
-				menu.appendChild(document.createElement("br"));
+				// menu.appendChild(state.ctxmenu.preserveMasksLabel);
+				// menu.appendChild(document.createElement("br"));
 				menu.appendChild(state.ctxmenu.overMaskPxLabel);
 				menu.appendChild(state.ctxmenu.eagerGenerateCountLabel);
 			},
@@ -1979,24 +2007,27 @@ const img2imgTool = () =>
 					state.ctxmenu.snapToGridLabel = _toolbar_input.checkbox(
 						state,
 						"snapToGrid",
-						"Snap To Grid"
+						"Snap To Grid",
-					).label;
+						"icon-grid"
+					).checkbox;
 
 					// Invert Mask Checkbox
 					state.ctxmenu.invertMaskLabel = _toolbar_input.checkbox(
 						state,
 						"invertMask",
 						"Invert Mask",
+						["icon-venetian-mask", "invert-mask-checkbox"],
 						() => {
 							setMask(state.invertMask ? "hold" : "clear");
 						}
-					).label;
+					).checkbox;
 
 					// Keep Masked Content Checkbox
 					state.ctxmenu.keepUnmaskedLabel = _toolbar_input.checkbox(
 						state,
 						"keepUnmasked",
 						"Keep Unmasked",
+						"icon-pin",
 						() => {
 							if (state.keepUnmasked) {
 								state.ctxmenu.keepUnmaskedBlurSlider.classList.remove(
@@ -2012,7 +2043,7 @@ const img2imgTool = () =>
 								);
 							}
 						}
-					).label;
+					).checkbox;
 
 					// Keep Masked Content Blur Slider
 					state.ctxmenu.keepUnmaskedBlurSlider = _toolbar_input.slider(
@@ -2037,15 +2068,17 @@ const img2imgTool = () =>
 					state.ctxmenu.preserveMasksLabel = _toolbar_input.checkbox(
 						state,
 						"preserveMasks",
-						"Preserve Brushed Masks"
+						"Preserve Brushed Masks",
-					).label;
+						"icon-paintbrush"
+					).checkbox;
 
 					// Inpaint Full Resolution Checkbox
 					state.ctxmenu.fullResolutionLabel = _toolbar_input.checkbox(
 						state,
 						"fullResolution",
-						"Inpaint Full Resolution"
+						"Inpaint Full Resolution",
-					).label;
+						"icon-expand"
+					).checkbox;
 
 					// Denoising Strength Slider
 					state.ctxmenu.denoisingStrengthSlider = _toolbar_input.slider(
@@ -2064,8 +2097,9 @@ const img2imgTool = () =>
 					state.ctxmenu.borderMaskGradientCheckbox = _toolbar_input.checkbox(
 						state,
 						"gradient",
-						"Border Mask Gradient"
+						"Border Mask Gradient",
-					).label;
+						"icon-box-select"
+					).checkbox;
 
 					// Border Mask Size Slider
 					state.ctxmenu.borderMaskSlider = _toolbar_input.slider(
@@ -2112,20 +2146,22 @@ const img2imgTool = () =>
 				}
 
 				menu.appendChild(state.ctxmenu.cursorSizeSlider);
-				menu.appendChild(state.ctxmenu.snapToGridLabel);
+				const array = document.createElement("div");
-				menu.appendChild(document.createElement("br"));
+				array.classList.add("checkbox-array");
-				menu.appendChild(state.ctxmenu.invertMaskLabel);
+				array.appendChild(state.ctxmenu.snapToGridLabel);
-				menu.appendChild(document.createElement("br"));
+				array.appendChild(state.ctxmenu.invertMaskLabel);
-				menu.appendChild(state.ctxmenu.keepUnmaskedLabel);
+				array.appendChild(state.ctxmenu.preserveMasksLabel);
+				array.appendChild(state.ctxmenu.keepUnmaskedLabel);
+				menu.appendChild(array);
 				menu.appendChild(state.ctxmenu.keepUnmaskedBlurSlider);
-				menu.appendChild(state.ctxmenu.keepUnmaskedBlurSliderLinebreak);
+				// menu.appendChild(state.ctxmenu.keepUnmaskedBlurSliderLinebreak);
-				menu.appendChild(state.ctxmenu.preserveMasksLabel);
-				menu.appendChild(document.createElement("br"));
-				menu.appendChild(state.ctxmenu.fullResolutionLabel);
-				menu.appendChild(document.createElement("br"));
 				menu.appendChild(state.ctxmenu.inpaintTypeSelect);
 				menu.appendChild(state.ctxmenu.denoisingStrengthSlider);
-				menu.appendChild(state.ctxmenu.borderMaskGradientCheckbox);
+				const btnArray2 = document.createElement("div");
+				btnArray2.classList.add("checkbox-array");
+				btnArray2.appendChild(state.ctxmenu.fullResolutionLabel);
+				btnArray2.appendChild(state.ctxmenu.borderMaskGradientCheckbox);
+				menu.appendChild(btnArray2);
 				menu.appendChild(state.ctxmenu.borderMaskSlider);
 				menu.appendChild(state.ctxmenu.eagerGenerateCountLabel);
 			},

js/ui/tool/interrogate.js

@@ -97,8 +97,9 @@ const interrogateTool = () =>
 					state.ctxmenu.snapToGridLabel = _toolbar_input.checkbox(
 						state,
 						"snapToGrid",
-						"Snap To Grid"
+						"Snap To Grid",
-					).label;
+						"icon-grid"
+					).checkbox;
 				}
 
 				menu.appendChild(state.ctxmenu.cursorSizeSlider);

js/ui/tool/select.js

@@ -633,23 +633,26 @@ const selectTransformTool = () =>
 					state.ctxmenu.snapToGridLabel = _toolbar_input.checkbox(
 						state,
 						"snapToGrid",
-						"Snap To Grid"
+						"Snap To Grid",
-					).label;
+						"icon-grid"
+					).checkbox;
 
 					// Keep Aspect Ratio
 					state.ctxmenu.keepAspectRatioLabel = _toolbar_input.checkbox(
 						state,
 						"keepAspectRatio",
-						"Keep Aspect Ratio"
+						"Keep Aspect Ratio",
-					).label;
+						"icon-maximize"
+					).checkbox;
 
 					// Use Clipboard
 					const clipboardCheckbox = _toolbar_input.checkbox(
 						state,
 						"useClipboard",
-						"Use clipboard"
+						"Use clipboard",
+						"icon-clipboard-list"
 					);
-					state.ctxmenu.useClipboardLabel = clipboardCheckbox.label;
+					state.ctxmenu.useClipboardLabel = clipboardCheckbox.checkbox;
 					if (!(navigator.clipboard && navigator.clipboard.write))
 						clipboardCheckbox.checkbox.disabled = true; // Disable if not available
 
@@ -760,11 +763,12 @@ const selectTransformTool = () =>
 					state.ctxmenu.actionArray = actionArray;
 					state.ctxmenu.visibleActionArray = visibleActionArray;
 				}
-				menu.appendChild(state.ctxmenu.snapToGridLabel);
+				const array = document.createElement("div");
-				menu.appendChild(document.createElement("br"));
+				array.classList.add("checkbox-array");
-				menu.appendChild(state.ctxmenu.keepAspectRatioLabel);
+				array.appendChild(state.ctxmenu.snapToGridLabel);
-				menu.appendChild(document.createElement("br"));
+				array.appendChild(state.ctxmenu.keepAspectRatioLabel);
-				menu.appendChild(state.ctxmenu.useClipboardLabel);
+				array.appendChild(state.ctxmenu.useClipboardLabel);
+				menu.appendChild(array);
 				menu.appendChild(state.ctxmenu.selectionPeekOpacitySlider);
 				menu.appendChild(state.ctxmenu.actionArray);
 				menu.appendChild(state.ctxmenu.visibleActionArray);

js/ui/tool/stamp.js

@@ -368,11 +368,17 @@ const stampTool = () =>
 				if (!state.ctxmenu) {
 					state.ctxmenu = {};
 					// Snap To Grid Checkbox
-					state.ctxmenu.snapToGridLabel = _toolbar_input.checkbox(
+					const array = document.createElement("div");
-						state,
+					array.classList.add("checkbox-array");
-						"snapToGrid",
+					array.appendChild(
-						"Snap To Grid"
+						_toolbar_input.checkbox(
-					).label;
+							state,
+							"snapToGrid",
+							"Snap To Grid",
+							"icon-grid"
+						).checkbox
+					);
+					state.ctxmenu.snapToGridLabel = array;
 
 					// Create resource list
 					const uploadButtonId = `upload-btn-${guid()}`;

pages/configuration.html

@@ -5,12 +5,12 @@
 		<title>openOutpaint 🐠</title>
 		<!-- CSS Variables -->
 		<link href="../css/colors.css?v=3f81e80" rel="stylesheet" />
-		<link href="../css/icons.css?v=a25504c" rel="stylesheet" />
+		<link href="../css/icons.css?v=caa702e" rel="stylesheet" />
 
 		<link href="../css/index.css?v=69d3b9e" rel="stylesheet" />
 		<link href="../css/layers.css?v=b4fbf61" rel="stylesheet" />
 
-		<link href="../css/ui/generic.css?v=79bee9b" rel="stylesheet" />
+		<link href="../css/ui/generic.css?v=4b9afe2" rel="stylesheet" />
 
 		<link href="../css/ui/history.css?v=0b03861" rel="stylesheet" />
 		<link href="../css/ui/layers.css?v=4fd95fe" rel="stylesheet" />
@@ -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>

res/icons/clipboard-list.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
+  <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
+  <path d="M12 11h4"></path>
+  <path d="M12 16h4"></path>
+  <path d="M8 11h.01"></path>
+  <path d="M8 16h.01"></path>
+
+</svg>

res/icons/equal.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <line x1="5" y1="9" x2="19" y2="9"></line>
+  <line x1="5" y1="15" x2="19" y2="15"></line>
+
+</svg>

res/icons/expand.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m21 21-6-6m6 6v-4.8m0 4.8h-4.8"></path>
+  <path d="M3 16.2V21m0 0h4.8M3 21l6-6"></path>
+  <path d="M21 7.8V3m0 0h-4.8M21 3l-6 6"></path>
+  <path d="M3 7.8V3m0 0h4.8M3 3l6 6"></path>
+
+</svg>

res/icons/grid.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+  <line x1="3" y1="9" x2="21" y2="9"></line>
+  <line x1="3" y1="15" x2="21" y2="15"></line>
+  <line x1="9" y1="3" x2="9" y2="21"></line>
+  <line x1="15" y1="3" x2="15" y2="21"></line>
+
+</svg>

res/icons/maximize.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M8 3H5a2 2 0 0 0-2 2v3"></path>
+  <path d="M21 8V5a2 2 0 0 0-2-2h-3"></path>
+  <path d="M3 16v3a2 2 0 0 0 2 2h3"></path>
+  <path d="M16 21h3a2 2 0 0 0 2-2v-3"></path>
+
+</svg>

res/icons/pin.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <line x1="12" y1="17" x2="12" y2="22"></line>
+  <path d="M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z"></path>
+
+</svg>

res/icons/square.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+
+</svg>

res/icons/venetian-mask.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M2 12a5 5 0 0 0 5 5 8 8 0 0 1 5 2 8 8 0 0 1 5-2 5 5 0 0 0 5-5V7h-5a8 8 0 0 0-5 2 8 8 0 0 0-5-2H2Z"></path>
+  <path d="M6 11c1.5 0 3 .5 3 2-2 0-3 0-3-2Z"></path>
+  <path d="M18 11c-1.5 0-3 .5-3 2 2 0 3 0 3-2Z"></path>
+
+</svg>