Merge pull request #10335 from akx/l10n-dis-take-2

Localization fixes

javascript/localization.js

@@ -109,18 +109,23 @@ function processNode(node){
 }
 
 function dumpTranslations(){
+    if(!hasLocalization()) {
+        // If we don't have any localization,
+        // we will not have traversed the app to find
+        // original_lines, so do that now.
+        processNode(gradioApp());
+    }
     var dumped = {}
     if (localization.rtl) {
-        dumped.rtl = true
+        dumped.rtl = true;
     }
 
-    Object.keys(original_lines).forEach(function(text){
-        if(dumped[text] !== undefined)  return
-
-        dumped[text] = localization[text] || text
-    })
+    for (const text in original_lines) {
+        if(dumped[text] !== undefined) continue;
+        dumped[text] = localization[text] || text;
+    }
 
-    return dumped
+    return dumped;
 }
 
 function download_localization() {
@@ -137,7 +142,11 @@ function download_localization() {
     document.body.removeChild(element);
 }
 
-if(hasLocalization()) {
+document.addEventListener("DOMContentLoaded", function () {
+    if (!hasLocalization()) {
+        return;
+    }
+
     onUiUpdate(function (m) {
         m.forEach(function (mutation) {
             mutation.addedNodes.forEach(function (node) {
@@ -146,26 +155,23 @@ if(hasLocalization()) {
         });
     })
 
+    processNode(gradioApp())
 
-    document.addEventListener("DOMContentLoaded", function () {
-        processNode(gradioApp())
+    if (localization.rtl) {  // if the language is from right to left,
+        (new MutationObserver((mutations, observer) => { // wait for the style to load
+            mutations.forEach(mutation => {
+                mutation.addedNodes.forEach(node => {
+                    if (node.tagName === 'STYLE') {
+                        observer.disconnect();
 
-        if (localization.rtl) {  // if the language is from right to left,
-            (new MutationObserver((mutations, observer) => { // wait for the style to load
-                mutations.forEach(mutation => {
-                    mutation.addedNodes.forEach(node => {
-                        if (node.tagName === 'STYLE') {
-                            observer.disconnect();
-
-                            for (const x of node.sheet.rules) {  // find all rtl media rules
-                                if (Array.from(x.media || []).includes('rtl')) {
-                                    x.media.appendMedium('all');  // enable them
-                                }
+                        for (const x of node.sheet.rules) {  // find all rtl media rules
+                            if (Array.from(x.media || []).includes('rtl')) {
+                                x.media.appendMedium('all');  // enable them
                             }
                         }
-                    })
-                });
-            })).observe(gradioApp(), { childList: true });
-        }
-    })
-}
+                    }
+                })
+            });
+        })).observe(gradioApp(), { childList: true });
+    }
+})

modules/localization.py

@@ -23,7 +23,7 @@ def list_localizations(dirname):
         localizations[fn] = file.path
 
 
-def localization_js(current_localization_name):
+def localization_js(current_localization_name: str) -> str:
     fn = localizations.get(current_localization_name, None)
     data = {}
     if fn is not None:
@@ -34,4 +34,4 @@ def localization_js(current_localization_name):
             print(f"Error loading localization from {fn}:", file=sys.stderr)
             print(traceback.format_exc(), file=sys.stderr)
 
-    return f"var localization = {json.dumps(data)}\n"
+    return f"window.localization = {json.dumps(data)}"

modules/ui.py

@@ -1771,12 +1771,11 @@ def webpath(fn):
 
 
 def javascript_html():
-    script_js = os.path.join(script_path, "script.js")
-    head = f'<script type="text/javascript" src="{webpath(script_js)}"></script>\n'
+    # Ensure localization is in `window` before scripts
+    head = f'<script type="text/javascript">{localization.localization_js(shared.opts.localization)}</script>\n'
 
-    inline = f"{localization.localization_js(shared.opts.localization)};"
-    if cmd_opts.theme is not None:
-        inline += f"set_theme('{cmd_opts.theme}');"
+    script_js = os.path.join(script_path, "script.js")
+    head += f'<script type="text/javascript" src="{webpath(script_js)}"></script>\n'
 
     for script in modules.scripts.list_scripts("javascript", ".js"):
         head += f'<script type="text/javascript" src="{webpath(script.path)}"></script>\n'
@@ -1784,7 +1783,8 @@ def javascript_html():
     for script in modules.scripts.list_scripts("javascript", ".mjs"):
         head += f'<script type="module" src="{webpath(script.path)}"></script>\n'
 
-    head += f'<script type="text/javascript">{inline}</script>\n'
+    if cmd_opts.theme:
+        head += f'<script type="text/javascript">set_theme(\"{cmd_opts.theme}\");</script>\n'
 
     return head