resolved #8 ; web interface language is now browser-specific

MK2112 · MK2112 · commit 21f4dd72121c · 2025-05-16T19:06:02.000+02:00
diff --git a/static/js/main.js b/static/js/main.js
@@ -1,3 +1,22 @@
+// Language detection and forwarding
+document.addEventListener('DOMContentLoaded', function() {
+    // Only send if not already set in session (could check via a cookie or a hidden field)
+    if (!window.sessionStorage.getItem('languageSet')) {
+        var lang = navigator.language || navigator.userLanguage;
+        fetch('/language', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({language: lang.replace('-', '_')})
+        }).then(function(response) {
+            if (response.ok) {
+                window.sessionStorage.setItem('languageSet', '1');
+                // Reload the page to apply new language if needed
+                window.location.reload();
+            }
+        });
+    }
+});
+
 // Accumulate all selected/dropped files in this array
 let uploadedFiles = [];
 
diff --git a/templates/index.html b/templates/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="{{ lang_code }}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -13,34 +13,38 @@
         <h1>
             <a class="static-anchor" target="_blank" href="https://github.com/mk2112/any_to_any.py">{{ title }}</a>
             <p>Web</p>
-            <a class="github-button" href="https://github.com/mk2112/any_to_any.py/fork" data-icon="octicon-repo-forked" aria-label="Fork mk2112/any_to_any.py on GitHub">Fork</a>
-            <a class="github-button" href="https://github.com/mk2112/any_to_any.py" data-icon="octicon-star" aria-label="Star mk2112/any_to_any.py on GitHub">Star</a>
+            <a class="github-button" href="https://github.com/mk2112/any_to_any.py/fork" data-icon="octicon-repo-forked" aria-label="Fork mk2112/any_to_any.py">Fork</a>
+            <a class="github-button" href="https://github.com/mk2112/any_to_any.py" data-icon="octicon-star" aria-label="Star mk2112/any_to_any.py">Star</a>
         </h1>
     </header>
     <div class="fade-in">
         <main>
             <noscript>
                 <div class="no-script">
-                    <p><code>{{ title }} Web</code> requires <code>JavaScript</code> to work as intended.</p>
-                    <p>Please enable <code>JavaScript</code> in your browser settings.</p>
+                {% if lang_code == "ar" %}
+                    <p>{{ translations['js_warn_intro'].replace("[object]", title ~ " Web") }}</p>
+                {% else %}
+                    <p><code>{{ title }} Web</code> {{ translations['js_warn_intro'] }}</p>
+                {% endif %}
+                    <p>{{ translations['js_warn_outro'] }}</p>
                 </div>
             </noscript>
             <form id="conversion-form" method="post" enctype="multipart/form-data">
                 <div id="drop-area" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="triggerUploadDialogue(event)">
-                    <p>Drag and drop or click to select files</p>
+                    <p>{{ translations['drag_drop_hint'] }}</p>
                     <input type="file" name="files" id="files" multiple onchange="handleFiles(this.files, true)">
                     <ul id="file-list"></ul>
                 </div>
                 <div id="conversion-options">
-                    <label for="conversion-type">Convert to:</label>
+                    <label for="conversion-type">{{ translations['convert_to'] }}:</label>
                     <select id="conversion-type">
                         {% for option in options %}
                         <option value="{{ option }}">{{ option }}</option>
                         {% endfor %}
                     </select>
-                    <button title="Convert All Given Files To Selected Format" type="button" onclick="submitForm('/convert')">Convert</button>
-                    <button title="Merge Movie Data With The Audio Track Of An Equally Named Audio File" type="button" onclick="submitForm('/merge')">Merge</button>
-                    <button title="Glue Files Of Same Type Together, Back To Back, In Above Displayed Order" type="button" onclick="submitForm('/concat')">Concatenate</button>
+                    <button title="{{ translations['convert_web_help'] }}" type="button" onclick="submitForm('/convert')">{{ translations['convert'] }}</button>
+                    <button title="{{ translations['merge_web_help'] }}" type="button" onclick="submitForm('/merge')">{{ translations['merge'] }}</button>
+                    <button title="{{ translations['concatenate_web_help'] }}" type="button" onclick="submitForm('/concat')">{{ translations['concatenate'] }}</button>
                 </div>
             </form>
             <div id="progress-container" style="display: none; margin-top: 1em;">
diff --git a/web_to_any.py b/web_to_any.py
@@ -3,15 +3,18 @@
 import tempfile
 import threading
 import webbrowser
+import modules.language_support as lang
 from any_to_any import AnyToAny
-from flask import Flask, render_template, request, send_file, Response, jsonify, abort
+from flask import Flask, render_template, request, send_file, Response, jsonify, abort, session
 from flask_uploads import UploadSet, configure_uploads, ALL
 
 """
 Web server providing a web interface as extension to the CLI-based any_to_any.py
 """
 
 app = Flask(__name__, template_folder=os.path.abspath("templates"))
+app.secret_key = os.urandom(32) # Distinguish session
+
 host = "127.0.0.1"
 port = 5000
 any_to_any = AnyToAny()
@@ -66,7 +69,17 @@ def process_params() -> tuple:
 
 @app.route("/")
 def index():
-    return render_template("index.html", title="Any_To_Any.py", options=any_to_any.supported_formats)
+    lang_code = session.get('language', 'en_US')
+    language = lang.LANGUAGE_CODES[lang_code]
+    translations = lang.get_all_translations(language)
+    return render_template(
+        "index.html",
+        title="Any_To_Any.py",
+        options=any_to_any.supported_formats,
+        translations=translations,
+        lang_code=lang_code[:2],
+        supported_languages=lang.LANGUAGE_CODES
+    )
 
 
 def send_to_backend(
@@ -186,6 +199,23 @@ def download_zip(job_id):
         abort(404)
     return push_zip(cv_dir)
 
+@app.route('/language', methods=['POST'])
+def set_language():
+    # Web interface language is set via the browser, *not* via sys language
+    # This POST helps retrieve client's language info
+    data = request.get_json()
+    lang_code = data.get('language')
+    if "_" not in lang_code:
+        for code, _ in lang.LANGUAGE_CODES.items():
+            if lang_code in code:
+                lang_code = code
+                break
+    if lang_code and lang_code in lang.LANGUAGE_CODES:
+        session['language'] = lang_code
+        language = lang.LANGUAGE_CODES[lang_code]
+        return {'success': True, 'lang_code': lang_code, 'language': language}
+    return {'success': False}, 400
+
 if __name__ == "__main__":
     webbrowser.open(any_to_any.web_host)
     app.run(debug=False, host=host, port=port)
