Add per-model + per-eval OpenGraph thumbnails; replace "EE/EC" mark with logo image

Social/chat unfurls now identify the specific model or benchmark being
shared instead of showing the generic homepage card.

- /api/og/models/[...id] and /api/og/evals/[...id] render dynamic 1200x630
PNGs via next/og's ImageResponse, pulling display name / developer /
category / models-evaluated / top-model from the existing DuckDB-backed
summary getters. Cards include the EvalEval brand logo (logo-square.png)
in place of the previous text mark. The handlers live under /api/og/
rather than as `opengraph-image.tsx` siblings because Next.js 15 rejects
metadata files inside catch-all (`[...id]`) folders.
- app/models/[...id]/layout.tsx and app/evals/[...id]/layout.tsx own the
`generateMetadata` for those routes (the page components are client-side,
so they can't export metadata directly). The layouts also seed the
per-entity `title`/`description`/`og:image`/`twitter:image` so non-image
unfurls also identify the entity.
- app/opengraph-image.tsx swaps the inline "EE" text mark for the same
logo image used elsewhere.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

app/api/og/_shared.ts

@@ -0,0 +1,33 @@
+/**
+ * Helpers shared between the dynamic OpenGraph image routes
+ * (/api/og/models/[...id] and /api/og/evals/[...id]).  The route
+ * handlers run on the node runtime because they query the same
+ * DuckDB backend the rest of the app uses; this file just collects
+ * the common chrome (size, content-type, brand mark URL resolution)
+ * so the per-entity handlers can focus on the entity content.
+ */
+
+export const OG_SIZE = { width: 1200, height: 630 } as const
+export const OG_CONTENT_TYPE = "image/png"
+
+/**
+ * Absolute URL for the brand-mark image used inside the generated card.
+ * `ImageResponse`'s `<img src="…" />` needs a fetchable URL because the
+ * renderer worker downloads the bytes at render time. In production the
+ * Space hosts the file at `<origin>/logo-square.png`; for local dev we
+ * fall back to localhost so headless preview hits something real.
+ */
+export function resolveBrandLogoUrl(request: Request): string {
+  const fromEnv = process.env.NEXT_PUBLIC_SITE_URL?.trim().replace(/\/+$/, "")
+  const origin = fromEnv || new URL(request.url).origin
+  return `${origin}/logo-square.png`
+}
+
+/**
+ * Truncate a long display name so it doesn't overflow the 1200×630 card
+ * frame. Adds an ellipsis when truncated.
+ */
+export function ellipsize(value: string, max: number): string {
+  if (value.length <= max) return value
+  return `${value.slice(0, max - 1).trimEnd()}…`
+}

app/api/og/evals/[...id]/route.tsx

@@ -0,0 +1,200 @@
+import { ImageResponse } from "next/og"
+
+import { OG_CONTENT_TYPE, OG_SIZE, ellipsize, resolveBrandLogoUrl } from "@/app/api/og/_shared"
+import { getEvalSummaryById } from "@/lib/data-backend"
+import { routeIdFromSegments } from "@/lib/utils"
+
+export const runtime = "nodejs"
+
+function formatScore(value: number, unit: string | null): string {
+  const isPercentish = !unit || /percent|proportion|accuracy|score|pass@|exact|f1|%/i.test(unit)
+  if (isPercentish) {
+    const v = Math.abs(value) <= 1 ? value * 100 : value
+    return `${v.toFixed(1)}%`
+  }
+  return value.toFixed(3).replace(/0+$/g, "").replace(/\.$/, "")
+}
+
+/**
+ * Dynamic OpenGraph image for an eval/benchmark page. Pulls the
+ * canonical benchmark name, category, model count, and top result out
+ * of the eval summary so the unfurl identifies the specific benchmark.
+ */
+export async function GET(
+  request: Request,
+  context: { params: Promise<{ id: string | string[] }> },
+) {
+  const { id } = await context.params
+  const evalId = routeIdFromSegments(id)
+
+  let evalName = "Benchmark"
+  let category: string | null = null
+  let modelsCount: number | null = null
+  let topModelName: string | null = null
+  let topScore: number | null = null
+  let unit: string | null = null
+
+  try {
+    const summary = await getEvalSummaryById(evalId)
+    if (summary) {
+      evalName =
+        summary.canonical_display_name ??
+        summary.evaluation_name ??
+        summary.composite_display_name ??
+        evalName
+      category = summary.category ?? null
+      modelsCount = summary.models_count ?? null
+      topModelName = summary.best_model?.name ?? null
+      topScore = summary.best_model?.score ?? null
+      unit = summary.metric_config?.unit ?? null
+    }
+  } catch {
+    // Fall through to the generic card.
+  }
+
+  const logoUrl = resolveBrandLogoUrl(request)
+  const displayName = ellipsize(evalName, 64)
+
+  const response = new ImageResponse(
+    (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          background: "#faf9f6",
+          color: "#1a1916",
+          fontFamily: "Inter, sans-serif",
+          padding: "72px",
+        }}
+      >
+        <div style={{ display: "flex", alignItems: "center", gap: "16px" }}>
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={logoUrl}
+            width={56}
+            height={56}
+            alt=""
+            style={{ borderRadius: "4px" }}
+          />
+          <div style={{ fontSize: "26px", fontWeight: 700, letterSpacing: "-0.01em" }}>
+            Evaluation Cards
+          </div>
+          <div
+            style={{
+              fontFamily: "monospace",
+              fontSize: "14px",
+              letterSpacing: "0.2em",
+              textTransform: "uppercase",
+              color: "#9c9a95",
+              paddingLeft: "20px",
+              marginLeft: "8px",
+              borderLeft: "1px solid #e8e6e1",
+              display: "flex",
+              alignItems: "center",
+              height: "32px",
+            }}
+          >
+            Benchmark
+          </div>
+        </div>
+
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "20px",
+            flex: 1,
+            justifyContent: "center",
+            paddingTop: "8px",
+          }}
+        >
+          {category && (
+            <div
+              style={{
+                fontFamily: "monospace",
+                fontSize: "16px",
+                letterSpacing: "0.2em",
+                textTransform: "uppercase",
+                color: "#5bacd1",
+                fontWeight: 600,
+              }}
+            >
+              {category}
+            </div>
+          )}
+          <div
+            style={{
+              fontSize: "82px",
+              lineHeight: 1.02,
+              letterSpacing: "-0.04em",
+              fontWeight: 700,
+              maxWidth: "1060px",
+              wordBreak: "break-word",
+            }}
+          >
+            {displayName}
+          </div>
+          {(modelsCount != null || topModelName) && (
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                gap: "8px",
+                fontSize: "24px",
+                color: "#5c5a55",
+                lineHeight: 1.4,
+              }}
+            >
+              {modelsCount != null && (
+                <div>
+                  {`${modelsCount.toLocaleString("en-US")} ${modelsCount === 1 ? "model evaluated" : "models evaluated"}`}
+                </div>
+              )}
+              {topModelName && topScore != null && Number.isFinite(topScore) && (
+                <div style={{ display: "flex", alignItems: "baseline", gap: "10px" }}>
+                  <span>Top:</span>
+                  <span style={{ color: "#1a1916", fontWeight: 600 }}>{topModelName}</span>
+                  <span style={{ color: "#5bacd1", fontWeight: 600 }}>
+                    {formatScore(topScore, unit)}
+                  </span>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            paddingTop: "26px",
+            borderTop: "1px solid #1a1916",
+            fontFamily: "monospace",
+            fontSize: "15px",
+            letterSpacing: "0.18em",
+            textTransform: "uppercase",
+            color: "#5c5a55",
+          }}
+        >
+          <div style={{ display: "flex", alignItems: "center", gap: "14px" }}>
+            <span style={{ color: "#1a1916", fontWeight: 600 }}>Reproducibility</span>
+            <span style={{ color: "#9c9a95" }}>·</span>
+            <span style={{ color: "#1a1916", fontWeight: 600 }}>Completeness</span>
+            <span style={{ color: "#9c9a95" }}>·</span>
+            <span style={{ color: "#1a1916", fontWeight: 600 }}>Provenance</span>
+            <span style={{ color: "#9c9a95" }}>·</span>
+            <span style={{ color: "#1a1916", fontWeight: 600 }}>Comparability</span>
+          </div>
+          <div style={{ color: "#9c9a95" }}>Evaluation Cards</div>
+        </div>
+      </div>
+    ),
+    OG_SIZE,
+  )
+  response.headers.set("content-type", OG_CONTENT_TYPE)
+  response.headers.set("cache-control", "public, max-age=3600, s-maxage=86400")
+  return response
+}

