diff --git a/javascript/localization.js b/javascript/localization.js index 0a8394ca2e..9f13d6fcb1 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 d379a783fb..21dd483d85 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 1d5bec923e..edc9b6b151 100644 --- a/webui.py +++ b/webui.py @@ -277,21 +277,15 @@ def trigger_metadata_preview(filepath): 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)