summaryrefslogtreecommitdiffstats
path: root/g4f/gui/client
diff options
context:
space:
mode:
authorH Lohaus <hlohaus@users.noreply.github.com>2024-02-19 18:33:10 +0100
committerGitHub <noreply@github.com>2024-02-19 18:33:10 +0100
commitf9ad8730ac7e63bcb724dbedfa9f6cab394a0d22 (patch)
treee1cbf1cb6b4e338031c2c72ecc549cd64a0702c5 /g4f/gui/client
parentMove GeminiProChat to a new provider #1596 (#1601) (diff)
parentAdd MathJax to GUI #1563, Add model name to GUI #1600 (diff)
downloadgpt4free-0.2.1.6.tar
gpt4free-0.2.1.6.tar.gz
gpt4free-0.2.1.6.tar.bz2
gpt4free-0.2.1.6.tar.lz
gpt4free-0.2.1.6.tar.xz
gpt4free-0.2.1.6.tar.zst
gpt4free-0.2.1.6.zip
Diffstat (limited to 'g4f/gui/client')
-rw-r--r--g4f/gui/client/html/index.html9
-rw-r--r--g4f/gui/client/js/chat.v1.js44
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 () => {