From fde71b6bddc0a0f239c7735f84972fa3f7632f3d Mon Sep 17 00:00:00 2001 From: pangbo13 <373108669@qq.com> Date: Thu, 30 Mar 2023 11:02:51 +0800 Subject: [PATCH] add bunch of event listeners to refresh preview --- javascript/image_browser.js | 45 +++++++++++++++++++++++++++++-------- scripts/image_browser.py | 11 ++++++--- 2 files changed, 44 insertions(+), 12 deletions(-) diff --git a/javascript/image_browser.js b/javascript/image_browser.js index 19234fa..e149fb3 100644 --- a/javascript/image_browser.js +++ b/javascript/image_browser.js @@ -108,18 +108,29 @@ function image_browser_hide_loading_animation(hidden) { } } -async function image_browser_refresh_preview(tab_base_tag) { - // Close preview first - await image_browser_delay(500) - const close_btn = gradioApp().querySelector('.preview button:not(.thumbnail-item)') - if (close_btn === null) { - return - } - close_btn.click() - // Open preview again +async function image_browser_refresh_current_page_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 = parseInt(set_btn.getAttribute("img_index")) + // 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() + } }) } diff --git a/scripts/image_browser.py b/scripts/image_browser.py index 03ace66..58a3e27 100644 --- a/scripts/image_browser.py +++ b/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 - for btn in (first_page, next_page, prev_page, end_page): - btn.click(None,_js="image_browser_refresh_preview", inputs=[tab_base_tag_box], outputs=None) + #refresh preview when page is updated + 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=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])