diff options
| -rw-r--r-- | g4f/gui/client/html/index.html | 9 | ||||
| -rw-r--r-- | 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 @@ -22,6 +22,15 @@ <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">`; </script> 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 () => { |