Image browser improved

javascript/images_history.js

@@ -17,14 +17,6 @@ var images_history_click_image = function(){
     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_start").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');
@@ -145,39 +137,46 @@ function images_history_enable_del_buttons(){
 }
 
 function images_history_init(){ 
-    // var loaded = gradioApp().getElementById("images_history_reconstruct_directory")
+    var tabnames = gradioApp().getElementById("images_history_tabnames_list")   
-    // if (loaded){  
+    if (tabnames){  
-        // var init_status = loaded.querySelector("input").checked 
+        images_history_tab_list = tabnames.querySelector("textarea").value.split(",")    
-    if (gradioApp().getElementById("images_history_finish_render")){      
         for (var i in images_history_tab_list ){
-            tab = images_history_tab_list[i];
+            var 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");  
-                     
+             gradioApp().getElementById(tab + "_images_history_start").setAttribute("style","padding:20px;font-size:25px");           
         }
+
+        //preload
+        if (gradioApp().getElementById("images_history_preload").querySelector("input").checked ){
             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);
-            // if (!init_status){
+                tab_btns[i].addEventListener('click', function(){
-            //     tab_btns[i].addEventListener('click', images_history_click_tab);
+                    var tabs_box = gradioApp().getElementById("images_history_tab");
-            // }
+                    if (!tabs_box.classList.contains(this.getAttribute("tabname"))) {
-            tab_btns[i].addEventListener('click', images_history_click_tab);
+                        gradioApp().getElementById(this.getAttribute("tabname") + "_images_history_start").click();
+                        tabs_box.classList.add(this.getAttribute("tabname"))
+                    }                
+                });
+            }            
+            tab_btns[0].click()
         }
     } else {
         setTimeout(images_history_init, 500);
     } 
 }
 
