aboutsummaryrefslogtreecommitdiff
path: root/javascript
diff options
context:
space:
mode:
Diffstat (limited to 'javascript')
-rw-r--r--javascript/dragdrop.js5
-rw-r--r--javascript/hints.js5
-rw-r--r--javascript/imageParams.js19
-rw-r--r--javascript/images_history.js206
-rw-r--r--javascript/progressbar.js35
-rw-r--r--javascript/ui.js10
6 files changed, 268 insertions, 12 deletions
diff --git a/javascript/dragdrop.js b/javascript/dragdrop.js
index 5aac57f7..fe0185a5 100644
--- a/javascript/dragdrop.js
+++ b/javascript/dragdrop.js
@@ -43,7 +43,7 @@ function dropReplaceImage( imgWrap, files ) {
window.document.addEventListener('dragover', e => {
const target = e.composedPath()[0];
const imgWrap = target.closest('[data-testid="image"]');
- if ( !imgWrap ) {
+ if ( !imgWrap && target.placeholder != "Prompt") {
return;
}
e.stopPropagation();
@@ -53,6 +53,9 @@ window.document.addEventListener('dragover', e => {
window.document.addEventListener('drop', e => {
const target = e.composedPath()[0];
+ if (target.placeholder === "Prompt") {
+ return;
+ }
const imgWrap = target.closest('[data-testid="image"]');
if ( !imgWrap ) {
return;
diff --git a/javascript/hints.js b/javascript/hints.js
index 94438c5c..8fec907d 100644
--- a/javascript/hints.js
+++ b/javascript/hints.js
@@ -85,7 +85,10 @@ titles = {
"Filename word regex": "This regular expression will be used extract words from filename, and they will be joined using the option below into label text used for training. Leave empty to keep filename text as it is.",
"Filename join string": "This string will be used to join split words into a single line if the option above is enabled.",
- "Quicksettings list": "List of setting names, separated by commas, for settings that should go to the quick access bar at the top, rather than the usual setting tab. See modules/shared.py for setting names. Requires restarting to apply."
+ "Quicksettings list": "List of setting names, separated by commas, for settings that should go to the quick access bar at the top, rather than the usual setting tab. See modules/shared.py for setting names. Requires restarting to apply.",
+
+ "Weighted sum": "Result = A * (1 - M) + B * M",
+ "Add difference": "Result = A + (B - C) * M",
}
diff --git a/javascript/imageParams.js b/javascript/imageParams.js
new file mode 100644
index 00000000..4a7b0900
--- /dev/null
+++ b/javascript/imageParams.js
@@ -0,0 +1,19 @@
+window.onload = (function(){
+ window.addEventListener('drop', e => {
+ const target = e.composedPath()[0];
+ const idx = selected_gallery_index();
+ if (target.placeholder != "Prompt") return;
+
+ let prompt_target = get_tab_index('tabs') == 1 ? "img2img_prompt_image" : "txt2img_prompt_image";
+
+ e.stopPropagation();
+ e.preventDefault();
+ const imgParent = gradioApp().getElementById(prompt_target);
+ const files = e.dataTransfer.files;
+ const fileInput = imgParent.querySelector('input[type="file"]');
+ if ( fileInput ) {
+ fileInput.files = files;
+ fileInput.dispatchEvent(new Event('change'));
+ }
+ });
+});
diff --git a/javascript/images_history.js b/javascript/images_history.js
new file mode 100644
index 00000000..f7d052c3
--- /dev/null
+++ b/javascript/images_history.js
@@ -0,0 +1,206 @@
+var images_history_click_image = function(){
+ if (!this.classList.contains("transform")){
+ var gallery = images_history_get_parent_by_class(this, "images_history_cantainor");
+ var buttons = gallery.querySelectorAll(".gallery-item");
+ var i = 0;
+ var hidden_list = [];
+ buttons.forEach(function(e){
+ if (e.style.display == "none"){
+ hidden_list.push(i);
+ }
+ i += 1;
+ })
+ if (hidden_list.length > 0){
+ setTimeout(images_history_hide_buttons, 10, hidden_list, gallery);
+ }
+ }
+ images_history_set_image_info(this);
+}
+
+var images_history_click_tab = function(){
+ var tabs_box = gradioApp().getElementById("images_history_tab");
+ if (!tabs_box.classList.contains(this.getAttribute("tabname"))) {
+ gradioApp().getElementById(this.getAttribute("tabname") + "_images_history_renew_page").click();
+ tabs_box.classList.add(this.getAttribute("tabname"))
+ }
+}
+
+function images_history_disabled_del(){
+ gradioApp().querySelectorAll(".images_history_del_button").forEach(function(btn){
+ btn.setAttribute('disabled','disabled');
+ });
+}
+
+function images_history_get_parent_by_class(item, class_name){
+ var parent = item.parentElement;
+ while(!parent.classList.contains(class_name)){
+ parent = parent.parentElement;
+ }
+ return parent;
+}
+
+function images_history_get_parent_by_tagname(item, tagname){
+ var parent = item.parentElement;
+ tagname = tagname.toUpperCase()
+ while(parent.tagName != tagname){
+ console.log(parent.tagName, tagname)
+ parent = parent.parentElement;
+ }
+ return parent;
+}
+
+function images_history_hide_buttons(hidden_list, gallery){
+ var buttons = gallery.querySelectorAll(".gallery-item");
+ var num = 0;
+ buttons.forEach(function(e){
+ if (e.style.display == "none"){
+ num += 1;
+ }
+ });
+ if (num == hidden_list.length){
+ setTimeout(images_history_hide_buttons, 10, hidden_list, gallery);
+ }
+ for( i in hidden_list){
+ buttons[hidden_list[i]].style.display = "none";
+ }
+}
+
+function images_history_set_image_info(button){
+ var buttons = images_history_get_parent_by_tagname(button, "DIV").querySelectorAll(".gallery-item");
+ var index = -1;
+ var i = 0;
+ buttons.forEach(function(e){
+ if(e == button){
+ index = i;
+ }
+ if(e.style.display != "none"){
+ i += 1;
+ }
+ });
+ var gallery = images_history_get_parent_by_class(button, "images_history_cantainor");
+ var set_btn = gallery.querySelector(".images_history_set_index");
+ var curr_idx = set_btn.getAttribute("img_index", index);
+ if (curr_idx != index) {
+ set_btn.setAttribute("img_index", index);
+ images_history_disabled_del();
+ }
+ set_btn.click();
+
+}
+
+function images_history_get_current_img(tabname, image_path, files){
+ return [
+ gradioApp().getElementById(tabname + '_images_history_set_index').getAttribute("img_index"),
+ image_path,
+ files
+ ];
+}
+
+function images_history_delete(del_num, tabname, img_path, img_file_name, page_index, filenames, image_index){
+ image_index = parseInt(image_index);
+ var tab = gradioApp().getElementById(tabname + '_images_history');
+ var set_btn = tab.querySelector(".images_history_set_index");
+ var buttons = [];
+ tab.querySelectorAll(".gallery-item").forEach(function(e){
+ if (e.style.display != 'none'){
+ buttons.push(e);
+ }
+ });
+ var img_num = buttons.length / 2;
+ if (img_num <= del_num){
+ setTimeout(function(tabname){
+ gradioApp().getElementById(tabname + '_images_history_renew_page').click();
+ }, 30, tabname);
+ } else {
+ var next_img
+ for (var i = 0; i < del_num; i++){
+ if (image_index + i < image_index + img_num){
+ buttons[image_index + i].style.display = 'none';
+ buttons[image_index + img_num + 1].style.display = 'none';
+ next_img = image_index + i + 1
+ }
+ }
+ var bnt;
+ if (next_img >= img_num){
+ btn = buttons[image_index - del_num];
+ } else {
+ btn = buttons[next_img];
+ }
+ setTimeout(function(btn){btn.click()}, 30, btn);
+ }
+ images_history_disabled_del();
+ return [del_num, tabname, img_path, img_file_name, page_index, filenames, image_index];
+}
+
+function images_history_turnpage(img_path, page_index, image_index, tabname){
+ var buttons = gradioApp().getElementById(tabname + '_images_history').querySelectorAll(".gallery-item");
+ buttons.forEach(function(elem) {
+ elem.style.display = 'block';
+ })
+ return [img_path, page_index, image_index, tabname];
+}
+
+function images_history_enable_del_buttons(){
+ gradioApp().querySelectorAll(".images_history_del_button").forEach(function(btn){
+ btn.removeAttribute('disabled');
+ })
+}
+
+function images_history_init(){
+ var load_txt2img_button = gradioApp().getElementById('txt2img_images_history_renew_page')
+ if (load_txt2img_button){
+ for (var i in images_history_tab_list ){
+ tab = images_history_tab_list[i];
+ gradioApp().getElementById(tab + '_images_history').classList.add("images_history_cantainor");
+ gradioApp().getElementById(tab + '_images_history_set_index').classList.add("images_history_set_index");
+ gradioApp().getElementById(tab + '_images_history_del_button').classList.add("images_history_del_button");
+ gradioApp().getElementById(tab + '_images_history_gallery').classList.add("images_history_gallery");
+
+ }
+ var tabs_box = gradioApp().getElementById("tab_images_history").querySelector("div").querySelector("div").querySelector("div");
+ tabs_box.setAttribute("id", "images_history_tab");
+ var tab_btns = tabs_box.querySelectorAll("button");
+ for (var i in images_history_tab_list){
+ var tabname = images_history_tab_list[i]
+ tab_btns[i].setAttribute("tabname", tabname);
+
+ // this refreshes history upon tab switch
+ // until the history is known to work well, which is not the case now, we do not do this at startup
+ //tab_btns[i].addEventListener('click', images_history_click_tab);
+ }
+ tabs_box.classList.add(images_history_tab_list[0]);
+
+ // same as above, at page load
+ //load_txt2img_button.click();
+ } else {
+ setTimeout(images_history_init, 500);
+ }
+}
+
+var images_history_tab_list = ["txt2img", "img2img", "extras"];
+setTimeout(images_history_init, 500);
+document.addEventListener("DOMContentLoaded", function() {
+ var mutationObserver = new MutationObserver(function(m){
+ for (var i in images_history_tab_list ){
+ let tabname = images_history_tab_list[i]
+ var buttons = gradioApp().querySelectorAll('#' + tabname + '_images_history .gallery-item');
+ buttons.forEach(function(bnt){
+ bnt.addEventListener('click', images_history_click_image, true);
+ });
+
+ // same as load_txt2img_button.click() above
+ /*
+ var cls_btn = gradioApp().getElementById(tabname + '_images_history_gallery').querySelector("svg");
+ if (cls_btn){
+ cls_btn.addEventListener('click', function(){
+ gradioApp().getElementById(tabname + '_images_history_renew_page').click();
+ }, false);
+ }*/
+
+ }
+ });
+ mutationObserver.observe( gradioApp(), { childList:true, subtree:true });
+
+});
+
+
diff --git a/javascript/progressbar.js b/javascript/progressbar.js
index 4395a215..076f0a97 100644
--- a/javascript/progressbar.js
+++ b/javascript/progressbar.js
@@ -1,5 +1,7 @@
// code related to showing and updating progressbar shown as the image is being made
global_progressbars = {}
+galleries = {}
+galleryObservers = {}
function check_progressbar(id_part, id_progressbar, id_progressbar_span, id_skip, id_interrupt, id_preview, id_gallery){
var progressbar = gradioApp().getElementById(id_progressbar)
@@ -31,13 +33,24 @@ function check_progressbar(id_part, id_progressbar, id_progressbar_span, id_skip
preview.style.width = gallery.clientWidth + "px"
preview.style.height = gallery.clientHeight + "px"
+ //only watch gallery if there is a generation process going on
+ check_gallery(id_gallery);
+
var progressDiv = gradioApp().querySelectorAll('#' + id_progressbar_span).length > 0;
if(!progressDiv){
if (skip) {
skip.style.display = "none"
}
interrupt.style.display = "none"
+
+ //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;
+ }
}
+
+
}
window.setTimeout(function() { requestMoreProgress(id_part, id_progressbar_span, id_skip, id_interrupt) }, 500)
@@ -46,6 +59,28 @@ function check_progressbar(id_part, id_progressbar, id_progressbar_span, id_skip
}
}
+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();
+ }
+ let prevSelectedIndex = selected_gallery_index();
+ galleryObservers[id_gallery] = new MutationObserver(function (){
+ let galleryButtons = gradioApp().querySelectorAll('#'+id_gallery+' .gallery-item')
+ let galleryBtnSelected = gradioApp().querySelector('#'+id_gallery+' .gallery-item.\\!ring-2')
+ if (prevSelectedIndex !== -1 && galleryButtons.length>prevSelectedIndex && !galleryBtnSelected) {
+ //automatically re-open previously selected index (if exists)
+ galleryButtons[prevSelectedIndex].click();
+ showGalleryImage();
+ }
+ })
+ galleryObservers[id_gallery].observe( gallery, { childList:true, subtree:false })
+ }
+}
+
onUiUpdate(function(){
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')
diff --git a/javascript/ui.js b/javascript/ui.js
index 0f8fe68e..56f4216f 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -187,12 +187,10 @@ onUiUpdate(function(){
if (!txt2img_textarea) {
txt2img_textarea = gradioApp().querySelector("#txt2img_prompt > label > textarea");
txt2img_textarea?.addEventListener("input", () => update_token_counter("txt2img_token_button"));
- txt2img_textarea?.addEventListener("keyup", (event) => submit_prompt(event, "txt2img_generate"));
}
if (!img2img_textarea) {
img2img_textarea = gradioApp().querySelector("#img2img_prompt > label > textarea");
img2img_textarea?.addEventListener("input", () => update_token_counter("img2img_token_button"));
- img2img_textarea?.addEventListener("keyup", (event) => submit_prompt(event, "img2img_generate"));
}
})
@@ -220,14 +218,6 @@ function update_token_counter(button_id) {
token_timeout = setTimeout(() => gradioApp().getElementById(button_id)?.click(), wait_time);
}
-function submit_prompt(event, generate_button_id) {
- if (event.altKey && event.keyCode === 13) {
- event.preventDefault();
- gradioApp().getElementById(generate_button_id).click();
- return;
- }
-}
-
function restart_reload(){
document.body.innerHTML='<h1 style="font-family:monospace;margin-top:20%;color:lightgray;text-align:center;">Reloading...</h1>';
setTimeout(function(){location.reload()},2000)
generated by cgit v1.2.1 (git 2.18.0) at 2024-09-21 14:47:09 +0000