Lumbridge Bench

2026-08-04 00:44:07 -07:00
commit 006feee0f7
65 changed files with 13516 additions and 0 deletions
@@ -0,0 +1,171 @@
+import fs from "node:fs";
+import path from "node:path";
+import { ImageResponse } from "next/og";
+import { fmtParams, getRun, getRuns, limitOf } from "@/lib/results";
+
+/**
+ * Shareable score card as a PNG.
+ *
+ * One image serves two jobs: the download button and the OpenGraph tag, so a
+ * pasted link unfurls as the card itself. Fonts are bundled rather than
+ * fetched at request time — satori needs real font buffers, and a network
+ * dependency inside image generation fails in exactly the situations where
+ * you want a share link to work.
+ *
+ * Note: satori supports flexbox only. Every container needs an explicit
+ * display value; CSS grid silently renders nothing.
+ */
+
+export const dynamic = "force-static";
+
+export function generateStaticParams() {
+  return getRuns().map((r) => ({ id: r.run_id.slice(0, 8) }));
+}
+
+const FONT_DIR = path.join(process.cwd(), "assets", "fonts");
+const font = (file: string) => fs.readFileSync(path.join(FONT_DIR, file));
+
+const VOID = "#08090b";
+const RULE = "#1e232b";
+const INK = "#e8e6e1";
+const DIM = "#79818d";
+const DIMMER = "#4a515b";
+const SIGNAL = "#f2b134";
+const REFERENCE = "#5896ae";
+
+function Stat({
+  label,
+  value,
+  unit,
+  color = INK,
+  hint,
+}: {
+  label: string;
+  value: string;
+  unit?: string;
+  color?: string;
+  hint?: string;
+}) {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", flex: 1 }}>
+      <div style={{ fontSize: 15, letterSpacing: 3, color: DIMMER, textTransform: "uppercase" }}>
+        {label}
+      </div>
+      <div style={{ display: "flex", alignItems: "baseline", marginTop: 12 }}>
+        <span style={{ fontFamily: "Instrument", fontSize: 62, color, lineHeight: 1 }}>{value}</span>
+        {unit && <span style={{ fontSize: 17, color: DIMMER, marginLeft: 7 }}>{unit}</span>}
+      </div>
+      {hint && <div style={{ fontSize: 14, color: DIMMER, marginTop: 8 }}>{hint}</div>}
+    </div>
+  );
+}
+
+export async function GET(
+  _req: Request,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const { id } = await params;
+  const run = getRun(id);
+  if (!run) return new Response("not found", { status: 404 });
+
+  const v = run.verdict;
+  const limit = limitOf(run);
+  const perf = run.perf?.points ?? [];
+  const single = perf.find((p) => p.concurrency === 1);
+  const peak = perf.length
+    ? perf.reduce((a, b) => (b.output_tps_total > a.output_tps_total ? b : a))
+    : null;
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          background: VOID,
+          fontFamily: "Plex",
+          color: INK,
+          padding: 56,
+        }}
+      >
+        {/* header */}
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
+          <div style={{ display: "flex", alignItems: "baseline" }}>
+            <span style={{ fontFamily: "Instrument", fontSize: 30 }}>bench</span>
+            <span style={{ fontFamily: "Instrument", fontSize: 30, color: DIMMER }}>.karti.ai</span>
+          </div>
+          <span style={{ fontSize: 15, letterSpacing: 3, color: DIMMER, textTransform: "uppercase" }}>
+            {run.timestamp.slice(0, 10)}
+          </span>
+        </div>
+
+        <div style={{ display: "flex", height: 1, background: RULE, marginTop: 24, marginBottom: 40 }} />
+
+        {/* title */}
+        <div style={{ display: "flex", flexDirection: "column" }}>
+          <span style={{ fontFamily: "Instrument", fontSize: 68, lineHeight: 1.05 }}>
+            {run.target.display_name}
+          </span>
+          <span style={{ fontSize: 18, color: DIM, marginTop: 16 }}>
+            {run.host.hardware} · {fmtParams(run.target)} ·{" "}
+            {run.target.quant?.toUpperCase()} · {run.target.serving.engine}
+          </span>
+        </div>
+
+        {/* stats */}
+        <div style={{ display: "flex", marginTop: "auto", gap: 24 }}>
+          <Stat
+            label="signal"
+            value={v.signal_score != null ? v.signal_score.toFixed(3) : "—"}
+            color={SIGNAL}
+            hint="our workloads"
+          />
+          <Stat
+            label="reference"
+            value={v.reference_score != null ? v.reference_score.toFixed(3) : "—"}
+            color={REFERENCE}
+            hint={limit ? `capped ${limit}` : "calibration"}
+          />
+          <Stat
+            label="single stream"
+            value={single ? single.output_tps_per_stream.toFixed(1) : "—"}
+            unit="tok/s"
+            hint={single?.ttft_p50_ms ? `ttft ${Math.round(single.ttft_p50_ms)}ms` : undefined}
+          />
+          <Stat
+            label="peak"
+            value={peak ? peak.output_tps_total.toFixed(0) : "—"}
+            unit="tok/s"
+            hint={peak ? `at ×${peak.concurrency}` : undefined}
+          />
+        </div>
+
+        {/* tick strip — a measurement scale across the full plate */}
+        <div style={{ display: "flex", marginTop: 40, justifyContent: "space-between", width: "100%" }}>
+          {Array.from({ length: 96 }).map((_, i) => (
+            <div
+              key={i}
+              style={{
+                display: "flex",
+                width: 1,
+                height: 8,
+                background: i % 6 === 0 ? SIGNAL : RULE,
+              }}
+            />
+          ))}
+        </div>
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 630,
+      fonts: [
+        { name: "Instrument", data: font("InstrumentSerif-Regular.ttf"), style: "normal", weight: 400 },
+        { name: "Plex", data: font("IBMPlexMono-Regular.ttf"), style: "normal", weight: 400 },
+        { name: "Plex", data: font("IBMPlexMono-SemiBold.ttf"), style: "normal", weight: 600 },
+      ],
+    },
+  );
+}