fix: use translation for aspect ratios label (#3001)

use javascript code instead of python handling for updates for lllyasviel/Fooocus#2590

Author: mashb1t

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());
 

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;
+}

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)