not super attractive but really simple progress indicator during generation

(not so much on upscale yet)


Former-commit-id: 802cb7507d160035207b8c15b98b9d6fa9855525

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

@@ -126,6 +126,7 @@ var placingArbitraryImage = false; // for when the user has loaded an existing i
 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 inProgress = false;
 var marchCoords = {};
 
 // info div, sometimes hidden
@@ -209,6 +210,7 @@ function dream(x, y, prompt) {
 		//console.log(data); // JSON data parsed by `data.json()` call
 		imageAcceptReject(x, y, data);
 	});
+	checkProgress();
 }
 
 async function postData(promptData) {
@@ -231,6 +233,8 @@ async function postData(promptData) {
 }
 
 function imageAcceptReject(x, y, data) {
+	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?
@@ -242,7 +246,7 @@ function imageAcceptReject(x, y, data) {
 		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;
@@ -404,6 +408,39 @@ function drawMarchingAnts() {
 	tgtCtx.strokeRect(marchCoords.x, marchCoords.y, marchCoords.w, marchCoords.h);
 }
 
+function checkProgress() {
+	document.getElementById("progressDiv") &&
+		document.getElementById("progressDiv").remove();
+	endpoint = "progress?skip_current_image=false";
+	var div = document.createElement("div");
+	div.id = "progressDiv";
+	div.style.position = "absolute";
+	div.style.width = "200px";
+	div.style.height = "70px";
+	div.style.left = parseInt(marchCoords.x + marchCoords.w - 100) + "px";
+	div.style.top = parseInt(marchCoords.y + marchCoords.h) + "px";
+	div.innerHTML = '<span class="strokeText" id="estRemaining"></span>';
+	document.getElementById("tempDiv").appendChild(div);
+	updateProgress();
+}
+
+function updateProgress() {
+	if (inProgress) {
+		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;
+			});
+		setTimeout(updateProgress, 500);
+	}
+}
+
 function mouseMove(evt) {
 	const rect = ovCanvas.getBoundingClientRect(); // not-quite pixel offset was driving me insane
 	const canvasOffsetX = rect.left;
@@ -569,7 +606,7 @@ function mouseUp(evt) {
 			if (!blockNewImages) {
 				//TODO seriously, refactor this
 				blockNewImages = true;
-				marching = true;
+				marching = inProgress = 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;