debugging button to help get information

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>

index.html

@@ -174,6 +174,9 @@
 					<button id="resetToDefaults" onclick="resetToDefaults()">
 						Reset to defaults
 					</button>
+					<button id="toggleDebugBtn" onclick="global.toggledebug()">
+						Toggle Debug
+					</button>
 					<br />
 					<span id="version">
 						<a href="https://github.com/zero01101/openOutpaint" target="_blank">

js/global.js

@@ -19,4 +19,27 @@ const global = {
 
 	// If there is a selected input
 	hasActiveInput: false,
+
+	// If debugging is enabled
+	_debug: false,
+	set debug(v) {
+		if (debugLayer) {
+			if (v) {
+				debugLayer.unhide();
+			} else {
+				debugLayer.hide();
+			}
+		}
+
+		this._debug = v;
+	},
+	get debug() {
+		return this._debug;
+	},
+	/**
+	 * Toggles debugging.
+	 */
+	toggledebug() {
+		this.debug = !this.debug;
+	},
 };

js/initalize/debug.populate.js

@@ -18,7 +18,7 @@ mouse.listen.world.onmousemove.on((evn) => {
 	snapXInfo.textContent = evn.x + snap(evn.x);
 	snapYInfo.textContent = evn.y + snap(evn.y);
 
-	if (debug) {
+	if (global.debug) {
 		debugLayer.clear();
 		debugCtx.fillStyle = "#F0F";
 		debugCtx.beginPath();
@@ -31,17 +31,3 @@ mouse.listen.world.onmousemove.on((evn) => {
 		debugCtx.fill();
 	}
 });
-
-/**
- * Toggles the debug layer (Just run toggledebug() in the console)
- */
-const toggledebug = () => {
-	const hidden = debugCanvas.style.display === "none";
-	if (hidden) {
-		debugLayer.unhide();
-		debug = true;
-	} else {
-		debugLayer.hide();
-		debug = false;
-	}
-};

js/initalize/layers.populate.js

@@ -308,7 +308,7 @@ mouse.listen.window.btn.middle.onpaint.on((evn) => {
 	}
 
 	viewport.transform(imageCollection.element);
-	if (debug) {
+	if (global.debug) {
 		debugCtx.clearRect(0, 0, debugCanvas.width, debugCanvas.height);
 		debugCtx.fillStyle = "#F0F";
 		debugCtx.beginPath();

js/ui/tool/dream.js

@@ -86,6 +86,46 @@ const _monitorProgress = (bb, oncheck = null) => {
 const _dream = async (endpoint, request) => {
 	const apiURL = `${host}${url}${endpoint}`;
 
+	// Debugging is enabled
+	if (global.debug) {
+		// Run in parallel
+		(async () => {
+			// Create canvas
+			const canvas = document.createElement("canvas");
+			canvas.width = request.width;
+			canvas.height = request.height * (request.init_images.length + 1);
+			const ctx = canvas.getContext("2d");
+
+			// Load images and draw to canvas
+			for (let i = 0; i < request.init_images.length; i++) {
+				try {
+					const image = document.createElement("img");
+					image.src = request.init_images[i];
+					await image.decode();
+
+					ctx.drawImage(image, 0, i * request.height);
+				} catch (e) {}
+			}
+
+			// Load mask and draw to canvas
+			if (request.mask) {
+				try {
+					const mask = document.createElement("img");
+					mask.src = request.mask;
+					await mask.decode();
+
+					ctx.drawImage(mask, 0, canvas.height - request.height);
+				} catch (e) {}
+			}
+
+			downloadCanvas({
+				canvas,
+				cropToContent: false,
+				filename: `openOutpaint_debug_${new Date()}.png`,
+			});
+		})();
+	}
+
 	/** @type {StableDiffusionResponse} */
 	let data = null;
 	try {