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 { thumbnailDimensions } from './image-metadata.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', function (request, response) {
+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, isPathUnderParent } from '../util.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<Object.<string, ImageMetadata>>} Map of relativePath to metadata
+ * @returns {Promise<{results: Object.<string, ImageMetadata>, generatedCount: number}>} Results map and count of 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	await writeMetadataIndex(userDataRoot, index);	242	await writeMetadataIndex(userDataRoot, index);
241	}	243	}
242		244
243	return results;	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 metadataResults = await getOrGenerateMetadataBatch(userDataRoot, [relativePath], type);
+            const { results: metadataResults } = await getOrGenerateMetadataBatch(userDataRoot, [relativePath], type);
             const metadata = metadataResults[relativePath];
             if (!metadata) {

+            }
             // Process all valid paths in a single batch
-            const batchMetadata = await getOrGenerateMetadataBatch(userDataRoot, validPaths, type);
+            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;