cdefddef · permissionBRICK/SillyTavern

default/config.yaml+1 -1 Viewed

   # JPG thumbnail quality (0-100)
   quality: 95
   # Maximum thumbnail dimensions per type [width, height]
-  dimensions: { 'bg': [160, 90], 'avatar': [96, 144] }
+  dimensions: { 'bg': [160, 90], 'avatar': [96, 144], 'persona': [96, 144] }
 # PERFORMANCE-RELATED CONFIGURATION
 performance:

public/script.js+24 -9 Viewed

         mes.swipes = [mes.mes];
+    }
-    let avatarImg = getUserAvatar(user_avatar);
+    let avatarImg = getThumbnailUrl('persona', user_avatar);
     const isSystem = mes.is_system;
     const title = mes.title;
     generatedPromptCache = '';

     // Lock user avatar to a persona.
     if (avatar in power_user.personas) {
-        message.force_avatar = getUserAvatar(avatar);
+        message.force_avatar = getThumbnailUrl('persona', avatar);
+    }
     if (messageBias) {

         await delay(DEFAULT_SAVE_EDIT_TIMEOUT);
         const formData = new FormData(/** @type {HTMLFormElement} */($('#form_create').get(0)));
-        await fetch(getThumbnailUrl('avatar', formData.get('avatar_url')), {
+        await fetch(getThumbnailUrl('avatar', formData.get('avatar_url').toString()), {
             method: 'GET',
             cache: 'no-cache',
             headers: {

@@ -7233,8 +7233,15 @@ async function read_avatar_load(input) {
7233	}	7233	}
7234	}	7234	}
7235		7235
7236	export function getThumbnailUrl(type, file) {	7236	/**
7237	return `/thumbnail?type=${type}&file=${encodeURIComponent(file)}`;	7237	* Gets the URL for a thumbnail of a specific type and file.
		7238	* @param {import('../src/endpoints/thumbnails.js').ThumbnailType} type The type of the thumbnail to get
		7239	* @param {string} file The file name or path for which to get the thumbnail URL
		7240	* @param {boolean} [t=false] Whether to add a cache-busting timestamp to the URL
		7241	* @returns {string} The URL for the thumbnail
		7242	*/
		7243	export function getThumbnailUrl(type, file, t = false) {
		7244	return `/thumbnail?type=${type}&file=${encodeURIComponent(file)}${t ? `&t=${Date.now()}` : ''}`;
7238	}	7245	}
7239		7246
7240	export function buildAvatarList(block, entities, { templateId = 'inline_avatar_template', empty = true, interactable = false, highlightFavs = true } = {}) {	7247	export function buildAvatarList(block, entities, { templateId = 'inline_avatar_template', empty = true, interactable = false, highlightFavs = true } = {}) {

@@ -7274,7 +7281,7 @@ export function buildAvatarList(block, entities, { templateId = 'inline_avatar_t
7274	}	7281	}
7275	else if (entity.type === 'persona') {	7282	else if (entity.type === 'persona') {
7276	avatarTemplate.attr({ 'data-pid': id, 'data-chid': null });	7283	avatarTemplate.attr({ 'data-pid': id, 'data-chid': null });
7277	avatarTemplate.find('img').attr('src', getUserAvatar(entity.item.avatar));	7284	avatarTemplate.find('img').attr('src', getThumbnailUrl('persona', entity.item.avatar));
7278	avatarTemplate.attr('title', `[Persona] ${entity.item.name}\nFile: ${entity.item.avatar}`);	7285	avatarTemplate.attr('title', `[Persona] ${entity.item.name}\nFile: ${entity.item.avatar}`);
7279	}	7286	}
7280		7287

             $('body').append(newElement);
             newElement.fadeIn(animation_duration);
             const zoomedAvatarImgElement = $(`.zoomed_avatar[forChar="${charname}"] img`);
-            if (messageElement.attr('is_user') == 'true' || (messageElement.attr('is_system') == 'true' && !isValidCharacter)) { //handle user and system avatars
+            if (messageElement.attr('is_user') == 'true' || (messageElement.attr('is_system') == 'true' && !isValidCharacter)) {
-                zoomedAvatarImgElement.attr('src', thumbURL);
+                //handle user and system avatars
-                zoomedAvatarImgElement.attr('data-izoomify-url', thumbURL);
+                const isValidPersona = decodeURIComponent(targetAvatarImg) in power_user.personas;
+                if (isValidPersona) {
+                    const personaSrc = getUserAvatar(targetAvatarImg);
+                    zoomedAvatarImgElement.attr('src', personaSrc);
+                    zoomedAvatarImgElement.attr('data-izoomify-url', personaSrc);
+                } else {
+                    zoomedAvatarImgElement.attr('src', thumbURL);
+                    zoomedAvatarImgElement.attr('data-izoomify-url', thumbURL);
+                }
             } else if (messageElement.attr('is_user') == 'false') { //handle char avatars
                 zoomedAvatarImgElement.attr('src', avatarSrc);
                 zoomedAvatarImgElement.attr('data-izoomify-url', avatarSrc);

public/scripts/data-maid.js+4 -0 Viewed

                 name: t`Background Thumbnails`,
                 description: t`Thumbnails for missing or deleted backgrounds.`,
             },
+            personaThumbnails: {
+                name: t`Persona Thumbnails`,
+                description: t`Thumbnails for missing or deleted personas.`,
+            },
             chatBackups: {
                 name: t`Chat Backups`,
                 description: t`Automatically generated chat backups.`,

public/scripts/personas.js+5 -7 Viewed

 import { commonEnumProviders } from './slash-commands/SlashCommandCommonEnumsProvider.js';
 import { SlashCommandEnumValue } from './slash-commands/SlashCommandEnumValue.js';
 import { SlashCommandParser } from './slash-commands/SlashCommandParser.js';
+import { isFirefox } from './browser-fixes.js';
 /**
  * @typedef {object} PersonaConnection A connection between a character and a character or group entity

@@ -124,7 +125,7 @@ function reloadUserAvatar(force = false) {
124	}	125	}
125		126
126	if ($(this).attr('is_user') == 'true' && $(this).attr('force_avatar') == 'false') {	127	if ($(this).attr('is_user') == 'true' && $(this).attr('force_avatar') == 'false') {
127	avatarImg.attr('src', getUserAvatar(user_avatar));	128	avatarImg.attr('src', getThumbnailUrl('persona', user_avatar));
128	}	129	}
129	});	130	});
130	}	131	}

  * @returns {JQuery<HTMLElement>} Avatar block
  */
 function getUserAvatarBlock(avatarId) {
-    const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
     const template = $('#user_avatar_template .avatar-container').clone();
     const personaName = power_user.personas[avatarId];
     const personaDescription = power_user.persona_descriptions[avatarId]?.description;

     template.attr('data-avatar-id', avatarId);
     template.find('.avatar').attr('data-avatar-id', avatarId).attr('title', avatarId);
     template.toggleClass('default_persona', avatarId === power_user.default_persona);
-    let avatarUrl = getUserAvatar(avatarId);
+    const avatarUrl = getThumbnailUrl('persona', avatarId, isFirefox());
-    if (isFirefox) {
-        avatarUrl += '?t=' + Date.now();
-    }
     template.find('img').attr('src', avatarUrl);
     // Make sure description block has at least three rows. Otherwise height looks inconsistent. I don't have a better idea for this.

         const name = formData.get('overwrite_name');
         if (name) {
             await fetch(getUserAvatar(String(name)), { cache: 'no-cache' });
+            await fetch(getThumbnailUrl('persona', String(name)), { cache: 'no-cache' });
             reloadUserAvatar(true);
+        }

@@ -1657,7 +1655,7 @@ async function syncUserNameToPersona() {
1657	for (const mes of chat) {	1655	for (const mes of chat) {
1658	if (mes.is_user) {	1656	if (mes.is_user) {
1659	mes.name = name1;	1657	mes.name = name1;
1660	mes.force_avatar = getUserAvatar(user_avatar);	1658	mes.force_avatar = getThumbnailUrl('persona', user_avatar);
1661	}	1659	}
1662	}	1660	}
1663		1661

src/constants.js+1 -0 Viewed

     thumbnails: 'thumbnails',
     thumbnailsBg: 'thumbnails/bg',
     thumbnailsAvatar: 'thumbnails/avatar',
+    thumbnailsPersona: 'thumbnails/persona',
     worlds: 'worlds',
     user: 'user',
     avatars: 'User Avatars',

src/endpoints/avatars.js+10 -2 Viewed

 import { getImages, tryParse } from '../util.js';
 import { getFileNameValidationFunction } from '../middleware/validateFileName.js';
 import { applyAvatarCropResize } from './characters.js';
+import { invalidateThumbnail } from './thumbnails.js';
 export const router = express.Router();
 router.post('/get', function (request, response) {
-    var images = getImages(request.user.directories.avatars);
+    const images = getImages(request.user.directories.avatars);
-    response.send(JSON.stringify(images));
+    response.send(images);
 });
 router.post('/delete', getFileNameValidationFunction('avatar'), function (request, response) {

     if (fs.existsSync(fileName)) {
         fs.unlinkSync(fileName);
+        invalidateThumbnail(request.user.directories, 'persona', sanitize(request.body.avatar));
         return response.send({ result: 'ok' });
+    }

         const rawImg = await Jimp.read(pathToUpload);
         const image = await applyAvatarCropResize(rawImg, crop);
+        // Remove previous thumbnail and bust cache if overwriting
+        if (request.body.overwrite_name) {
+            invalidateThumbnail(request.user.directories, 'persona', sanitize(request.body.overwrite_name));
+            response.setHeader('Clear-Site-Data', '"cache"');
+        }
         const filename = request.body.overwrite_name || `${Date.now()}.png`;
         const pathToNewFile = path.join(request.user.directories.avatars, filename);
         writeFileAtomicSync(pathToNewFile, image);

src/endpoints/data-maid.js+32 -0 Viewed

  * @property {string[]} groupChats - List of loose group chats
  * @property {string[]} avatarThumbnails - List of loose avatar thumbnails
  * @property {string[]} backgroundThumbnails - List of loose background thumbnails
+ * @property {string[]} personaThumbnails - List of loose persona thumbnails
  * @property {string[]} chatBackups - List of chat backups
  * @property {string[]} settingsBackups - List of settings backups
  */

  * @property {DataMaidSanitizedRecord[]} groupChats - List of sanitized loose group chats
  * @property {DataMaidSanitizedRecord[]} avatarThumbnails - List of sanitized loose avatar thumbnails
  * @property {DataMaidSanitizedRecord[]} backgroundThumbnails - List of sanitized loose background thumbnails
+ * @property {DataMaidSanitizedRecord[]} personaThumbnails - List of sanitized loose persona thumbnails
  * @property {DataMaidSanitizedRecord[]} chatBackups - List of sanitized chat backups
  * @property {DataMaidSanitizedRecord[]} settingsBackups - List of sanitized settings backups
  */

             groupChats: await this.#collectGroupChats(),
             avatarThumbnails: await this.#collectAvatarThumbnails(),
             backgroundThumbnails: await this.#collectBackgroundThumbnails(),
+            personaThumbnails: await this.#collectPersonaThumbnails(),
             chatBackups: await this.#collectChatBackups(),
             settingsBackups: await this.#collectSettingsBackups(),
         };

             groupChats: await Promise.all(report.groupChats.map(i => this.#sanitizeRecord(i, false))),
             avatarThumbnails: await Promise.all(report.avatarThumbnails.map(i => this.#sanitizeRecord(i, false))),
             backgroundThumbnails: await Promise.all(report.backgroundThumbnails.map(i => this.#sanitizeRecord(i, false))),
+            personaThumbnails: await Promise.all(report.personaThumbnails.map(i => this.#sanitizeRecord(i, false))),
             chatBackups: await Promise.all(report.chatBackups.map(i => this.#sanitizeRecord(i, false))),
             settingsBackups: await Promise.all(report.settingsBackups.map(i => this.#sanitizeRecord(i, false))),
         };

+    }
     /**
+     * Collects loose persona thumbnails from the provided directories.
+     * @returns {Promise<string[]>} List of paths to loose persona thumbnails
+     */
+    async #collectPersonaThumbnails() {
+        const result = [];
+        try {
+            const knownPersonas = new Set();
+            const personas = await fs.promises.readdir(this.directories.avatars, { withFileTypes: true });
+            for (const file of personas) {
+                if (file.isFile()) {
+                    knownPersonas.add(file.name);
+                }
+            }
+            const personaThumbnails = await fs.promises.readdir(this.directories.thumbnailsPersona, { withFileTypes: true });
+            for (const file of personaThumbnails) {
+                if (file.isFile() && !knownPersonas.has(file.name)) {
+                    result.push(path.join(this.directories.thumbnailsPersona, file.name));
+                }
+            }
+        } catch (error) {
+            console.error('[Data Maid] Error collecting persona thumbnails:', error);
+        }
+        return result;
+    }
+    /**
      * Collects chat backups from the provided directories.
      * @returns {Promise<string[]>} List of paths to chat backups
      */

src/endpoints/thumbnails.js+16 -5 Viewed

 const quality = Math.min(100, Math.max(1, parseInt(getConfigValue('thumbnails.quality', 95, 'number'))));
 const pngFormat = String(getConfigValue('thumbnails.format', 'jpg')).toLowerCase().trim() === 'png';
+/**
+ * @typedef {'bg' | 'avatar' | 'persona'} ThumbnailType
+ */
 /** @type {Record<string, number[]>} */
 export const dimensions = {
     'bg': getConfigValue('thumbnails.dimensions.bg', [160, 90]),
     'avatar': getConfigValue('thumbnails.dimensions.avatar', [96, 144]),
+    'persona': getConfigValue('thumbnails.dimensions.persona', [96, 144]),
 };
 /**
  * Gets a path to thumbnail folder based on the type.
  * @param {import('../users.js').UserDirectoryList} directories User directories
- * @param {'bg' | 'avatar'} type Thumbnail type
+ * @param {ThumbnailType} type Thumbnail type
  * @returns {string} Path to the thumbnails folder
  */
 function getThumbnailFolder(directories, type) {

         case 'avatar':
             thumbnailFolder = directories.thumbnailsAvatar;
             break;
+        case 'persona':
+            thumbnailFolder = directories.thumbnailsPersona;
+            break;
+    }
     return thumbnailFolder;

 /**
  * Gets a path to the original images folder based on the type.
  * @param {import('../users.js').UserDirectoryList} directories User directories
- * @param {'bg' | 'avatar'} type Thumbnail type
+ * @param {ThumbnailType} type Thumbnail type
  * @returns {string} Path to the original images folder
  */
 function getOriginalFolder(directories, type) {

         case 'avatar':
             originalFolder = directories.characters;
             break;
+        case 'persona':
+            originalFolder = directories.avatars;
+            break;
+    }
     return originalFolder;

 /**
  * Removes the generated thumbnail from the disk.
  * @param {import('../users.js').UserDirectoryList} directories User directories
- * @param {'bg' | 'avatar'} type Type of the thumbnail
+ * @param {ThumbnailType} type Type of the thumbnail
  * @param {string} file Name of the file
  */
 export function invalidateThumbnail(directories, type, file) {

 /**
  * Generates a thumbnail for the given file.
  * @param {import('../users.js').UserDirectoryList} directories User directories
- * @param {'bg' | 'avatar'} type Type of the thumbnail
+ * @param {ThumbnailType} type Type of the thumbnail
  * @param {string} file Name of the file
  * @returns
  */

@@ -188,7 +199,7 @@ router.get('/', async function (request, response) {
188	return response.sendStatus(400);	199	return response.sendStatus(400);
189	}	200	}
190		201
191	if (!(type == 'bg' \|\| type == 'avatar')) {	202	if (!(type === 'bg' \|\| type === 'avatar' \|\| type === 'persona')) {
192	return response.sendStatus(400);	203	return response.sendStatus(400);
193	}	204	}
194		205

src/users.js+1 -0 Viewed

  * @property {string} thumbnails - The directory where the thumbnails are stored
  * @property {string} thumbnailsBg - The directory where the background thumbnails are stored
  * @property {string} thumbnailsAvatar - The directory where the avatar thumbnails are stored
+ * @property {string} thumbnailsPersona - The directory where the persona thumbnails are stored
  * @property {string} worlds - The directory where the WI are stored
  * @property {string} user - The directory where the user's public data is stored
  * @property {string} avatars - The directory where the avatars are stored

Implement persona thumbnails (#4210) * Implement persona thumbnails * Dear Firefox, fix your overzealous image cache * Add cache busting for avatar uploads when overwriting existing files