Backgrounds metadata population and frontend colors (#5092) * Startup and on-demand check * Update comments, add color preload * remove redundant metadata generation * changed image-metadata/all from GET to POST * move initializeAllUserMetadata to image-metadata.js, make blocking (?) * Add type annotations --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

4550afd4cae623ce3e63b0bc77b95f0c205b806c

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

Signed

Parents: 992fd8f01dadd14c1f9df824277018a02fcea3dd

public/scripts/backgrounds.js+47 -0 Viewed

 };
 /**
 + * Cache for image metadata.
 + * @type {Map<string, import('../../src/endpoints/image-metadata.js').ImageMetadata>}
 + */
 +const METADATA_CACHE = new Map();
++
 +/**
  * Background source types.
  * @readonly
  * @enum {number}

     clipper.className = 'thumbnail-clipper lazy-load-background';
     clipper.style.backgroundImage = PLACEHOLDER_IMAGE;
 +    // Apply dominant color and aspect ratio as placeholder if available
 +    const metadataKey = isCustom ? bg : `backgrounds/${bg}`;
 +    const metadata = METADATA_CACHE.get(metadataKey);
 +    if (metadata) {
 +        if (metadata.dominantColor) {
 +            clipper.style.backgroundColor = metadata.dominantColor;
 +        }
 +        if (metadata.aspectRatio) {
 +            thumbnail.css('aspect-ratio', metadata.aspectRatio);
 +        }
 +    }
++
     const titleElement = thumbnail.find('.BGSampleTitle');
     clipper.appendChild(titleElement.get(0));
     thumbnail.append(clipper);

+}
 export async function getBackgrounds() {
 +    const metadataPromise = preloadImageMetadata();
++
     const response = await fetch('/api/backgrounds/all', {
         method: 'POST',
         headers: getRequestHeaders(),

         const { images, config } = await response.json();
         Object.assign(THUMBNAIL_CONFIG, config);
 +        await metadataPromise;
++
         renderSystemBackgrounds(images);
         highlightSelectedBackground();
+    }
+}
 +/**
 + * Preloads all image metadata to use dominant colors as placeholders.
 + * @return {Promise<void>}
 + */
 +async function preloadImageMetadata() {
 +    try {
 +        const response = await fetch('/api/image-metadata/all', {
 +            method: 'POST',
 +            headers: getRequestHeaders(),
 +            body: JSON.stringify({ prefix: 'backgrounds/' }),
 +        });
 +        if (response.ok) {
 +            const data = await response.json();
 +            if (data?.images) {
 +                METADATA_CACHE.clear();
 +                for (const [path, metadata] of Object.entries(data.images)) {
 +                    METADATA_CACHE.set(path, metadata);
 +                }
 +            }
 +        }
 +    } catch (error) {
 +        console.error('[ImageMetadata] Failed to preload metadata:', error);
 +    }
 +}
++
 function activateLazyLoader() {
     // Disconnect previous observer to prevent memory leaks
     if (lazyLoadObserver) {

src/endpoints/backgrounds.js+24 -2 Viewed

 import sanitize from 'sanitize-filename';
 import { invalidateThumbnail } from './thumbnails.js';
 import { getOrGenerateMetadataBatch, removeMetadata, renameMetadata, thumbnailDimensions } from './image-metadata.js';
 import { getImages } from '../util.js';
 import { getFileNameValidationFunction } from '../middleware/validateFileName.js';
 export const router = express.Router();
 router.post('/all', async function (request, response) {
     const images = getImages(request.user.directories.backgrounds);
     const config = { width: thumbnailDimensions.bg[0], height: thumbnailDimensions.bg[1] };
     response.json({ images, config });

     fs.unlinkSync(fileName);
     invalidateThumbnail(request.user.directories, 'bg', request.body.bg);
++
 +    // Remove metadata for deleted image
 +    const relativePath = path.join('backgrounds', request.body.bg);
 +    removeMetadata(request.user.directories.root, relativePath).catch(err => {
 +        console.warn('[Backgrounds] Failed to remove metadata:', err.message);
 +    });
++
     return response.send('ok');
 });

     fs.copyFileSync(oldFileName, newFileName);
     fs.unlinkSync(oldFileName);
     invalidateThumbnail(request.user.directories, 'bg', request.body.old_bg);
++
 +    // Update metadata for renamed image
 +    const oldRelativePath = path.join('backgrounds', request.body.old_bg);
 +    const newRelativePath = path.join('backgrounds', request.body.new_bg);
 +    renameMetadata(request.user.directories.root, oldRelativePath, newRelativePath).catch(err => {
 +        console.warn('[Backgrounds] Failed to rename metadata:', err.message);
 +    });
++
     return response.send('ok');
 });

         fs.copyFileSync(img_path, path.join(request.user.directories.backgrounds, filename));
         fs.unlinkSync(img_path);
         invalidateThumbnail(request.user.directories, 'bg', filename);
++
 +        // Generate metadata for the new image
 +        const relativePath = path.join('backgrounds', filename);
 +        getOrGenerateMetadataBatch(request.user.directories.root, [relativePath], 'bg').catch(err => {
 +            console.warn('[Backgrounds] Failed to generate metadata for upload:', err.message);
 +        });
