Merge branch 'main' into toolbar

Now skipping images, saving bandwidth

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

Former-commit-id: 214f44c7ce6a1d9bf7598d45b6cef10e88e99cae

README.md

@@ -97,7 +97,8 @@ you'll obviously need A1111's webUI installed before you can use this, thus you'
 - [x] image erase region in case you decide later that you're not too happy with earlier results (technically i guess you could just mask over the entire region you dislike but that's... bad)
 - [ ] controls for the rest of API-available options (e.g. ~~hires fix~~, inpaint fill modes, etc)
 - [x] ~~save user-set option values to browser localstorage to persist your preferred, uh, preferences~~
-- [ ] render progress spinner/bar
+- [x] render progress spinner/bar
+- [ ] make render progress bar prettier
 - [x] ~~smart crop downloaded image~~
 - [x] import external image and ~~scale/~~ superimpose at will on canvas for in/outpainting
 - [ ] scaling of imported arbitrary image before superimposition

js/index.js

@@ -123,6 +123,7 @@ 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 marchOffset = 0;
 var stopMarching = null;
+var inProgress = false;
 var marchCoords = {};
 
 // info div, sometimes hidden
@@ -193,7 +194,11 @@ function dream(
 	x,
 	y,
 	prompt,
-	extra = {method: endpoint, stopMarching: () => {}}
+	extra = {
+		method: endpoint,
+		stopMarching: () => {},
+		bb: {x, y, w: prompt.width, h: prompt.height},
+	}
 ) {
 	tmpImgXYWH.x = x;
 	tmpImgXYWH.y = y;
@@ -207,13 +212,16 @@ function dream(
 			":\r\n" +
 			JSON.stringify(prompt)
 	);
-	postData(prompt, extra).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, extra);
-	});
+	const progressCheck = checkProgress(extra.bb);
+	postData(prompt, extra)
+		.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, extra);
+		})
+		.finally(() => clearInterval(progressCheck));
 }
 
 async function postData(promptData, extra = null) {
@@ -239,6 +247,8 @@ async function postData(promptData, extra = null) {
 }
 
 function imageAcceptReject(x, y, data, extra = null) {
+	inProgress = false;
+	document.getElementById("progressDiv").remove();
 	const img = new Image();
 	img.onload = function () {
 		tempCtx.drawImage(img, x, y); //imgCtx for actual image, tmp for... holding?
@@ -250,7 +260,7 @@ function imageAcceptReject(x, y, data, extra = null) {
 		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>';
+			'<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><span class="strokeText" id="estRemaining"></span>';
 		document.getElementById("tempDiv").appendChild(div);
 		document.getElementById("currentImgIndex").innerText = "1";
 		document.getElementById("totalImgIndex").innerText = totalImagesReturned;
@@ -398,6 +408,35 @@ function drawMarchingAnts(bb, offset) {
 	tgtCtx.strokeRect(bb.x, bb.y, bb.w, bb.h);
 }
 
+function checkProgress(bb) {
+	document.getElementById("progressDiv") &&
+		document.getElementById("progressDiv").remove();
+	// Skip image to stop using a ton of networking resources
+	endpoint = "progress?skip_current_image=true";
+	var div = document.createElement("div");
+	div.id = "progressDiv";
+	div.style.position = "absolute";
+	div.style.width = "200px";
+	div.style.height = "70px";
+	div.style.left = parseInt(bb.x + bb.w - 100) + "px";
+	div.style.top = parseInt(bb.y + bb.h) + "px";
+	div.innerHTML = '<span class="strokeText" id="estRemaining"></span>';
+	document.getElementById("tempDiv").appendChild(div);
+	return setInterval(() => {
+		fetch(host + url + endpoint)
+			.then((response) => response.json())
+			.then((data) => {
+				var estimate =
+					Math.round(data.progress * 100) +
+					"% :: " +
+					Math.floor(data.eta_relative) +
+					" sec.";
+
+				document.getElementById("estRemaining").innerText = estimate;
+			});
+	}, 500);
+}
+
 function mouseMove(evt) {
 	const rect = ovCanvas.getBoundingClientRect(); // not-quite pixel offset was driving me insane
 	const canvasOffsetX = rect.left;

js/ui/tool/dream.js

@@ -32,7 +32,7 @@ const dream_generate_callback = (evn, state) => {
 		// Use txt2img if canvas is blank
 		if (isCanvasBlank(bb.x, bb.y, bb.w, bb.h, imgCanvas)) {
 			// Dream
-			dream(bb.x, bb.y, request, {method: "txt2img"});
+			dream(bb.x, bb.y, request, {method: "txt2img", stopMarching, bb});
 		} else {
 			// Use img2img if not
 
@@ -71,7 +71,7 @@ const dream_generate_callback = (evn, state) => {
 			request.mask = auxCanvas.toDataURL();
 
 			// Dream
-			dream(bb.x, bb.y, request, {method: "img2img"});
+			dream(bb.x, bb.y, request, {method: "img2img", stopMarching, bb});
 		}
 	}
 };