oobabooga/text-generation-webui
1
0
Fork 0
mirror of https://github.com/oobabooga/text-generation-webui.git synced 2025-12-06 07:12:10 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Use morphdom to make chat streaming 1902381098231% faster (#6653)

Browse source
This commit is contained in:
oobabooga 2025-01-11 12:55:19 -03:00 committed by GitHub
parent 02db4b0d06
commit 3a722a36c8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 26 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
js/main.js
View file

@ -147,10 +147,9 @@ const observer = new MutationObserver(function(mutations) {
doSyntaxHighlighting();
if(!isScrolled) {
if (!isScrolled && targetElement.scrollTop !== targetElement.scrollHeight) {
targetElement.scrollTop = targetElement.scrollHeight;
}
});
// Configure the observer to watch for changes in the subtree and attributes

1
js/morphdom/morphdom-umd.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

1
modules/block_requests.py
View file

@ -55,6 +55,7 @@ def my_open(*args, **kwargs):
'\n <script src="file/js/katex/auto-render.min.js"></script>'
'\n <script src="file/js/highlightjs/highlight.min.js"></script>'
'\n <script src="file/js/highlightjs/highlightjs-copy.min.js"></script>'
'\n <script src="file/js/morphdom/morphdom-umd.min.js"></script>'
f'\n <link id="highlight-css" rel="stylesheet" href="file/css/highlightjs/{"github-dark" if shared.settings["dark_theme"] else "github"}.min.css">'
'\n <script>hljs.addPlugin(new CopyButtonPlugin());</script>'
'\n </head>'

26
modules/ui_chat.py
View file

@ -20,7 +20,7 @@ def create_ui():
shared.gradio['Chat input'] = gr.State()
shared.gradio['history'] = gr.JSON(visible=False)
with gr.Tab('Chat', elem_id='chat-tab'):
with gr.Tab('Chat', id='Chat', elem_id='chat-tab'):
with gr.Row(elem_id='past-chats-row', elem_classes=['pretty_scrollbar']):
with gr.Column():
with gr.Row(elem_id='past-chats-buttons'):
@ -46,8 +46,8 @@ def create_ui():
with gr.Row():
with gr.Column(elem_id='chat-col'):
shared.gradio['display'] = gr.HTML(value=chat_html_wrapper({'internal': [], 'visible': []}, '', '', 'chat', 'cai-chat', ''))
shared.gradio['html_display'] = gr.HTML(value=chat_html_wrapper({'internal': [], 'visible': []}, '', '', 'chat', 'cai-chat', ''), visible=True)
shared.gradio['display'] = gr.Textbox(value="", visible=False) # Hidden buffer
with gr.Row(elem_id="chat-input-row"):
with gr.Column(scale=1, elem_id='gr-hover-container'):
gr.HTML(value='<div class="hover-element" onclick="void(0)"><span style="width: 100px; display: block" id="hover-element-button">&#9776;</span><div class="hover-menu" id="hover-menu"></div>', elem_id='gr-hover')
@ -180,6 +180,26 @@ def create_event_handlers():
shared.input_params = gradio(inputs)
shared.reload_inputs = gradio(reload_arr)
# 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
}
}
);
}
"""
)
shared.gradio['Generate'].click(
ui.gather_interface_values, gradio(shared.input_elements), gradio('interface_state')).then(
lambda x: (x, ''), gradio('textbox'), gradio('Chat input', 'textbox'), show_progress=False).then(