sneedgroup-holder/openOutpaint
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

not super attractive but really simple progress indicator during generation

Browse source 
(not so much on upscale yet)


Former-commit-id: 802cb7507d160035207b8c15b98b9d6fa9855525
This commit is contained in:
tim h 2022-11-22 19:35:15 -06:00
parent 9cf5ca236a
commit e619636d33
2 changed files with 41 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
README.md
View file

@ -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

41
js/index.js
View file

@ -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;