openOutpaint/js/index.js

//TODO FIND OUT WHY I HAVE TO RESIZE A TEXTBOX AND THEN START USING IT TO AVOID THE 1px WHITE LINE ON LEFT EDGES DURING IMG2IMG
//...lmao did setting min width 200 on info div fix that accidentally?  once the canvas is infinite and the menu bar is hideable it'll probably be a problem again

window.onload = startup;

var stableDiffusionData = {
	//includes img2img data but works for txt2img just fine
	prompt: "",
	negative_prompt: "",
	seed: -1,
	cfg_scale: null,
	sampler_index: "DDIM",
	steps: null,
	denoising_strength: 1,
	mask_blur: 0,
	batch_size: null,
	width: 512,
	height: 512,
	n_iter: null, // batch count
	mask: "",
	init_images: [],
	inpaint_full_res: false,
	inpainting_fill: 2,
	enable_hr: false,
	firstphase_width: 0,
	firstphase_height: 0,
	// here's some more fields that might be useful

	// ---txt2img specific:
	// "enable_hr": false,   // hires fix
	// "denoising_strength": 0, // ok this is in both txt and img2img but txt2img only applies it if enable_hr == true
	// "firstphase_width": 0, // hires fp w
	// "firstphase_height": 0, // see above s/w/h/

	// ---img2img specific
	// "init_images": [ // imageS!??!? wtf maybe for batch img2img?? i just dump one base64 in here
	//     "string"
	// ],
	// "resize_mode": 0,
	// "denoising_strength": 0.75, // yeah see
	// "mask": "string", // string is just a base64 image
	// "mask_blur": 4,
	// "inpainting_fill": 0, // 0- fill, 1- orig, 2- latent noise, 3- latent nothing
	// "inpaint_full_res": true,
	// "inpaint_full_res_padding": 0, // px
	// "inpainting_mask_invert": 0, // bool??????? wtf
	// "include_init_images": false // ??????
};

/**
 * Some Utility Functions
 */
function sliderChangeHandlerFactory(
	sliderId,
	textBoxId,
	dataKey,
	defaultV,
	setter = (k, v) => (stableDiffusionData[k] = v),
	getter = (k) => stableDiffusionData[k]
) {
	const sliderEl = document.getElementById(sliderId);
	const textBoxEl = document.getElementById(textBoxId);
	const savedValue = localStorage.getItem(dataKey);

	if (savedValue) setter(dataKey, savedValue || defaultV);

	function changeHandler(evn) {
		const eventSource = evn && evn.srcElement;
		const value = eventSource && Number(eventSource.value);

		if (value) setter(dataKey, value);

		if (!eventSource || eventSource.id === textBoxId)
			sliderEl.value = getter(dataKey);
		setter(dataKey, Number(sliderEl.value));
		textBoxEl.value = getter(dataKey);

		localStorage.setItem(dataKey, getter(dataKey));
	}

	textBoxEl.onchange = changeHandler;
	sliderEl.oninput = changeHandler;

	return changeHandler;
}

// stuff things use
var blockNewImages = false;
var returnedImages;
var imageIndex = 0;
var tmpImgXYWH = {};
var host = "";
var url = "/sdapi/v1/";
var endpoint = "txt2img";
var frameX = 512;
var frameY = 512;
var prevMouseX = 0;
var prevMouseY = 0;
var mouseX = 0;
var mouseY = 0;
var canvasX = 0;
var canvasY = 0;
var heldButton = 0;
var snapX = 0;
var snapY = 0;
var drawThis = {};
var clicked = false;
const basePixelCount = 64; //64 px - ALWAYS 64 PX
var scaleFactor = 8; //x64 px
var snapToGrid = true;
var paintMode = false;
var backupMaskPaintCanvas; //???
var backupMaskPaintCtx; //...? look i am bad at this
var backupMaskChunk = null;
var backupMaskX = null;
var backupMaskY = null;
var totalImagesReturned;
var overMaskPx = 16;
var drawTargets = []; // is this needed?  i only draw the last one anyway...
var dropTargets = []; // uhhh yeah similar to the above but for arbitrary dropped images
var arbitraryImage;
var arbitraryImageData;
var arbitraryImageBitmap;
var arbitraryImageBase64; // seriously js cmon work with me here
var placingArbitraryImage = false; // for when the user has loaded an existing image from their computer
var enableErasing = false; // accidental right-click erase if the user isn't trying to erase is a bad thing
var marchOffset = 0;
var marching = false;
var marchCoords = {};

// info div, sometimes hidden
let mouseXInfo = document.getElementById("mouseX");
let mouseYInfo = document.getElementById("mouseY");
let canvasXInfo = document.getElementById("canvasX");
let canvasYInfo = document.getElementById("canvasY");
let snapXInfo = document.getElementById("snapX");
let snapYInfo = document.getElementById("snapY");
let heldButtonInfo = document.getElementById("heldButton");

