feat: make ui settings more compact (#2590)

* Slightly more compact ui settings

Changed Radio to Dropdown.

* feat: change preset from option to select, add accordion for resolution

* feat: change title of aspect ratios accordion on load and update

* refactor: reorder image number slider, code cleanup

* fix: add missing scroll down for metadata tab

* fix: adjust indent

---------

Co-authored-by: Manuel Schmid <dev@mash1t.de>
Co-authored-by: Manuel Schmid <9307310+mashb1t@users.noreply.github.com>
This commit is contained in:
Alexdnk 2024-05-26 23:10:29 +07:00 committed by GitHub
parent 67289dd0fe
commit 57d2f2a0dd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 32 additions and 13 deletions

View File

@ -107,10 +107,14 @@ progress::after {
overflow: auto !important; overflow: auto !important;
} }
.aspect_ratios label { .performance_selection label {
width: 140px !important; width: 140px !important;
} }
.aspect_ratios label {
flex: calc(50% - 5px) !important;
}
.aspect_ratios label span { .aspect_ratios label span {
white-space: nowrap !important; white-space: nowrap !important;
} }

View File

@ -231,7 +231,7 @@ with shared.gradio_root:
desc_input_image.upload(trigger_show_image_properties, inputs=desc_input_image, desc_input_image.upload(trigger_show_image_properties, inputs=desc_input_image,
outputs=desc_image_size, show_progress=False, queue=False) outputs=desc_image_size, show_progress=False, queue=False)
with gr.TabItem(label='Metadata') as load_tab: with gr.TabItem(label='Metadata') as metadata_tab:
with gr.Column(): with gr.Column():
metadata_input_image = grh.Image(label='For images created by Fooocus', source='upload', type='filepath') metadata_input_image = grh.Image(label='For images created by Fooocus', source='upload', type='filepath')
metadata_json = gr.JSON(label='Metadata') metadata_json = gr.JSON(label='Metadata')
@ -264,25 +264,40 @@ with shared.gradio_root:
inpaint_tab.select(lambda: 'inpaint', outputs=current_tab, queue=False, _js=down_js, show_progress=False) inpaint_tab.select(lambda: 'inpaint', outputs=current_tab, queue=False, _js=down_js, show_progress=False)
ip_tab.select(lambda: 'ip', outputs=current_tab, queue=False, _js=down_js, show_progress=False) ip_tab.select(lambda: 'ip', outputs=current_tab, queue=False, _js=down_js, show_progress=False)
desc_tab.select(lambda: 'desc', outputs=current_tab, queue=False, _js=down_js, show_progress=False) desc_tab.select(lambda: 'desc', outputs=current_tab, queue=False, _js=down_js, show_progress=False)
metadata_tab.select(lambda: 'metadata', outputs=current_tab, queue=False, _js=down_js, show_progress=False)
with gr.Column(scale=1, visible=modules.config.default_advanced_checkbox) as advanced_column: with gr.Column(scale=1, visible=modules.config.default_advanced_checkbox) as advanced_column:
with gr.Tab(label='Setting'): with gr.Tab(label='Setting'):
if not args_manager.args.disable_preset_selection: if not args_manager.args.disable_preset_selection:
preset_selection = gr.Radio(label='Preset', preset_selection = gr.Dropdown(label='Preset',
choices=modules.config.available_presets, choices=modules.config.available_presets,
value=args_manager.args.preset if args_manager.args.preset else "initial", value=args_manager.args.preset if args_manager.args.preset else "initial",
interactive=True) interactive=True)
performance_selection = gr.Radio(label='Performance', performance_selection = gr.Radio(label='Performance',
choices=flags.Performance.list(), choices=flags.Performance.list(),
value=modules.config.default_performance) value=modules.config.default_performance,
aspect_ratios_selection = gr.Radio(label='Aspect Ratios', choices=modules.config.available_aspect_ratios_labels, elem_classes=['performance_selection'])
value=modules.config.default_aspect_ratio, info='width × height', with gr.Accordion(label='Aspect Ratios', open=False) as aspect_ratios_accordion:
elem_classes='aspect_ratios') aspect_ratios_selection = gr.Radio(label='Aspect Ratios', show_label=False,
choices=modules.config.available_aspect_ratios_labels,
value=modules.config.default_aspect_ratio,
info='width × height',
elem_classes='aspect_ratios')
def change_aspect_ratio(text):
import re
regex = re.compile('<.*?>')
cleaned_text = re.sub(regex, '', text)
return gr.update(label='Aspect Ratios ' + cleaned_text)
aspect_ratios_selection.change(change_aspect_ratio, inputs=aspect_ratios_selection, outputs=aspect_ratios_accordion, queue=False, show_progress=False)
shared.gradio_root.load(change_aspect_ratio, inputs=aspect_ratios_selection, outputs=aspect_ratios_accordion, queue=False, show_progress=False)
image_number = gr.Slider(label='Image Number', minimum=1, maximum=modules.config.default_max_image_number, step=1, value=modules.config.default_image_number) image_number = gr.Slider(label='Image Number', minimum=1, maximum=modules.config.default_max_image_number, step=1, value=modules.config.default_image_number)
output_format = gr.Radio(label='Output Format', output_format = gr.Radio(label='Output Format',
choices=flags.OutputFormat.list(), choices=flags.OutputFormat.list(),
value=modules.config.default_output_format) value=modules.config.default_output_format)
negative_prompt = gr.Textbox(label='Negative Prompt', show_label=True, placeholder="Type prompt here.", negative_prompt = gr.Textbox(label='Negative Prompt', show_label=True, placeholder="Type prompt here.",
info='Describing what you do not want to see.', lines=2, info='Describing what you do not want to see.', lines=2,
@ -603,7 +618,7 @@ with shared.gradio_root:
return modules.meta_parser.load_parameter_button_click(json.dumps(preset_prepared), is_generating) return modules.meta_parser.load_parameter_button_click(json.dumps(preset_prepared), is_generating)
preset_selection.change(preset_selection_change, inputs=[preset_selection, state_is_generating], outputs=load_data_outputs, queue=False, show_progress=True) \ preset_selection.change(preset_selection_change, inputs=[preset_selection, state_is_generating], outputs=load_data_outputs, queue=False, show_progress=True) \
.then(fn=style_sorter.sort_styles, inputs=style_selections, outputs=style_selections, queue=False, show_progress=False) \ .then(fn=style_sorter.sort_styles, inputs=style_selections, outputs=style_selections, queue=False, show_progress=False)
performance_selection.change(lambda x: [gr.update(interactive=not flags.Performance.has_restricted_features(x))] * 11 + performance_selection.change(lambda x: [gr.update(interactive=not flags.Performance.has_restricted_features(x))] * 11 +
[gr.update(visible=not flags.Performance.has_restricted_features(x))] * 1 + [gr.update(visible=not flags.Performance.has_restricted_features(x))] * 1 +