From 74a5dcc03d150ebe10555abc581b21cfc880ed2f Mon Sep 17 00:00:00 2001 From: EllangoK Date: Thu, 9 Feb 2023 19:15:49 -0500 Subject: [PATCH] adds more keybindings --- README.md | 11 +++++++++++ javascript/image_browser.js | 38 +++++++++++++++++++++++++++++++++---- scripts/image_browser.py | 12 ++++++------ 3 files changed, 51 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 52df5b1..7ad370e 100644 --- a/README.md +++ b/README.md @@ -17,6 +17,7 @@ and restart your stable-diffusion-webui, then you can see the new tab "Image Bro Please be aware that when scanning a directory for the first time, the png-cache will be built. This can take several minutes, depending on the amount of images. ## Recent updates +- Keybindings - Additional sorting and filtering by EXIF data including .txt file information - Recyle bin option - Add/Remove from saved directories, via buttons @@ -27,6 +28,16 @@ Please be aware that when scanning a directory for the first time, the png-cache - View and save favorites with individual folder depth - Now also supports jpg +## Keybindings +| Key | Explanation | +|---------|-------------| +| `0-5` | Ranks the current image, with 0 being the last option (None) | +| `F` | Adds the current image to Favorites | +| `R` | Refreshes the image gallery | +| `Delete` | Deletes the current image | +| `Ctrl + Arrow Left` | Goes to the previous page of images | +| `Ctrl + Arrow Right` | Goes to the next page of images | + ## Credit Credit goes to the original maintainer of this extension: https://github.com/yfszzx and to major contributor https://github.com/Klace diff --git a/javascript/image_browser.js b/javascript/image_browser.js index b5856b8..ba49036 100644 --- a/javascript/image_browser.js +++ b/javascript/image_browser.js @@ -196,7 +196,7 @@ document.addEventListener("DOMContentLoaded", function() { }); function image_browser_current_tab() { - var tabs = gradioApp().getElementById("image_browser_tabs_container").querySelectorAll('[id$="_image_browser_container"]'); + let tabs = gradioApp().getElementById("image_browser_tabs_container").querySelectorAll('[id$="_image_browser_container"]'); for (const element of tabs) { if (element.style.display === "block") { @@ -209,7 +209,7 @@ function image_browser_current_tab() { } function image_browser_active() { - var ext_active = gradioApp().getElementById("tab_image_browser"); + let ext_active = gradioApp().getElementById("tab_image_browser"); return ext_active && ext_active.style.display !== "none"; } @@ -219,10 +219,12 @@ gradioApp().addEventListener("keydown", function(event) { return; } + let tabname = image_browser_current_tab(); + // Listens for keypresses 0-5 and updates the corresponding ranking (0 is the last option, None) if (event.code >= "Digit0" && event.code <= "Digit5") { - var selectedValue = event.code.charAt(event.code.length - 1); - var radioInputs = gradioApp().getElementById( image_browser_current_tab() + "_images_ranking").getElementsByTagName("input"); + let selectedValue = event.code.charAt(event.code.length - 1); + let radioInputs = gradioApp().getElementById(tabname + "_image_browser_ranking").getElementsByTagName("input"); for (const input of radioInputs) { if (input.value === selectedValue || (selectedValue === '0' && input === radioInputs[radioInputs.length - 1])) { input.checked = true; @@ -231,4 +233,32 @@ gradioApp().addEventListener("keydown", function(event) { } } } + + if (event.code == "KeyF") { + if (tabname == "Favorites") { + return; + } + let favoriteBtn = gradioApp().getElementById(tabname + "_image_browser_favorites_btn"); + favoriteBtn.dispatchEvent(new Event("click")); + } + + if (event.code == "KeyR") { + let refreshBtn = gradioApp().getElementById(tabname + "_image_browser_renew_page"); + refreshBtn.dispatchEvent(new Event("click")); + } + + if (event.code == "Delete") { + let deleteBtn = gradioApp().getElementById(tabname + "_image_browser_del_img_btn"); + deleteBtn.dispatchEvent(new Event("click")); + } + + if (event.code == "ArrowLeft" && event.ctrlKey) { + let prevBtn = gradioApp().getElementById(tabname + "_image_browser_prev_page"); + prevBtn.dispatchEvent(new Event("click")); + } + + if (event.code == "ArrowRight" && event.ctrlKey) { + let nextBtn = gradioApp().getElementById(tabname + "_image_browser_next_page"); + nextBtn.dispatchEvent(new Event("click")); + } }); diff --git a/scripts/image_browser.py b/scripts/image_browser.py index f3a7a38..ad7ca5a 100644 --- a/scripts/image_browser.py +++ b/scripts/image_browser.py @@ -570,13 +570,13 @@ def create_tab(tabname): with gr.Column(scale=2): with gr.Row(): first_page = gr.Button('First Page') - prev_page = gr.Button('Prev Page') + prev_page = gr.Button('Prev Page', elem_id=f"{tabname}_image_browser_prev_page") page_index = gr.Number(value=1, label="Page Index") refresh_index_button = ToolButton(value=refresh_symbol) - next_page = gr.Button('Next Page') + next_page = gr.Button('Next Page', elem_id=f"{tabname}_image_browser_next_page") end_page = gr.Button('End Page') with gr.Row(): - ranking = gr.Radio(value="None", choices=["1", "2", "3", "4", "5", "None"], label="ranking", elem_id=f"{tabname}_images_ranking", interactive=True, visible=False) + ranking = gr.Radio(value="None", choices=["1", "2", "3", "4", "5", "None"], label="ranking", elem_id=f"{tabname}_image_browser_ranking", interactive=True, visible=False) auto_next = gr.Checkbox(label="Next Image After Ranking (To be implemented)", interactive=False, visible=False) with gr.Row(): image_gallery = gr.Gallery(show_label=False, elem_id=f"{tabname}_image_browser_gallery").style(grid=opts.image_browser_page_columns) @@ -606,7 +606,7 @@ def create_tab(tabname): img_file_time= gr.HTML() with gr.Row(elem_id=f"{tabname}_image_browser_button_panel") as button_panel: if tabname != favorite_tab_name: - save_btn = gr.Button(f'{"Move" if not opts.image_browser_copy_image else "Copy"} to favorites') + favorites_btn = gr.Button(f'{"Move" if not opts.image_browser_copy_image else "Copy"} to favorites', elem_id=f"{tabname}_image_browser_favorites_btn") try: send_to_buttons = modules.generation_parameters_copypaste.create_buttons(["txt2img", "img2img", "inpaint", "extras"]) except: @@ -641,8 +641,8 @@ def create_tab(tabname): 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="image_browser_delete", inputs=[delete_num, tabname_box, image_index], outputs=None) if tabname != favorite_tab_name: - save_btn.click(save_image, inputs=[img_file_name, filenames, page_index, turn_page_switch], outputs=[collected_warning, filenames, page_index, turn_page_switch]) - img_file_name.change(fn=update_move_text, inputs=[img_file_name], outputs=[save_btn]) + favorites_btn.click(save_image, inputs=[img_file_name, filenames, page_index, turn_page_switch], outputs=[collected_warning, filenames, page_index, turn_page_switch]) + img_file_name.change(fn=update_move_text, inputs=[img_file_name], outputs=[favorites_btn]) #turn page first_page.click(lambda s:(1, -s) , inputs=[turn_page_switch], outputs=[page_index, turn_page_switch])