Mirrors/text-generation-webui
1
0
Fork 0
mirror of https://github.com/oobabooga/text-generation-webui.git synced 2025-01-27 12:33:17 +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

2
js/global_scope_js.js
View File

@ -19,5 +19,5 @@ function copyToClipboard(element) {
}
function regenerateClick() {
document.getElementById("Regenerate").click();
document.getElementById("Regenerate").click();
}

55
js/main.js
View File

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

40
modules/ui_chat.py
View File

@ -182,23 +182,31 @@ def create_event_handlers():
# Morph HTML updates instead of updating everything
shared.gradio['display'].change(None, gradio('display'), None,
js="""
(text) => {
morphdom(
document.getElementById('chat').parentNode,
'<div class="prose svelte-1ybaih5">' + text + '</div>',
{
onBeforeElUpdated: function(fromEl, toEl) {
if (fromEl.isEqualNode(toEl)) {
return false; // Skip identical nodes
}
return true; // Update only if nodes differ
}
}
);
js="""
(text) => {
morphdom(
document.getElementById('chat').parentNode,
'<div class="prose svelte-1ybaih5">' + text + '</div>',
{
onBeforeElUpdated: function(fromEl, toEl) {
if (fromEl.tagName === 'PRE' && fromEl.querySelector('code[data-highlighted]')) {
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 !fromEl.isEqualNode(toEl); // Update only if nodes differ
}
"""
)
}
);
}
"""
);
shared.gradio['Generate'].click(
ui.gather_interface_values, gradio(shared.input_elements), gradio('interface_state')).then(