Upload 6 files

assets/custom.css

@@ -291,17 +291,29 @@ ol:not(.options), ul:not(.options) {
     border-bottom-right-radius: 0 !important;
 }
 
-.message p {
+.message.user p {
+    white-space: pre-wrap;
+}
+.message .user-message {
+    display: block;
+    padding: 0 !important;
+    white-space: pre-wrap;
+}
+
+.message .md-message p {
     margin-top: 0.6em !important;
     margin-bottom: 0.6em !important;
 }
-.message p:first-child { margin-top: 0 !important; }
-.message p:last-of-type { margin-bottom: 0 !important; }
+.message .md-message p:first-child { margin-top: 0 !important; }
+.message .md-message p:last-of-type { margin-bottom: 0 !important; }
 
 .message .md-message {
     display: block;
     padding: 0 !important;
 }
+.message .raw-message p {
+    margin:0 !important;
+}
 .message .raw-message {
     display: block;
     padding: 0 !important;
@@ -408,101 +420,49 @@ thead th {
 .message :not(pre) code {
     display: inline;
     white-space: break-spaces;
+    font-family: var(--font-mono);
     border-radius: 6px;
     margin: 0 2px 0 2px;
     padding: .2em .4em .1em .4em;
     background-color: rgba(175,184,193,0.2);
 }
 /* 代码块 */
-.message pre code {
-    display: block;
-    overflow: auto;
-    white-space: pre;
-    background-color: hsla(0, 0%, 0%, 80%)!important;
-    border-radius: 10px;
-    padding: 1.2em 1em 0em .5em;
-    margin: 0.6em 2em 1em 0.2em;
-    color: #FFF;
-    box-shadow: 6px 6px 16px hsla(0, 0%, 0%, 0.2);
+.message pre,
+.message pre[class*=language-] {
+    color: #fff;
+    overflow-x: auto;
+    overflow-y: hidden;
+    margin: .8em 1em 1em 0em !important;
+    padding: var(--spacing-xl) 1.2em !important;
+    border-radius: var(--radius-lg) !important;
+}
+.message pre code,
+.message pre code[class*=language-] {
+    color: #fff;
+    padding: 0;
+    margin: 0;
+    background-color: unset;
+    text-shadow: none;
+    font-family: var(--font-mono);
 }
-.message pre {
-    padding: 0 !important;
+/* 覆盖 gradio 丑陋的复制按钮样式 */
+pre button[title="copy"] {
+    border-radius: 5px;
+    transition: background-color .2s ease;
 }
-.message pre code div.highlight {
-    background-color: unset !important;
+pre button[title="copy"]:hover {
+    background-color: #333232;
 }
-
-button.copy-button {
-    display: none;
+pre button .check {
+    color: #fff !important;
+    background: var(--neutral-950) !important;
 }
 
-/* 代码高亮样式 */
-.highlight .hll { background-color: #49483e !important }
-.highlight .c { color: #75715e !important } /* Comment */
-.highlight .err { color: #960050 !important; background-color: #1e0010 } /* Error */
-.highlight .k { color: #66d9ef  !important} /* Keyword */
-.highlight .l { color: #ae81ff  !important} /* Literal */
-.highlight .n { color: #f8f8f2  !important} /* Name */
-.highlight .o { color: #f92672  !important} /* Operator */
-.highlight .p { color: #f8f8f2  !important} /* Punctuation */
-.highlight .ch { color: #75715e  !important} /* Comment.Hashbang */
-.highlight .cm { color: #75715e  !important} /* Comment.Multiline */
-.highlight .cp { color: #75715e  !important} /* Comment.Preproc */
-.highlight .cpf { color: #75715e  !important} /* Comment.PreprocFile */
-.highlight .c1 { color: #75715e  !important} /* Comment.Single */
-.highlight .cs { color: #75715e  !important} /* Comment.Special */
-.highlight .gd { color: #f92672  !important} /* Generic.Deleted */
-.highlight .ge { font-style: italic  !important} /* Generic.Emph */
-.highlight .gi { color: #a6e22e  !important} /* Generic.Inserted */
-.highlight .gs { font-weight: bold  !important} /* Generic.Strong */
-.highlight .gu { color: #75715e  !important} /* Generic.Subheading */
-.highlight .kc { color: #66d9ef  !important} /* Keyword.Constant */
-.highlight .kd { color: #66d9ef  !important} /* Keyword.Declaration */
-.highlight .kn { color: #f92672  !important} /* Keyword.Namespace */
-.highlight .kp { color: #66d9ef  !important} /* Keyword.Pseudo */
-.highlight .kr { color: #66d9ef  !important} /* Keyword.Reserved */
-.highlight .kt { color: #66d9ef  !important} /* Keyword.Type */
-.highlight .ld { color: #e6db74  !important} /* Literal.Date */
-.highlight .m { color: #ae81ff  !important} /* Literal.Number */
-.highlight .s { color: #e6db74  !important} /* Literal.String */
-.highlight .na { color: #a6e22e  !important} /* Name.Attribute */
-.highlight .nb { color: #f8f8f2  !important} /* Name.Builtin */
-.highlight .nc { color: #a6e22e  !important} /* Name.Class */
-.highlight .no { color: #66d9ef  !important} /* Name.Constant */
-.highlight .nd { color: #a6e22e  !important} /* Name.Decorator */
-.highlight .ni { color: #f8f8f2  !important} /* Name.Entity */
-.highlight .ne { color: #a6e22e  !important} /* Name.Exception */
-.highlight .nf { color: #a6e22e  !important} /* Name.Function */
-.highlight .nl { color: #f8f8f2  !important} /* Name.Label */
-.highlight .nn { color: #f8f8f2  !important} /* Name.Namespace */
-.highlight .nx { color: #a6e22e  !important} /* Name.Other */
-.highlight .py { color: #f8f8f2  !important} /* Name.Property */
-.highlight .nt { color: #f92672  !important} /* Name.Tag */
-.highlight .nv { color: #f8f8f2  !important} /* Name.Variable */
-.highlight .ow { color: #f92672  !important} /* Operator.Word */
-.highlight .w { color: #f8f8f2  !important} /* Text.Whitespace */
-.highlight .mb { color: #ae81ff  !important} /* Literal.Number.Bin */
-.highlight .mf { color: #ae81ff  !important} /* Literal.Number.Float */
-.highlight .mh { color: #ae81ff  !important} /* Literal.Number.Hex */
-.highlight .mi { color: #ae81ff  !important} /* Literal.Number.Integer */
-.highlight .mo { color: #ae81ff  !important} /* Literal.Number.Oct */
-.highlight .sa { color: #e6db74  !important} /* Literal.String.Affix */
-.highlight .sb { color: #e6db74  !important} /* Literal.String.Backtick */
-.highlight .sc { color: #e6db74  !important} /* Literal.String.Char */
-.highlight .dl { color: #e6db74  !important} /* Literal.String.Delimiter */
-.highlight .sd { color: #e6db74  !important} /* Literal.String.Doc */
-.highlight .s2 { color: #e6db74  !important} /* Literal.String.Double */
-.highlight .se { color: #ae81ff  !important} /* Literal.String.Escape */
-.highlight .sh { color: #e6db74  !important} /* Literal.String.Heredoc */
-.highlight .si { color: #e6db74  !important} /* Literal.String.Interpol */
-.highlight .sx { color: #e6db74  !important} /* Literal.String.Other */
-.highlight .sr { color: #e6db74  !important} /* Literal.String.Regex */
-.highlight .s1 { color: #e6db74  !important} /* Literal.String.Single */
-.highlight .ss { color: #e6db74  !important} /* Literal.String.Symbol */
-.highlight .bp { color: #f8f8f2  !important} /* Name.Builtin.Pseudo */
-.highlight .fm { color: #a6e22e  !important} /* Name.Function.Magic */
-.highlight .vc { color: #f8f8f2  !important} /* Name.Variable.Class */
-.highlight .vg { color: #f8f8f2  !important} /* Name.Variable.Global */
-.highlight .vi { color: #f8f8f2  !important} /* Name.Variable.Instance */
-.highlight .vm { color: #f8f8f2  !important} /* Name.Variable.Magic */
-.highlight .il { color: #ae81ff  !important} /* Literal.Number.Integer.Long */
+/* 覆盖prism.css */
+.language-css .token.string,
+.style .token.string,
+.token.entity,
+.token.operator,
+.token.url {
+    background: none !important;
+}

assets/custom.js

@@ -17,13 +17,11 @@ var chatbotWrap = null;
 var apSwitch = null;
 var empty_botton = null;
 var messageBotDivs = null;
-// var renderLatex = null;
 var loginUserForm = null;
 var logginUser = null;
 
 var userLogged = false;
 var usernameGotten = false;
-var shouldRenderLatex = false;
 var historyLoaded = false;
 
 var ga = document.getElementsByTagName("gradio-app");
@@ -51,7 +49,6 @@ function gradioLoaded(mutations) {
             chatbot = document.querySelector('#chuanhu_chatbot');
             chatbotWrap = document.querySelector('#chuanhu_chatbot > .wrap');
             apSwitch = document.querySelector('.apSwitch input[type="checkbox"]');
-            // renderLatex = document.querySelector("#render_latex_checkbox > label > input");
             empty_botton = document.getElementById("empty_btn")
 
             if (loginUserForm) {
@@ -80,10 +77,6 @@ function gradioLoaded(mutations) {
                 }
                 setChatbotScroll();
             }
-            // if (renderLatex) {  // renderLatex 加载出来了没?
-            //     shouldRenderLatex = renderLatex.checked;
-            //     updateMathJax();
-            // }
             if (empty_botton) {
                 emptyHistory();
             }
@@ -246,10 +239,10 @@ function showOrHideUserInfo() {
 function toggleDarkMode(isEnabled) {
     if (isEnabled) {
         document.body.classList.add("dark");
-        // document.body.style.setProperty("background-color", "var(--neutral-950)", "important");
+        document.body.style.setProperty("background-color", "var(--neutral-950)", "important");
     } else {
         document.body.classList.remove("dark");
-        // document.body.style.backgroundColor = "";
+        document.body.style.backgroundColor = "";
     }
 }
 function adjustDarkMode() {
@@ -377,41 +370,6 @@ function addChuanhuButton(botElement) {
     botElement.insertBefore(toggleButton, copyButton);
 }
 
-function addCopyCodeButton(pre) {
-    var code = null;
-    var firstChild = null;
-    code = pre.querySelector('code');
-    if (!code) return;
-    firstChild = code.querySelector('div');
-    if (!firstChild) return;
-    var oldCopyButton = null;
-    oldCopyButton = code.querySelector('button.copy-code-btn');
-    // if (oldCopyButton) oldCopyButton.remove();
-    if (oldCopyButton) return; // 没太有用，新生成的对话中始终会被pre覆盖，导致按钮消失，这段代码不启用……
-    var codeButton = document.createElement('button');
-    codeButton.classList.add('copy-code-btn');
-    codeButton.textContent = '\uD83D\uDCCE';
-
-    code.insertBefore(codeButton, firstChild);
-    codeButton.addEventListener('click', function () {
-        var range = document.createRange();
-        range.selectNodeContents(code);
-        range.setStartBefore(firstChild);
-        navigator.clipboard
-            .writeText(range.toString())
-            .then(() => {
-                codeButton.textContent = '\u2714';
-                setTimeout(function () {
-                    codeButton.textContent = '\uD83D\uDCCE';
-                }, 2000);
-            })
-            .catch(e => {
-                console.error(e);
-                codeButton.textContent = '\u2716';
-            });
-    });
-}
-
 function renderMarkdownText(message) {
     var mdDiv = message.querySelector('.md-message');
     if (mdDiv) mdDiv.classList.remove('hideM');
@@ -425,73 +383,17 @@ function removeMarkdownText(message) {
     if (mdDiv) mdDiv.classList.add('hideM');
 }
 
-var rendertime = 0; // for debugging
-var mathjaxUpdated = false;
-
-function renderMathJax() {
-    messageBotDivs = document.querySelectorAll('.message.bot .md-message');
-    for (var i = 0; i < messageBotDivs.length; i++) {
-        var mathJaxSpan = messageBotDivs[i].querySelector('.MathJax_Preview');
-        if (!mathJaxSpan && shouldRenderLatex && !mathjaxUpdated) {
-            MathJax.Hub.Queue(["Typeset", MathJax.Hub, messageBotDivs[i]]);
-            rendertime +=1; // for debugging
-            // console.log("renderingMathJax", i)
-        }
-    }
-    mathjaxUpdated = true;
-    // console.log("MathJax Rendered")
-}
-
-function removeMathjax() {
-    // var jax = MathJax.Hub.getAllJax();
-    // for (var i = 0; i < jax.length; i++) {
-    //     // MathJax.typesetClear(jax[i]);
-    //     jax[i].Text(newmath)
-    //     jax[i].Reprocess()
-    // }
-    // 我真的不会了啊啊啊，mathjax并没有提供转换为原先文本的办法。
-    mathjaxUpdated = true;
-    // console.log("MathJax removed!");
-}
-
-function updateMathJax() {
-    // renderLatex.addEventListener("change", function() {
-    //     shouldRenderLatex = renderLatex.checked;
-    //     if (!mathjaxUpdated) {
-    //         if (shouldRenderLatex) {
-    //             renderMathJax();
-    //         } else {
-    //             console.log("MathJax Disabled")
-    //             removeMathjax();
-    //         }
-    //     } else {
-    //         if (!shouldRenderLatex) {
-    //             mathjaxUpdated = false; // reset
-    //         }
-    //     }
-    // });
-    if (shouldRenderLatex && !mathjaxUpdated) {
-        renderMathJax();
-    }
-    mathjaxUpdated = false;
-}
-
 let timeoutId;
 let isThrottled = false;
 var mmutation
-// 监听所有元素中 bot message 的变化，用来查找需要渲染的mathjax, 并为 bot 消息添加复制按钮。
+// 监听所有元素中 bot message 的变化，为 bot 消息添加复制按钮。
 var mObserver = new MutationObserver(function (mutationsList) {
     for (mmutation of mutationsList) {
         if (mmutation.type === 'childList') {
             for (var node of mmutation.addedNodes) {
                 if (node.nodeType === 1 && node.classList.contains('message') && node.getAttribute('data-testid') === 'bot') {
-                    if (shouldRenderLatex) {
-                        renderMathJax();
-                        mathjaxUpdated = false;
-                    }
                     saveHistoryHtml();
                     document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot').forEach(addChuanhuButton);
-                    document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot pre').forEach(addCopyCodeButton);
                 }
                 if (node.tagName === 'INPUT' && node.getAttribute('type') === 'range') {
                     setSlider();
@@ -499,27 +401,17 @@ var mObserver = new MutationObserver(function (mutationsList) {
             }
             for (var node of mmutation.removedNodes) {
                 if (node.nodeType === 1 && node.classList.contains('message') && node.getAttribute('data-testid') === 'bot') {
-                    if (shouldRenderLatex) {
-                        renderMathJax();
-                        mathjaxUpdated = false;
-                    }
                     saveHistoryHtml();
                     document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot').forEach(addChuanhuButton);
-                    document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot pre').forEach(addCopyCodeButton);
                 }
             }
         } else if (mmutation.type === 'attributes') {
             if (mmutation.target.nodeType === 1 && mmutation.target.classList.contains('message') && mmutation.target.getAttribute('data-testid') === 'bot') {
-                document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot pre').forEach(addCopyCodeButton); // 目前写的是有点问题的，会导致加button次数过多，但是bot对话内容生成时又是不断覆盖pre的……
                 if (isThrottled) break; // 为了防止重复不断疯狂渲染，加上等待_(:з」∠)_
                 isThrottled = true;
                 clearTimeout(timeoutId);
                 timeoutId = setTimeout(() => {
                     isThrottled = false;
-                    if (shouldRenderLatex) {
-                        renderMathJax();
-                        mathjaxUpdated = false;
-                    }
                     document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot').forEach(addChuanhuButton);
                     saveHistoryHtml();
                 }, 500);
@@ -551,9 +443,13 @@ function loadHistoryHtml() {
         var tempDiv = document.createElement('div');
         tempDiv.innerHTML = historyHtml;
         var buttons = tempDiv.querySelectorAll('button.chuanhu-btn');
+        var gradioCopyButtons = tempDiv.querySelectorAll('button.copy_code_button');
         for (var i = 0; i < buttons.length; i++) {
             buttons[i].parentNode.removeChild(buttons[i]);
         }
+        for (var i = 0; i < gradioCopyButtons.length; i++) {
+            gradioCopyButtons[i].parentNode.removeChild(gradioCopyButtons[i]);
+        }
         var fakeHistory = document.createElement('div');
         fakeHistory.classList.add('history-message');
         fakeHistory.innerHTML = tempDiv.innerHTML;
@@ -594,7 +490,6 @@ observer.observe(targetNode, { childList: true, subtree: true });
 window.addEventListener("DOMContentLoaded", function () {
     isInIframe = (window.self !== window.top);
     historyLoaded = false;
-    shouldRenderLatex = !!document.querySelector('script[src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"]');
 });
 window.addEventListener('resize', setChatbotHeight);
 window.addEventListener('scroll', setChatbotHeight);

assets/html/appearance_switcher.html

@@ -0,0 +1,11 @@
+<div style="display: flex; justify-content: space-between;">
+    <span style="margin-top: 4px !important;">
+        {label}
+    </span>
+    <span>
+        <label class="apSwitch" for="checkbox">
+            <input type="checkbox" id="checkbox">
+            <div class="apSlider"></div>
+        </label>
+    </span>
+</div>

assets/html/footer.html

@@ -0,0 +1 @@
+<div class="versions">{versions}</div>