Add debug functions menu

public/index.html

@@ -2961,8 +2961,14 @@
                                 </div>
                             </div>
 
-                            <div id="reload_chat" class="menu_button whitespacenowrap" data-i18n="Reload Chat">
-                                Reload Chat
+                            <div class="flex-container">
+                                <div id="reload_chat" class="menu_button whitespacenowrap" data-i18n="Reload Chat">
+                                    Reload Chat
+                                </div>
+
+                                <div id="debug_menu" class="menu_button whitespacenowrap" data-i18n="Debug Menu">
+                                    Debug Menu
+                                </div>
                             </div>
                         </div>
 

public/script.js

@@ -70,6 +70,7 @@ import {
     MAX_CONTEXT_DEFAULT,
     renderStoryString,
     sortEntitiesList,
+    registerDebugFunction,
 } from "./scripts/power-user.js";
 
 import {
@@ -6658,6 +6659,7 @@ window["SillyTavern"].getContext = function () {
         saveReply,
         registerSlashCommand: registerSlashCommand,
         registerHelper: registerExtensionHelper,
+        registedDebugFunction: registerDebugFunction,
     };
 };
 

public/scripts/i18n.js

@@ -1,3 +1,4 @@
+import { registerDebugFunction } from "./power-user.js";
 import { waitUntilCondition } from "./utils.js";
 
 const storageKey = "language";
@@ -48,9 +49,9 @@ function getMissingTranslations() {
 
     console.table(uniqueMissingData);
     console.log(missingDataMap);
-}
 
-window["getMissingTranslations"] = getMissingTranslations;
+    toastr.success(`Found ${uniqueMissingData.length} missing translations. See browser console for details.`);
+}
 
 export function applyLocale(root = document) {
     const overrideLanguage = localStorage.getItem("language");
@@ -106,7 +107,6 @@ function addLanguagesToDropdown() {
 
 jQuery(async () => {
     waitUntilCondition(() => !!localeData);
-    window["applyLocale"] = applyLocale;
     applyLocale();
     addLanguagesToDropdown();
 
@@ -121,4 +121,7 @@ jQuery(async () => {
 
         location.reload();
     });
+
+    registerDebugFunction('getMissingTranslations', 'Get missing translations', 'Detects missing localization data and dumps the data into the browser console.', getMissingTranslations);
+    registerDebugFunction('applyLocale', 'Apply locale', 'Reapplies the currently selected locale to the page.', applyLocale);
 });

public/scripts/power-user.js

@@ -13,7 +13,8 @@ import {
     getCurrentChatId,
     printCharacters,
     setCharacterId,
-    setEditedMessageId
+    setEditedMessageId,
+    renderTemplate,
 } from "../script.js";
 import { isMobile, initMovingUI } from "./RossAscends-mods.js";
 import {
@@ -232,6 +233,7 @@ const storage_keys = {
 };
 
 let browser_has_focus = true;
+const debug_functions = [];
 
 function playMessageSound() {
     if (!power_user.play_message_sound) {
@@ -653,6 +655,22 @@ async function applyMovingUIPreset(name) {
     loadMovingUIState()
 }
 
+/**
+ * Register a function to be executed when the debug menu is opened.
+ * @param {string} functionId Unique ID for the function.
+ * @param {string} name Name of the function.
+ * @param {string} description Description of the function.
+ * @param {function} func Function to be executed.
+ */
+export function registerDebugFunction(functionId, name, description, func) {
+    debug_functions.push({ functionId, name, description, func });
+}
+
+function showDebugMenu() {
+    const template = renderTemplate('debug', { functions: debug_functions });
+    callPopup(template, 'text', '', { wide: true, large: true });
+}
+
 switchUiMode();
 applyFontScale('forced');
 applyThemeColor();
@@ -2113,6 +2131,21 @@ $(document).ready(() => {
         saveSettingsDebounced();
     });
 
+    $('#debug_menu').on('click', function () {
+        showDebugMenu();
+    });
+
+    $(document).on('click', '#debug_table [data-debug-function]', function () {
+        const functionId = $(this).data('debug-function');
+        const functionRecord = debug_functions.find(f => f.functionId === functionId);
+
+        if (functionRecord) {
+            functionRecord.func();
+        } else {
+            console.warn(`Debug function ${functionId} not found`);
+        }
+    });
+
     $(window).on('focus', function () {
         browser_has_focus = true;
     });

public/scripts/templates/debug.html

@@ -0,0 +1,25 @@
+<h3 data-i18n="Debug Menu">Debug Menu</h3>
+<div data-i18n="Debug Warning">
+    Functions in this category are for advanced users only. Don't click anything if you're not sure about the consequences.
+</div>
+<table id="debug_table" class="responsiveTable">
+    {{#each functions}}
+    {{#with this}}
+    <tr>
+        <td>
+            <div class="justifyLeft">
+                <b>{{this.name}}</b>
+            </div>
+            <div class="justifyLeft">
+                {{this.description}}
+            </div>
+            <div class="flex-container justifyCenter">
+                <div class="menu_button menu_button_icon" data-debug-function="{{this.functionId}}" data-i18n="Execute">
+                    Execute
+                </div>
+            </div>
+        </td>
+    </tr>
+    {{/with}}
+    {{/each}}
+</table>

public/scripts/tokenizers.js

@@ -1,5 +1,5 @@
 import { characters, main_api, nai_settings, online_status, this_chid } from "../script.js";
-import { power_user } from "./power-user.js";
+import { power_user, registerDebugFunction } from "./power-user.js";
 import { chat_completion_sources, oai_settings } from "./openai.js";
 import { groups, selected_group } from "./group-chats.js";
 import { getStringHash } from "./utils.js";
@@ -59,13 +59,12 @@ async function resetTokenCache() {
         console.debug('Chat Completions: resetting token cache');
         Object.keys(tokenCache).forEach(key => delete tokenCache[key]);
         await objectStore.removeItem('tokenCache');
+        toastr.success('Token cache cleared. Please reload the chat to re-tokenize it.');
     } catch (e) {
         console.log('Chat Completions: unable to reset token cache', e);
     }
 }
 
-window['resetTokenCache'] = resetTokenCache;
-
 function getTokenizerBestMatch() {
     if (main_api === 'novel') {
         if (nai_settings.model_novel.includes('krake') || nai_settings.model_novel.includes('euterpe')) {
@@ -438,4 +437,5 @@ export function decodeTextTokens(tokenizerType, ids) {
 
 jQuery(async () => {
     await loadTokenCache();
+    registerDebugFunction('resetTokenCache', 'Reset token cache', 'Purges the calculated token counts. Use this if you want to force a full re-tokenization of all chats or suspect the token counts are wrong.', resetTokenCache);
 });

public/style.css

@@ -1768,10 +1768,10 @@ grammarly-extension {
     top: 50%;
     transform: translateY(-50%);
     text-align: center;
-    box-shadow: 0px 0px 14px var(--black50a);
+    box-shadow: 0px 0px 14px var(--black70a);
     border: 1px solid var(--white30a);
     padding: 4px;
-    background-color: var(--black30a);
+    background-color: var(--black50a);
     border-radius: 10px;
     max-height: 90vh;
     max-height: 90svh;