From e3e07404f84812db04fddf69a7fbb6508582915d Mon Sep 17 00:00:00 2001 From: syntaxbullet Date: Tue, 8 Sep 2026 16:15:08 +0200 Subject: [PATCH] Cache bounded Discord avatars and coalesce downloads --- src/sharing/avatar-cache.test.ts | 38 ++++++++++++++++++++ src/sharing/avatar-cache.ts | 61 ++++++++++++++++++++++++++++++++ src/sharing/live-card-image.ts | 11 ++---- 3 files changed, 102 insertions(+), 8 deletions(-) create mode 100644 src/sharing/avatar-cache.test.ts create mode 100644 src/sharing/avatar-cache.ts diff --git a/src/sharing/avatar-cache.test.ts b/src/sharing/avatar-cache.test.ts new file mode 100644 index 0000000..9309ddd --- /dev/null +++ b/src/sharing/avatar-cache.test.ts @@ -0,0 +1,38 @@ +import { expect, test } from 'bun:test'; +import { createCanvas } from '@napi-rs/canvas'; +import { createAvatarCache } from './avatar-cache'; + +test('avatars share in-flight downloads and invalidate by URL or expiry', async () => { + const png = await createCanvas(16, 16).encode('png'); + let calls = 0, timestamp = 0; + const request = Object.assign(async () => { calls++; return new Response(new Uint8Array(png)); }, { preconnect: fetch.preconnect }); + const avatar = createAvatarCache({ request, now: () => timestamp, successTtlMs: 100 }); + const [one, two] = await Promise.all([avatar('avatar/hash1'), avatar('avatar/hash1')]); + expect(one).not.toBeNull(); expect(one).toBe(two); expect(calls).toBe(1); + expect(await avatar('avatar/hash1')).toBe(one); expect(calls).toBe(1); + await avatar('avatar/hash2'); expect(calls).toBe(2); + timestamp = 100; await avatar('avatar/hash1'); expect(calls).toBe(3); +}); + +test('avatar cache evicts least recently used images and retries negative entries after their TTL', async () => { + const png = await createCanvas(16, 16).encode('png'); + let calls = 0, timestamp = 0, fail = false; + const request = Object.assign(async () => { calls++; return fail ? new Response(null, { status: 503 }) : new Response(new Uint8Array(png)); }, { preconnect: fetch.preconnect }); + const avatar = createAvatarCache({ request, now: () => timestamp, maxEntries: 2, failureTtlMs: 10 }); + await avatar('a'); await avatar('b'); await avatar('a'); await avatar('c'); + expect(calls).toBe(3); await avatar('b'); expect(calls).toBe(4); + fail = true; + expect(await avatar('bad')).toBeNull(); expect(await avatar('bad')).toBeNull(); expect(calls).toBe(5); + timestamp = 10; fail = false; + expect(await avatar('bad')).not.toBeNull(); expect(calls).toBe(6); +}); + +test('avatar downloads have a concurrency bound and oversized decoded images use the fallback', async () => { + let release!: (response: Response) => void, calls = 0; + const request = Object.assign(async () => { calls++; return new Promise(resolve => { release = resolve; }); }, { preconnect: fetch.preconnect }); + const avatar = createAvatarCache({ request, maxPending: 1 }); + const first = avatar('one'), duplicate = avatar('one'); + expect(await avatar('two')).toBeNull(); expect(calls).toBe(1); + release(new Response(new Uint8Array(await createCanvas(257, 1).encode('png')))); + expect(await first).toBeNull(); expect(await duplicate).toBeNull(); +}); diff --git a/src/sharing/avatar-cache.ts b/src/sharing/avatar-cache.ts new file mode 100644 index 0000000..5cf7a1d --- /dev/null +++ b/src/sharing/avatar-cache.ts @@ -0,0 +1,61 @@ +import { loadImage } from '@napi-rs/canvas'; + +async function boundedBytes(response: Response) { + const reader = response.body?.getReader(); + if (!reader) return null; + const chunks: Uint8Array[] = []; let size = 0; + try { + while (true) { + const { value, done } = await reader.read(); + if (done) return Buffer.concat(chunks); + size += value.byteLength; + if (size > 1024 * 1024) { await reader.cancel(); return null; } + chunks.push(value); + } + } finally { reader.releaseLock(); } +} + +type Avatar = Awaited>; +type Options = { + request?: typeof fetch; + now?: () => number; + maxEntries?: number; + maxPending?: number; + successTtlMs?: number; + failureTtlMs?: number; +}; +/** Hash-based Discord URLs invalidate naturally; bound both cached images and downloads. */ +export function createAvatarCache({ request = ((url, init) => fetch(url, init)) as typeof fetch, now = Date.now, maxEntries = 128, maxPending = 4, successTtlMs = 3600000, failureTtlMs = 30000 }: Options = {}) { + const cache = new Map(); + const pending = new Map>(); + return async (url: string): Promise => { + const cached = cache.get(url); + if (cached && cached.expires > now()) { + cache.delete(url); cache.set(url, cached); + return cached.image; + } + cache.delete(url); + const existing = pending.get(url); + if (existing) return existing; + if (pending.size >= maxPending) return null; + const job = (async () => { + let image: Avatar | null = null; + try { + const response = await request(url, { redirect: 'error', signal: AbortSignal.timeout(3000) }); + if (response.ok) { + const bytes = await boundedBytes(response); + if (bytes) { + const decoded = await loadImage(Buffer.from(bytes)); + if (decoded.width <= 256 && decoded.height <= 256) image = decoded; + } + } + } catch { /* A brief negative cache keeps an unavailable CDN out of the hot path. */ } + cache.set(url, { image, expires: now() + (image ? successTtlMs : failureTtlMs) }); + while (cache.size > maxEntries) cache.delete(cache.keys().next().value!); + return image; + })().finally(() => { pending.delete(url); }); + pending.set(url, job); + return job; + }; +} +export const cachedAvatar = createAvatarCache(); diff --git a/src/sharing/live-card-image.ts b/src/sharing/live-card-image.ts index e3535bd..60921a8 100644 --- a/src/sharing/live-card-image.ts +++ b/src/sharing/live-card-image.ts @@ -1,4 +1,5 @@ -import { createCanvas, GlobalFonts, loadImage } from "@napi-rs/canvas"; +import { cachedAvatar } from './avatar-cache'; +import { createCanvas, GlobalFonts } from "@napi-rs/canvas"; import { existsSync } from "node:fs"; import { eq } from "drizzle-orm"; import type { AppDatabase } from "../auth"; @@ -52,13 +53,7 @@ export async function renderLiveCard(data: LiveImageData, theme: Theme) { const canvas = createCanvas(layout.width, layout.height); const ctx = canvas.getContext('2d'); const colors = themePalette[theme]; - let avatar: Awaited> | null = null; - if (data.avatarUrl) { - try { - const response = await fetch(data.avatarUrl, { redirect: 'error', signal: AbortSignal.timeout(3000) }); - if (response.ok) avatar = await loadImage(Buffer.from(await response.arrayBuffer())); - } catch { /* Match the snapshot card's neutral avatar fallback. */ } - } + const avatar = data.avatarUrl ? await cachedAvatar(data.avatarUrl) : null; const rect = (x: number, y: number, w: number, h: number, color: string, radius = 0) => { ctx.fillStyle = color; ctx.beginPath(); ctx.roundRect(x, y, Math.max(0, w), Math.max(0, h), radius); ctx.fill(); };