AI/text-generation-webui
1
0
Fork 0
mirror of https://github.com/oobabooga/text-generation-webui.git synced 2024-10-01 01:26:03 -04:00
Code Issues Packages Projects Releases Wiki Activity

Make it possible to scroll during streaming (#3721)

Browse Source
This commit is contained in:
oobabooga 2023-08-28 16:03:20 -03:00 committed by GitHub
parent 7d3a0b5387
commit 57e9ded00c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 34 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
css/main.css
View File

@ -291,17 +291,13 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
padding: 0px;
}
#chat {
.chat-parent {
height: calc(100dvh - 262px) !important;
}
.bigchat #chat {
.bigchat {
height: calc(100dvh - 180px) !important;
}
.chat {
flex-direction: column-reverse !important;
}
}
.chat {
@ -318,11 +314,12 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
padding-top: 6px;
}
#chat {
.chat-parent {
height: calc(100dvh - 272px);
overflow: auto !important;
}
.bigchat #chat {
.bigchat {
height: calc(100dvh - 200px);
}

38
js/main.js
View File

@ -29,16 +29,6 @@ document.querySelector('.header_bar').addEventListener('click', function(event)
}
});
//------------------------------------------------
// Add some scrollbars
//------------------------------------------------
const textareaElements = document.querySelectorAll('.add_scrollbar textarea');
for(i = 0; i < textareaElements.length; i++) {
textareaElements[i].classList.remove('scroll-hide');
textareaElements[i].classList.add('pretty_scrollbar');
textareaElements[i].style.resize = "none";
}
//------------------------------------------------
// Keyboard shortcuts
//------------------------------------------------
@ -72,13 +62,25 @@ document.addEventListener("keydown", function(event) {
// Chat scrolling
//------------------------------------------------
const targetElement = document.getElementById('chat').parentNode.parentNode.parentNode;
targetElement.classList.add('pretty_scrollbar');
targetElement.classList.add('chat-parent');
let isScrolled = false;
targetElement.addEventListener('scroll', function() {
let diff = targetElement.scrollHeight - targetElement.clientHeight;
if(Math.abs(targetElement.scrollTop - diff) <= 1 || diff == 0) {
isScrolled = false;
} else {
isScrolled = true;
}
});
// Create a MutationObserver instance
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
let nodes = targetElement.childNodes[2].childNodes[0].childNodes;
let childElement = nodes[nodes.length - 1];
childElement.scrollTop = childElement.scrollHeight;
if(!isScrolled) {
targetElement.scrollTop = targetElement.scrollHeight;
}
});
});
@ -94,6 +96,16 @@ const config = {
// Start observing the target element
observer.observe(targetElement, config);
//------------------------------------------------
// Add some scrollbars
//------------------------------------------------
const textareaElements = document.querySelectorAll('.add_scrollbar textarea');
for(i = 0; i < textareaElements.length; i++) {
textareaElements[i].classList.remove('scroll-hide');
textareaElements[i].classList.add('pretty_scrollbar');
textareaElements[i].style.resize = "none";
}
//------------------------------------------------
// Improve the looks of the chat input field
//------------------------------------------------

2
js/show_controls.js
View File

@ -1,5 +1,5 @@
const belowChatInput = document.querySelectorAll("#chat-tab > div > :nth-child(n+3), #extensions");
const chatParent = document.getElementById("chat").parentNode;
const chatParent = document.getElementById("chat").parentNode.parentNode.parentNode;
function toggle_controls(value) {
if (value) {

6
modules/html_generator.py
View File

@ -182,7 +182,7 @@ def get_image_cache(path):
def generate_instruct_html(history):
output = f'<style>{instruct_css}</style><div class="chat pretty_scrollbar" id="chat"><div class="messages">'
output = f'<style>{instruct_css}</style><div class="chat" id="chat"><div class="messages">'
for i, _row in enumerate(history):
row = [convert_to_markdown(entry) for entry in _row]
@ -213,7 +213,7 @@ def generate_instruct_html(history):
def generate_cai_chat_html(history, name1, name2, style, reset_cache=False):
output = f'<style>{chat_styles[style]}</style><div class="chat pretty_scrollbar" id="chat"><div class="messages">'
output = f'<style>{chat_styles[style]}</style><div class="chat" id="chat"><div class="messages">'
# We use ?name2 and ?time.time() to force the browser to reset caches
img_bot = f'<img src="file/cache/pfp_character.png?{name2}">' if Path("cache/pfp_character.png").exists() else ''
@ -260,7 +260,7 @@ def generate_cai_chat_html(history, name1, name2, style, reset_cache=False):
def generate_chat_html(history, name1, name2, reset_cache=False):
output = f'<style>{chat_styles["wpp"]}</style><div class="chat pretty_scrollbar" id="chat"><div class="messages">'
output = f'<style>{chat_styles["wpp"]}</style><div class="chat" id="chat"><div class="messages">'
for i, _row in enumerate(history):
row = [convert_to_markdown(entry) for entry in _row]