From e05573e1adc1cde1e3bd7eb651a1ab27c446b3d5 Mon Sep 17 00:00:00 2001 From: yfszzx Date: Wed, 12 Oct 2022 20:47:55 +0800 Subject: [PATCH] images history improvement --- .gitignore | 1 + javascript/images_history.js | 224 +++++++++++++++++++++++------------ modules/images_history.py | 67 +++++++---- 3 files changed, 191 insertions(+), 101 deletions(-) diff --git a/.gitignore b/.gitignore index 7afc93953..434e23ce1 100644 --- a/.gitignore +++ b/.gitignore @@ -26,3 +26,4 @@ __pycache__ notification.mp3 /SwinIR /textual_inversion +/images_history_testui.py diff --git a/javascript/images_history.js b/javascript/images_history.js index d62eb1814..c9a631664 100644 --- a/javascript/images_history.js +++ b/javascript/images_history.js @@ -1,122 +1,192 @@ -images_history_tab_list = ["txt2img", "img2img", "extras"] -function images_history_init(){ - if (gradioApp().getElementById('txt2img_images_history_first_page') == null) { - setTimeout(images_history_init, 500) - } else { - for (i in images_history_tab_list ){ - tab = images_history_tab_list[i] - gradioApp().getElementById(tab + '_images_history').classList.add("images_history_gallery") - gradioApp().getElementById(tab + '_images_history_set_index').classList.add("images_history_set_index") - - } - gradioApp().getElementById("txt2img_images_history_first_page").click() - } -} -setTimeout(images_history_init, 500) -var images_history_button_actions = function(){ +var images_history_click_image = function(){ if (!this.classList.contains("transform")){ - gallery = this.parentElement - while(!gallery.classList.contains("images_history_gallery")){gallery = gallery.parentElement} - buttons = gallery.querySelectorAll(".gallery-item") - i = 0 - hidden_list = [] + 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) + hidden_list.push(i); } - i += 1 + i += 1; }) if (hidden_list.length > 0){ - setTimeout(images_history_hide_buttons, 10, hidden_list, gallery) - } - + setTimeout(images_history_hide_buttons, 10, hidden_list, gallery); + } } - images_history_set_image_info(this) - + images_history_set_image_info(this); } -onUiUpdate(function(){ - for (i in images_history_tab_list ){ - tab = images_history_tab_list[i] - buttons = gradioApp().querySelectorAll('#' + tab + '_images_history .gallery-item') - buttons.forEach(function(bnt){ - bnt.addEventListener('click', images_history_button_actions, true) - }); + +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")) + } +} + +var images_history_close_full_view = function(){ + var box = images_history_get_parent_by_class(this, "images_history_cantainor"); + box.querySelector(".images_history_del_button").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){ - buttons = gallery.querySelectorAll(".gallery-item") - num = 0 + var buttons = gallery.querySelectorAll(".gallery-item"); + var num = 0; buttons.forEach(function(e){ if (e.style.display == "none"){ - num += 1 + num += 1; } }) if (num == hidden_list.length){ - setTimeout(images_history_hide_buttons, 10, hidden_list, gallery) + setTimeout(images_history_hide_buttons, 10, hidden_list, gallery); } for( i in hidden_list){ - buttons[hidden_list[i]].style.display = "none" + buttons[hidden_list[i]].style.display = "none"; } } function images_history_set_image_info(button){ - item = button.parentElement - while(item.tagName != "DIV"){item = item.parentElement} - buttons = item.querySelectorAll(".gallery-item") - index = -1 - i = 0 + 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 == button){ + index = i; + } if(e.style.display != "none"){ - i += 1 + i += 1; } }) - gallery = button.parentElement - while(!gallery.classList.contains("images_history_gallery")){gallery = gallery.parentElement} - set_btn = gallery.querySelector(".images_history_set_index") - set_btn.setAttribute("img_index", index) - set_btn.click() + var gallery = images_history_get_parent_by_class(button, "images_history_cantainor"); + var set_btn = gallery.querySelector(".images_history_set_index"); + set_btn.setAttribute("img_index", index); + set_btn.click(); + gradioApp().querySelectorAll(".images_history_del_button").forEach(function(btn){ + btn.setAttribute('disabled','disabled'); + }) + } function images_history_get_current_img(tabname, image_path, files){ - s = gradioApp().getElementById(tabname + '_images_history_set_index').getAttribute("img_index") - return [s, image_path, files] + return [ + gradioApp().getElementById(tabname + '_images_history_set_index').getAttribute("img_index"), + image_path, + files + ]; } function images_history_delete(tabname, img_path, img_file_name, page_index, filenames, image_index){ - image_index = parseInt(image_index) - tab = gradioApp().getElementById(tabname + '_images_history') - set_btn = tab.querySelector(".images_history_set_index") - buttons = [] + 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) + buttons.push(e); } - }) + }); - img_num = buttons.length / 2 - if (img_num == 1){ - setTimeout(function(tabname){ - gradioApp().getElementById(tabname + '_images_history_renew_page').click() - }, 30, tabname) + var img_num = buttons.length / 2; + if (img_num === 1){ + setTimeout(function(tabname){ + gradioApp().getElementById(tabname + '_images_history_renew_page').click(); + }, 30, tabname); } else { - buttons[image_index].style.display = 'none' - buttons[image_index + img_num].style.display = 'none' - if (image_index >= img_num - 1){ - console.log(buttons.length, img_num) - btn = buttons[img_num - 2] + buttons[image_index].style.display = 'none'; + buttons[image_index + img_num].style.display = 'none'; + var bnt; + if (image_index >= img_num - 1){ + btn = buttons[img_num - 2]; } else { - btn = buttons[image_index + 1] + btn = buttons[image_index + 1] ; } - setTimeout(function(btn){btn.click()}, 30, btn) + setTimeout(function(btn){btn.click()}, 30, btn); } - return [tabname, img_path, img_file_name, page_index, filenames, image_index] + return [tabname, img_path, img_file_name, page_index, filenames, image_index]; } function images_history_turnpage(img_path, page_index, image_index, tabname){ - buttons = gradioApp().getElementById(tabname + '_images_history').querySelectorAll(".gallery-item") + var buttons = gradioApp().getElementById(tabname + '_images_history').querySelectorAll(".gallery-item"); buttons.forEach(function(elem) { - elem.style.display = 'block' + elem.style.display = 'block'; }) - return [img_path, page_index, image_index, tabname] + 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(){ + if (gradioApp().getElementById('txt2img_images_history_renew_page') == null) { + setTimeout(images_history_init, 500); + } else { + 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"); + tabs_box.classList.add(images_history_tab_list[0]); + gradioApp().getElementById("txt2img_images_history_renew_page").click(); + } +} + +var images_history_tab_list = ["txt2img", "img2img", "extras"]; +var images_history_start_flag = false; + +onUiUpdate(function(){ + var tab = gradioApp().getElementById("images_history_tab"); + if (tab) { + if (!images_history_start_flag){ + images_history_init(); + images_history_start_flag = true; + } + var tab_btns = gradioApp().getElementById("images_history_tab").querySelectorAll("button"); + for (var i in images_history_tab_list ){ + var buttons = gradioApp().querySelectorAll('#' + images_history_tab_list[i] + '_images_history .gallery-item'); + buttons.forEach(function(bnt){ + bnt.addEventListener('click', images_history_click_image, true); + }); + var tabname = images_history_tab_list[i] + tab_btns[i].setAttribute("tabname", tabname); + tab_btns[i].addEventListener('click', images_history_click_tab, true); + // var cls_btn = gradioApp().getElementById(tabname + '_images_history_gallery').querySelector("svg"); + // if (cls_btn){ + // cls_btn.addEventListener('click', images_history_close_full_view, false); + // } + // console.log(cls_btn, cls_btn.parentElement.parentElement) + // if (cls_btn) { + // cls_btn = images_history_get_parent_by_tagname(cls_btn, "BUTTON"); + // cls_btn.addEventListener('click', images_history_close_full_view, true); + // } + } + + } +}); + diff --git a/modules/images_history.py b/modules/images_history.py index 23f55b302..77f692fe5 100644 --- a/modules/images_history.py +++ b/modules/images_history.py @@ -1,15 +1,29 @@ import os -def get_recent_images(dir_name, page_index, step, image_index): - #print(image_index) +import shutil +def get_recent_images(dir_name, page_index, step, image_index, tabname): + print(f"renew page {page_index}") page_index = int(page_index) f_list = os.listdir(dir_name) file_list = [] for file in f_list: if file[-4:] == ".txt": continue - file_list.append(file) + #subdirectories + if file[-10:].rfind(".") < 0: + sub_dir = os.path.join(dir_name, file) + if os.path.isfile(sub_dir): + continue + sub_file_list = os.listdir(sub_dir) + for sub_file in sub_file_list: + if sub_file[-4:] == ".txt": + continue + if os.path.isfile(os.path.join(sub_dir, sub_file) ): + file_list.append(os.path.join(file, sub_file)) + continue + file_list.append(file) + file_list = sorted(file_list, key=lambda file: -os.path.getctime(os.path.join(dir_name, file))) - num = 48 + num = 48 if tabname != "extras" else 12 max_page_index = len(file_list) // num + 1 page_index = max_page_index if page_index == -1 else page_index + step page_index = 1 if page_index < 1 else page_index @@ -26,26 +40,28 @@ def get_recent_images(dir_name, page_index, step, image_index): hide_image = os.path.join(dir_name, current_file) return [os.path.join(dir_name, file) for file in file_list], page_index, file_list, current_file, hide_image def first_page_click(dir_name, page_index, image_index, tabname): - return get_recent_images(dir_name, 1, 0, image_index) + return get_recent_images(dir_name, 1, 0, image_index, tabname) def end_page_click(dir_name, page_index, image_index, tabname): - return get_recent_images(dir_name, -1, 0, image_index) + return get_recent_images(dir_name, -1, 0, image_index, tabname) def prev_page_click(dir_name, page_index, image_index, tabname): - return get_recent_images(dir_name, page_index, -1, image_index) + return get_recent_images(dir_name, page_index, -1, image_index, tabname) def next_page_click(dir_name, page_index, image_index, tabname): - return get_recent_images(dir_name, page_index, 1, image_index) + return get_recent_images(dir_name, page_index, 1, image_index, tabname) def page_index_change(dir_name, page_index, image_index, tabname): - return get_recent_images(dir_name, page_index, 0, image_index) + return get_recent_images(dir_name, page_index, 0, image_index, tabname) def show_image_info(num, image_path, filenames): - #print("set img",num) + print(f"select image {num}") file = filenames[int(num)] return file, num, os.path.join(image_path, file) def delete_image(tabname, dir_name, name, page_index, filenames, image_index): - #print("filename", name) path = os.path.join(dir_name, name) - if os.path.exists(path): + if os.path.exists(path): print(f"Delete file {path}") - os.remove(path) + os.remove(path) + txt_file = os.path.splitext(path)[0] + ".txt" + if os.path.exists(txt_file): + os.remove(txt_file) new_file_list = [] for f in filenames: if f == name: @@ -64,25 +80,26 @@ def show_images_history(gr, opts, tabname, run_pnginfo, switch_dict): elif tabname == "extras": dir_name = opts.outdir_extras_samples with gr.Row(): - renew_page = gr.Button('Renew', elem_id=tabname + "_images_history_renew_page") - first_page = gr.Button('First', elem_id=tabname + "_images_history_first_page") - prev_page = gr.Button('Prev') + renew_page = gr.Button('Renew Page', elem_id=tabname + "_images_history_renew_page") + first_page = gr.Button('First Page') + prev_page = gr.Button('Prev Page') page_index = gr.Number(value=1, label="Page Index") - next_page = gr.Button('Next', elem_id=tabname + "_images_history_next_page") - end_page = gr.Button('End') + next_page = gr.Button('Next Page') + end_page = gr.Button('End Page') with gr.Row(elem_id=tabname + "_images_history"): with gr.Row(): - with gr.Column(): - history_gallery = gr.Gallery(show_label=False).style(grid=6) + with gr.Column(scale=2): + history_gallery = gr.Gallery(show_label=False, elem_id=tabname + "_images_history_gallery").style(grid=6) + delete = gr.Button('Delete', elem_id=tabname + "_images_history_del_button") with gr.Column(): with gr.Row(): - delete = gr.Button('Delete') + #pnginfo = gr.Button('PNG info') pnginfo_send_to_txt2img = gr.Button('Send to txt2img') pnginfo_send_to_img2img = gr.Button('Send to img2img') with gr.Row(): with gr.Column(): - img_file_info = gr.Textbox(label="Generate Info") - img_file_name = gr.Textbox(label="File Name") + img_file_info = gr.Textbox(label="Generate Info", interactive=False) + img_file_name = gr.Textbox(label="File Name", interactive=False) with gr.Row(): # hiden items img_path = gr.Textbox(dir_name, visible=False) @@ -90,7 +107,7 @@ def show_images_history(gr, opts, tabname, run_pnginfo, switch_dict): image_index = gr.Textbox(value=-1, visible=False) set_index = gr.Button('set_index', elem_id=tabname + "_images_history_set_index", visible=False) filenames = gr.State() - hide_image = gr.Image(visible=False, type="pil") + hide_image = gr.Image(type="pil", visible=False) info1 = gr.Textbox(visible=False) info2 = gr.Textbox(visible=False) @@ -111,6 +128,8 @@ def show_images_history(gr, opts, tabname, run_pnginfo, switch_dict): set_index.click(show_image_info, _js="images_history_get_current_img", inputs=[tabname_box, img_path, filenames], outputs=[img_file_name, image_index, hide_image]) delete.click(delete_image,_js="images_history_delete", inputs=[tabname_box, img_path, img_file_name, page_index, filenames, image_index], outputs=[page_index, filenames]) hide_image.change(fn=run_pnginfo, inputs=[hide_image], outputs=[info1, img_file_info, info2]) + hide_image.change(fn=None, _js="images_history_enable_del_buttons", inputs=None, outputs=None) + #pnginfo.click(fn=run_pnginfo, inputs=[hide_image], outputs=[info1, img_file_info, info2]) switch_dict["fn"](pnginfo_send_to_txt2img, switch_dict["t2i"], img_file_info, 'switch_to_txt2img') switch_dict["fn"](pnginfo_send_to_img2img, switch_dict["i2i"], img_file_info, 'switch_to_img2img_img2img')