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

FEATURE: Adds HTML markdown preview below notes editor.
2024-09-18 11:37:28 +08:00
parent 79dbf2b4c5 89b95405c8
commit f0c7b3823d
7 changed files with 3162 additions and 344 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -160,3 +160,31 @@ cython_debug/
 #.idea/
 ui_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
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -0,0 +1,19 @@
+{
+    "cSpell.words": [
+        "apng",
+        "Civitai",
+        "ckpt",
+        "comfyui",
+        "FYUIKMNVB",
+        "gguf",
+        "gligen",
+        "jfif",
+        "locon",
+        "loras",
+        "noimage",
+        "onnx",
+        "rfilename",
+        "unet",
+        "upscaler"
+    ]
+}
--- a/web/downshow.js
+++ b/web/downshow.js
@@ -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;
+  })();
--- a/web/eslint.config.mjs
+++ b/web/eslint.config.mjs
@@ -0,0 +1,8 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+
+
+export default [
+  {languageOptions: { globals: globals.browser }},
+  pluginJs.configs.recommended,
+];
--- a/web/marked.js
+++ b/web/marked.js
--- a/web/model-manager.css
+++ b/web/model-manager.css
@@ -141,6 +141,7 @@
    font-size: 1.2em;
    resize: vertical;
    width: 100%;
+    height: 100%;
 }

 .model-manager input[type="file"] {
--- a/web/model-manager.js
+++ b/web/model-manager.js
@@ -2,6 +2,8 @@ import { app } from "../../scripts/app.js";
 import { api } from "../../scripts/api.js";
 import { ComfyDialog, $el } from "../../scripts/ui.js";
 import { ComfyButton } from "../../scripts/ui/components/button.js";
+import { marked } from "./marked.js";
+import("./downshow.js");

 function clamp(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 elements = this.elements;
        switch (value) {
-            case this.#PREVIEW_DEFAULT:
+            case this.#PREVIEW_DEFAULT: {
                const children = elements.defaultPreviews.children;
                const noImage = PREVIEW_NONE_URI;
                let url = "";
@@ -624,7 +626,8 @@ class ImageSelect {
                    });
                }
                return url;
-            case this.#PREVIEW_URL:
+            }
+            case this.#PREVIEW_URL: {
                const value = elements.customUrl.value;
                if (value.startsWith(Civitai.imagePostUrlPrefix())) {
                    try {
@@ -642,6 +645,7 @@ class ImageSelect {
                    }
                }
                return value;
+            }
            case this.#PREVIEW_UPLOAD:
                return elements.uploadFile.files[0] ?? "";
            case this.#PREVIEW_NONE:
@@ -2110,7 +2114,7 @@ class ModelInfo {
        previewSelect.elements.previews.style.display = "flex";

        const setPreviewButton = new ComfyButton({
-            tooltip: "Overwrite currrent preview with selected image",
+            tooltip: "Overwrite current preview with selected image",
            content: "Set as Preview",
            action: async(e) => {
                const [button, icon, span] = comfyButtonDisambiguate(e.target);
@@ -2330,6 +2334,7 @@ class ModelInfo {
                return false;
            }
            this.#savedNotesValue = noteValue;
+            this.elements.markdown.innerHTML = marked.parse(noteValue); 
        }
        else {
            const discardChanges = window.confirm("Discard changes?");
@@ -2630,46 +2635,57 @@ class ModelInfo {
                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.append.apply(tagsElement, [
-            $el("h1", ["Tags"]),
-            $el("h2", { style: { margin: "0px 0px 16px 0px" } }, ["Random Tag Generator"]),
+            tagGenerator,
            $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,
+                $el("h2", {
+                    style: {
+                        margin: "24px 0px 8px 0px"
+                    }
+                }, ["Tags"]),
+                tagsParagraph,
            ]),
-            $el("h2", {style: { margin: "24px 0px 8px 0px" } }, ["Training Tags"]),
-            tagsParagraph,
        ]);
        const tagButton = this.elements.tabButtons[2]; // TODO: remove magic value
        tagButton.style.display = isTags ? "" : "none";
@@ -2704,6 +2720,9 @@ class ModelInfo {
        /** @type {HTMLDivElement} */
        const notesElement = this.elements.tabContents[3]; // TODO: remove magic value
        notesElement.innerHTML = "";
+        const markdown =  $el("div", {}, "");
+        markdown.innerHTML = marked.parse(noteText);
+
        notesElement.append.apply(notesElement,
            (() => {
                const notes = $el("textarea.comfy-multiline-input", {
@@ -2742,17 +2761,54 @@ class ModelInfo {
                }

                this.elements.notes = notes;
+                this.elements.markdown = markdown;
                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 [
                    $el("div.row", {
                        style: { "align-items": "center" },
                    }, [
                        $el("h1", ["Notes"]),
                        saveNotesButton,
+                        editNotesButton,
                    ]),
-                    $el("div", {
-                        style: { "display": "flex", "height": "100%", "min-height": "60px" },
-                    }, notes),
+                    notes_editor,
+                    notes_viewer,
                ];
            })()
        );
@@ -3155,6 +3211,7 @@ async function getModelInfos(urlText) {
            const name = civitaiInfo["name"];
            const infos = [];
            const type = civitaiInfo["type"];
+
            civitaiInfo["versions"].forEach((version) => {
                const images = version["images"];
                const tags = version["tags"]?.map((tag) => tag.trim().replace(/,$/, ""));
@@ -3165,31 +3222,7 @@ async function getModelInfos(urlText) {
                        version["description"],
                        civitaiInfo["description"] !== undefined ? "# " + name  : undefined,
                        civitaiInfo["description"],
-                    ].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;", "&");
+                    ].filter(x => x !== undefined).join("\n\n");
                version["files"].forEach((file) => {
                    infos.push({
                        "images": images,
@@ -3197,7 +3230,7 @@ async function getModelInfos(urlText) {
                        "modelType": type,
                        "downloadUrl": file["downloadUrl"],
                        "downloadFilePath": "",
-                        "description": description,
+                        "description": downshow(description),
                        "details": {
                            "fileSizeKB": file["sizeKB"],
                            "fileType": file["type"],