app/api/og/models/[...id]/route.tsx

@@ -0,0 +1,171 @@
+import { ImageResponse } from "next/og"
+
+import { OG_CONTENT_TYPE, OG_SIZE, ellipsize, resolveBrandLogoUrl } from "@/app/api/og/_shared"
+import { getModelSummaryById } from "@/lib/data-backend"
+import { routeIdFromSegments } from "@/lib/utils"
+
+export const runtime = "nodejs"
+
+/**
+ * Dynamic OpenGraph image for a model page. Reaches into the same
+ * DuckDB-backed model summary the route handler uses so the unfurled
+ * card identifies the specific model rather than rendering the
+ * generic site card. Co-located under /api/og/ rather than as an
+ * `opengraph-image.tsx` sibling of the page because Next.js 15 rejects
+ * metadata files inside catch-all (`[...id]`) folders.
+ */
+export async function GET(
+  request: Request,
+  context: { params: Promise<{ id: string | string[] }> },
+) {
+  const { id } = await context.params
+  const routeId = routeIdFromSegments(id)
+
+  let modelName = "Model"
+  let developer: string | null = null
+  let benchmarkCount: number | null = null
+
+  try {
+    const summary = await getModelSummaryById(routeId)
+    if (summary) {
+      modelName = summary.model_info?.name ?? modelName
+      developer = summary.model_info?.developer ?? null
+      const categories = summary.evaluations_by_category ?? {}
+      const seen = new Set<string>()
+      let total = 0
+      for (const items of Object.values(categories)) {
+        for (const item of items ?? []) {
+          total += 1
+          const key = (item as { benchmark?: string; evaluation_id?: string }).benchmark
+            ?? (item as { evaluation_id?: string }).evaluation_id
+          if (key) seen.add(key)
+        }
+      }
+      benchmarkCount = seen.size > 0 ? seen.size : total > 0 ? total : null
+    }
+  } catch {
+    // Fall through to the generic card.
+  }
+
+  const logoUrl = resolveBrandLogoUrl(request)
+  const displayName = ellipsize(modelName, 64)
+
+  const response = new ImageResponse(
+    (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          background: "#faf9f6",
+          color: "#1a1916",
+          fontFamily: "Inter, sans-serif",
+          padding: "72px",
+        }}
+      >
+        <div style={{ display: "flex", alignItems: "center", gap: "16px" }}>
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={logoUrl}
+            width={56}
+            height={56}
+            alt=""
+            style={{ borderRadius: "4px" }}
+          />
+          <div style={{ fontSize: "26px", fontWeight: 700, letterSpacing: "-0.01em" }}>
+            Evaluation Cards
+          </div>
+          <div
+            style={{
+              fontFamily: "monospace",
+              fontSize: "14px",
+              letterSpacing: "0.2em",
+              textTransform: "uppercase",
+              color: "#9c9a95",
+              paddingLeft: "20px",
+              marginLeft: "8px",
+              borderLeft: "1px solid #e8e6e1",
+              display: "flex",
+              alignItems: "center",
+              height: "32px",
+            }}
+          >
+            Model card
+          </div>
+        </div>
+
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "20px",
+            flex: 1,
+            justifyContent: "center",
+            paddingTop: "8px",
+          }}
+        >
+          <div
+            style={{
+              fontFamily: "monospace",
+              fontSize: "16px",
+              letterSpacing: "0.2em",
+              textTransform: "uppercase",
+              color: "#5bacd1",
+              fontWeight: 600,
+            }}
+          >
+            {developer ?? "Model"}
+          </div>
+          <div
+            style={{
+              fontSize: "88px",
+              lineHeight: 1.02,
+              letterSpacing: "-0.04em",
+              fontWeight: 700,
+              maxWidth: "1060px",
+              wordBreak: "break-word",
+            }}
+          >
+            {displayName}
+          </div>
+          {benchmarkCount != null && (
+            <div style={{ fontSize: "26px", color: "#5c5a55", lineHeight: 1.4 }}>
+              {`Reported on ${benchmarkCount.toLocaleString("en-US")} ${benchmarkCount === 1 ? "benchmark" : "benchmarks"}.`}
+            </div>
+          )}
+        </div>
+
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            paddingTop: "26px",
+            borderTop: "1px solid #1a1916",
+            fontFamily: "monospace",
+            fontSize: "15px",
+            letterSpacing: "0.18em",
+            textTransform: "uppercase",
+            color: "#5c5a55",
+          }}
+        >
+          <div style={{ display: "flex", alignItems: "center", gap: "14px" }}>
+            <span style={{ color: "#1a1916", fontWeight: 600 }}>Reproducibility</span>
+            <span style={{ color: "#9c9a95" }}>��</span>
+            <span style={{ color: "#1a1916", fontWeight: 600 }}>Completeness</span>
+            <span style={{ color: "#9c9a95" }}>·</span>
+            <span style={{ color: "#1a1916", fontWeight: 600 }}>Provenance</span>
+            <span style={{ color: "#9c9a95" }}>·</span>
+            <span style={{ color: "#1a1916", fontWeight: 600 }}>Comparability</span>
+          </div>
+          <div style={{ color: "#9c9a95" }}>Evaluation Cards</div>
+        </div>
+      </div>
+    ),
+    OG_SIZE,
+  )
+  response.headers.set("content-type", OG_CONTENT_TYPE)
+  response.headers.set("cache-control", "public, max-age=3600, s-maxage=86400")
+  return response
+}

