fix delete/left/right interactions, #159

javascript/image_browser.js

@@ -3,6 +3,7 @@ let image_browser_webui_ready = false
 let image_browser_started = false
 let image_browser_console_log = ""
 let image_browser_debug = false
+let image_browser_img_show_in_progress = false
 
 function image_browser_delay(ms){return new Promise(resolve => setTimeout(resolve, ms))}
 
@@ -551,6 +552,10 @@ async function image_browser_activate_controls() {
     if (image_browser_debug) console.log("image_browser_activate_controls:end")
 }
 
+function image_browser_img_show_progress_update() {
+    image_browser_img_show_in_progress = false
+}
+
 function image_browser_renew_page(tab_base_tag) {
     if (image_browser_debug) console.log("image_browser_renew_page:start")
     gradioApp().getElementById(tab_base_tag + '_image_browser_renew_page').click()
@@ -594,6 +599,24 @@ function image_browser_active() {
     return ext_active && ext_active.style.display !== "none"
 }
 
+async function image_browser_delete_key(tab_base_tag) {
+    // Wait for img_show to end
+    const startTime = Date.now()
+    // 60 seconds in milliseconds
+    const timeout = 60000
+    
+    await image_browser_delay(100)
+    while (image_browser_img_show_in_progress) {
+        if (Date.now() - startTime > timeout) {
+            throw new Error("image_browser_delete_key: 60 seconds have passed")
+        }
+        await image_browser_delay(200)
+    }
+
+    const deleteBtn = gradioApp().getElementById(tab_base_tag + "_image_browser_del_img_btn")
+    deleteBtn.dispatchEvent(new Event("click"))
+}
+
 function image_browser_keydown() {
     if (image_browser_debug) console.log("image_browser_keydown:start")
     gradioApp().addEventListener("keydown", function(event) {
@@ -666,8 +689,7 @@ function image_browser_keydown() {
         }
 
         if (event.code == "Delete" && modifiers_none) {
-            const deleteBtn = gradioApp().getElementById(tab_base_tag + "_image_browser_del_img_btn")
-            deleteBtn.dispatchEvent(new Event("click"))
+            image_browser_delete_key(tab_base_tag)
         }
 
         if (event.code == "ArrowLeft" && modifiers_pressed) {
@@ -676,6 +698,7 @@ function image_browser_keydown() {
         }
 
         if (event.code == "ArrowLeft" && modifiers_none) {
+            image_browser_img_show_in_progress = true
             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"))
@@ -689,6 +712,7 @@ function image_browser_keydown() {
         }
 
         if (event.code == "ArrowRight" && modifiers_none) {
+            image_browser_img_show_in_progress = true
             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"))

scripts/image_browser.py

@@ -1476,7 +1476,20 @@ def create_tab(tab: ImageBrowserTab, current_gr_tab: gr.Tab):
         set_index_outputs = [img_file_name, img_file_time, image_index, hidden, turn_page_switch, img_file_info_add, image_gallery]
     else:
         set_index_outputs = [img_file_name, img_file_time, image_index, hidden, turn_page_switch, img_file_info_add]
-    set_index.click(show_image_info, _js="image_browser_get_current_img", inputs=[tab_base_tag_box, image_index, page_index, filenames, turn_page_switch, image_gallery], outputs=set_index_outputs, show_progress=opts.image_browser_show_progress)
+    set_index.click(
+        fn=show_image_info,
+        _js="image_browser_get_current_img",
+        inputs=[tab_base_tag_box, image_index, page_index, filenames, turn_page_switch, image_gallery],
+        outputs=set_index_outputs,
+        show_progress=opts.image_browser_show_progress
+    ).then(
+        fn=None,
+        _js="image_browser_img_show_progress_update",
+        inputs=[],
+        outputs=[js_dummy_return],
+        show_progress=opts.image_browser_show_progress
+    )
+
     set_index.click(fn=lambda:(gr.update(visible=delete_panel not in override_hidden), gr.update(visible=button_panel not in override_hidden), gr.update(visible=ranking_panel not in override_hidden), gr.update(visible=to_dir_panel not in override_hidden), gr.update(visible=info_add_panel not in override_hidden)), inputs=None, outputs=hide_on_thumbnail_view, show_progress=opts.image_browser_show_progress)
 
     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], show_progress=opts.image_browser_show_progress)