// canvases and related
const ovCanvas = document.getElementById("overlayCanvas"); // where mouse cursor renders
const ovCtx = ovCanvas.getContext("2d");
const tgtCanvas = document.getElementById("targetCanvas"); // where "box" gets drawn before dream happens
const tgtCtx = tgtCanvas.getContext("2d");
const maskPaintCanvas = document.getElementById("maskPaintCanvas"); // where masking brush gets painted
const maskPaintCtx = maskPaintCanvas.getContext("2d");
const tempCanvas = document.getElementById("tempCanvas"); // where select/rejects get superimposed temporarily
const tempCtx = tempCanvas.getContext("2d");
const imgCanvas = document.getElementById("canvas"); // where dreams go
const imgCtx = imgCanvas.getContext("2d");
const bgCanvas = document.getElementById("backgroundCanvas"); // gray bg grid
const bgCtx = bgCanvas.getContext("2d");

function startup() {
	checkIfWebuiIsRunning();
	loadSettings();
	getUpscalers();
	drawBackground();
	changeScaleFactor();
	changePaintMode();
	changeSampler();
	changeSteps();
	changeCfgScale();
	changeBatchCount();
	changeBatchSize();
	changeSnapMode();
	changeMaskBlur();
	changeSeed();
	changeOverMaskPx();
	changeHiResFix();
	changeEnableErasing();
	document.getElementById("overlayCanvas").onmousemove = mouseMove;
	document.getElementById("overlayCanvas").onmousedown = mouseDown;
	document.getElementById("overlayCanvas").onmouseup = mouseUp;
	document.getElementById("scaleFactor").value = scaleFactor;
}

function drop(imageParams) {
	const img = new Image();
	img.onload = function () {
		writeArbitraryImage(img, imageParams.x, imageParams.y);
	};
	img.src = arbitraryImageBase64;
}

function writeArbitraryImage(img, x, y) {
	commands.runCommand("drawImage", "Image Stamp", {
		x,
		y,
		image: img,
	});
	blockNewImages = false;
	placingArbitraryImage = false;
	document.getElementById("preloadImage").files = null;
}

function dream(x, y, prompt) {
	tmpImgXYWH.x = x;
	tmpImgXYWH.y = y;
	tmpImgXYWH.w = prompt.width;
	tmpImgXYWH.h = prompt.height;
	console.log(
		"dreaming to " + host + url + endpoint + ":\r\n" + JSON.stringify(prompt)
	);
	postData(prompt).then((data) => {
		returnedImages = data.images;
		totalImagesReturned = data.images.length;
		blockNewImages = true;
		//console.log(data); // JSON data parsed by `data.json()` call
		imageAcceptReject(x, y, data);
	});
}

async function postData(promptData) {
	this.host = document.getElementById("host").value;
	// Default options are marked with *
	const response = await fetch(this.host + this.url + this.endpoint, {
		method: "POST", // *GET, POST, PUT, DELETE, etc.
		mode: "cors", // no-cors, *cors, same-origin
		cache: "default", // *default, no-cache, reload, force-cache, only-if-cached
		credentials: "same-origin", // include, *same-origin, omit
		headers: {
			Accept: "application/json",
			"Content-Type": "application/json",
		},
		redirect: "follow", // manual, *follow, error
		referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
		body: JSON.stringify(promptData), // body data type must match "Content-Type" header
	});
	return response.json(); // parses JSON response into native JavaScript objects
}

function imageAcceptReject(x, y, data) {
	const img = new Image();
	img.onload = function () {
		tempCtx.drawImage(img, x, y); //imgCtx for actual image, tmp for... holding?
		var div = document.createElement("div");
		div.id = "veryTempDiv";
		div.style.position = "absolute";
		div.style.left = parseInt(x) + "px";
		div.style.top = parseInt(y + data.parameters.height) + "px";
		div.style.width = "200px";
		div.style.height = "70px";
		div.innerHTML =
			'<button onclick="prevImg(this)">&lt;</button><button onclick="nextImg(this)">&gt;</button><span class="strokeText" id="currentImgIndex"></span><span class="strokeText"> of </span><span class="strokeText" id="totalImgIndex"></span><button onclick="accept(this)">Y</button><button onclick="reject(this)">N</button>';
		document.getElementById("tempDiv").appendChild(div);
		document.getElementById("currentImgIndex").innerText = "1";
		document.getElementById("totalImgIndex").innerText = totalImagesReturned;
	};
	// set the image displayed as the first regardless of batch size/count
	imageIndex = 0;
	// load the image data after defining the closure
	img.src = "data:image/png;base64," + returnedImages[imageIndex];
}

function accept(evt) {
	// write image to imgcanvas
	marching = false;
	clearBackupMask();
	placeImage();
	removeChoiceButtons();
	clearTargetMask();
	blockNewImages = false;
}

function reject(evt) {
	// remove image entirely
	marching = false;
	restoreBackupMask();
	clearBackupMask();
	clearTargetMask();
	removeChoiceButtons();
	blockNewImages = false;
}

function newImage(evt) {
	clearPaintedMask();
	clearBackupMask();
	clearTargetMask();
	clearImgMask();
}

function prevImg(evt) {
	if (imageIndex == 0) {
		imageIndex = totalImagesReturned;
	}
	changeImg(false);
}

function nextImg(evt) {
	if (imageIndex == totalImagesReturned - 1) {
		imageIndex = -1;
	}
	changeImg(true);
}