app/evals/[...id]/layout.tsx

@@ -0,0 +1,73 @@
+import type { Metadata } from "next"
+
+import { getEvalSummaryById } from "@/lib/data-backend"
+import { routeIdFromSegments, routeIdToPath } from "@/lib/utils"
+
+/**
+ * Server-side metadata for the eval/benchmark detail page. Mirrors
+ * app/models/[...id]/layout.tsx — the page itself is a client
+ * component, so this sibling owns the OpenGraph payload so unfurls
+ * surface the specific benchmark's name + per-benchmark thumbnail
+ * (rendered by /api/og/evals/<id>).
+ */
+export async function generateMetadata(props: {
+  params: Promise<{ id: string | string[] }>
+}): Promise<Metadata> {
+  const { id } = await props.params
+  const routeId = routeIdFromSegments(id)
+  let evalName = "Benchmark"
+  let category: string | null = null
+  let modelsCount: number | null = null
+
+  try {
+    const summary = await getEvalSummaryById(routeId)
+    if (summary) {
+      evalName =
+        summary.canonical_display_name ??
+        summary.evaluation_name ??
+        summary.composite_display_name ??
+        evalName
+      category = summary.category ?? null
+      modelsCount = summary.models_count ?? null
+    }
+  } catch {
+    // Fall through to generic copy.
+  }
+
+  const idSlug = routeIdToPath(routeId)
+  const title = category ? `${evalName} — ${category}` : evalName
+  const description = modelsCount
+    ? `${evalName} — ${modelsCount.toLocaleString("en-US")} models evaluated, with reproducibility, completeness, provenance, and comparability signals computed over every result.`
+    : `${evalName} — reported model–benchmark results on Evaluation Cards.`
+  const imageUrl = `/api/og/evals/${idSlug}`
+
+  return {
+    title,
+    description,
+    openGraph: {
+      title,
+      description,
+      type: "article",
+      images: [
+        {
+          url: imageUrl,
+          width: 1200,
+          height: 630,
+          alt: `${evalName} — Evaluation Cards`,
+        },
+      ],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title,
+      description,
+      images: [imageUrl],
+    },
+  }
+}
+
+export default function EvalDetailLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return children
+}

