feat(compare-per-dollar): embed SemiAnalysis logo in chart PNG footer

[Oseltamivir]

Summary

• Adds a cached getLogoSrc() helper (1:1 with opengraph-image.tsx) that reads public/brand/logo-color.png into a base64 data URL.
• Loads the logo in parallel with the benchmark fetch via Promise.all.
• Stacks the logo (height 28 * R = 56 px native) above the existing inferencex.semianalysis.com text in the bottom-right footer of the indexed chart PNG.

Motivation: the /compare-per-dollar/* chart PNGs are linked from the image sitemap and intended for Google Images / republication. Adding the SemiAnalysis wordmark strengthens attribution when the image is surfaced outside the site.

Test plan

• Open the Vercel preview for /compare-per-dollar/deepseek-v4-gb200-vs-gb300/performance-per-dollar.png and confirm the logo renders above inferencex.semianalysis.com in the bottom-right corner, sharp at 2x.
• Spot-check a few other slugs (e.g. deepseek-r1-b200-vs-gb300, glm-5-1-gb300-vs-mi355x) to confirm consistent placement across pair variations.
• Confirm the embedded <img> on the page (packages/app/src/app/compare-per-dollar/[slug]/page.tsx) still loads — the PNG URL is unchanged.

---

Note

Low Risk
Visual-only change to OG PNG rendering with graceful logo load failure; no API, auth, or data logic changes.

Overview
Adds a cached getLogoSrc() helper (same pattern as opengraph-image.tsx) that reads public/brand/logo-color.png into a base64 data URL, with failures resolving to null so PNG generation still succeeds.

Benchmark loading now runs in Promise.all alongside the logo read. When the logo is available, the compare chart renders a centered, low-opacity (12%) watermark over the plot area via an absolutely positioned <img>—intended to strengthen SemiAnalysis attribution when /compare-per-dollar/*/performance-per-dollar.png is reused off-site (e.g. image search).

^{Reviewed by Cursor Bugbot for commit 44ca1ad. Bugbot is set up for automated code reviews on this repo. Configure here.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
inferencemax-app	Ready	Preview, Comment	Jun 12, 2026 7:08pm

[Oseltamivir]

@claude resolve conflicts. Move the watermark on top of the cost comparison chart with low opacity

[github-actions]

Claude finished @Oseltamivir's task in 8m 6s —— View job

---

Done

• Read PR context and understand current state
• Check for merge conflicts with origin/master
• Move watermark on top of chart with low opacity
• Resolved conflicts (kept master's trackServer try/catch refactor; re-applied logo as a watermark)
• Typecheck + lint + fmt all green
• Committed + pushed

What changed vs. the previous PR head

• Footer logo (bottom-right under the table) removed.
• getLogoSrc() helper and parallel Promise.all load kept.
• Logo now renders as an absolutely-positioned <img> inside the chart container (sibling of the SVG), centered over the chart area:
  • height: 48 * R, computed width ≈ 112 * R (1920×825 logo aspect)
  • left: CHART.left + CHART.width / 2 - 56 * R
  • top: CHART.top + CHART.height / 2 - 24 * R
  • opacity: 0.12

Preview the PNG (Vercel preview): /compare-per-dollar/<slug>/performance-per-dollar.png — verify the wordmark appears faintly behind the cost curves and that the curves/dots stay legible across pairs (small / large cost spans, with and without curve extensions).

Not done

• I did not run Cypress E2E (this is a server-rendered PNG route — Cypress doesn't cover it). Visual verification belongs on the Vercel preview.
• Re Bugbot's earlier note about the duplicated getLogoSrc helper across four files — kept it inline here since you previously chose the 1:1 copy approach in opengraph-image.tsx; happy to extract if you want it in a follow-up.
  • Branch: feat/compare-per-dollar-logo

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

There are 2 total unresolved issues (including 1 from previous review).

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 505324b. Configure here.}

[Oseltamivir]

@claude increase the size by 3x

[github-actions]

Claude finished @Oseltamivir's task in 1m 53s —— View job

---

Done

• Read PR context and route
• Triple watermark size and recenter offsets
• Typecheck + lint + fmt all green
• Committed + pushed

What changed

Watermark scaled by 3x in packages/app/src/app/compare-per-dollar/[slug]/performance-per-dollar.png/route.tsx:

	Before	After
height	48 * R	144 * R
half-width offset (left)	56 * R	168 * R
half-height offset (top)	24 * R	72 * R

The half-width offset stays in step with the height because the logo's intrinsic aspect ratio (1920×825) is preserved when only height is set — at 144 * R height the rendered width is ≈ 336 * R, so subtracting 168 * R from CHART.left + CHART.width / 2 keeps it centered over the plot area. This also addresses Bugbot's earlier "horizontal offset mismatch" note since the new horizontal half-inset (168) is correctly half of the new computed width (336).

Opacity (0.12) kept — the logo is now ≈3× the previous footprint but still subtle.

Preview: open the Vercel preview PNG at /compare-per-dollar/<slug>/performance-per-dollar.png once the deploy lands and confirm the wordmark fills the chart area more prominently while data curves remain legible.
— branch: feat/compare-per-dollar-logo