function changeImg(forward) {
	const img = new Image();
	tempCtx.clearRect(0, 0, tempCtx.width, tempCtx.height);
	img.onload = function () {
		tempCtx.drawImage(img, tmpImgXYWH.x, tmpImgXYWH.y); //imgCtx for actual image, tmp for... holding?
	};
	var tmpIndex = document.getElementById("currentImgIndex");
	if (forward) {
		imageIndex++;
	} else {
		imageIndex--;
	}
	tmpIndex.innerText = imageIndex + 1;
	// load the image data after defining the closure
	img.src = "data:image/png;base64," + returnedImages[imageIndex]; //TODO need way to dream batches and select from results
}

function removeChoiceButtons(evt) {
	const element = document.getElementById("veryTempDiv");
	element.remove();
	tempCtx.clearRect(0, 0, tempCanvas.width, tempCanvas.height);
}

function restoreBackupMask() {
	// reapply mask if exists
	if (backupMaskChunk != null && backupMaskX != null && backupMaskY != null) {
		// backup mask data exists
		var iData = new ImageData(
			backupMaskChunk.data,
			backupMaskChunk.height,
			backupMaskChunk.width
		);
		maskPaintCtx.putImageData(iData, backupMaskX, backupMaskY);
	}
}

function clearBackupMask() {
	// clear backupmask
	backupMaskChunk = null;
	backupMaskX = null;
	backupMaskY = null;
}

function clearTargetMask() {
	tgtCtx.clearRect(0, 0, tgtCanvas.width, tgtCanvas.height);
}

function clearImgMask() {
	imgCtx.clearRect(0, 0, imgCanvas.width, imgCanvas.height);
}

function clearPaintedMask() {
	maskPaintCtx.clearRect(0, 0, maskPaintCanvas.width, maskPaintCanvas.height);
}

function placeImage() {
	const img = new Image();
	img.onload = function () {
		commands.runCommand("drawImage", "Image Dream", {
			x: tmpImgXYWH.x,
			y: tmpImgXYWH.y,
			image: img,
		});
		tmpImgXYWH = {};
		returnedImages = null;
	};
	// load the image data after defining the closure
	img.src = "data:image/png;base64," + returnedImages[imageIndex];
}

function sleep(ms) {
	// what was this even for, anyway?
	return new Promise((resolve) => setTimeout(resolve, ms));
}

function snap(i, scaled = true) {
	// very cheap test proof of concept but it works surprisingly well
	var scaleOffset = 0;
	if (scaled) {
		if (scaleFactor % 2 != 0) {
			// odd number, snaps to center of cell, oops
			scaleOffset = basePixelCount / 2;
		}
	}
	var snapOffset = (i % basePixelCount) - scaleOffset;
	if (snapOffset == 0) {
		return snapOffset;
	}
	return -snapOffset;
}

function march() {
	if (marching) {
		marchOffset++;
		if (marchOffset > 16) {
			marchOffset = 0;
		}
		drawMarchingAnts();
		setTimeout(march, 20);
	}
}

function drawMarchingAnts() {
	clearTargetMask();
	tgtCtx.strokeStyle = "#FFFFFFFF"; //"#55000077";
	tgtCtx.setLineDash([4, 2]);
	tgtCtx.lineDashOffset = -marchOffset;
	tgtCtx.strokeRect(marchCoords.x, marchCoords.y, marchCoords.w, marchCoords.h);
}

function mouseMove(evt) {
	const rect = ovCanvas.getBoundingClientRect(); // not-quite pixel offset was driving me insane
	const canvasOffsetX = rect.left;
	const canvasOffsetY = rect.top;
	heldButton = evt.buttons;
	mouseXInfo.innerText = mouseX = evt.clientX;
	mouseYInfo.innerText = mouseY = evt.clientY;
	canvasXInfo.innerText = canvasX = parseInt(evt.clientX - rect.left);
	canvasYInfo.innerText = canvasY = parseInt(evt.clientY - rect.top);
	snapXInfo.innerText = canvasX + snap(canvasX);
	snapYInfo.innerText = canvasY + snap(canvasY);
	heldButtonInfo.innerText = heldButton;
	ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height); // clear out the previous mouse cursor
	if (placingArbitraryImage) {
		// ugh refactor so this isn't duplicated between arbitrary image and dream reticle modes
		snapOffsetX = 0;
		snapOffsetY = 0;
		if (snapToGrid) {
			snapOffsetX = snap(canvasX, false);
			snapOffsetY = snap(canvasY, false);
		}
		finalX = snapOffsetX + canvasX;
		finalY = snapOffsetY + canvasY;
		ovCtx.drawImage(arbitraryImage, finalX, finalY);
	} else if (!paintMode) {
		// draw targeting square reticle thingy cursor
		ovCtx.strokeStyle = "#FFFFFF";
		snapOffsetX = 0;
		snapOffsetY = 0;
		if (snapToGrid) {
			snapOffsetX = snap(canvasX);
			snapOffsetY = snap(canvasY);
		}
		finalX = snapOffsetX + canvasX;
		finalY = snapOffsetY + canvasY;
		ovCtx.strokeRect(
			parseInt(finalX - (basePixelCount * scaleFactor) / 2),
			parseInt(finalY - (basePixelCount * scaleFactor) / 2),
			basePixelCount * scaleFactor,
			basePixelCount * scaleFactor
		); //origin is middle of the frame
	}
}

