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

Switch to Gradio .then, #126, major rework

pull/150/head
AlUlkesh 2023-04-07 14:09:03 +02:00
parent 4b9755bb94
commit 83419e4038
2 changed files with 151 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

241
javascript/image_browser.js
View File

@ -1,10 +1,36 @@
let image_browser_state = "free"
let image_browser_galleryItemName
onUiLoaded(image_browser_start)
let image_browser_webui_ready = false
let image_browser_started = false
function image_browser_delay(ms){return new Promise(resolve => setTimeout(resolve, ms))}
onUiLoaded(image_browser_start_it_up)
async function image_browser_wait_for_webui() {
await image_browser_delay(100)
while (gradioApp().getElementById("setting_sd_model_checkpoint").querySelector(".eta-bar")) {
await image_browser_delay(200)
}
image_browser_webui_ready = true
image_browser_start()
}
async function image_browser_start_it_up() {
container = gradioApp().getElementById("image_browser_tabs_container")
let controls = container.querySelectorAll('[id*="_control_"]')
controls.forEach(function(control) {
control.style.pointerEvents = "none"
control.style.cursor = "not-allowed"
control.style.opacity = "0.65"
})
let warnings = container.querySelectorAll('[id*="_warning_box"]')
warnings.forEach(function(warning) {
warning.innerHTML = '<p style="font-weight: bold;">Waiting for webui...'
})
image_browser_wait_for_webui()
}
async function image_browser_lock(reason) {
// Wait until lock removed
let i = 0
@ -25,55 +51,31 @@ async function image_browser_unlock() {
const image_browser_click_image = async function() {
await image_browser_lock("image_browser_click_image")
const gallery_items = image_browser_get_parent_by_tagname(this, "DIV").querySelectorAll(image_browser_image_browser_galleryItemNameDot)
const index = Array.from(gallery_items).indexOf(this)
const gallery = image_browser_get_parent_by_class(this, "image_browser_container")
const set_btn = gallery.querySelector(".image_browser_set_index")
const curr_idx = set_btn.getAttribute("img_index")
const tab_base_tag = image_browser_current_tab()
const container = gradioApp().getElementById(tab_base_tag + "_image_browser_container")
let child = this
let index = 0
while((child = child.previousSibling) != null) {
index = index + 1
}
const set_btn = container.querySelector(".image_browser_set_index")
let curr_idx
try {
curr_idx = set_btn.getAttribute("img_index")
} catch (e) {
curr_idx = -1
}
if (curr_idx != index) {
set_btn.setAttribute("img_index", index)
}
set_btn.click()
await image_browser_unlock()
}
function image_browser_get_parent_by_class(item, class_name) {
let parent = item.parentElement
while(!parent.classList.contains(class_name)){
parent = parent.parentElement
}
return parent
}
function image_browser_get_parent_by_tagname(item, tagname) {
let parent = item.parentElement
tagname = tagname.toUpperCase()
while(parent.tagName != tagname){
parent = parent.parentElement
}
return parent
}
function image_browser_run_after_preview_load(tab_base_tag, func) {
ob = new MutationObserver(async (mutationList, observer) => {
elem = mutationList[0].target
if (elem.classList.contains("hide")) {
func()
observer.disconnect()
}
})
ob.observe(
gradioApp().querySelectorAll(`#${tab_base_tag}_image_browser_gallery .svelte-gjihhp`)[0],
{ attributes: true }
)
set_btn.click()
}
async function image_browser_get_current_img(tab_base_tag, img_index, page_index, filenames, turn_page_switch, image_gallery) {
await image_browser_lock("image_browser_get_current_img")
img_index = gradioApp().getElementById(tab_base_tag + '_image_browser_set_index').getAttribute("img_index")
image_browser_hide_loading_animation(true)
gradioApp().dispatchEvent(new Event("image_browser_get_current_img"))
image_browser_run_after_preview_load(tab_base_tag,() => image_browser_hide_loading_animation(false))
await image_browser_unlock()
return [
tab_base_tag,
@ -85,20 +87,8 @@ async function image_browser_get_current_img(tab_base_tag, img_index, page_index
]
}
function image_browser_hide_loading_animation(hidden) {
if (hidden === true) {
gradioApp().querySelectorAll("div[id^='image_browser_tab'][id$='image_browser_gallery']:not(.hide_loading)").forEach((elem) => {
elem.classList.add("hide_loading")
})
} else {
gradioApp().querySelectorAll("div[id^='image_browser_tab'][id$='image_browser_gallery'].hide_loading").forEach((elem) => {
elem.classList.remove("hide_loading")
})
}
}
async function image_browser_refresh_current_page_preview(wait_time = 200) {
await image_browser_delay(wait_time)
async function image_browser_refresh_current_page_preview() {
await image_browser_delay(200)
const preview_div = gradioApp().querySelector('.preview')
if (preview_div === null) return
const tab_base_tag = image_browser_current_tab()
@ -106,62 +96,16 @@ async function image_browser_refresh_current_page_preview(wait_time = 200) {
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(image_browser_image_browser_galleryItemNameDot)
const gallery_items = gallery.querySelectorAll(".thumbnail-item")
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(image_browser_image_browser_galleryItemNameDot)
const curr_image = gallery_items[curr_idx]
curr_image.click()
})
}
const image_browser_get_current_img_handler = (del_img_btn) => {
// Prevent delete button spam
del_img_btn.style.pointerEvents = "auto"
del_img_btn.style.cursor = "default"
del_img_btn.style.opacity = "1"
}
async function image_browser_select_image(tab_base_tag, img_index) {
await image_browser_lock("image_browser_select_image")
const del_img_btn = gradioApp().getElementById(tab_base_tag + "_image_browser_del_img_btn")
// Prevent delete button spam
del_img_btn.style.pointerEvents = "none"
del_img_btn.style.cursor = "not-allowed"
del_img_btn.style.opacity = "0.65"
const gallery = gradioApp().getElementById(tab_base_tag + "_image_browser_gallery")
const gallery_items = gallery.querySelectorAll(image_browser_image_browser_galleryItemNameDot)
if (img_index >= gallery_items.length || gallery_items.length == 0) {
const refreshBtn = gradioApp().getElementById(tab_base_tag + "_image_browser_renew_page")
refreshBtn.dispatchEvent(new Event("click"))
} else {
const curr_image = gallery_items[img_index]
curr_image.click()
}
await image_browser_unlock()
// Prevent delete button spam
gradioApp().removeEventListener("image_browser_get_current_img", () => image_browser_get_current_img_handler(del_img_btn))
gradioApp().addEventListener("image_browser_get_current_img", () => image_browser_get_current_img_handler(del_img_btn))
}
async function image_browser_turnpage(tab_base_tag) {
await image_browser_lock("image_browser_turnpage")
const gallery = gradioApp().getElementById(tab_base_tag + "_image_browser_gallery")
while (!image_browser_started) {
await image_browser_delay(200)
}
const gallery = gradioApp().querySelector(`#${tab_base_tag}_image_browser`)
let clear
try {
clear = gallery.querySelector("button[aria-label='Clear']")
@ -171,23 +115,39 @@ async function image_browser_turnpage(tab_base_tag) {
} catch (e) {
console.error(e)
}
}
try {
// Wait for click-action to complete
const startTime = Date.now()
// 60 seconds in milliseconds
const timeout = 60000
while (clear) {
clear = gallery.querySelector("button[aria-label='Clear']")
if (Date.now() - startTime > timeout) {
throw new Error("image_browser_turnpage: 60 seconds have passed")
}
await image_browser_delay(200)
const image_browser_get_current_img_handler = (del_img_btn) => {
// Prevent delete button spam
del_img_btn.style.pointerEvents = "auto"
del_img_btn.style.cursor = "default"
del_img_btn.style.opacity = "1"
}
async function image_browser_select_image(tab_base_tag, img_index, select_image) {
if (select_image) {
await image_browser_lock("image_browser_select_image")
const del_img_btn = gradioApp().getElementById(tab_base_tag + "_image_browser_del_img_btn")
// Prevent delete button spam
del_img_btn.style.pointerEvents = "none"
del_img_btn.style.cursor = "not-allowed"
del_img_btn.style.opacity = "0.65"
const gallery = gradioApp().getElementById(tab_base_tag + "_image_browser_gallery")
const gallery_items = gallery.querySelectorAll(".thumbnail-item")
if (img_index >= gallery_items.length || gallery_items.length == 0) {
const refreshBtn = gradioApp().getElementById(tab_base_tag + "_image_browser_renew_page")
refreshBtn.dispatchEvent(new Event("click"))
} else {
const curr_image = gallery_items[img_index]
curr_image.click()
}
} catch (e) {
console.error(e)
await image_browser_unlock()
// Prevent delete button spam
gradioApp().removeEventListener("image_browser_get_current_img", () => image_browser_get_current_img_handler(del_img_btn))
gradioApp().addEventListener("image_browser_get_current_img", () => image_browser_get_current_img_handler(del_img_btn))
}
await image_browser_unlock()
}
function image_browser_gototab(tabname, tabsId = "tabs") {
@ -201,7 +161,7 @@ function image_browser_gototab(tabname, tabsId = "tabs") {
}
async function image_browser_get_image_for_ext(tab_base_tag, image_index) {
const image_browser_image = gradioApp().querySelectorAll(`#${tab_base_tag}_image_browser_gallery ${image_browser_image_browser_galleryItemNameDot}`)[image_index]
const image_browser_image = gradioApp().querySelectorAll(`#${tab_base_tag}_image_browser_gallery .thumbnail-item`)[image_index]
const canvas = document.createElement("canvas")
const image = document.createElement("img")
@ -293,9 +253,6 @@ function btnClickHandler(tab_base_tag, btn) {
}
function image_browser_init() {
image_browser_galleryItemName = "thumbnail-item"
image_browser_image_browser_galleryItemNameDot = "." + image_browser_galleryItemName
const tab_base_tags = gradioApp().getElementById("image_browser_tab_base_tags_list")
if (tab_base_tags) {
const image_browser_tab_base_tags_list = tab_base_tags.querySelector("textarea").value.split(",")
@ -310,18 +267,13 @@ function image_browser_init() {
btn.removeEventListener('click', () => btnClickHandler(tab_base_tag, btn))
btn.addEventListener('click', () => btnClickHandler(tab_base_tag, btn))
})
//preload
if (gradioApp().getElementById("image_browser_preload").querySelector("input").checked) {
setTimeout(function(){tab_btns[0].click()}, 100)
}
}
image_browser_keydown()
}
async function image_browser_wait_for_gallery_btn(tab_base_tag){
await image_browser_delay(100)
while (!gradioApp().getElementById(image_browser_current_tab() + "_image_browser_gallery").getElementsByClassName(image_browser_galleryItemName)) {
while (!gradioApp().getElementById(image_browser_current_tab() + "_image_browser_gallery").getElementsByClassName("thumbnail-item")) {
await image_browser_delay(200)
}
}
@ -338,7 +290,7 @@ function image_browser_start() {
const image_browser_tab_base_tags_list = tab_base_tags.querySelector("textarea").value.split(",")
image_browser_tab_base_tags_list.forEach(function(tab_base_tag) {
image_browser_class_add(tab_base_tag)
const tab_gallery_items = gradioApp().querySelectorAll('#' + tab_base_tag + '_image_browser ' + image_browser_image_browser_galleryItemNameDot)
const tab_gallery_items = gradioApp().querySelectorAll('#' + tab_base_tag + '_image_browser .thumbnail-item')
tab_gallery_items.forEach(function(gallery_item) {
gallery_item.removeEventListener('click', image_browser_click_image, true)
gallery_item.addEventListener('click', image_browser_click_image, true)
@ -349,7 +301,7 @@ function image_browser_start() {
const current_tab = image_browser_current_tab()
image_browser_wait_for_gallery_btn(current_tab).then(() => {
let gallery_btn
gallery_btn = gradioApp().getElementById(current_tab + "_image_browser_gallery").querySelector(image_browser_image_browser_galleryItemNameDot + ' .selected')
gallery_btn = gradioApp().getElementById(current_tab + "_image_browser_gallery").querySelector(".thumbnail-item .selected")
gallery_btn = gallery_btn && gallery_btn.length > 0 ? gallery_btn[0] : null
if (gallery_btn) {
image_browser_click_image.call(gallery_btn)
@ -367,6 +319,23 @@ function image_browser_start() {
}
})
mutationObserver.observe(gradioApp(), { childList:true, subtree:true })
image_browser_started = true
image_browser_activate_controls()
}
async function image_browser_activate_controls() {
await image_browser_delay(500)
container = gradioApp().getElementById("image_browser_tabs_container")
let controls = container.querySelectorAll('[id*="_control_"]')
controls.forEach(function(control) {
control.style.pointerEvents = "auto"
control.style.cursor = "default"
control.style.opacity = "1"
})
let warnings = container.querySelectorAll('[id*="_warning_box"]')
warnings.forEach(function(warning) {
warning.innerHTML = "<p>&nbsp"
})
}
function image_browser_current_tab() {
@ -410,7 +379,7 @@ function image_browser_keydown() {
// Listens for keypresses 0-5 and updates the corresponding ranking (0 is the last option, None)
if (event.code >= "Digit0" && event.code <= "Digit5") {
const selectedValue = event.code.charAt(event.code.length - 1)
const radioInputs = gradioApp().getElementById(tab_base_tag + "_image_browser_ranking").getElementsByTagName("input")
const radioInputs = gradioApp().getElementById(tab_base_tag + "_control_image_browser_ranking").getElementsByTagName("input")
for (const input of radioInputs) {
if (input.value === selectedValue || (selectedValue === '0' && input === radioInputs[radioInputs.length - 1])) {
input.checked = true
@ -460,7 +429,7 @@ function image_browser_keydown() {
}
if (event.code == "ArrowLeft" && modifiers_pressed) {
const prevBtn = gradioApp().getElementById(tab_base_tag + "_image_browser_prev_page")
const prevBtn = gradioApp().getElementById(tab_base_tag + "_control_image_browser_prev_page")
prevBtn.dispatchEvent(new Event("click"))
}
@ -473,7 +442,7 @@ function image_browser_keydown() {
}
if (event.code == "ArrowRight" && modifiers_pressed) {
const nextBtn = gradioApp().getElementById(tab_base_tag + "_image_browser_next_page")
const nextBtn = gradioApp().getElementById(tab_base_tag + "_control_image_browser_next_page")
nextBtn.dispatchEvent(new Event("click"))
}

81
scripts/image_browser.py
View File

@ -301,7 +301,7 @@ def save_image(file_name, filenames, page_index, turn_page_switch, dest_path):
return message, filenames, page_index, turn_page_switch
def delete_image(tab_base_tag_box, delete_num, name, filenames, image_index, visible_num, delete_confirm, turn_page_switch, select_image_switch, image_page_list):
def delete_image(tab_base_tag_box, delete_num, name, filenames, image_index, visible_num, delete_confirm, turn_page_switch, image_page_list):
refresh = False
delete_num = int(delete_num)
image_index = int(image_index)
@ -343,10 +343,11 @@ def delete_image(tab_base_tag_box, delete_num, name, filenames, image_index, vis
if refresh:
turn_page_switch = -turn_page_switch
select_image = False
else:
select_image_switch = -select_image_switch
select_image = True
return new_file_list, 1, turn_page_switch, visible_num, new_image_page_list, select_image_switch, json.dumps(new_image_page_list)
return new_file_list, 1, turn_page_switch, visible_num, new_image_page_list, select_image, json.dumps(new_image_page_list)
def traverse_all_files(curr_path, image_list, tab_base_tag_box, img_path_depth) -> List[Tuple[str, os.stat_result, str, int]]:
global current_depth
@ -820,7 +821,7 @@ def get_image_page(img_path, page_index, filenames, keyword, sort_by, sort_order
load_info = "<div style='color:#999' align='center'>"
load_info += f"{length} images in this directory, divided into {int((length + 1) // num_of_imgs_per_page + 1)} pages"
load_info += "</div>"
return filenames, gr.update(value=page_index, label=f"Page Index ({page_index}/{max_page_index})"), thumbnail_list, "", "", "", visible_num, load_info, None, json.dumps(image_list)
def get_current_file(tab_base_tag_box, num, page_index, filenames):
@ -837,7 +838,8 @@ def show_image_info(tab_base_tag_box, num, page_index, filenames, turn_page_swit
tm = None
info = ""
else:
file_num = int(num) + int((page_index - 1) * num_of_imgs_per_page)
file_num = int(num) + int(
(page_index - 1) * num_of_imgs_per_page)
if file_num >= len(filenames):
# Last image to the right is deleted, page refresh
turn_page_switch = -turn_page_switch
@ -895,6 +897,12 @@ def get_ranking(filename):
ranking_value = wib_db.select_ranking(filename)
return ranking_value, None
def img_file_name_changed(img_file_name, favorites_btn, to_dir_btn):
ranking_current, ranking = get_ranking(img_file_name)
favorites_btn, to_dir_btn = update_move_text(favorites_btn, to_dir_btn)
return ranking_current, ranking, "", favorites_btn, to_dir_btn
def update_ranking(img_file_name, ranking_current, ranking, img_file_info):
# ranking = None is different than ranking = "None"! None means no radio button selected. "None" means radio button called "None" selected.
if ranking is None:
@ -961,7 +969,7 @@ def create_tab(tab: ImageBrowserTab, current_gr_tab: gr.Tab):
with gr.Row():
path_recorder = gr.State(path_recorder)
with gr.Column(scale=10):
warning_box = gr.HTML("<p>&nbsp")
warning_box = gr.HTML("<p>&nbsp", elem_id=f"{tab.base_tag}_image_browser_warning_box")
with gr.Column(scale=5, visible=(tab.name==favorite_tab_name)):
gr.HTML(f"<p>Favorites path from settings: {opts.outdir_save}")
@ -991,22 +999,22 @@ def create_tab(tab: ImageBrowserTab, current_gr_tab: gr.Tab):
with gr.Column(scale=2):
with gr.Row(elem_id=f"{tab.base_tag}_image_browser_gallery_controls") as gallery_controls_panel:
with gr.Column(scale=2, min_width=20):
first_page = gr.Button('First Page')
first_page = gr.Button("First Page", elem_id=f"{tab.base_tag}_control_image_browser_first_page")
with gr.Column(scale=2, min_width=20):
prev_page = gr.Button('Prev Page', elem_id=f"{tab.base_tag}_image_browser_prev_page")
prev_page = gr.Button("Prev Page", elem_id=f"{tab.base_tag}_control_image_browser_prev_page")
with gr.Column(scale=2, min_width=20):
page_index = gr.Number(value=1, label="Page Index")
page_index = gr.Number(value=1, label="Page Index", elem_id=f"{tab.base_tag}_control_image_browser_page_index")
with gr.Column(scale=1, min_width=20):
refresh_index_button = ToolButton(value=refresh_symbol)
refresh_index_button = ToolButton(value=refresh_symbol, elem_id=f"{tab.base_tag}_control_image_browser_refresh_index")
with gr.Column(scale=2, min_width=20):
next_page = gr.Button('Next Page', elem_id=f"{tab.base_tag}_image_browser_next_page")
next_page = gr.Button("Next Page", elem_id=f"{tab.base_tag}_control_image_browser_next_page")
with gr.Column(scale=2, min_width=20):
end_page = gr.Button('End Page')
end_page = gr.Button("End Page", elem_id=f"{tab.base_tag}_control_image_browser_end_page")
with gr.Row(visible=False) as ranking_panel:
with gr.Column(scale=1, min_width=20):
ranking_current = gr.Textbox(value="None", label="Current ranking", interactive=False)
with gr.Column(scale=4, min_width=20):
ranking = gr.Radio(choices=["1", "2", "3", "4", "5", "None"], label="Set ranking to", elem_id=f"{tab.base_tag}_image_browser_ranking", interactive=True)
ranking = gr.Radio(choices=["1", "2", "3", "4", "5", "None"], label="Set ranking to", elem_id=f"{tab.base_tag}_control_image_browser_ranking", interactive=True)
with gr.Row():
image_gallery = gr.Gallery(show_label=False, elem_id=f"{tab.base_tag}_image_browser_gallery").style(grid=opts.image_browser_page_columns)
with gr.Row() as delete_panel:
@ -1051,8 +1059,11 @@ def create_tab(tab: ImageBrowserTab, current_gr_tab: gr.Tab):
with gr.Row(elem_id=f"{tab.base_tag}_image_browser_button_panel", visible=False) as button_panel:
with gr.Column():
with gr.Row():
if tab.name != favorite_tab_name:
favorites_btn = gr.Button(f'{copy_move[opts.image_browser_copy_image]} to favorites', elem_id=f"{tab.base_tag}_image_browser_favorites_btn")
if tab.name == favorite_tab_name:
favorites_btn_show = False
else:
favorites_btn_show = True
favorites_btn = gr.Button(f'{copy_move[opts.image_browser_copy_image]} to favorites', elem_id=f"{tab.base_tag}_image_browser_favorites_btn", visible=favorites_btn_show)
try:
send_to_buttons = modules.generation_parameters_copypaste.create_buttons(["txt2img", "img2img", "inpaint", "extras"])
except:
@ -1089,7 +1100,7 @@ def create_tab(tab: ImageBrowserTab, current_gr_tab: gr.Tab):
load_switch = gr.Textbox(value="load_switch", label="load_switch")
to_dir_load_switch = gr.Textbox(value="to dir load_switch", label="to_dir_load_switch")
turn_page_switch = gr.Number(value=1, label="turn_page_switch")
select_image_switch = gr.Number(value=1)
select_image = gr.Number(value=1)
img_path_add = gr.Textbox(value="add")
img_path_remove = gr.Textbox(value="remove")
favorites_path = gr.Textbox(value=opts.outdir_save)
@ -1172,22 +1183,18 @@ def create_tab(tab: ImageBrowserTab, current_gr_tab: gr.Tab):
to_dir_saved.change(change_dir, inputs=[to_dir_saved, path_recorder, to_dir_load_switch, to_dir_saved, img_path_depth, to_dir_path], outputs=[warning_box, main_panel, to_dir_saved, path_recorder, to_dir_load_switch, to_dir_path, img_path_depth])
#delete
delete.click(delete_image, inputs=[tab_base_tag_box, delete_num, img_file_name, filenames, image_index, visible_img_num, delete_confirm, turn_page_switch, select_image_switch, image_page_list], outputs=[filenames, delete_num, turn_page_switch, visible_img_num, image_gallery, select_image_switch, image_page_list])
select_image_switch.change(fn=None, inputs=[tab_base_tag_box, image_index], outputs=[js_dummy_return], _js="image_browser_select_image")
delete.click(
fn=delete_image,
inputs=[tab_base_tag_box, delete_num, img_file_name, filenames, image_index, visible_img_num, delete_confirm, turn_page_switch, image_page_list],
outputs=[filenames, delete_num, turn_page_switch, visible_img_num, image_gallery, select_image, image_page_list]
).then(
fn=None,
_js="image_browser_select_image",
inputs=[tab_base_tag_box, image_index, select_image],
outputs=[js_dummy_return]
)
if tab.name == favorite_tab_name:
img_file_name.change(fn=update_move_text_one, inputs=[to_dir_btn], outputs=[to_dir_btn])
else:
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 page is updated
for btn in (first_page, next_page, prev_page, end_page, refresh_index_button, sort_order, ):
btn.click(fn=None,_js="image_browser_refresh_preview", inputs=None, outputs=[js_dummy_return])
for component in (sort_by, ranking_filter):
component.change(fn=None,_js="image_browser_refresh_preview", inputs=None, outputs=[js_dummy_return])
for component in (filename_keyword_search, exif_keyword_search, aes_filter_min, aes_filter_max, page_index):
component.submit(fn=None,_js="image_browser_refresh_preview", inputs=None, outputs=[js_dummy_return])
#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])
@ -1209,8 +1216,13 @@ def create_tab(tab: ImageBrowserTab, current_gr_tab: gr.Tab):
fn=get_image_page,
inputs=[img_path, page_index, filenames, filename_keyword_search, sort_by, sort_order, tab_base_tag_box, img_path_depth, ranking_filter, aes_filter_min, aes_filter_max, exif_keyword_search, negative_prompt_search, use_regex, case_sensitive],
outputs=[filenames, page_index, image_gallery, img_file_name, img_file_time, img_file_info, visible_img_num, warning_box, hidden, image_page_list]
).then(
fn=None,
_js="image_browser_turnpage",
inputs=[tab_base_tag_box],
outputs=[js_dummy_return],
)
turn_page_switch.change(fn=None, inputs=[tab_base_tag_box], outputs=[js_dummy_return], _js="image_browser_turnpage")
hide_on_thumbnail_view = [delete_panel, button_panel, ranking_panel, to_dir_panel, info_add_panel]
turn_page_switch.change(fn=lambda:(gr.update(visible=False), gr.update(visible=False), gr.update(visible=False), gr.update(visible=False), gr.update(visible=False)), inputs=None, outputs=hide_on_thumbnail_view)
@ -1269,8 +1281,9 @@ def create_tab(tab: ImageBrowserTab, current_gr_tab: gr.Tab):
# other functions
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=[img_file_name, img_file_time, image_index, hidden, turn_page_switch, img_file_info_add, image_gallery])
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)
img_file_name.change(fn=lambda : "", inputs=None, outputs=[collected_warning])
img_file_name.change(get_ranking, inputs=img_file_name, outputs=[ranking_current, ranking])
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(img_file_name_changed, inputs=[img_file_name, favorites_btn, to_dir_btn], outputs=[ranking_current, ranking, collected_warning, favorites_btn, to_dir_btn])
hidden.change(fn=run_pnginfo, inputs=[hidden, img_path, img_file_name], outputs=[info1, img_file_info, info2, image_browser_prompt, image_browser_neg_prompt])
@ -1376,7 +1389,6 @@ def on_ui_tabs():
with gr.Tab(tab.name, elem_id=f"{tab.base_tag}_image_browser_container") as current_gr_tab:
with gr.Blocks(analytics_enabled=False):
create_tab(tab, current_gr_tab)
gr.Checkbox(opts.image_browser_preload, elem_id="image_browser_preload", visible=False)
gr.Textbox(",".join( [tab.base_tag for tab in tabs_list] ), elem_id="image_browser_tab_base_tags_list", visible=False)
return (image_browser , "Image Browser", "image_browser"),
@ -1408,7 +1420,6 @@ def on_ui_settings():
("image_browser_active_tabs", None, ", ".join(default_tab_options), active_tabs_description),
("image_browser_hidden_components", None, [], "Select components to hide", DropdownMulti, lambda: {"choices": components_list}),
("image_browser_with_subdirs", "images_history_with_subdirs", True, "Include images in sub directories"),
("image_browser_preload", "images_history_preload", False, "Preload images at startup"),
("image_browser_copy_image", "images_copy_image", False, "Move buttons copy instead of move"),
("image_browser_delete_message", "images_delete_message", True, "Print image deletion messages to the console"),
("image_browser_txt_files", "images_txt_files", True, "Move/Copy/Delete matching .txt files"),