mirror of
https://github.com/oobabooga/text-generation-webui.git
synced 2024-11-26 01:30:20 +01:00
Autoscroll Notebook/Default textareas during streaming
This commit is contained in:
parent
558e918fd6
commit
c75f98a6d6
52
js/main.js
52
js/main.js
@ -112,6 +112,58 @@ const config = {
|
|||||||
// Start observing the target element
|
// Start observing the target element
|
||||||
observer.observe(targetElement, config);
|
observer.observe(targetElement, config);
|
||||||
|
|
||||||
|
//------------------------------------------------
|
||||||
|
// Notebook box scrolling
|
||||||
|
//------------------------------------------------
|
||||||
|
|
||||||
|
const notebookElement = document.querySelector('#textbox-notebook textarea');
|
||||||
|
let notebookScrolled = false;
|
||||||
|
|
||||||
|
notebookElement.addEventListener('scroll', function() {
|
||||||
|
let diff = notebookElement.scrollHeight - notebookElement.clientHeight;
|
||||||
|
if(Math.abs(notebookElement.scrollTop - diff) <= 1 || diff == 0) {
|
||||||
|
notebookScrolled = false;
|
||||||
|
} else {
|
||||||
|
notebookScrolled = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const notebookObserver = new MutationObserver(function(mutations) {
|
||||||
|
mutations.forEach(function(mutation) {
|
||||||
|
if(!notebookScrolled) {
|
||||||
|
notebookElement.scrollTop = notebookElement.scrollHeight;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
notebookObserver.observe(notebookElement.parentNode.parentNode.parentNode, config);
|
||||||
|
|
||||||
|
//------------------------------------------------
|
||||||
|
// Default box scrolling
|
||||||
|
//------------------------------------------------
|
||||||
|
|
||||||
|
const defaultElement = document.querySelector('#textbox-default textarea');
|
||||||
|
let defaultScrolled = false;
|
||||||
|
|
||||||
|
defaultElement.addEventListener('scroll', function() {
|
||||||
|
let diff = defaultElement.scrollHeight - defaultElement.clientHeight;
|
||||||
|
if(Math.abs(defaultElement.scrollTop - diff) <= 1 || diff == 0) {
|
||||||
|
defaultScrolled = false;
|
||||||
|
} else {
|
||||||
|
defaultScrolled = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const defaultObserver = new MutationObserver(function(mutations) {
|
||||||
|
mutations.forEach(function(mutation) {
|
||||||
|
if(!defaultScrolled) {
|
||||||
|
defaultElement.scrollTop = defaultElement.scrollHeight;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
defaultObserver.observe(defaultElement.parentNode.parentNode.parentNode, config);
|
||||||
|
|
||||||
//------------------------------------------------
|
//------------------------------------------------
|
||||||
// Add some scrollbars
|
// Add some scrollbars
|
||||||
//------------------------------------------------
|
//------------------------------------------------
|
||||||
|
@ -18,7 +18,7 @@ def create_ui():
|
|||||||
with gr.Row():
|
with gr.Row():
|
||||||
with gr.Column():
|
with gr.Column():
|
||||||
with gr.Row():
|
with gr.Row():
|
||||||
shared.gradio['textbox-default'] = gr.Textbox(value='', elem_classes=['textbox_default', 'add_scrollbar'], lines=27, label='Input')
|
shared.gradio['textbox-default'] = gr.Textbox(value='', lines=27, label='Input', elem_classes=['textbox_default', 'add_scrollbar'])
|
||||||
shared.gradio['token-counter-default'] = gr.HTML(value="<span>0</span>", elem_classes=["token-counter", "default-token-counter"])
|
shared.gradio['token-counter-default'] = gr.HTML(value="<span>0</span>", elem_classes=["token-counter", "default-token-counter"])
|
||||||
|
|
||||||
with gr.Row():
|
with gr.Row():
|
||||||
@ -34,7 +34,7 @@ def create_ui():
|
|||||||
|
|
||||||
with gr.Column():
|
with gr.Column():
|
||||||
with gr.Tab('Raw'):
|
with gr.Tab('Raw'):
|
||||||
shared.gradio['output_textbox'] = gr.Textbox(lines=27, label='Output', elem_classes=['textbox_default_output', 'add_scrollbar'])
|
shared.gradio['output_textbox'] = gr.Textbox(lines=27, label='Output', elem_id='textbox-default', elem_classes=['textbox_default_output', 'add_scrollbar'])
|
||||||
|
|
||||||
with gr.Tab('Markdown'):
|
with gr.Tab('Markdown'):
|
||||||
shared.gradio['markdown_render-default'] = gr.Button('Render')
|
shared.gradio['markdown_render-default'] = gr.Button('Render')
|
||||||
|
@ -19,7 +19,7 @@ def create_ui():
|
|||||||
with gr.Column(scale=4):
|
with gr.Column(scale=4):
|
||||||
with gr.Tab('Raw'):
|
with gr.Tab('Raw'):
|
||||||
with gr.Row():
|
with gr.Row():
|
||||||
shared.gradio['textbox-notebook'] = gr.Textbox(value='', elem_classes=['textbox', 'add_scrollbar'], lines=27)
|
shared.gradio['textbox-notebook'] = gr.Textbox(value='', lines=27, elem_id='textbox-notebook', elem_classes=['textbox', 'add_scrollbar'])
|
||||||
shared.gradio['token-counter-notebook'] = gr.HTML(value="<span>0</span>", elem_classes=["token-counter"])
|
shared.gradio['token-counter-notebook'] = gr.HTML(value="<span>0</span>", elem_classes=["token-counter"])
|
||||||
|
|
||||||
with gr.Tab('Markdown'):
|
with gr.Tab('Markdown'):
|
||||||
|
Loading…
Reference in New Issue
Block a user