add bunch of event listeners to refresh preview

javascript/image_browser.js

@@ -108,18 +108,29 @@ function image_browser_hide_loading_animation(hidden) {
     }
 }
 
-async function image_browser_refresh_preview(tab_base_tag) { 
+async function image_browser_refresh_current_page_preview(wait_time = 200) { 
-    // Close preview first
+    await image_browser_delay(wait_time)
-    await image_browser_delay(500)
+    const preview_div = gradioApp().querySelector('.preview')
-    const close_btn = gradioApp().querySelector('.preview button:not(.thumbnail-item)')
+    if (preview_div === null) return
-    if (close_btn === null) { 
+    const tab_base_tag = image_browser_current_tab()
-        return
+    const gallery = gradioApp().querySelector(`#${tab_base_tag}_image_browser`)
-    }
+    const set_btn = gallery.querySelector(".image_browser_set_index")
-    close_btn.click()
+    const curr_idx = parseInt(set_btn.getAttribute("img_index"))
-    // Open preview again
+    // no loading animation, so click immediately
+    const gallery_items = gallery.querySelectorAll(galleryItemNameDot)
+    const curr_image = gallery_items[curr_idx]
+    curr_image.click()
+}
+
+async function image_browser_refresh_preview(wait_time = 200) { 
+    await image_browser_delay(wait_time)
+    const preview_div = gradioApp().querySelector('.preview')
+    if (preview_div === null) return
+    const tab_base_tag = image_browser_current_tab()
     const gallery = gradioApp().querySelector(`#${tab_base_tag}_image_browser`)
     const set_btn = gallery.querySelector(".image_browser_set_index")
     const curr_idx = set_btn.getAttribute("img_index")
+    // wait for page loading...
     image_browser_run_after_preview_load(tab_base_tag, () => { 
         const gallery_items = gallery.querySelectorAll(galleryItemNameDot)
         const curr_image = gallery_items[curr_idx]
@@ -449,9 +460,25 @@ function image_browser_keydown() {
             prevBtn.dispatchEvent(new Event("click"))
         }
 
+        if (event.code == "ArrowLeft" && modifiers_none) {
+            const tab_base_tag = image_browser_current_tab()
+            const set_btn = gradioApp().querySelector(`#${tab_base_tag}_image_browser .image_browser_set_index`)
+            const curr_idx = parseInt(set_btn.getAttribute("img_index"))
+            set_btn.setAttribute("img_index", curr_idx - 1)
+            image_browser_refresh_current_page_preview()
+        }
+        
         if (event.code == "ArrowRight" && modifiers_pressed) {
             const nextBtn = gradioApp().getElementById(tab_base_tag + "_image_browser_next_page")
             nextBtn.dispatchEvent(new Event("click"))
         }
+
+        if (event.code == "ArrowRight" && modifiers_none) {
+            const tab_base_tag = image_browser_current_tab()
+            const set_btn = gradioApp().querySelector(`#${tab_base_tag}_image_browser .image_browser_set_index`)
+            const curr_idx = parseInt(set_btn.getAttribute("img_index"))
+            set_btn.setAttribute("img_index", curr_idx + 1)
+            image_browser_refresh_current_page_preview()
+        }
     })
 }

scripts/image_browser.py

@@ -757,6 +757,7 @@ def get_image_thumbnail(image_list):
             thumbnail = image.crop((left, top, right, bottom))
             thumbnail.thumbnail((opts.image_browser_thumbnail_size, opts.image_browser_thumbnail_size))
         except OSError:
+            # If PIL cannot open the image, use the original path
             thumbnail_list.append(image_path)
         else:
             thumbnail_list.append(thumbnail)
@@ -1146,9 +1147,13 @@ def create_tab(tab: ImageBrowserTab, current_gr_tab: gr.Tab):
         favorites_btn.click(save_image, inputs=[img_file_name, filenames, page_index, turn_page_switch, favorites_path], outputs=[collected_warning, filenames, page_index, turn_page_switch])
         img_file_name.change(fn=update_move_text, inputs=[favorites_btn, to_dir_btn], outputs=[favorites_btn, to_dir_btn])
     to_dir_btn.click(save_image, inputs=[img_file_name, filenames, page_index, turn_page_switch, to_dir_path], outputs=[collected_warning, filenames, page_index, turn_page_switch])
-    #refresh preview when turning page
+    #refresh preview when page is updated
-    for btn in (first_page, next_page, prev_page, end_page):
+    for btn in (first_page, next_page, prev_page, end_page, refresh_index_button, sort_order, ):
-        btn.click(None,_js="image_browser_refresh_preview", inputs=[tab_base_tag_box], outputs=None)
+        btn.click(None,_js="image_browser_refresh_preview", inputs=None, outputs=None)
+    for component in (sort_by, ranking_filter):
+        component.change(None,_js="image_browser_refresh_preview", inputs=None, outputs=None)
+    for component in (filename_keyword_search, exif_keyword_search, aes_filter_min, aes_filter_max, page_index):
+        component.submit(None,_js="image_browser_refresh_preview", inputs=None, outputs=None)
     #turn page
     first_page.click(lambda s:(1, -s) , inputs=[turn_page_switch], outputs=[page_index, turn_page_switch])
     next_page.click(lambda p, s: (p + 1, -s), inputs=[page_index, turn_page_switch], outputs=[page_index, turn_page_switch])