app/models/[...id]/layout.tsx

@@ -0,0 +1,67 @@
+import type { Metadata } from "next"
+
+import { getModelSummaryById } from "@/lib/data-backend"
+import { routeIdFromSegments, routeIdToPath } from "@/lib/utils"
+
+/**
+ * Server-side metadata for the model detail page. The page itself is a
+ * client component so it can't export `generateMetadata` directly; this
+ * sibling layout owns the OpenGraph payload so social/chat unfurls
+ * carry the model's name + a per-model thumbnail (rendered by
+ * /api/og/models/<id>) instead of the site-wide card.
+ */
+export async function generateMetadata(props: {
+  params: Promise<{ id: string | string[] }>
+}): Promise<Metadata> {
+  const { id } = await props.params
+  const routeId = routeIdFromSegments(id)
+  let modelName = "Model"
+  let developer: string | null = null
+
+  try {
+    const summary = await getModelSummaryById(routeId)
+    if (summary) {
+      modelName = summary.model_info?.name ?? modelName
+      developer = summary.model_info?.developer ?? null
+    }
+  } catch {
+    // Fall through to generic copy.
+  }
+
+  const idSlug = routeIdToPath(routeId)
+  const title = developer ? `${modelName} — ${developer}` : modelName
+  const description = developer
+    ? `${modelName} (${developer}) — every reported model–benchmark result, organised under Evaluation Cards' five-level hierarchy and four interpretive signals.`
+    : `${modelName} — every reported model–benchmark result on Evaluation Cards.`
+  const imageUrl = `/api/og/models/${idSlug}`
+
+  return {
+    title,
+    description,
+    openGraph: {
+      title,
+      description,
+      type: "article",
+      images: [
+        {
+          url: imageUrl,
+          width: 1200,
+          height: 630,
+          alt: `${modelName} — Evaluation Cards`,
+        },
+      ],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title,
+      description,
+      images: [imageUrl],
+    },
+  }
+}
+
+export default function ModelDetailLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return children
+}

