Add UI locale selector

public/index.html

@@ -49,7 +49,8 @@
     <link rel="icon" type="image/x-icon" href="favicon.ico">
     <script>
         function applyLocale() {
-            var language = navigator.language || navigator.userLanguage;
+            const overrideLanguage = localStorage.getItem("language");
+            var language = overrideLanguage || navigator.language || navigator.userLanguage;
             language = language.toLowerCase();
             console.log(language)
             //load the appropriate language file
@@ -2484,6 +2485,18 @@
                                     </div>
                                 </div>
                             </div>
+                            <div id="UI-language-block" class="flex-container flexFlowColumn">
+                                <h4>
+                                    <span data-i18n="UI Language">UI Language</span>
+                                </h4>
+                                <div class="flex-container flexnowrap alignitemscenter">
+                                    <select id="ui_language_select" class="margin0 margin-r5">
+                                        <option value="" data-i18n="Browser default">
+                                            Browser default
+                                        </option>
+                                    </select>
+                                </div>
+                            </div>
                             <div id="UI-presets-block" class="flex-container flexFlowColumn">
                                 <h4>
                                     <span data-i18n="UI Theme Preset">UI Theme Preset</span>

public/scripts/power-user.js

@@ -202,6 +202,7 @@ let movingUIPresets = [];
 let instruct_presets = [];
 
 const storage_keys = {
+    ui_language: "language",
     fast_ui_mode: "TavernAI_fast_ui_mode",
     avatar_style: "TavernAI_avatar_style",
     chat_display: "TavernAI_chat_display",
@@ -1339,8 +1340,25 @@ function doResetPanels() {
     $("#movingUIreset").trigger('click');
 }
 
+function addLanguagesToDropdown() {
+    $.getJSON('i18n.json', function (data) {
+        if (!Array.isArray(data?.lang)) {
+            return;
+        }
 
+        for (const lang of data.lang) {
+            const option = document.createElement('option');
+            option.value = lang;
+            option.innerText = lang;
+            $('#ui_language_select').append(option);
+        }
 
+        const selectedLanguage = localStorage.getItem(storage_keys.ui_language);
+        if (selectedLanguage) {
+            $('#ui_language_select').val(selectedLanguage);
+        }
+    });
+}
 
 function setAvgBG() {
     const bgimg = new Image();
@@ -2090,6 +2108,23 @@ $(document).ready(() => {
         saveSettingsDebounced();
     });
 
+    $('#ui_language_select').on('change', async function () {
+        const language = $(this).val();
+
+        if (language) {
+            localStorage.setItem(storage_keys.ui_language, language);
+            window["applyLocale"]();
+        } else {
+            const result = confirm("Are you sure you want to reset the language to default? This will reload the page.")
+            if (result) {
+                localStorage.removeItem(storage_keys.ui_language);
+                location.reload();
+            } else {
+                $(this).val(localStorage.getItem(storage_keys.ui_language));
+            }
+        }
+    })
+
     $(window).on('focus', function () {
         browser_has_focus = true;
     });
@@ -2105,4 +2140,5 @@ $(document).ready(() => {
     registerSlashCommand('cut', doMesCut, [], ' <span class="monospace">(requred number)</span> – cuts the specified message from the chat', true, true);
     registerSlashCommand('resetpanels', doResetPanels, ['resetui'], ' – resets UI panels to original state.', true, true);
     registerSlashCommand('bgcol', setAvgBG, [], ' – WIP test of auto-bg avg coloring', true, true);
+    addLanguagesToDropdown();
 });