Add a "Show controls" button to chat UI (#3590)

This commit is contained in:
oobabooga 2023-08-16 02:39:58 -03:00 committed by GitHub
parent 32ff3da941
commit 2a29208224
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 66 additions and 16 deletions

View File

@ -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;

View File

@ -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) {
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 = '';
}
}
});

18
js/show_controls.js Normal file
View File

@ -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");
}
}

View File

@ -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 = '🗑️'

View File

@ -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(