2022-09-18 00:00:06 -06:00
|
|
|
// code related to showing and updating progressbar shown as the image is being made
|
2022-09-23 11:46:02 -06:00
|
|
|
global_progressbars = {}
|
2022-10-14 12:05:14 -06:00
|
|
|
galleries = {}
|
|
|
|
galleryObservers = {}
|
2022-09-05 17:09:01 -06:00
|
|
|
|
2022-11-02 00:47:53 -06:00
|
|
|
// this tracks laumnches of window.setTimeout for progressbar to prevent starting a new timeout when the previous is still running
|
|
|
|
timeoutIds = {}
|
|
|
|
|
2022-10-04 21:56:30 -06:00
|
|
|
function check_progressbar(id_part, id_progressbar, id_progressbar_span, id_skip, id_interrupt, id_preview, id_gallery){
|
2022-11-02 00:47:53 -06:00
|
|
|
// gradio 3.8's enlightened approach allows them to create two nested div elements inside each other with same id
|
|
|
|
// every time you use gr.HTML(elem_id='xxx'), so we handle this here
|
|
|
|
var progressbar = gradioApp().querySelector("#"+id_progressbar+" #"+id_progressbar)
|
|
|
|
var progressbarParent
|
|
|
|
if(progressbar){
|
|
|
|
progressbarParent = gradioApp().querySelector("#"+id_progressbar)
|
|
|
|
} else{
|
|
|
|
progressbar = gradioApp().getElementById(id_progressbar)
|
|
|
|
progressbarParent = null
|
|
|
|
}
|
|
|
|
|
2022-10-04 21:56:30 -06:00
|
|
|
var skip = id_skip ? gradioApp().getElementById(id_skip) : null
|
2022-09-23 11:46:02 -06:00
|
|
|
var interrupt = gradioApp().getElementById(id_interrupt)
|
2022-10-04 21:44:22 -06:00
|
|
|
|
2022-10-05 18:10:38 -06:00
|
|
|
if(opts.show_progress_in_title && progressbar && progressbar.offsetParent){
|
2022-10-04 21:44:22 -06:00
|
|
|
if(progressbar.innerText){
|
|
|
|
let newtitle = 'Stable Diffusion - ' + progressbar.innerText
|
|
|
|
if(document.title != newtitle){
|
|
|
|
document.title = newtitle;
|
|
|
|
}
|
|
|
|
}else{
|
|
|
|
let newtitle = 'Stable Diffusion'
|
|
|
|
if(document.title != newtitle){
|
|
|
|
document.title = newtitle;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-09-23 11:46:02 -06:00
|
|
|
if(progressbar!= null && progressbar != global_progressbars[id_progressbar]){
|
|
|
|
global_progressbars[id_progressbar] = progressbar
|
2022-09-05 17:09:01 -06:00
|
|
|
|
|
|
|
var mutationObserver = new MutationObserver(function(m){
|
2022-11-02 00:47:53 -06:00
|
|
|
if(timeoutIds[id_part]) return;
|
|
|
|
|
2022-09-23 11:46:02 -06:00
|
|
|
preview = gradioApp().getElementById(id_preview)
|
|
|
|
gallery = gradioApp().getElementById(id_gallery)
|
2022-09-06 10:33:51 -06:00
|
|
|
|
2022-09-23 11:46:02 -06:00
|
|
|
if(preview != null && gallery != null){
|
|
|
|
preview.style.width = gallery.clientWidth + "px"
|
|
|
|
preview.style.height = gallery.clientHeight + "px"
|
2022-11-02 00:47:53 -06:00
|
|
|
if(progressbarParent) progressbar.style.width = progressbarParent.clientWidth + "px"
|
2022-09-23 11:46:02 -06:00
|
|
|
|
2022-10-14 12:05:14 -06:00
|
|
|
//only watch gallery if there is a generation process going on
|
2022-10-16 08:22:56 -06:00
|
|
|
check_gallery(id_gallery);
|
2022-10-14 12:05:14 -06:00
|
|
|
|
2022-09-23 11:46:02 -06:00
|
|
|
var progressDiv = gradioApp().querySelectorAll('#' + id_progressbar_span).length > 0;
|
2022-11-02 00:47:53 -06:00
|
|
|
if(progressDiv){
|
|
|
|
timeoutIds[id_part] = window.setTimeout(function() {
|
|
|
|
timeoutIds[id_part] = null
|
|
|
|
requestMoreProgress(id_part, id_progressbar_span, id_skip, id_interrupt)
|
|
|
|
}, 500)
|
|
|
|
} else{
|
2022-10-04 21:56:30 -06:00
|
|
|
if (skip) {
|
|
|
|
skip.style.display = "none"
|
|
|
|
}
|
2022-09-21 19:11:53 -06:00
|
|
|
interrupt.style.display = "none"
|
2022-10-14 12:10:26 -06:00
|
|
|
|
|
|
|
//disconnect observer once generation finished, so user can close selected image if they want
|
|
|
|
if (galleryObservers[id_gallery]) {
|
|
|
|
galleryObservers[id_gallery].disconnect();
|
|
|
|
galleries[id_gallery] = null;
|
2022-11-02 00:47:53 -06:00
|
|
|
}
|
2022-09-20 12:05:25 -06:00
|
|
|
}
|
2022-09-06 10:33:51 -06:00
|
|
|
}
|
2022-09-17 23:51:11 -06:00
|
|
|
|
2022-09-05 17:09:01 -06:00
|
|
|
});
|
|
|
|
mutationObserver.observe( progressbar, { childList:true, subtree:true })
|
|
|
|
}
|
2022-09-23 11:46:02 -06:00
|
|
|
}
|
|
|
|
|
2022-10-14 12:05:14 -06:00
|
|
|
function check_gallery(id_gallery){
|
|
|
|
let gallery = gradioApp().getElementById(id_gallery)
|
|
|
|
// if gallery has no change, no need to setting up observer again.
|
|
|
|
if (gallery && galleries[id_gallery] !== gallery){
|
|
|
|
galleries[id_gallery] = gallery;
|
|
|
|
if(galleryObservers[id_gallery]){
|
|
|
|
galleryObservers[id_gallery].disconnect();
|
|
|
|
}
|
2022-10-14 18:14:59 -06:00
|
|
|
let prevSelectedIndex = selected_gallery_index();
|
2022-10-14 12:05:14 -06:00
|
|
|
galleryObservers[id_gallery] = new MutationObserver(function (){
|
|
|
|
let galleryButtons = gradioApp().querySelectorAll('#'+id_gallery+' .gallery-item')
|
|
|
|
let galleryBtnSelected = gradioApp().querySelector('#'+id_gallery+' .gallery-item.\\!ring-2')
|
2022-10-14 18:14:59 -06:00
|
|
|
if (prevSelectedIndex !== -1 && galleryButtons.length>prevSelectedIndex && !galleryBtnSelected) {
|
2022-10-17 07:57:19 -06:00
|
|
|
// automatically re-open previously selected index (if exists)
|
|
|
|
activeElement = gradioApp().activeElement;
|
|
|
|
|
2022-10-14 18:14:59 -06:00
|
|
|
galleryButtons[prevSelectedIndex].click();
|
2022-10-16 08:22:56 -06:00
|
|
|
showGalleryImage();
|
2022-10-17 07:57:19 -06:00
|
|
|
|
|
|
|
if(activeElement){
|
|
|
|
// i fought this for about an hour; i don't know why the focus is lost or why this helps recover it
|
|
|
|
// if somenoe has a better solution please by all means
|
|
|
|
setTimeout(function() { activeElement.focus() }, 1);
|
|
|
|
}
|
2022-10-14 12:05:14 -06:00
|
|
|
}
|
|
|
|
})
|
|
|
|
galleryObservers[id_gallery].observe( gallery, { childList:true, subtree:false })
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-09-23 11:46:02 -06:00
|
|
|
onUiUpdate(function(){
|
2022-10-04 21:56:30 -06:00
|
|
|
check_progressbar('txt2img', 'txt2img_progressbar', 'txt2img_progress_span', 'txt2img_skip', 'txt2img_interrupt', 'txt2img_preview', 'txt2img_gallery')
|
|
|
|
check_progressbar('img2img', 'img2img_progressbar', 'img2img_progress_span', 'img2img_skip', 'img2img_interrupt', 'img2img_preview', 'img2img_gallery')
|
|
|
|
check_progressbar('ti', 'ti_progressbar', 'ti_progress_span', '', 'ti_interrupt', 'ti_preview', 'ti_gallery')
|
2022-09-17 23:51:11 -06:00
|
|
|
})
|
2022-09-23 11:46:02 -06:00
|
|
|
|
2022-10-04 21:56:30 -06:00
|
|
|
function requestMoreProgress(id_part, id_progressbar_span, id_skip, id_interrupt){
|
2022-09-23 11:46:02 -06:00
|
|
|
btn = gradioApp().getElementById(id_part+"_check_progress");
|
2022-09-18 00:00:06 -06:00
|
|
|
if(btn==null) return;
|
|
|
|
|
|
|
|
btn.click();
|
2022-09-23 11:46:02 -06:00
|
|
|
var progressDiv = gradioApp().querySelectorAll('#' + id_progressbar_span).length > 0;
|
2022-10-04 21:56:30 -06:00
|
|
|
var skip = id_skip ? gradioApp().getElementById(id_skip) : null
|
2022-09-23 11:46:02 -06:00
|
|
|
var interrupt = gradioApp().getElementById(id_interrupt)
|
|
|
|
if(progressDiv && interrupt){
|
2022-10-04 21:56:30 -06:00
|
|
|
if (skip) {
|
|
|
|
skip.style.display = "block"
|
|
|
|
}
|
2022-09-21 19:11:53 -06:00
|
|
|
interrupt.style.display = "block"
|
2022-09-20 12:05:25 -06:00
|
|
|
}
|
2022-09-18 00:00:06 -06:00
|
|
|
}
|
2022-09-18 02:14:42 -06:00
|
|
|
|
2022-09-23 11:46:02 -06:00
|
|
|
function requestProgress(id_part){
|
|
|
|
btn = gradioApp().getElementById(id_part+"_check_progress_initial");
|
2022-09-18 02:14:42 -06:00
|
|
|
if(btn==null) return;
|
|
|
|
|
|
|
|
btn.click();
|
|
|
|
}
|