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

Merge pull request #16 from korutech-ai/feature/notes-preview

Browse Source 
FEATURE: Adds HTML markdown preview below notes editor.
This commit is contained in:
Hayden
2024-09-18 11:37:28 +08:00
committed by GitHub
parent 79dbf2b4c5 89b95405c8
commit f0c7b3823d
7 changed files with 3162 additions and 344 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
.gitignore vendored
View File

@@ -160,3 +160,31 @@ cython_debug/
#.idea/ #.idea/
ui_settings.yaml ui_settings.yaml
server_settings.yaml server_settings.yaml
# macOS:
# General
.DS_Store
.AppleDouble
.LSOverride
# Icon must end with two \r
Icon
# Thumbnails
._*
# Files that might appear in the root of a volume
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns
.com.apple.timemachine.donotpresent
# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk

19
.vscode/settings.json vendored Normal file
View File

@@ -0,0 +1,19 @@
{
"cSpell.words": [
"apng",
"Civitai",
"ckpt",
"comfyui",
"FYUIKMNVB",
"gguf",
"gligen",
"jfif",
"locon",
"loras",
"noimage",
"onnx",
"rfilename",
"unet",
"upscaler"
]
}

231
web/downshow.js Normal file
View File

@@ -0,0 +1,231 @@
/**
* downshow.js -- A javascript library to convert HTML to markdown.
*
* Copyright (c) 2013 Alex Cornejo.
*
* Original Markdown Copyright (c) 2004-2005 John Gruber
* <http://darlingfireball.net/projects/markdown/>
*
* Redistributable under a BSD-style open source license.
*
* downshow has no external dependencies. It has been tested in chrome and
* firefox, it probably works in internet explorer, but YMMV.
*
* Basic Usage:
*
* downshow(document.getElementById('#yourid').innerHTML);
*
* TODO:
* - Remove extra whitespace between words in headers and other places.
*/
(function () {
var doc;
// Use browser DOM with jsdom as a fallback (for node.js)
try {
doc = document;
} catch(e) {
var jsdom = require("jsdom").jsdom;
doc = jsdom("<html><head></head><body></body></html>");
}
/**
* Returns every element in root in their bfs traversal order.
*
* In the process it transforms any nested lists to conform to the w3c
* standard, see: http://www.w3.org/wiki/HTML_lists#Nesting_lists
*/
function bfsOrder(root) {
var inqueue = [root], outqueue = [];
root._bfs_parent = null;
while (inqueue.length > 0) {
var elem = inqueue.shift();
outqueue.push(elem);
var children = elem.childNodes;
var liParent = null;
for (var i=0 ; i<children.length; i++) {
if (children[i].nodeType == 1) {// element node
if (children[i].tagName === 'LI') {
liParent = children[i];
} else if ((children[i].tagName === 'UL' || children[i].tagName === 'OL') && liParent) {
liParent.appendChild(children[i]);
i--;
continue;
}
children[i]._bfs_parent = elem;
inqueue.push(children[i]);
}
}
}
outqueue.shift();
return outqueue;
}
/**
* Remove whitespace and newlines from beginning and end of a sting.
*/
function trim(str) {
return str.replace(/^\s\s*/,'').replace(/\s\s*$/, '');
}
/**
* Remove all newlines and trims the resulting string.
*/
function nltrim(str) {
return str.replace(/\s{2,}/g, ' ').replace(/^\s\s*/,'').replace(/\s\s*$/, '');
}
/**
* Add prefix to the beginning of every line in block.
*/
function prefixBlock(prefix, block, skipEmpty) {
var lines = block.split('\n');
for (var i =0; i<lines.length; i++) {
// Do not prefix empty lines
if (lines[i].length === 0 && skipEmpty === true)
continue;
else
lines[i] = prefix + lines[i];
}
return lines.join('\n');
}
/**
* Set the node's content.
*/
function setContent(node, content, prefix, suffix) {
if (content.length > 0) {
if (prefix && suffix)
node._bfs_text = prefix + content + suffix;
else
node._bfs_text = content;
} else
node._bfs_text = '';
}
/**
* Get a node's content.
*/
function getContent(node) {
var text = '', atom;
for (var i = 0; i<node.childNodes.length; i++) {
if (node.childNodes[i].nodeType === 1) {
atom = node.childNodes[i]._bfs_text;
} else if (node.childNodes[i].nodeType === 3) {
atom = node.childNodes[i].data;
} else
continue;
if (text.match(/[\t ]+$/) && atom.match(/^[\t ]+/)) {
text = text.replace(/[\t ]+$/,'') + ' ' + atom.replace(/^[\t ]+/, '');
} else {
text = text + atom;
}
}
return text;
}
/**
* Process a node in the DOM tree.
* */
function processNode(node) {
if (node.tagName === 'P' || node.tagName === 'DIV' || node.tagName === 'UL' || node.tagName === 'OL' || node.tagName === 'PRE')
setContent(node, getContent(node), '\n\n', '\n\n');
else if (node.tagName === 'BR')
setContent(node, '\n\n');
else if (node.tagName === 'HR')
setContent(node, '\n***\n');
else if (node.tagName === 'H1')
setContent(node, nltrim(getContent(node)), '\n# ', '\n');
else if (node.tagName === 'H2')
setContent(node, nltrim(getContent(node)), '\n## ', '\n');
else if (node.tagName === 'H3')
setContent(node, nltrim(getContent(node)), '\n### ', '\n');
else if (node.tagName === 'H4')
setContent(node, nltrim(getContent(node)), '\n#### ', '\n');
else if (node.tagName === 'H5')
setContent(node, nltrim(getContent(node)), '\n##### ', '\n');
else if (node.tagName === 'H6')
setContent(node, nltrim(getContent(node)), '\n###### ', '\n');
else if (node.tagName === 'B' || node.tagName === 'STRONG')
setContent(node, nltrim(getContent(node)), '**', '**');
else if (node.tagName === 'I' || node.tagName === 'EM')
setContent(node, nltrim(getContent(node)), '_', '_');
else if (node.tagName === 'A') {
var href = node.href ? nltrim(node.href) : '', text = nltrim(getContent(node)) || href, title = node.title ? nltrim(node.title) : '';
if (href.length > 0)
setContent(node, '[' + text + '](' + href + (title ? ' "' + title + '"' : '') + ')');
else
setContent(node, '');
} else if (node.tagName === 'IMG') {
var src = node.getAttribute('src') ? nltrim(node.getAttribute('src')) : '', alt = node.alt ? nltrim(node.alt) : '', caption = node.title ? nltrim(node.title) : '';
if (src.length > 0)
setContent(node, '![' + alt + '](' + src + (caption ? ' "' + caption + '"' : '') + ')');
else
setContent(node, '');
} else if (node.tagName === 'BLOCKQUOTE') {
var block_content = getContent(node);
if (block_content.length > 0)
setContent(node, prefixBlock('> ', block_content), '\n\n', '\n\n');
else
setContent(node, '');
} else if (node.tagName === 'CODE') {
if (node._bfs_parent.tagName === 'PRE' && node._bfs_parent._bfs_parent !== null)
setContent(node, prefixBlock(' ', getContent(node)));
else
setContent(node, nltrim(getContent(node)), '`', '`');
} else if (node.tagName === 'LI') {
var list_content = getContent(node);
if (list_content.length > 0)
if (node._bfs_parent.tagName === 'OL')
setContent(node, trim(prefixBlock(' ', list_content, true)), '1. ', '\n\n');
else
setContent(node, trim(prefixBlock(' ', list_content, true)), '- ', '\n\n');
else
setContent(node, '');
} else
setContent(node, getContent(node));
}
function downshow(html, options) {
var root = doc.createElement('pre');
root.innerHTML = html;
var nodes = bfsOrder(root).reverse(), i;
if (options && options.nodeParser) {
for (i = 0; i<nodes.length; i++) {
var result = options.nodeParser(doc, nodes[i].cloneNode(true));
if (result === false)
processNode(nodes[i]);
else
setContent(nodes[i], result);
}
} else {
for (i = 0; i<nodes.length; i++) {
processNode(nodes[i]);
}
}
return getContent(root)
// remove empty lines between blockquotes
.replace(/(\n(?:> )+[^\n]*)\n+(\n(?:> )+)/g, "$1\n$2")
// remove empty blockquotes
.replace(/\n((?:> )+[ ]*\n)+/g, '\n\n')
// remove extra newlines
.replace(/\n[ \t]*(?:\n[ \t]*)+\n/g,'\n\n')
// remove trailing whitespace
.replace(/\s\s*$/, '')
// convert lists to inline when not using paragraphs
.replace(/^([ \t]*(?:\d+\.|\+|\-)[^\n]*)\n\n+(?=[ \t]*(?:\d+\.|\+|\-|\*)[^\n]*)/gm, "$1\n")
// remove starting newlines
.replace(/^\n\n*/, '');
}
// Export for use in server and client.
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
module.exports = downshow;
else if (typeof define === 'function' && define.amd)
define([], function () {return downshow;});
else
window.downshow = downshow;
})();

