grok-4.6 @ medium · api

apimedium
config
grok-4.6-eff-medium--api--official--dev
batch
2026-07-19--unified
transport
xai-official-api
protocol
api · metered
served model
grok-4.6
captured
Jul 18, 2026, 11:54 AM · N=4
variant
live
slot 0 · P-q · sandboxed iframe
grok-4.6 @medium · 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

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 tempmismatchshown: 13.405
  • min tempmismatchshown: 52.52
  • 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">
<title>Weather</title>
<style>
  :root {
    --bg0: #0b1020;
    --bg1: #141c33;
    --ink: #f3eee4;
    --muted: rgba(243,238,228,.62);
    --faint: rgba(243,238,228,.38);
    --line: rgba(243,238,228,.12);
    --glass: rgba(18,24,42,.55);
    --high: #f0c27a;
    --low: #8ec5ff;
    --accent: #d8b07a;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    width: 1280px;
    height: 800px;
    overflow: hidden;
    background: var(--bg0);
    color: var(--ink);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  body {
    position: relative;
  }
  .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    z-index: 0;
    transition: background .8s ease, opacity .8s ease;
  }
  .orb-a { width: 620px; height: 620px; top: -180px; left: -80px; opacity: .55; }
  .orb-b { width: 540px; height: 540px; bottom: -200px; right: -60px; opacity: .45; }
  .orb-c { width: 280px; height: 280px; top: 240px; left: 520px; opacity: .28; }
  body.theme-clear .orb-a { background: #e8a54b; }
  body.theme-clear .orb-b { background: #3a6ea8; }
  body.theme-clear .orb-c { background: #f0d08a; }
  body.theme-partly .orb-a { background: #c9924a; }
  body.theme-partly .orb-b { background: #4d6488; }
  body.theme-partly .orb-c { background: #8aa4c4; }
  body.theme-cloudy .orb-a { background: #5c6b82; }
  body.theme-cloudy .orb-b { background: #2c384c; }
  body.theme-cloudy .orb-c { background: #7a8798; }
  body.theme-rain .orb-a { background: #2a6a78; }
  body.theme-rain .orb-b { background: #1a3358; }
  body.theme-rain .orb-c { background: #3d8ea0; }
  body.theme-snow .orb-a { background: #8eb4d4; }
  body.theme-snow .orb-b { background: #3d5678; }
  body.theme-snow .orb-c { background: #d0e4f4; }
  body.theme-storm .orb-a { background: #6b3aa0; }
  body.theme-storm .orb-b { background: #1c2250; }
  body.theme-storm .orb-c { background: #c47a3a; }
  body.theme-fog .orb-a { background: #8a7d6a; }
  body.theme-fog .orb-b { background: #3d4250; }
  body.theme-fog .orb-c { background: #b8aea0; }
  body.theme-default .orb-a { background: #3d4f78; }
  body.theme-default .orb-b { background: #8a6230; }
  body.theme-default .orb-c { background: #2a3860; }
  .grain {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .07;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .stage {
    position: relative;
    z-index: 2;
    width: 1280px;
    height: 800px;
    padding: 36px 40px;
  }
  .card {
    width: 1200px;
    height: 728px;
    border-radius: 28px;
    background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 30px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.14);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    padding: 40px 48px 32px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
  }
  .card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(800px 280px at 80% -10%, rgba(255,255,255,.08), transparent 60%);
    pointer-events: none;
  }
  .top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    z-index: 1;
  }
  .place {
    font-size: 54px;
    font-weight: 620;
    letter-spacing: -1.4px;
    line-height: 1;
  }
  .date {
    margin-top: 12px;
    font-size: 18px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
  }
  .coords {
    text-align: right;
    color: var(--faint);
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.7;
    padding-top: 8px;
  }
  .hero {
    display: grid;
    grid-template-columns: 280px 1fr 340px;
    gap: 24px;
    align-items: center;
    margin-top: 28px;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
  }
  .icon-wrap {
    width: 240px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .icon-wrap svg { width: 188px; height: 188px; filter: drop-shadow(0 18px 24px rgba(0,0,0,.28)); }
  .condition {
    padding-left: 8px;
  }
  .condition h2 {
    font-size: 36px;
    font-weight: 560;
    letter-spacing: -.6px;
    line-height: 1.15;
  }
  .condition p {
    margin-top: 10px;
    color: var(--muted);
    font-size: 16px;
    max-width: 420px;
    line-height: 1.5;
  }
  .temps {
    display: flex;
    justify-content: flex-end;
    gap: 28px;
  }
  .temp-block {
    min-width: 140px;
    padding: 18px 20px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
  }
  .temp-block .lbl {
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
  }
  .temp-block .val {
    margin-top: 6px;
    font-size: 64px;
    font-weight: 620;
    letter-spacing: -2px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .temp-block.high .val { color: var(--high); }
  .temp-block.low .val { color: var(--low); }
  .temp-block .unit {
    font-size: 26px;
    font-weight: 500;
    letter-spacing: 0;
    vertical-align: super;
    margin-left: 2px;
  }
  .chart-panel {
    margin-top: 28px;
    flex: 1;
    border-radius: 20px;
    background: rgba(6,10,20,.28);
    border: 1px solid var(--line);
    padding: 18px 22px 10px;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    min-height: 0;
  }
  .chart-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
  }
  .chart-head h3 {
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 650;
  }
  .chart-head span {
    font-size: 13px;
    color: var(--faint);
  }
  .chart-svg {
    width: 100%;
    height: 196px;
    display: block;
  }
  .hours {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 4px;
    margin-top: 8px;
    height: 118px;
  }
  .hour {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    cursor: default;
    border-radius: 8px;
    padding: 4px 0 2px;
    transition: background .2s ease;
  }
  .hour:hover { background: rgba(255,255,255,.06); }
  .hour .bar-track {
    width: 10px;
    height: 68px;
    border-radius: 99px;
    background: rgba(255,255,255,.06);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
  }
  .hour .bar {
    width: 100%;
    border-radius: 99px;
    background: linear-gradient(180deg, #f2d09a, #7aa7d8);
    transform-origin: bottom;
    animation: grow .8s ease both;
  }
  .hour .ht {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    opacity: .88;
  }
  .hour .hl {
    font-size: 10px;
    color: var(--faint);
    letter-spacing: .04em;
  }
  .state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 1;
  }
  .state h2 { font-size: 32px; font-weight: 560; letter-spacing: -.4px; }
  .state p { margin-top: 12px; color: var(--muted); font-size: 16px; max-width: 460px; line-height: 1.55; }
  .spinner {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.12);
    border-top-color: var(--accent);
    animation: spin .9s linear infinite;
    margin-bottom: 22px;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes fadeup {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .ready .place, .ready .date, .ready .hero, .ready .chart-panel {
    animation: fadeup .7s ease both;
  }
  .ready .date { animation-delay: .06s; }
  .ready .hero { animation-delay: .12s; }
  .ready .chart-panel { animation-delay: .2s; }
  .hidden { display: none !important; }
</style>
</head>
<body class="theme-default">
  <div class="orb orb-a"></div>
  <div class="orb orb-b"></div>
  <div class="orb orb-c"></div>
  <div class="grain"></div>
  <div class="stage">
    <div class="card" id="card">
      <div class="state" id="loading">
        <div class="spinner"></div>
        <h2>Fetching the sky</h2>
        <p>Loading temperatures and conditions for this place and date.</p>
      </div>
      <div class="state hidden" id="error">
        <h2>Weather unavailable</h2>
        <p id="error-msg">The data could not be loaded for this location and date.</p>
      </div>
      <div id="content" class="hidden" style="display:none;flex-direction:column;height:100%;">
        <div class="top">
          <div>
            <div class="place" id="place"></div>
            <div class="date" id="date-label"></div>
          </div>
          <div class="coords" id="coords"></div>
        </div>
        <div class="hero">
          <div class="icon-wrap" id="icon"></div>
          <div class="condition">
            <h2 id="condition"></h2>
            <p id="blurb"></p>
          </div>
          <div class="temps">
            <div class="temp-block high">
              <div class="lbl">High</div>
              <div class="val" id="tmax"></div>
            </div>
            <div class="temp-block low">
              <div class="lbl">Low</div>
              <div class="val" id="tmin"></div>
            </div>
          </div>
        </div>
        <div class="chart-panel">
          <div class="chart-head">
            <h3>Hourly temperature · UTC</h3>
            <span id="range-note"></span>
          </div>
          <svg class="chart-svg" id="chart" viewBox="0 0 1108 196" preserveAspectRatio="none"></svg>
          <div class="hours" id="hours"></div>
        </div>
      </div>
    </div>
  </div>
<script>
(function () {
  const WMO = {
    0:  { label: "Clear sky", theme: "clear", kind: "sun", blurb: "A luminous, unobstructed day with open skies from dawn to dusk." },
    1:  { label: "Mainly clear", theme: "clear", kind: "sun", blurb: "Mostly fair conditions, with only the lightest veil of cloud." },
    2:  { label: "Partly cloudy", theme: "partly", kind: "partly", blurb: "Sun and cloud share the sky in shifting, painterly layers." },
    3:  { label: "Overcast", theme: "cloudy", kind: "cloud", blurb: "A continuous cloud deck softens the light across the day." },
    45: { label: "Fog", theme: "fog", kind: "fog", blurb: "Low visibility as a quiet fog settles over the landscape." },
    48: { label: "Rime fog", theme: "fog", kind: "fog", blurb: "Freezing fog may leave a delicate rime on exposed surfaces." },
    51: { label: "Light drizzle", theme: "rain", kind: "drizzle", blurb: "A fine, persistent drizzle — more mist than rain." },
    53: { label: "Drizzle", theme: "rain", kind: "drizzle", blurb: "Steady drizzle, enough to darken stone and quiet the streets." },
    55: { label: "Dense drizzle", theme: "rain", kind: "drizzle", blurb: "Heavy drizzle with sodden air and reduced contrast." },
    56: { label: "Light freezing drizzle", theme: "rain", kind: "drizzle", blurb: "A thin, icy drizzle that can glaze roads and railings." },
    57: { label: "Freezing drizzle", theme: "rain", kind: "drizzle", blurb: "Freezing drizzle — surfaces may turn slick and glassy." },
    61: { label: "Slight rain", theme: "rain", kind: "rain", blurb: "Light rain passing through, leaving the air washed and cool." },
    63: { label: "Moderate rain", theme: "rain", kind: "rain", blurb: "A proper rainfall, steady and thorough." },
    65: { label: "Heavy rain", theme: "rain", kind: "rain", blurb: "Strong rain with low cloud and a saturated atmosphere." },
    66: { label: "Light freezing rain", theme: "rain", kind: "rain", blurb: "Rain that freezes on contact — treat walkways with care." },
    67: { label: "Freezing rain", theme: "rain", kind: "rain", blurb: "Icy rain capable of coating the city in a brittle sheen." },
    71: { label: "Slight snow", theme: "snow", kind: "snow", blurb: "Light snow, enough to dust rooftops and mute the city." },
    73: { label: "Moderate snow", theme: "snow", kind: "snow", blurb: "Snow falling in earnest, softening edges and sound." },
    75: { label: "Heavy snow", theme: "snow", kind: "snow", blurb: "A heavy snowfall, dense and quietly dramatic." },
    77: { label: "Snow grains", theme: "snow", kind: "snow", blurb: "Fine snow grains drifting rather than flakes." },
    80: { label: "Slight rain showers", theme: "rain", kind: "rain", blurb: "Brief showers moving through in restless pulses." },
    81: { label: "Rain showers", theme: "rain", kind: "rain", blurb: "Showers come and go, brightening and darkening the hour." },
    82: { label: "Violent rain showers", theme: "storm", kind: "rain", blurb: "Intense showers — sudden, loud, and short-lived." },
    85: { label: "Slight snow showers", theme: "snow", kind: "snow", blurb: "Passing snow showers with brighter breaks between." },
    86: { label: "Heavy snow showers", theme: "snow", kind: "snow", blurb: "Heavy bursts of snow, squally and abrupt." },
    95: { label: "Thunderstorm", theme: "storm", kind: "storm", blurb: "Thunder and lightning — the day carries an electric charge." },
    96: { label: "Thunderstorm with hail", theme: "storm", kind: "storm", blurb: "A storm with hail; seek cover when the sky turns hard." },
    99: { label: "Heavy hail thunderstorm", theme: "storm", kind: "storm", blurb: "Severe thunder with heavy hail — a fierce, brief siege." }
  };

  function escapeHtml(s) {
    return String(s).replace(/[&<>"']/g, function (c) {
      return ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c];
    });
  }

  function todayUTC() {
    return new Date().toISOString().slice(0, 10);
  }

  function validDate(s) {
    return typeof s === "string" && /^\d{4}-\d{2}-\d{2}$/.test(s);
  }

  function formatDate(iso) {
    var p = iso.split("-").map(Number);
    var dt = new Date(Date.UTC(p[0], p[1] - 1, p[2]));
    return dt.toLocaleDateString("en-GB", {
      weekday: "long",
      day: "numeric",
      month: "long",
      year: "numeric",
      timeZone: "UTC"
    });
  }

  function fmtTemp(t) {
    if (t === null || t === undefined || Number.isNaN(Number(t))) return "—";
    var r = Math.round(Number(t) * 10) / 10;
    return Number.isInteger(r) ? String(r) : r.toFixed(1);
  }

  function iconSvg(kind) {
    var common = 'xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" fill="none"';
    if (kind === "sun") {
      return '<svg ' + common + '><circle cx="60" cy="60" r="22" fill="#F2C14E"/><g stroke="#F2C14E" stroke-width="5" stroke-linecap="round"><path d="M60 14v10M60 96v10M14 60h10M96 60h10M27 27l7 7M86 86l7 7M27 93l7-7M86 34l7-7"/></g></svg>';
    }
    if (kind === "partly") {
      return '<svg ' + common + '><circle cx="46" cy="44" r="16" fill="#F2C14E"/><g stroke="#F2C14E" stroke-width="4" stroke-linecap="round"><path d="M46 16v7M16 44h7M25 25l5 5M67 25l-5 5M25 63l5-5"/></g><path d="M44 72h38a16 16 0 0 0 1-32 22 22 0 0 0-42 8 14 14 0 0 0 3 24z" fill="#E8EEF6" stroke="#C9D4E3" stroke-width="2"/></svg>';
    }
    if (kind === "cloud") {
      return '<svg ' + common + '><path d="M34 80h50a20 20 0 0 0 2-40 28 28 0 0 0-54 10A18 18 0 0 0 34 80z" fill="#D5DEE9" stroke="#B7C3D3" stroke-width="2"/></svg>';
    }
    if (kind === "rain") {
      return '<svg ' + common + '><path d="M34 62h50a20 20 0 0 0 2-40 28 28 0 0 0-54 10A18 18 0 0 0 34 62z" fill="#D5DEE9" stroke="#B7C3D3" stroke-width="2"/><g stroke="#7EB6E0" stroke-width="4" stroke-linecap="round"><path d="M44 74v16M60 76v18M76 74v16"/></g></svg>';
    }
    if (kind === "drizzle") {
      return '<svg ' + common + '><path d="M34 62h50a20 20 0 0 0 2-40 28 28 0 0 0-54 10A18 18 0 0 0 34 62z" fill="#D5DEE9" stroke="#B7C3D3" stroke-width="2"/><g stroke="#9CC7DE" stroke-width="3" stroke-linecap="round"><path d="M42 74v8M52 78v8M62 74v8M72 78v8M82 74v8"/></g></svg>';
    }
    if (kind === "snow") {
      return '<svg ' + common + '><path d="M34 58h50a20 20 0 0 0 2-40 28 28 0 0 0-54 10A18 18 0 0 0 34 58z" fill="#E8EEF6" stroke="#C9D4E3" stroke-width="2"/><g fill="#E8F2FA"><circle cx="44" cy="76" r="3.2"/><circle cx="60" cy="86" r="3.2"/><circle cx="76" cy="76" r="3.2"/><circle cx="52" cy="96" r="2.4"/><circle cx="68" cy="96" r="2.4"/></g></svg>';
    }
    if (kind === "storm") {
      return '<svg ' + common + '><path d="M32 56h48a18 18 0 0 0 2-36 26 26 0 0 0-50 9A16 16 0 0 0 32 56z" fill="#9AA6BC" stroke="#7E8BA0" stroke-width="2"/><path d="M58 58l-14 22h12l-6 22 24-28H60l10-16z" fill="#F2C14E"/></svg>';
    }
    return '<svg ' + common + '><g fill="none" stroke="#C9D0D6" stroke-width="3" stroke-linecap="round"><path d="M22 44h76M18 58h84M26 72h70" opacity=".95"/><path d="M30 86h60" opacity=".55"/></g></svg>';
  }

  function weatherInfo(code) {
    if (WMO[code]) return WMO[code];
    return { label: "Unknown conditions", theme: "default", kind: "cloud", blurb: "A weather code arrived without a familiar translation." };
  }

  function showError(msg) {
    document.getElementById("loading").classList.add("hidden");
    document.getElementById("content").classList.add("hidden");
    document.getElementById("content").style.display = "none";
    var err = document.getElementById("error");
    err.classList.remove("hidden");
    document.getElementById("error-msg").textContent = msg || "The data could not be loaded for this location and date.";
  }

  function renderChart(temps) {
    var w = 1108, h = 196, l = 8, r = 8, t = 22, b = 16;
    var min = Math.min.apply(null, temps);
    var max = Math.max.apply(null, temps);
    var span = max - min || 1;
    function x(i) { return l + (i / Math.max(temps.length - 1, 1)) * (w - l - r); }
    function y(v) { return t + (1 - (v - min) / span) * (h - t - b); }
    var d = "";
    for (var i = 0; i < temps.length; i++) {
      d += (i === 0 ? "M" : "L") + x(i).toFixed(1) + " " + y(temps[i]).toFixed(1) + " ";
    }
    var area = d + " L" + x(temps.length - 1).toFixed(1) + " " + (h - 4) + " L" + x(0).toFixed(1) + " " + (h - 4) + " Z";
    var dots = "";
    var labels = "";
    var showAt = { 0: 1, 6: 1, 12: 1, 18: 1, 23: 1 };
    for (var j = 0; j < temps.length; j++) {
      dots += '<circle cx="' + x(j).toFixed(1) + '" cy="' + y(temps[j]).toFixed(1) + '" r="' + (showAt[j] ? 4.2 : 2.2) + '" fill="' + (showAt[j] ? "#F3EEE4" : "rgba(243,238,228,.45)") + '"/>';
      if (showAt[j]) {
        labels += '<text x="' + x(j).toFixed(1) + '" y="' + (y(temps[j]) - 10).toFixed(1) + '" text-anchor="middle" fill="rgba(243,238,228,.82)" font-size="12" font-family="Segoe UI, system-ui, sans-serif">' + fmtTemp(temps[j]) + '°</text>';
      }
    }
    document.getElementById("chart").innerHTML =
      '<defs><linearGradient id="ag" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#F0C27A" stop-opacity=".38"/><stop offset="100%" stop-color="#8EC5FF" stop-opacity=".02"/></linearGradient></defs>' +
      '<path d="' + area + '" fill="url(#ag)"/>' +
      '<path d="' + d + '" fill="none" stroke="#F3EEE4" stroke-width="2.4" stroke-linejoin="round" stroke-linecap="round"/>' +
      dots + labels;
  }

  function renderHours(temps) {
    var min = Math.min.apply(null, temps);
    var max = Math.max.apply(null, temps);
    var span = max - min || 1;
    var html = "";
    for (var i = 0; i < temps.length; i++) {
      var pct = 18 + ((temps[i] - min) / span) * 82;
      var hh = String(i).padStart(2, "0");
      html += '<div class="hour" title="' + hh + ':00 · ' + fmtTemp(temps[i]) + '°C">' +
        '<div class="ht">' + fmtTemp(temps[i]) + '°</div>' +
        '<div class="bar-track"><div class="bar" style="height:' + pct.toFixed(1) + '%;animation-delay:' + (i * 18) + 'ms"></div></div>' +
        '<div class="hl">' + hh + '</div></div>';
    }
    document.getElementById("hours").innerHTML = html;
  }

  async function main() {
    var q = new URLSearchParams(window.location.search);
    var lat = q.get("lat") || "52.52";
    var lon = q.get("lon") || "13.405";
    var name = q.get("name") || "Berlin";
    var date = validDate(q.get("date")) ? q.get("date") : todayUTC();
    var today = todayUTC();
    var endpoint = date < today ? "/api/om/archive" : "/api/om/forecast";
    var params = new URLSearchParams({
      latitude: lat,
      longitude: lon,
      daily: "temperature_2m_max,temperature_2m_min,weather_code",
      hourly: "temperature_2m",
      timezone: "UTC",
      temperature_unit: "celsius",
      start_date: date,
      end_date: date
    });

    try {
      var res = await fetch(endpoint + "?" + params.toString());
      if (!res.ok) throw new Error("bad status");
      var data = await res.json();
      var daily = data && data.daily;
      var hourly = data && data.hourly;
      if (!daily || !hourly || !daily.temperature_2m_max || !hourly.temperature_2m) {
        throw new Error("incomplete");
      }
      var tmax = daily.temperature_2m_max[0];
      var tmin = daily.temperature_2m_min[0];
      var code = daily.weather_code[0];
      var temps = hourly.temperature_2m.slice(0, 24).map(Number);
      if (!temps.length || temps.some(function (v) { return Number.isNaN(v); })) throw new Error("temps");
      if (tmax === null || tmin === null || tmax === undefined || tmin === undefined) throw new Error("daily");

      var info = weatherInfo(Number(code));
      document.body.className = "theme-" + info.theme;
      document.getElementById("place").textContent = name;
      document.getElementById("date-label").textContent = formatDate(date);
      document.getElementById("coords").innerHTML =
        escapeHtml(Number(lat).toFixed ? Number(lat).toString() : lat) + "°, " +
        escapeHtml(Number(lon).toString()) + "°<br>UTC · " + (date < today ? "archive" : "forecast");
      document.getElementById("condition").textContent = info.label;
      document.getElementById("blurb").textContent = info.blurb;
      document.getElementById("icon").innerHTML = iconSvg(info.kind);
      document.getElementById("tmax").innerHTML = fmtTemp(tmax) + '<span class="unit">°</span>';
      document.getElementById("tmin").innerHTML = fmtTemp(tmin) + '<span class="unit">°</span>';
      document.getElementById("range-note").textContent =
        "Range " + fmtTemp(Math.min.apply(null, temps)) + "° to " + fmtTemp(Math.max.apply(null, temps)) + "° · 24 hours";
      renderChart(temps);
      renderHours(temps);

      document.getElementById("loading").classList.add("hidden");
      document.getElementById("error").classList.add("hidden");
      var content = document.getElementById("content");
      content.classList.remove("hidden");
      content.style.display = "flex";
      document.getElementById("card").classList.add("ready");
    } catch (e) {
      showError("The data could not be loaded for this location and date.");
    }
  }

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

L1 — cheap deterministic descriptors

bytes total23,636html / css / js2,024 / 8,489 / 13,123
dom nodes45dom depth9
css rules82js presentyes
brightness48.6contrast28.2
colorfulness19.7whitespace61.1%

This slot's telemetry

prompt tokens526completion tokens8,260
total tokens8,786wall138.5 s
cost—request id—
config.json557 B
{
  "N": 4,
  "auth": {
    "credential_ref": "WCB_XAI_OFFICIAL_KEY",
    "method": "api-key"
  },
  "billing": "metered",
  "config_id": "grok-4.6-eff-medium--api--official--dev",
  "effort": "medium",
  "family": "grok",
  "m": {
    "min": 4,
    "q": 4
  },
  "model_id": "grok-4.6",
  "protocol": "api",
  "served_model": "grok-4.6",
  "telemetry": {
    "completion_tokens": 44070,
    "cost_usd": null,
    "prompt_tokens": 4176,
    "total_tokens": 48246,
    "wall_ms": 744006
  },
  "transport": "xai-official-api",
  "vendor_sanction_ref": null
}
send-log4.6 KB
{
  "N": 4,
  "batch_id": "2026-08-13--grok46-api",
  "config_id": "grok-4.6-eff-medium--api--official--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-08-12T17:51:27.339111+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T17:49:08.856835+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-08-12T17:52:56.545625+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T17:51:31.037054+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-08-12T17:53:42.730319+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T17:52:59.846207+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-08-12T17:55:43.305904+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T17:53:46.032412+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-08-12T17:57:48.072445+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T17:55:47.978344+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-08-12T17:59:01.766825+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T17:57:52.250432+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-08-12T17:59:51.225501+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T17:59:04.858365+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-08-12T18:01:58.571381+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T17:59:54.646404+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
    }
  }
}