progressbar.js

// 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);
    }

}