grok-4.5 · api
api
- config
- grok-4.5--api--official--dev
- batch
- 2026-07-19--unified
- transport
- xai-official-api
- protocol
- api · metered
- served model
- grok-4.5
- captured
- Jul 18, 2026, 11:54 AM · N=4
variant
live
slot 0 · P-q · sandboxed iframe

The screenshot is the exact frozen pixels the similarity channels measured. Run live re-executes the raw output in a sandboxed iframe; its rendering depends on your browser and fonts and is not guaranteed to match the measured pixels.
similarity neighbors
nearest
claude-opus-4-7 @low · kiro0.69grok-4.5 @high · grok-cli0.69grok-4.5 @low · api0.69claude-sonnet-4-6 @max · kiro0.67gpt-5.6-terra @low · kiro0.67farthest
gpt-5.6-luna @high · kiro0.39gpt-5.6-luna @low · codex-oauth0.41gpt-5.6-luna @medium · codex-oauth0.44gpt-5.5 @medium · codex-oauth0.45gpt-5.5 @low · codex-oauth0.45within session 2026-07-19--unified
similarity measures convergence within this session — not quality.
Fidelity — does the card show the right data?
- namematch
- conditionmatch
- datematch
- max tempmatchshown: 25.3
- min tempmatchshown: 16
- hourlymatchcoverage 12/24 · 12 match · 0 mismatch · 12 not shown
- request sidematch0 violation(s)
extractor fidelity-extractor-v1+Berlin-2026-07-15
Source — raw model output, one byte unchanged
download card.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1280, height=800">
<title>Weather</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg-1: #0b1220;
--bg-2: #152238;
--card: rgba(255, 255, 255, 0.07);
--card-border: rgba(255, 255, 255, 0.12);
--text: #f4f7fb;
--muted: rgba(244, 247, 251, 0.62);
--accent: #7dd3fc;
--accent-soft: rgba(125, 211, 252, 0.15);
--warm: #fbbf24;
--cool: #93c5fd;
--danger: #fca5a5;
--shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
--radius: 28px;
}
html, body {
width: 1280px;
height: 800px;
overflow: hidden;
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
color: var(--text);
background:
radial-gradient(1200px 600px at 15% 10%, #1e3a5f 0%, transparent 55%),
radial-gradient(900px 500px at 90% 80%, #1a2f4a 0%, transparent 50%),
linear-gradient(160deg, var(--bg-1), var(--bg-2));
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.shell {
width: 1120px;
height: 680px;
position: relative;
}
.card {
width: 100%;
height: 100%;
border-radius: var(--radius);
background: var(--card);
border: 1px solid var(--card-border);
box-shadow: var(--shadow);
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
overflow: hidden;
display: grid;
grid-template-rows: auto 1fr auto;
position: relative;
}
.card::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(500px 280px at 12% 18%, rgba(125, 211, 252, 0.18), transparent 70%),
radial-gradient(420px 260px at 88% 70%, rgba(251, 191, 36, 0.10), transparent 70%);
pointer-events: none;
}
.top {
position: relative;
z-index: 1;
padding: 40px 48px 12px;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
}
.loc-block h1 {
font-size: 42px;
font-weight: 650;
letter-spacing: -0.03em;
line-height: 1.1;
}
.loc-block .date {
margin-top: 10px;
font-size: 18px;
color: var(--muted);
letter-spacing: 0.02em;
}
.condition-badge {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
border-radius: 999px;
background: var(--accent-soft);
border: 1px solid rgba(125, 211, 252, 0.25);
font-size: 17px;
font-weight: 550;
white-space: nowrap;
}
.condition-badge .icon {
font-size: 28px;
line-height: 1;
}
.main {
position: relative;
z-index: 1;
padding: 8px 48px 20px;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 36px;
align-items: center;
}
.temps {
display: flex;
flex-direction: column;
gap: 22px;
}
.temp-hero {
display: flex;
align-items: baseline;
gap: 8px;
}
.temp-hero .avg {
font-size: 118px;
font-weight: 680;
letter-spacing: -0.05em;
line-height: 0.9;
background: linear-gradient(180deg, #fff 20%, #b8d4ef 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.temp-hero .unit {
font-size: 36px;
color: var(--muted);
font-weight: 500;
}
.range {
display: flex;
gap: 18px;
}
.range-pill {
flex: 1;
padding: 18px 22px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.range-pill .label {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
margin-bottom: 8px;
}
.range-pill .value {
font-size: 34px;
font-weight: 650;
letter-spacing: -0.03em;
}
.range-pill.max .value { color: var(--warm); }
.range-pill.min .value { color: var(--cool); }
.hourly-panel {
height: 100%;
min-height: 280px;
border-radius: 22px;
background: rgba(0, 0, 0, 0.18);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 22px 20px 18px;
display: flex;
flex-direction: column;
}
.hourly-panel h2 {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--muted);
font-weight: 600;
margin-bottom: 16px;
padding-left: 6px;
}
.chart-wrap {
flex: 1;
position: relative;
min-height: 0;
}
canvas#hourlyChart {
width: 100%;
height: 100%;
display: block;
}
.bottom {
position: relative;
z-index: 1;
padding: 8px 48px 36px;
}
.hours-strip {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 8px;
}
.hour-chip {
text-align: center;
padding: 12px 4px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
transition: background 0.2s ease;
}
.hour-chip:hover {
background: rgba(255, 255, 255, 0.08);
}
.hour-chip .h {
font-size: 12px;
color: var(--muted);
margin-bottom: 6px;
font-variant-numeric: tabular-nums;
}
.hour-chip .t {
font-size: 16px;
font-weight: 620;
font-variant-numeric: tabular-nums;
}
.state {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
background: rgba(11, 18, 32, 0.55);
backdrop-filter: blur(8px);
}
.state.hidden { display: none; }
.state-inner {
text-align: center;
padding: 40px 48px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
max-width: 480px;
}
.state-inner .spinner {
width: 42px;
height: 42px;
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, 0.15);
border-top-color: var(--accent);
margin: 0 auto 20px;
animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.state-inner h2 {
font-size: 26px;
font-weight: 620;
margin-bottom: 10px;
}
.state-inner p {
color: var(--muted);
font-size: 16px;
line-height: 1.5;
}
.state.error .state-inner h2 { color: var(--danger); }
.footer-meta {
position: absolute;
bottom: 18px;
right: 28px;
font-size: 11px;
color: rgba(255, 255, 255, 0.28);
letter-spacing: 0.04em;
z-index: 2;
}
</style>
</head>
<body>
<div class="shell">
<div class="card" id="card">
<div class="top">
<div class="loc-block">
<h1 id="locName">—</h1>
<div class="date" id="dateLabel">—</div>
</div>
<div class="condition-badge" id="conditionBadge">
<span class="icon" id="condIcon">·</span>
<span id="condText">—</span>
</div>
</div>
<div class="main">
<div class="temps">
<div class="temp-hero">
<span class="avg" id="avgTemp">—</span>
<span class="unit">°C</span>
</div>
<div class="range">
<div class="range-pill max">
<div class="label">High</div>
<div class="value" id="maxTemp">—°</div>
</div>
<div class="range-pill min">
<div class="label">Low</div>
<div class="value" id="minTemp">—°</div>
</div>
</div>
</div>
<div class="hourly-panel">
<h2>Hourly temperature</h2>
<div class="chart-wrap">
<canvas id="hourlyChart" width="480" height="220"></canvas>
</div>
</div>
</div>
<div class="bottom">
<div class="hours-strip" id="hoursStrip"></div>
</div>
<div class="footer-meta">Open-Meteo · UTC</div>
</div>
<div class="state" id="state">
<div class="state-inner">
<div class="spinner" id="spinner"></div>
<h2 id="stateTitle">Loading weather</h2>
<p id="stateMsg">Fetching forecast data…</p>
</div>
</div>
</div>
<script>
(function () {
const WMO = {
0: { label: "Clear sky", icon: "☀️" },
1: { label: "Mainly clear", icon: "🌤️" },
2: { label: "Partly cloudy", icon: "⛅" },
3: { label: "Overcast", icon: "☁️" },
45: { label: "Fog", icon: "🌫️" },
48: { label: "Depositing rime fog", icon: "🌫️" },
51: { label: "Light drizzle", icon: "🌦️" },
53: { label: "Moderate drizzle", icon: "🌦️" },
55: { label: "Dense drizzle", icon: "🌧️" },
56: { label: "Light freezing drizzle", icon: "🌧️" },
57: { label: "Dense freezing drizzle", icon: "🌧️" },
61: { label: "Slight rain", icon: "🌧️" },
63: { label: "Moderate rain", icon: "🌧️" },
65: { label: "Heavy rain", icon: "🌧️" },
66: { label: "Light freezing rain", icon: "🌧️" },
67: { label: "Heavy freezing rain", icon: "🌧️" },
71: { label: "Slight snow", icon: "🌨️" },
73: { label: "Moderate snow", icon: "❄️" },
75: { label: "Heavy snow", icon: "❄️" },
77: { label: "Snow grains", icon: "🌨️" },
80: { label: "Slight rain showers", icon: "🌦️" },
81: { label: "Moderate rain showers", icon: "🌧️" },
82: { label: "Violent rain showers", icon: "🌧️" },
85: { label: "Slight snow showers", icon: "🌨️" },
86: { label: "Heavy snow showers", icon: "❄️" },
95: { label: "Thunderstorm", icon: "⛈️" },
96: { label: "Thunderstorm with hail", icon: "⛈️" },
99: { label: "Thunderstorm with heavy hail", icon: "⛈️" }
};
function todayUTC() {
const d = new Date();
const y = d.getUTCFullYear();
const m = String(d.getUTCMonth() + 1).padStart(2, "0");
const day = String(d.getUTCDate()).padStart(2, "0");
return y + "-" + m + "-" + day;
}
function parseParams() {
const q = new URLSearchParams(window.location.search);
const lat = parseFloat(q.get("lat"));
const lon = parseFloat(q.get("lon"));
return {
lat: Number.isFinite(lat) ? lat : 52.52,
lon: Number.isFinite(lon) ? lon : 13.405,
name: q.get("name") || "Berlin",
date: q.get("date") || todayUTC()
};
}
function isPastDate(dateStr) {
return dateStr < todayUTC();
}
function formatDisplayDate(dateStr) {
const [y, m, d] = dateStr.split("-").map(Number);
const dt = new Date(Date.UTC(y, m - 1, d));
return dt.toLocaleDateString("en-US", {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
timeZone: "UTC"
});
}
function weatherInfo(code) {
return WMO[code] || { label: "Unknown (" + code + ")", icon: "🌡️" };
}
function showError(title, msg) {
const state = document.getElementById("state");
state.classList.add("error");
state.classList.remove("hidden");
document.getElementById("spinner").style.display = "none";
document.getElementById("stateTitle").textContent = title;
document.getElementById("stateMsg").textContent = msg;
}
function hideState() {
document.getElementById("state").classList.add("hidden");
}
function round1(n) {
return Math.round(n * 10) / 10;
}
function drawChart(temps) {
const canvas = document.getElementById("hourlyChart");
const ctx = canvas.getContext("2d");
const dpr = window.devicePixelRatio || 1;
const cssW = canvas.clientWidth || 480;
const cssH = canvas.clientHeight || 220;
canvas.width = Math.round(cssW * dpr);
canvas.height = Math.round(cssH * dpr);
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
const W = cssW;
const H = cssH;
const padL = 36;
const padR = 12;
const padT = 18;
const padB = 28;
const plotW = W - padL - padR;
const plotH = H - padT - padB;
ctx.clearRect(0, 0, W, H);
if (!temps || !temps.length) return;
const minT = Math.min.apply(null, temps);
const maxT = Math.max.apply(null, temps);
const span = Math.max(maxT - minT, 1);
const yMin = minT - span * 0.18;
const yMax = maxT + span * 0.18;
const ySpan = yMax - yMin;
function xAt(i) {
return padL + (temps.length === 1 ? plotW / 2 : (i / (temps.length - 1)) * plotW);
}
function yAt(t) {
return padT + (1 - (t - yMin) / ySpan) * plotH;
}
// grid
ctx.strokeStyle = "rgba(255,255,255,0.06)";
ctx.lineWidth = 1;
for (let g = 0; g < 4; g++) {
const gy = padT + (plotH * g) / 3;
ctx.beginPath();
ctx.moveTo(padL, gy);
ctx.lineTo(padL + plotW, gy);
ctx.stroke();
}
// area path
const pts = temps.map(function (t, i) { return { x: xAt(i), y: yAt(t) }; });
const grad = ctx.createLinearGradient(0, padT, 0, padT + plotH);
grad.addColorStop(0, "rgba(125, 211, 252, 0.35)");
grad.addColorStop(1, "rgba(125, 211, 252, 0.02)");
ctx.beginPath();
ctx.moveTo(pts[0].x, padT + plotH);
pts.forEach(function (p) { ctx.lineTo(p.x, p.y); });
ctx.lineTo(pts[pts.length - 1].x, padT + plotH);
ctx.closePath();
ctx.fillStyle = grad;
ctx.fill();
// line
ctx.beginPath();
pts.forEach(function (p, i) {
if (i === 0) ctx.moveTo(p.x, p.y);
else ctx.lineTo(p.x, p.y);
});
ctx.strokeStyle = "rgba(125, 211, 252, 0.95)";
ctx.lineWidth = 2.5;
ctx.lineJoin = "round";
ctx.lineCap = "round";
ctx.stroke();
// dots at every 3h
for (let i = 0; i < pts.length; i += 3) {
ctx.beginPath();
ctx.arc(pts[i].x, pts[i].y, 3.5, 0, Math.PI * 2);
ctx.fillStyle = "#e0f2fe";
ctx.fill();
ctx.strokeStyle = "rgba(11,18,32,0.5)";
ctx.lineWidth = 1.5;
ctx.stroke();
}
// y labels
ctx.fillStyle = "rgba(244,247,251,0.45)";
ctx.font = "11px system-ui, sans-serif";
ctx.textAlign = "right";
ctx.textBaseline = "middle";
[yMax, (yMin + yMax) / 2, yMin].forEach(function (t) {
ctx.fillText(Math.round(t) + "°", padL - 8, yAt(t));
});
// x labels every 3 hours
ctx.textAlign = "center";
ctx.textBaseline = "top";
for (let i = 0; i < temps.length; i += 3) {
const h = String(i).padStart(2, "0") + ":00";
ctx.fillText(h, xAt(i), padT + plotH + 8);
}
}
function renderHoursStrip(temps) {
const strip = document.getElementById("hoursStrip");
strip.innerHTML = "";
// show every 2 hours for 12 chips
for (let i = 0; i < 24; i += 2) {
const chip = document.createElement("div");
chip.className = "hour-chip";
const t = temps[i];
chip.innerHTML =
'<div class="h">' + String(i).padStart(2, "0") + ":00</div>" +
'<div class="t">' + (t != null ? round1(t) + "°" : "—") + "</div>";
strip.appendChild(chip);
}
}
function render(data, params) {
const daily = data.daily || {};
const hourly = data.hourly || {};
const maxT = daily.temperature_2m_max && daily.temperature_2m_max[0];
const minT = daily.temperature_2m_min && daily.temperature_2m_min[0];
const code = daily.weather_code && daily.weather_code[0];
const temps = hourly.temperature_2m || [];
if (maxT == null || minT == null || !temps.length) {
showError("Data unavailable", "The weather service returned incomplete data for this date.");
return;
}
const info = weatherInfo(code);
const avg = round1((maxT + minT) / 2);
document.getElementById("locName").textContent = params.name;
document.getElementById("dateLabel").textContent = formatDisplayDate(params.date);
document.getElementById("condIcon").textContent = info.icon;
document.getElementById("condText").textContent = info.label;
document.getElementById("avgTemp").textContent = String(avg);
document.getElementById("maxTemp").textContent = round1(maxT) + "°";
document.getElementById("minTemp").textContent = round1(minT) + "°";
renderHoursStrip(temps);
// delay chart until layout settles
requestAnimationFrame(function () {
drawChart(temps);
hideState();
});
}
async function load() {
const params = parseParams();
const useArchive = isPastDate(params.date);
const base = useArchive ? "/api/om/archive" : "/api/om/forecast";
const qs = new URLSearchParams({
latitude: String(params.lat),
longitude: String(params.lon),
daily: "temperature_2m_max,temperature_2m_min,weather_code",
hourly: "temperature_2m",
timezone: "UTC",
temperature_unit: "celsius",
start_date: params.date,
end_date: params.date
});
try {
const res = await fetch(base + "?" + qs.toString());
if (!res.ok) {
throw new Error("HTTP " + res.status);
}
const data = await res.json();
if (data.error) {
throw new Error(data.reason || data.error || "API error");
}
render(data, params);
} catch (err) {
showError(
"Could not load weather data",
"Unable to fetch weather for " + params.name + " on " + params.date + ". " +
(err && err.message ? err.message : "Please try again later.")
);
}
}
load();
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 17,150 | html / css / js | 1,733 / 6,293 / 9,124 |
|---|---|---|---|
| dom nodes | 41 | dom depth | 9 |
| css rules | 43 | js present | yes |
| brightness | 47.6 | contrast | 24.4 |
| colorfulness | 19.0 | whitespace | 53.4% |
This slot's telemetry
| prompt tokens | 526 | completion tokens | 5,836 |
|---|---|---|---|
| total tokens | 6,362 | wall | 46.2 s |
| cost | — | request id | — |
config.json542 B
{
"N": 4,
"auth": {
"credential_ref": "WCB_XAI_OFFICIAL_KEY",
"method": "api-key"
},
"billing": "metered",
"config_id": "grok-4.5--api--official--dev",
"effort": null,
"family": "grok",
"m": {
"min": 4,
"q": 4
},
"model_id": "grok-4.5",
"protocol": "api",
"served_model": "grok-4.5",
"telemetry": {
"completion_tokens": 32149,
"cost_usd": null,
"prompt_tokens": 4176,
"total_tokens": 36325,
"wall_ms": 292905
},
"transport": "xai-official-api",
"vendor_sanction_ref": null
}send-log4.6 KB
{
"N": 4,
"batch_id": "2026-07-18--official-grok",
"config_id": "grok-4.5--api--official--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-07-17T15:03:39.676271+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T15:02:53.500414+00:00"
}
],
"block_index": 0,
"model_reaching_attempt_index": 0,
"slot_index": 0,
"terminal_state": "valid",
"variant": "P-q"
},
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-07-17T15:04:07.412758+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T15:03:43.452600+00:00"
}
],
"block_index": 0,
"model_reaching_attempt_index": 0,
"slot_index": 0,
"terminal_state": "valid",
"variant": "P-min"
},
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-07-17T15:04:43.797151+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T15:04:11.113163+00:00"
}
],
"block_index": 1,
"model_reaching_attempt_index": 0,
"slot_index": 1,
"terminal_state": "valid",
"variant": "P-min"
},
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-07-17T15:05:29.818224+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T15:04:47.484279+00:00"
}
],
"block_index": 1,
"model_reaching_attempt_index": 0,
"slot_index": 1,
"terminal_state": "valid",
"variant": "P-q"
},
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-07-17T15:06:27.256735+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T15:05:33.752869+00:00"
}
],
"block_index": 2,
"model_reaching_attempt_index": 0,
"slot_index": 2,
"terminal_state": "valid",
"variant": "P-q"
},
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-07-17T15:06:56.290843+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T15:06:30.455376+00:00"
}
],
"block_index": 2,
"model_reaching_attempt_index": 0,
"slot_index": 2,
"terminal_state": "valid",
"variant": "P-min"
},
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-07-17T15:07:23.080113+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T15:06:59.935257+00:00"
}
],
"block_index": 3,
"model_reaching_attempt_index": 0,
"slot_index": 3,
"terminal_state": "valid",
"variant": "P-min"
},
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-07-17T15:08:12.087180+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T15:07:26.820556+00:00"
}
],
"block_index": 3,
"model_reaching_attempt_index": 0,
"slot_index": 3,
"terminal_state": "valid",
"variant": "P-q"
}
],
"retry_policy": {
"max_unreachable_retries": 5,
"rate_limit_backoff": {
"max_attempts": 4,
"max_total_ms": 60000
}
}
}