\ No newline at end of file
diff --git a/html/extra-networks-metadata-button.html b/html/extra-networks-metadata-button.html
index 4ef013bc0..856444fa1 100644
--- a/html/extra-networks-metadata-button.html
+++ b/html/extra-networks-metadata-button.html
@@ -1,4 +1,4 @@
\ No newline at end of file
diff --git a/html/extra-networks-pane.html b/html/extra-networks-pane.html
index 17bc7e608..c69281964 100644
--- a/html/extra-networks-pane.html
+++ b/html/extra-networks-pane.html
@@ -163,7 +163,5 @@
- {tree_data_div}
- {cards_data_div}
\ No newline at end of file
diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index 5ab263796..27a456e64 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -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();
}
diff --git a/javascript/extraNetworksClusterizeList.js b/javascript/extraNetworksClusterizeList.js
index a6136f2ed..7ae3a2aaf 100644
--- a/javascript/extraNetworksClusterizeList.js
+++ b/javascript/extraNetworksClusterizeList.js
@@ -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 = "
Loading...
";
- }
- 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 = "
Loading...
";
+ }
+ }
+ }
+
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 = "
Loading...
";
+ }
}
}
@@ -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() {
diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index d0221c072..f87e620fc 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -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 = ""
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 += '