Mirrors/text-generation-webui
1
0
Fork 0
mirror of https://github.com/oobabooga/text-generation-webui.git synced 2025-01-30 05:43:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

Optimize syntax highlighting during chat streaming (#6655)

Browse Source
This commit is contained in:
oobabooga 2025-01-11 21:14:10 -03:00 committed by GitHub
parent f1797f4323
commit a0492ce325
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 44 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
js/main.js
View File

@ -177,40 +177,22 @@ function isElementVisibleOnScreen(element) {
); );
} }
function getVisibleMessagesIndexes() {
const elements = document.querySelectorAll(".message-body");
const visibleIndexes = [];
elements.forEach((element, index) => {
if (isElementVisibleOnScreen(element) && !element.hasAttribute("data-highlighted")) {
visibleIndexes.push(index);
}
});
return visibleIndexes;
}
function doSyntaxHighlighting() { function doSyntaxHighlighting() {
const indexes = getVisibleMessagesIndexes(); const messageBodies = document.querySelectorAll(".message-body");
const elements = document.querySelectorAll(".message-body");
if (indexes.length > 0) { if (messageBodies.length > 0) {
observer.disconnect(); observer.disconnect();
indexes.forEach((index) => { messageBodies.forEach((messageBody) => {
const element = elements[index]; if (isElementVisibleOnScreen(messageBody)) {
// Handle both code and math in a single pass through each message
// Tag this element to prevent it from being highlighted twice const codeBlocks = messageBody.querySelectorAll("pre code:not([data-highlighted])");
element.setAttribute("data-highlighted", "true");
// Perform syntax highlighting
const codeBlocks = element.querySelectorAll("pre code");
codeBlocks.forEach((codeBlock) => { codeBlocks.forEach((codeBlock) => {
hljs.highlightElement(codeBlock); hljs.highlightElement(codeBlock);
codeBlock.setAttribute("data-highlighted", "true");
}); });
renderMathInElement(element, { renderMathInElement(messageBody, {
delimiters: [ delimiters: [
{ left: "$$", right: "$$", display: true }, { left: "$$", right: "$$", display: true },
{ left: "$", right: "$", display: false }, { left: "$", right: "$", display: false },
@ -218,6 +200,7 @@ function doSyntaxHighlighting() {
{ left: "\\[", right: "\\]", display: true }, { left: "\\[", right: "\\]", display: true },
], ],
}); });
}
}); });
observer.observe(targetElement, config); observer.observe(targetElement, config);

16
modules/ui_chat.py
View File

@ -189,16 +189,24 @@ def create_event_handlers():
'<div class="prose svelte-1ybaih5">' + text + '</div>', '<div class="prose svelte-1ybaih5">' + text + '</div>',
{ {
onBeforeElUpdated: function(fromEl, toEl) { onBeforeElUpdated: function(fromEl, toEl) {
if (fromEl.isEqualNode(toEl)) { if (fromEl.tagName === 'PRE' && fromEl.querySelector('code[data-highlighted]')) {
return false; // Skip identical nodes const fromCode = fromEl.querySelector('code');
const toCode = toEl.querySelector('code');
if (fromCode && toCode && fromCode.textContent === toCode.textContent) {
// If the <code> content is the same, preserve the entire <pre> element
toEl.className = fromEl.className;
toEl.innerHTML = fromEl.innerHTML;
return false; // Skip updating the <pre> element
} }
return true; // Update only if nodes differ }
return !fromEl.isEqualNode(toEl); // Update only if nodes differ
} }
} }
); );
} }
""" """
) );
shared.gradio['Generate'].click( shared.gradio['Generate'].click(
ui.gather_interface_values, gradio(shared.input_elements), gradio('interface_state')).then( ui.gather_interface_values, gradio(shared.input_elements), gradio('interface_state')).then(