/**
 * Mask implementation
 */
mouse.listen.canvas.onmousemove.on((evn) => {
	if (paintMode && evn.target.id === "overlayCanvas") {
		// draw big translucent red blob cursor
		ovCtx.beginPath();
		ovCtx.arc(evn.x, evn.y, 4 * scaleFactor, 0, 2 * Math.PI, true); // for some reason 4x on an arc is === to 8x on a line???
		ovCtx.fillStyle = "#FF6A6A50";
		ovCtx.fill();
	}
});

mouse.listen.canvas.left.onpaint.on((evn) => {
	if (paintMode && evn.initialTarget.id === "overlayCanvas") {
		maskPaintCtx.globalCompositeOperation = "source-over";
		maskPaintCtx.strokeStyle = "#FF6A6A";

		maskPaintCtx.lineWidth = 8 * scaleFactor;
		maskPaintCtx.beginPath();
		maskPaintCtx.moveTo(evn.px, evn.py);
		maskPaintCtx.lineTo(evn.x, evn.y);
		maskPaintCtx.lineJoin = maskPaintCtx.lineCap = "round";
		maskPaintCtx.stroke();
	}
});

mouse.listen.canvas.right.onpaint.on((evn) => {
	if (paintMode && evn.initialTarget.id === "overlayCanvas") {
		maskPaintCtx.globalCompositeOperation = "destination-out";
		maskPaintCtx.strokeStyle = "#FFFFFFFF";

		maskPaintCtx.lineWidth = 8 * scaleFactor;
		maskPaintCtx.beginPath();
		maskPaintCtx.moveTo(evn.px, evn.py);
		maskPaintCtx.lineTo(evn.x, evn.y);
		maskPaintCtx.lineJoin = maskPaintCtx.lineCap = "round";
		maskPaintCtx.stroke();
	}
});

function mouseDown(evt) {
	const rect = ovCanvas.getBoundingClientRect();
	var oddOffset = 0;
	if (scaleFactor % 2 != 0) {
		oddOffset = basePixelCount / 2;
	}
	if (evt.button == 0) {
		// left click
		if (placingArbitraryImage) {
			var nextBox = {};
			nextBox.x = evt.offsetX;
			nextBox.y = evt.offsetY;
			nextBox.w = arbitraryImageData.width;
			nextBox.h = arbitraryImageData.height;
			dropTargets.push(nextBox);
		} else if (!paintMode) {
			//const rect = ovCanvas.getBoundingClientRect()
			var nextBox = {};
			nextBox.x =
				evt.clientX -
				(basePixelCount * scaleFactor) / 2 -
				rect.left +
				oddOffset; //origin is middle of the frame
			nextBox.y =
				evt.clientY - (basePixelCount * scaleFactor) / 2 - rect.top + oddOffset; //TODO make a way to set the origin to numpad dirs?
			nextBox.w = basePixelCount * scaleFactor;
			nextBox.h = basePixelCount * scaleFactor;
			drawTargets.push(nextBox);
		}
	} else if (evt.button == 2) {
		if (enableErasing && !paintMode) {
			// right click, also gotta make sure mask blob isn't being used as it's visually inconsistent with behavior of erased region
			ctx = imgCanvas.getContext("2d");
			if (snapToGrid) {
				ctx.clearRect(
					canvasX + snap(canvasX) - (basePixelCount * scaleFactor) / 2,
					canvasY + snap(canvasY) - (basePixelCount * scaleFactor) / 2,
					basePixelCount * scaleFactor,
					basePixelCount * scaleFactor
				);
			} else {
				ctx.clearRect(
					canvasX - (basePixelCount * scaleFactor) / 2,
					canvasY - (basePixelCount * scaleFactor) / 2,
					basePixelCount * scaleFactor,
					basePixelCount * scaleFactor
				);
			}
		}
	}
}

