oobabooga/text-generation-webui
1
0
Fork 0
mirror of https://github.com/oobabooga/text-generation-webui.git synced 2026-04-04 14:17:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
Download patch file Download diff file Expand all files Collapse all files

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(