mock-html-modelcard / README.md
mishig's picture
mishig HF Staff
Fix badge sizing (prose img margins) and tighten layout
84d5de0 verified
|
Raw
History Blame Contribute Delete
38.7 kB
---
license: mit
library_name: transformers
pipeline_tag: text-generation
tags:
- mock
- showcase
- html-model-card
---
# GLM-5.2 (mock model card)
> [!NOTE]
> **This is a mock repository.** It exists to showcase how far you can push a Hugging Face model card with sanitized inline-style HTML. The chart below is a pure-HTML recreation of the benchmark figure from the [zai-org/GLM-5.2](https://huggingface.co/zai-org/GLM-5.2) model card, using Hugging Face org avatars as the chart logos. All numbers are illustrative.
<div style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background:#ffffff; border:1px solid #E5E7EB; border-radius:16px; padding:28px 30px; overflow-x:auto;">
<div style="display:flex; align-items:flex-start; justify-content:space-between; gap:16px;">
<div>
<div style="font-size:30px; font-weight:800; color:#0F172A; line-height:1.2;">LLM Performance Evaluation</div>
<div style="margin-top:10px; font-size:14px; color:#9CA3AF;">8 Benchmarks: SWE-bench Pro, Terminal-Bench 2.1 (Terminus), NL2Repo, DeepSWE, ProgramBench, MCP-Atlas, Tool-Decathlon, Humanity&#8217;s Last Exam</div>
<div style="margin-top:4px; font-size:14px; color:#9CA3AF;">All models are evaluated under their maximum thinking effort</div>
</div>
<img src="https://cdn-avatars.huggingface.co/v1/production/uploads/62dc173789b4cf157d36ebee/i_pxzM2ZDo3Ub-BEgIkE9.png" alt="Z.ai" style="width:42px; height:42px; border-radius:9px; flex-shrink:0; margin:0;">
</div>
<div style="display:flex; flex-wrap:wrap; gap:12px 26px; margin:18px 0 26px 0;"><span style="display:inline-flex; align-items:center; gap:8px;"><span style="width:13px; height:13px; border-radius:3px; background:#2379FF; display:inline-block;"></span><span style="font-size:16px; font-weight:700; color:#111827;">GLM-5.2</span></span><span style="display:inline-flex; align-items:center; gap:8px;"><span style="width:13px; height:13px; border-radius:3px; background:#35BD7D; display:inline-block;"></span><span style="font-size:16px; font-weight:700; color:#111827;">GLM-5.1</span></span><span style="display:inline-flex; align-items:center; gap:8px;"><span style="width:13px; height:13px; border-radius:3px; background:#B9BEC9; display:inline-block;"></span><span style="font-size:16px; font-weight:700; color:#111827;">Claude Opus 4.8</span></span><span style="display:inline-flex; align-items:center; gap:8px;"><span style="width:13px; height:13px; border-radius:3px; background:#E7E9EC; display:inline-block;"></span><span style="font-size:16px; font-weight:700; color:#111827;">GPT-5.5</span></span><span style="display:inline-flex; align-items:center; gap:8px;"><span style="width:13px; height:13px; border-radius:3px; background:#CDD1D7; display:inline-block;"></span><span style="font-size:16px; font-weight:700; color:#111827;">Gemini 3.1 Pro</span></span></div>
<div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:34px 12px; justify-items:center;">
<div style="display:flex; flex-direction:column; align-items:center; gap:14px;"><div style="display:flex; align-items:flex-end; justify-content:center; gap:7px;"><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:800; color:#0F172A; line-height:1.1;">62.1</span><div style="width:100%; height:161px; background:linear-gradient(180deg, #3D8BFF 0%, #1B6BFF 100%); border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/62dc173789b4cf157d36ebee/i_pxzM2ZDo3Ub-BEgIkE9.png" alt="zai logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">58.4</span><div style="width:100%; height:152px; background:linear-gradient(180deg, #3DC98A 0%, #1FA96B 100%); border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/62dc173789b4cf157d36ebee/i_pxzM2ZDo3Ub-BEgIkE9.png" alt="zai logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">69.2</span><div style="width:100%; height:180px; background:#C6CBD4; border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/1670531762351-6200d0a443eb0913fa2df7cc.png" alt="anthropic logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">58.6</span><div style="width:100%; height:152px; background:#E9EBEE; border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/68783facef79a05727260de3/UPX5RQxiPGA-ZbBmArIKq.png" alt="openai logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">54.2</span><div style="width:100%; height:141px; background:#D7DADF; border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/5dd96eb166059660ed1ee413/WtA3YYitedOr9n02eHfJe.png" alt="google logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div></div><span style="display:inline-block; border:1px solid #D1D5DB; border-radius:999px; padding:5px 16px; font-size:13px; font-weight:600; color:#4B5563;">SWE-bench Pro</span></div><div style="display:flex; flex-direction:column; align-items:center; gap:14px;"><div style="display:flex; align-items:flex-end; justify-content:center; gap:7px;"><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:800; color:#0F172A; line-height:1.1;">81.0</span><div style="width:100%; height:211px; background:linear-gradient(180deg, #3D8BFF 0%, #1B6BFF 100%); border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/62dc173789b4cf157d36ebee/i_pxzM2ZDo3Ub-BEgIkE9.png" alt="zai logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">63.5</span><div style="width:100%; height:165px; background:linear-gradient(180deg, #3DC98A 0%, #1FA96B 100%); border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/62dc173789b4cf157d36ebee/i_pxzM2ZDo3Ub-BEgIkE9.png" alt="zai logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">85.0</span><div style="width:100%; height:221px; background:#C6CBD4; border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/1670531762351-6200d0a443eb0913fa2df7cc.png" alt="anthropic logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">84.0</span><div style="width:100%; height:218px; background:#E9EBEE; border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/68783facef79a05727260de3/UPX5RQxiPGA-ZbBmArIKq.png" alt="openai logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">74.0</span><div style="width:100%; height:192px; background:#D7DADF; border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/5dd96eb166059660ed1ee413/WtA3YYitedOr9n02eHfJe.png" alt="google logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div></div><span style="display:inline-block; border:1px solid #D1D5DB; border-radius:999px; padding:5px 16px; font-size:13px; font-weight:600; color:#4B5563;">Terminal-Bench 2.1</span></div><div style="display:flex; flex-direction:column; align-items:center; gap:14px;"><div style="display:flex; align-items:flex-end; justify-content:center; gap:7px;"><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:800; color:#0F172A; line-height:1.1;">48.9</span><div style="width:100%; height:127px; background:linear-gradient(180deg, #3D8BFF 0%, #1B6BFF 100%); border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/62dc173789b4cf157d36ebee/i_pxzM2ZDo3Ub-BEgIkE9.png" alt="zai logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">42.7</span><div style="width:100%; height:111px; background:linear-gradient(180deg, #3DC98A 0%, #1FA96B 100%); border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/62dc173789b4cf157d36ebee/i_pxzM2ZDo3Ub-BEgIkE9.png" alt="zai logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">69.7</span><div style="width:100%; height:181px; background:#C6CBD4; border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/1670531762351-6200d0a443eb0913fa2df7cc.png" alt="anthropic logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">50.7</span><div style="width:100%; height:132px; background:#E9EBEE; border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/68783facef79a05727260de3/UPX5RQxiPGA-ZbBmArIKq.png" alt="openai logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">33.4</span><div style="width:100%; height:87px; background:#D7DADF; border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/5dd96eb166059660ed1ee413/WtA3YYitedOr9n02eHfJe.png" alt="google logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div></div><span style="display:inline-block; border:1px solid #D1D5DB; border-radius:999px; padding:5px 16px; font-size:13px; font-weight:600; color:#4B5563;">NL2Repo</span></div><div style="display:flex; flex-direction:column; align-items:center; gap:14px;"><div style="display:flex; align-items:flex-end; justify-content:center; gap:7px;"><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:800; color:#0F172A; line-height:1.1;">46.2</span><div style="width:100%; height:120px; background:linear-gradient(180deg, #3D8BFF 0%, #1B6BFF 100%); border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/62dc173789b4cf157d36ebee/i_pxzM2ZDo3Ub-BEgIkE9.png" alt="zai logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">18.0</span><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/62dc173789b4cf157d36ebee/i_pxzM2ZDo3Ub-BEgIkE9.png" alt="zai logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span><div style="width:100%; height:47px; background:linear-gradient(180deg, #3DC98A 0%, #1FA96B 100%); border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">58.0</span><div style="width:100%; height:151px; background:#C6CBD4; border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/1670531762351-6200d0a443eb0913fa2df7cc.png" alt="anthropic logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">70.0</span><div style="width:100%; height:182px; background:#E9EBEE; border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/68783facef79a05727260de3/UPX5RQxiPGA-ZbBmArIKq.png" alt="openai logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">10.0</span><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/5dd96eb166059660ed1ee413/WtA3YYitedOr9n02eHfJe.png" alt="google logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span><div style="width:100%; height:26px; background:#D7DADF; border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"></div></div></div><span style="display:inline-block; border:1px solid #D1D5DB; border-radius:999px; padding:5px 16px; font-size:13px; font-weight:600; color:#4B5563;">DeepSWE</span></div><div style="display:flex; flex-direction:column; align-items:center; gap:14px;"><div style="display:flex; align-items:flex-end; justify-content:center; gap:7px;"><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:800; color:#0F172A; line-height:1.1;">63.7</span><div style="width:100%; height:166px; background:linear-gradient(180deg, #3D8BFF 0%, #1B6BFF 100%); border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/62dc173789b4cf157d36ebee/i_pxzM2ZDo3Ub-BEgIkE9.png" alt="zai logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">50.9</span><div style="width:100%; height:132px; background:linear-gradient(180deg, #3DC98A 0%, #1FA96B 100%); border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/62dc173789b4cf157d36ebee/i_pxzM2ZDo3Ub-BEgIkE9.png" alt="zai logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">71.9</span><div style="width:100%; height:187px; background:#C6CBD4; border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/1670531762351-6200d0a443eb0913fa2df7cc.png" alt="anthropic logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">70.8</span><div style="width:100%; height:184px; background:#E9EBEE; border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/68783facef79a05727260de3/UPX5RQxiPGA-ZbBmArIKq.png" alt="openai logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">39.5</span><div style="width:100%; height:103px; background:#D7DADF; border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/5dd96eb166059660ed1ee413/WtA3YYitedOr9n02eHfJe.png" alt="google logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div></div><span style="display:inline-block; border:1px solid #D1D5DB; border-radius:999px; padding:5px 16px; font-size:13px; font-weight:600; color:#4B5563;">ProgramBench</span></div><div style="display:flex; flex-direction:column; align-items:center; gap:14px;"><div style="display:flex; align-items:flex-end; justify-content:center; gap:7px;"><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:800; color:#0F172A; line-height:1.1;">77.0</span><div style="width:100%; height:200px; background:linear-gradient(180deg, #3D8BFF 0%, #1B6BFF 100%); border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/62dc173789b4cf157d36ebee/i_pxzM2ZDo3Ub-BEgIkE9.png" alt="zai logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">71.8</span><div style="width:100%; height:187px; background:linear-gradient(180deg, #3DC98A 0%, #1FA96B 100%); border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/62dc173789b4cf157d36ebee/i_pxzM2ZDo3Ub-BEgIkE9.png" alt="zai logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">77.8</span><div style="width:100%; height:202px; background:#C6CBD4; border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/1670531762351-6200d0a443eb0913fa2df7cc.png" alt="anthropic logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">75.3</span><div style="width:100%; height:196px; background:#E9EBEE; border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/68783facef79a05727260de3/UPX5RQxiPGA-ZbBmArIKq.png" alt="openai logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">69.2</span><div style="width:100%; height:180px; background:#D7DADF; border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/5dd96eb166059660ed1ee413/WtA3YYitedOr9n02eHfJe.png" alt="google logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div></div><span style="display:inline-block; border:1px solid #D1D5DB; border-radius:999px; padding:5px 16px; font-size:13px; font-weight:600; color:#4B5563;">MCP-Atlas</span></div><div style="display:flex; flex-direction:column; align-items:center; gap:14px;"><div style="display:flex; align-items:flex-end; justify-content:center; gap:7px;"><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:800; color:#0F172A; line-height:1.1;">48.2</span><div style="width:100%; height:125px; background:linear-gradient(180deg, #3D8BFF 0%, #1B6BFF 100%); border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/62dc173789b4cf157d36ebee/i_pxzM2ZDo3Ub-BEgIkE9.png" alt="zai logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">40.7</span><div style="width:100%; height:106px; background:linear-gradient(180deg, #3DC98A 0%, #1FA96B 100%); border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/62dc173789b4cf157d36ebee/i_pxzM2ZDo3Ub-BEgIkE9.png" alt="zai logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">59.9</span><div style="width:100%; height:156px; background:#C6CBD4; border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/1670531762351-6200d0a443eb0913fa2df7cc.png" alt="anthropic logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">55.6</span><div style="width:100%; height:145px; background:#E9EBEE; border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/68783facef79a05727260de3/UPX5RQxiPGA-ZbBmArIKq.png" alt="openai logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">48.8</span><div style="width:100%; height:127px; background:#D7DADF; border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; padding-top:8px;"><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/5dd96eb166059660ed1ee413/WtA3YYitedOr9n02eHfJe.png" alt="google logo" style="width:24px; height:24px; border-radius:5px; display:block; margin:0;"></span></div></div></div><span style="display:inline-block; border:1px solid #D1D5DB; border-radius:999px; padding:5px 16px; font-size:13px; font-weight:600; color:#4B5563;">Tool-Decathlon</span></div><div style="display:flex; flex-direction:column; align-items:center; gap:14px;"><div style="display:flex; align-items:flex-end; justify-content:center; gap:7px;"><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px; width:40px; height:264px;"><span style="font-size:13px; font-weight:800; color:#0F172A; line-height:1.1;">54.7</span><span style="font-size:10px; font-style:italic; color:#9CA3AF; line-height:1;">w/ Tools</span><div style="width:100%; display:flex; flex-direction:column;"><div style="width:100%; height:37px; background:#2450C8; border-radius:6px 6px 0 0;"></div><div style="width:100%; height:105px; background:linear-gradient(180deg, #3D8BFF 0%, #1B6BFF 100%); display:flex; flex-direction:column; align-items:center; gap:6px; padding-top:6px;"><span style="font-size:12px; font-weight:700; color:#FFFFFF; line-height:1;">40.5</span><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/62dc173789b4cf157d36ebee/i_pxzM2ZDo3Ub-BEgIkE9.png" alt="zai logo" style="width:22px; height:22px; border-radius:5px; display:block; margin:0;"></span></div></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">52.3</span><span style="font-size:10px; font-style:italic; color:#9CA3AF; line-height:1;">w/ Tools</span><div style="width:100%; display:flex; flex-direction:column;"><div style="width:100%; height:55px; background:#2450C8; border-radius:6px 6px 0 0;"></div><div style="width:100%; height:81px; background:linear-gradient(180deg, #3DC98A 0%, #1FA96B 100%); display:flex; flex-direction:column; align-items:center; gap:6px; padding-top:6px;"><span style="font-size:12px; font-weight:700; color:#FFFFFF; line-height:1;">31.0</span><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/62dc173789b4cf157d36ebee/i_pxzM2ZDo3Ub-BEgIkE9.png" alt="zai logo" style="width:22px; height:22px; border-radius:5px; display:block; margin:0;"></span></div></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">57.9</span><span style="font-size:10px; font-style:italic; color:#9CA3AF; line-height:1;">w/ Tools</span><div style="width:100%; display:flex; flex-direction:column;"><div style="width:100%; height:21px; background:#ABB1BD; border-radius:6px 6px 0 0;"></div><div style="width:100%; height:129px; background:#C6CBD4; display:flex; flex-direction:column; align-items:center; gap:6px; padding-top:6px;"><span style="font-size:12px; font-weight:700; color:#FFFFFF; line-height:1;">49.8</span><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/1670531762351-6200d0a443eb0913fa2df7cc.png" alt="anthropic logo" style="width:22px; height:22px; border-radius:5px; display:block; margin:0;"></span></div></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">52.2</span><span style="font-size:10px; font-style:italic; color:#9CA3AF; line-height:1;">w/ Tools</span><div style="width:100%; display:flex; flex-direction:column;"><div style="width:100%; height:28px; background:#C2C7CF; border-radius:6px 6px 0 0;"></div><div style="width:100%; height:108px; background:#E9EBEE; display:flex; flex-direction:column; align-items:center; gap:6px; padding-top:6px;"><span style="font-size:12px; font-weight:700; color:#FFFFFF; line-height:1;">41.4</span><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/68783facef79a05727260de3/UPX5RQxiPGA-ZbBmArIKq.png" alt="openai logo" style="width:22px; height:22px; border-radius:5px; display:block; margin:0;"></span></div></div></div><div style="display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px; width:40px; height:264px;"><span style="font-size:13px; font-weight:600; color:#4B5563; line-height:1.1;">51.4</span><span style="font-size:10px; font-style:italic; color:#9CA3AF; line-height:1;">w/ Tools</span><div style="width:100%; display:flex; flex-direction:column;"><div style="width:100%; height:17px; background:#B6BBC4; border-radius:6px 6px 0 0;"></div><div style="width:100%; height:117px; background:#D7DADF; display:flex; flex-direction:column; align-items:center; gap:6px; padding-top:6px;"><span style="font-size:12px; font-weight:700; color:#FFFFFF; line-height:1;">45.0</span><span style="display:inline-flex; background:#ffffff; border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(15,23,42,0.18); line-height:0;"><img src="https://cdn-avatars.huggingface.co/v1/production/uploads/5dd96eb166059660ed1ee413/WtA3YYitedOr9n02eHfJe.png" alt="google logo" style="width:22px; height:22px; border-radius:5px; display:block; margin:0;"></span></div></div></div></div><span style="display:inline-block; border:1px solid #D1D5DB; border-radius:999px; padding:5px 16px; font-size:13px; font-weight:600; color:#4B5563;">Humanity's Last Exam</span></div>
</div>
</div>
## How this chart is built
No images, no SVG, no JavaScript. The figure above is plain HTML with inline styles (flexbox columns for the bars, a CSS grid for the 4&times;2 chart layout, and `linear-gradient` fills), which is what the Hugging Face model-card sanitizer allows. The logos are the org avatars served from `cdn-avatars.huggingface.co`.