diff --git a/README.md b/README.md
index 90e1b15..5749183 100644
--- a/README.md
+++ b/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
diff --git a/js/index.js b/js/index.js
index d3b3674..8f6fed3 100644
--- a/js/index.js
+++ b/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 =
- ' of ';
+ ' of ';
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 = '';
+ 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;