grok-4.5 @ high · api

apihigh

config: grok-4.5-eff-high--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

grok-4.5 @high · api P-q slot 0 screenshot

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

grok-4.5 @high · grok-cli0.70 gpt-5.6-sol @low · kiro0.69 claude-opus-4-7 @low · kiro0.67 gpt-5.4 @none · api0.67 grok-4.5 @medium · grok-cli0.67

farthest

gpt-5.5 @medium · codex-oauth0.39 gpt-5.6-luna @high · kiro0.42 gpt-5.6-terra @medium · kiro0.44 gpt-5.6-luna @medium · codex-oauth0.44 gpt-5.5 @low · codex-oauth0.44

within 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
min tempmatchshown: 16
hourlyambiguouscoverage · 0 match · 0 mismatch · 24 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 {
  --bg0: #0b1220;
  --bg1: #152238;
  --card: rgba(255,255,255,0.06);
  --stroke: rgba(255,255,255,0.12);
  --text: #f4f7fb;
  --muted: rgba(244,247,251,0.62);
  --accent: #7dd3fc;
  --warm: #fbbf24;
  --cool: #93c5fd;
  --shadow: 0 30px 80px rgba(0,0,0,0.45);
}

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 700px at 15% 10%, #1e3a5f 0%, transparent 55%),
              radial-gradient(900px 600px at 90% 85%, #1a2f4a 0%, transparent 50%),
              linear-gradient(160deg, var(--bg0), var(--bg1));
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

#app {
  width: 1080px;
  height: 640px;
  position: relative;
}

.card {
  width: 100%;
  height: 100%;
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 40px 48px 36px;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  inset: -40% auto auto -20%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(125,211,252,0.18), transparent 68%);
  pointer-events: none;
}

.card::after {
  content: "";
  position: absolute;
  inset: auto -10% -40% auto;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(251,191,36,0.12), transparent 70%);
  pointer-events: none;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  z-index: 1;
}

.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);
  font-weight: 450;
  letter-spacing: 0.02em;
}

.condition-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
}

.condition-badge .icon {
  font-size: 34px;
  line-height: 1;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25));
}

.condition-badge .label {
  font-size: 17px;
  font-weight: 560;
  letter-spacing: 0.01em;
}

.main {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 1;
  padding: 10px 0 8px;
}

.temps {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.temps .hero {
  display: flex;
  align-items: flex-end;
  gap: 18px;
}

.temps .hero .avg {
  font-size: 120px;
  font-weight: 680;
  letter-spacing: -0.05em;
  line-height: 0.9;
  background: linear-gradient(180deg, #fff 20%, rgba(255,255,255,0.72));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.temps .hero .unit {
  font-size: 36px;
  font-weight: 560;
  color: var(--muted);
  margin-bottom: 14px;
}

.range {
  display: flex;
  gap: 28px;
}

.range-item {
  min-width: 120px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.08);
}

.range-item .k {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 560;
}

.range-item .v {
  font-size: 32px;
  font-weight: 640;
  letter-spacing: -0.02em;
}

.range-item.max .v { color: var(--warm); }
.range-item.min .v { color: var(--cool); }

.hourly-panel {
  height: 280px;
  border-radius: 22px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 22px 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hourly-panel h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-weight: 600;
}

.chart-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 100%;
  padding-top: 28px;
}

.bar-col {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.bar-col .val {
  font-size: 11px;
  color: rgba(255,255,255,0.78);
  font-weight: 560;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}

.bar-col:hover .val,
.bar-col.show-label .val {
  opacity: 1;
  transform: translateY(0);
}

.bar {
  width: 100%;
  max-width: 18px;
  border-radius: 999px 999px 6px 6px;
  background: linear-gradient(180deg, var(--accent), rgba(125,211,252,0.25));
  box-shadow: 0 0 18px rgba(125,211,252,0.18);
  transition: height .55s cubic-bezier(.2,.8,.2,1), filter .2s ease;
  min-height: 4px;
}

.bar-col:hover .bar {
  filter: brightness(1.15);
}

.bar-col .hour {
  font-size: 10px;
  color: rgba(255,255,255,0.42);
  font-weight: 520;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-top: 4px;
}

.footer .meta {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.02em;
}

.footer .pill {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  font-weight: 520;
}

/* States */
.state {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
}

.state .spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.12);
  border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.state p {
  font-size: 18px;
  color: var(--muted);
  font-weight: 500;
}

