animated bg thumb toggle (#4109) * Feat: Add toggle for animated background thumbnails This commit introduces a new toggle in the User Settings UI: "Load Animated Background Thumbnails". - When checked (default), animated background thumbnails (.gif, .mp4, animated .webp) load and display as usual in the background selection menu. - When unchecked, these animated thumbnails are replaced with a transparent PNG (`__transparent.png`) in the selection menu. This is intended to reduce UI and network lag for you if you have a large number of animated backgrounds. The actual functionality of setting any background (animated or static) remains unchanged; clicking a thumbnail will always apply the original background file. Changes include: - Added `loadAnimatedBackgroundThumbnails` (boolean, defaults to true) to `settings.json` under the `power_user` object. - Added the toggle HTML to `public/index.html`. - Modified `public/scripts/backgrounds.js` to conditionally replace animated thumbnails based on the new setting. - Modified `public/script.js` to handle the toggle's event listener and save its state. - Modified `public/scripts/power-user.js` to initialize the toggle's state upon loading settings. * Fix: Resolve issues with animated background thumbnail toggle This commit addresses two issues with the "Load Animated Background Thumbnails" feature: 1. Toggle state was not persisting correctly across page loads. 2. Animated media files were still being loaded even when the toggle was set to hide their thumbnails. Fixes: - Corrected the variable scope in `applyPowerUserSettings` within `public/scripts/power-user.js` to ensure the toggle's checked state is properly initialized from the global `power_user.loadAnimatedBackgroundThumbnails` setting. This resolves the persistence issue. - Refined the logic in `getBackgroundFromTemplate` within `public/scripts/backgrounds.js`. When the toggle is off and a background is an animated type (.gif, .mp4, .webp), the `background-image` CSS property for its thumbnail now directly uses the path to `__transparent.png`. This prevents the browser from potentially pre-fetching or the server from processing the original animated file via the `/thumbnail` endpoint for display purposes. - Added console logging in `getBackgroundFromTemplate` to help debug the toggle state and file being processed. The core functionality of applying backgrounds by clicking on thumbnails (whether transparent or regular) remains unchanged, as the `bgfile` attribute correctly stores the original media path. * Fix: Resolve page load error and animated thumbnail toggle issues This commit addresses a critical page loading error (`power_user is not defined` in `backgrounds.js`) and ensures the "Load Animated Background Thumbnails" toggle functions as intended. The page load error was caused by `getBackgrounds()` (and subsequently `getBackgroundFromTemplate()`) in `backgrounds.js` attempting to access `power_user.loadAnimatedBackgroundThumbnails` before the `power_user` object was fully initialized and its properties reliably accessible during the application's `firstLoadInit` sequence. Fixes: 1. Explicit Setting Passing for Initial Load: * Modified `getBackgrounds()` in `public/scripts/backgrounds.js` to accept `loadAnimatedThumbnailsSetting` as a parameter. * Modified `getBackgroundFromTemplate()` in `public/scripts/backgrounds.js` to accept and prioritize this passed parameter. It includes fallback logic to use the global `power_user.loadAnimatedBackgroundThumbnails` (primarily for event-driven updates like chat changes, which happen later) and then to a default of `true` if the setting is somehow unavailable. * Updated the call to `getBackgrounds()` in `public/script.js` during `firstLoadInit` to pass `power_user.loadAnimatedBackgroundThumbnails` explicitly after `power_user` settings are loaded. * Updated the toggle's `change` event listener in `public/script.js` to also pass the new setting state to `getBackgrounds()` for immediate refresh of system backgrounds. 2. Toggle Persistence: * Ensured the toggle's state in `public/scripts/power-user.js` (within `applyPowerUserSettings`) is correctly initialized using the global `power_user.loadAnimatedBackgroundThumbnails`. 3. Media Loading for Thumbnails: * The logic in `getBackgroundFromTemplate` now ensures that if animated thumbnails are toggled off, the `background-image` CSS directly uses `url("backgrounds/__transparent.png")`, avoiding calls to `getThumbnailUrl()` with original animated file paths, which might have caused unintended pre-fetching or server-side processing. This set of changes should resolve the page loading blockage and ensure the animated background thumbnail toggle works correctly for both display and network loading, while maintaining the functionality of applying original backgrounds. * Fix: Ensure correct initial state and first-toggle behavior for animated thumbnail toggle This commit addresses issues where the "Load Animated Background Thumbnails" toggle might not correctly display its default 'on' state (checked) on a clean install, and ensures the first toggle action takes immediate effect. Changes: - In `public/scripts/power-user.js`: - `loadPowerUserSettings`: Ensured that `power_user.loadAnimatedBackgroundThumbnails` is robustly defaulted to `true` if the key is missing or not a boolean (e.g., from an older settings file) before `applyPowerUserSettings` is called. - `applyPowerUserSettings`: Added console logging to trace the value of `power_user.loadAnimatedBackgroundThumbnails` just before setting the checkbox state. Ensured the checkbox `checked` property is set using `!!power_user.loadAnimatedBackgroundThumbnails` for explicit boolean conversion. The function already correctly referenced the global `power_user` object. - In `public/scripts/backgrounds.js`: - `getBackgroundFromTemplate`: This function's logic for determining the `loadSetting` (which decides if a transparent thumbnail is used) was previously refined to prioritize a passed parameter, then fall back to the global `power_user.loadAnimatedBackgroundThumbnails`, and then to `true`. Console logs were added to trace the resolved setting and file details. - In `public/script.js`: - `firstLoadInit`: The call to `getBackgrounds` already correctly passes the `power_user.loadAnimatedBackgroundThumbnails` after settings are loaded. - Event listener for `#loadAnimatedBackgroundThumbnails`: The logic to update the global `power_user` state and then call refresh functions (`getBackgrounds` and emitting `CHAT_CHANGED` for `getChatBackgroundsList`) appears to be in the correct synchronous order. These changes should ensure the toggle initializes to its correct visual state (checked) and that the first toggle from ON to OFF (and back) correctly and immediately updates both the visual display of thumbnails and the network loading behavior. * Fix: Address ESLint issues in background thumbnail toggle feature This commit resolves ESLint errors that were present in `public/scripts/backgrounds.js` and `public/scripts/power-user.js` related to the "Load Animated Background Thumbnails" feature. Changes: - I corrected indentation errors in `public/scripts/backgrounds.js` as reported by the linter. - I replaced direct use of `object.hasOwnProperty()` with `Object.prototype.hasOwnProperty.call(object, ...)` in both `backgrounds.js` and `power-user.js` to resolve the `no-prototype-builtins` ESLint error. - I ensured `power_user` is correctly imported and/or checked for definition (using `typeof power_user !== 'undefined'`) in `backgrounds.js` before accessing its properties, to satisfy linter concerns around `no-undef` for `power_user` in the context of the `getBackgroundFromTemplate` fallback logic. These changes primarily address code style and linting rules and are not intended to alter the functional behavior of the animated background thumbnail toggle, which was addressed in previous commits. * fix weird spacing for lint * Refactor animated background thumbnail settings and functionality * Remove comments * Add missing awaits --------- Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com> Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

a1ed83a1baecc4a2c535fb39487ebd41e1afb8aa

L <123923688+Vibecoder9000@users.noreply.github.com>

Signed

Parents: 65dcf9d341fff5942fdd85d29a4b5f13a4db0e6b

public/index.html+4 -0 Viewed

                                 <input id="never_resize_avatars" type="checkbox" />
                                 <small data-i18n="Never resize avatars">Never resize avatars</small>
                             </label>
+                           <label for="background_thumbnails_animation" class="checkbox_label" title="Make animated backgrounds static in the selection menu. This will reduce UI and network lag if you have a large amount. This is only a change for the selection menu.">
+                               <input id="background_thumbnails_animation" type="checkbox" />
+                               <small data-i18n="Animated background thumbnails">Animated background thumbnails</small>
+                           </label>
                             <label class="checkbox_label" for="show_card_avatar_urls" title="Show actual file names on the disk, in the characters list display only." data-i18n="[title]Show actual file names on the disk, in the characters list display only">
                                 <input id="show_card_avatar_urls" type="checkbox" />
                                 <small data-i18n="Show avatar filenames">Show avatar filenames</small>

public/scripts/backgrounds.js+106 -18 Viewed

-import { Fuse } from '../lib.js';
+import { Fuse, localforage } from '../lib.js';
 import { chat_metadata, eventSource, event_types, generateQuietPrompt, getCurrentChatId, getRequestHeaders, getThumbnailUrl, saveSettingsDebounced } from '../script.js';
 import { openThirdPartyExtensionMenu, saveMetadataDebounced } from './extensions.js';
 import { SlashCommand } from './slash-commands/SlashCommand.js';
 import { SlashCommandParser } from './slash-commands/SlashCommandParser.js';
-import { flashHighlight, stringFormat } from './utils.js';
+import { createThumbnail, flashHighlight, getBase64Async, stringFormat } from './utils.js';
 import { t } from './i18n.js';
 import { Popup } from './popup.js';
 const BG_METADATA_KEY = 'custom_background';
 const LIST_METADATA_KEY = 'chat_backgrounds';
+// A single transparent PNG pixel used as a placeholder for errored backgrounds
+const PNG_PIXEL = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
+const PNG_PIXEL_BLOB = new Blob([Uint8Array.from(atob(PNG_PIXEL), c => c.charCodeAt(0))], { type: 'image/png' });
+/**
+ * Storage for frontend-generated background thumbnails.
+ * This is used to store thumbnails for backgrounds that cannot be generated on the server.
+ */
+const THUMBNAIL_STORAGE = localforage.createInstance({ name: 'SillyTavern_Thumbnails' });
+/**
+ * Cache for thumbnail blob URLs.
+ * @type {Map<string, string>}
+ */
+const THUMBNAIL_BLOBS = new Map();
 export let background_settings = {
     name: '__transparent.png',
     url: generateUrlParameter('__transparent.png', false),
     fitting: 'classic',
+    animation: false,
 };
 export function loadBackgroundSettings(settings) {

     if (!backgroundSettings.fitting) {
         backgroundSettings.fitting = 'classic';
+    }
+    if (!Object.hasOwn(backgroundSettings, 'animation')) {
+        backgroundSettings.animation = false;
+    }
     setBackground(backgroundSettings.name, backgroundSettings.url);
     setFittingClass(backgroundSettings.fitting);
     $('#background_fitting').val(backgroundSettings.fitting);
+    $('#background_thumbnails_animation').prop('checked', background_settings.animation);
+}
 /**
  * Sets the background for the current chat and adds it to the list of custom backgrounds.
  * @param {{url: string, path:string}} backgroundInfo
  */
-function forceSetBackground(backgroundInfo) {
+async function forceSetBackground(backgroundInfo) {
     saveBackgroundMetadata(backgroundInfo.url);
     setCustomBackground();

     list.push(bg);
     chat_metadata[LIST_METADATA_KEY] = list;
     saveMetadataDebounced();
-    getChatBackgroundsList();
+    await getChatBackgroundsList();
     highlightNewBackground(bg);
     highlightLockedBackground();
+}

@@ -56,11 +76,11 @@ async function onChatChanged() {
56	unsetCustomBackground();	76	unsetCustomBackground();
57	}	77	}
58		78
59	getChatBackgroundsList();	79	await getChatBackgroundsList();
60	highlightLockedBackground();	80	highlightLockedBackground();
61	}	81	}
62		82
63	function getChatBackgroundsList() {	83	async function getChatBackgroundsList() {
64	const list = chat_metadata[LIST_METADATA_KEY];	84	const list = chat_metadata[LIST_METADATA_KEY];
65	const listEmpty = !Array.isArray(list) \|\| list.length === 0;	85	const listEmpty = !Array.isArray(list) \|\| list.length === 0;
66		86

@@ -72,7 +92,7 @@ function getChatBackgroundsList() {
72	}	92	}
73		93
74	for (const bg of list) {	94	for (const bg of list) {
75	const template = getBackgroundFromTemplate(bg, true);	95	const template = await getBackgroundFromTemplate(bg, true);
76	$('#bg_custom_content').append(template);	96	$('#bg_custom_content').append(template);
77	}	97	}
78	}	98	}

     const index = list.indexOf(bgNames.oldBg);
     list.splice(index, 1);
     saveMetadataDebounced();
