diff --git a/packages/app/src/app/compare-per-dollar/[slug]/performance-per-dollar.png/route.tsx b/packages/app/src/app/compare-per-dollar/[slug]/performance-per-dollar.png/route.tsx index 775f287c..ba18088d 100644 --- a/packages/app/src/app/compare-per-dollar/[slug]/performance-per-dollar.png/route.tsx +++ b/packages/app/src/app/compare-per-dollar/[slug]/performance-per-dollar.png/route.tsx @@ -1,3 +1,6 @@ +import { readFile } from 'node:fs/promises'; +import { join } from 'node:path'; + import { ImageResponse } from 'next/og'; import { HW_REGISTRY } from '@semianalysisai/inferencex-constants'; @@ -91,6 +94,16 @@ function pointsPath(points: Point[]): string { return points.map((point, index) => `${index === 0 ? 'M' : 'L'} ${point.x} ${point.y}`).join(' '); } +let logoSrcPromise: Promise | undefined; +function getLogoSrc(): Promise { + if (!logoSrcPromise) { + logoSrcPromise = readFile(join(process.cwd(), 'public/brand/logo-color.png')) + .then((buf) => `data:image/png;base64,${buf.toString('base64')}`) + .catch(() => null); + } + return logoSrcPromise; +} + export async function GET( _request: Request, { params }: { params: Promise<{ slug: string }> }, @@ -101,7 +114,10 @@ export async function GET( return new Response('Not found', { status: 404 }); } - const rows = await getCachedBenchmarks(parsed.model.dbKeys); + const [rows, logoSrc] = await Promise.all([ + getCachedBenchmarks(parsed.model.dbKeys), + getLogoSrc(), + ]); const { sequence, precision } = pickPairDefaults(rows, parsed.a, parsed.b); const { ssrRows, interactivityRange } = computeCompareTableData( rows, @@ -502,6 +518,7 @@ export async function GET( style={{ display: 'flex', justifyContent: 'space-between', + alignItems: 'flex-end', paddingTop: 9 * R, fontSize: 15 * R, color: COLORS.muted, @@ -510,9 +527,19 @@ export async function GET( Owning-hyperscaler TCO | interpolated from benchmark results - - inferencex.semianalysis.com - +
+ {logoSrc && } + + inferencex.semianalysis.com + +
, {