8
web/eslint.config.mjs Normal file
View File

@@ -0,0 +1,8 @@
import globals from "globals";
import pluginJs from "@eslint/js";
export default [
{languageOptions: { globals: globals.browser }},
pluginJs.configs.recommended,
];

2498
web/marked.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
web/model-manager.css
View File

@@ -141,6 +141,7 @@
font-size: 1.2em; font-size: 1.2em;
resize: vertical; resize: vertical;
width: 100%; width: 100%;
height: 100%;
} }
.model-manager input[type="file"] { .model-manager input[type="file"] {

169
web/model-manager.js
View File

@@ -2,6 +2,8 @@ import { app } from "../../scripts/app.js";
import { api } from "../../scripts/api.js"; import { api } from "../../scripts/api.js";
import { ComfyDialog, $el } from "../../scripts/ui.js"; import { ComfyDialog, $el } from "../../scripts/ui.js";
import { ComfyButton } from "../../scripts/ui/components/button.js"; import { ComfyButton } from "../../scripts/ui/components/button.js";
import { marked } from "./marked.js";
import("./downshow.js");
function clamp(x, min, max) { function clamp(x, min, max) {
return Math.min(Math.max(x, min), max); return Math.min(Math.max(x, min), max);
@@ -604,7 +606,7 @@ class ImageSelect {
const value = document.querySelector(`input[name="${name}"]:checked`).value; const value = document.querySelector(`input[name="${name}"]:checked`).value;
const elements = this.elements; const elements = this.elements;
switch (value) { switch (value) {
case this.#PREVIEW_DEFAULT: case this.#PREVIEW_DEFAULT: {
const children = elements.defaultPreviews.children; const children = elements.defaultPreviews.children;
const noImage = PREVIEW_NONE_URI; const noImage = PREVIEW_NONE_URI;
let url = ""; let url = "";
@@ -624,7 +626,8 @@ class ImageSelect {
}); });
} }
return url; return url;
case this.#PREVIEW_URL: }
case this.#PREVIEW_URL: {
const value = elements.customUrl.value; const value = elements.customUrl.value;
if (value.startsWith(Civitai.imagePostUrlPrefix())) { if (value.startsWith(Civitai.imagePostUrlPrefix())) {
try { try {
@@ -642,6 +645,7 @@ class ImageSelect {
} }
} }
return value; return value;
}
case this.#PREVIEW_UPLOAD: case this.#PREVIEW_UPLOAD:
return elements.uploadFile.files[0] ?? ""; return elements.uploadFile.files[0] ?? "";
case this.#PREVIEW_NONE: case this.#PREVIEW_NONE:
@@ -2110,7 +2114,7 @@ class ModelInfo {
previewSelect.elements.previews.style.display = "flex"; previewSelect.elements.previews.style.display = "flex";
const setPreviewButton = new ComfyButton({ const setPreviewButton = new ComfyButton({
tooltip: "Overwrite currrent preview with selected image", tooltip: "Overwrite current preview with selected image",
content: "Set as Preview", content: "Set as Preview",
action: async(e) => { action: async(e) => {
const [button, icon, span] = comfyButtonDisambiguate(e.target); const [button, icon, span] = comfyButtonDisambiguate(e.target);
@@ -2330,6 +2334,7 @@ class ModelInfo {
return false; return false;
} }
this.#savedNotesValue = noteValue; this.#savedNotesValue = noteValue;
this.elements.markdown.innerHTML = marked.parse(noteValue);
} }
else { else {
const discardChanges = window.confirm("Discard changes?"); const discardChanges = window.confirm("Discard changes?");
@@ -2630,46 +2635,57 @@ class ModelInfo {
break; break;
} }
} }
const tagGenerator = $el(
"div", [
$el("h1", ["Tags"]),
$el("h2", { style: { margin: "0px 0px 16px 0px" } }, ["Random Tag Generator"]),
$el("div", [
$el("details.tag-generator-settings", {
style: { margin: "10px 0", display: "none" },
open: false,
}, [
$el("summary", ["Settings"]),
$el("div", [
"Sampling Method",
samplerRadioGroup,
]),
$el("label", [
"Count",
tagGenerationCount,
]),
$el("label", [
"Threshold",
tagGenerationThreshold,
]),
]),
tagGeneratorRandomizedOutput,
new ComfyButton({
content: "Randomize",
tooltip: "Randomly generate subset of tags",
action: () => {
const samplerName = document.querySelector(`input[name="${TAG_GENERATOR_SAMPLER_NAME}"]:checked`).value;
const sampler = samplerName === "Frequency" ? ModelInfo.ProbabilisticTagSampling : ModelInfo.UniformTagSampling;
const sampleCount = tagGenerationCount.value;
const frequencyThreshold = tagGenerationThreshold.value;
const tags = ParseTagParagraph(tagsParagraph.innerText);
const sampledTags = sampler(tags, sampleCount, frequencyThreshold);
tagGeneratorRandomizedOutput.value = sampledTags.join(", ");
},
}).element,
]),
]
)
tagsElement.innerHTML = ""; tagsElement.innerHTML = "";
tagsElement.append.apply(tagsElement, [ tagsElement.append.apply(tagsElement, [
$el("h1", ["Tags"]), tagGenerator,
$el("h2", { style: { margin: "0px 0px 16px 0px" } }, ["Random Tag Generator"]),
$el("div", [ $el("div", [
$el("details.tag-generator-settings", { $el("h2", {
style: { margin: "10px 0", display: "none" }, style: {
open: false, margin: "24px 0px 8px 0px"
}, [ }
$el("summary", ["Settings"]), }, ["Tags"]),
$el("div", [ tagsParagraph,
"Sampling Method",
samplerRadioGroup,
]),
$el("label", [
"Count",
tagGenerationCount,
]),
$el("label", [
"Threshold",
tagGenerationThreshold,
]),
]),
tagGeneratorRandomizedOutput,
new ComfyButton({
content: "Randomize",
tooltip: "Randomly generate subset of tags",
action: () => {
const samplerName = document.querySelector(`input[name="${TAG_GENERATOR_SAMPLER_NAME}"]:checked`).value;
const sampler = samplerName === "Frequency" ? ModelInfo.ProbabilisticTagSampling : ModelInfo.UniformTagSampling;
const sampleCount = tagGenerationCount.value;
const frequencyThreshold = tagGenerationThreshold.value;
const tags = ParseTagParagraph(tagsParagraph.innerText);
const sampledTags = sampler(tags, sampleCount, frequencyThreshold);
tagGeneratorRandomizedOutput.value = sampledTags.join(", ");
},
}).element,
]), ]),
$el("h2", {style: { margin: "24px 0px 8px 0px" } }, ["Training Tags"]),
tagsParagraph,
]); ]);
const tagButton = this.elements.tabButtons[2]; // TODO: remove magic value const tagButton = this.elements.tabButtons[2]; // TODO: remove magic value
tagButton.style.display = isTags ? "" : "none"; tagButton.style.display = isTags ? "" : "none";
@@ -2704,6 +2720,9 @@ class ModelInfo {
/** @type {HTMLDivElement} */ /** @type {HTMLDivElement} */
const notesElement = this.elements.tabContents[3]; // TODO: remove magic value const notesElement = this.elements.tabContents[3]; // TODO: remove magic value
notesElement.innerHTML = ""; notesElement.innerHTML = "";
const markdown = $el("div", {}, "");
markdown.innerHTML = marked.parse(noteText);
notesElement.append.apply(notesElement, notesElement.append.apply(notesElement,
(() => { (() => {
const notes = $el("textarea.comfy-multiline-input", { const notes = $el("textarea.comfy-multiline-input", {
@@ -2742,17 +2761,54 @@ class ModelInfo {
} }
this.elements.notes = notes; this.elements.notes = notes;
this.elements.markdown = markdown;
this.#savedNotesValue = noteText; this.#savedNotesValue = noteText;
const notes_editor = $el(
"div",
{
style: {
"display": noteText == "" ? "flex" : "none",
"height": "100%",
"min-height": "60px"
},
},
notes
);
const notes_viewer = $el(
"div",
{
style: {
"display": noteText == "" ? "none" : "flex",
"height": "100%",
"min-height": "60px",
"overflow": "scroll",
"overflow-wrap": "anywhere"
},
},
markdown
);
const editNotesButton = new ComfyButton({
icon: "pencil",
tooltip: "Change file name",
classList: "comfyui-button icon-button",
action: async () => {
notes_editor.style.display = notes_editor.style.display == "flex" ? "none" : "flex";
notes_viewer.style.display = notes_viewer.style.display == "none" ? "flex" : "none";
},
}).element;
return [ return [
$el("div.row", { $el("div.row", {
style: { "align-items": "center" }, style: { "align-items": "center" },
}, [ }, [
$el("h1", ["Notes"]), $el("h1", ["Notes"]),
saveNotesButton, saveNotesButton,
editNotesButton,
]), ]),
$el("div", { notes_editor,
style: { "display": "flex", "height": "100%", "min-height": "60px" }, notes_viewer,
}, notes),
]; ];
})() })()
); );
@@ -3155,6 +3211,7 @@ async function getModelInfos(urlText) {
const name = civitaiInfo["name"]; const name = civitaiInfo["name"];
const infos = []; const infos = [];
const type = civitaiInfo["type"]; const type = civitaiInfo["type"];
civitaiInfo["versions"].forEach((version) => { civitaiInfo["versions"].forEach((version) => {
const images = version["images"]; const images = version["images"];
const tags = version["tags"]?.map((tag) => tag.trim().replace(/,$/, "")); const tags = version["tags"]?.map((tag) => tag.trim().replace(/,$/, ""));
@@ -3165,31 +3222,7 @@ async function getModelInfos(urlText) {
version["description"], version["description"],
civitaiInfo["description"] !== undefined ? "# " + name : undefined, civitaiInfo["description"] !== undefined ? "# " + name : undefined,
civitaiInfo["description"], civitaiInfo["description"],
].filter(x => x !== undefined).join("\n\n") ].filter(x => x !== undefined).join("\n\n");
.replaceAll("</p><p>", "\n\n")
.replaceAll("<strong>", "**").replaceAll("</strong>", "**")
.replaceAll("<ol>", "\n").replaceAll("</ol>", "\n") // wrong
.replaceAll("<ul>", "\n").replaceAll("</ul>", "\n")
.replaceAll("<li>", "- ").replaceAll("</li>", "\n")
.replaceAll("<em>", "*").replaceAll("</em>", "*")
.replaceAll("<code>", "`").replaceAll("</code>", "`")
.replaceAll("<blockquote", "\n<blockquote").replaceAll("</blockquote>", "\n")
.replaceAll("<br", "\n<br")
.replaceAll("<hr>", "\n\n---\n\n")
.replaceAll("<h1", "\n# <h1").replaceAll("</h1>", "\n")
.replaceAll("<h2", "\n## <h2").replaceAll("</h2>", "\n")
.replaceAll("<h3", "\n### <h3").replaceAll("</h3>", "\n")
.replaceAll("<h4", "\n#### <h4").replaceAll("</h4>", "\n")
.replaceAll("<h5", "\n##### <h5").replaceAll("</h5>", "\n")
.replaceAll("<h6", "\n###### <h6").replaceAll("</h6>", "\n")
.replace(/href="(\S*)">/g, 'href=""> $1 <a href="">')
.replace(/src="(\S*)">/g, 'src=""> $1 <img src="">')
// <script></script>
// <span></span>
.replace(/<[^>]+>/g, "") // quick hack
.replaceAll("&lt;", "<").replaceAll("&gt;", ">")
.replaceAll("&lte;", "<=").replaceAll("&gte;", ">=")
.replaceAll("&amp;", "&");
version["files"].forEach((file) => { version["files"].forEach((file) => {
infos.push({ infos.push({
"images": images, "images": images,
@@ -3197,7 +3230,7 @@ async function getModelInfos(urlText) {
"modelType": type, "modelType": type,
"downloadUrl": file["downloadUrl"], "downloadUrl": file["downloadUrl"],
"downloadFilePath": "", "downloadFilePath": "",
"description": description, "description": downshow(description),
"details": { "details": {
"fileSizeKB": file["sizeKB"], "fileSizeKB": file["sizeKB"],
"fileType": file["type"], "fileType": file["type"],