Merge pull request #1598 from hlohaus/index

Add MathJax to GUI #1563, Add model name to GUI #1600, Try to fix Captcha Issue in Bing

g4f/Provider/bing/conversation.py

@@ -41,8 +41,11 @@ async def create_conversation(session: ClientSession, proxy: str = None) -> Conv
         "sec-fetch-site": "same-origin",
         "x-ms-client-request-id": str(uuid.uuid4()),
         "x-ms-useragent": "azsdk-js-api-client-factory/1.0.0-beta.1 core-rest-pipeline/1.12.3 OS/Windows",
-        "referer": url
+        "referer": url,
+        "Cookie": "; ".join(f"{c.key}={c.value}" for c in session.cookie_jar)
     }
+    for k, v in headers.items():
+        session.headers[k] = v
     url = 'https://www.bing.com/turing/conversation/create?bundleVersion=1.1579.2'
     async with session.get(url, headers=headers, proxy=proxy) as response:
         try:

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">`;

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 () => {