support diagram plotting via mermaid !

themes/common.js

@@ -229,6 +229,27 @@ function addCopyButton(botElement) {
     botElement.appendChild(messageBtnColumn);
 }
 
+
+let timeoutID = null;
+let lastInvocationTime = 0;
+let lastArgs = null;
+function do_something_but_not_too_frequently(min_interval, func) {
+    return function(...args) {
+        lastArgs = args;
+        const now = Date.now();
+        if (!lastInvocationTime || (now - lastInvocationTime) >= min_interval) {
+            lastInvocationTime = now;
+            func.apply(this, args);
+        } else if (!timeoutID) {
+            timeoutID = setTimeout(() => {
+                timeoutID = null;
+                lastInvocationTime = Date.now();
+                func.apply(this, lastArgs);
+            }, min_interval - (now - lastInvocationTime));      
+        } 
+    }
+}
+
 function chatbotContentChanged(attempt = 1, force = false) {
     // https://github.com/GaiZhenbiao/ChuanhuChatGPT/tree/main/web_assets/javascript
     for (var i = 0; i < attempt; i++) {
@@ -236,6 +257,13 @@ function chatbotContentChanged(attempt = 1, force = false) {
             gradioApp().querySelectorAll('#gpt-chatbot .message-wrap .message.bot').forEach(addCopyButton);
         }, i === 0 ? 0 : 200);
     }
+
+    const run_mermaid_render = do_something_but_not_too_frequently(500, function () {
+        const blocks = document.querySelectorAll(`pre.mermaid, diagram-div`);
+        if (blocks.length == 0) { return; }
+        uml("mermaid");
+    });
+    run_mermaid_render();
 }
 
 
@@ -660,8 +688,10 @@ function limit_scroll_position() {
     }, { passive: false }); // Passive event listener option should be false
 }
 
+
+
 // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-//  第 6 部分: JS初始化函数
+//  第 7 部分: JS初始化函数
 // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
 
 function GptAcademicJavaScriptInit(LAYOUT = "LEFT-RIGHT") {
@@ -674,4 +704,6 @@ function GptAcademicJavaScriptInit(LAYOUT = "LEFT-RIGHT") {
     chatbotObserver.observe(chatbotIndicator, { attributes: true, childList: true, subtree: true });
     if (LAYOUT === "LEFT-RIGHT") { chatbotAutoHeight(); }
     if (LAYOUT === "LEFT-RIGHT") { limit_scroll_position(); }
+    // setInterval(function () { uml("mermaid") }, 5000); // 每50毫秒执行一次
+
 }

themes/default.py

@@ -67,8 +67,14 @@ def adjust_theme():
             button_cancel_text_color_dark="white",
         )
 
-        with open(os.path.join(theme_dir, "common.js"), "r", encoding="utf8") as f:
-            js = f"<script>{f.read()}</script>"
+        js = ""
+        for jsf in [
+            os.path.join(theme_dir, "common.js"),
+            os.path.join(theme_dir, "mermaid.min.js"),
+            os.path.join(theme_dir, "mermaid_loader.js"),
+        ]:
+            with open(jsf, "r", encoding="utf8") as f:
+                js += f"<script>{f.read()}</script>"
 
         # 添加一个萌萌的看板娘
         if ADD_WAIFU:

themes/mermaid_loader.js

@@ -0,0 +1,113 @@
+const uml = async className => {
+
+    // Custom element to encapsulate Mermaid content.
+    class MermaidDiv extends HTMLElement {
+
+        /**
+        * Creates a special Mermaid div shadow DOM.
+        * Works around issues of shared IDs.
+        * @return {void}
+        */
+        constructor() {
+            super()
+
+            // Create the Shadow DOM and attach style
+            const shadow = this.attachShadow({ mode: "open" })
+            const style = document.createElement("style")
+            style.textContent = `
+        :host {
+          display: block;
+          line-height: initial;
+          font-size: 16px;
+        }
+        div.diagram {
+          margin: 0;
+          overflow: visible;
+        }`
+            shadow.appendChild(style)
+        }
+    }
+
+    if (typeof customElements.get("diagram-div") === "undefined") {
+        customElements.define("diagram-div", MermaidDiv)
+    }
+
+    const getFromCode = parent => {
+        // Handles <pre><code> text extraction.
+        let text = ""
+        for (let j = 0; j < parent.childNodes.length; j++) {
+            const subEl = parent.childNodes[j]
+            if (subEl.tagName.toLowerCase() === "code") {
+                for (let k = 0; k < subEl.childNodes.length; k++) {
+                    const child = subEl.childNodes[k]
+                    const whitespace = /^\s*$/
+                    if (child.nodeName === "#text" && !(whitespace.test(child.nodeValue))) {
+                        text = child.nodeValue
+                        break
+                    }
+                }
+            }
+        }
+        return text
+    }
+
+    // 给出配置 Provide a default config in case one is not specified
+    const defaultConfig = {
+        startOnLoad: false,
+        theme: "default",
+        flowchart: {
+            htmlLabels: false
+        },
+        er: {
+            useMaxWidth: false
+        },
+        sequence: {
+            useMaxWidth: false,
+            noteFontWeight: "14px",
+            actorFontSize: "14px",
+            messageFontSize: "16px"
+        }
+    }
+    console.log('启动渲染');
+    // 加载配置 Load up the config
+    mermaid.mermaidAPI.globalReset() // 全局复位
+    const config = (typeof mermaidConfig === "undefined") ? defaultConfig : mermaidConfig
+    mermaid.initialize(config)
+
+    // 查找需要渲染的元素 Find all of our Mermaid sources and render them.
+    const blocks = document.querySelectorAll(`pre.${className}, diagram-div`);
+    for (let i = 0; i < blocks.length; i++) {
+        var block = blocks[i]
+        // const res = await mermaid.render(`_diagram_${i}`, getFromCode(parentEl))
+        var code = getFromCode(block);
+        let code2Element = document.createElement("code2"); // 创建一个新的code2元素
+        let existingCode2Element = block.querySelector("code2"); // 如果block下已存在code2元素，则获取它
+        let codeContent = block.querySelector("code").textContent; // 获取code元素中的文本内容
+        if(existingCode2Element){ // 如果block下已存在code2元素
+            existingCode2Element.style.display = "none";
+            if(existingCode2Element.textContent !== codeContent){
+                existingCode2Element.textContent = codeContent; // 如果现有的code2元素中的内容与code元素中的内容不同，更新code2元素中的内容
+            }
+            else{
+                continue;
+            }
+        } else { // 如果不存在code2元素，则将code元素中的内容添加到新创建的code2元素中
+            code2Element.style.display = "none";
+            code2Element.textContent = codeContent;
+            block.appendChild(code2Element); // 将新创建的code2元素添加到block中
+        }
+
+        /////////////////////////////////////////////////////////////////
+        //尝试获取已存在的<div class='mermaid_render'>
+        let mermaidRender = block.querySelector(".mermaid_render");
+        if (!mermaidRender) {
+            mermaidRender = document.createElement("div");  // 不存在，创建新的<div class='mermaid_render'>
+            mermaidRender.classList.add("mermaid_render");
+            block.appendChild(mermaidRender);               // 将新创建的元素附加到block
+        }
+        /////////////////////////////////////////////////////////////////
+        const content = await mermaid.render(`_diagram_${i}`, code)
+        mermaidRender.innerHTML = content
+
+    }
+}