Autoscroll Notebook/Default textareas during streaming

This commit is contained in:
oobabooga 2023-08-28 18:22:03 -07:00
parent 558e918fd6
commit c75f98a6d6
3 changed files with 55 additions and 3 deletions

View File

@ -112,6 +112,58 @@ const config = {
// Start observing the target element
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
//------------------------------------------------

View File

@ -18,7 +18,7 @@ def create_ui():
with gr.Row():
with gr.Column():
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"])
with gr.Row():
@ -34,7 +34,7 @@ def create_ui():
with gr.Column():
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'):
shared.gradio['markdown_render-default'] = gr.Button('Render')

View File

@ -19,7 +19,7 @@ def create_ui():
with gr.Column(scale=4):
with gr.Tab('Raw'):
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"])
with gr.Tab('Markdown'):