Mirror/stable-diffusion-webui
1
0
Fork 0
mirror of https://github.com/AUTOMATIC1111/stable-diffusion-webui.git synced 2024-06-07 21:20:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Switch to using api calls to retrieve data.

Browse Source
This commit is contained in:
Sj-Si 2024-03-29 12:21:02 -04:00
parent 8bde522f9e
commit 5877993739
8 changed files with 635 additions and 517 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
html/extra-networks-card.html
View File

@ -1,6 +1,6 @@
<div class="card" style="{style}" onclick="{card_clicked}" data-name="{name}" data-div-id={div_id} {sort_keys}>
<div class="card" style="{style}" onclick="{onclick}" {data_attributes} {sort_keys}>
{background_image}
<div class="button-row">{copy_path_button}{metadata_button}{edit_button}</div>
{button_row}
<div class="actions">
<div class="additional">{search_terms}</div>
<span class="name">{name}</span>

2
html/extra-networks-edit-item-button.html
View File

@ -1,4 +1,4 @@
<div class="edit-button card-button"
title="Edit metadata"
onclick="extraNetworksEditUserMetadata(event, '{tabname}', '{extra_networks_tabname}')">
onclick="extraNetworksEditItemOnClick(event, '{tabname}_{extra_networks_tabname}', '{name}')">
</div>

2
html/extra-networks-metadata-button.html
View File

@ -1,4 +1,4 @@
<div class="metadata-button card-button"
title="Show internal metadata"
onclick="extraNetworksRequestMetadata(event, '{extra_networks_tabname}')">
onclick="extraNetworksMetadataButtonOnClick(event, '{extra_networks_tabname}'), '{name}'">
</div>

2
html/extra-networks-pane.html
View File

@ -163,7 +163,5 @@
</div>
</div>
</div>
{tree_data_div}
{cards_data_div}
</div>
</div>

167
javascript/extraNetworks.js
View File

