mirror of
https://github.com/oobabooga/text-generation-webui.git
synced 2024-10-01 01:26:03 -04:00
Add a "Show controls" button to chat UI (#3590)
This commit is contained in:
parent
32ff3da941
commit
2a29208224
37
css/main.css
37
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;
|
||||
|
@ -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
18
js/show_controls.js
Normal 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");
|
||||
}
|
||||
}
|
@ -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 = '🗑️'
|
||||
|
@ -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(
|
||||
|
Loading…
Reference in New Issue
Block a user