function mouseUp(evt) {
	if (evt.button == 0) {
		// left click
		if (placingArbitraryImage) {
			// jeez i REALLY need to refactor tons of this to not be duplicated all over, that's definitely my next chore after figuring out that razza frazza overmask fade
			var target = dropTargets[dropTargets.length - 1]; //get the last one... why am i storing all of them?
			snapOffsetX = 0;
			snapOffsetY = 0;
			if (snapToGrid) {
				snapOffsetX = snap(target.x, false);
				snapOffsetY = snap(target.y, false);
			}
			finalX = snapOffsetX + target.x;
			finalY = snapOffsetY + target.y;

			drawThis.x = finalX;
			drawThis.y = finalY;
			drawThis.w = target.w;
			drawThis.h = target.h;
			drawIt = drawThis; // i still think this is really stupid and redundant and unnecessary and redundant
			drop(drawIt);
		} else if (paintMode) {
			clicked = false;
			return;
		} else {
			if (!blockNewImages) {
				//TODO seriously, refactor this
				blockNewImages = true;
				marching = true;
				var drawIt = {}; //why am i doing this????
				var target = drawTargets[drawTargets.length - 1]; //get the last one... why am i storing all of them?
				var oddOffset = 0;
				if (scaleFactor % 2 != 0) {
					oddOffset = basePixelCount / 2;
				}
				snapOffsetX = 0;
				snapOffsetY = 0;
				if (snapToGrid) {
					snapOffsetX = snap(target.x);
					snapOffsetY = snap(target.y);
				}
				finalX = snapOffsetX + target.x - oddOffset;
				finalY = snapOffsetY + target.y - oddOffset;

				drawThis.x = marchCoords.x = finalX;
				drawThis.y = marchCoords.y = finalY;
				drawThis.w = marchCoords.w = target.w;
				drawThis.h = marchCoords.h = target.h;
				march(finalX, finalY, target.w, target.h);
				drawIt = drawThis; //TODO this is WRONG but also explicitly only draws the last image  ... i think
				//check if there's image data already there
				// console.log(downX + ":" + downY + " :: " + this.isCanvasBlank(downX, downY));
				if (!isCanvasBlank(drawIt.x, drawIt.y, drawIt.w, drawIt.h, imgCanvas)) {
					// image exists, set up for img2img
					var mainCanvasCtx = document
						.getElementById("canvas")
						.getContext("2d");
					const imgChunk = mainCanvasCtx.getImageData(
						drawIt.x,
						drawIt.y,
						drawIt.w,
						drawIt.h
					); // imagedata object of the image being outpainted
					const imgChunkData = imgChunk.data; // imagedata.data object, a big inconvenient uint8clampedarray
					// these are the 3 mask monitors on the bottom of the page
					var initImgCanvas = document.getElementById("initImgCanvasMonitor");
					var overMaskCanvas = document.getElementById("overMaskCanvasMonitor");
					overMaskCanvas.width = initImgCanvas.width = target.w; //maskCanvas.width = target.w;
					overMaskCanvas.height = initImgCanvas.height = target.h; //maskCanvas.height = target.h;
					var initImgCanvasCtx = initImgCanvas.getContext("2d");
					var overMaskCanvasCtx = overMaskCanvas.getContext("2d");
					// get blank pixels to use as mask
					const initImgData = mainCanvasCtx.createImageData(drawIt.w, drawIt.h);
					let overMaskImgData = overMaskCanvasCtx.createImageData(
						drawIt.w,
						drawIt.h
					);
					// cover entire masks in black before adding masked areas

					for (let i = 0; i < imgChunkData.length; i += 4) {
						// l->r, top->bottom, R G B A pixel values in a big ol array
						// make a simple mask
						if (imgChunkData[i + 3] == 0) {
							// rgba pixel values, 4th one is alpha, if it's 0 there's "nothing there" in the image display canvas and its time to outpaint
							overMaskImgData.data[i] = 255; // white mask gets painted over
							overMaskImgData.data[i + 1] = 255;
							overMaskImgData.data[i + 2] = 255;
							overMaskImgData.data[i + 3] = 255;

							initImgData.data[i] = 0; // null area on initial image becomes opaque black pixels
							initImgData.data[i + 1] = 0;
							initImgData.data[i + 2] = 0;
							initImgData.data[i + 3] = 255;
						} else {
							// leave these pixels alone
							overMaskImgData.data[i] = 0; // black mask gets ignored for in/outpainting
							overMaskImgData.data[i + 1] = 0;
							overMaskImgData.data[i + 2] = 0;
							overMaskImgData.data[i + 3] = 255; // but it still needs an opaque alpha channel

							initImgData.data[i] = imgChunkData[i]; // put the original picture back in the painted area
							initImgData.data[i + 1] = imgChunkData[i + 1];
							initImgData.data[i + 2] = imgChunkData[i + 2];
							initImgData.data[i + 3] = imgChunkData[i + 3]; //it's still RGBA so we can handily do this in nice chunks'o'4
						}
					}
					if (overMaskPx > 0) {
						// https://stackoverflow.com/a/30204783 ???? !!!!!!!!
						overMaskCanvasCtx.fillStyle = "black";
						overMaskCanvasCtx.fillRect(0, 0, drawIt.w, drawIt.h); // fill with black instead of null to start
						for (i = 0; i < overMaskImgData.data.length; i += 4) {
							if (overMaskImgData.data[i] == 255) {
								// white pixel?
								// just blotch all over the thing
								var rando = Math.floor(Math.random() * overMaskPx);
								overMaskCanvasCtx.beginPath();
								overMaskCanvasCtx.arc(
									(i / 4) % overMaskCanvas.width,
									Math.floor(i / 4 / overMaskCanvas.width),
									scaleFactor + rando, // was 4 * sf + rando, too big
									0,
									2 * Math.PI,
									true
								);
								overMaskCanvasCtx.fillStyle = "#FFFFFFFF";
								overMaskCanvasCtx.fill();
							}
						}
						overMaskImgData = overMaskCanvasCtx.getImageData(
							0,
							0,
							overMaskCanvas.width,
							overMaskCanvas.height
						);
						overMaskCanvasCtx.putImageData(overMaskImgData, 0, 0);
					}
					// also check for painted masks in region, add them as white pixels to mask canvas
					const maskChunk = maskPaintCtx.getImageData(
						drawIt.x,
						drawIt.y,
						drawIt.w,
						drawIt.h
					);
					const maskChunkData = maskChunk.data;
					for (let i = 0; i < maskChunkData.length; i += 4) {
						if (maskChunkData[i + 3] != 0) {
							overMaskImgData.data[i] = 255;
							overMaskImgData.data[i + 1] = 255;
							overMaskImgData.data[i + 2] = 255;
							overMaskImgData.data[i + 3] = 255;
						}
					}
					// backup any painted masks ingested then them, replacable if user doesn't like resultant image
					var clearArea = maskPaintCtx.createImageData(drawIt.w, drawIt.h);
					backupMaskChunk = maskChunk;
					backupMaskX = drawIt.x;
					backupMaskY = drawIt.y;

					var clearD = clearArea.data;
					for (let i = 0; i < clearD.length; i++) {
						clearD[i] = 0; // just null it all out
					}
					maskPaintCtx.putImageData(clearArea, drawIt.x, drawIt.y);
					// mask monitors
					overMaskCanvasCtx.putImageData(overMaskImgData, 0, 0); // :pray:
					var overMaskBase64 = overMaskCanvas.toDataURL();
					initImgCanvasCtx.putImageData(initImgData, 0, 0);
					var initImgBase64 = initImgCanvas.toDataURL();
					// anyway all that to say NOW let's run img2img
					endpoint = "img2img";
					stableDiffusionData.mask = overMaskBase64;
					stableDiffusionData.init_images = [initImgBase64];
					// slightly more involved than txt2img
				} else {
					// time to run txt2img
					endpoint = "txt2img";
					// easy enough
				}
				stableDiffusionData.prompt = document.getElementById("prompt").value;
				stableDiffusionData.negative_prompt =
					document.getElementById("negPrompt").value;
				stableDiffusionData.width = drawIt.w;
				stableDiffusionData.height = drawIt.h;
				stableDiffusionData.firstphase_height = drawIt.h / 2;
				stableDiffusionData.firstphase_width = drawIt.w / 2;
				dream(drawIt.x, drawIt.y, stableDiffusionData);
			}
		}
	}
}

