mirrors/stable-diffusion-webui
1
Fork 0
mirror of https://github.com/AUTOMATIC1111/stable-diffusion-webui.git synced 2026-02-02 13:51:40 -08:00
Code Issues Projects Releases Packages Wiki Activity

fix more bugs. clean up more.

Browse source
This commit is contained in:
Sj-Si 2024-03-15 14:31:58 -04:00
parent f490498396
commit 08da356a2f
7 changed files with 217 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

2
html/extra-networks-dirs-view-button.html
View file

@ -1,5 +1,5 @@
<button
class='lg secondary gradio-button custom-button {extra_class}'
onclick='extraNetworksSearchButton(event, "{tabname_full}")'>
onclick='extraNetworkDirsOnClick(event, "{tabname_full}")'>
{path}
</button>

242
javascript/extraNetworks.js
View file

@ -42,6 +42,15 @@ function waitForElement(selector) {
});
}
function waitForInitialUiOptionsLoaded() {
return new Promise(resolve => {
(function _wait_for_bool() {
if (initialUiOptionsLoaded) return resolve();
setTimeout(_wait_for_bool, 100);
})();
});
}
function setupProxyListener(target, pre_handler, post_handler) {
/** Sets up a listener for variable changes. */
var proxy = new Proxy(target, {
@ -85,41 +94,32 @@ function toggleCss(key, css, enable) {
}
function extraNetworksRefreshTab(tabname_full) {
// Reapply controls since they don't change on refresh.
let btn_tree_view = gradioApp().querySelector(`#${tabname_full}_extra_tree_view`);
let div_tree_list = gradioApp().getElementById(`${tabname_full}_tree_list_scroll_area`);
if ("tree" === opts.extra_networks_tree_view_style.toLowerCase()) {
// Reapply controls since they don't change on refresh.
let btn_tree_view = gradioApp().querySelector(`#${tabname_full}_extra_tree_view`);
let div_tree_list = gradioApp().getElementById(`${tabname_full}_tree_list_scroll_area`);
if (btn_tree_view.classList.contains("extra-network-control--enabled")) {
div_tree_list.classList.toggle("hidden", false); // unhide
} else {
div_tree_list.classList.toggle("hidden", true); // hide
if (btn_tree_view.classList.contains("extra-network-control--enabled")) {
div_tree_list.classList.toggle("hidden", false); // unhide
} else {
div_tree_list.classList.toggle("hidden", true); // hide
}
}
// Don't do anything else if clusterizers isnt initialized.
// If clusterizer isnt initialized for tab, just return.
if (!(tabname_full in clusterizers)) {
return;
}
for (_tabname_full of Object.keys(clusterizers)) {
if (_tabname_full === tabname_full) {
// Set the selected tab as active since it is now visible on page.
clusterizers[_tabname_full].tree_list.enable();
clusterizers[_tabname_full].cards_list.enable();
} else {
// Deactivate all other tabs since they are no longer visible.
clusterizers[_tabname_full].tree_list.disable();
clusterizers[_tabname_full].cards_list.disable();
}
}
extraNetworksEnableClusterizer(tabname_full);
// Force check update of data.
for (var elem of gradioApp().querySelectorAll('.extra-networks-script-data')) {
for (var elem of gradioApp().querySelectorAll(".extra-network-script-data")) {
extra_networks_proxy_listener[`${elem.dataset.tabnameFull}_${elem.dataset.proxyName}`] = elem;
}
// Rebuild to both update the data and to refresh the sizes of rows.
clusterizers[tabname_full].tree_list.rebuild();
clusterizers[tabname_full].cards_list.rebuild();
extraNetworksRebuildClusterizers(tabname_full);
}
function setupExtraNetworksForTab(tabname) {
@ -142,7 +142,8 @@ function setupExtraNetworksForTab(tabname) {
tabnav.insertBefore(controlsDiv, null);
var this_tab = gradioApp().querySelector(`#${tabname}_extra_tabs`);
this_tab.querySelectorAll(`:scope > [id^="${tabname}_"]`).forEach(function(elem) {
this_tab.querySelectorAll(`:scope > .tabitem[id^="${tabname}_"]`).forEach(function(elem) {
console.log("SETTING UP TAB:", elem.id);
let tabname_full = elem.id;
let txt_search;
@ -151,7 +152,7 @@ function setupExtraNetworksForTab(tabname) {
console.error(`applyFilter: ${tabname_full} not in clusterizers:`);
return;
}
// Only touch cards_list. tree_list remains static.
// We only want to sort/filter cards lists
clusterizers[tabname_full].cards_list.applyFilter(txt_search.value);
};
extraNetworksApplyFilter[tabname_full] = applyFilter;
@ -161,7 +162,7 @@ function setupExtraNetworksForTab(tabname) {
console.error(`applySort: ${tabname_full} not in clusterizers:`);
return;
}
// Only touch cards_list. tree_list remains static.
// We only want to sort/filter cards lists
clusterizers[tabname_full].cards_list.applyFilter(txt_search.value); // filter also sorts
};
extraNetworksApplySort[tabname_full] = applySort;
@ -175,13 +176,19 @@ function setupExtraNetworksForTab(tabname) {
*/
// Wait for all required elements before setting up the tab.
waitForElement(`#${tabname_full}_extra_search`)
.then((el) => {
txt_search = el;
waitForInitialUiOptionsLoaded()
.then(() => {
waitForElement(`#${tabname_full}_extra_search`)
.then((el) => { txt_search = el; return; });
})
.then(() => {
waitForElement(`#${tabname_full}_tree_list_scroll_area > #${tabname_full}_tree_list_content_area`)
.then(() => { return; });
if ("tree" === opts.extra_networks_tree_view_style.toLowerCase()) {
waitForElement(`#${tabname_full}_tree_list_scroll_area > #${tabname_full}_tree_list_content_area`)
.then(() => { return; });
} else {
waitForElement(`#${tabname_full}_dirs`)
.then(() => { return; });
}
})
.then(() => {
waitForElement(`#${tabname_full}_cards_list_scroll_area > #${tabname_full}_cards_list_content_area`)
@ -190,16 +197,19 @@ function setupExtraNetworksForTab(tabname) {
.then(() => {
// Now that we have our elements in DOM, we create the clusterize lists.
clusterizers[tabname_full] = {
tree_list: new ExtraNetworksClusterizeTreeList({
scroll_id: `${tabname_full}_tree_list_scroll_area`,
content_id: `${tabname_full}_tree_list_content_area`,
}),
cards_list: new ExtraNetworksClusterizeCardsList({
scroll_id: `${tabname_full}_cards_list_scroll_area`,
content_id: `${tabname_full}_cards_list_content_area`,
}),
};
if ("tree" === opts.extra_networks_tree_view_style.toLowerCase()) {
clusterizers[tabname_full].tree_list = new ExtraNetworksClusterizeTreeList({
scroll_id: `${tabname_full}_tree_list_scroll_area`,
content_id: `${tabname_full}_tree_list_content_area`,
});
}
// Debounce search text input. This way we only search after user is done typing.
let typing_timer;
let done_typing_interval_ms = 250;
@ -271,22 +281,21 @@ function extraNetworksTabSelected(tabname, id, showPrompt, showNegativePrompt, t
extraNetworksShowControlsForPage(tabname, tabname_full);
for (_tabname_full of Object.keys(clusterizers)) {
if (_tabname_full === tabname_full) {
// Set the selected tab as active since it is now visible on page.
clusterizers[_tabname_full].tree_list.enable();
clusterizers[_tabname_full].cards_list.enable();
} else {
// Deactivate all other tabs since they are no longer visible.
clusterizers[_tabname_full].tree_list.disable();
clusterizers[_tabname_full].cards_list.disable();
for (const k of Object.keys(clusterizers[_tabname_full])) {
if (_tabname_full === tabname_full) {
// Set the selected tab as active since it is now visible on page.
clusterizers[_tabname_full][k].enable();
} else {
// Deactivate all other tabs since they are no longer visible.
clusterizers[_tabname_full][k].disable();
}
}
}
if (!document.body.contains(clusterizers[tabname_full].tree_list.scroll_elem)) {
clusterizers[tabname_full].tree_list.rebuild();
}
if (!document.body.contains(clusterizers[tabname_full].cards_list.scroll_elem)) {
clusterizers[tabname_full].cards_list.rebuild();
for (const v of Object.values(clusterizers[tabname_full])) {
if (!document.body.contains(v.scroll_elem)) {
v.rebuild();
}
}
}
@ -300,15 +309,59 @@ function applyExtraNetworkSort(tabname_full) {
function setupExtraNetworksData() {
// Manually force read the json data.
for (var elem of gradioApp().querySelectorAll('.extra-networks-script-data')) {
for (var elem of gradioApp().querySelectorAll(".extra-network-script-data")) {
extra_networks_proxy_listener[`${elem.dataset.tabnameFull}_${elem.dataset.proxyName}`] = elem;
}
}
function setupExtraNetworks() {
setupExtraNetworksForTab('txt2img');
setupExtraNetworksForTab('img2img');
function extraNetworksUpdateClusterizersRows(tabname_full) {
if (tabname_full !== undefined && tabname_full in clusterizers) {
for (const v of Object.values(clusterizers[tabname_full])) {
v.updateRows();
}
return;
}
// iterate over tabnames
for (const [_tabname_full, tab_clusterizers] of Object.entries(clusterizers)) {
// iterate over clusterizers in tab
for (const v of Object.values(tab_clusterizers)) {
v.updateRows();
}
}
}
function extraNetworksEnableClusterizer(tabname_full) {
// iterate over tabnames
for (const [_tabname_full, tab_clusterizers] of Object.entries(clusterizers)) {
// iterate over clusterizers in tab
for (const v of Object.values(tab_clusterizers)) {
if (_tabname_full === tabname_full) {
// Set the selected tab as active since it is now visible on page.
v.enable();
} else {
// Deactivate all other tabs since they are no longer visible.
v.disable();
}
}
}
}
function extraNetworksRebuildClusterizers(tabname_full) {
// iterate over tabnames
for (const [_tabname_full, tab_clusterizers] of Object.entries(clusterizers)) {
// iterate over clusterizers in tab
for (const v of Object.values(tab_clusterizers)) {
// If `tabname_full` isn't passed in, then rebuild all.
// If passed `tabname_full` is this tab, then rebuild.
// All other cases, we do not rebuild the tab.
if (tabname_full === undefined || _tabname_full === tabname_full) {
v.rebuild();
}
}
}
}
function extraNetworksSetupEventHandlers() {
// Handle window resizes. Delay of 500ms after resize before firing an event
// as a way of "debouncing" resizes.
var resize_timer;
@ -316,21 +369,64 @@ function setupExtraNetworks() {
clearTimeout(resize_timer);
resize_timer = setTimeout(function() {
// Update rows for each list.
for (_tabname_full of Object.keys(clusterizers)) {
clusterizers[_tabname_full].tree_list.updateRows();
clusterizers[_tabname_full].cards_list.updateRows();
}
extraNetworksUpdateClusterizersRows();
}, 500); // ms
});
// Handle resizeHandle resizes. Only fires on mouseup after resizing.
window.addEventListener("resizeHandleResized", (e) => {
for (_tabname_full of Object.keys(clusterizers)) {
// Update rows for each list.
clusterizers[_tabname_full].tree_list.updateRows();
clusterizers[_tabname_full].cards_list.updateRows();
}
const tabname_full = e.target.closest(".extra-network-pane").id.replace("_pane", "");
// Force update rows after resizing.
extraNetworksUpdateClusterizersRows(tabname_full);
});
window.addEventListener("resizeHandleDblClick", (e) => {
const tabname_full = e.target.closest(".extra-network-pane").id.replace("_pane", "");
// This event is only applied to the currently selected tab if has clusterize list.
if (!(tabname_full in clusterizers)) {
return;
}
let max_width = 0;
const scroll_area = e.target.querySelector(".extra-network-tree");
const content = e.target.querySelector(".extra-network-tree-content");
const style = window.getComputedStyle(content, null);
const content_lpad = parseInt(style.getPropertyValue("padding-left"));
const content_rpad = parseInt(style.getPropertyValue("padding-right"));
content.querySelectorAll(".tree-list-item").forEach((row) => {
// Temporarily set the grid columns to maximize column width
// so we can calculate the full width of the row.
const prev_grid_template_columns = row.style.gridTemplateColumns;
row.style.gridTemplateColumns = "repeat(5, max-content)";
if (row.scrollWidth > max_width) {
max_width = row.scrollWidth;
}
row.style.gridTemplateColumns = prev_grid_template_columns;
});
if (max_width <= 0) {
return;
}
// Add the container's padding to the result.
max_width += content_lpad + content_rpad;
// Add the scrollbar's width to the result. Will add 0 if scrollbar isnt present.
max_width += scroll_area.offsetWidth - scroll_area.clientWidth;
// Add the resize handle's padding to the result and default to minLeftColWidth if necessary.
max_width = Math.max(max_width + e.detail.pad, e.detail.minLeftColWidth);
e.detail.setLeftColGridTemplate(e.target, max_width);
extraNetworksUpdateClusterizersRows(tabname_full);
});
}
function setupExtraNetworks() {
setupExtraNetworksForTab('txt2img');
setupExtraNetworksForTab('img2img');
extraNetworksSetupEventHandlers();
}
function tryToRemoveExtraNetworkFromPrompt(textarea, text, isNeg) {
@ -475,7 +571,7 @@ function extraNetworksTreeProcessDirectoryClick(event, btn, tabname_full) {
function _updateSearch(_search_text) {
// Update search input with select button's path.
var search_input_elem = gradioApp().querySelector("#" + tabname_full + "_extra_search");
var search_input_elem = gradioApp().querySelector(`#${tabname_full}_extra_search`);
search_input_elem.value = _search_text;
updateInput(search_input_elem);
applyExtraNetworkFilter(tabname_full);
@ -490,7 +586,7 @@ function extraNetworksTreeProcessDirectoryClick(event, btn, tabname_full) {
if ("selected" in btn.dataset) {
// If folder is selected, deselect button.
delete btn.dataset.selected;
_expandOrCollapse(ul, btn);
_expandOrCollapse(btn);
_updateSearch("");
} else {
// If folder is not selected, select it.
@ -520,6 +616,14 @@ function extraNetworksTreeOnClick(event, tabname_full) {
event.stopPropagation();
}
function extraNetworkDirsOnClick(event, tabname_full) {
// Update search input with select button's path.
var search_input_elem = gradioApp().querySelector(`#${tabname_full}_extra_search`);
search_input_elem.value = event.target.textContent.trim();
updateInput(search_input_elem);
applyExtraNetworkFilter(tabname_full);
}
function extraNetworksControlSearchClearOnClick(event, tabname_full) {
/** Clears the search <input> text. */
let clear_btn = event.target.closest(".extra-network-control--search-clear");
@ -585,11 +689,13 @@ function extraNetworksControlTreeViewOnClick(event, tabname_full) {
button.classList.toggle("extra-network-control--enabled");
var show = !button.classList.contains("extra-network-control--enabled");
gradioApp().getElementById(`${tabname_full}_tree_list_scroll_area`).classList.toggle("hidden", show);
if ("tree" === opts.extra_networks_tree_view_style.toLowerCase()) {
gradioApp().getElementById(`${tabname_full}_tree_list_scroll_area`).classList.toggle("hidden", show);
} else {
gradioApp().getElementById(`${tabname_full}_dirs`).classList.toggle("hidden", show);
}
// The pane sizes have changed. We need to recalc the sizes for our clusterizers.
clusterizers[tabname_full].tree_list.updateRows();
clusterizers[tabname_full].cards_list.updateRows();
extraNetworksUpdateClusterizersRows(tabname_full);
}
function extraNetworksControlRefreshOnClick(event, tabname_full) {
@ -605,6 +711,7 @@ function extraNetworksControlRefreshOnClick(event, tabname_full) {
* @param tabname_full The full active tabname.
* i.e. txt2img_lora, img2img_checkpoints, etc.
*/
initialUiOptionsLoaded = false;
var btn_refresh_internal = gradioApp().getElementById(`${tabname_full}_extra_refresh_internal`);
btn_refresh_internal.dispatchEvent(new Event("click"));
}
@ -809,4 +916,7 @@ window.addEventListener("keydown", function(event) {
}
});
var initialUiOptionsLoaded = false;
onUiLoaded(setupExtraNetworks);
onOptionsChanged(function() { initialUiOptionsLoaded = true; });

1
javascript/extraNetworksClusterizeList.js
View file

@ -98,7 +98,6 @@ class ExtraNetworksClusterize {
callbacks: {},
}
) {
console.log(`scroll_id: ${scroll_id}, content_id: ${content_id}`);
if (scroll_id === undefined) {
console.error("scroll_id is undefined!");
}

14
javascript/resizeHandle.js
View file

@ -18,7 +18,7 @@
let parents = [];
function setLeftColGridTemplate(el, width) {
el.style.gridTemplateColumns = `${width}px 16px 1fr`;
el.style.gridTemplateColumns = `${width}px ${PAD}px 1fr`;
}
function displayResizeHandle(parent) {
@ -58,6 +58,18 @@
evt.stopPropagation();
parent.style.gridTemplateColumns = parent.style.originalGridTemplateColumns;
// Fire custom event to modify left column width externally.
parent.dispatchEvent(
new CustomEvent("resizeHandleDblClick", {
bubbles: true,
detail: {
setLeftColGridTemplate: setLeftColGridTemplate,
pad: PAD,
minLeftColWidth: parent.minLeftColWidth,
},
}),
);
}
const leftCol = parent.firstElementChild;

1
modules/shared_options.py
View file

@ -259,6 +259,7 @@ options_templates.update(options_section(('extra_networks', "Extra Networks", "s
"extra_networks_card_order_field": OptionInfo("Path", "Default order field for Extra Networks cards", gr.Dropdown, {"choices": ['Path', 'Name', 'Date Created', 'Date Modified']}).needs_reload_ui(),
"extra_networks_card_order": OptionInfo("Ascending", "Default order for Extra Networks cards", gr.Dropdown, {"choices": ['Ascending', 'Descending']}).needs_reload_ui(),
"extra_networks_tree_view_style": OptionInfo("Dirs", "Extra Networks directory view style", gr.Radio, {"choices": ["Tree", "Dirs"]}).needs_reload_ui(),
"extra_networks_tree_view_show_files": OptionInfo(True, "Show files in tree view.").info("Disabling this option will remove file entries from the tree view and only show directories.").needs_reload_ui(),
"extra_networks_tree_view_default_enabled": OptionInfo(True, "Show the Extra Networks directory view by default").needs_reload_ui(),
"extra_networks_tree_view_default_width": OptionInfo(180, "Default width for the Extra Networks directory tree view", gr.Number).needs_reload_ui(),
"extra_networks_add_text_separator": OptionInfo(" ", "Extra networks separator").info("extra text to add before <...> when adding extra network to prompt"),

25
modules/ui_extra_networks.py
View file

@ -45,6 +45,7 @@ def build_row(
btn_edit_item_tpl: str,
btn_metadata_tpl: str,
tree_row_tpl: str,
dir_is_empty: bool = False,
parent_id: Optional[int] = None,
data_depth: Optional[int] = None,
data_path: Optional[str] = None,
@ -62,6 +63,9 @@ def build_row(
action_list_item_visual_trailing = ""
action_list_item_action_trailing = ""
if dir_is_empty:
action_list_item_action_leading = "<i class='tree-list-item-action-chevron' style='visibility: hidden'></i>"
if btn_type == "file":
action_list_item_visual_leading = "🗎"
# Action buttons
@ -137,6 +141,17 @@ def build_tree(
if div_id in res:
raise KeyError("div_id already in res:", div_id)
dir_is_empty = True
for _v in v.values():
if shared.opts.extra_networks_tree_view_show_files:
dir_is_empty = False
break
elif not isinstance(_v, (ExtraNetworksItem,)):
dir_is_empty = False
break
else:
dir_is_empty = True
res[div_id] = build_row(
div_id=div_id,
parent_id=parent_id,
@ -146,6 +161,7 @@ def build_tree(
data_depth=depth,
data_path=k,
btn_type="dir",
dir_is_empty=dir_is_empty,
btn_copy_path_tpl=btn_copy_path_tpl,
btn_edit_item_tpl=btn_edit_item_tpl,
btn_metadata_tpl=btn_metadata_tpl,
@ -168,6 +184,10 @@ def build_tree(
div_id = last_div_id
else:
# file
if not shared.opts.extra_networks_tree_view_show_files:
# Don't add file if showing files is disabled in options.
continue
if div_id in res:
raise KeyError("div_id already in res:", div_id)
@ -261,7 +281,6 @@ def get_tree(paths: Union[str, list[str]], items: dict[str, ExtraNetworksItem])
def register_page(page):
"""registers extra networks page for the UI; recommend doing it in on_before_ui() callback for extensions"""
extra_pages.append(page)
allowed_dirs.clear()
allowed_dirs.update(set(sum([x.allowed_directories_for_previews() for x in extra_pages], [])))
@ -535,7 +554,7 @@ class ExtraNetworksPage:
tree_row_tpl=self.tree_row_tpl,
)
res = base64.b64encode(gzip.compress(json.dumps(res).encode("utf-8"))).decode("utf-8")
return f'<div class="extra-networks-script-data" data-tabname-full={tabname}_{self.extra_networks_tabname} data-proxy-name=tree_list data-json={res} hidden></div>'
return f'<div class="extra-network-script-data" data-tabname-full={tabname}_{self.extra_networks_tabname} data-proxy-name=tree_list data-json={res} hidden></div>'
# FIXME
def create_dirs_view_html(self, tabname: str) -> str:
@ -598,7 +617,7 @@ class ExtraNetworksPage:
res[i] = self.create_item_html(tabname, item, self.card_tpl, div_id=i)
res = base64.b64encode(gzip.compress(json.dumps(res).encode("utf-8"))).decode("utf-8")
return f'<div class="extra-networks-script-data" data-tabname-full={tabname}_{self.extra_networks_tabname} data-proxy-name=cards_list data-json={res} hidden></div>'
return f'<div class="extra-network-script-data" data-tabname-full={tabname}_{self.extra_networks_tabname} data-proxy-name=cards_list data-json={res} hidden></div>'
def create_html(self, tabname, *, empty=False):
"""Generates an HTML string for the current pane.

8
style.css
View file

@ -1209,7 +1209,7 @@ body.resizing .resize-handle {
.clusterize-scroll::-webkit-scrollbar {
background-color: transparent;
width: 16px;
width: var(--text-lg);
}
.clusterize-scroll::-webkit-scrollbar-track {
@ -1219,8 +1219,8 @@ body.resizing .resize-handle {
.clusterize-scroll::-webkit-scrollbar-thumb {
background-color: var(--border-color-primary);
border-radius: 16px;
border: 4px solid var(--background-fill-primary);
border-radius: var(--radius-xl);
border: calc(var(--button-border-width) * 4) solid var(--background-fill-primary);
}
.clusterize-scroll::-webkit-scrollbar-button {
@ -1495,7 +1495,7 @@ body.resizing .resize-handle {
transition: background 33.333ms linear;
grid-template-rows: min-content;
grid-template-areas: "leading-action leading-visual label trailing-visual trailing-action";
grid-template-columns: min-content min-content minmax(calc(var(--body-text-size) * 4), auto) min-content min-content;
grid-template-columns: min-content min-content minmax(calc(var(--body-text-size) * 1), auto) min-content min-content;
grid-gap: var(--spacing-sm);
place-items: center stretch;
text-align: center;