2022-09-18 06:00:06 +00:00
|
|
|
// code related to showing and updating progressbar shown as the image is being made
|
2022-11-02 06:47:53 +00:00
|
|
|
|
2023-04-30 19:12:24 +00:00
|
|
|
function rememberGallerySelection() {
|
2022-09-23 17:46:02 +00:00
|
|
|
|
|
|
|
}
|
|
|
|
|
2023-04-30 19:12:24 +00:00
|
|
|
function getGallerySelectedIndex() {
|
2022-11-30 01:11:01 +00:00
|
|
|
|
2022-10-14 18:05:14 +00:00
|
|
|
}
|
|
|
|
|
2023-01-15 15:50:56 +00:00
|
|
|
function request(url, data, handler, errorHandler) {
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
|
|
xhr.open("POST", url, true);
|
|
|
|
xhr.setRequestHeader("Content-Type", "application/json");
|
|
|
|
xhr.onreadystatechange = function() {
|
|
|
|
if (xhr.readyState === 4) {
|
|
|
|
if (xhr.status === 200) {
|
2023-01-19 12:58:32 +00:00
|
|
|
try {
|
|
|
|
var js = JSON.parse(xhr.responseText);
|
|
|
|
handler(js);
|
|
|
|
} catch (error) {
|
|
|
|
console.error(error);
|
|
|
|
errorHandler();
|
|
|
|
}
|
2023-01-15 15:50:56 +00:00
|
|
|
} else {
|
|
|
|
errorHandler();
|
|
|
|
}
|
2022-10-05 03:56:30 +00:00
|
|
|
}
|
2023-01-15 15:50:56 +00:00
|
|
|
};
|
|
|
|
var js = JSON.stringify(data);
|
|
|
|
xhr.send(js);
|
|
|
|
}
|
|
|
|
|
|
|
|
function pad2(x) {
|
|
|
|
return x < 10 ? '0' + x : x;
|
|
|
|
}
|
|
|
|
|
|
|
|
function formatTime(secs) {
|
|
|
|
if (secs > 3600) {
|
|
|
|
return pad2(Math.floor(secs / 60 / 60)) + ":" + pad2(Math.floor(secs / 60) % 60) + ":" + pad2(Math.floor(secs) % 60);
|
|
|
|
} else if (secs > 60) {
|
|
|
|
return pad2(Math.floor(secs / 60)) + ":" + pad2(Math.floor(secs) % 60);
|
|
|
|
} else {
|
|
|
|
return Math.floor(secs) + "s";
|
2022-09-20 18:05:25 +00:00
|
|
|
}
|
2022-09-18 06:00:06 +00:00
|
|
|
}
|
2022-09-18 08:14:42 +00:00
|
|
|
|
2023-01-18 03:13:45 +00:00
|
|
|
function setTitle(progress) {
|
|
|
|
var title = 'Stable Diffusion';
|
|
|
|
|
|
|
|
if (opts.show_progress_in_title && progress) {
|
|
|
|
title = '[' + progress.trim() + '] ' + title;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (document.title != title) {
|
2023-05-18 06:59:10 +00:00
|
|
|
document.title = title;
|
2023-01-18 03:13:45 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2023-01-15 15:50:56 +00:00
|
|
|
function randomId() {
|
|
|
|
return "task(" + Math.random().toString(36).slice(2, 7) + Math.random().toString(36).slice(2, 7) + Math.random().toString(36).slice(2, 7) + ")";
|
|
|
|
}
|
|
|
|
|
|
|
|
// starts sending progress requests to "/internal/progress" uri, creating progressbar above progressbarContainer element and
|
|
|
|
// preview inside gallery element. Cleans up all created stuff when the task is over and calls atEnd.
|
|
|
|
// calls onProgress every time there is a progress update
|
2023-04-29 19:16:54 +00:00
|
|
|
function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgress, inactivityTimeout = 40) {
|
2023-01-15 15:50:56 +00:00
|
|
|
var dateStart = new Date();
|
|
|
|
var wasEverActive = false;
|
|
|
|
var parentProgressbar = progressbarContainer.parentNode;
|
2023-01-18 10:20:47 +00:00
|
|
|
var parentGallery = gallery ? gallery.parentNode : null;
|
2023-05-17 12:46:58 +00:00
|
|
|
|
2023-01-15 15:50:56 +00:00
|
|
|
var divProgress = document.createElement('div');
|
|
|
|
divProgress.className = 'progressDiv';
|
2023-02-25 17:56:03 +00:00
|
|
|
divProgress.style.display = opts.show_progressbar ? "block" : "none";
|
2023-01-15 15:50:56 +00:00
|
|
|
var divInner = document.createElement('div');
|
|
|
|
divInner.className = 'progress';
|
2023-05-17 12:46:58 +00:00
|
|
|
|
2023-01-15 15:50:56 +00:00
|
|
|
divProgress.appendChild(divInner);
|
|
|
|
parentProgressbar.insertBefore(divProgress, progressbarContainer);
|
2023-05-17 12:46:58 +00:00
|
|
|
|
2023-01-18 10:20:47 +00:00
|
|
|
if (parentGallery) {
|
|
|
|
var livePreview = document.createElement('div');
|
|
|
|
livePreview.className = 'livePreview';
|
|
|
|
parentGallery.insertBefore(livePreview, gallery);
|
|
|
|
}
|
2023-01-15 15:50:56 +00:00
|
|
|
|
|
|
|
var removeProgressBar = function() {
|
2023-01-18 03:13:45 +00:00
|
|
|
setTitle("");
|
2023-01-15 15:50:56 +00:00
|
|
|
parentProgressbar.removeChild(divProgress);
|
2023-01-18 10:20:47 +00:00
|
|
|
if (parentGallery) parentGallery.removeChild(livePreview);
|
2023-01-15 15:50:56 +00:00
|
|
|
atEnd();
|
|
|
|
};
|
|
|
|
|
|
|
|
var fun = function(id_task, id_live_preview) {
|
2023-01-19 13:56:45 +00:00
|
|
|
request("./internal/progress", {id_task: id_task, id_live_preview: id_live_preview}, function(res) {
|
2023-01-15 15:50:56 +00:00
|
|
|
if (res.completed) {
|
|
|
|
removeProgressBar();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
var rect = progressbarContainer.getBoundingClientRect();
|
|
|
|
|
|
|
|
if (rect.width) {
|
|
|
|
divProgress.style.width = rect.width + "px";
|
|
|
|
}
|
|
|
|
|
2023-04-30 19:08:52 +00:00
|
|
|
let progressText = "";
|
2023-01-15 15:50:56 +00:00
|
|
|
|
|
|
|
divInner.style.width = ((res.progress || 0) * 100.0) + '%';
|
2023-01-18 10:20:47 +00:00
|
|
|
divInner.style.background = res.progress ? "" : "transparent";
|
2023-01-15 15:50:56 +00:00
|
|
|
|
|
|
|
if (res.progress > 0) {
|
|
|
|
progressText = ((res.progress || 0) * 100.0).toFixed(0) + '%';
|
|
|
|
}
|
|
|
|
|
|
|
|
if (res.eta) {
|
|
|
|
progressText += " ETA: " + formatTime(res.eta);
|
|
|
|
}
|
|
|
|
|
2023-01-18 10:20:47 +00:00
|
|
|
|
2023-01-18 03:13:45 +00:00
|
|
|
setTitle(progressText);
|
2023-01-18 10:20:47 +00:00
|
|
|
|
|
|
|
if (res.textinfo && res.textinfo.indexOf("\n") == -1) {
|
|
|
|
progressText = res.textinfo + " " + progressText;
|
|
|
|
}
|
|
|
|
|
2023-01-15 15:50:56 +00:00
|
|
|
divInner.textContent = progressText;
|
|
|
|
|
|
|
|
var elapsedFromStart = (new Date() - dateStart) / 1000;
|
|
|
|
|
|
|
|
if (res.active) wasEverActive = true;
|
|
|
|
|
|
|
|
if (!res.active && wasEverActive) {
|
|
|
|
removeProgressBar();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2023-04-29 19:16:54 +00:00
|
|
|
if (elapsedFromStart > inactivityTimeout && !res.queued && !res.active) {
|
2023-01-15 15:50:56 +00:00
|
|
|
removeProgressBar();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2023-01-18 10:20:47 +00:00
|
|
|
if (res.live_preview && gallery) {
|
2023-05-18 06:59:10 +00:00
|
|
|
rect = gallery.getBoundingClientRect();
|
2023-01-15 17:20:29 +00:00
|
|
|
if (rect.width) {
|
|
|
|
livePreview.style.width = rect.width + "px";
|
|
|
|
livePreview.style.height = rect.height + "px";
|
|
|
|
}
|
|
|
|
|
2023-01-15 15:50:56 +00:00
|
|
|
var img = new Image();
|
|
|
|
img.onload = function() {
|
|
|
|
livePreview.appendChild(img);
|
|
|
|
if (livePreview.childElementCount > 2) {
|
|
|
|
livePreview.removeChild(livePreview.firstElementChild);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
img.src = res.live_preview;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (onProgress) {
|
|
|
|
onProgress(res);
|
|
|
|
}
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
fun(id_task, res.id_live_preview);
|
2023-01-15 17:27:39 +00:00
|
|
|
}, opts.live_preview_refresh_period || 500);
|
2023-01-15 15:50:56 +00:00
|
|
|
}, function() {
|
|
|
|
removeProgressBar();
|
|
|
|
});
|
|
|
|
};
|
2022-09-18 08:14:42 +00:00
|
|
|
|
2023-01-15 15:50:56 +00:00
|
|
|
fun(id_task, 0);
|
2022-09-18 08:14:42 +00:00
|
|
|
}
|