-    getChatBackgroundsList();
+    await getChatBackgroundsList();
+}
+/**
+ * Gets a thumbnail for the background from storage or fetches it if not available.
+ * It caches the thumbnail in local storage and returns a blob URL for the thumbnail.
+ * If the thumbnail cannot be fetched, it returns a transparent PNG pixel as a fallback.
+ * @param {string} bg Background URL
+ * @returns {Promise<string>} Blob URL of the thumbnail
+ */
+async function getThumbnailFromStorage(bg) {
+    const cachedBlobUrl = THUMBNAIL_BLOBS.get(bg);
+    if (cachedBlobUrl) {
+        return cachedBlobUrl;
+    }
+    const savedBlob = await THUMBNAIL_STORAGE.getItem(bg);
+    if (savedBlob) {
+        const savedBlobUrl = URL.createObjectURL(savedBlob);
+        THUMBNAIL_BLOBS.set(bg, savedBlobUrl);
+        return savedBlobUrl;
+    }
+    try {
+        const response = await fetch(getBackgroundPath(bg), { cache: 'force-cache' });
+        if (!response.ok) {
+            throw new Error('Fetch failed with status: ' + response.status);
+        }
+        const imageBlob = await response.blob();
+        const imageBase64 = await getBase64Async(imageBlob);
+        const thumbnailBase64 = await createThumbnail(imageBase64);
+        const thumbnailBlob = await fetch(thumbnailBase64).then(res => res.blob());
+        await THUMBNAIL_STORAGE.setItem(bg, thumbnailBlob);
+        const blobUrl = URL.createObjectURL(thumbnailBlob);
+        THUMBNAIL_BLOBS.set(bg, blobUrl);
+        return blobUrl;
+    } catch (error) {
+        console.error('Error fetching thumbnail, fallback image will be used:', error);
+        const fallbackBlob = PNG_PIXEL_BLOB;
+        const fallbackBlobUrl = URL.createObjectURL(fallbackBlob);
+        THUMBNAIL_BLOBS.set(bg, fallbackBlobUrl);
+        return fallbackBlobUrl;
+    }
+}
 /**

@@ -327,7 +389,7 @@ async function onDeleteBackgroundClick(e) {
327	}	389	}
328		390
329	if (isCustom) {	391	if (isCustom) {
330	getChatBackgroundsList();	392	await getChatBackgroundsList();
331	saveMetadataDebounced();	393	saveMetadataDebounced();
332	}	394	}
333	}	395	}

@@ -382,7 +444,7 @@ export async function getBackgrounds() {
382	//console.log(getData.length);	444	//console.log(getData.length);
383	$('#bg_menu_content').children('div').remove();	445	$('#bg_menu_content').children('div').remove();
384	for (const bg of getData) {	446	for (const bg of getData) {
385	const template = getBackgroundFromTemplate(bg, false);	447	const template = await getBackgroundFromTemplate(bg, false);
386	$('#bg_menu_content').append(template);	448	$('#bg_menu_content').append(template);
387	}	449	}
388	}	450	}

  * Instantiates a background template
  * @param {string} bg Path to background
  * @param {boolean} isCustom Whether the background is custom
- * @returns {JQuery<HTMLElement>} Background template
+ * @returns {Promise<JQuery<HTMLElement>>} Background template
  */
