mirror of
https://github.com/openvinotoolkit/stable-diffusion-webui.git
synced 2024-12-16 17:04:42 +03:00
8ae8aeca75
for some extreme network conditions 20 seconds may not be enough
179 lines
5.3 KiB
JavaScript
179 lines
5.3 KiB
JavaScript
// code related to showing and updating progressbar shown as the image is being made
|
|
|
|
function rememberGallerySelection(id_gallery){
|
|
|
|
}
|
|
|
|
function getGallerySelectedIndex(id_gallery){
|
|
|
|
}
|
|
|
|
function request(url, data, handler, errorHandler){
|
|
var xhr = new XMLHttpRequest();
|
|
var url = url;
|
|
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){
|
|
var title = 'Stable Diffusion'
|
|
|
|
if(opts.show_progress_in_title && progress){
|
|
title = '[' + progress.trim() + '] ' + title;
|
|
}
|
|
|
|
if(document.title != title){
|
|
document.title = title;
|
|
}
|
|
}
|
|
|
|
|
|
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){
|
|
var dateStart = new Date()
|
|
var wasEverActive = false
|
|
var parentProgressbar = progressbarContainer.parentNode
|
|
var parentGallery = gallery ? gallery.parentNode : null
|
|
|
|
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)
|
|
|
|
if(parentGallery){
|
|
var livePreview = document.createElement('div')
|
|
livePreview.className='livePreview'
|
|
parentGallery.insertBefore(livePreview, gallery)
|
|
}
|
|
|
|
var removeProgressBar = function(){
|
|
setTitle("")
|
|
parentProgressbar.removeChild(divProgress)
|
|
if(parentGallery) parentGallery.removeChild(livePreview)
|
|
atEnd()
|
|
}
|
|
|
|
var fun = function(id_task, id_live_preview){
|
|
request("./internal/progress", {"id_task": id_task, "id_live_preview": id_live_preview}, function(res){
|
|
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
|
|
|
|
var elapsedFromStart = (new Date() - dateStart) / 1000
|
|
|
|
if(res.active) wasEverActive = true;
|
|
|
|
if(! res.active && wasEverActive){
|
|
removeProgressBar()
|
|
return
|
|
}
|
|
|
|
if(elapsedFromStart > 40 && !res.queued && !res.active){
|
|
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"
|
|
}
|
|
|
|
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);
|
|
}, opts.live_preview_refresh_period || 500)
|
|
}, function(){
|
|
removeProgressBar()
|
|
})
|
|
}
|
|
|
|
fun(id_task, 0)
|
|
}
|