| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"> |
| <meta name="color-scheme" content="dark light"> |
| <title>RESMP.DEV Benchmark Instrument</title> |
| <link rel="stylesheet" href="style.css"><link rel="stylesheet" href="benchmark.css"><link rel="stylesheet" href="benchmark-component.css"> |
| <script type="module" src="benchmark-chart.js"></script> |
| </head> |
| <body class="benchmark-page"> |
| <header class="bench-nav"> |
| <a class="brand bench-brand" href="index.html"><img src="brand-composition-engine.png" alt=""><strong>RESMP.DEV</strong></a> |
| <span>BENCHMARK INSTRUMENT / REV 01</span><div class="bench-links"><a href="BENCHMARK_SYSTEM_CARD.md">SYSTEM CARD</a><a href="index.html">← ORG CARD</a></div> |
| </header> |
| <main class="bench-shell"> |
| <div class="bench-intro"> |
| <div><p class="eyebrow"><span></span> DATA-DRIVEN SMALL MULTIPLES</p><h1>Evaluation<br><em>instrument.</em></h1></div> |
| <div class="bench-note"><b>WHAT THIS IS</b><p>A zero-dependency chart component for publishing grouped model evaluations as consistent small multiples. Give it validated JSON; it preserves series identity, a shared scale, direct labels, print layout, and an exportable browser SVG.</p></div> |
| </div> |
| <resmp-benchmark-chart id="demo-chart"> |
| <script type="application/json"> |
| {"title":"MODEL SYSTEM EVALUATIONS","subtitle":"REFERENCE LAYOUT / DEMONSTRATION DATA","higherIsBetter":true, |
| "series":[{"id":"candidate","label":"CANDIDATE / MXFP4","color":"#6f36d9"},{"id":"control","label":"BF16 CONTROL","color":"#171719"},{"id":"native","label":"NATIVE RTN","color":"#707078"},{"id":"baseline","label":"BASELINE A","color":"#aaa7af"},{"id":"reference","label":"REFERENCE B","color":"#d5d2d8"}], |
| "groups":[ |
| {"name":"STEM","panels":[{"name":"MATH EXACT","values":{"candidate":62.4,"control":58.9,"native":60.1,"baseline":54.2,"reference":57.8}},{"name":"CODE PASS@1","values":{"candidate":71.8,"control":67.3,"native":69.4,"baseline":61.5,"reference":64.9}},{"name":"SCIENCE QA","values":{"candidate":76.2,"control":73.7,"native":74.1,"baseline":69.8,"reference":72.5}}]}, |
| {"name":"INSTRUCTION FOLLOWING","panels":[{"name":"FORMAT","values":{"candidate":84.6,"control":79.2,"native":81.4,"baseline":72.1,"reference":77.3}},{"name":"MULTI-TURN","values":{"candidate":68.5,"control":63.2,"native":65.9,"baseline":58.4,"reference":61.7}},{"name":"CONSTRAINTS","values":{"candidate":73.9,"control":70.6,"native":71.8,"baseline":66.2,"reference":68.5}}]}, |
| {"name":"TOOL USE","panels":[{"name":"FUNCTION CALL","values":{"candidate":79.1,"control":70.8,"native":75.4,"baseline":64.2,"reference":69.1}},{"name":"SANDBOX","values":{"candidate":66.7,"control":61.1,"native":63.5,"baseline":56.9,"reference":60.2}},{"name":"RETRIEVAL","values":{"candidate":81.3,"control":76.5,"native":78.2,"baseline":71.8,"reference":75.6}}]}, |
| {"name":"AGENTIC","panels":[{"name":"TASK COMPLETE","values":{"candidate":57.8,"control":49.6,"native":53.1,"baseline":45.4,"reference":50.2}},{"name":"PATCH ACCEPT","values":{"candidate":64.2,"control":55.8,"native":59.6,"baseline":51.7,"reference":56.1}},{"name":"BROWSER","values":{"candidate":47.9,"control":39.4,"native":43.3,"baseline":35.8,"reference":41.5}}]} |
| ]} |
| </script> |
| </resmp-benchmark-chart> |
|
|
| <section class="explain-grid"> |
| <article><span>01 / PURPOSE</span><h2>Comparisons that stay comparable.</h2><p>One series order and one scale are applied across every benchmark panel. Readers can scan model behavior across STEM, instruction following, tool use, agentic tasks, or any custom family without relearning the encoding.</p></article> |
| <article><span>02 / INPUT</span><h2>Plain JSON, no chart library.</h2><p>Define series once, then group named panels containing numeric values keyed by series ID. Embed the JSON in HTML or assign it through the Web Component’s <code>config</code> property.</p></article> |
| <article><span>03 / OUTPUT</span><h2>Web, print, and SVG.</h2><p>The responsive web view collapses cleanly on mobile. Print mode removes the surrounding UI. SVG export preserves the complete browser-rendered composition; see the system card for portability limits.</p></article> |
| </section> |
|
|
| <section class="receipt-strip"> |
| <div><b>NO FRAMEWORK</b><span>Native Web Component</span></div> |
| <div><b>NO RUNTIME DATA FETCH</b><span>Deterministic embedded input</span></div> |
| <div><b>EXPLICIT MISSING DATA</b><span>Rendered as N/A, never zero</span></div> |
| <div><b>SHARED SCALE</b><span>Across the full evaluation matrix</span></div> |
| </section> |
| <section class="contract"> |
| <span>INPUT CONTRACT</span> |
| <pre><code>{ title, subtitle, higherIsBetter, |
| series: [{ id, label, color }], |
| groups: [{ name, panels: [{ |
| name, values: { [seriesId]: number } |
| }] }] }</code></pre> |
| <p>Plain Web Component. No framework, external font, chart library, or build step. Drop <code>benchmark-chart.js</code> and <code>benchmark-component.css</code> beside any static report.</p> |
| </section> |
|
|
| <section class="resources"> |
| <div><span>DOCUMENTATION</span><h2>Use the instrument.</h2></div> |
| <div class="resource-links"> |
| <a href="BENCHMARK_SYSTEM_CARD.md"><b>MODEL / SYSTEM CARD</b><small>Purpose, interpretation, limitations, accessibility, and versioning.</small></a> |
| <a href="benchmark.schema.json"><b>JSON SCHEMA</b><small>Validate chart inputs before publication.</small></a> |
| <a href="benchmark.example.json"><b>CANONICAL EXAMPLE</b><small>The demonstration matrix as reusable data.</small></a> |
| <a href="benchmark-chart.js"><b>WEB COMPONENT</b><small>Zero-dependency renderer and exporter.</small></a> |
| </div> |
| </section> |
| </main> |
| </body> |
| </html> |
|
|
