#442 Auto-classify backgrounds based on chat context. Add string fuzzy matching library.

public/index.html

@@ -35,6 +35,7 @@
     <script src="scripts/cropper.min.js"></script>
     <script src="scripts/jquery-cropper.min.js"></script>
     <script src="scripts/toastr.min.js"></script>
+    <script src="scripts/fuse.js"></script>
     <script type="module" src="scripts/eventemitter.js"></script>
     <script type="module" src="scripts/power-user.js"></script>
     <script type="module" src="scripts/swiped-events.js"></script>

public/script.js

@@ -1399,6 +1399,20 @@ function getStoppingStrings(isImpersonate, addSpace) {
     return addSpace ? result.map(x => `${x} `) : result;
 }
 
+
+// Background prompt generation
+export async function generateQuietPrompt(quiet_prompt) {
+    return await new Promise(
+        async function promptPromise(resolve, reject) {
+            try {
+                await Generate('quiet', { resolve, reject, quiet_prompt, force_name2: true, });
+            }
+            catch {
+                reject();
+            }
+        });
+}
+
 function processCommands(message, type) {
     if (type == "regenerate" || type == "swipe" || type == 'quiet') {
         return null;

public/scripts/extensions/backgrounds/index.js

@@ -1,4 +1,7 @@
+import { generateQuietPrompt } from "../../../script.js";
 import { getContext, saveMetadataDebounced } from "../../extensions.js";
+import { registerSlashCommand } from "../../slash-commands.js";
+import { stringFormat } from "../../utils.js";
 export { MODULE_NAME };
 
 const MODULE_NAME = 'backgrounds';
@@ -87,6 +90,30 @@ function onSelectBackgroundClick() {
     }
 }
 
+const autoBgPrompt = `Pause your roleplay and choose a location ONLY from the provided list that is the most suitable for the current scene. Do not output any other text:\n{0}`;
+
+async function autoBackgroundCommand() {
+    const options = Array.from(document.querySelectorAll('.BGSampleTitle')).map(x => ({ element: x, text: x.innerText.trim() })).filter(x => x.text.length > 0);
+    if (options.length == 0) {
+        toastr.warning('No backgrounds to choose from. Please upload some images to the "backgrounds" folder.');
+        return;
+    }
+
+    const list = options.map(option => `- ${option.text}`).join('\n');
+    const prompt = stringFormat(autoBgPrompt, list);
+    const reply = await generateQuietPrompt(prompt);
+    const fuse = new Fuse(options, { keys: ['text'] });
+    const bestMatch = fuse.search(reply, { limit: 1 });
+
+    if (bestMatch.length == 0) {
+        toastr.warning('No match found. Please try again.');
+        return;
+    }
+
+    console.debug('Automatically choosing background:', bestMatch);
+    bestMatch[0].item.element.click();
+}
+
 $(document).ready(function () {
     function addSettings() {
         const html = `
@@ -111,6 +138,16 @@ $(document).ready(function () {
                             Any background image selected while lock is engaged will be saved automatically.
                         </small>
                     </div>
+                    <div class="background_controls">
+                        <div id="auto_background" class="menu_button">
+                            <i class="fa-solid fa-wand-magic"></i>
+                            Auto
+                        </div>
+                        <small>
+                            Automatically select a background based on the chat context.<br>
+                            Respects the "Lock" setting state.
+                        </small>
+                    </div>
                     <div>Preview</div>
                     <div id="custom_bg_preview">
                     </div>
@@ -122,8 +159,12 @@ $(document).ready(function () {
         $('#lock_background').on('click', onLockBackgroundClick);
         $('#unlock_background').on('click', onUnlockBackgroundClick);
         $(document).on("click", ".bg_example", onSelectBackgroundClick);
+        $('#auto_background').on("click", autoBackgroundCommand);
     }
 
     addSettings();
     setInterval(moduleWorker, UPDATE_INTERVAL);
+    registerSlashCommand('lock', onLockBackgroundClick, [], " – locks a background for the currently selected chat", true, true);
+    registerSlashCommand('unlock', onUnlockBackgroundClick, [], ' – unlocks a background for the currently selected chat', true, true);
+    registerSlashCommand('autobg', autoBackgroundCommand, ['bgauto'], ' – automatically changes the background based on the chat context', true, true);
 });

public/scripts/extensions/expressions/index.js

@@ -904,7 +904,9 @@ function setExpressionOverrideHtml(forceClear = false) {
                     <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
                 </div>
                 <div class="inline-drawer-content">
-                    <p class="offline_mode">You are in offline mode. Click on the image below to set the expression.</p>
+                    <div class="offline_mode">
+                        <small>You are in offline mode. Click on the image below to set the expression.</small>
+                    </div>
                     <div class="flex-container flexnowrap">
                         <input id="expression_override" type="text" class="text_pole" placeholder="Override folder name" />
                         <input id="expression_override_button" class="menu_button" type="submit" value="Submit" />

public/scripts/extensions/expressions/style.css

@@ -143,11 +143,6 @@ img.expression.default {
     color: red;
 }
 
-.expression_settings p {
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-}
-
 .expression_settings label {
     display: flex;
     align-items: center;

public/scripts/extensions/objective/index.js

@@ -4,7 +4,9 @@ import {
     substituteParams,
     eventSource,
     event_types,
+    generateQuietPrompt,
 } from "../../../script.js";
+import { registerSlashCommand } from "../../slash-commands.js";
 
 const MODULE_NAME = "Objective"
 
@@ -40,18 +42,6 @@ const objectivePrompts = {
 
 const extensionPrompt = "Your current task is [{{task}}]. Balance existing roleplay with completing this task."
 
-// Background prompt generation
-async function generateQuietPrompt(quiet_prompt) {
-    return await new Promise(
-        async function promptPromise(resolve, reject) {
-            try {
-                await getContext().generate('quiet', { resolve, reject, quiet_prompt, force_name2: true, });
-            }
-            catch {
-                reject();
-            }
-        });
-}
 
 //###############################//
 //#       Task Management       #//
@@ -486,4 +476,6 @@ jQuery(() => {
         setCurrentTask();
         $('#objective-counter').text(checkCounter)
     });
+
+    registerSlashCommand('taskcheck', checkTaskCompleted, [], ' – checks if the current task is completed', true, true);
 });