function changePaintMode() {
	paintMode = document.getElementById("cbxPaint").checked;
	clearTargetMask();
	ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height);
}

function changeEnableErasing() {
	// yeah because this is for the image layer
	enableErasing = document.getElementById("cbxEnableErasing").checked;
	localStorage.setItem("enable_erase", enableErasing);
}

function changeSampler() {
	stableDiffusionData.sampler_index =
		document.getElementById("samplerSelect").value;
	localStorage.setItem("sampler", stableDiffusionData.sampler_index);
}

const changeCfgScale = sliderChangeHandlerFactory(
	"cfgScale",
	"cfgScaleTxt",
	"cfg_scale",
	7.0
);
const changeBatchSize = sliderChangeHandlerFactory(
	"batchSize",
	"batchSizeText",
	"batch_size",
	2
);
const changeBatchCount = sliderChangeHandlerFactory(
	"batchCount",
	"batchCountText",
	"n_iter",
	2
);
const changeScaleFactor = sliderChangeHandlerFactory(
	"scaleFactor",
	"scaleFactorTxt",
	"scaleFactor",
	8,
	(k, v) => (scaleFactor = v),
	(k) => scaleFactor
);
const changeSteps = sliderChangeHandlerFactory(
	"steps",
	"stepsTxt",
	"steps",
	30
);

function changeSnapMode() {
	snapToGrid = document.getElementById("cbxSnap").checked;
}

function changeMaskBlur() {
	stableDiffusionData.mask_blur = document.getElementById("maskBlur").value;
	localStorage.setItem("mask_blur", stableDiffusionData.mask_blur);
}

function changeSeed() {
	stableDiffusionData.seed = document.getElementById("seed").value;
	localStorage.setItem("seed", stableDiffusionData.seed);
}

function changeOverMaskPx() {
	overMaskPx = document.getElementById("overMaskPx").value;
	localStorage.setItem("overmask_px", overMaskPx);
}

function changeHiResFix() {
	stableDiffusionData.enable_hr = Boolean(
		document.getElementById("cbxHRFix").checked
	);
	localStorage.setItem("enable_hr", stableDiffusionData.enable_hr);
}

function isCanvasBlank(x, y, w, h, specifiedCanvas) {
	var canvas = document.getElementById(specifiedCanvas.id);
	return !canvas
		.getContext("2d")
		.getImageData(x, y, w, h)
		.data.some((channel) => channel !== 0);
}

function drawBackground() {
	// Checkerboard
	let darkTileColor = "#333";
	let lightTileColor = "#555";
	for (var x = 0; x < bgCanvas.width; x += 64) {
		for (var y = 0; y < bgCanvas.height; y += 64) {
			bgCtx.fillStyle = (x + y) % 128 === 0 ? lightTileColor : darkTileColor;
			bgCtx.fillRect(x, y, 64, 64);
		}
	}
}