-var images_history_tab_list = ["custom", "txt2img", "img2img", "extras", "saved"];
+var images_history_tab_list = "";
 setTimeout(images_history_init, 500);
 document.addEventListener("DOMContentLoaded", function() {
     var mutationObserver = new MutationObserver(function(m){
+        if (images_history_tab_list != ""){
             for (var i in images_history_tab_list ){
                 let tabname = images_history_tab_list[i]
                 var buttons = gradioApp().querySelectorAll('#' + tabname + '_images_history .gallery-item');
@@ -188,14 +187,14 @@ document.addEventListener("DOMContentLoaded", function() {
                 var cls_btn = gradioApp().getElementById(tabname + '_images_history_gallery').querySelector("svg");
                 if (cls_btn){
                     cls_btn.addEventListener('click', function(){
-                    gradioApp().getElementById(tabname + '_images_history_del_button').setAttribute('disabled','disabled');
+                        gradioApp().getElementById(tabname + '_images_history_renew_page').click();
                     }, false);
                 }
 
             }     
+        }
     });
     mutationObserver.observe(gradioApp(), { childList:true, subtree:true });
-
 });
 
 

modules/images_history.py

@@ -4,7 +4,9 @@ import time
 import hashlib
 import gradio
 system_bak_path = "webui_log_and_bak"
-browser_tabname = "custom"
+custom_tab_name = "custom fold"
+faverate_tab_name = "favorites"
+tabs_list = ["txt2img", "img2img", "extras", faverate_tab_name]
 def is_valid_date(date):
     try:
         time.strptime(date, "%Y%m%d")
@@ -122,7 +124,6 @@ def archive_images(dir_name, date_to):
     else:
         filenames = traverse_all_files(dir_name, filenames)  
         total_num = len(filenames) 
-        batch_count = len(filenames) + 1 //  batch_size + 1
         tmparray = [(os.path.getmtime(file), file) for file in filenames ]
         date_stamp = time.mktime(time.strptime(date_to, "%Y%m%d")) + 86400      
         filenames = []
@@ -146,10 +147,12 @@ def archive_images(dir_name, date_to):
     last_date_from = date_to_bak if num == 0 else time.strftime("%Y%m%d", time.localtime(time.mktime(time.strptime(date, "%Y%m%d")) - 1000))
     date = date[:4] + "/" + date[4:6] + "/" + date[6:8]
     date_to_bak = date_to_bak[:4] + "/" + date_to_bak[4:6] + "/" + date_to_bak[6:8]
-    load_info = f"{total_num} images in this directory. Loaded {num} images during {date} - {date_to_bak}, divided into {int((num + 1) // opts.images_history_num_per_page + 1)} pages"
+    load_info = "<div style='color:#999' align='center'>"
+    load_info += f"{total_num} images in this directory. Loaded {num} images during {date} - {date_to_bak}, divided into {int((num + 1) // opts.images_history_num_per_page + 1)} pages"
+    load_info += "</div>"
     _, image_list, _, _, visible_num = get_recent_images(1, 0, filenames)
     return (
-        gradio.Dropdown.update(choices=date_list, value=date_to),
+        date_to,
         load_info,
         filenames,        
         1,
@@ -158,7 +161,7 @@ def archive_images(dir_name, date_to):
         "",
         visible_num, 
         last_date_from, 
-        #gradio.update(visible=batch_count > 1)
+        gradio.update(visible=total_num > num)
     )
 
 def delete_image(delete_num, name, filenames, image_index, visible_num):
@@ -209,7 +212,7 @@ def get_recent_images(page_index, step, filenames):
     visible_num = num_of_imgs_per_page if visible_num == 0 else visible_num
     return page_index, image_list,  "", "",  visible_num
 
-def newest_click(date_to):
+def loac_batch_click(date_to):
     if date_to is None:
         return time.strftime("%Y%m%d",time.localtime(time.time())), []
     else:
@@ -248,7 +251,7 @@ def page_index_change(page_index, filenames):
 
 def show_image_info(tabname_box, num, page_index, filenames):
     file = filenames[int(num) + int((page_index - 1) * int(opts.images_history_num_per_page))]   
-    tm =   time.strftime("%Y-%m-%d %H:%M:%S",time.localtime(os.path.getmtime(file)))
+    tm =   "<div style='color:#999' align='right'>" + time.strftime("%Y-%m-%d %H:%M:%S",time.localtime(os.path.getmtime(file))) + "</div>"
     return file, tm, num, file
 
 def enable_page_buttons():
@@ -268,9 +271,9 @@ def change_dir(img_dir, date_to):
         warning = "The format of the directory is incorrect"
     if warning is None:        
         today = time.strftime("%Y%m%d",time.localtime(time.time()))
-        return gradio.update(visible=False), gradio.update(visible=True), None,   None if date_to != today else today
+        return gradio.update(visible=False), gradio.update(visible=True), None,   None if date_to != today else today, gradio.update(visible=True), gradio.update(visible=True)
     else:
-        return gradio.update(visible=True), gradio.update(visible=False), warning, date_to
+        return gradio.update(visible=True), gradio.update(visible=False), warning, date_to, gradio.update(visible=False), gradio.update(visible=False)
 
 def show_images_history(gr, opts, tabname, run_pnginfo, switch_dict):
     custom_dir = False
@@ -280,7 +283,7 @@ def show_images_history(gr, opts, tabname, run_pnginfo, switch_dict):
         dir_name = opts.outdir_img2img_samples
     elif tabname == "extras":
         dir_name = opts.outdir_extras_samples
-    elif tabname == "saved":
+    elif tabname == faverate_tab_name:
         dir_name = opts.outdir_save
     else:
         custom_dir = True
@@ -295,22 +298,26 @@ def show_images_history(gr, opts, tabname, run_pnginfo, switch_dict):
             os.makedirs(dir_name)
 
     with gr.Column() as page_panel:            
+            with gr.Row():                
+                with gr.Column(scale=1, visible=not custom_dir) as load_batch_box: 
+                    load_batch = gr.Button('Load', elem_id=tabname + "_images_history_start", full_width=True)    
+                with gr.Column(scale=4): 
                     with gr.Row():                        
                         img_path = gr.Textbox(dir_name, label="Images directory", placeholder="Input images directory", interactive=custom_dir)  
+            with gr.Row():
+                with gr.Column(visible=False, scale=1) as batch_panel: 
+                    with gr.Row():
+                        forward = gr.Button('Prev batch')
+                        backward = gr.Button('Next batch')
+                with gr.Column(scale=3):
+                    load_info =  gr.HTML(visible=not custom_dir)   
             with gr.Row(visible=False) as warning:                 
                 warning_box = gr.Textbox("Message", interactive=False)                        
 
             with gr.Row(visible=not custom_dir, elem_id=tabname + "_images_history") as main_panel:
                 with gr.Column(scale=2):                     
-                    with gr.Row() as batch_panel:                    
+                    with gr.Row(visible=True) as turn_page_buttons:                        
-                        forward = gr.Button('Forward')        
+                        #date_to = gr.Dropdown(label="Date to")                          
-                        date_to = gr.Dropdown(label="Date to")
-                        backward = gr.Button('Backward')                           
-                        newest = gr.Button('Reload', elem_id=tabname + "_images_history_start")   
-                    with gr.Row():
-                        load_info = gr.Textbox(show_label=False, interactive=False)  
-                    with gr.Row(visible=False) as turn_page_buttons:
-                        renew_page = gr.Button('Refresh 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")
@@ -324,19 +331,22 @@ def show_images_history(gr, opts, tabname, run_pnginfo, switch_dict):
                         
                 with gr.Column():                    
                     with gr.Row():
-                        if tabname != "saved":
+                        with gr.Column():
-                            save_btn = gr.Button('Save')
+                            img_file_info = gr.Textbox(label="Generate Info", interactive=False, lines=6)
+                            gr.HTML("<hr>")                           
+                            img_file_name = gr.Textbox(value="", label="File Name", interactive=False)
+                            img_file_time= gr.HTML()
+                    with gr.Row():
+                        if tabname != faverate_tab_name:
+                            save_btn = gr.Button('Collect')
                         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", interactive=False)
-                            img_file_name = gr.Textbox(value="", label="File Name", interactive=False)
-                            img_file_time= gr.Textbox(value="", label="Create Time", interactive=False)
                            
                             
                     # hiden items
                     with gr.Row(visible=False): 
+                        renew_page = gr.Button('Refresh page', elem_id=tabname + "_images_history_renew_page")
+                        batch_date_to = gr.Textbox(label="Date to")  
                         visible_img_num = gr.Number()                     
                         date_to_recorder = gr.State([])
                         last_date_from = gr.Textbox()
@@ -349,23 +359,24 @@ def show_images_history(gr, opts, tabname, run_pnginfo, switch_dict):
                         info1 = gr.Textbox()
                         info2 = gr.Textbox()
 
-    img_path.submit(change_dir, inputs=[img_path, date_to], outputs=[warning, main_panel, warning_box, date_to])
+    img_path.submit(change_dir, inputs=[img_path, batch_date_to], outputs=[warning, main_panel, warning_box, batch_date_to, load_batch_box, load_info])
-    #change date
-    change_date_output = [date_to, load_info, filenames, page_index, history_gallery, img_file_name, img_file_time, visible_img_num, last_date_from]  
 
-    date_to.change(archive_images, inputs=[img_path, date_to], outputs=change_date_output)   
+    #change batch
-    date_to.change(enable_page_buttons, inputs=None, outputs=[turn_page_buttons])  
+    change_date_output = [batch_date_to, load_info, filenames, page_index, history_gallery, img_file_name, img_file_time, visible_img_num, last_date_from,  batch_panel]  
-    date_to.change(fn=None, inputs=[tabname_box], outputs=None, _js="images_history_turnpage")  
    
-    newest.click(newest_click, inputs=[date_to], outputs=[date_to, date_to_recorder])
+    batch_date_to.change(archive_images, inputs=[img_path, batch_date_to], outputs=change_date_output)   
-    forward.click(forward_click, inputs=[last_date_from, date_to_recorder], outputs=[date_to, date_to_recorder])
+    batch_date_to.change(enable_page_buttons, inputs=None, outputs=[turn_page_buttons])  
-    backward.click(backward_click, inputs=[last_date_from, date_to_recorder], outputs=[date_to, date_to_recorder])
+    batch_date_to.change(fn=None, inputs=[tabname_box], outputs=None, _js="images_history_turnpage")  
+
+    load_batch.click(loac_batch_click, inputs=[batch_date_to], outputs=[batch_date_to, date_to_recorder])
+    forward.click(forward_click, inputs=[last_date_from, date_to_recorder], outputs=[batch_date_to, date_to_recorder])
+    backward.click(backward_click, inputs=[last_date_from, date_to_recorder], outputs=[batch_date_to, date_to_recorder])
 
 
     #delete
     delete.click(delete_image, inputs=[delete_num, img_file_name, filenames, image_index, visible_img_num], outputs=[filenames, delete_num, visible_img_num])
     delete.click(fn=None, _js="images_history_delete", inputs=[delete_num, tabname_box, image_index], outputs=None) 
-    if tabname != "saved": 
+    if tabname != faverate_tab_name: 
         save_btn.click(save_image, inputs=[img_file_name], outputs=None)     
 
     #turn page
@@ -394,18 +405,20 @@ def show_images_history(gr, opts, tabname, run_pnginfo, switch_dict):
 
    
 
-def create_history_tabs(gr, sys_opts, run_pnginfo, switch_dict):
+def create_history_tabs(gr, sys_opts, cmp_ops, run_pnginfo, switch_dict):
     global opts;
     opts = sys_opts
     loads_files_num = int(opts.images_history_num_per_page)
     num_of_imgs_per_page = int(opts.images_history_num_per_page * opts.images_history_pages_num)
+    if cmp_ops.browse_all_images:
+        tabs_list.append(custom_tab_name)
     with gr.Blocks(analytics_enabled=False) as images_history:
         with gr.Tabs() as tabs:
-            for tab in [browser_tabname, "txt2img", "img2img", "extras", "saved"]:
+            for tab in tabs_list:
                 with gr.Tab(tab):
                     with gr.Blocks(analytics_enabled=False) :
                         show_images_history(gr, opts, tab, run_pnginfo, switch_dict)
-        #gradio.Checkbox(opts.images_history_reconstruct_directory, elem_id="images_history_reconstruct_directory", visible=False)
+        gradio.Checkbox(opts.images_history_preload, elem_id="images_history_preload", visible=False)         
-        gradio.Checkbox(opts.images_history_reconstruct_directory, elem_id="images_history_finish_render", visible=False)
+        gradio.Textbox(",".join(tabs_list), elem_id="images_history_tabnames_list", visible=False)    
         
     return images_history

modules/shared.py

@@ -74,6 +74,10 @@ parser.add_argument("--disable-console-progressbars", action='store_true', help=
 parser.add_argument("--enable-console-prompts", action='store_true', help="print prompts to console when generating with txt2img and img2img", default=False)
 parser.add_argument('--vae-path', type=str, help='Path to Variational Autoencoders model', default=None)
 parser.add_argument("--disable-safe-unpickle", action='store_true', help="disable checking pytorch models for malicious code", default=False)
+parser.add_argument("--browse-all-images", action='store_true', help="Allow browsing all images by Image Browser", default=False)
+
+
+cmd_opts = parser.parse_args()
 
 
 cmd_opts = parser.parse_args()
@@ -311,6 +315,7 @@ options_templates.update(options_section(('sampler-params', "Sampler parameters"
 
 options_templates.update(options_section(('images-history', "Images Browser"), {
     #"images_history_reconstruct_directory": OptionInfo(False, "Reconstruct output directory structure.This can greatly improve the speed of loading , but will change the original output directory structure"),
+    "images_history_preload": OptionInfo(False, "Preload images at startup"),
     "images_history_num_per_page": OptionInfo(36, "Number of pictures displayed on each page"),
     "images_history_pages_num": OptionInfo(6, "Minimum number of pages per load "),   
     "images_history_grid_num": OptionInfo(6, "Number of grids in each row"),   

modules/ui.py

@@ -1150,7 +1150,7 @@ def create_ui(wrap_gradio_gpu_call):
         "i2i":img2img_paste_fields
     }
 
-    images_history = img_his.create_history_tabs(gr, opts, wrap_gradio_call(modules.extras.run_pnginfo), images_history_switch_dict)
+    images_history = img_his.create_history_tabs(gr, opts, cmd_opts, wrap_gradio_call(modules.extras.run_pnginfo), images_history_switch_dict)
 
     with gr.Blocks() as modelmerger_interface:
         with gr.Row().style(equal_height=False):