app/opengraph-image.tsx

@@ -5,7 +5,15 @@ export const alt = "Evaluation Cards — a reporting layer over evaluation infra
 export const size = { width: 1200, height: 630 }
 export const contentType = "image/png"
 
+// Brand mark URL. `ImageResponse` fetches `<img src>` at render time,
+// so it needs an absolute URL — prefer NEXT_PUBLIC_SITE_URL (set on
+// the Space), else fall back to the canonical remote.
+const LOGO_URL =
+  (process.env.NEXT_PUBLIC_SITE_URL?.trim().replace(/\/+$/, "") ?? "") + "/logo-square.png"
+const FALLBACK_LOGO_URL = "https://evalevalai.com/assets/img/logo-square.png"
+
 export default function OpenGraphImage() {
+  const logoUrl = LOGO_URL.startsWith("http") ? LOGO_URL : FALLBACK_LOGO_URL
   return new ImageResponse(
     (
       <div
@@ -28,24 +36,14 @@ export default function OpenGraphImage() {
             gap: "16px",
           }}
         >
-          <div
-            style={{
-              width: "56px",
-              height: "56px",
-              background: "#5bacd1",
-              color: "#ffffff",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              fontFamily: "monospace",
-              fontWeight: 600,
-              fontSize: "22px",
-              letterSpacing: "0.02em",
-              borderRadius: "4px",
-            }}
-          >
-            EE
-          </div>
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={logoUrl}
+            width={56}
+            height={56}
+            alt=""
+            style={{ borderRadius: "4px" }}
+          />
           <div
             style={{
               fontSize: "26px",