function preloadImage() {
	// possible firefox-only bug?
	// attempt to prevent requesting a dream if double-clicking a selected image
	document.getElementById("overlayCanvas").onmousemove = null;
	document.getElementById("overlayCanvas").onmousedown = null;
	document.getElementById("overlayCanvas").onmouseup = null;

	var file = document.getElementById("preloadImage").files[0];
	var reader = new FileReader();
	reader.onload = function (evt) {
		var imgCanvas = document.createElement("canvas");
		var imgCtx = imgCanvas.getContext("2d");
		arbitraryImage = new Image();
		arbitraryImage.onload = function () {
			blockNewImages = true;
			// now put it into imagedata for canvas fun
			imgCanvas.width = arbitraryImage.width;
			imgCanvas.height = arbitraryImage.height;
			imgCtx.drawImage(arbitraryImage, 0, 0);
			arbitraryImageData = imgCtx.getImageData(
				0,
				0,
				arbitraryImage.width,
				arbitraryImage.height
			); // can't use that to drawImage on a canvas...
			arbitraryImageBitmap = createImageBitmap(arbitraryImageData); // apparently that either... maybe just the raw image?
			arbitraryImageBase64 = imgCanvas.toDataURL();
			placingArbitraryImage = true;
			document.getElementById("overlayCanvas").onmousemove = mouseMove;
			document.getElementById("overlayCanvas").onmousedown = mouseDown;
			document.getElementById("overlayCanvas").onmouseup = mouseUp;
		};
		arbitraryImage.src = evt.target.result;
	};
	reader.readAsDataURL(file);
}

function downloadCanvas() {
	var link = document.createElement("a");
	link.download =
		new Date().toISOString().slice(0, 19).replace("T", " ").replace(":", " ") +
		" openOutpaint image.png";
	var croppedCanvas = cropCanvas(imgCanvas);
	if (croppedCanvas != null) {
		link.href = croppedCanvas.toDataURL("image/png");
		link.click();
	}
}

function cropCanvas(sourceCanvas) {
	var w = sourceCanvas.width;
	var h = sourceCanvas.height;
	var pix = {x: [], y: []};
	var imageData = sourceCanvas.getContext("2d").getImageData(0, 0, w, h);
	var x, y, index;

	for (y = 0; y < h; y++) {
		for (x = 0; x < w; x++) {
			// lol i need to learn what this part does
			index = (y * w + x) * 4; // OHHH OK this is setting the imagedata.data uint8clampeddataarray index for the specified x/y coords
			//this part i get, this is checking that 4th RGBA byte for opacity
			if (imageData.data[index + 3] > 0) {
				pix.x.push(x);
				pix.y.push(y);
			}
		}
	}
	// ...need to learn what this part does too :badpokerface:
	// is this just determining the boundaries of non-transparent pixel data?
	pix.x.sort(function (a, b) {
		return a - b;
	});
	pix.y.sort(function (a, b) {
		return a - b;
	});
	var n = pix.x.length - 1;
	w = (pix.x[n] - pix.x[0])+1;
	h = (pix.y[n] - pix.y[0])+1;
	// yup sure looks like it

	try {
		var cut = sourceCanvas
			.getContext("2d")
			.getImageData(pix.x[0], pix.y[0], w, h);
		var cutCanvas = document.createElement("canvas");
		cutCanvas.width = w;
		cutCanvas.height = h;
		cutCanvas.getContext("2d").putImageData(cut, 0, 0);
	} catch (ex) {
		// probably empty image
		//TODO confirm edge cases?
		cutCanvas = null;
	}
	return cutCanvas;
}

function checkIfWebuiIsRunning() {
	var url = document.getElementById("host").value + "/startup-events";
	fetch(url)
		.then((response) => {
			if (response.status == 200) {
				console.log("webui is running");
			}
		})
		.catch((error) => {
			alert(
				"WebUI doesnt seem to be running, please start it and try again\nCheck console for additional info\n" +
					error
			);
		});
}

