From 2a292082240527ba5c065e941811d82082b48b11 Mon Sep 17 00:00:00 2001 From: oobabooga <112222186+oobabooga@users.noreply.github.com> Date: Wed, 16 Aug 2023 02:39:58 -0300 Subject: [PATCH] Add a "Show controls" button to chat UI (#3590) --- css/main.css | 37 +++++++++++++++++++++++++----------- extensions/gallery/script.js | 17 ++++++++++++++--- js/show_controls.js | 18 ++++++++++++++++++ modules/ui.py | 2 ++ modules/ui_chat.py | 8 ++++++-- 5 files changed, 66 insertions(+), 16 deletions(-) create mode 100644 js/show_controls.js diff --git a/css/main.css b/css/main.css index 5432a9db..e82a8c61 100644 --- a/css/main.css +++ b/css/main.css @@ -101,15 +101,15 @@ div.svelte-15lo0d8 > *, div.svelte-15lo0d8 > .form > * { } .textbox_default textarea { - height: calc(100vh - 310px); + height: calc(100dvh - 310px); } .textbox_default_output textarea { - height: calc(100vh - 190px); + height: calc(100dvh - 190px); } .textbox textarea { - height: calc(100vh - 241px); + height: calc(100dvh - 241px); } .textbox_default textarea, .textbox_default_output textarea, .textbox textarea { @@ -123,7 +123,7 @@ div.svelte-15lo0d8 > *, div.svelte-15lo0d8 > .form > * { @media screen and (max-width: 711px) { .textbox_default textarea { - height: calc(100vh - 275px); + height: calc(100dvh - 295px); } } @@ -218,10 +218,6 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* { opacity: 1; } -#gradio-chatbot { - height: 66.67vh; -} - .wrap.svelte-6roggh.svelte-6roggh { max-height: 92.5%; } @@ -246,8 +242,12 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* { padding: 0px; } - .chat { - height: calc(100vh - 274px) !important; + #chat { + height: calc(100dvh - 272px) !important; + } + + .bigchat #chat { + height: calc(100dvh - 180px) !important; } } @@ -255,7 +255,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* { margin-left: auto; margin-right: auto; max-width: 800px; - height: calc(100vh - 286px); + height: 100%; overflow-y: auto; padding-right: 20px; display: flex; @@ -265,6 +265,21 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* { padding-top: 1px; } +#chat { + height: calc(100dvh - 286px); +} + +.bigchat #chat { + height: calc(100dvh - 200px); +} + + +#show-controls { + position: absolute; + background-color: transparent; + left: calc(100% - 140px); +} + .chat > .messages { display: flex; flex-direction: column; diff --git a/extensions/gallery/script.js b/extensions/gallery/script.js index 23acfbf6..4203f0dd 100644 --- a/extensions/gallery/script.js +++ b/extensions/gallery/script.js @@ -1,23 +1,34 @@ let gallery_element = document.getElementById('gallery-extension'); +let chat_mode_element = document.getElementById('chat-mode'); + let extensions_block = gallery_element.parentElement; let extensions_block_size = extensions_block.childNodes.length; let gallery_only = (extensions_block_size == 5); main_parent.addEventListener('click', function(e) { let chat_visible = (chat_tab.offsetHeight > 0 && chat_tab.offsetWidth > 0); + let chat_mode_visible = (chat_mode_element.offsetHeight > 0 && chat_mode_element.offsetWidth > 0); let notebook_visible = (notebook_tab.offsetHeight > 0 && notebook_tab.offsetWidth > 0); let default_visible = (default_tab.offsetHeight > 0 && default_tab.offsetWidth > 0); // Only show this extension in the Chat tab if (chat_visible) { - gallery_element.style.display = 'block'; - if (gallery_only) { - extensions_block.style.display = ''; + if (chat_mode_visible) { + gallery_element.style.display = 'block'; + if (gallery_only) { + extensions_block.style.display = ''; + } + } else { + gallery_element.style.display = 'none'; + extensions_block.style.display = 'none'; } } else { gallery_element.style.display = 'none'; if (gallery_only) { extensions_block.style.display = 'none'; } + else { + extensions_block.style.display = ''; + } } }); diff --git a/js/show_controls.js b/js/show_controls.js new file mode 100644 index 00000000..83bb6c02 --- /dev/null +++ b/js/show_controls.js @@ -0,0 +1,18 @@ +const belowChatInput = document.querySelectorAll("#chat-tab > div > :nth-child(n+3), #extensions"); +const chatParent = document.getElementById("chat").parentNode; + +function toggle_controls(value) { + if (value) { + belowChatInput.forEach(element => { + element.style.display = "inherit"; + }); + + chatParent.classList.remove("bigchat"); + } else { + belowChatInput.forEach(element => { + element.style.display = "none"; + }); + + chatParent.classList.add("bigchat"); + } +} diff --git a/modules/ui.py b/modules/ui.py index 682d74f9..94bfe4a6 100644 --- a/modules/ui.py +++ b/modules/ui.py @@ -16,6 +16,8 @@ with open(Path(__file__).resolve().parent / '../js/save_files.js', 'r') as f: save_files_js = f.read() with open(Path(__file__).resolve().parent / '../js/switch_tabs.js', 'r') as f: switch_tabs_js = f.read() +with open(Path(__file__).resolve().parent / '../js/show_controls.js', 'r') as f: + show_controls_js = f.read() refresh_symbol = '🔄' delete_symbol = '🗑️' diff --git a/modules/ui_chat.py b/modules/ui_chat.py index a3a4ccf0..aec7a2ad 100644 --- a/modules/ui_chat.py +++ b/modules/ui_chat.py @@ -22,7 +22,9 @@ def create_ui(): with gr.Tab('Chat', elem_id='chat-tab'): shared.gradio['display'] = gr.HTML(value=chat_html_wrapper({'internal': [], 'visible': []}, shared.settings['name1'], shared.settings['name2'], 'chat', 'cai-chat')) - shared.gradio['textbox'] = gr.Textbox(label='Input') + + shared.gradio['textbox'] = gr.Textbox(label='Input', elem_id='chat-input') + shared.gradio['show-controls'] = gr.Checkbox(value=True, label='Show controls', elem_id='show-controls') with gr.Row(): shared.gradio['Stop'] = gr.Button('Stop', elem_id='stop') shared.gradio['Generate'] = gr.Button('Generate', elem_id='Generate', variant='primary') @@ -48,7 +50,7 @@ def create_ui(): shared.gradio['start_with'] = gr.Textbox(label='Start reply with', placeholder='Sure thing!', value=shared.settings['start_with']) with gr.Row(): - shared.gradio['mode'] = gr.Radio(choices=['chat', 'chat-instruct', 'instruct'], value=shared.settings['mode'] if shared.settings['mode'] in ['chat', 'instruct', 'chat-instruct'] else 'chat', label='Mode', info='Defines how the chat prompt is generated. In instruct and chat-instruct modes, the instruction template selected under Parameters > Instruction template must match the current model.') + shared.gradio['mode'] = gr.Radio(choices=['chat', 'chat-instruct', 'instruct'], value=shared.settings['mode'] if shared.settings['mode'] in ['chat', 'instruct', 'chat-instruct'] else 'chat', label='Mode', info='Defines how the chat prompt is generated. In instruct and chat-instruct modes, the instruction template selected under Parameters > Instruction template must match the current model.', elem_id='chat-mode') shared.gradio['chat_style'] = gr.Dropdown(choices=utils.get_available_chat_styles(), label='Chat style', value=shared.settings['chat_style'], visible=shared.settings['mode'] != 'instruct') @@ -125,6 +127,8 @@ def create_event_handlers(): shared.input_params = gradio(inputs) shared.reload_inputs = gradio(reload_arr) + shared.gradio['show-controls'].change(None, gradio('show-controls'), None, _js=f'(x) => {{{ui.show_controls_js}; toggle_controls(x)}}') + 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(