@ -51,6 +51,15 @@ const isElementLogError = x => {
return false;
};
const isFunction = x => typeof x === "function";
const isFunctionLogError = x => {
if (isFunction(x)) {
return true;
}
console.error("expected function type, got:", typeof x);
return false;
}
const getElementByIdLogError = selector => {
let elem = gradioApp().getElementById(selector);
isElementLogError(elem);
@ -207,7 +216,18 @@ function extraNetworksRefreshTab(tabname_full) {
div_tree.classList.toggle("hidden", !("selected" in btn_tree_view.dataset));
waitForKeyInObject({k: tabname_full, obj: clusterizers})
.then(() => extraNetworkClusterizersOnTabLoad(tabname_full));
.then(() => {
// We want to reload all tabs when refresh is clicked, but we only want to
// enable the tab on which the refresh button was clicked.
for (const _tabname_full of Object.keys(clusterizers)) {
let selected = _tabname_full === tabname_full;
extraNetworkClusterizersLoadTab({
tabname_full:_tabname_full,
selected: selected,
fetch_data: true
});
}
});
}
function extraNetworksRegisterPromptForTab(tabname, id) {
@ -224,6 +244,7 @@ function extraNetworksRegisterPromptForTab(tabname, id) {
function extraNetworksSetupTabContent(tabname, pane, controls_div) {
const tabname_full = pane.id;
const extra_networks_tabname = tabname_full.replace(`${tabname}_`, "");
let controls;
Promise.all([
@ -240,20 +261,31 @@ function extraNetworksSetupTabContent(tabname, pane, controls_div) {
// Now that we have our elements in DOM, we create the clusterize lists.
clusterizers[tabname_full] = {
tree_list: new ExtraNetworksClusterizeTreeList({
data_id: `${tabname_full}_tree_list_data`,
tabname: tabname,
extra_networks_tabname: extra_networks_tabname,
scroll_id: `${tabname_full}_tree_list_scroll_area`,
content_id: `${tabname_full}_tree_list_content_area`,
data_request_callback: extraNetworksRequestListData,
}),
cards_list: new ExtraNetworksClusterizeCardsList({
data_id: `${tabname_full}_cards_list_data`,
tabname: tabname,
extra_networks_tabname: extra_networks_tabname,
scroll_id: `${tabname_full}_cards_list_scroll_area`,
content_id: `${tabname_full}_cards_list_content_area`,
data_request_callback: extraNetworksRequestListData,
}),
};
if (pane.style.display != "none") {
extraNetworksShowControlsForPage(tabname, tabname_full);
}
(async() => {
await extraNetworkClusterizersLoadTab({
tabname_full: tabname_full,
selected: false,
fetch_data: true
});
})();
});
}
@ -321,7 +353,13 @@ function extraNetworksTabSelected(tabname, id, showPrompt, showNegativePrompt, t
extraNetworksShowControlsForPage(tabname, tabname_full);
waitForKeyInObject({k: tabname_full, obj: clusterizers})
.then(() => extraNetworkClusterizersOnTabLoad(tabname_full));
.then(() => {
extraNetworkClusterizersLoadTab({
tabname_full: tabname_full,
selected: true,
fetch_data: false,
});
});
}
function extraNetworksApplyFilter(tabname_full) {
@ -338,6 +376,7 @@ function extraNetworksApplyFilter(tabname_full) {
// We only want to filter/sort the cards list.
clusterizers[tabname_full].cards_list.applyFilter(txt_search.value.toLowerCase());
clusterizers[tabname_full].cards_list.update();
// If the search input has changed since selecting a button to populate it
// then we want to disable the button that previously populated the search input.
@ -364,21 +403,42 @@ function extraNetworksClusterizersEnable(tabname_full) {
}
}
function extraNetworkClusterizersOnTabLoad(tabname_full) { /** promise */
return new Promise(resolve => {
// Enables a tab's clusterizer, updates its data, and rebuilds it.
function extraNetworkClusterizersLoadTab({
tabname_full = "",
selected = false,
fetch_data = false,
}={}) {
/** Loads clusterize data for a tab.
*
* Args:
* tabname_full [str]: The clusterize tab to load. Does not need to be the active
* tab however if it isn't the active tab then `selected` should be set to
* `false` to prevent oddities caused by the tab not being visible in the page.
* selected [bool]: Whether the tab is selected. This controls whether the
* clusterize list will be enabled which affects its operations.
* fetch_data [bool]: Whether to fetch new data for the clusterize list.
*/
return new Promise((resolve, reject) => {
if (!(tabname_full in clusterizers)) {
return resolve();
}
(async() => {
// Enable then load the selected tab's clusterize lists.
extraNetworksClusterizersEnable(tabname_full);
if (selected) {
extraNetworksClusterizersEnable(tabname_full);
}
for (const v of Object.values(clusterizers[tabname_full])) {
await v.load();
if (fetch_data) {
await v.setup();
} else {
await v.load();
}
}
})().then(() => {
return resolve();
}).catch(error => {
console.error("Error loading tab:", error);
return reject(error);
});
});
}
@ -514,13 +574,17 @@ function updatePromptArea(text, textArea, isNeg) {
updateInput(textArea);
}
function cardClicked(tabname, textToAdd, textToAddNegative, allowNegativePrompt) {
if (textToAddNegative.length > 0) {
updatePromptArea(textToAdd, gradioApp().querySelector(`#${tabname}_prompt > label > textarea`));
updatePromptArea(textToAddNegative, gradioApp().querySelector(`#${tabname}_neg_prompt > label > textarea`), true);
function extraNetworksCardOnClick(event, tabname) {
const elem = event.currentTarget;
const prompt_elem = gradioApp().querySelector(`#${tabname}_prompt > label > textarea`);
const neg_prompt_elem = gradioApp().querySelector(`#${tabname}_neg_prompt > label > textarea`);
if ("negPrompt" in elem.dataset){
updatePromptArea(elem.dataset.prompt, prompt_elem);
updatePromptArea(elem.dataset.negPrompt, neg_prompt_elem);
} else if ("allowNeg" in elem.dataset) {
updatePromptArea(elem.dataset.prompt, activePromptTextarea[tabname]);
} else {
var textarea = allowNegativePrompt ? activePromptTextarea[tabname] : gradioApp().querySelector(`#${tabname}_prompt > label > textarea`);
updatePromptArea(textToAdd, textarea);
updatePromptArea(elem.dataset.prompt, prompt_elem);
}
}
@ -745,6 +809,15 @@ function extraNetworksControlRefreshOnClick(event, tabname_full) {
*/
// reset states
initialUiOptionsLoaded.state = false;
// We want to reset all clusterizers on refresh click so that the viewing area
// shows that it is loading new data.
for (const _tabname_full of Object.keys(clusterizers)) {
for (const v of Object.values(clusterizers[_tabname_full])) {
v.reset();
}
}
// Fire an event for this button click.
gradioApp().getElementById(`${tabname_full}_extra_refresh_internal`).dispatchEvent(new Event("click"));
}
@ -858,6 +931,31 @@ function extraNetworksShowMetadata(text) {
return;
}
function requestGetPromise(url, data) {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
let args = Object.keys(data).map(k => {
return encodeURIComponent(k) + "=" + encodeURIComponent(data[k]);
}).join("&");
xhr.open("GET", url + "?" + args, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
try {
resolve(xhr.responseText);
} catch (error) {
reject(error);
}
} else {
reject({status: this.status, statusText: xhr.statusText});
}
}
};
xhr.send(JSON.stringify(data));
});
}
function requestGet(url, data, handler, errorHandler) {
var xhr = new XMLHttpRequest();
var args = Object.keys(data).map(function(k) {
@ -889,44 +987,57 @@ function extraNetworksCopyPathToClipboard(event, path) {
event.stopPropagation();
}
function extraNetworksRequestMetadata(event, extraPage) {
async function extraNetworksRequestListData(tabname, extra_networks_tabname, class_name) {
return await requestGetPromise(
"./sd_extra_networks/get-list-data",
{
tabname: tabname,
extra_networks_tabname: extra_networks_tabname,
list_type: class_name,
},
);
}
function extraNetworksRequestMetadata(extra_networks_tabname, card_name) {
var showError = function() {
extraNetworksShowMetadata("there was an error getting metadata");
};
var cardName = event.target.parentElement.parentElement.getAttribute("data-name");
requestGet("./sd_extra_networks/metadata", {page: extraPage, item: cardName}, function(data) {
requestGet("./sd_extra_networks/metadata", {page: extra_networks_tabname, item: card_name}, function(data) {
if (data && data.metadata) {
extraNetworksShowMetadata(data.metadata);
} else {
showError();
}
}, showError);
}
function extraNetworksMetadataButtonOnClick(event, extra_networks_tabname, card_name) {
extraNetworksRequestMetadata(extra_networks_tabname, card_name);
event.stopPropagation();
}
function extraNetworksEditUserMetadata(event, tabname, extraPage, cardName) {
var id = tabname + '_' + extraPage + '_edit_user_metadata';
var editor = extraPageUserMetadataEditors[id];
function extraNetworksEditUserMetadata(tabname_full, card_name) {
const id = `${tabname_full}_edit_user_metadata`;
let editor = extraPageUserMetadataEditors[id];
if (!editor) {
editor = {};
editor.page = gradioApp().getElementById(id);
editor.nameTextarea = gradioApp().querySelector("#" + id + "_name" + ' textarea');
editor.button = gradioApp().querySelector("#" + id + "_button");
editor.nameTextarea = gradioApp().querySelector(`#${id}_name textarea`);
editor.button = gradioApp().querySelector(`#${id}_button`);
extraPageUserMetadataEditors[id] = editor;
}
var cardName = event.target.parentElement.parentElement.getAttribute("data-name");
editor.nameTextarea.value = cardName;
editor.nameTextarea.value = card_name;
updateInput(editor.nameTextarea);
editor.button.click();
popup(editor.page);
}
function extraNetworksEditItemOnClick(event, tabname_full, card_name) {
extraNetworksEditUserMetadata(tabname_full, card_name);
event.stopPropagation();
}

605
javascript/extraNetworksClusterizeList.js
View File

@ -93,7 +93,7 @@ async function decompress(base64string) {
writer.write(bytes);
writer.close();
const arrayBuffer = await new Response(ds.readable).arrayBuffer();
return new TextDecoder().decode(arrayBuffer);
return await JSON.parse(new TextDecoder().decode(arrayBuffer));
} catch (error) {
throw new InvalidCompressedJsonDataError(error);
}
@ -123,9 +123,11 @@ class ExtraNetworksClusterize {
/** Base class for a clusterize list. Cannot be used directly. */
constructor(
{
data_id,
tabname,
extra_networks_tabname,
scroll_id,
content_id,
data_request_callback,
rows_in_block = 10,
blocks_in_cluster = 4,
show_no_data_row = true,
@ -138,7 +140,10 @@ class ExtraNetworksClusterize {
}
) {
// Do not continue if any of the required parameters are invalid.
if (!isStringLogError(data_id)) {
if (!isStringLogError(tabname)) {
return;
}
if (!isStringLogError(extra_networks_tabname)) {
return;
}
if (!isStringLogError(scroll_id)) {
@ -147,10 +152,15 @@ class ExtraNetworksClusterize {
if (!isStringLogError(content_id)) {
return;
}
if (!isFunctionLogError(data_request_callback)) {
return;
}
this.data_id = data_id;
this.tabname = tabname;
this.extra_networks_tabname = extra_networks_tabname;
this.scroll_id = scroll_id;
this.content_id = content_id;
this.data_request_callback = data_request_callback;
this.rows_in_block = rows_in_block;
this.blocks_in_cluster = blocks_in_cluster;
this.show_no_data_row = show_no_data_row;
@ -158,14 +168,13 @@ class ExtraNetworksClusterize {
this.clusterize = null;
this.data_elem = null;
this.scroll_elem = null;
this.content_elem = null;
this.element_observer = null;
this.resize_observer = null;
this.resize_observer_timer = null;
this.element_observer = null;
this.data_update_timer = null;
// Used to control logic. Many functions immediately return when disabled.
this.enabled = false;
@ -176,7 +185,7 @@ class ExtraNetworksClusterize {
this.no_data_text = "No results.";
this.no_data_class = "clusterize-no-data";
this.n_rows = 1;
this.n_rows = this.rows_in_block;
this.n_cols = 1;
this.data_obj = {};
@ -184,72 +193,214 @@ class ExtraNetworksClusterize {
this.sort_fn = this.sortByDivId;
this.sort_reverse = false;
// Setup our event handlers only after our elements exist in DOM.
Promise.all([
waitForElement(`#${this.data_id}`).then((elem) => this.data_elem = elem),
waitForElement(`#${this.scroll_id}`).then((elem) => this.scroll_elem = elem),
waitForElement(`#${this.content_id}`).then((elem) => this.content_elem = elem),
]).then(() => {
this.setupElementObservers();
this.setupResizeHandlers();
});
}
enable(enabled) {
/** Enables or disabled this instance. */
// All values other than `true` for `enabled` result in this.enabled=false.
this.enabled = !(enabled !== true);
reset() {
/** Destroy clusterize instance and set all instance variables to defaults. */
this.destroy();
this.teardownElementObservers();
this.teardownResizeObservers();
this.clusterize = null;
this.scroll_elem = null;
this.content_elem = null;
this.enabled = false;
this.encoded_str = "";
this.n_rows = this.rows_in_block;
this.n_cols = 1;
this.data_obj = {};
this.data_obj_keys_sorted = [];
this.sort_fn = this.sortByDivId;
this.sort_reverse = false;
}
load() { /** promise */
/** Loads this instance into the view.
*
* Calling this function should be all that is needed in order to fully update
* and display the clusterize list.
*/
async setup() {
return new Promise(resolve => {
waitForElement(`#${this.data_id}`)
.then((elem) => this.data_elem = elem)
.then(() => this.parseJson(this.data_elem.dataset.json))
.then(() => {
// Setup our event handlers only after our elements exist in DOM.
Promise.all([
waitForElement(`#${this.scroll_id}`).then((elem) => this.scroll_elem = elem),
waitForElement(`#${this.content_id}`).then((elem) => this.content_elem = elem),
]).then(() => {
this.setupElementObservers();
this.setupResizeObservers();
return this.fetchData();
}).then(encoded_str => {
if (isNullOrUndefined(encoded_str)) {
// no new data to load. break from chain.
return resolve();
});
}
return this.parseJson(encoded_str);
}).then(json => {
if (isNullOrUndefined(json)) {
return resolve();
}
this.clear();
this.updateJson(json);
}).then(() => {
this.sortData();
}).then(() => {
// since calculateDims manually adds an element from our data_obj,
// we don't need clusterize initialzied to calculate dims.
this.calculateDims();
this.applyFilter();
this.rebuild(this.getFilteredRows());
return resolve();
}).catch(error => {
console.error("setup:: error in promise:", error);
return resolve();
});
});
}
parseJson(encoded_str) { /** promise */
async load() {
return new Promise(resolve => {
if (isNullOrUndefined(this.clusterize)) {
// This occurs whenever we click on a tab before initialization and setup
// have fully completed for this instance.
return resolve(this.setup());
}
if (this.calculateDims()) {
// Since dimensions updated, we need to apply the filter and rebuild.
this.applyFilter();
this.rebuild(this.getFilteredRows());
} else {
this.refresh(true);
}
return resolve();
});
}
async fetchData() {
let encoded_str = await this.data_request_callback(
this.tabname,
this.extra_networks_tabname,
this.constructor.name,
);
if (this.encoded_str === encoded_str) {
// no change to the data since last call. ignore.
return null;
}
this.encoded_str = encoded_str;
return this.encoded_str;
}
async parseJson(encoded_str) { /** promise */
/** Parses a base64 encoded and gzipped JSON string and sets up a clusterize instance. */
return new Promise((resolve, reject) => {
// Skip parsing if the string hasnt actually updated.
if (this.encoded_str === encoded_str) {
return resolve();
}
Promise.resolve(encoded_str)
.then(v => decompress(v))
.then(v => JSON.parse(v))
.then(v => {
if (!isNullOrUndefined(this.clusterize)) {
this.data_obj = {};
this.data_obj_keys_sorted = [];
this.clear();
this.content_elem.innerHTML = "<div class='clusterize-no-data'>Loading...</div>";
}
return v;
})
.then(v => this.updateJson(v))
.then(() => {
this.encoded_str = encoded_str;
this.rebuild();
this.applyFilter();
return resolve();
})
.then(v => resolve(v))
.catch(error => {
return reject(error);
});
});
}
calculateDims() {
let res = false;
// Cannot calculate dims if not enabled since our elements won't be visible.
if (!this.enabled) {
return res;
}
// Cannot do anything if we have no data.
if (this.data_obj_keys_sorted.length <= 0) {
return res;
}
// Repair before anything else so we can actually get dimensions.
this.repair();
// Add an element to the container manually so we can calculate dims.
const child = htmlStringToElement(this.data_obj[this.data_obj_keys_sorted[0]].html);
this.content_elem.prepend(child);
let n_cols = calcColsPerRow(this.content_elem, child);
let n_rows = calcRowsPerCol(this.scroll_elem, child);
n_cols = (isNaN(n_cols) || n_cols <= 0) ? 1 : n_cols;
n_rows = (isNaN(n_rows) || n_rows <= 0) ? 1 : n_rows;
n_rows += 2;
if (n_cols != this.n_cols || n_rows != this.n_rows) {
// Sizes have changed. Update the instance values.
this.n_cols = n_cols;
this.n_rows = n_rows;
this.rows_in_block = this.n_rows;
res = true;
}
// Remove the temporary element from DOM.
child.remove();
return res;
}
sortData() {
/** Sorts the rows using the instance's `sort_fn`.
*
* It is expected that a subclass will override this function to update the
* instance's `sort_fn` then call `super.sortData()` to apply the sorting.
*/
this.sort_fn();
if (this.sort_reverse) {
this.data_obj_keys_sorted = this.data_obj_keys_sorted.reverse();
}
}
applyFilter() {
/** Should be overridden by child class. */
this.sortData();
if (!isNullOrUndefined(this.clusterize)) {
this.update(this.getFilteredRows());
}
//this.rebuild(this.getFilteredRows());
}
getFilteredRows() {
let rows = [];
let active_keys = this.data_obj_keys_sorted.filter(k => this.data_obj[k].active);
for (let i = 0; i < active_keys.length; i += this.n_cols) {
rows.push(
active_keys.slice(i, i + this.n_cols)
.map(k => this.data_obj[k].html)
.join("")
);
}
return rows;
}
rebuild(rows) {
if (!isNullOrUndefined(this.clusterize)) {
this.clusterize.destroy(true);
this.clusterize = null;
}
if (isNullOrUndefined(rows) || !Array.isArray(rows)) {
rows = [];
}
this.clusterize = new Clusterize(
{
rows: rows,
scrollId: this.scroll_id,
contentId: this.content_id,
rows_in_block: this.rows_in_block,
tag: "div",
blocks_in_cluster: this.blocks_in_cluster,
show_no_data_row: this.show_no_data_row,
no_data_text: this.no_data_text,
no_data_class: this.no_data_class,
callbacks: this.callbacks,
}
);
}
enable(enabled) {
/** Enables or disables this instance. */
// All values other than `true` for `enabled` result in this.enabled=false.
this.enabled = !(enabled !== true);
}
updateJson(json) { /** promise */
console.error("Base class method called. Must be overridden by subclass.");
return new Promise(resolve => {
@ -262,43 +413,11 @@ class ExtraNetworksClusterize {
this.data_obj_keys_sorted = Object.keys(this.data_obj).sort((a, b) => INT_COLLATOR.compare(a, b));
}
applySort() {
/** Sorts the rows using the instance's `sort_fn`.
*
* It is expected that a subclass will override this function to update the
* instance's `sort_fn` then call `super.applySort()` to apply the sorting.
*/
this.sort_fn();
if (this.sort_reverse) {
this.data_obj_keys_sorted = this.data_obj_keys_sorted.reverse();
}
}
applyFilter() {
/** Sorts then updates the rows.
*
* Should be overridden by subclass. Base class doesn't apply any filters.
*/
this.applySort();
this.updateRows();
}
getRows(obj) {
/** Returns an array of html strings of all active rows. */
var results = [];
for (const div_id of this.data_obj_keys_sorted) {
if (obj[div_id].active) {
results.push(obj[div_id].html);
}
}
return results;
}
updateDivContent(div_id, content) {
/** Updates an element's html in the dataset.
*
* NOTE: This function only updates the dataset. Calling function must call
* updateRows() to apply these changes to the view. Adding this call to this
* rebuild() to apply these changes to the view. Adding this call to this
* function would be very slow in the case where many divs need their content
* updated at the same time.
*/
@ -317,88 +436,19 @@ class ExtraNetworksClusterize {
return false;
}
updateRows() {
/** Updates the instance using the stored rows in our data object.
*
* Should be called whenever we change order or number of rows.
*/
// If we don't have any entries in the dataset, then just return.
if (this.data_obj_keys_sorted.length === 0 || Object.keys(this.data_obj).length === 0) {
return;
}
this.refresh(true);
// Rebuild with `force=false` so we only rebuild if dimensions change.
this.rebuild(false);
}
getMaxRowWidth() {
console.error("getMaxRowWidth:: Not implemented in base class. Must be overridden.");
return;
}
recalculateDims() {
/** Recalculates the number of rows and columns that can fit within the scroll view.
*
* Returns whether the rows/columns have changed indicating that we need to rebuild.
*/
let rebuild_required = false;
let clear_before_return = false;
if (!this.enabled) {
// Inactive list is not displayed on screen. Would error if trying to resize.
return false;
}
if (Object.keys(this.data_obj).length === 0 || this.data_obj_keys_sorted.length === 0) {
// If there is no data then just skip.
return false;
}
// If no rows exist, we need to add one so we can calculate rows/cols.
// We remove this row before returning.
if (this.rowCount() === 0) { // || this.content_elem.innerHTML === "") {
this.clear();
this.update([this.data_obj[this.data_obj_keys_sorted[0]].html]);
clear_before_return = true;
}
const child = this.content_elem.querySelector(":not(.clusterize-extra-row)");
if (isNullOrUndefined(child)) {
if (clear_before_return) {
this.clear();
return rebuild_required;
}
}
// Calculate the visible rows and colums for the clusterize-content area.
let n_cols = calcColsPerRow(this.content_elem, child);
let n_rows = calcRowsPerCol(this.scroll_elem, child);
n_cols = (isNaN(n_cols) || n_cols <= 0) ? 1 : n_cols;
n_rows = (isNaN(n_rows) || n_rows <= 0) ? 1 : n_rows;
// Add two extra rows to account for partial row visibility on top and bottom
// of the content element view region.
n_rows += 2;
if (n_cols != this.n_cols || n_rows != this.n_rows) {
// Sizes have changed. Update the instance values.
this.n_cols = n_cols;
this.n_rows = n_rows;
this.rows_in_block = this.n_rows;
rebuild_required = true;
}
// If we added a temporary row earlier, remove before returning.
if (clear_before_return) {
this.clear();
}
return rebuild_required;
}
repair() {
/** Fixes element association in DOM. Returns whether a fix was performed. */
if (!this.enabled) {
return false;
}
if (!isElement(this.scroll_elem) || !isElement(this.content_elem)) {
return false;
}
// If association for elements is broken, replace them with instance version.
if (!this.scroll_elem.isConnected || !this.content_elem.isConnected) {
gradioApp().getElementById(this.scroll_id).replaceWith(this.scroll_elem);
@ -415,83 +465,20 @@ class ExtraNetworksClusterize {
return false;
}
rebuild(force) {
/** Rebuilds, updates, or initializes a clusterize instance.
*
* TODO: Possibly rename this function to make its purpose more clear.
*
* Performs one of the following:
* 1. Initializes a new instance if we haven't already.
* 2. Destroys and reinitializes an instance if we pass `force=true` or if
* the size of the elements has changed causing the number of items
* that we can show on screen to be updated.
* 3. Simply updates the clusterize instance's rows with our current data
* if none of the other conditions are met.
*
*/
// Only accept boolean values for `force` parameter. Default to false.
if (force !== true) {
force = false;
}
if (isNullOrUndefined(this.clusterize)) {
this.init();
} else if (this.recalculateDims() || force) {
this.destroy();
this.clusterize = null;
this.init();
} else {
this.update();
}
}
init(rows) {
/** Initializes a Clusterize.js instance. */
if (!isNullOrUndefined(this.clusterize)) {
// If we have already initialized, don't do it again.
return;
}
if (isNullOrUndefined(rows) && isNullOrUndefined(this.data_obj)) {
// data hasnt been loaded yet and we arent provided any. skip.
return;
}
if (isNullOrUndefined(rows)) {
// if we aren't passed any rows, use the instance's data object.
rows = this.data_obj;
} else if (Array.isArray(rows) && !(rows.every(row => isString(row)))) {
console.error("Invalid data type for rows. Expected array[string].");
return;
}
this.clusterize = new Clusterize(
{
rows: this.getRows(rows),
scrollId: this.scroll_id,
contentId: this.content_id,
rows_in_block: this.rows_in_block,
tag: "div",
blocks_in_cluster: this.blocks_in_cluster,
show_no_data_row: this.show_no_data_row,
no_data_text: this.no_data_text,
no_data_class: this.no_data_class,
callbacks: this.callbacks,
}
);
}
onResize(elem_id) {
/** Callback whenever one of our visible elements is resized. */
this.updateRows();
if (!this.enabled) {
return;
}
this.refresh(true);
if (this.calculateDims()) {
this.rebuild(this.getFilteredRows());
}
}
onElementDetached(elem_id) {
/** Callback whenever one of our elements has become detached from the DOM. */
switch (elem_id) {
case this.data_id:
waitForElement(`#${this.data_id}`).then((elem) => this.data_elem = elem);
break;
case this.scroll_id:
this.repair();
break;
@ -503,28 +490,6 @@ class ExtraNetworksClusterize {
}
}
onDataChanged(elem) {
/** Callback whenever the data element is modified. */
return new Promise((resolve) => {
this.parseJson(elem.dataset.json)
.then(() => {
return resolve();
})
.catch(error => {
if (error instanceof InvalidCompressedJsonDataError) {
// on error, roll back to the previous data string.
// this prevents an infinite loop whenever the data string
// is invalid.
console.error("rolling back json data due to invalid data:", error);
elem.dataset.json = this.encoded_str;
} else {
console.error("unhandled error caused by updated json data field:", error);
}
return resolve();
});
});
}
setupElementObservers() {
/** Listens for changes to the data, scroll, and content elements.
*
@ -543,18 +508,6 @@ class ExtraNetworksClusterize {
return;
}
let data_elem = gradioApp().getElementById(this.data_id);
if (data_elem && data_elem !== this.data_elem) {
this.onElementDetached(data_elem.id);
} else if (data_elem && data_elem.dataset.json !== this.encoded_str) {
// we don't want to get blasted with data updates so just wait for
// the data to settle down before updating.
clearTimeout(this.data_update_timer);
this.data_update_timer = setTimeout(() => {
this.onDataChanged(data_elem);
}, JSON_UPDATE_DEBOUNCE_TIME_MS);
}
let scroll_elem = gradioApp().getElementById(this.scroll_id);
if (scroll_elem && scroll_elem !== this.scroll_elem) {
this.onElementDetached(scroll_elem.id);
@ -568,7 +521,15 @@ class ExtraNetworksClusterize {
this.element_observer.observe(gradioApp(), {subtree: true, childList: true, attributes: true});
}
setupResizeHandlers() {
teardownElementObservers() {
if (!isNullOrUndefined(this.element_observer)) {
this.element_observer.takeRecords();
this.element_observer.disconnect();
}
this.element_observer = null;
}
setupResizeObservers() {
/** Handles any updates to the size of both the Scroll and Content elements. */
this.resize_observer = new ResizeObserver((entries) => {
for (const entry of entries) {
@ -584,7 +545,39 @@ class ExtraNetworksClusterize {
this.resize_observer.observe(this.content_elem);
}
teardownResizeObservers() {
if (!isNullOrUndefined(this.resize_observer)) {
this.resize_observer.disconnect();
}
if (!isNullOrUndefined(this.resize_observer_timer)) {
clearTimeout(this.resize_observer_timer);
this.resize_observer_timer = null;
}
this.resize_observer = null;
this.resize_observer_timer = null;
}
/* ==== Clusterize.Js FUNCTION WRAPPERS ==== */
update(rows) {
/** Updates the clusterize rows. */
if (isNullOrUndefined(rows) || !Array.isArray(rows)) {
rows = this.getFilteredRows();
}
this.clusterize.update(rows);
}
clear() {
/** Clears the clusterize list and this instance's data. */
if (!isNullOrUndefined(this.clusterize)) {
this.clusterize.clear();
this.data_obj = {};
this.data_obj_keys_sorted = [];
if (isElement(this.content_elem)) {
this.content_elem.innerHTML = "<div class='clusterize-no-data'>Loading...</div>";
}
}
}
refresh(force) {
/** Refreshes the clusterize instance so that it can recalculate its dims.
* `force` [boolean]: If true, tells clusterize to refresh regardless of whether
@ -606,28 +599,19 @@ class ExtraNetworksClusterize {
return this.clusterize.getRowsAmount();
}
clear() {
/** Removes all rows from the clusterize dataset. */
this.clusterize.clear();
}
update(rows) {
/** Adds rows from a list of element strings. */
if (rows === undefined || rows === null) {
// If not passed, use the default method of getting rows.
rows = this.getRows(this.data_obj);
} else if (!Array.isArray(rows) || !(rows.every(row => typeof row === "string"))) {
console.error("Invalid data type for rows. Expected array[string].");
return;
}
this.clusterize.update(rows);
}
destroy() {
/** Destroys a clusterize instance and removes its rows from the page. */
// Passing `true` prevents clusterize from dumping every row in its dataset
// to the DOM. This kills performance so we never want to do this.
this.clusterize.destroy(true);
if (!isNullOrUndefined(this.clusterize)) {
this.clusterize.destroy(true);
this.clusterize = null;
}
this.data_obj = {};
this.data_obj_keys_sorted = [];
if (isElement(this.content_elem)) {
this.content_elem.innerHTML = "<div class='clusterize-no-data'>Loading...</div>";
}
}
}
@ -640,6 +624,11 @@ class ExtraNetworksClusterizeTreeList extends ExtraNetworksClusterize {
this.selected_div_id = null;
}
reset() {
this.selected_div_id = null;
super.reset();
}
getBoxShadow(depth) {
/** Generates style for a multi-level box shadow for vertical indentation lines.
* This is used to indicate the depth of a directory/file within a directory tree.
@ -757,7 +746,11 @@ class ExtraNetworksClusterizeTreeList extends ExtraNetworksClusterize {
this.addChildRows(div_id);
}
this.updateDivContent(div_id, elem);
this.updateRows();
if (this.calculateDims()) {
this.rebuild(this.getFilteredRows());
} else {
this.update(this.getFilteredRows());
}
}
_setRowSelectedState(div_id, elem, new_state) {
@ -802,7 +795,8 @@ class ExtraNetworksClusterizeTreeList extends ExtraNetworksClusterize {
this.selected_div_id = div_id;
}
}
this.updateRows();
this.update(this.getFilteredRows());
}
getMaxRowWidth() {
@ -848,12 +842,22 @@ class ExtraNetworksClusterizeCardsList extends ExtraNetworksClusterize {
super(...args);
this.no_data_text = "No files matching filter.";
this.sort_mode_str = "path";
this.sort_dir_str = "ascending";
this.default_sort_mode_str = "path";
this.default_sort_dir_str = "ascending";
this.default_filter_str = "";
this.sort_mode_str = this.default_sort_mode_str;
this.sort_dir_str = this.default_sort_dir_str;
this.filter_str = this.default_filter_str;
}
reset() {
this.sort_mode_str = this.default_sort_mode_str;
this.sort_dir_str = this.default_sort_dir_str;
this.filter_str = this.default_filter_str;
super.reset();
}
updateJson(json) {
/** Processes JSON object and adds each entry to our data object. */
return new Promise(resolve => {
@ -892,20 +896,6 @@ class ExtraNetworksClusterizeCardsList extends ExtraNetworksClusterize {
});
}
getRows(obj) {
/** Returns array of rows as html strings after combining into pseudo-columns.
* Since Clusterize.js doesn't support columns, we need to manually calculate
* the number of columns that can fit in our view space then combine those
* elements into a single entry as a "row" string to pass to Clusterize.js.
*/
let rows = super.getRows(obj);
let res = [];
for (let i = 0; i < rows.length; i += this.n_cols) {
res.push(rows.slice(i, i + this.n_cols).join(""));
}
return res;
}
sortByName() {
this.data_obj_keys_sorted = Object.keys(this.data_obj).sort((a, b) => {
return STR_COLLATOR.compare(
@ -950,7 +940,7 @@ class ExtraNetworksClusterizeCardsList extends ExtraNetworksClusterize {
this.sort_dir_str = sort_dir_str;
}
applySort() {
sortData() {
this.sort_reverse = this.sort_dir_str === "descending";
switch (this.sort_mode_str) {
@ -970,7 +960,7 @@ class ExtraNetworksClusterizeCardsList extends ExtraNetworksClusterize {
this.sort_fn = this.sortByDivId;
break;
}
super.applySort();
super.sortData();
}
applyFilter(filter_str) {
@ -989,8 +979,7 @@ class ExtraNetworksClusterizeCardsList extends ExtraNetworksClusterize {
this.data_obj[k].active = visible;
}
this.applySort();
this.updateRows();
super.applyFilter()
}
getMaxRowWidth() {

356
modules/ui_extra_networks.py
View File

@ -9,6 +9,7 @@ from dataclasses import dataclass
import zlib
import base64
import re
from starlette.responses import JSONResponse, PlainTextResponse
from modules import shared, ui_extra_networks_user_metadata, errors, extra_networks, util
from modules.images import read_info_from_image, save_image_with_geninfo
@ -142,9 +143,47 @@ def fetch_cover_images(page: str = "", item: str = "", index: int = 0):
raise ValueError(f"File cannot be fetched: {item}. Failed to load cover image.") from err
def get_metadata(page: str = "", item: str = ""):
from starlette.responses import JSONResponse
def get_list_data(
tabname: str = "",
extra_networks_tabname: str = "",
list_type: Optional[str] = None,
) -> PlainTextResponse:
"""Responds to API GET requests on /sd_extra_networks/get-list-data with list data.
Args:
tabname: The primary tab name containing the data.
(i.e. txt2img, img2img)
extra_networks_tabname: The selected extra networks tabname.
(i.e. lora, hypernetworks, etc.)
list_type: The type of list data to retrieve. This reflects the
class name used in `extraNetworksClusterizeList.js`.
Returns:
The string data result along with a status code.
A status_code of 501 is returned on error, 200 on success.
"""
res = ""
status_code = 200
page = next(iter([
x for x in extra_pages
if x.extra_networks_tabname == extra_networks_tabname
]), None)
if page is None:
return PlainTextResponse(res, status_code=501)
if list_type == "ExtraNetworksClusterizeTreeList":
res = page.generate_tree_view_data(tabname)
elif list_type == "ExtraNetworksClusterizeCardsList":
res = page.generate_cards_view_data(tabname)
else:
status_code = 501 # HTTP_501_NOT_IMPLEMENTED
return PlainTextResponse(res, status_code=status_code)
def get_metadata(page: str = "", item: str = "") -> JSONResponse:
page = next(iter([x for x in extra_pages if x.name == page]), None)
if page is None:
return JSONResponse({})
@ -158,9 +197,7 @@ def get_metadata(page: str = "", item: str = ""):
return JSONResponse({"metadata": json.dumps(metadata, indent=4, ensure_ascii=False)})
def get_single_card(page: str = "", tabname: str = "", name: str = ""):
from starlette.responses import JSONResponse
def get_single_card(page: str = "", tabname: str = "", name: str = "") -> JSONResponse:
page = next(iter([x for x in extra_pages if x.name == page]), None)
try:
@ -171,16 +208,16 @@ def get_single_card(page: str = "", tabname: str = "", name: str = ""):
item = page.items.get(name)
page.read_user_metadata(item, use_cache=False)
item_html = page.create_item_html(tabname, item, shared.html("extra-networks-card.html"))
item_html = page.create_card_html(tabname=tabname, item=item)
return JSONResponse({"html": item_html})
def add_pages_to_demo(app):
app.add_api_route("/sd_extra_networks/thumb", fetch_file, methods=["GET"])
app.add_api_route("/sd_extra_networks/cover-images", fetch_cover_images, methods=["GET"])
app.add_api_route("/sd_extra_networks/metadata", get_metadata, methods=["GET"])
app.add_api_route("/sd_extra_networks/get-single-card", get_single_card, methods=["GET"])
app.add_api_route("/sd_extra_networks/get-list-data", get_list_data, methods=["GET"])
def quote_js(s):
@ -241,27 +278,21 @@ class ExtraNetworksPage:
def build_tree_html_dict_row(
self,
div_id: int,
tabname: str,
label: str,
btn_type: str,
btn_title: str,
data_attributes: dict = {},
btn_title: Optional[str] = None,
dir_is_empty: bool = False,
metadata: Optional[str] = None,
parent_id: Optional[int] = None,
data_depth: Optional[int] = None,
data_path: Optional[str] = None,
data_hash: Optional[str] = None,
data_prompt: Optional[str] = None,
data_neg_prompt: Optional[str] = None,
data_allow_neg: Optional[str] = None,
item: Optional[dict] = None,
onclick_extra: Optional[str] = None,
) -> str:
if btn_type not in ["file", "dir"]:
raise ValueError("Invalid button type:", btn_type)
label = label.strip()
btn_title = btn_title.strip()
# If not specified, title will just reflect the label
btn_title = btn_title.strip() if btn_title else label
action_list_item_action_leading = "<i class='tree-list-item-action-chevron'></i>"
action_list_item_visual_leading = "🗀"
@ -274,42 +305,21 @@ class ExtraNetworksPage:
if btn_type == "file":
action_list_item_visual_leading = "🗎"
# Action buttons
action_list_item_action_trailing += '<div class="button-row">'
action_list_item_action_trailing += self.btn_copy_path_tpl.format(
**{"filename": data_path}
)
action_list_item_action_trailing += self.btn_edit_item_tpl.format(
**{
"tabname": tabname,
"extra_networks_tabname": self.extra_networks_tabname,
"name": label,
}
)
if metadata:
action_list_item_action_trailing += self.btn_metadata_tpl.format(
**{"extra_networks_tabname": self.extra_networks_tabname, "name": label}
)
action_list_item_action_trailing += "</div>"
if item is not None:
action_list_item_action_trailing += self.get_button_row(tabname, item)
data_attributes = ""
data_attributes += f"data-path={data_path} " if data_path is not None else ""
data_attributes += f"data-hash={data_hash} " if data_hash is not None else ""
data_attributes += f"data-prompt={data_prompt} " if data_prompt else ""
data_attributes += f"data-neg-prompt={data_neg_prompt} " if data_neg_prompt else ""
data_attributes += f"data-allow-neg={data_allow_neg} " if data_allow_neg else ""
data_attributes += (
f"data-tree-entry-type={btn_type} " if btn_type is not None else ""
)
data_attributes += f"data-div-id={div_id} " if div_id is not None else ""
data_attributes += f"data-parent-id={parent_id} " if parent_id is not None else ""
data_attributes += f"data-depth={data_depth} " if data_depth is not None else ""
data_attributes += (
"data-expanded " if parent_id is None else ""
) # inverted to expand root
data_attributes_str = ""
for k, v in data_attributes.items():
if isinstance(v, (bool,)):
# Boolean data attributes only need a key when true.
if v:
data_attributes_str += f"{k} "
elif v not in [None, "", "\'\'", "\"\""]:
data_attributes_str += f"{k}={v} "
res = self.tree_row_tpl.format(
**{
"data_attributes": data_attributes,
"data_attributes": data_attributes_str,
"search_terms": "",
"btn_type": btn_type,
"btn_title": btn_title,
@ -327,7 +337,6 @@ class ExtraNetworksPage:
res = re.sub(" +", " ", res.replace("\n", ""))
return res
def build_tree_html_dict(
self,
tree: dict,
@ -355,15 +364,19 @@ class ExtraNetworksPage:
dir_is_empty = True
res[div_id] = self.build_tree_html_dict_row(
div_id=div_id,
parent_id=parent_id,
tabname=tabname,
label=os.path.basename(k),
data_depth=depth,
data_path=k,
btn_type="dir",
btn_title=k,
dir_is_empty=dir_is_empty,
data_attributes={
"data-div-id": div_id,
"data-parent-id": parent_id,
"data-tree-entry-type": "dir",
"data-depth": depth,
"data-path": k,
"data-expanded": parent_id is None, # Expand root directories
},
)
last_div_id = self.build_tree_html_dict(
tree=v,
@ -386,46 +399,63 @@ class ExtraNetworksPage:
onclick = v.item.get("onclick", None)
if onclick is None:
# Don't quote prompt/neg_prompt since they are stored as js strings already.
onclick_js_tpl = (
"cardClicked('{tabname}', {prompt}, {neg_prompt}, {allow_neg});"
)
onclick = onclick_js_tpl.format(
**{
"tabname": tabname,
"extra_networks_tabname": self.extra_networks_tabname,
"prompt": v.item["prompt"],
"neg_prompt": v.item.get("negative_prompt", "''"),
"allow_neg": str(self.allow_negative_prompt).lower(),
}
)
onclick = html.escape(onclick)
onclick = html.escape(f"extraNetworksCardOnClick(event, '{tabname}');")
res[div_id] = self.build_tree_html_dict_row(
div_id=div_id,
parent_id=parent_id,
tabname=tabname,
label=v.item["name"],
metadata=v.item.get("metadata", None),
data_depth=depth,
data_path=v.item["filename"],
data_hash=v.item["shorthash"],
data_prompt=html.escape(v.item.get("prompt", "''")),
data_neg_prompt=html.escape(v.item.get("negative_prompt", "''")),
data_allow_neg=str(self.allow_negative_prompt).lower(),
onclick_extra=onclick,
label=html.escape(v.item.get("name", "").strip()),
btn_type="file",
btn_title=v.item["name"],
data_attributes={
"data-div-id": div_id,
"data-parent-id": parent_id,
"data-tree-entry-type": "file",
"data-name": v.item.get("name", "").strip(),
"data-depth": depth,
"data-path": v.item.get("filename", "").strip(),
"data-hash": v.item.get("shorthash", None),
"data-prompt": v.item.get("prompt", "").strip(),
"data-neg-prompt": v.item.get("negative_prompt", "").strip(),
"data-allow-neg": self.allow_negative_prompt,
},
item=v.item,
onclick_extra=onclick,
)
div_id += 1
return div_id
def create_item_html(
def get_button_row(self, tabname: str, item: dict) -> str:
metadata = item.get("metadata", None)
name = item.get("name", "")
filename = item.get("filename", "")
button_row_tpl = '<div class="button-row">{btn_copy_path}{btn_edit_item}{btn_metadata}</div>'
btn_copy_path = self.btn_copy_path_tpl.format(filename=filename)
btn_edit_item = self.btn_edit_item_tpl.format(
tabname=tabname,
extra_networks_tabname=self.extra_networks_tabname,
name=name,
)
btn_metadata = ""
if metadata:
btn_metadata = self.btn_metadata_tpl.format(
extra_networks_tabname=self.extra_networks_tabname,
name=name,
)
return button_row_tpl.format(
btn_copy_path=btn_copy_path,
btn_edit_item=btn_edit_item,
btn_metadata=btn_metadata,
)
def create_card_html(
self,
tabname: str,
item: dict,
template: Optional[str] = None,
div_id: Optional[int] = None,
) -> Union[str, dict]:
) -> str:
"""Generates HTML for a single ExtraNetworks Item.
Args:
@ -434,47 +464,21 @@ class ExtraNetworksPage:
template: Optional template string to use.
Returns:
If a template is passed: HTML string generated for this item.
Can be empty if the item is not meant to be shown.
If no template is passed: A dictionary containing the generated item's attributes.
HTML string generated for this item. Can be empty if the item is not meant to be shown.
"""
preview = item.get("preview", None)
style_height = f"height: {shared.opts.extra_networks_card_height}px;" if shared.opts.extra_networks_card_height else ''
style_width = f"width: {shared.opts.extra_networks_card_width}px;" if shared.opts.extra_networks_card_width else ''
style_font_size = f"font-size: {shared.opts.extra_networks_card_text_scale*100}%;"
card_style = style_height + style_width + style_font_size
style = style_height + style_width + style_font_size
background_image = f'<img src="{html.escape(preview)}" class="preview" loading="lazy">' if preview else ''
onclick = item.get("onclick", None)
if onclick is None:
# Don't quote prompt/neg_prompt since they are stored as js strings already.
onclick_js_tpl = "cardClicked('{tabname}', {prompt}, {neg_prompt}, {allow_neg});"
onclick = onclick_js_tpl.format(
**{
"tabname": tabname,
"extra_networks_tabname": self.extra_networks_tabname,
"prompt": item["prompt"],
"neg_prompt": item.get("negative_prompt", "''"),
"allow_neg": str(self.allow_negative_prompt).lower(),
}
)
onclick = html.escape(onclick)
onclick = html.escape(f"extraNetworksCardOnClick(event, '{tabname}');")
btn_copy_path = self.btn_copy_path_tpl.format(**{"filename": item["filename"]})
btn_metadata = ""
metadata = item.get("metadata")
if metadata:
btn_metadata = self.btn_metadata_tpl.format(
**{
"extra_networks_tabname": self.extra_networks_tabname,
}
)
btn_edit_item = self.btn_edit_item_tpl.format(
**{
"tabname": tabname,
"extra_networks_tabname": self.extra_networks_tabname,
}
)
button_row = self.get_button_row(tabname, item)
local_path = ""
filename = item.get("filename", "")
@ -502,9 +506,9 @@ class ExtraNetworksPage:
).strip()
search_terms_html = ""
search_term_template = "<span class='hidden {class}'>{search_term}</span>"
search_terms_tpl = "<span class='hidden {class}'>{search_term}</span>"
for search_term in item.get("search_terms", []):
search_terms_html += search_term_template.format(
search_terms_html += search_terms_tpl.format(
**{
"class": f"search_terms{' search_only' if search_only else ''}",
"search_term": search_term,
@ -515,33 +519,56 @@ class ExtraNetworksPage:
if not shared.opts.extra_networks_card_description_is_html:
description = html.escape(description)
# Some items here might not be used depending on HTML template used.
args = {
"div_id": "" if div_id is None else div_id,
"background_image": background_image,
"card_clicked": onclick,
"copy_path_button": btn_copy_path,
"description": description,
"edit_button": btn_edit_item,
"local_preview": quote_js(item["local_preview"]),
"metadata_button": btn_metadata,
"name": html.escape(item["name"]),
"save_card_preview": html.escape(f"return saveCardPreview(event, '{tabname}', '{item['local_preview']}');"),
"search_only": " search_only" if search_only else "",
"search_terms": search_terms_html,
"sort_keys": sort_keys,
"style": card_style,
"tabname": tabname,
"extra_networks_tabname": self.extra_networks_tabname,
"data_prompt": item.get("prompt", "''"),
"data_neg_prompt": item.get("negative_prompt", "''"),
"data_allow_neg": str(self.allow_negative_prompt).lower(),
data_attributes = {
"data-div-id": div_id if div_id else "",
"data-name": item.get("name", "").strip(),
"data-path": item.get("filename", "").strip(),
"data-hash": item.get("shorthash", None),
"data-prompt": item.get("prompt", "").strip(),
"data-neg-prompt": item.get("negative_prompt", "").strip(),
"data-allow-neg": self.allow_negative_prompt,
}
if template:
return template.format(**args)
else:
return args
data_attributes_str = ""
for k, v in data_attributes.items():
if isinstance(v, (bool,)):
# Boolean data attributes only need a key when true.
if v:
data_attributes_str += f"{k} "
elif v not in [None, "", "\'\'", "\"\""]:
data_attributes_str += f"{k}={v} "
return self.card_tpl.format(
style=style,
onclick=onclick,
data_attributes=data_attributes_str,
sort_keys=sort_keys,
background_image=background_image,
button_row=button_row,
search_terms=search_terms_html,
name=html.escape(item["name"].strip()),
description=description,
)
def generate_tree_view_data(self, tabname: str) -> str:
"""Generates tree view HTML as a base64 encoded zlib compressed json string."""
res = {}
if self.tree:
self.build_tree_html_dict(
tree=self.tree,
res=res,
depth=0,
div_id=0,
parent_id=None,
tabname=tabname,
)
return base64.b64encode(
zlib.compress(
json.dumps(res, separators=(",", ":"), ensure_ascii=True).encode("utf-8")
)
).decode("utf-8")
def generate_tree_view_data_div(self, tabname: str) -> str:
"""Generates HTML for displaying folders in a tree view.
@ -552,23 +579,17 @@ class ExtraNetworksPage:
Returns:
HTML string generated for this tree view.
"""
res = {}
if not self.tree:
return res
self.build_tree_html_dict(
tree=self.tree,
res=res,
depth=0,
div_id=0,
parent_id=None,
tabname=tabname,
tpl = """<div id="{tabname_full}_tree_list_data"
class="extra-network-script-data"
data-tabname-full={tabname_full}
data-proxy-name=tree_list
data-json={data}
hidden></div>"""
return tpl.format(
tabname_full=f"{tabname}_{self.extra_networks_tabname}",
data=self.generate_tree_view_data(tabname),
)
res = base64.b64encode(zlib.compress(json.dumps(res, separators=(",", ":")).encode("utf-8"))).decode("utf-8")
return f'<div id="{tabname}_{self.extra_networks_tabname}_tree_list_data" class="extra-network-script-data" data-tabname-full={tabname}_{self.extra_networks_tabname} data-proxy-name=tree_list data-json={res} hidden></div>'
def create_dirs_view_html(self, tabname: str) -> str:
"""Generates HTML for displaying folders."""
@ -592,7 +613,18 @@ class ExtraNetworksPage:
])
return dirs_html
def generate_cards_view_data_div(self, tabname: str, *, none_message) -> str:
def generate_cards_view_data(self, tabname: str) -> str:
res = {}
for i, item in enumerate(self.items.values()):
res[i] = self.create_card_html(tabname=tabname, item=item, div_id=i)
return base64.b64encode(
zlib.compress(
json.dumps(res, separators=(",", ":"), ensure_ascii=True).encode("utf-8")
)
).decode("utf-8")
def generate_cards_view_data_div(self, tabname: str, none_message: Optional[str]) -> str:
"""Generates HTML for the network Card View section for a tab.
This HTML goes into the `extra-networks-pane.html` <div> with
@ -605,11 +637,8 @@ class ExtraNetworksPage:
Returns:
HTML formatted string.
"""
res = {}
for i, item in enumerate(self.items.values()):
res[i] = self.create_item_html(tabname, item, self.card_tpl, div_id=i)
res = self.generate_cards_view_data(tabname)
res = base64.b64encode(zlib.compress(json.dumps(res, separators=(",", ":")).encode("utf-8"))).decode("utf-8")
return f'<div id="{tabname}_{self.extra_networks_tabname}_cards_list_data" 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):
@ -645,9 +674,6 @@ class ExtraNetworksPage:
tree = get_tree([os.path.abspath(x) for x in roots], items=tree_items)
self.tree = tree
# Generate the data payloads for tree and cards views
tree_data_div = self.generate_tree_view_data_div(tabname)
cards_data_div = self.generate_cards_view_data_div(tabname, none_message="Loading..." if empty else None)
# Generate the html for displaying directory buttons
dirs_html = self.create_dirs_view_html(tabname)
@ -671,8 +697,8 @@ class ExtraNetworksPage:
"tree_view_style": f"flex-basis: {shared.opts.extra_networks_tree_view_default_width}px;",
"cards_view_style": "flex-grow: 1;",
"dirs_html": dirs_html,
"cards_data_div": cards_data_div,
"tree_data_div": tree_data_div,
})
def create_item(self, name, index=None):

14
style.css
View File

@ -1185,12 +1185,15 @@ body.resizing .resize-handle {
.clusterize-scroll {
width: 100%;
height: 100%;
overflow: clip auto;
/* Use scroll instead of auto so that content size doesn't change when there is no content. */
overflow: clip scroll;
}
.clusterize-content {
flex: 1;
outline: 0;
counter-reset: clusterize-counter;
padding: var(--spacing-md);
}
.clusterize-extra-row {
@ -1471,15 +1474,6 @@ body.resizing .resize-handle {
}
}
.extra-network-tree-content {
padding: var(--spacing-md);
flex: 1;
}
.extra-network-cards-content {
padding: var(--spacing-md);
}
/* BUTTON ELEMENTS */
/* <button> */
.tree-list-item {