From 6afc1a193bb1d68deccd569c89d70ee9bf35246c Mon Sep 17 00:00:00 2001 From: Pete <33569918+jparmstr@users.noreply.github.com> Date: Wed, 2 Aug 2023 11:02:36 -0400 Subject: [PATCH] Add a scrollbar to notebook/default, improve chat scrollbar style (#3403) --------- Co-authored-by: oobabooga <112222186+oobabooga@users.noreply.github.com> --- css/main.css | 30 +++++++++++++++++++++++++++++- css/main.js | 7 +++++++ modules/html_generator.py | 6 +++--- server.py | 12 ++++++------ 4 files changed, 45 insertions(+), 10 deletions(-) diff --git a/css/main.css b/css/main.css index 760e367a..5c17a179 100644 --- a/css/main.css +++ b/css/main.css @@ -154,4 +154,32 @@ button { .markdown ul ol { font-size: 100% !important; -} \ No newline at end of file +} + +.pretty_scrollbar::-webkit-scrollbar { + width: 10px; +} + +.pretty_scrollbar::-webkit-scrollbar-track { + background: transparent; +} + +.pretty_scrollbar::-webkit-scrollbar-thumb, +.pretty_scrollbar::-webkit-scrollbar-thumb:hover { + background: #c5c5d2; + border-radius: 10px; +} + +.dark .pretty_scrollbar::-webkit-scrollbar-thumb, +.dark .pretty_scrollbar::-webkit-scrollbar-thumb:hover { + background: #374151; + border-radius: 10px; +} + +.pretty_scrollbar::-webkit-resizer { + background: #c5c5d2; +} + +.dark .pretty_scrollbar::-webkit-resizer { + background: #374151; +} diff --git a/css/main.js b/css/main.js index 32820ebe..f3b3c05f 100644 --- a/css/main.js +++ b/css/main.js @@ -16,3 +16,10 @@ main_parent.addEventListener('click', function(e) { extensions.style.display = 'none'; } }); + +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"; +} diff --git a/modules/html_generator.py b/modules/html_generator.py index 4910ffef..ab0aeab0 100644 --- a/modules/html_generator.py +++ b/modules/html_generator.py @@ -150,7 +150,7 @@ def get_image_cache(path): def generate_instruct_html(history): - output = f'
' + output = f'
' for i, _row in enumerate(history[::-1]): row = [convert_to_markdown(entry) for entry in _row] @@ -183,7 +183,7 @@ def generate_instruct_html(history): def generate_cai_chat_html(history, name1, name2, style, reset_cache=False): - output = f'
' + output = f'
' # We use ?name2 and ?time.time() to force the browser to reset caches img_bot = f'' if Path("cache/pfp_character.png").exists() else '' @@ -232,7 +232,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'
' + output = f'
' for i, _row in enumerate(history[::-1]): row = [convert_to_markdown(entry) for entry in _row] diff --git a/server.py b/server.py index 5cc50dd3..ecb8ddc9 100644 --- a/server.py +++ b/server.py @@ -676,8 +676,8 @@ def create_interface(): shared.gradio['name1'] = gr.Textbox(value=shared.settings['name1'], lines=1, label='Your name') shared.gradio['name2'] = gr.Textbox(value=shared.settings['name2'], lines=1, label='Character\'s name') - shared.gradio['context'] = gr.Textbox(value=shared.settings['context'], lines=4, label='Context') - shared.gradio['greeting'] = gr.Textbox(value=shared.settings['greeting'], lines=4, label='Greeting') + shared.gradio['context'] = gr.Textbox(value=shared.settings['context'], lines=4, label='Context', elem_classes=['add_scrollbar']) + shared.gradio['greeting'] = gr.Textbox(value=shared.settings['greeting'], lines=4, label='Greeting', elem_classes=['add_scrollbar']) with gr.Column(scale=1): shared.gradio['character_picture'] = gr.Image(label='Character picture', type='pil') @@ -696,7 +696,7 @@ def create_interface(): shared.gradio['context_instruct'] = gr.Textbox(value='', lines=4, label='Context') shared.gradio['turn_template'] = gr.Textbox(value=shared.settings['turn_template'], lines=1, label='Turn template', info='Used to precisely define the placement of spaces and new line characters in instruction prompts.') with gr.Row(): - shared.gradio['chat-instruct_command'] = gr.Textbox(value=shared.settings['chat-instruct_command'], lines=4, label='Command for chat-instruct mode', info='<|character|> gets replaced by the bot name, and <|prompt|> gets replaced by the regular chat prompt.') + shared.gradio['chat-instruct_command'] = gr.Textbox(value=shared.settings['chat-instruct_command'], lines=4, label='Command for chat-instruct mode', info='<|character|> gets replaced by the bot name, and <|prompt|> gets replaced by the regular chat prompt.', elem_classes=['add_scrollbar']) with gr.Tab('Chat history'): with gr.Row(): @@ -738,7 +738,7 @@ def create_interface(): with gr.Row(): with gr.Column(scale=4): with gr.Tab('Raw'): - shared.gradio['textbox'] = gr.Textbox(value=default_text, elem_classes="textbox", lines=27) + shared.gradio['textbox'] = gr.Textbox(value=default_text, elem_classes=['textbox', 'add_scrollbar'], lines=27) with gr.Tab('Markdown'): shared.gradio['markdown_render'] = gr.Button('Render') @@ -776,7 +776,7 @@ def create_interface(): with gr.Tab("Text generation", elem_id="main"): with gr.Row(): with gr.Column(): - shared.gradio['textbox'] = gr.Textbox(value=default_text, elem_classes="textbox_default", lines=27, label='Input') + shared.gradio['textbox'] = gr.Textbox(value=default_text, elem_classes=['textbox_default', 'add_scrollbar'], lines=27, label='Input') shared.gradio['max_new_tokens'] = gr.Slider(minimum=shared.settings['max_new_tokens_min'], maximum=shared.settings['max_new_tokens_max'], step=1, label='max_new_tokens', value=shared.settings['max_new_tokens']) with gr.Row(): shared.gradio['Generate'] = gr.Button('Generate', variant='primary') @@ -794,7 +794,7 @@ def create_interface(): with gr.Column(): with gr.Tab('Raw'): - shared.gradio['output_textbox'] = gr.Textbox(elem_classes="textbox_default_output", lines=27, label='Output') + shared.gradio['output_textbox'] = gr.Textbox(lines=27, label='Output', elem_classes=['textbox_default_output', 'add_scrollbar']) with gr.Tab('Markdown'): shared.gradio['markdown_render'] = gr.Button('Render')