Add support for rendering math equations in the web view (#733)

- Add parsing logic for LaTeX-format math equations in the web chat - Add placeholder delimiters when converting the markdown to HTML in order to avoid removing the escaped characters - Add the `<!DOCTYPE html>` specification to the page
khoj-ai · May 4, 2024 · 7100614 · 7100614
1 parent d9b3482
commit 7100614
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 6 deletions.
diff --git a/.github/workflows/pre-commit.yml b/.github/workflows/pre-commit.yml
@@ -22,7 +22,7 @@ on:
 
 jobs:
   test:
-    name: Run Tests
+    name: Setup Application and Lint
     runs-on: ubuntu-latest
     strategy:
       fail-fast: false
@@ -42,7 +42,7 @@ jobs:
           python -m pip install --upgrade pip
 
       - name: ⬇️ Install Application
-        run: pip install --upgrade .[dev]
+        run: pip install --no-cache-dir --upgrade .[dev]
 
       - name: 🌡️ Validate Application
         run: pre-commit run --hook-stage manual --all
diff --git a/src/khoj/interface/web/chat.html b/src/khoj/interface/web/chat.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
@@ -9,6 +10,14 @@
         <link rel="icon" type="image/png" sizes="128x128" href="/static/assets/icons/favicon-128x128.png?v={{ khoj_version }}">
         <link rel="apple-touch-icon" href="/static/assets/icons/favicon-128x128.png?v={{ khoj_version }}">
         <link rel="manifest" href="/static/khoj.webmanifest?v={{ khoj_version }}">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww" crossorigin="anonymous">
+
+        <!-- The loading of KaTeX is deferred to speed up page rendering -->
+        <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-hIoBPJpTUs74ddyc4bFZSM1TVlQDA60VBbJS0oA934VSz82sBx1X7kSx2ATBDIyd" crossorigin="anonymous"></script>
+
+        <!-- To automatically render math in text elements, include the auto-render extension: -->
+        <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk" crossorigin="anonymous"
+            onload="renderMathInElement(document.body);"></script>
     </head>
     <script type="text/javascript" src="/static/assets/utils.js?v={{ khoj_version }}"></script>
     <script type="text/javascript" src="/static/assets/markdown-it.min.js?v={{ khoj_version }}"></script>
@@ -344,6 +353,10 @@
             var md = window.markdownit();
             let newHTML = message;
 
+            // Replace LaTeX delimiters with placeholders
+            newHTML = newHTML.replace(/\\\(/g, 'LEFTPAREN').replace(/\\\)/g, 'RIGHTPAREN')
+                                .replace(/\\\[/g, 'LEFTBRACKET').replace(/\\\]/g, 'RIGHTBRACKET');
+
             // Remove any text between <s>[INST] and </s> tags. These are spurious instructions for the AI chat model.
             newHTML = newHTML.replace(/<s>\[INST\].+(<\/s>)?/g, '');
 
@@ -360,6 +373,11 @@
 
             // Render markdown
             newHTML = raw ? newHTML : md.render(newHTML);
+
+            // Replace placeholders with LaTeX delimiters
+            newHTML = newHTML.replace(/LEFTPAREN/g, '\\(').replace(/RIGHTPAREN/g, '\\)')
+                            .replace(/LEFTBRACKET/g, '\\[').replace(/RIGHTBRACKET/g, '\\]');
+
             // Set rendered markdown to HTML DOM element
             let element = document.createElement('div');
             element.innerHTML = newHTML;
@@ -378,6 +396,19 @@
                 element.append(copyButton);
             }
 
+            renderMathInElement(element, {
+                // customised options
+                // • auto-render specific keys, e.g.:
+                delimiters: [
+                    {left: '$$', right: '$$', display: true},
+                    {left: '$', right: '$', display: false},
+                    {left: '\\(', right: '\\)', display: false},
+                    {left: '\\[', right: '\\]', display: true}
+                ],
+                // • rendering keys, e.g.:
+                throwOnError : false
+            });
+
             // Get any elements with a class that starts with "language"
             let codeBlockElements = element.querySelectorAll('[class^="language-"]');
             // For each element, add a parent div with the class "programmatic-output"
@@ -1987,7 +2018,7 @@
         }
 
         div#conversation-list {
-            height: 1;
+            height: 1px;
         }
 
         div#side-panel-wrapper {
@@ -2436,14 +2467,14 @@
         }
 
         .three-dot-menu {
-            display: none;
+            display: block;
             /* background: var(--background-color); */
             /* border: 1px solid var(--main-text-color); */
             border-radius: 5px;
             /* position: relative; */
             position: absolute;
-            right: 4;
-            top: 4;
+            right: 4px;
+            top: 4px;
         }
 
         button.three-dot-menu-button-item {

diff --git a/src/khoj/processor/conversation/prompts.py b/src/khoj/processor/conversation/prompts.py
@@ -12,6 +12,9 @@
 - Users can share files and other information with you using the Khoj Desktop, Obsidian or Emacs app. They can also drag and drop their files into the chat window.
 - You *CAN* generate images, look-up real-time information from the internet, set reminders and answer questions based on the user's notes.
 - Say "I don't know" or "I don't understand" if you don't know what to say or if you don't know the answer to a question.
+- Make sure to use the specific LaTeX math mode delimiters for your response. LaTex math mode specific delimiters as following
+    - inline math mode : `\\(` and `\\)`
+    - display math mode: insert linebreak after opening `$$`, `\\[` and before closing `$$`, `\\]`
 - Ask crisp follow-up questions to get additional context, when the answer cannot be inferred from the provided notes or past conversations.
 - Sometimes the user will share personal information that needs to be remembered, like an account ID or a residential address. These can be acknowledged with a simple "Got it" or "Okay".
 - Provide inline references to quotes from the user's notes or any web pages you refer to in your responses in markdown format. For example, "The farmer had ten sheep. [1](https://example.com)". *ALWAYS CITE YOUR SOURCES AND PROVIDE REFERENCES*. Add them inline to directly support your claim.
@@ -30,6 +33,9 @@
 - You *CAN REMEMBER ALL NOTES and PERSONAL INFORMATION FOREVER* that the user ever shares with you.
 - Users can share files and other information with you using the Khoj Desktop, Obsidian or Emacs app. They can also drag and drop their files into the chat window.
 - Say "I don't know" or "I don't understand" if you don't know what to say or if you don't know the answer to a question.
+- Make sure to use the specific LaTeX math mode delimiters for your response. LaTex math mode specific delimiters as following
+    - inline math mode : `\\(` and `\\)`
+    - display math mode: insert linebreak after opening `$$`, `\\[` and before closing `$$`, `\\]`
 - Ask crisp follow-up questions to get additional context, when the answer cannot be inferred from the provided notes or past conversations.
 - Sometimes the user will share personal information that needs to be remembered, like an account ID or a residential address. These can be acknowledged with a simple "Got it" or "Okay".