function getUpscalers() {

	/*
	 so for some reason when upscalers request returns upscalers, the real-esrgan model names are incorrect, and need to be fetched from /sdapi/v1/realesrgan-models
	 also the realesrgan models returned are not all correct, extra fun!
	 LDSR seems to have problems so we dont add that either ->  RuntimeError: Number of dimensions of repeat dims can not be smaller than number of dimensions of tensor
	 need to figure out why that is, if you dont get this error then you can add it back in

	 Hacky way to get the correct list all in one go is to purposefully make an incorrect request, which then returns
	 { detail: "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" }
	 from which we can extract the correct list of upscalers
	*/
	
	// hacky way to get the correct list of upscalers
	var upscalerSelect = document.getElementById("upscalers");
	var extras_url = document.getElementById("host").value + "/sdapi/v1/extra-single-image/" // endpoint for upscaling, needed for the hacky way to get the correct list of upscalers
	var empty_image = new Image(512, 512);
	empty_image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAFCAAAAABCAYAAAChpRsuAAAALklEQVR42u3BAQ0AAAgDoJvc6LeHAybtBgAAAAAAAAAAAAAAAAAAAAAAAAB47QD2wAJ/LnnqGgAAAABJRU5ErkJggg=="; //transparent pixel
	var purposefully_incorrect_data = {
		"resize-mode" : 0, // 0 = just resize, 1 = crop and resize, 2 = resize and fill i assume based on theimg2img tabs options
		"upscaling_resize": 2, 
		"upscaler_1": "fake_upscaler",
		"image": empty_image.src,
	}
	
	fetch(extras_url, {
		method: "POST",
		headers: {
			Accept: "application/json",
			"Content-Type": "application/json",
		},
		body: JSON.stringify(purposefully_incorrect_data),
	})
	.then((response) => response.json())
	.then((data) => {
		console.log( "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
		let upscalers = data.detail.split(": ")[1].trim().split(" , "); // converting the result to a list of upscalers
		for (var i = 0; i < upscalers.length; i++) {
			if(upscalers[i] == "LDSR") continue; // Skip LDSR, see reason in the first comment
			var option = document.createElement("option");
			option.text = upscalers[i];
			option.value = upscalers[i];
			upscalerSelect.add(option);
		}

	})


	/* THE NON HACKY WAY THAT I SIMPLY COULD NOT GET TO PRODUCE A LIST WITHOUT NON WORKING UPSCALERS, FEEL FREE TO TRY AND FIGURE IT OUT

	var url = document.getElementById("host").value + "/sdapi/v1/upscalers";
	var realesrgan_url = document.getElementById("host").value + "/sdapi/v1/realesrgan-models";

	// get upscalers
	fetch(url)
		.then((response) => response.json())
		.then((data) => {
			console.log(data);

			for (var i = 0; i < data.length; i++) {
				var option = document.createElement("option");

				if (data[i].name.includes("ESRGAN") || data[i].name.includes("LDSR")) {
					continue;
				}
				option.text = data[i].name;
				upscalerSelect.add(option);
			}
		})
		.catch((error) => {
			alert(
				"Error getting upscalers, please check console for additional info\n" +
					error
			);
		});
	// fetch realesrgan models separately
	fetch(realesrgan_url)
		.then((response) => response.json())
		.then((data) => {
			var model = data;
			for(var i = 0; i < model.length; i++){
				let option = document.createElement("option");
				option.text = model[i].name;
				option.value = model[i].name;
				upscalerSelect.add(option);

			}
		
	})
	*/
}

async function upscaleAndDownload(){
	// Future improvements: some upscalers take a while to upscale, so we should show a loading bar or something, also a slider for the upscale amount

	// get cropped canvas, send it to upscaler, download result
	var upscale_factor = 2; // TODO: make this a user input 1.x - 4.0 or something
	var upscaler = document.getElementById("upscalers").value;
	var croppedCanvas = cropCanvas(imgCanvas);
	if (croppedCanvas != null) {
		var upscaler = document.getElementById("upscalers").value;
		var url = document.getElementById("host").value + "/sdapi/v1/extra-single-image/";
		var imgdata = croppedCanvas.toDataURL("image/png");
		var data = {
			"resize-mode" : 0, // 0 = just resize, 1 = crop and resize, 2 = resize and fill i assume based on theimg2img tabs options
			"upscaling_resize": upscale_factor, 
			"upscaler_1": upscaler,
			"image": imgdata,
		}
		console.log(data);
		await fetch(url, {
			method: "POST",
			headers: {
				Accept: "application/json",
				"Content-Type": "application/json",
			},
			body: JSON.stringify(data),
		})
		.then((response) => response.json())
		.then((data) => {
			console.log(data);
			var link = document.createElement("a");
			link.download =
			new Date().toISOString().slice(0, 19).replace("T", " ").replace(":", " ") +
			" openOutpaint image upscaler_"+upscaler+".png";
			link.href = "data:image/png;base64,"+data["image"];
			link.click();
		})
	}
}


function loadSettings() {
	// set default values if not set
	var _sampler =
		localStorage.getItem("sampler") == null
			? "DDIM"
			: localStorage.getItem("sampler");
	var _mask_blur =
		localStorage.getItem("mask_blur") == null
			? 0
			: localStorage.getItem("mask_blur");
	var _seed =
		localStorage.getItem("seed") == null ? -1 : localStorage.getItem("seed");
	var _enable_hr = Boolean(
		localStorage.getItem("enable_hr") == (null || "false")
			? false
			: localStorage.getItem("enable_hr")
	);
	var _enable_erase = Boolean(
		localStorage.getItem("enable_erase") == (null || "false")
			? false
			: localStorage.getItem("enable_erase")
	);
	var _overmask_px =
		localStorage.getItem("overmask_px") == null
			? 0
			: localStorage.getItem("overmask_px");

	// set the values into the UI
	document.getElementById("samplerSelect").value = String(_sampler);
	document.getElementById("maskBlur").value = Number(_mask_blur);
	document.getElementById("seed").value = Number(_seed);
	document.getElementById("cbxHRFix").checked = Boolean(_enable_hr);
	document.getElementById("cbxEnableErasing").checked = Boolean(_enable_erase);
	document.getElementById("overMaskPx").value = Number(_overmask_px);
}