From d55a4c3ef5301ad7e5686c12513ee816bcf76e6c Mon Sep 17 00:00:00 2001
From: Heiner Lohaus <hlohaus@users.noreply.github.com>
Date: Mon, 19 Feb 2024 18:29:23 +0100
Subject: Add MathJax to GUI #1563, Add model name to GUI #1600

---
 g4f/gui/client/html/index.html |  9 +++++++++
 g4f/gui/client/js/chat.v1.js   | 44 ++++++++++++++++++++++++++----------------
 2 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/g4f/gui/client/html/index.html b/g4f/gui/client/html/index.html
index 70b8c75f..eaae7355 100644
--- a/g4f/gui/client/html/index.html
+++ b/g4f/gui/client/html/index.html
@@ -21,6 +21,15 @@
     <script src="https://cdn.jsdelivr.net/npm/markdown-it@13.0.1/dist/markdown-it.min.js"></script>
     <link rel="stylesheet"
         href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/styles/base16/dracula.min.css">
+    <script>
+        MathJax = {
+            chtml: {
+                scale: 1,
+                displayAlign: 'left'
+            }
+        };
+    </script>
+    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
     <script>
         const user_image = `<img src="/assets/img/user.png" alt="your avatar">`;
         const gpt_image = `<img src="/assets/img/gpt.png" alt="your avatar">`;
diff --git a/g4f/gui/client/js/chat.v1.js b/g4f/gui/client/js/chat.v1.js
index 2042d174..8461a8f7 100644
--- a/g4f/gui/client/js/chat.v1.js
+++ b/g4f/gui/client/js/chat.v1.js
@@ -32,6 +32,20 @@ const markdown_render = (content) => {
         .replaceAll('<code>', '<code class="language-plaintext">')
 }
 
+let typesetPromise = Promise.resolve();
+const highlight = (container) => {
+    container.querySelectorAll('code:not(.hljs').forEach((el) => {
+        if (el.className != "hljs") {
+            hljs.highlightElement(el);
+        }
+    });
+    typesetPromise = typesetPromise.then(
+        () => MathJax.typesetPromise([container])
+    ).catch(
+        (err) => console.log('Typeset failed: ' + err.message)
+    );
+}
+
 const delete_conversations = async () => {
     localStorage.clear();
     await new_conversation();
@@ -73,9 +87,7 @@ const handle_ask = async () => {
                 </div>
             </div>
         `;
-        document.querySelectorAll('code:not(.hljs').forEach((el) => {
-            hljs.highlightElement(el);
-        });
+        highlight(message_box);
         await ask_gpt();
     }
 };
@@ -214,9 +226,7 @@ const ask_gpt = async () => {
                     html = html.substring(0, lastIndex) + '<span id="cursor"></span>' + lastElement;
                 }
                 content_inner.innerHTML = html;
-                document.querySelectorAll('code:not(.hljs').forEach((el) => {
-                    hljs.highlightElement(el);
-                });
+                highlight(content_inner);
             }
 
             window.scrollTo(0, 0);
@@ -331,8 +341,15 @@ const new_conversation = async () => {
 const load_conversation = async (conversation_id) => {
     let messages = await get_messages(conversation_id);
 
+    let elements = "";
     for (item of messages) {
-        message_box.innerHTML += `
+        let provider = item.provider ? `
+            <div class="provider">
+            <a href="${item.provider.url}" target="_blank">${item.provider.name}</a>
+            ${item.provider.model ? ' with ' + item.provider.model : ''}
+            </div>
+        ` : "";
+        elements += `
             <div class="message">
                 <div class=${item.role == "assistant" ? "assistant" : "user"}>
                     ${item.role == "assistant" ? gpt_image : user_image}
@@ -342,19 +359,15 @@ const load_conversation = async (conversation_id) => {
                     }
                 </div>
                 <div class="content">
-                    ${item.provider
-                        ? '<div class="provider"><a href="' + item.provider.url + '" target="_blank">' + item.provider.name + '</a></div>'
-                        : ''
-                    }
+                    ${provider}
                     <div class="content_inner">${markdown_render(item.content)}</div>
                 </div>
             </div>
         `;
     }
+    message_box.innerHTML = elements;
 
-    document.querySelectorAll('code:not(.hljs').forEach((el) => {
-        hljs.highlightElement(el);
-    });
+    highlight(message_box);
 
     message_box.scrollTo({ top: message_box.scrollHeight, behavior: "smooth" });
 
@@ -447,9 +460,6 @@ const load_conversations = async (limit, offset, loader) => {
         `;
     }
 
-    document.querySelectorAll('code:not(.hljs').forEach((el) => {
-        hljs.highlightElement(el);
-    });
 };
 
 document.getElementById(`cancelButton`).addEventListener(`click`, async () => {
-- 
cgit v1.2.3