Improves and refactors multi language support

Author: ramon-victor

client/html/index.html

@@ -56,11 +56,10 @@
 						</div>
 						<div class="field">
 							<span>{{_('Language')}}</span>
-							<select class="dropdown" id="language" onchange="changeLanguage(this.value)">
-								<option value="en">en</option>
-								<option value="es">es</option>
-								<option value="pt_BR">pt_BR</option>
-							</select>
+							<select
+								class="dropdown"
+								id="language"
+								onchange="changeLanguage(this.value)"></select>
 						</div>
 					</div>
 					<a class="info" href="https://github.com/ramonvc/gptfree-jailbreak-webui" target="_blank">

client/js/change-language.js

@@ -1,35 +1,47 @@
-getCurrentLanguage().then((currentLanguage) => {
-	var savedLanguage = localStorage.getItem("language") || currentLanguage;
-	setLanguageOnPageLoad(savedLanguage);
-});
-
-async function getCurrentLanguage() {
-	try {
-		const response = await fetch("/get-locale");
-		return await response.text();
-	} catch (error) {
-		console.error("Failed to fetch current language");
-		return "en";
-	}
-}
-
-function changeLanguage(lang) {
-	fetch("/change-language", {
-		method: "POST",
-		headers: {
-			"Content-Type": "application/json",
-		},
-		body: JSON.stringify({ language: lang }),
-	}).then((response) => {
-		if (response.ok) {
-			localStorage.setItem("language", lang);
-			location.reload();
-		} else {
-			console.error("Failed to change language");
-		}
-	});
-}
-
-function setLanguageOnPageLoad(language) {
-	document.getElementById("language").value = language;
-}
+document.addEventListener('DOMContentLoaded', fetchLanguages);  
+  
+async function fetchLanguages() {  
+    try {  
+        const [languagesResponse, currentLanguageResponse] = await Promise.all([  
+            fetch('/get-languages'),  
+            fetch('/get-locale')  
+        ]);  
+  
+        const languages = await languagesResponse.json();  
+        const currentLanguage = await currentLanguageResponse.text();  
+  
+        const languageSelect = document.getElementById('language');  
+        languages.forEach(lang => {  
+            const option = document.createElement('option');  
+            option.value = lang;  
+            option.textContent = lang;  
+            languageSelect.appendChild(option);  
+        });  
+  
+        const savedLanguage = localStorage.getItem("language") || currentLanguage;  
+        setLanguageOnPageLoad(savedLanguage);  
+    } catch (error) {  
+        console.error("Failed to fetch languages or current language");  
+    }  
+}  
+  
+function setLanguageOnPageLoad(language) {  
+    document.getElementById("language").value = language;  
+}  
+  
+function changeLanguage(lang) {  
+    fetch("/change-language", {  
+        method: "POST",  
+        headers: {  
+            "Content-Type": "application/json",  
+        },  
+        body: JSON.stringify({ language: lang }),  
+    }).then((response) => {  
+        if (response.ok) {  
+            localStorage.setItem("language", lang);  
+            location.reload();  
+        } else {  
+            console.error("Failed to change language");  
+        }  
+    });  
+}  

run.py

@@ -1,10 +1,11 @@
 import secrets
+
 from server.bp import bp
 from server.website import Website
 from server.backend import Backend_Api
+from server.babel import create_babel
 from json import load
-from flask import Flask, session
-from flask_babel import Babel
+from flask import Flask
 
 if __name__ == '__main__':
 
@@ -15,15 +16,10 @@
 
     # Create the app
     app = Flask(__name__)
-    app.secret_key = secrets.token_hex(16) 
-    
+    app.secret_key = secrets.token_hex(16)
+
     # Set up Babel
-    babel = Babel(app)
-    app.config['BABEL_DEFAULT_LOCALE'] = 'es'
-    app.config['BABEL_LANGUAGES'] = ['en', 'es', 'pt-br']
-    def get_locale():
-        return session.get('language', 'en')
-    babel.init_app(app, locale_selector=get_locale)
+    create_babel(app)
 
     # Set up the website routes
     site = Website(bp, url_prefix)
@@ -42,7 +38,7 @@ def get_locale():
             view_func=backend_api.routes[route]['function'],
             methods=backend_api.routes[route]['methods'],
         )
-    
+
     # Register the blueprint
     app.register_blueprint(bp, url_prefix=url_prefix)
 

server/babel.py

@@ -0,0 +1,50 @@
+from flask import request, session, jsonify
+from flask_babel import Babel
+
+BABEL_DEFAULT_LOCALE = 'en'
+BABEL_LANGUAGES = [
+    'ar',
+    'bn',
+    'de',
+    'en',
+    'es',
+    'fr',
+    'hi',
+    'id',
+    'ja',
+    'jv',
+    'ko',
+    'mr',
+    'pa',
+    'pt_BR',
+    'ru',
+    'ta',
+    'te',
+    'tr',
+    'uk',
+    'ur',
+    'vi',
+    'zh',
+]
+
+
+def create_babel(app):
+    """Create and initialize a Babel instance with the given Flask app."""
+    babel = Babel(app)
+    app.config['BABEL_DEFAULT_LOCALE'] = BABEL_DEFAULT_LOCALE
+    app.config['BABEL_LANGUAGES'] = BABEL_LANGUAGES
+
+    babel.init_app(app, locale_selector=get_locale)
+
+
+def get_locale():
+    """Get the user's locale from the session or the request's accepted languages."""
+    user_language = session.get('language')
+    if user_language is not None:
+        return user_language
+
+    return request.accept_languages.best_match(BABEL_LANGUAGES)
+
+
+def get_languages():
+    return jsonify(BABEL_LANGUAGES)

server/website.py

@@ -2,6 +2,7 @@
 from flask_babel import refresh
 from time import time
 from os import urandom
+from server.babel import get_locale, get_languages
 
 
 class Website:
@@ -28,6 +29,10 @@ def __init__(self, bp, url_prefix) -> None:
             '/get-locale': {
                 'function': self.get_locale,
                 'methods': ['GET']
+            },
+            '/get-languages': {
+                'function': self.get_languages,
+                'methods': ['GET']
             }
         }
 
@@ -45,7 +50,9 @@ def change_language(self):
         session['language'] = data.get('language')
         refresh()
         return '', 204
-    
-    def get_locale(self):  
-        return session.get('language', 'en')  
 
+    def get_locale(self):
+        return get_locale()
+    
+    def get_languages(self):  
+        return get_languages()