From 7100614de5019207215ad2bfa79ce419d78d6a26 Mon Sep 17 00:00:00 2001
From: sabaimran <65192171+sabaimran@users.noreply.github.com>
Date: Sat, 4 May 2024 03:29:17 -0700
Subject: [PATCH] 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 `` specification to the page
---
.github/workflows/pre-commit.yml | 4 +--
src/khoj/interface/web/chat.html | 39 +++++++++++++++++++---
src/khoj/processor/conversation/prompts.py | 6 ++++
3 files changed, 43 insertions(+), 6 deletions(-)
diff --git a/.github/workflows/pre-commit.yml b/.github/workflows/pre-commit.yml
index 609dd601..63812331 100644
--- 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
index 46580a72..bcffc254 100644
--- a/src/khoj/interface/web/chat.html
+++ b/src/khoj/interface/web/chat.html
@@ -1,3 +1,4 @@
+
@@ -9,6 +10,14 @@
+
+
+
+
+
+
+
@@ -344,6 +353,10 @@ To get started, just start typing below. You can also type / to see a list of co
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 [INST] and tags. These are spurious instructions for the AI chat model.
newHTML = newHTML.replace(/\[INST\].+(<\/s>)?/g, '');
@@ -360,6 +373,11 @@ To get started, just start typing below. You can also type / to see a list of co
// 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 @@ To get started, just start typing below. You can also type / to see a list of co
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 @@ To get started, just start typing below. You can also type / to see a list of co
}
div#conversation-list {
- height: 1;
+ height: 1px;
}
div#side-panel-wrapper {
@@ -2436,14 +2467,14 @@ To get started, just start typing below. You can also type / to see a list of co
}
.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
index 695ea71b..f3b65e15 100644
--- a/src/khoj/processor/conversation/prompts.py
+++ b/src/khoj/processor/conversation/prompts.py
@@ -12,6 +12,9 @@ You were created by Khoj Inc. with the following capabilities:
- 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 were created by Khoj Inc. with the following capabilities:
- 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".