TBNilles/ComfyUI-Model-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactored Model Tab

Browse Source 
- Created ModelData class.
This commit is contained in:
Christian Bastian
2024-03-28 22:18:34 -04:00
parent 957af3bd7e
commit 57348a3c62
1 changed files with 160 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

286
web/model-manager.js
View File

@@ -629,6 +629,22 @@ class ImageSelect {
const DROPDOWN_DIRECTORY_SELECTION_CLASS = "search-dropdown-selected"; const DROPDOWN_DIRECTORY_SELECTION_CLASS = "search-dropdown-selected";
class ModelData {
/** @type {string} */
searchSeparator = "/";
/** @type {string} */
systemSeparator = null;
/** @type {Object} */
models = {};
/** @type {DirectoryItem[]} */
directories = [];
constructor() {}
}
class DirectoryDropdown { class DirectoryDropdown {
/** @type {HTMLDivElement} */ /** @type {HTMLDivElement} */
element = null; element = null;
@@ -643,6 +659,9 @@ class DirectoryDropdown {
/** @type {() => void} */ /** @type {() => void} */
#updateDropdown = null; #updateDropdown = null;
/** @type {DirectoryItem[]} */
#directories = null; // READ ONLY REFERENCE
/** @type {() => void} */ /** @type {() => void} */
#updateCallback = null; #updateCallback = null;
@@ -650,6 +669,7 @@ class DirectoryDropdown {
#submitCallback = null; #submitCallback = null;
/** /**
* @param {DirectoryItem[]} directories
* @param {HTMLInputElement} input * @param {HTMLInputElement} input
* @param {() => void} updateDropdown * @param {() => void} updateDropdown
* @param {() => void} [updateCallback= () => {}] * @param {() => void} [updateCallback= () => {}]
@@ -657,7 +677,7 @@ class DirectoryDropdown {
* @param {String} [searchSeparator="/"] * @param {String} [searchSeparator="/"]
* @param {Boolean} [showDirectoriesOnly=false] * @param {Boolean} [showDirectoriesOnly=false]
*/ */
constructor(input, updateDropdown, updateCallback = () => {}, submitCallback = () => {}, searchSeparator = "/", showDirectoriesOnly = false) { constructor(directories, input, updateDropdown, updateCallback = () => {}, submitCallback = () => {}, searchSeparator = "/", showDirectoriesOnly = false) {
/** @type {HTMLDivElement} */ /** @type {HTMLDivElement} */
const dropdown = $el("div.search-dropdown", { // TODO: change to `search-directory-dropdown` const dropdown = $el("div.search-dropdown", { // TODO: change to `search-directory-dropdown`
style: { style: {
@@ -665,6 +685,7 @@ class DirectoryDropdown {
}, },
}); });
this.element = dropdown; this.element = dropdown;
this.#directories = directories;
this.#input = input; this.#input = input;
this.#updateDropdown = updateDropdown; this.#updateDropdown = updateDropdown;
this.#updateCallback = updateCallback; this.#updateCallback = updateCallback;
@@ -832,11 +853,11 @@ class DirectoryDropdown {
} }
/** /**
* @param {DirectoryItem[]} directories
* @param {string} searchSeparator * @param {string} searchSeparator
* @param {string} [modelType = ""] * @param {string} [modelType = ""]
*/ */
update(directories, searchSeparator, modelType = "") { update(searchSeparator, modelType = "") {
const directories = this.#directories;
const dropdown = this.element; const dropdown = this.element;
const input = this.#input; const input = this.#input;
const updateDropdown = this.#updateDropdown; const updateDropdown = this.#updateDropdown;
@@ -960,7 +981,7 @@ class DirectoryDropdown {
const selection = e.target; const selection = e.target;
DirectoryDropdown.selectionToInput(input, selection, searchSeparator); DirectoryDropdown.selectionToInput(input, selection, searchSeparator);
updateDropdown(); updateDropdown();
updateCallback();e.target updateCallback();
submitCallback(); submitCallback();
}; };
const innerHtml = options.map((text) => { const innerHtml = options.map((text) => {
@@ -1322,7 +1343,7 @@ class ModelGrid {
/** /**
* @param {HTMLDivElement} modelGrid * @param {HTMLDivElement} modelGrid
* @param {Object} models * @param {ModelData} modelData
* @param {HTMLSelectElement} modelSelect * @param {HTMLSelectElement} modelSelect
* @param {Object.<{value: string}>} previousModelType * @param {Object.<{value: string}>} previousModelType
* @param {Object} settings * @param {Object} settings
@@ -1330,11 +1351,10 @@ class ModelGrid {
* @param {boolean} reverseSort * @param {boolean} reverseSort
* @param {Array} previousModelFilters * @param {Array} previousModelFilters
* @param {HTMLInputElement} modelFilter * @param {HTMLInputElement} modelFilter
* @param {String} searchSeparator
* @param {String} systemSeparator
* @param {(searchPath: string) => Promise<void>} modelInfoCallback * @param {(searchPath: string) => Promise<void>} modelInfoCallback
*/ */
static update(modelGrid, models, modelSelect, previousModelType, settings, sortBy, reverseSort, previousModelFilters, modelFilter, searchSeparator, systemSeparator, modelInfoCallback) { static update(modelGrid, modelData, modelSelect, previousModelType, settings, sortBy, reverseSort, previousModelFilters, modelFilter, modelInfoCallback) {
const models = modelData.models;
let modelType = modelSelect.value; let modelType = modelSelect.value;
if (models[modelType] === undefined) { if (models[modelType] === undefined) {
modelType = "checkpoints"; // TODO: magic value modelType = "checkpoints"; // TODO: magic value
@@ -1372,8 +1392,8 @@ class ModelGrid {
modelList, modelList,
modelType, modelType,
settings, settings,
searchSeparator, modelData.searchSeparator,
systemSeparator, modelData.systemSeparator,
modelInfoCallback, modelInfoCallback,
); );
modelGrid.append.apply(modelGrid, modelGridModels); modelGrid.append.apply(modelGrid, modelGridModels);
@@ -1393,29 +1413,28 @@ class ModelInfoView {
previewSelect = null; previewSelect = null;
/** /**
* @param {DirectoryItem[]} modelDirectories - Should be unique for every radio group. * @param {ModelData} modelData
* @param {() => Promise<void>} updateModels * @param {() => Promise<void>} updateModels
* @param {string} searchSeparator
*/ */
constructor(modelDirectories, updateModels, searchSeparator) { constructor(modelData, updateModels) {
const moveDestinationInput = $el("input.search-text-area", { const moveDestinationInput = $el("input.search-text-area", {
name: "move directory", name: "move directory",
autocomplete: "off", autocomplete: "off",
placeholder: searchSeparator, placeholder: modelData.searchSeparator,
}); });
let searchDropdown = null; let searchDropdown = null;
searchDropdown = new DirectoryDropdown( searchDropdown = new DirectoryDropdown(
modelData.directories,
moveDestinationInput, moveDestinationInput,
() => { () => {
searchDropdown.update( searchDropdown.update(
modelDirectories, modelData.searchSeparator,
searchSeparator,
); );
}, },
() => {}, () => {},
() => {}, () => {},
searchSeparator, modelData.searchSeparator,
true, true,
); );
@@ -1542,7 +1561,7 @@ class ModelInfoView {
const [oldFilePath, oldFileName] = SearchPath.split(oldFile); const [oldFilePath, oldFileName] = SearchPath.split(oldFile);
const newFile = ( const newFile = (
moveDestinationInput.value + moveDestinationInput.value +
searchSeparator + modelData.searchSeparator +
oldFileName oldFileName
); );
moved = await request( moved = await request(
@@ -2104,12 +2123,11 @@ class DownloadTab {
/** /**
* @param {Object} info * @param {Object} info
* @param {String[]} modelTypes * @param {String[]} modelTypes
* @param {DirectoryItem[]} modelDirectories * @param {ModelData} modelData
* @param {String} searchSeparator
* @param {int} id * @param {int} id
* @returns {HTMLDivElement} * @returns {HTMLDivElement}
*/ */
#modelInfo(info, modelTypes, modelDirectories, searchSeparator, id) { #modelInfo(info, modelTypes, modelData, id) {
const downloadPreviewSelect = new ImageSelect( const downloadPreviewSelect = new ImageSelect(
"model-download-info-preview-model" + "-" + id, "model-download-info-preview-model" + "-" + id,
info["images"], info["images"],
@@ -2125,6 +2143,7 @@ class DownloadTab {
return options; return options;
})()); })());
const searchSeparator = modelData.searchSeparator;
const el_saveDirectoryPath = $el("input.search-text-area", { const el_saveDirectoryPath = $el("input.search-text-area", {
type: "text", type: "text",
name: "save directory", name: "save directory",
@@ -2134,12 +2153,12 @@ class DownloadTab {
}); });
let searchDropdown = null; let searchDropdown = null;
searchDropdown = new DirectoryDropdown( searchDropdown = new DirectoryDropdown(
modelData.directories,
el_saveDirectoryPath, el_saveDirectoryPath,
() => { () => {
const modelType = el_modelTypeSelect.value; const modelType = el_modelTypeSelect.value;
if (modelType === "") { return; } if (modelType === "") { return; }
searchDropdown.update( searchDropdown.update(
modelDirectories,
searchSeparator, searchSeparator,
modelType, modelType,
); );
@@ -2259,11 +2278,9 @@ class DownloadTab {
} }
/** /**
* @param {Object} models * @param {ModelData} modelData
* @param {DirectoryItem[]} modelDirectories
* @param {string} searchSeparator
*/ */
async search(models, modelDirectories, searchSeparator) { async search(modelData) {
const infosHtml = this.elements.infos; const infosHtml = this.elements.infos;
infosHtml.innerHTML = ""; infosHtml.innerHTML = "";
@@ -2339,7 +2356,7 @@ class DownloadTab {
return []; return [];
})(); })();
const modelTypes = Object.keys(models); const modelTypes = Object.keys(modelData.models);
const modelInfosHtml = modelInfos.filter((modelInfo) => { const modelInfosHtml = modelInfos.filter((modelInfo) => {
const filename = modelInfo["fileName"]; const filename = modelInfo["fileName"];
return MODEL_EXTENSIONS.find((ext) => { return MODEL_EXTENSIONS.find((ext) => {
@@ -2349,8 +2366,7 @@ class DownloadTab {
return this.#modelInfo( return this.#modelInfo(
modelInfo, modelInfo,
modelTypes, modelTypes,
modelDirectories, modelData,
searchSeparator,
id, id,
); );
}); });
@@ -2371,14 +2387,12 @@ class DownloadTab {
} }
/** /**
* @param {Object} models * @param {ModelData} modelData
* @param {DirectoryItem[]} modelDirectories
* @param {() => Promise<void>} updateModels * @param {() => Promise<void>} updateModels
* @param {string} searchSeparator
*/ */
constructor(models, modelDirectories, updateModels, searchSeparator) { constructor(modelData, updateModels) {
this.#updateModels = updateModels; this.#updateModels = updateModels;
const search = async() => this.search(models, modelDirectories, searchSeparator); const search = async() => this.search(modelData);
$el("div.tab-header", { $el("div.tab-header", {
$: (el) => (this.element = el), $: (el) => (this.element = el),
}, [ }, [
@@ -2421,21 +2435,46 @@ class ModelTab {
/** @type {HTMLInputElement} */ modelContentFilter: null, /** @type {HTMLInputElement} */ modelContentFilter: null,
}; };
/** @type {Array} */
previousModelFilters = [];
/** @type {Object.<{value: string}>} */
previousModelType = { value: null };
/** @type {DirectoryDropdown} */ /** @type {DirectoryDropdown} */
directoryDropdown = null; directoryDropdown = null;
/** @type {ModelData} */
#modelData = null;
/** @type {ModelInfoView} */
#modelInfoView = null;
/** @type {@param {() => Promise<void>}} */
#updateModels = null;
/** */
#settingsElements = null;
/** @type {() => void} */
updateModelGrid = () => {};
/** /**
* @param {() => void} updateDirectoryDropdown
* @param {() => void} updatePreviousModelFilter
* @param {() => Promise<void>} updateModelGrid
* @param {() => Promise<void>} updateModels * @param {() => Promise<void>} updateModels
* @param {string} searchSeparator * @param {ModelData} modelData
* @param {ModelInfoView} modelInfoView
* @param {any} settingsElements
*/ */
constructor(updateDirectoryDropdown, updatePreviousModelFilter, updateModelGrid, updateModels, searchSeparator) { constructor(updateModels, modelData, modelInfoView, settingsElements) {
/** @type {HTMLDivElement} */ /** @type {HTMLDivElement} */
const modelGrid = $el("div.comfy-grid"); const modelGrid = $el("div.comfy-grid");
this.elements.modelGrid = modelGrid; this.elements.modelGrid = modelGrid;
this.#updateModels = updateModels;
this.#modelData = modelData;
this.#modelInfoView = modelInfoView;
this.#settingsElements = settingsElements;
const searchInput = $el("input.search-text-area", { const searchInput = $el("input.search-text-area", {
$: (el) => (this.elements.modelContentFilter = el), $: (el) => (this.elements.modelContentFilter = el),
type: "text", type: "text",
@@ -2444,12 +2483,59 @@ class ModelTab {
placeholder: "example: /0/1.5/styles/clothing -.pt", placeholder: "example: /0/1.5/styles/clothing -.pt",
}); });
const updatePreviousModelFilter = () => {
const modelType = this.elements.modelTypeSelect.value;
const value = this.elements.modelContentFilter.value;
this.previousModelFilters[modelType] = value;
};
const updateDirectoryDropdown = () => {
this.directoryDropdown.update(
this.#modelData.searchSeparator,
this.elements.modelTypeSelect.value,
);
updatePreviousModelFilter();
}
/**
* @param {string} searchPath
*/
const showModelInfoView = async(searchPath) => {
this.#modelInfoView.update(
searchPath,
this.#updateModels,
this.#modelData.searchSeparator
).then(() => {
this.#modelInfoView.show();
});
}
const updateModelGrid = () => {
const sortValue = this.elements.modelSortSelect.value;
const reverseSort = sortValue[0] === "-";
const sortBy = reverseSort ? sortValue.substring(1) : sortValue;
ModelGrid.update(
this.elements.modelGrid,
this.#modelData,
this.elements.modelTypeSelect,
this.previousModelType,
this.#settingsElements,
sortBy,
reverseSort,
this.previousModelFilters,
this.elements.modelContentFilter,
showModelInfoView,
);
}
this.updateModelGrid = updateModelGrid;
const searchDropdown = new DirectoryDropdown( const searchDropdown = new DirectoryDropdown(
modelData.directories,
searchInput, searchInput,
updateDirectoryDropdown, updateDirectoryDropdown,
updatePreviousModelFilter, updatePreviousModelFilter,
updateModelGrid, updateModelGrid,
searchSeparator, modelData.searchSeparator,
false, false,
); );
this.directoryDropdown = searchDropdown; this.directoryDropdown = searchDropdown;
@@ -2559,7 +2645,8 @@ class SettingsTab {
*/ */
async reload(updateModels) { async reload(updateModels) {
const data = await request("/model-manager/settings/load"); const data = await request("/model-manager/settings/load");
this.#setSettings(data["settings"], updateModels); const settingsData = data["settings"];
this.#setSettings(settingsData, updateModels);
buttonAlert(this.elements.reloadButton, true); buttonAlert(this.elements.reloadButton, true);
} }
@@ -2591,7 +2678,8 @@ class SettingsTab {
}); });
const success = data["success"]; const success = data["success"];
if (success) { if (success) {
this.#setSettings(data["settings"], true); const settingsData = data["settings"];
this.#setSettings(settingsData, true);
} }
buttonAlert(this.elements.saveButton, success); buttonAlert(this.elements.saveButton, success);
} }
@@ -2773,18 +2861,8 @@ class SidebarButtons {
} }
class ModelManager extends ComfyDialog { class ModelManager extends ComfyDialog {
#data = { /** @type {ModelData} */
/** @type {Object} */ models: {}, #modelData = null;
/** @type {DirectoryItem[]} */ modelDirectories: [],
/** @type {Array} */ previousModelFilters: [],
/** @type {Object.<{value: string}>} */ previousModelType: { value: null },
};
/** @type {string} */
#searchSeparator = "/";
/** @type {string} */
#systemSeparator = null;
/** @type {ModelInfoView} */ /** @type {ModelInfoView} */
#modelInfoView = null; #modelInfoView = null;
@@ -2803,34 +2881,33 @@ class ModelManager extends ComfyDialog {
constructor() { constructor() {
super(); super();
this.#modelData = new ModelData();
const modelInfoView = new ModelInfoView( const modelInfoView = new ModelInfoView(
this.#data.modelDirectories, this.#modelData,
this.#modelTab_updateModels, this.#refreshModels,
this.#searchSeparator,
); );
this.#modelInfoView = modelInfoView; this.#modelInfoView = modelInfoView;
const downloadTab = new DownloadTab( const settingsTab = new SettingsTab(
this.#data.models, this.#refreshModels,
this.#data.modelDirectories,
this.#modelTab_updateModels,
this.#searchSeparator,
); );
this.#downloadTab = DownloadTab; this.#settingsTab = settingsTab;
const modelTab = new ModelTab( const modelTab = new ModelTab(
this.#modelTab_updateDirectoryDropdown, this.#refreshModels,
this.#modelTab_updatePreviousModelFilter, this.#modelData,
this.#modelTab_updateModelGrid, this.#modelInfoView,
this.#modelTab_updateModels, this.#settingsTab.elements.settings, // TODO: decouple settingsData from elements?
this.#searchSeparator,
); );
this.#modelTab = modelTab; this.#modelTab = modelTab;
const settingsTab = new SettingsTab( const downloadTab = new DownloadTab(
this.#modelTab_updateModels, this.#modelData,
this.#refreshModels,
); );
this.#settingsTab = settingsTab; this.#downloadTab = DownloadTab;
const sidebarButtons = new SidebarButtons(this); const sidebarButtons = new SidebarButtons(this);
this.#sidebarButtons = sidebarButtons; this.#sidebarButtons = sidebarButtons;
@@ -2849,7 +2926,7 @@ class ModelManager extends ComfyDialog {
$el("button.icon-button", { $el("button.icon-button", {
textContent: "✖", textContent: "✖",
onclick: () => { onclick: () => {
if (modelInfoView.isVisible()) { // TODO: decouple if (modelInfoView.isVisible()) { // TODO: decouple back and close
this.close(); this.close();
} }
else { else {
@@ -2873,71 +2950,22 @@ class ModelManager extends ComfyDialog {
#init() { #init() {
this.#settingsTab.reload(false); this.#settingsTab.reload(false);
this.#modelTab_updateModels(); this.#refreshModels();
} }
#modelTab_updateModelGrid = () => { #refreshModels = async() => {
const modelTab = this.#modelTab; const modelData = this.#modelData;
const sortValue = modelTab.elements.modelSortSelect.value; modelData.systemSeparator = await request("/model-manager/system-separator");
const reverseSort = sortValue[0] === "-";
const sortBy = reverseSort ? sortValue.substring(1) : sortValue;
ModelGrid.update(
modelTab.elements.modelGrid,
this.#data.models,
modelTab.elements.modelTypeSelect,
this.#data.previousModelType,
this.#settingsTab.elements.settings,
sortBy,
reverseSort,
this.#data.previousModelFilters,
modelTab.elements.modelContentFilter,
this.#searchSeparator,
this.#systemSeparator,
this.#modelTab_showModelInfo,
);
}
#modelTab_updateModels = async() => {
this.#systemSeparator = await request("/model-manager/system-separator");
const newModels = await request("/model-manager/models/list"); const newModels = await request("/model-manager/models/list");
Object.assign(this.#data.models, newModels); // NOTE: do NOT create a new object Object.assign(modelData.models, newModels); // NOTE: do NOT create a new object
const newModelDirectories = await request("/model-manager/models/directory-list"); const newModelDirectories = await request("/model-manager/models/directory-list");
this.#data.modelDirectories.splice(0, Infinity, ...newModelDirectories); // NOTE: do NOT create a new array modelData.directories.splice(0, Infinity, ...newModelDirectories); // NOTE: do NOT create a new array
this.#modelTab_updateModelGrid(); this.#modelTab.updateModelGrid();
}
#modelTab_updatePreviousModelFilter = () => {
const modelType = this.#modelTab.elements.modelTypeSelect.value;
const value = this.#modelTab.elements.modelContentFilter.value;
this.#data.previousModelFilters[modelType] = value;
};
#modelTab_updateDirectoryDropdown = () => {
this.#modelTab.directoryDropdown.update(
this.#data.modelDirectories,
this.#searchSeparator,
this.#modelTab.elements.modelTypeSelect.value,
);
this.#modelTab_updatePreviousModelFilter();
}
/**
* @param {string} searchPath
*/
#modelTab_showModelInfo = async(searchPath) => {
this.#modelInfoView.update(
searchPath,
this.#modelTab_updateModels,
this.#searchSeparator
).then(() => {
this.#modelInfoView.show();
});
} }
} }
/** @type {ModelManager | undefined} */
let instance; let instance;
/** /**