.state.error p {
  color: #fca5a5;
  max-width: 520px;
  text-align: center;
  line-height: 1.5;
}

.state.error .icon {
  font-size: 48px;
  opacity: 0.9;
}

.hidden { display: none !important; }
</style>
</head>
<body>
<div id="app">
  <div id="loading" class="state">
    <div class="spinner"></div>
    <p>Loading weather…</p>
  </div>
  <div id="error" class="state error hidden">
    <div class="icon">☁️</div>
    <p id="error-msg">Weather data could not be loaded.</p>
  </div>
  <div id="card" class="card hidden">
    <header class="header">
      <div class="loc-block">
        <h1 id="name">—</h1>
        <div class="date" id="date-label">—</div>
      </div>
      <div class="condition-badge">
        <span class="icon" id="wx-icon">🌡️</span>
        <span class="label" id="wx-label">—</span>
      </div>
    </header>
    <section class="main">
      <div class="temps">
        <div class="hero">
          <div class="avg" id="avg-temp">—</div>
          <div class="unit">°C</div>
        </div>
        <div class="range">
          <div class="range-item max">
            <div class="k">High</div>
            <div class="v" id="tmax">—°</div>
          </div>
          <div class="range-item min">
            <div class="k">Low</div>
            <div class="v" id="tmin">—°</div>
          </div>
        </div>
      </div>
      <div class="hourly-panel">
        <h2>Hourly temperature</h2>
        <div class="chart-wrap">
          <div class="chart" id="hourly"></div>
        </div>
      </div>
    </section>
    <footer class="footer">
      <div class="meta" id="coords">—</div>
      <div class="pill" id="source-pill">Open-Meteo</div>
    </footer>
  </div>
