SDCommands / progressbar.js
navmesh's picture
Upload progressbar.js
25a2330
// code related to showing and updating progressbar shown as the image is being made
let lastTimeGenerate = 0; //epoch time in second
let timeWarning = 160;
let maxTimeWarning = 3600;
let firstTimeStart = 0;
let timeZone = 'Asia/Bangkok';
let lastGenerateTimeStamp = 0; // timestamp
let cacheLastGenerateTimeStamp = 0;
let cacheLastStringHourMin = null; //string
//const options = { timeZone };
const options = { timeZone, hour: '2-digit', minute: '2-digit' };
const formatter = new Intl.DateTimeFormat([], options);
function rememberGallerySelection() {
}
function getGallerySelectedIndex() {
}
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) {
try {
var js = JSON.parse(xhr.responseText);
handler(js);
} catch (error) {
console.error(error);
errorHandler();
}
} else {
errorHandler();
}
}
};
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";
}
}
function setTitle(progress, isGenerating = false) {
// var title = 'Unity';
var title = lastTimeGenerate;
if (opts.show_progress_in_title && progress) {
title = '[' + progress.trim() + '] ' + title;
}
else if (!isGenerating){
if (lastTimeGenerate > 0){
var curTime = getCurTimeInSeconds();
if (curTime - firstTimeStart > 14400){
title = 'exceed 4 hours ';
}
else{
var durationSinceLastGenerate = curTime - lastTimeGenerate;
if (durationSinceLastGenerate > maxTimeWarning){ // hoangpl no need update ui
title = 'exceed > ' + maxTimeWarning + 's';
}
else if (durationSinceLastGenerate > timeWarning){
title = 'warning ' + durationSinceLastGenerate + 's';
}
else{
//display last time generating
if (lastGenerateTimeStamp == cacheLastGenerateTimeStamp && cacheLastStringHourMin != null){
}
else{
cacheLastStringHourMin = getFormatDateTime(lastGenerateTimeStamp);
cacheLastGenerateTimeStamp = lastGenerateTimeStamp;
}
title = cacheLastStringHourMin;
}
}
}
}
if (document.title != title) {
document.title = title;
}
}
function getFormatDateTime(timeStamp){
var currentDate = new Date(timeStamp);
var hours = currentDate.getHours();
var minutes = currentDate.getMinutes();
var formattedHours = hours.toString().padStart(2, '0');
var formattedMinutes = minutes.toString().padStart(2, '0');
// Format the hours and minutes as a string
return `${formattedHours}:${formattedMinutes}`;
}
function getCurrentDateTimeGMTPlus7() {
// Use the global formatter to format the current date and time
return formatter.format(new Date());
}
function getCurTimeInSeconds(){
return Math.floor(Date.now() / 1000);
}
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, onProgress, inactivityTimeout = 40) {
var dateStart = new Date();
var wasEverActive = false;
var parentProgressbar = progressbarContainer.parentNode;
var divProgress = document.createElement('div');
divProgress.className = 'progressDiv';
divProgress.style.display = opts.show_progressbar ? "block" : "none";
var divInner = document.createElement('div');
divInner.className = 'progress';
divProgress.appendChild(divInner);
parentProgressbar.insertBefore(divProgress, progressbarContainer);
var livePreview = null;
var removeProgressBar = function() {
if (!divProgress) {
setTitle(""); // hoangpl continue update title
return;
}
setTitle("");
parentProgressbar.removeChild(divProgress);
if (gallery && livePreview) gallery.removeChild(livePreview);
atEnd();
divProgress = null;
};
var funProgress = function(id_task) {
request("./internal/progress", {id_task: id_task, live_preview: false}, function(res) {
if (res.completed) {
removeProgressBar();
return;
}
let isGenerating = false;
let progressText = "";
divInner.style.width = ((res.progress || 0) * 100.0) + '%';
divInner.style.background = res.progress ? "" : "transparent";
if (res.progress > 0) {
isGenerating = true;
progressText = ((res.progress || 0) * 100.0).toFixed(0) + '%';
}
if (res.eta) {
isGenerating = true;
progressText += " ETA: " + formatTime(res.eta);
}
if (isGenerating){
lastTimeGenerate = getCurTimeInSeconds(); // hoangpl
lastGenerateTimeStamp = Date.now();
if (firstTimeStart <= 0){
firstTimeStart = lastTimeGenerate;
}
}
setTitle(progressText, isGenerating);
if (res.textinfo && res.textinfo.indexOf("\n") == -1) {
progressText = res.textinfo + " " + progressText;
}
divInner.textContent = progressText;
var elapsedFromStart = (new Date() - dateStart) / 1000;
if (res.active) wasEverActive = true;
if (!res.active && wasEverActive) {
removeProgressBar();
return;
}
if (elapsedFromStart > inactivityTimeout && !res.queued && !res.active) {
removeProgressBar();
return;
}
if (onProgress) {
onProgress(res);
}
setTimeout(() => {
funProgress(id_task, res.id_live_preview);
}, opts.live_preview_refresh_period || 500);
}, function() {
removeProgressBar();
});
};
var funLivePreview = function(id_task, id_live_preview) {
request("./internal/progress", {id_task: id_task, id_live_preview: id_live_preview}, function(res) {
if (!divProgress) {
return;
}
if (res.live_preview && gallery) {
var img = new Image();
img.onload = function() {
if (!livePreview) {
livePreview = document.createElement('div');
livePreview.className = 'livePreview';
gallery.insertBefore(livePreview, gallery.firstElementChild);
}
livePreview.appendChild(img);
if (livePreview.childElementCount > 2) {
livePreview.removeChild(livePreview.firstElementChild);
}
};
img.src = res.live_preview;
}
setTimeout(() => {
funLivePreview(id_task, res.id_live_preview);
}, opts.live_preview_refresh_period || 500);
}, function() {
removeProgressBar();
});
};
funProgress(id_task, 0);
if (gallery) {
funLivePreview(id_task, 0);
}
}