} updateModels
+ * @param {string} searchSeparator
+ */
+ async update(searchPath, updateModels, searchSeparator) {
+ const path = encodeURIComponent(searchPath);
+ const info = await request(`/model-manager/model/info?path=${path}`)
+ .catch((err) => {
+ console.log(err);
+ return null;
+ });
+ if (info === null) {
+ return;
+ }
+ const infoHtml = this.elements.info;
+ infoHtml.innerHTML = "";
+ infoHtml.dataset.path = searchPath;
+ const innerHtml = [];
+ const filename = info["File Name"];
+ if (filename !== undefined && filename !== null && filename !== "") {
+ innerHtml.push(
+ $el("div.row", {
+ style: { margin: "8px 0 16px 0" },
+ }, [
+ $el("h1", {
+ style: { margin: "0" },
+ }, [
+ filename,
+ ]),
+ $el("div", [
+ $el("button.icon-button", {
+ textContent: "✎",
+ onclick: async(e) => {
+ const container = this.elements.info;
+ const oldFile = container.dataset.path;
+ const [oldFilePath, oldFileName] = SearchPath.split(oldFile);
+ const oldName = SearchPath.splitExtension(oldFileName)[0];
+ const newName = window.prompt("New model name:", oldName);
+ let renamed = false;
+ if (newName !== null && newName !== "" && newName != oldName) {
+ const newFile = (
+ oldFilePath +
+ searchSeparator +
+ newName +
+ SearchPath.splitExtension(oldFile)[1]
+ );
+ renamed = await request(
+ `/model-manager/model/move`,
+ {
+ method: "POST",
+ body: JSON.stringify({
+ "oldFile": oldFile,
+ "newFile": newFile,
+ }),
+ }
+ )
+ .then((result) => {
+ const renamed = result["success"];
+ if (renamed)
+ {
+ container.innerHTML = "";
+ this.element.style.display = "none";
+ updateModels();
+ }
+ return renamed;
+ })
+ .catch(err => {
+ console.log(err);
+ return false;
+ });
+ }
+ buttonAlert(e.target, renamed);
+ },
+ }),
+ ]),
+ ]),
+ );
+ }
+
+ const previewSelect = this.previewSelect;
+ const defaultUrl = previewSelect.elements.defaultUrl;
+ if (info["Preview"]) {
+ const imagePath = info["Preview"]["path"];
+ const imageDateModified = info["Preview"]["dateModified"];
+ defaultUrl.dataset.noimage = imageUri(imagePath, imageDateModified);
+ }
+ else {
+ defaultUrl.dataset.noimage = imageUri();
+ }
+ previewSelect.resetModelInfoPreview();
+ const setPreviewButton = this.elements.setPreviewButton;
+ setPreviewButton.style.display = previewSelect.defaultIsChecked() ? "none" : "block";
+
+ innerHtml.push($el("div", [
+ previewSelect.elements.previews,
+ $el("div.row.tab-header", [
+ $el("div.row.tab-header-flex-block", [
+ previewSelect.elements.radioGroup,
+ ]),
+ $el("div.row.tab-header-flex-block", [
+ setPreviewButton,
+ ]),
+ ]),
+ $el("h2", ["Details:"]),
+ $el("div",
+ (() => {
+ const elements = [];
+ for (const [key, value] of Object.entries(info)) {
+ if (value === undefined || value === null) {
+ continue;
+ }
+
+ if (Array.isArray(value)) {
+ if (value.length > 0) {
+ elements.push($el("h2", [key + ":"]));
+
+ let text = "";
+ for (let i = 0; i < value.length; i++) {
+ const v = value[i];
+ const tag = v[0];
+ const count = v[1];
+ text += tag + " (" + count + ") ";
+ if (i !== value.length - 1) {
+ text += ", ";
+ }
+ }
+ text += "
";
+ const div = $el("div");
+ div.innerHTML = text;
+ elements.push(div);
+ }
+ }
+ else {
+ if (key === "Notes") {
+ elements.push($el("h2", [key + ":"]));
+ const noteArea = $el("textarea.comfy-multiline-input", {
+ name: "model notes",
+ value: value,
+ rows: 10,
+ });
+ elements.push(noteArea);
+ elements.push($el("button", {
+ textContent: "Save Notes",
+ onclick: (e) => {
+ const saved = request(
+ "/model-manager/notes/save",
+ {
+ method: "POST",
+ body: JSON.stringify({
+ "path": this.elements.info.dataset.path,
+ "notes": noteArea.value,
+ }),
+ }
+ ).then((result) => {
+ return result["success"];
+ })
+ .catch((err) => {
+ return false;
+ });
+ buttonAlert(e.target, saved);
+ },
+ }));
+ }
+ else if (key === "Description") {
+ if (value !== "") {
+ elements.push($el("h2", [key + ":"]));
+ elements.push($el("p", [value]));
+ }
+ }
+ else if (key === "Preview") {
+ //
+ }
+ else {
+ if (value !== "") {
+ elements.push($el("p", [key + ": " + value]));
+ }
+ }
+ }
+ }
+ return elements;
+ })(),
+ ),
+ ]));
+ infoHtml.append.apply(infoHtml, innerHtml);
+ // TODO: set default value of dropdown and value to model type?
+ }
+}
+
+class Civitai {
+ /**
+ * Get model info from Civitai.
+ *
+ * @param {string} id - Model ID.
+ * @param {string} apiPath - Civitai request subdirectory. "models" for 'model' urls. "model-version" for 'api' urls.
+ *
+ * @returns {Promise} Dictionary containing recieved model info. Returns an empty if fails.
+ */
+ static async requestInfo(id, apiPath) {
+ const url = "https://civitai.com/api/v1/" + apiPath + "/" + id;
+ try {
+ return await request(url);
+ }
+ catch (error) {
+ console.error("Failed to get model info from Civitai!", error);
+ return {};
+ }
+ }
+
+ /**
+ * Extract file information from the given model version infomation.
+ *
+ * @param {Object} modelVersionInfo - Model version infomation.
+ * @param {(string|null)} [type=null] - Optional select by model type.
+ * @param {(string|null)} [fp=null] - Optional select by floating point quantization.
+ * @param {(string|null)} [size=null] - Optional select by sizing.
+ * @param {(string|null)} [format=null] - Optional select by file format.
+ *
+ * @returns {Object} - Extracted list of infomation on each file of the given model version.
+ */
+ static getModelFilesInfo(modelVersionInfo, type = null, fp = null, size = null, format = null) {
+ const files = [];
+ const modelVersionFiles = modelVersionInfo["files"];
+ for (let i = 0; i < modelVersionFiles.length; i++) {
+ const modelVersionFile = modelVersionFiles[i];
+
+ const fileType = modelVersionFile["type"];
+ if (type instanceof String && type != fileType) { continue; }
+
+ const fileMeta = modelVersionFile["metadata"];
+
+ const fileFp = fileMeta["fp"];
+ if (fp instanceof String && fp != fileFp) { continue; }
+
+ const fileSize = fileMeta["size"];
+ if (size instanceof String && size != fileSize) { continue; }
+
+ const fileFormat = fileMeta["format"];
+ if (format instanceof String && format != fileFormat) { continue; }
+
+ files.push({
+ "downloadUrl": modelVersionFile["downloadUrl"],
+ "format": fileFormat,
+ "fp": fileFp,
+ "hashes": modelVersionFile["hashes"],
+ "name": modelVersionFile["name"],
+ "size": fileSize,
+ "sizeKB": modelVersionFile["sizeKB"],
+ "type": fileType,
+ });
+ }
+ return {
+ "files": files,
+ "id": modelVersionInfo["id"],
+ "images": modelVersionInfo["images"].map((image) => {
+ // TODO: do I need to double-check image matches resource?
+ return image["url"];
+ }),
+ "name": modelVersionInfo["name"],
+ };
+ }
+
+ /**
+ *
+ *
+ * @param {string} stringUrl - Model url.
+ *
+ * @returns {Promise} - Download information for the given url.
+ */
+ static async getFilteredInfo(stringUrl) {
+ const url = new URL(stringUrl);
+ if (url.hostname != "civitai.com") { return {}; }
+ if (url.pathname == "/") { return {} }
+ const urlPath = url.pathname;
+ if (urlPath.startsWith("/api")) {
+ const idEnd = urlPath.length - (urlPath.at(-1) == "/" ? 1 : 0);
+ const idStart = urlPath.lastIndexOf("/", idEnd - 1) + 1;
+ const modelVersionId = urlPath.substring(idStart, idEnd);
+ if (parseInt(modelVersionId, 10) == NaN) {
+ return {};
+ }
+ const modelVersionInfo = await Civitai.requestInfo(modelVersionId, "model-versions");
+ if (Object.keys(modelVersionInfo).length == 0) {
+ return {};
+ }
+ const searchParams = url.searchParams;
+ const filesInfo = Civitai.getModelFilesInfo(
+ modelVersionInfo,
+ searchParams.get("type"),
+ searchParams.get("fp"),
+ searchParams.get("size"),
+ searchParams.get("format"),
+ );
+ return {
+ "name": modelVersionInfo["model"]["name"],
+ "type": modelVersionInfo["model"]["type"],
+ "versions": [filesInfo]
+ }
+ }
+ else if (urlPath.startsWith('/models')) {
+ const idStart = urlPath.indexOf("models/") + "models/".length;
+ const idEnd = (() => {
+ const idEnd = urlPath.indexOf("/", idStart);
+ return idEnd === -1 ? urlPath.length : idEnd;
+ })();
+ const modelId = urlPath.substring(idStart, idEnd);
+ if (parseInt(modelId, 10) == NaN) {
+ return {};
+ }
+ const modelInfo = await Civitai.requestInfo(modelId, "models");
+ if (Object.keys(modelInfo).length == 0) {
+ return {};
+ }
+ const modelVersionId = parseInt(url.searchParams.get("modelVersionId"));
+ const modelVersions = [];
+ const modelVersionInfos = modelInfo["modelVersions"];
+ for (let i = 0; i < modelVersionInfos.length; i++) {
+ const versionInfo = modelVersionInfos[i];
+ if (!Number.isNaN(modelVersionId)) {
+ if (modelVersionId != versionInfo["id"]) {continue; }
+ }
+ const filesInfo = Civitai.getModelFilesInfo(versionInfo);
+ modelVersions.push(filesInfo);
+ }
+ return {
+ "name": modelInfo["name"],
+ "type": modelInfo["type"],
+ "versions": modelVersions
+ }
+ }
+ else {
+ return {};
+ }
+ }
+}
+
+class HuggingFace {
+ /**
+ * Get model info from Huggingface.
+ *
+ * @param {string} id - Model ID.
+ * @param {string} apiPath - API path.
+ *
+ * @returns {Promise} Dictionary containing recieved model info. Returns an empty if fails.
+ */
+ static async requestInfo(id, apiPath = "models") {
+ const url = "https://huggingface.co/api/" + apiPath + "/" + id;
+ try {
+ return await request(url);
+ }
+ catch (error) {
+ console.error("Failed to get model info from HuggingFace!", error);
+ return {};
+ }
+ }
+
+ /**
+ *
+ *
+ * @param {string} stringUrl - Model url.
+ *
+ * @returns {Promise}
+ */
+ static async getFilteredInfo(stringUrl) {
+ const url = new URL(stringUrl);
+ if (url.hostname != "huggingface.co") { return {}; }
+ if (url.pathname == "/") { return {} }
+ const urlPath = url.pathname;
+ const i0 = 1;
+ const i1 = urlPath.indexOf("/", i0);
+ if (i1 == -1 || urlPath.length - 1 == i1) {
+ // user-name only
+ return {};
+ }
+ let i2 = urlPath.indexOf("/", i1 + 1);
+ if (i2 == -1) {
+ // model id only
+ i2 = urlPath.length;
+ }
+ const modelId = urlPath.substring(i0, i2);
+ const urlPathEnd = urlPath.substring(i2);
+
+ const isValidBranch = (
+ urlPathEnd.startsWith("/resolve") ||
+ urlPathEnd.startsWith("/blob") ||
+ urlPathEnd.startsWith("/tree")
+ );
+
+ let branch = "/main";
+ let filePath = "";
+ if (isValidBranch) {
+ const i0 = branch.length;
+ const i1 = urlPathEnd.indexOf("/", i0 + 1);
+ if (i1 == -1) {
+ if (i0 != urlPathEnd.length) {
+ // ends with branch
+ branch = urlPathEnd.substring(i0);
+ }
+ }
+ else {
+ branch = urlPathEnd.substring(i0, i1);
+ if (urlPathEnd.length - 1 > i1) {
+ filePath = urlPathEnd.substring(i1);
+ }
+ }
+ }
+
+ const modelInfo = await HuggingFace.requestInfo(modelId);
+ //const modelInfo = await requestInfo(modelId + "/tree" + branch); // this only gives you the files at the given branch path...
+ // oid: SHA-1?, lfs.oid: SHA-256
+
+ const clippedFilePath = filePath.substring(filePath[0] === "/" ? 1 : 0);
+ const modelFiles = modelInfo["siblings"].filter((sib) => {
+ const filename = sib["rfilename"];
+ for (let i = 0; i < MODEL_EXTENSIONS.length; i++) {
+ if (filename.endsWith(MODEL_EXTENSIONS[i])) {
+ return filename.startsWith(clippedFilePath);
+ }
+ }
+ return false;
+ }).map((sib) => {
+ const filename = sib["rfilename"];
+ return filename;
+ });
+ if (modelFiles.length === 0) {
+ return {};
+ }
+
+ const baseDownloadUrl = url.origin + urlPath.substring(0, i2) + "/resolve" + branch;
+
+ const images = modelInfo["siblings"].filter((sib) => {
+ const filename = sib["rfilename"];
+ for (let i = 0; i < IMAGE_EXTENSIONS.length; i++) {
+ if (filename.endsWith(IMAGE_EXTENSIONS[i])) {
+ return filename.startsWith(clippedFilePath);
+ }
+ }
+ return false;
+ }).map((sib) => {
+ return baseDownloadUrl + "/" + sib["rfilename"];
+ });
+
+ return {
+ "baseDownloadUrl": baseDownloadUrl,
+ "modelFiles": modelFiles,
+ "images": images,
+ };
+ }
+}
+
+class DownloadTab {
+ /** @type {HTMLDivElement} */
+ element = null;
+
+ elements = {
+ /** @type {HTMLInputElement} */ url: null,
+ /** @type {HTMLDivElement} */ infos: null,
+ /** @type {HTMLInputElement} */ overwrite: null,
+ };
+
+ /** @type {() => Promise} */
+ #updateModels = () => {};
+
+ /**
+ * Tries to return the related ComfyUI model directory if unambigious.
+ *
+ * @param {string | undefined} modelType - Model type.
+ * @param {string | undefined} [fileType] - File type. Relevant for "Diffusers".
+ *
+ * @returns {(string | null)} Logical base directory name for model type. May be null if the directory is ambiguous or not a model type.
+ */
+ static modelTypeToComfyUiDirectory(modelType, fileType) {
+ if (fileType !== undefined && fileType !== null) {
+ const f = fileType.toLowerCase();
+ if (f == "diffusers") { return "diffusers"; } // TODO: is this correct?
+ }
+
+ if (modelType !== undefined && modelType !== null) {
+ const m = modelType.toLowerCase();
+ // TODO: somehow allow for SERVER to set dir?
+ // TODO: allow user to choose EXISTING folder override/null? (style_models, HuggingFace) (use an object/map instead so settings can be dynamically set)
+ if (m == "aestheticGradient") { return null; }
+ else if (m == "checkpoint" || m == "checkpoints") { return "checkpoints"; }
+ //else if (m == "") { return "clip"; }
+ //else if (m == "") { return "clip_vision"; }
+ else if (m == "controlnet") { return "controlnet"; }
+ //else if (m == "Controlnet") { return "style_models"; } // are these controlnets? (TI-Adapter)
+ //else if (m == "") { return "gligen"; }
+ else if (m == "hypernetwork" || m == "hypernetworks") { return "hypernetworks"; }
+ else if (m == "lora" || m == "loras") { return "loras"; }
+ else if (m == "locon") { return "loras"; }
+ else if (m == "motionmodule") { return null; }
+ else if (m == "other") { return null; }
+ else if (m == "pose") { return null; }
+ else if (m == "textualinversion" || m == "embedding" || m == "embeddings") { return "embeddings"; }
+ //else if (m == "") { return "unet"; }
+ else if (m == "upscaler" || m == "upscale_model" || m == "upscale_models") { return "upscale_models"; }
+ else if (m == "vae") { return "vae"; }
+ else if (m == "wildcard" || m == "wildcards") { return null; }
+ else if (m == "workflow" || m == "workflows") { return null; }
+ }
+ return null;
+ }
+
+ /**
+ * @param {Object} info
+ * @param {String[]} modelTypes
+ * @param {DirectoryItem[]} modelDirectories
+ * @param {String} searchSeparator
+ * @param {int} id
+ * @returns {HTMLDivElement}
+ */
+ #modelInfo(info, modelTypes, modelDirectories, searchSeparator, id) {
+ const downloadPreviewSelect = new ImageSelect(
+ "model-download-info-preview-model" + "-" + id,
+ info["images"],
+ );
+
+ const el_modelTypeSelect = $el("select.model-select-dropdown", {
+ name: "model select dropdown",
+ }, (() => {
+ const options = [$el("option", { value: "" }, ["-- Model Type --"])];
+ modelTypes.forEach((modelType) => {
+ options.push($el("option", { value: modelType }, [modelType]));
+ });
+ return options;
+ })());
+
+ const el_saveDirectoryPath = $el("input.search-text-area", {
+ type: "text",
+ name: "save directory",
+ autocomplete: "off",
+ placeholder: searchSeparator + "0",
+ value: searchSeparator + "0",
+ });
+ let searchDropdown = null;
+ searchDropdown = new DirectoryDropdown(
+ el_saveDirectoryPath,
+ () => {
+ const modelType = el_modelTypeSelect.value;
+ if (modelType === "") { return; }
+ searchDropdown.update(
+ modelDirectories,
+ searchSeparator,
+ modelType,
+ );
+ },
+ () => {},
+ () => {},
+ searchSeparator,
+ true,
+ );
+
+ const el_filename = $el("input.plain-text-area", {
+ type: "text",
+ name: "model save file name",
+ autocomplete: "off",
+ placeholder: (() => {
+ const filename = info["fileName"];
+ // TODO: only remove valid model file extensions
+ const i = filename.lastIndexOf(".");
+ return i === - 1 ? filename : filename.substring(0, i);
+ })(),
+ });
+
+ const filepath = info["downloadFilePath"];
+ const modelInfo = $el("details.download-details", [
+ $el("summary", [filepath + info["fileName"]]),
+ $el("div", {
+ style: { display: "flex", "flex-wrap": "wrap", gap: "16px" },
+ }, [
+ downloadPreviewSelect.elements.previews,
+ $el("div.download-settings", [
+ $el("div", {
+ style: { "margin-top": "8px" }
+ }, [
+ $el("div.row.tab-header-flex-block", [
+ el_modelTypeSelect,
+ ]),
+ $el("div.row.tab-header-flex-block", [
+ el_saveDirectoryPath,
+ searchDropdown.element,
+ ]),
+ $el("div.row.tab-header-flex-block", [
+ $el("button.icon-button", {
+ textContent: "📥︎",
+ onclick: async (e) => {
+ const formData = new FormData();
+ formData.append("download", info["downloadUrl"]);
+ formData.append("path",
+ el_modelTypeSelect.value +
+ searchSeparator + // NOTE: this may add multiple separators (server should handle carefully)
+ el_saveDirectoryPath.value
+ );
+ formData.append("name", (() => {
+ const filename = info["fileName"];
+ const name = el_filename.value;
+ if (name === "") {
+ return filename;
+ }
+ const ext = MODEL_EXTENSIONS.find((ext) => {
+ return filename.endsWith(ext);
+ }) ?? "";
+ return name + ext;
+ })());
+ const image = downloadPreviewSelect.getImage();
+ formData.append("image", image === imageUri() ? "" : image);
+ formData.append("overwrite", this.elements.overwrite.checked);
+ e.target.disabled = true;
+ const [success, resultText] = await request(
+ "/model-manager/model/download",
+ {
+ method: "POST",
+ body: formData,
+ }
+ ).then((data) => {
+ const success = data["success"];
+ if (!success) {
+ console.warn(data["invalid"]);
+ }
+ return [success, success ? "✔" : "📥︎"];
+ }).catch((err) => {
+ return [false, "📥︎"];
+ });
+ if (success) {
+ this.#updateModels();
+ }
+ buttonAlert(e.target, success, "✔", "✖", resultText);
+ e.target.disabled = success;
+ },
+ }),
+ el_filename,
+ ]),
+ downloadPreviewSelect.elements.radioGroup,
+ ]),
+ ]),
+ ]),
+ ]);
+
+ el_modelTypeSelect.selectedIndex = 0; // reset
+ const comfyUIModelType = (
+ DownloadTab.modelTypeToComfyUiDirectory(info["details"]["fileType"]) ??
+ DownloadTab.modelTypeToComfyUiDirectory(info["modelType"]) ??
+ null
+ );
+ if (comfyUIModelType !== undefined && comfyUIModelType !== null) {
+ const modelTypeOptions = el_modelTypeSelect.children;
+ for (let i = 0; i < modelTypeOptions.length; i++) {
+ const option = modelTypeOptions[i];
+ if (option.value === comfyUIModelType) {
+ el_modelTypeSelect.selectedIndex = i;
+ break;
+ }
+ }
+ }
+
+ return modelInfo;
+ }
+
+ /**
+ * @param {Object} models
+ * @param {DirectoryItem[]} modelDirectories
+ * @param {string} searchSeparator
+ */
+ async search(models, modelDirectories, searchSeparator) {
+ const infosHtml = this.elements.infos;
+ infosHtml.innerHTML = "";
+
+ const urlText = this.elements.url.value;
+ const modelInfos = await (async () => {
+ if (urlText.startsWith("https://civitai.com")) {
+ const civitaiInfo = await Civitai.getFilteredInfo(urlText);
+ if (Object.keys(civitaiInfo).length === 0) {
+ return [];
+ }
+ const infos = [];
+ const type = civitaiInfo["type"];
+ civitaiInfo["versions"].forEach((version) => {
+ const images = version["images"];
+ version["files"].forEach((file) => {
+ infos.push({
+ "images": images,
+ "fileName": file["name"],
+ "modelType": type,
+ "downloadUrl": file["downloadUrl"],
+ "downloadFilePath": "",
+ "details": {
+ "fileSizeKB": file["sizeKB"],
+ "fileType": file["type"],
+ "fp": file["fp"],
+ "quant": file["size"],
+ "fileFormat": file["format"],
+ },
+ });
+ });
+ });
+ return infos;
+ }
+ if (urlText.startsWith("https://huggingface.co")) {
+ const hfInfo = await HuggingFace.getFilteredInfo(urlText);
+ if (Object.keys(hfInfo).length === 0) {
+ return [];
+ }
+ const files = hfInfo["modelFiles"];
+ if (files.length === 0) {
+ return [];
+ }
+
+ const baseDownloadUrl = hfInfo["baseDownloadUrl"];
+ return hfInfo["modelFiles"].map((file) => {
+ const indexSep = file.lastIndexOf("/");
+ const filename = file.substring(indexSep + 1);
+ return {
+ "images": hfInfo["images"],
+ "fileName": filename,
+ "modelType": "",
+ "downloadUrl": baseDownloadUrl + "/" + file + "?download=true",
+ "downloadFilePath": file.substring(0, indexSep + 1),
+ "details": {
+ "fileSizeKB": undefined, // TODO: too hard?
+ },
+ };
+ });
+ }
+ if (urlText.endsWith(".json")) {
+ const indexInfo = await request(urlText).catch(() => []);
+ return indexInfo.map((file) => {
+ return {
+ "images": [],
+ "fileName": file["name"],
+ "modelType": DownloadTab.modelTypeToComfyUiDirectory(file["type"], "") ?? "",
+ "downloadUrl": file["download"],
+ "downloadFilePath": "",
+ "details": {},
+ };
+ });
+ }
+ return [];
+ })();
+
+ const modelTypes = Object.keys(models);
+ const modelInfosHtml = modelInfos.filter((modelInfo) => {
+ const filename = modelInfo["fileName"];
+ return MODEL_EXTENSIONS.find((ext) => {
+ return filename.endsWith(ext);
+ }) ?? false;
+ }).map((modelInfo, id) => {
+ return this.#modelInfo(
+ modelInfo,
+ modelTypes,
+ modelDirectories,
+ searchSeparator,
+ id,
+ );
+ });
+ if (modelInfos.length === 0) {
+ modelInfosHtml.push($el("div", ["No results found."]));
+ }
+ else {
+ if (modelInfos.length === 1) {
+ modelInfosHtml[0].open = true;
+ }
+ const label = $checkbox({
+ $: (el) => { this.elements.overwrite = el; },
+ textContent: "Overwrite Existing Files",
+ });
+ modelInfosHtml.unshift(label);
+ }
+ infosHtml.append.apply(infosHtml, modelInfosHtml);
+ }
+
+ /**
+ * @param {Object} models
+ * @param {DirectoryItem[]} modelDirectories
+ * @param {() => Promise} updateModels
+ * @param {string} searchSeparator
+ */
+ constructor(models, modelDirectories, updateModels, searchSeparator) {
+ this.#updateModels = updateModels;
+ const search = async() => this.search(models, modelDirectories, searchSeparator);
+ $el("div.tab-header", {
+ $: (el) => (this.element = el),
+ }, [
+ $el("div.row.tab-header-flex-block", [
+ $el("input.search-text-area", {
+ $: (el) => (this.elements.url = el),
+ type: "text",
+ name: "model download url",
+ autocomplete: "off",
+ placeholder: "example: https://civitai.com/models/207992/stable-video-diffusion-svd",
+ onkeydown: (e) => {
+ if (e.key === "Enter") {
+ e.stopPropagation();
+ search();
+ }
+ },
+ }),
+ $el("button.icon-button", {
+ onclick: () => search(),
+ textContent: "🔍︎",
+ }),
+ ]),
+ $el("div.download-model-infos", {
+ $: (el) => (this.elements.infos = el),
+ }, [
+ $el("div", ["Input a URL to select a model to download."]),
+ ]),
+ ]);
+ }
+}
+
+class ModelTab {
+ /** @type {HTMLDivElement} */
+ element = null;
+
+ elements = {
+ /** @type {HTMLDivElement} */ modelGrid: null,
+ /** @type {HTMLSelectElement} */ modelTypeSelect: null,
+ /** @type {HTMLSelectElement} */ modelSortSelect: null,
+ /** @type {HTMLInputElement} */ modelContentFilter: null,
+ };
+
+ /** @type {DirectoryDropdown} */
+ directoryDropdown = null;
+
+ /**
+ * @param {() => void} updateDirectoryDropdown
+ * @param {() => void} updatePreviousModelFilter
+ * @param {() => Promise} updateModelGrid
+ * @param {() => Promise} updateModels
+ * @param {string} searchSeparator
+ */
+ constructor(updateDirectoryDropdown, updatePreviousModelFilter, updateModelGrid, updateModels, searchSeparator) {
+ /** @type {HTMLDivElement} */
+ const modelGrid = $el("div.comfy-grid");
+ this.elements.modelGrid = modelGrid;
+
+ const searchInput = $el("input.search-text-area", {
+ $: (el) => (this.elements.modelContentFilter = el),
+ type: "text",
+ name: "model search",
+ autocomplete: "off",
+ placeholder: "example: /0/1.5/styles/clothing -.pt",
+ });
+
+ const searchDropdown = new DirectoryDropdown(
+ searchInput,
+ updateDirectoryDropdown,
+ updatePreviousModelFilter,
+ updateModelGrid,
+ searchSeparator,
+ false,
+ );
+ this.directoryDropdown = searchDropdown;
+
+ this.element = $el("div", [
+ $el("div.row.tab-header", [
+ $el("div.row.tab-header-flex-block", [
+ $el("button.icon-button", {
+ type: "button",
+ textContent: "⟳",
+ onclick: () => updateModels(),
+ }),
+ $el("select.model-select-dropdown", {
+ $: (el) => (this.elements.modelTypeSelect = el),
+ name: "model-type",
+ onchange: () => updateModelGrid(),
+ }),
+ $el("select.model-select-dropdown",
+ {
+ $: (el) => (this.elements.modelSortSelect = el),
+ name: "model select dropdown",
+ onchange: () => updateModelGrid(),
+ },
+ [
+ $el("option", { value: MODEL_SORT_DATE_CREATED }, ["Created (newest to oldest)"]),
+ $el("option", { value: "-" + MODEL_SORT_DATE_CREATED }, ["Created (oldest to newest)"]),
+ $el("option", { value: MODEL_SORT_DATE_MODIFIED }, ["Modified (newest to oldest)"]),
+ $el("option", { value: "-" + MODEL_SORT_DATE_MODIFIED }, ["Modified (oldest to newest)"]),
+ $el("option", { value: MODEL_SORT_DATE_NAME }, ["Name (A-Z)"]),
+ $el("option", { value: "-" + MODEL_SORT_DATE_NAME }, ["Name (Z-A)"]),
+ ],
+ ),
+ ]),
+ $el("div.row.tab-header-flex-block", [
+ $el("div.search-models", [
+ searchInput,
+ searchDropdown.element,
+ ]),
+ $el("button.icon-button", {
+ type: "button",
+ textContent: "🔍︎",
+ onclick: () => updateModelGrid(),
+ }),
+ ]),
+ ]),
+ modelGrid,
+ ]);
+ }
+}
+
+class SettingsTab {
+ /** @type {HTMLDivElement} */
+ element = null;
+
+ elements = {
+ /** @type {HTMLButtonElement} */ reloadButton: null,
+ /** @type {HTMLButtonElement} */ saveButton: null,
+ /** @type {HTMLDivElement} */ setPreviewButton: null,
+ settings: {
+ //"sidebar-default-height": null,
+ //"sidebar-default-width": null,
+ /** @type {HTMLTextAreaElement} */ "model-search-always-append": null,
+ /** @type {HTMLInputElement} */ "model-persistent-search": null,
+ /** @type {HTMLInputElement} */ "model-show-label-extensions": null,
+ /** @type {HTMLInputElement} */ "model-preview-fallback-search-safetensors-thumbnail": null,
+
+ /** @type {HTMLInputElement} */ "model-show-add-button": null,
+ /** @type {HTMLInputElement} */ "model-show-copy-button": null,
+ /** @type {HTMLInputElement} */ "model-add-embedding-extension": null,
+ /** @type {HTMLInputElement} */ "model-add-drag-strict-on-field": null,
+ /** @type {HTMLInputElement} */ "model-add-offset": null,
+ },
+ };
+
+ /** @return {() => Promise} */
+ #updateModels = () => {};
+
+ /**
+ * @param {Object} settingsData
+ * @param {boolean} updateModels
+ */
+ #setSettings(settingsData, updateModels) {
+ const settings = this.elements.settings;
+ for (const [key, value] of Object.entries(settingsData)) {
+ const setting = settings[key];
+ if (setting === undefined || setting === null) {
+ continue;
+ }
+ const type = setting.type;
+ switch (type) {
+ case "checkbox": setting.checked = Boolean(value); break;
+ case "range": setting.value = parseFloat(value); break;
+ case "textarea": setting.value = value; break;
+ case "number": setting.value = parseInt(value); break;
+ default: console.warn("Unknown settings input type!");
+ }
+ }
+
+ if (updateModels) {
+ this.#updateModels(); // Is this slow?
+ }
+ }
+
+ /**
+ * @param {boolean} updateModels
+ * @returns {Promise}
+ */
+ async reload(updateModels) {
+ const data = await request("/model-manager/settings/load");
+ this.#setSettings(data["settings"], updateModels);
+ buttonAlert(this.elements.reloadButton, true);
+ }
+
+ /** @returns {Promise} */
+ async save() {
+ let settingsData = {};
+ for (const [setting, el] of Object.entries(this.elements.settings)) {
+ if (!el) { continue; } // hack
+ const type = el.type;
+ let value = null;
+ switch (type) {
+ case "checkbox": value = el.checked; break;
+ case "range": value = el.value; break;
+ case "textarea": value = el.value; break;
+ case "number": value = el.value; break;
+ default: console.warn("Unknown settings input type!");
+ }
+ settingsData[setting] = value;
+ }
+
+ const data = await request(
+ "/model-manager/settings/save",
+ {
+ method: "POST",
+ body: JSON.stringify({ "settings": settingsData }),
+ }
+ ).catch((err) => {
+ return { "success": false };
+ });
+ const success = data["success"];
+ if (success) {
+ this.#setSettings(data["settings"], true);
+ }
+ buttonAlert(this.elements.saveButton, success);
+ }
+
+ /**
+ * @param {() => Promise} updateModels
+ */
+ constructor(updateModels) {
+ this.#updateModels = updateModels;
+ const settings = this.elements.settings;
+ $el("div.model-manager-settings", {
+ $: (el) => (this.element = el),
+ }, [
+ $el("h1", ["Settings"]),
+ $el("div", [
+ $el("button", {
+ $: (el) => (this.elements.reloadButton = el),
+ type: "button",
+ textContent: "Reload", // ⟳
+ onclick: () => this.reload(true),
+ }),
+ $el("button", {
+ $: (el) => (this.elements.saveButton = el),
+ type: "button",
+ textContent: "Save", // 💾︎
+ onclick: () => this.save(),
+ }),
+ ]),
+ /*
+ $el("h2", ["Window"]),
+ $el("div", [
+ $el("p", ["Default sidebar width"]),
+ $el("input", {
+ $: (el) => (settings["sidebar-default-width"] = el),
+ type: "number",
+ name: "default sidebar width",
+ value: 0.5,
+ min: 0.0,
+ max: 1.0,
+ step: 0.05,
+ }),
+ ]),
+ $el("div", [
+ $el("p", ["Default sidebar height"]),
+ $el("input", {
+ $: (el) => (settings["sidebar-default-height"] = el),
+ type: "number",
+ name: "default sidebar height",
+ textContent: "Default sidebar height",
+ value: 0.5,
+ min: 0.0,
+ max: 1.0,
+ step: 0.05,
+ }),
+ ]),
+ */
+ $el("h2", ["Model Search"]),
+ $el("div", [
+ $el("div.search-settings-text", [
+ $el("p", ["Always include in model search:"]),
+ $el("textarea.comfy-multiline-input", {
+ $: (el) => (settings["model-search-always-append"] = el),
+ name: "always include in model search",
+ placeholder: "example: -nsfw",
+ }),
+ ]),
+ ]),
+ $checkbox({
+ $: (el) => (settings["model-persistent-search"] = el),
+ textContent: "Persistent search text across model types",
+ }),
+ $checkbox({
+ $: (el) => (settings["model-show-label-extensions"] = el),
+ textContent: "Show model file extension in labels",
+ }),
+ $checkbox({
+ $: (el) => (settings["model-preview-fallback-search-safetensors-thumbnail"] = el),
+ textContent: "Fallback on embedded thumbnail in safetensors (refresh slow)",
+ }),
+ $checkbox({
+ $: (el) => (settings["model-show-add-button"] = el),
+ textContent: "Show add button",
+ }),
+ $checkbox({
+ $: (el) => (settings["model-show-copy-button"] = el),
+ textContent: "Show copy button",
+ }),
+ $el("h2", ["Model Add"]),
+ $checkbox({
+ $: (el) => (settings["model-add-embedding-extension"] = el),
+ textContent: "Add extension to embedding",
+ }),
+ $checkbox({
+ $: (el) => (settings["model-add-drag-strict-on-field"] = el),
+ textContent: "Strict dragging model onto a node's model field to add",
+ }),
+ $el("div", [
+ $el("input", {
+ $: (el) => (settings["model-add-offset"] = el),
+ type: "number",
+ name: "model add offset",
+ step: 5,
+ }),
+ $el("p", ["Add model offset"]),
+ ]),
+ ]);
+ }
+}
+
+class SidebarButtons {
+ /** @type {HTMLDivElement} */
+ element = null;
+
+ /** @type {ModelManager} */
+ #modelManager = null;
+
+ /**
+ * @param {Event} e
+ */
+ #setSidebar(e) {
+ // TODO: settings["sidebar-default-width"]
+ // TODO: settings["sidebar-default-height"]
+ // TODO: draggable resize?
+ const button = e.target;
+ const modelManager = this.#modelManager.element;
+ const sidebarButtons = this.element.children;
+
+ let buttonIndex;
+ for (buttonIndex = 0; buttonIndex < sidebarButtons.length; buttonIndex++) {
+ if (sidebarButtons[buttonIndex] === button) {
+ break;
+ }
+ }
+
+ const sidebarStates = ["sidebar-left", "sidebar-bottom", "sidebar-top", "sidebar-right"];
+ let stateIndex;
+ for (stateIndex = 0; stateIndex < sidebarStates.length; stateIndex++) {
+ const state = sidebarStates[stateIndex];
+ if (modelManager.classList.contains(state)) {
+ modelManager.classList.remove(state);
+ break;
+ }
+ }
+
+ if (stateIndex != buttonIndex) {
+ const newSidebarState = sidebarStates[buttonIndex];
+ modelManager.classList.add(newSidebarState);
+ }
+ }
+
+ /**
+ * @param {ModelManager} modelManager
+ */
+ constructor(modelManager) {
+ this.#modelManager = modelManager;
+ $el("div.sidebar-buttons",
+ {
+ $: (el) => (this.element = el),
+ },
+ [
+ $el("button.icon-button", {
+ textContent: "◧",
+ onclick: (event) => this.#setSidebar(event),
+ }),
+ $el("button.icon-button", {
+ textContent: "⬓",
+ onclick: (event) => this.#setSidebar(event),
+ }),
+ $el("button.icon-button", {
+ textContent: "⬒",
+ onclick: (event) => this.#setSidebar(event),
+ }),
+ $el("button.icon-button", {
+ textContent: "◨",
+ onclick: (event) => this.#setSidebar(event),
+ }),
+ ]);
+ }
+}
+
+class ModelManager extends ComfyDialog {
#data = {
- sourceList: [],
- models: {},
+ /** @type {Object} */ models: {},
+ /** @type {DirectoryItem[]} */ modelDirectories: [],
+ /** @type {Array} */ previousModelFilters: [],
+ /** @type {Object.<{value: string}>} */ previousModelType: { value: null },
};
-
- /** @type {List} */
- #sourceList = null;
-
+
+ /** @type {string} */
+ #searchSeparator = "/";
+
+ /** @type {string} */
+ #systemSeparator = null;
+
+ /** @type {ModelInfoView} */
+ #modelInfoView = null;
+
+ /** @type {DownloadTab} */
+ #downloadTab = null;
+
+ /** @type {ModelTab} */
+ #modelTab = null;
+
+ /** @type {SettingsTab} */
+ #settingsTab = null;
+
+ /** @type {SidebarButtons} */
+ #sidebarButtons = null;
+
constructor() {
super();
+ const modelInfoView = new ModelInfoView(
+ this.#data.modelDirectories,
+ this.#modelTab_updateModels,
+ this.#searchSeparator,
+ );
+ this.#modelInfoView = modelInfoView;
+
+ const downloadTab = new DownloadTab(
+ this.#data.models,
+ this.#data.modelDirectories,
+ this.#modelTab_updateModels,
+ this.#searchSeparator,
+ );
+ this.#downloadTab = DownloadTab;
+
+ const modelTab = new ModelTab(
+ this.#modelTab_updateDirectoryDropdown,
+ this.#modelTab_updatePreviousModelFilter,
+ this.#modelTab_updateModelGrid,
+ this.#modelTab_updateModels,
+ this.#searchSeparator,
+ );
+ this.#modelTab = modelTab;
+
+ const settingsTab = new SettingsTab(
+ this.#modelTab_updateModels,
+ );
+ this.#settingsTab = settingsTab;
+
+ const sidebarButtons = new SidebarButtons(this);
+ this.#sidebarButtons = sidebarButtons;
+
this.element = $el(
"div.comfy-modal.model-manager",
- { parent: document.body },
+ {
+ parent: document.body,
+ },
[
- $el("div.comfy-modal-content", [
- $el("button.close", {
- textContent: "X",
- onclick: () => this.close(),
- }),
+ $el("div.comfy-modal-content", [ // TODO: settings.top_bar_left_to_right or settings.top_bar_right_to_left
+ modelInfoView.element,
+ $el("div.topbar-buttons",
+ [
+ sidebarButtons.element,
+ $el("button.icon-button", {
+ textContent: "✖",
+ onclick: () => {
+ if (modelInfoView.isVisible()) { // TODO: decouple
+ this.close();
+ }
+ else {
+ modelInfoView.hide();
+ }
+ },
+ }),
+ ]
+ ),
$tabs([
- $tab("Source Install", this.#createSourceInstall()),
- $tab("Customer Install", []),
- $tab("Model List", this.#createModelList()),
+ $tab("Download", [downloadTab.element]),
+ $tab("Models", [modelTab.element]),
+ $tab("Settings", [settingsTab.element]),
]),
]),
]
);
-
+
this.#init();
}
-
+
#init() {
- this.#refreshSourceList();
- this.#refreshModelList();
+ this.#settingsTab.reload(false);
+ this.#modelTab_updateModels();
}
-
- #createSourceInstall() {
- this.#createSourceList();
-
- return [
- $el("div.row", [
- $el("button", {
- type: "button",
- textContent: "Load From",
- $: (el) => (this.#el.loadSourceBtn = el),
- onclick: () => this.#refreshSourceList(),
- }),
- $el(
- "select",
- {
- $: (el) => (this.#el.loadSourceFromSelect = el),
- onchange: (e) => {
- const val = e.target.val;
- this.#el.loadSourceFromInput.disabled =
- val === "Local Source";
- },
- },
- [
- $el("option", ["Local Source"]),
- $el("option", ["Web Source"]),
- ]
- ),
- $el("input", {
- $: (el) => (this.#el.loadSourceFromInput = el),
- value: "https://github.com/hayden-fr/ComfyUI-Model-Manager/blob/main/index.json",
- style: { flex: 1 },
- disabled: true,
- }),
- $el("div", { style: { width: "50px" } }),
- $el(
- "select",
- {
- $: (el) => (this.#el.sourceInstalledFilter = el),
- onchange: () => this.#filterSourceList(),
- },
- [
- $el("option", ["Filter: All"]),
- $el("option", ["Installed"]),
- $el("option", ["Non-Installed"]),
- ]
- ),
- $el("input", {
- $: (el) => (this.#el.sourceContentFilter = el),
- placeholder: "Input search keyword",
- onkeyup: (e) =>
- e.code === "Enter" && this.#filterSourceList(),
- }),
- $el("button", {
- type: "button",
- textContent: "Search",
- onclick: () => this.#filterSourceList(),
- }),
- ]),
- this.#sourceList.element,
- ];
+
+ #modelTab_updateModelGrid = () => {
+ const modelTab = this.#modelTab;
+ const sortValue = modelTab.elements.modelSortSelect.value;
+ 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,
+ );
}
-
- #createSourceList() {
- const sourceList = new List([
- {
- title: "Type",
- dataIndex: "type",
- width: "120",
- align: "center",
- },
- {
- title: "Base",
- dataIndex: "base",
- width: "120",
- align: "center",
- },
- {
- title: "Name",
- dataIndex: "name",
- width: "280",
- render: (value, record) => {
- const href = record.page;
- return $el("a", { target: "_blank", href }, [value]);
- },
- },
- {
- title: "Description",
- dataIndex: "description",
- },
- {
- title: "Download",
- width: "150",
- render: (_, record) => {
- const installed = record.installed;
- return $el("button.block", {
- type: "button",
- disabled: installed,
- textContent: installed ? "Installed" : "Install",
- onclick: async (e) => {
- e.disabled = true;
- const response = await this.#request(
- "/model-manager/download",
- {
- method: "POST",
- body: JSON.stringify(record),
- }
- );
- console.log(response);
- e.disabled = false;
- },
- });
- },
- },
- ]);
- this.#sourceList = sourceList;
- return sourceList.element;
+
+ #modelTab_updateModels = async() => {
+ this.#systemSeparator = await request("/model-manager/system-separator");
+
+ const newModels = await request("/model-manager/models/list");
+ Object.assign(this.#data.models, newModels); // NOTE: do NOT create a new object
+
+ const newModelDirectories = await request("/model-manager/models/directory-list");
+ this.#data.modelDirectories.splice(0, Infinity, ...newModelDirectories); // NOTE: do NOT create a new array
+
+ this.#modelTab_updateModelGrid();
}
-
- async #refreshSourceList() {
- this.#el.loadSourceBtn.disabled = true;
- this.#el.loadSourceFromSelect.disabled = true;
-
- const sourceType = this.#el.loadSourceFromSelect.value;
- const webSource = this.#el.loadSourceFromInput.value;
- const uri = sourceType === "Local Source" ? "local" : webSource;
- const dataSource = await this.#request(
- `/model-manager/source?uri=${uri}`
- ).catch(() => []);
- this.#data.sourceList = dataSource;
- this.#sourceList.setData(dataSource);
- this.#el.sourceInstalledFilter.value = "Filter: All";
- this.#el.sourceContentFilter.value = "";
-
- this.#el.loadSourceBtn.disabled = false;
- this.#el.loadSourceFromSelect.disabled = false;
+
+ #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();
}
-
- #filterSourceList() {
- const installedType = this.#el.sourceInstalledFilter.value;
- /** @type {Array} */
- const content = this.#el.sourceContentFilter.value
- .split(" ")
- .map((item) => item.toLowerCase())
- .filter(Boolean);
-
- const newDataSource = this.#data.sourceList.filter((row) => {
- const filterField = ["type", "name", "base", "description"];
- const rowContent = filterField
- .reduce((memo, field) => memo + " " + row[field], "")
- .toLowerCase();
- return content.reduce((memo, target) => {
- return memo && rowContent.includes(target);
- }, true);
+
+ /**
+ * @param {string} searchPath
+ */
+ #modelTab_showModelInfo = async(searchPath) => {
+ this.#modelInfoView.update(
+ searchPath,
+ this.#modelTab_updateModels,
+ this.#searchSeparator
+ ).then(() => {
+ this.#modelInfoView.show();
});
-
- this.#sourceList.setData(newDataSource);
- }
-
- /** @type {Grid} */
- #modelList = null;
-
- #createModelList() {
- const gridInstance = new Grid();
- this.#modelList = gridInstance;
-
- return [
- $el("div.row", [
- $radioGroup({
- $: (el) => (this.#el.modelTypeSelect = el),
- name: "model-type",
- onchange: () => this.#updateModelList(),
- options: [
- { value: "checkpoints" },
- { value: "clip" },
- { value: "clip_vision" },
- { value: "controlnet" },
- { value: "diffusers" },
- { value: "embeddings" },
- { value: "gligen" },
- { value: "hypernetworks" },
- { value: "loras" },
- { value: "style_models" },
- { value: "unet" },
- { value: "upscale_models" },
- { value: "vae" },
- { value: "vae_approx" },
- ],
- }),
- $el("button", {
- type: "button",
- textContent: "Refresh",
- style: { marginLeft: "auto" },
- onclick: () => this.#refreshModelList(),
- }),
- ]),
- gridInstance.element,
- ];
- }
-
- async #refreshModelList() {
- const dataSource = await this.#request("/model-manager/models");
- this.#data.models = dataSource;
- this.#updateModelList();
- }
-
- #updateModelList() {
- const type = this.#el.modelTypeSelect.value;
- const list = this.#data.models[type];
- this.#modelList.setData(list);
}
}
@@ -516,21 +2936,22 @@ function getInstance() {
app.registerExtension({
name: "Comfy.ModelManager",
-
+ init() {
+ },
async setup() {
$el("link", {
parent: document.head,
rel: "stylesheet",
href: "./extensions/ComfyUI-Model-Manager/model-manager.css",
});
-
- $el("button", {
- parent: document.querySelector(".comfy-menu"),
- textContent: "Models",
- style: { order: 1 },
- onclick: () => {
- getInstance().show();
- },
- });
+
+ app.ui.menuContainer.appendChild(
+ $el("button", {
+ id: "comfyui-model-manager-button",
+ parent: document.querySelector(".comfy-menu"),
+ textContent: "Models",
+ onclick: () => { getInstance().show(); },
+ })
+ );
},
});
+ 
+