-function getBackgroundFromTemplate(bg, isCustom) {
+async function getBackgroundFromTemplate(bg, isCustom) {
     const template = $('#background_template .bg_example').clone();
-    const thumbPath = isCustom ? bg : getThumbnailUrl('bg', bg);
     const url = generateUrlParameter(bg, isCustom);
     const title = isCustom ? bg.split('/').pop() : bg;
     const friendlyTitle = title.slice(0, title.lastIndexOf('.'));
+    const fileExtension = bg.split('.').pop().toLowerCase();
+    const isAnimated = ['mp4', 'webp'].includes(fileExtension);
+    const thumbnailUrl = isAnimated && !background_settings.animation
+        ? await getThumbnailFromStorage(bg)
+        : isCustom
+            ? bg
+            : getThumbnailUrl('bg', bg);
+    const thumbnailCssUrl = `url('${thumbnailUrl}')`;
     template.attr('title', title);
     template.attr('bgfile', bg);
     template.attr('custom', String(isCustom));
     template.data('url', url);
-    template.css('background-image', `url('${thumbPath}')`);
+    template.css('background-image', thumbnailCssUrl);
     template.find('.BGSampleTitle').text(friendlyTitle);
     return template;
+}

             bg: bg,
         }),
     });
+    await THUMBNAIL_STORAGE.removeItem(bg);
+    if (THUMBNAIL_BLOBS.has(bg)) {
+        URL.revokeObjectURL(THUMBNAIL_BLOBS.get(bg));
+        THUMBNAIL_BLOBS.delete(bg);
+    }
+}
 async function onBackgroundUploadSelected() {

     $('#auto_background').on('click', autoBackgroundCommand);
     $('#add_bg_button').on('change', onBackgroundUploadSelected);
     $('#bg-filter').on('input', onBackgroundFilterInput);
-    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'lockbg',
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'lockbg',
         callback: () => onLockBackgroundClick(new CustomEvent('click')),
         aliases: ['bglock'],
         helpString: 'Locks a background for the currently selected chat',
     }));
-    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'unlockbg',
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'unlockbg',
         callback: () => onUnlockBackgroundClick(new CustomEvent('click')),
         aliases: ['bgunlock'],
         helpString: 'Unlocks a background for the currently selected chat',
     }));
-    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'autobg',
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'autobg',
         callback: autoBackgroundCommand,
         aliases: ['bgauto'],
         helpString: 'Automatically changes the background based on the chat context using the AI request prompt',

         setFittingClass(background_settings.fitting);
         saveSettingsDebounced();
     });
+    $('#background_thumbnails_animation').on('input', async function () {
+        background_settings.animation = !!$(this).prop('checked');
+        saveSettingsDebounced();
+        // Refresh background thumbnails
+        await getBackgrounds();
+        await onChatChanged();
+    });
+}