From 57d2f2a0ddf3eb44e562578283208b496505474c Mon Sep 17 00:00:00 2001 From: Alexdnk <83111151+Alexdnk@users.noreply.github.com> Date: Sun, 26 May 2024 23:10:29 +0700 Subject: [PATCH 1/3] 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 Co-authored-by: Manuel Schmid <9307310+mashb1t@users.noreply.github.com> --- css/style.css | 6 +++++- webui.py | 39 +++++++++++++++++++++++++++------------ 2 files changed, 32 insertions(+), 13 deletions(-) diff --git a/css/style.css b/css/style.css index 649f77c5..18bacaaf 100644 --- a/css/style.css +++ b/css/style.css @@ -107,10 +107,14 @@ progress::after { overflow: auto !important; } -.aspect_ratios label { +.performance_selection label { width: 140px !important; } +.aspect_ratios label { + flex: calc(50% - 5px) !important; +} + .aspect_ratios label span { white-space: nowrap !important; } diff --git a/webui.py b/webui.py index d72eb2ec..1d5bec92 100644 --- a/webui.py +++ b/webui.py @@ -231,7 +231,7 @@ with shared.gradio_root: desc_input_image.upload(trigger_show_image_properties, inputs=desc_input_image, 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(): metadata_input_image = grh.Image(label='For images created by Fooocus', source='upload', type='filepath') 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) 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) + 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.Tab(label='Setting'): if not args_manager.args.disable_preset_selection: - preset_selection = gr.Radio(label='Preset', - choices=modules.config.available_presets, - value=args_manager.args.preset if args_manager.args.preset else "initial", - interactive=True) + preset_selection = gr.Dropdown(label='Preset', + choices=modules.config.available_presets, + value=args_manager.args.preset if args_manager.args.preset else "initial", + interactive=True) performance_selection = gr.Radio(label='Performance', choices=flags.Performance.list(), - value=modules.config.default_performance) - aspect_ratios_selection = gr.Radio(label='Aspect Ratios', choices=modules.config.available_aspect_ratios_labels, - value=modules.config.default_aspect_ratio, info='width × height', - elem_classes='aspect_ratios') + value=modules.config.default_performance, + elem_classes=['performance_selection']) + with gr.Accordion(label='Aspect Ratios', open=False) as aspect_ratios_accordion: + 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) output_format = gr.Radio(label='Output Format', - choices=flags.OutputFormat.list(), - value=modules.config.default_output_format) + choices=flags.OutputFormat.list(), + value=modules.config.default_output_format) 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, @@ -603,7 +618,7 @@ with shared.gradio_root: 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) \ - .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 + [gr.update(visible=not flags.Performance.has_restricted_features(x))] * 1 + From c227cf1f5676381c155f2609e75f9d259cc9ba4e Mon Sep 17 00:00:00 2001 From: Manuel Schmid Date: Sun, 26 May 2024 18:16:18 +0200 Subject: [PATCH 2/3] docs: update changelog --- update_log.md | 1 + 1 file changed, 1 insertion(+) diff --git a/update_log.md b/update_log.md index e9544da3..77d70cb4 100644 --- a/update_log.md +++ b/update_log.md @@ -1,5 +1,6 @@ # [2.4.0](https://github.com/lllyasviel/Fooocus/releases/tag/v2.4.0) +* Change settings tab elements to be more compact * Add clip skip slider * Add select for custom VAE * Add new style "Random Style" From de34023c797aace9dbc8ddecb439eda84287fba1 Mon Sep 17 00:00:00 2001 From: Manuel Schmid <9307310+mashb1t@users.noreply.github.com> Date: Sun, 26 May 2024 19:23:21 +0200 Subject: [PATCH 3/3] fix: use translation for aspect ratios label (#3001) use javascript code instead of python handling for updates for https://github.com/lllyasviel/Fooocus/pull/2590 --- javascript/localization.js | 6 ++++++ javascript/script.js | 5 +++++ webui.py | 12 +++--------- 3 files changed, 14 insertions(+), 9 deletions(-) diff --git a/javascript/localization.js b/javascript/localization.js index 0a8394ca..9f13d6fc 100644 --- a/javascript/localization.js +++ b/javascript/localization.js @@ -80,6 +80,12 @@ function refresh_style_localization() { processNode(document.querySelector('.style_selections')); } +function refresh_aspect_ratios_label(value) { + label = document.querySelector('#aspect_ratios_accordion div span[data-original-text="Aspect Ratios"]') + translation = getTranslation("Aspect Ratios") + label.textContent = translation + " " + htmlDecode(value) +} + function localizeWholePage() { processNode(gradioApp()); diff --git a/javascript/script.js b/javascript/script.js index d379a783..21dd483d 100644 --- a/javascript/script.js +++ b/javascript/script.js @@ -256,3 +256,8 @@ function set_theme(theme) { window.location.replace(gradioURL + '?__theme=' + theme); } } + +function htmlDecode(input) { + var doc = new DOMParser().parseFromString(input, "text/html"); + return doc.documentElement.textContent; +} \ No newline at end of file diff --git a/webui.py b/webui.py index 1d5bec92..edc9b6b1 100644 --- a/webui.py +++ b/webui.py @@ -277,21 +277,15 @@ with shared.gradio_root: choices=flags.Performance.list(), value=modules.config.default_performance, elem_classes=['performance_selection']) - with gr.Accordion(label='Aspect Ratios', open=False) as aspect_ratios_accordion: + with gr.Accordion(label='Aspect Ratios', open=False, elem_id='aspect_ratios_accordion') as aspect_ratios_accordion: 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) + aspect_ratios_selection.change(lambda x: None, inputs=aspect_ratios_selection, queue=False, show_progress=False, _js='(x)=>{refresh_aspect_ratios_label(x);}') + shared.gradio_root.load(lambda x: None, inputs=aspect_ratios_selection, queue=False, show_progress=False, _js='(x)=>{refresh_aspect_ratios_label(x);}') image_number = gr.Slider(label='Image Number', minimum=1, maximum=modules.config.default_max_image_number, step=1, value=modules.config.default_image_number)