From ac122832f7bf0a785b73771e45e1bb6f19e91115 Mon Sep 17 00:00:00 2001 From: oobabooga <112222186+oobabooga@users.noreply.github.com> Date: Sun, 11 Jun 2023 14:20:16 -0300 Subject: [PATCH] Make dropdown menus more similar to automatic1111 --- css/main.css | 32 ++++++++++++++++++---------- modules/ui.py | 6 +++--- server.py | 59 ++++++++++++++++++++++----------------------------- 3 files changed, 49 insertions(+), 48 deletions(-) diff --git a/css/main.css b/css/main.css index 6911ab11..86c5480a 100644 --- a/css/main.css +++ b/css/main.css @@ -6,19 +6,29 @@ padding-top: 2.5rem } -.dark #refresh-button { - background-color: #ffffff1f; +.refresh-button { + max-width: 4.4em; + min-width: 2.2em !important; + height: 39.594px; + align-self: end; + line-height: 1em; + border-radius: 0.5em; + flex: none; } -#refresh-button { - flex: none; - margin: 0; - padding: 0; - min-width: 50px; - border: none; - box-shadow: none; - border-radius: 10px; - background-color: #0000000d; +.refresh-button-small { + max-width: 2.2em; +} + +#slim-column { + flex: none !important; + min-width: 0 !important; +} + +.slim-dropdown { + background-color: transparent !important; + border: none !important; + padding: 0 !important; } #download-label, #upload-label { diff --git a/modules/ui.py b/modules/ui.py index a10edec2..d930ee28 100644 --- a/modules/ui.py +++ b/modules/ui.py @@ -70,13 +70,13 @@ class ToolButton(gr.Button, gr.components.FormComponent): """Small button with single emoji as text, fits inside gradio forms""" def __init__(self, **kwargs): - super().__init__(variant="tool", **kwargs) + super().__init__(**kwargs) def get_block_name(self): return "button" -def create_refresh_button(refresh_component, refresh_method, refreshed_args, elem_id): +def create_refresh_button(refresh_component, refresh_method, refreshed_args, elem_class): def refresh(): refresh_method() args = refreshed_args() if callable(refreshed_args) else refreshed_args @@ -86,7 +86,7 @@ def create_refresh_button(refresh_component, refresh_method, refreshed_args, ele return gr.update(**(args or {})) - refresh_button = ToolButton(value=refresh_symbol, elem_id=elem_id) + refresh_button = ToolButton(value=refresh_symbol, elem_classes=elem_class) refresh_button.click( fn=refresh, inputs=[], diff --git a/server.py b/server.py index c56e1bcb..3db49061 100644 --- a/server.py +++ b/server.py @@ -315,22 +315,18 @@ def create_model_menus(): with gr.Row(): with gr.Column(): with gr.Row(): - shared.gradio['model_menu'] = gr.Dropdown(choices=utils.get_available_models(), value=shared.model_name, label='Model') + shared.gradio['model_menu'] = gr.Dropdown(choices=utils.get_available_models(), value=shared.model_name, label='Model', elem_classes='slim-dropdown') ui.create_refresh_button(shared.gradio['model_menu'], lambda: None, lambda: {'choices': utils.get_available_models()}, 'refresh-button') + load = gr.Button("Load", visible=not shared.settings['autoload_model']) + unload = gr.Button("Unload", elem_classes='refresh-button') + reload = gr.Button("Reload", elem_classes='refresh-button') + save_settings = gr.Button("Save settings", elem_classes='refresh-button') with gr.Column(): with gr.Row(): - shared.gradio['lora_menu'] = gr.Dropdown(multiselect=True, choices=utils.get_available_loras(), value=shared.lora_names, label='LoRA(s)') + shared.gradio['lora_menu'] = gr.Dropdown(multiselect=True, choices=utils.get_available_loras(), value=shared.lora_names, label='LoRA(s)', elem_classes='slim-dropdown') ui.create_refresh_button(shared.gradio['lora_menu'], lambda: None, lambda: {'choices': utils.get_available_loras(), 'value': shared.lora_names}, 'refresh-button') - - with gr.Column(): - with gr.Row(): - shared.gradio['lora_menu_apply'] = gr.Button(value='Apply the selected LoRAs') - with gr.Row(): - load = gr.Button("Load the model", visible=not shared.settings['autoload_model']) - unload = gr.Button("Unload the model") - reload = gr.Button("Reload the model") - save_settings = gr.Button("Save settings for this model") + shared.gradio['lora_menu_apply'] = gr.Button(value='Apply LoRAs', elem_classes='refresh-button') with gr.Row(): with gr.Column(): @@ -457,11 +453,10 @@ def create_settings_menus(default_preset): with gr.Row(): with gr.Column(): with gr.Row(): - shared.gradio['preset_menu'] = gr.Dropdown(choices=utils.get_available_presets(), value=default_preset if not shared.args.flexgen else 'Naive', label='Generation parameters preset') + shared.gradio['preset_menu'] = gr.Dropdown(choices=utils.get_available_presets(), value=default_preset if not shared.args.flexgen else 'Naive', label='Generation parameters preset', elem_classes='slim-dropdown') ui.create_refresh_button(shared.gradio['preset_menu'], lambda: None, lambda: {'choices': utils.get_available_presets()}, 'refresh-button') - with gr.Column(scale=0): - shared.gradio['save_preset'] = gr.Button('Save preset') - shared.gradio['delete_preset'] = gr.Button('Delete preset') + shared.gradio['save_preset'] = gr.Button('💾', elem_classes='refresh-button') + shared.gradio['delete_preset'] = gr.Button('🗑️', elem_classes='refresh-button') shared.gradio['seed'] = gr.Number(value=shared.settings['seed'], label='Seed (-1 for random)') with gr.Box(): @@ -675,11 +670,10 @@ def create_interface(): with gr.Row(): with gr.Column(scale=8): with gr.Row(): - shared.gradio['character_menu'] = gr.Dropdown(choices=utils.get_available_characters(), label='Character', elem_id='character-menu', info='Used in chat and chat-instruct modes.') + shared.gradio['character_menu'] = gr.Dropdown(choices=utils.get_available_characters(), label='Character', elem_id='character-menu', info='Used in chat and chat-instruct modes.', elem_classes='slim-dropdown') ui.create_refresh_button(shared.gradio['character_menu'], lambda: None, lambda: {'choices': utils.get_available_characters()}, 'refresh-button') - with gr.Column(scale=0): - shared.gradio['save_character'] = gr.Button('Save character') - shared.gradio['delete_character'] = gr.Button('Delete character') + shared.gradio['save_character'] = gr.Button('💾', elem_classes='refresh-button') + shared.gradio['delete_character'] = gr.Button('🗑️', elem_classes='refresh-button') 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') @@ -691,11 +685,11 @@ def create_interface(): shared.gradio['your_picture'] = gr.Image(label='Your picture', type='pil', value=Image.open(Path('cache/pfp_me.png')) if Path('cache/pfp_me.png').exists() else None) with gr.Row(): - shared.gradio['instruction_template'] = gr.Dropdown(choices=utils.get_available_instruction_templates(), label='Instruction template', value='None', info='Change this according to the model/LoRA that you are using. Used in instruct and chat-instruct modes.') - ui.create_refresh_button(shared.gradio['instruction_template'], lambda: None, lambda: {'choices': utils.get_available_instruction_templates()}, 'refresh-button') - with gr.Column(scale=0): - shared.gradio['save_template'] = gr.Button('Save template') - shared.gradio['delete_template'] = gr.Button('Delete template') + with gr.Row(): + shared.gradio['instruction_template'] = gr.Dropdown(choices=utils.get_available_instruction_templates(), label='Instruction template', value='None', info='Change this according to the model/LoRA that you are using. Used in instruct and chat-instruct modes.', elem_classes='slim-dropdown') + ui.create_refresh_button(shared.gradio['instruction_template'], lambda: None, lambda: {'choices': utils.get_available_instruction_templates()}, 'refresh-button') + shared.gradio['save_template'] = gr.Button('💾', elem_classes='refresh-button') + shared.gradio['delete_template'] = gr.Button('🗑️ ', elem_classes='refresh-button') shared.gradio['name1_instruct'] = gr.Textbox(value='', lines=2, label='User string') shared.gradio['name2_instruct'] = gr.Textbox(value='', lines=1, label='Bot string') @@ -762,12 +756,10 @@ def create_interface(): gr.HTML('
') 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['prompt_menu'] = gr.Dropdown(choices=utils.get_available_prompts(), value='None', label='Prompt') - ui.create_refresh_button(shared.gradio['prompt_menu'], lambda: None, lambda: {'choices': utils.get_available_prompts()}, 'refresh-button') - - with gr.Row(): - shared.gradio['save_prompt'] = gr.Button('Save prompt') - shared.gradio['delete_prompt'] = gr.Button('Delete prompt') + shared.gradio['prompt_menu'] = gr.Dropdown(choices=utils.get_available_prompts(), value='None', label='Prompt', elem_classes='slim-dropdown') + ui.create_refresh_button(shared.gradio['prompt_menu'], lambda: None, lambda: {'choices': utils.get_available_prompts()}, ['refresh-button', 'refresh-button-small']) + shared.gradio['save_prompt'] = gr.Button('💾', elem_classes=['refresh-button', 'refresh-button-small']) + shared.gradio['delete_prompt'] = gr.Button('🗑️', elem_classes=['refresh-button', 'refresh-button-small']) shared.gradio['count_tokens'] = gr.Button('Count tokens') shared.gradio['status'] = gr.Markdown('') @@ -792,11 +784,10 @@ def create_interface(): shared.gradio['count_tokens'] = gr.Button('Count tokens') with gr.Row(): - shared.gradio['prompt_menu'] = gr.Dropdown(choices=utils.get_available_prompts(), value='None', label='Prompt') + shared.gradio['prompt_menu'] = gr.Dropdown(choices=utils.get_available_prompts(), value='None', label='Prompt', elem_classes='slim-dropdown') ui.create_refresh_button(shared.gradio['prompt_menu'], lambda: None, lambda: {'choices': utils.get_available_prompts()}, 'refresh-button') - with gr.Column(): - shared.gradio['save_prompt'] = gr.Button('Save prompt') - shared.gradio['delete_prompt'] = gr.Button('Delete prompt') + shared.gradio['save_prompt'] = gr.Button('💾', elem_classes='refresh-button') + shared.gradio['delete_prompt'] = gr.Button('🗑️', elem_classes='refresh-button') shared.gradio['status'] = gr.Markdown('')