++
         response.send(filename);
     } catch (err) {
         console.error(err);

src/endpoints/image-metadata.js+82 -5 Viewed

 import writeFileAtomic from 'write-file-atomic';
 import express from 'express';
 import { Jimp } from '../jimp.js';
 import { getConfigValue, getImages, isPathUnderParent } from '../util.js';
 export const METADATA_FILE = 'image-metadata.json';

  * @param {string} userDataRoot - Path to the user data directory root
  * @param {string[]} relativePaths - Array of relative paths from userDataRoot
  * @param {ThumbnailType} type - The thumbnail type for resolution calculation.
  * @returns {Promise<{results: Object.<string, ImageMetadata>, generatedCount: number}>} MapResults ofmap relativePathand tocount metadataof newly generated
  */
 export async function getOrGenerateMetadataBatch(userDataRoot, relativePaths, type) {
     /** @type {Object.<string, ImageMetadata>} */
     const results = {};
     const index = await readMetadataIndex(userDataRoot);
     let indexModified = false;
 +    let generatedCount = 0;
     for (const relativePath of relativePaths) {
         // Normalize the path to use forward slashes for consistent keys

             index.images[posixPath] = metadata;
             results[relativePath] = metadata;
             indexModified = true;
 +            generatedCount++;
         } catch (error) {
             console.warn(`[ImageMetadata] Failed to generate metadata for ${relativePath}:`, error.message);
+        }

@@ -240,7 +242,7 @@ export async function getOrGenerateMetadataBatch(userDataRoot, relativePaths, ty
240	242	await writeMetadataIndex(userDataRoot, index);
241	243	}
242	244
243	245	return { results, generatedCount };
244	246	}
245	247
246	248	/**

     return orphanedPaths;
+}
 +/**
 + * Initializes metadata for all images in a directory.
 + * @param {string} userDataRoot - Path to the user data directory root
 + * @param {string} subDirectory - Subdirectory relative to userDataRoot
 + * @param {ThumbnailType} type - The thumbnail type for resolution calculation
 + * @returns {Promise<number>} Number of images processed
 + */
 +export async function initializeMetadataForDirectory(userDataRoot, subDirectory, type) {
 +    const fullDir = path.join(userDataRoot, subDirectory);
++
 +    let images;
 +    try {
 +        images = getImages(fullDir);
 +    } catch {
 +        // Directory doesn't exist or can't be read
 +        return 0;
 +    }
++
 +    // Convert to relative paths from userDataRoot
 +    const relativePaths = images.map(img => path.join(subDirectory, img));
++
 +    // Generate metadata for new images
 +    const { results, generatedCount } = await getOrGenerateMetadataBatch(userDataRoot, relativePaths, type);
++
 +    if (generatedCount > 0) {
 +        console.log(`[ImageMetadata] Generated metadata for ${generatedCount} new images in ${subDirectory}`);
 +    }
++
 +    return Object.keys(results).length;
 +}
++
 +/**
 + * Initializes image metadata for all users' background directories.
 + * @param {Array<{root: string}>} userDirectories - List of user directory objects
 + * @returns {Promise<void>}
 + */
 +export async function initializeAllUserMetadata(userDirectories) {
 +    try {
 +        for (const userDir of userDirectories) {
 +            await initializeMetadataForDirectory(userDir.root, 'backgrounds', 'bg');
 +        }
 +    } catch (error) {
 +        console.error('[ImageMetadata] Failed to initialize background metadata:', error.message);
 +    }
 +}
++
 export const router = express.Router();
 /**

                 return response.status(404).json({ error: 'File not found.' });
+            }
             const { results: metadataResults } = await getOrGenerateMetadataBatch(userDataRoot, [relativePath], type);
             const metadata = metadataResults[relativePath];
             if (!metadata) {

+            }
             // Process all valid paths in a single batch
             const { results: batchMetadata } = await getOrGenerateMetadataBatch(userDataRoot, validPaths, type);
             for (const relativePath of validPaths) {
                 if (batchMetadata[relativePath]) {

 });
 /**
 + * POST /api/image-metadata/all
 + * Get all metadata from the index.
 + * @body {string} [prefix] - Optional path prefix to filter results
 + */
 +router.post('/all', async function (request, response) {
 +    try {
 +        const userDataRoot = request.user.directories.root;
 +        const prefix = String(request.body.prefix || '');
 +        const index = await readMetadataIndex(userDataRoot);
++
 +        // If prefix specified, filter to only matching paths
 +        if (prefix) {
 +            const filteredImages = {};
 +            for (const [key, value] of Object.entries(index.images)) {
 +                if (key.startsWith(prefix)) {
 +                    filteredImages[key] = value;
 +                }
 +            }
 +            return response.json({ version: index.version, images: filteredImages });
 +        }
++
 +        return response.json(index);
 +    } catch (error) {
 +        console.error('[ImageMetadata] Failed to read metadata index:', error);
 +        return response.status(500).json({ error: 'Internal server error.' });
 +    }
 +});
++
 +/**
  * POST /api/image-metadata/cleanup
  * Clean up orphaned metadata entries (files that no longer exist).
  */

src/server-main.js+4 -0 Viewed

 import { diskCache } from './endpoints/characters.js';
 import { migrateFlatSecrets } from './endpoints/secrets.js';
 import { migrateGroupChatsMetadataFormat } from './endpoints/groups.js';
 +import { initializeAllUserMetadata } from './endpoints/image-metadata.js';
 // Work around a node v20.0.0, v20.1.0, and v20.2.0 bug. The issue was fixed in v20.3.0.
 // https://github.com/nodejs/node/issues/47822#issuecomment-1564708870

     await settingsInit();
     await statsInit();
 +    // Initialize image metadata
 +    await initializeAllUserMetadata(directories);
++
     const pluginsDirectory = path.join(serverDirectory, 'plugins');
     const cleanupPlugins = await loadPlugins(app, pluginsDirectory);
     const consoleTitle = process.title;