| 1010 | ]; |
| 1011 | |
| 1012 | function initModelCompare(host) { |
| 1013 | if (!host) return; |
| 1014 | host.innerHTML = ""; |
| 1015 | host.classList.add("lc-models"); |
| 1016 | |
| 1017 | host.appendChild(htmlEl("div", { class: "lc-models__head" }, [ |
| 1018 | htmlEl("strong", null, "Same prompt, three models"), |
| 1019 | htmlEl("span", { class: "lc-models__pill" }, "illustrative · responses are sample text"), |
| 1020 | ])); |
| 1021 | host.appendChild(htmlEl("pre", { class: "lc-models__prompt" }, |
| 1022 | htmlEl("code", null, "user > api-gateway is returning 500s in us-east1, p99 latency spiking past 2s. What's going on?"))); |
| 1023 | |
| 1024 | const grid = htmlEl("div", { class: "lc-models__grid" }); |
| 1025 | MODELS.forEach((m) => { |
| 1026 | const card = htmlEl("div", { class: "lc-models__card" }); |
| 1027 | card.style.borderColor = "color-mix(in srgb, " + m.accent + " 28%, var(--md-default-fg-color--lightest))"; |
| 1028 | card.appendChild(htmlEl("p", { class: "lc-models__provider" }, m.provider)); |
| 1029 | const badge = htmlEl("p", { class: "lc-models__badge" }, m.badge); |
| 1030 | badge.style.color = m.accent; |
| 1031 | card.appendChild(badge); |
| 1032 | card.appendChild(htmlEl("p", { class: "lc-models__response" }, m.response)); |
| 1033 | // span (not code) — sidesteps mkdocs-material's .md-typeset code rules |
| 1034 | // which override our padding/font/background by specificity. |
| 1035 | const swap = htmlEl("span", { class: "lc-models__swap", title: m.swap }, m.swap); |
| 1036 | card.appendChild(swap); |
| 1037 | const passRow = htmlEl("div", { class: "lc-models__pass" }, [ |
| 1038 | htmlEl("span", { class: "lc-models__dot" }), |
| 1039 | htmlEl("span", { class: "lc-mono" }, "eval · 0.91 · all rubrics pass"), |
| 1040 | ]); |
| 1041 | card.appendChild(passRow); |
| 1042 | grid.appendChild(card); |
| 1043 | }); |
| 1044 | host.appendChild(grid); |
| 1045 | |
| 1046 | host.appendChild(htmlEl("p", { class: "lc-models__foot lc-mono lc-muted" }, |
| 1047 | "Swap one line in agent.py — eval, deploy, observability all behave the same regardless of provider.")); |
| 1048 | } |
| 1049 | |
| 1050 | // ─────────────────────────────────────────── 8. INLINE PLAYGROUND ─────── |
| 1051 | // A second, click-to-step-through scenario for the Build phase. Uses a |