sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2024-11-23 23:48:56 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 16

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

Browse source 
- 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
This commit is contained in:
sabaimran 2024-05-04 03:29:17 -07:00 committed by GitHub
parent d9b3482b1a
commit 7100614de5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 43 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.github/workflows/pre-commit.yml vendored
View file

@ -22,7 +22,7 @@ on:
jobs: jobs:
test: test:
name: Run Tests name: Setup Application and Lint
runs-on: ubuntu-latest runs-on: ubuntu-latest
strategy: strategy:
fail-fast: false fail-fast: false
@ -42,7 +42,7 @@ jobs:
python -m pip install --upgrade pip python -m pip install --upgrade pip
- name: ⬇️ Install Application - name: ⬇️ Install Application
run: pip install --upgrade .[dev] run: pip install --no-cache-dir --upgrade .[dev]
- name: 🌡️ Validate Application - name: 🌡️ Validate Application
run: pre-commit run --hook-stage manual --all run: pre-commit run --hook-stage manual --all

39
src/khoj/interface/web/chat.html
View file

@ -1,3 +1,4 @@
<!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <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="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="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="manifest" href="/static/khoj.webmanifest?v={{ khoj_version }}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.10/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/katex@0.16.10/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/katex@0.16.10/dist/contrib/auto-render.min.js" integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk" crossorigin="anonymous"
onload="renderMathInElement(document.body);"></script>
</head> </head>
<script type="text/javascript" src="/static/assets/utils.js?v={{ khoj_version }}"></script> <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> <script type="text/javascript" src="/static/assets/markdown-it.min.js?v={{ khoj_version }}"></script>
@ -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(); var md = window.markdownit();
let newHTML = message; 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. // 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, ''); newHTML = newHTML.replace(/<s>\[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 // Render markdown
newHTML = raw ? newHTML : md.render(newHTML); 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 // Set rendered markdown to HTML DOM element
let element = document.createElement('div'); let element = document.createElement('div');
element.innerHTML = newHTML; 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); 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" // Get any elements with a class that starts with "language"
let codeBlockElements = element.querySelectorAll('[class^="language-"]'); let codeBlockElements = element.querySelectorAll('[class^="language-"]');
// For each element, add a parent div with the class "programmatic-output" // 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 { div#conversation-list {
height: 1; height: 1px;
} }
div#side-panel-wrapper { 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 { .three-dot-menu {
display: none; display: block;
/* background: var(--background-color); */ /* background: var(--background-color); */
/* border: 1px solid var(--main-text-color); */ /* border: 1px solid var(--main-text-color); */
border-radius: 5px; border-radius: 5px;
/* position: relative; */ /* position: relative; */
position: absolute; position: absolute;
right: 4; right: 4px;
top: 4; top: 4px;
} }
button.three-dot-menu-button-item { button.three-dot-menu-button-item {

6
src/khoj/processor/conversation/prompts.py
View file

@ -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. - 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. - 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. - 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. - 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". - 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. - 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. - 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. - 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. - 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. - 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". - 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".