</div>
<script>
(function () {
  const WEATHER = {
    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 slight hail", icon: "⛈️" },
    99: { label: "Thunderstorm with heavy hail", icon: "⛈️" }
  };

  function pad(n) { return String(n).padStart(2, "0"); }

  function todayUTC() {
    const d = new Date();
    return d.getUTCFullYear() + "-" + pad(d.getUTCMonth() + 1) + "-" + pad(d.getUTCDate());
  }

  function parseParams() {
    const q = new URLSearchParams(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 WEATHER[code] || { label: "Unknown (" + code + ")", icon: "🌡️" };
  }

  function showError(msg) {
    document.getElementById("loading").classList.add("hidden");
    document.getElementById("card").classList.add("hidden");
    const err = document.getElementById("error");
    err.classList.remove("hidden");
    document.getElementById("error-msg").textContent = msg || "Weather data could not be loaded.";
  }

  function buildUrl(base, p) {
    const u = new URL(base, location.origin);
    u.searchParams.set("latitude", p.lat);
    u.searchParams.set("longitude", p.lon);
    u.searchParams.set("daily", "temperature_2m_max,temperature_2m_min,weather_code");
    u.searchParams.set("hourly", "temperature_2m");
    u.searchParams.set("timezone", "UTC");
    u.searchParams.set("temperature_unit", "celsius");
    u.searchParams.set("start_date", p.date);
    u.searchParams.set("end_date", p.date);
    return u.toString();
  }

  function renderHourly(times, temps) {
    const el = document.getElementById("hourly");
    el.innerHTML = "";
    if (!temps || !temps.length) return;

    const valid = temps.filter(function (t) { return t != null && !Number.isNaN(t); });
    const min = Math.min.apply(null, valid);
    const max = Math.max.apply(null, valid);
    const span = Math.max(max - min, 1);

    temps.forEach(function (t, i) {
      if (t == null || Number.isNaN(t)) return;
      const col = document.createElement("div");
      col.className = "bar-col";
      if (i % 3 === 0) col.classList.add("show-label");

      const val = document.createElement("div");
      val.className = "val";
      val.textContent = Math.round(t) + "°";

      const bar = document.createElement("div");
      bar.className = "bar";
      const pct = 12 + ((t - min) / span) * 78;
      bar.style.height = pct + "%";

      const hour = document.createElement("div");
      hour.className = "hour";
      const hh = times[i] ? times[i].slice(11, 13) : pad(i);
      hour.textContent = hh;

      col.appendChild(val);
      col.appendChild(bar);
      col.appendChild(hour);
      el.appendChild(col);
    });
  }

  function render(p, data) {
    const daily = data.daily || {};
    const hourly = data.hourly || {};
    const tmax = daily.temperature_2m_max && daily.temperature_2m_max[0];
    const tmin = daily.temperature_2m_min && daily.temperature_2m_min[0];
    const code = daily.weather_code && daily.weather_code[0];
    const hTemps = hourly.temperature_2m || [];
    const hTimes = hourly.time || [];

    if (tmax == null || tmin == null) {
      showError("Weather data could not be loaded for this date.");
      return;
    }

    const wx = weatherInfo(code);
    const avg = (tmax + tmin) / 2;

    document.getElementById("name").textContent = p.name;
    document.getElementById("date-label").textContent = formatDisplayDate(p.date);
    document.getElementById("wx-icon").textContent = wx.icon;
    document.getElementById("wx-label").textContent = wx.label;
    document.getElementById("avg-temp").textContent = String(Math.round(avg));
    document.getElementById("tmax").textContent = Math.round(tmax) + "°";
    document.getElementById("tmin").textContent = Math.round(tmin) + "°";
    document.getElementById("coords").textContent =
      p.lat.toFixed(3) + "°, " + p.lon.toFixed(3) + "° · UTC";
    document.getElementById("source-pill").textContent =
      isPastDate(p.date) ? "Archive" : "Forecast";

    renderHourly(hTimes, hTemps);

    document.getElementById("loading").classList.add("hidden");
    document.getElementById("error").classList.add("hidden");
    document.getElementById("card").classList.remove("hidden");
  }

  async function main() {
    const p = parseParams();
    const endpoint = isPastDate(p.date) ? "/api/om/archive" : "/api/om/forecast";
    const url = buildUrl(endpoint, p);

    try {
      const res = await fetch(url);
      if (!res.ok) throw new Error("HTTP " + res.status);
      const data = await res.json();
      if (data.error) throw new Error(data.reason || "API error");
      render(p, data);
    } catch (e) {
      showError("Weather data could not be loaded.");
    }
  }

  main();
})();
</script>
</body>
</html>

L1 — cheap deterministic descriptors

bytes total	15,083	html / css / js	1,720 / 6,610 / 6,753
dom nodes	42	dom depth	9
css rules	46	js present	yes
brightness	44.9	contrast	26.2
colorfulness	23.4	whitespace	61.3%

This slot's telemetry

prompt tokens	526	completion tokens	5,115
total tokens	5,641	wall	44.8 s
cost	—	request id	—

config.json553 B

{
  "N": 4,
  "auth": {
    "credential_ref": "WCB_XAI_OFFICIAL_KEY",
    "method": "api-key"
  },
  "billing": "metered",
  "config_id": "grok-4.5-eff-high--api--official--dev",
  "effort": "high",
  "family": "grok",
  "m": {
    "min": 4,
    "q": 4
  },
  "model_id": "grok-4.5",
  "protocol": "api",
  "served_model": "grok-4.5",
  "telemetry": {
    "completion_tokens": 33348,
    "cost_usd": null,
    "prompt_tokens": 4176,
    "total_tokens": 37524,
    "wall_ms": 324364
  },
  "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-eff-high--api--official--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-17T15:08:42.571994+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:08:15.882599+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:09:30.941338+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:08:46.184739+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:10:24.932451+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:09:34.886319+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:10:56.526508+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:10:28.785395+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:11:28.369842+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:11:00.289384+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:12:39.991821+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:11:31.990647+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:13:31.825372+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:12:43.911061+00:00"
        }
      ],
      "block_index": 3,
      "model_reaching_attempt_index": 0,
      "slot_index": 3,
      "terminal_state": "valid",
      "variant": "P-q"
    },
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-17T15:14:06.653993+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:13:35.517892+00:00"
        }
      ],
      "block_index": 3,
      "model_reaching_attempt_index": 0,
      "slot_index": 3,
      "terminal_state": "valid",
      "variant": "P-min"
    }
  ],
  "retry_policy": {
    "max_unreachable_retries": 5,
    "rate_limit_backoff": {
      "max_attempts": 4,
      "max_total_ms": 60000
    }
  }
}