mirror of
https://github.com/vladmandic/automatic
synced 2026-09-17 16:24:33 +02:00
redo progressbar
This commit is contained in:
Vladimir Mandic
+49
-65
@@ -1,4 +1,6 @@
|
||||
/* global opts */
|
||||
let lastState = {};
|
||||
|
||||
function rememberGallerySelection(id_gallery) {}
|
||||
|
||||
function getGallerySelectedIndex(id_gallery) {}
|
||||
@@ -36,98 +38,80 @@ function formatTime(secs) {
|
||||
return `${Math.floor(secs)}s`;
|
||||
}
|
||||
|
||||
function setTitle(progress) {
|
||||
let title = 'SD.Next';
|
||||
if (progress) title += ` ${progress.split(' ')[0].trim()}`;
|
||||
if (document.title != title) document.title = title;
|
||||
function checkPaused(state) {
|
||||
lastState.paused = state ? !state : !lastState.paused;
|
||||
document.getElementById('txt2img_pause').innerText = lastState.paused ? 'Resume' : 'Pause'
|
||||
document.getElementById('img2img_pause').innerText = lastState.paused ? 'Resume' : 'Pause'
|
||||
}
|
||||
|
||||
function setProgress(res) {
|
||||
elements = ['txt2img_generate', 'img2img_generate', 'extras_generate']
|
||||
perc = res ? `${Math.round((res?.progress || 0) * 100.0)}%` : ''
|
||||
eta = res?.paused ? ' Paused' : ` ETA: ${Math.round(res?.eta || 0)}s`;
|
||||
document.title = 'SD.Next ' + perc;
|
||||
for (elId of elements) {
|
||||
el = document.getElementById(elId);
|
||||
el.innerText = res
|
||||
? perc + eta
|
||||
: 'Generate';
|
||||
el.style.background = res
|
||||
? `linear-gradient(to right, var(--primary-500) 0%, var(--primary-800) ${perc}, var(--neutral-700) ${perc})`
|
||||
: 'var(--button-primary-background-fill)'
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
function requestProgress(id_task, progressbarContainer, gallery, atEnd = null, onProgress = null, once = false) {
|
||||
// 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
|
||||
function requestProgress(id_task, gallery, atEnd = null, onProgress = null, once = false) {
|
||||
localStorage.setItem('task', id_task);
|
||||
let hasStarted = false;
|
||||
const dateStart = new Date();
|
||||
const prevProgress = null;
|
||||
const parentProgressbar = progressbarContainer.parentNode;
|
||||
const parentGallery = gallery ? gallery.parentNode : null;
|
||||
const divProgress = document.createElement('div');
|
||||
divProgress.className = 'progressDiv';
|
||||
divProgress.id = 'progressbar';
|
||||
divProgress.style.display = opts.show_progressbar ? 'block' : 'none';
|
||||
const divInner = document.createElement('div');
|
||||
divInner.className = 'progress';
|
||||
divProgress.appendChild(divInner);
|
||||
parentProgressbar.insertBefore(divProgress, progressbarContainer);
|
||||
localStorage.setItem('task', id_task);
|
||||
let livePreview;
|
||||
const img = new Image();
|
||||
if (parentGallery) {
|
||||
livePreview = document.createElement('div');
|
||||
livePreview.className = 'livePreview';
|
||||
parentGallery.insertBefore(livePreview, gallery);
|
||||
const rect = gallery.getBoundingClientRect();
|
||||
if (rect.width) {
|
||||
livePreview.style.width = `${rect.width}px`;
|
||||
livePreview.style.height = `${rect.height}px`;
|
||||
}
|
||||
img.onload = function () {
|
||||
livePreview.appendChild(img);
|
||||
if (livePreview.childElementCount > 2) livePreview.removeChild(livePreview.firstElementChild);
|
||||
};
|
||||
}
|
||||
|
||||
const removeProgressBar = function () {
|
||||
const done = function () {
|
||||
console.debug('task end: ', id_task);
|
||||
localStorage.removeItem('task');
|
||||
setTitle('');
|
||||
if (divProgress) parentProgressbar.removeChild(divProgress);
|
||||
if (parentGallery) parentGallery.removeChild(livePreview);
|
||||
setProgress();
|
||||
if (parentGallery && livePreview) parentGallery.removeChild(livePreview);
|
||||
checkPaused(true);
|
||||
if (atEnd) atEnd();
|
||||
};
|
||||
|
||||
const fun = function (id_task, id_live_preview) {
|
||||
const start = function (id_task, id_live_preview) {
|
||||
request('./internal/progress', { id_task, id_live_preview }, (res) => {
|
||||
lastState = res;
|
||||
const elapsedFromStart = (new Date() - dateStart) / 1000;
|
||||
if (res.completed) {
|
||||
removeProgressBar();
|
||||
return;
|
||||
}
|
||||
var rect = progressbarContainer.getBoundingClientRect();
|
||||
if (rect.width) divProgress.style.width = `${rect.width}px`;
|
||||
progressText = '';
|
||||
divInner.style.width = `${(res.progress || 0) * 100.0}%`;
|
||||
divInner.style.background = res.progress ? '' : 'transparent';
|
||||
if (res.progress > 0) progressText = `${((res.progress || 0) * 100.0).toFixed(0)}%`;
|
||||
if (res.eta) progressText += ` ETA: ${formatTime(res.eta)}`;
|
||||
setTitle(progressText);
|
||||
if (res.textinfo && res.textinfo.indexOf('\n') == -1) progressText = `${res.textinfo} ${progressText}`;
|
||||
divInner.textContent = progressText;
|
||||
hasStarted |= res.active;
|
||||
if (!res.active && (hasStarted || once)) {
|
||||
removeProgressBar();
|
||||
if (res.completed || (!res.active && (hasStarted || once)) || (elapsedFromStart > 30 && !res.queued && res.progress == prevProgress)) {
|
||||
done();
|
||||
return;
|
||||
}
|
||||
if (res.completed) {
|
||||
removeProgressBar();
|
||||
return;
|
||||
}
|
||||
if (elapsedFromStart > 30 && !res.queued && res.progress == prevProgress) {
|
||||
removeProgressBar();
|
||||
return;
|
||||
}
|
||||
if (res.live_preview && gallery) {
|
||||
var rect = gallery.getBoundingClientRect();
|
||||
if (rect.width) {
|
||||
livePreview.style.width = `${rect.width}px`;
|
||||
livePreview.style.height = `${rect.height}px`;
|
||||
}
|
||||
const img = new Image();
|
||||
img.onload = function () {
|
||||
livePreview.appendChild(img);
|
||||
if (livePreview.childElementCount > 2) livePreview.removeChild(livePreview.firstElementChild);
|
||||
};
|
||||
img.src = res.live_preview;
|
||||
}
|
||||
setProgress(res);
|
||||
if (res.live_preview && gallery) img.src = res.live_preview;
|
||||
if (onProgress) onProgress(res);
|
||||
setTimeout(() => fun(id_task, res.id_live_preview), opts.live_preview_refresh_period || 250);
|
||||
}, () => {
|
||||
removeProgressBar();
|
||||
});
|
||||
setTimeout(() => start(id_task, res.id_live_preview), opts.live_preview_refresh_period || 250);
|
||||
}, done);
|
||||
};
|
||||
fun(id_task, 0);
|
||||
start(id_task, 0);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user