1580158
/
stable-diffusion-webui-images-browser
mirror of https://github.com/AlUlkesh/stable-diffusion-webui-images-browser.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add bunch of event listeners to refresh preview

pull/104/head
pangbo13 2023-03-30 11:02:51 +08:00
parent bbcc4ba6fb
commit fde71b6bdd
2 changed files with 44 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
javascript/image_browser.js
View File

@ -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()
}
})
}

11
scripts/image_browser.py
View File

@ -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])