grok-4.6 @ high · api
apihigh
- config
- grok-4.6-eff-high--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

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.6 @xhigh · api0.70grok-4.6 · api0.70grok-4.6 @medium · api0.69cursor-grok-4.6 @medium · cursor0.69claude-fable-5 @high · cursor0.69farthest
north-mini-code-free · api0.48qwen3.5-plus · go0.48qwen3.6-plus · go0.49gemini-3.1-pro-preview @low · api0.49minimax-m2.5 · go0.49within 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.4
- min tempmismatchshown: 52.52
- hourlymatchcoverage 24/24 · 24 match · 0 mismatch · 0 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 {
--bg1: #0b1020;
--bg2: #141c32;
--bg3: #1a2438;
--accent: #c9b896;
--accent-2: #e8dcc4;
--text: #f3efe6;
--muted: rgba(243, 239, 230, 0.48);
--faint: rgba(243, 239, 230, 0.18);
--line: rgba(243, 239, 230, 0.10);
--glow: rgba(201, 184, 150, 0.22);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
width: 1280px;
height: 800px;
overflow: hidden;
background: var(--bg1);
color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "ss01", "kern";
}
body { position: relative; }
.atmosphere {
position: absolute;
inset: 0;
background:
radial-gradient(900px 520px at 82% 18%, var(--glow), transparent 62%),
radial-gradient(700px 480px at 8% 88%, rgba(255,255,255,0.04), transparent 55%),
linear-gradient(165deg, var(--bg1) 0%, var(--bg2) 48%, var(--bg3) 100%);
transition: background 700ms ease;
}
.grain, .vignette {
position: absolute;
inset: 0;
pointer-events: none;
}
.grain {
opacity: 0.07;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette {
background: radial-gradient(ellipse at 50% 42%, transparent 38%, rgba(0,0,0,0.38) 100%);
}
.topbar {
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
opacity: 0.85;
z-index: 2;
}
#app {
position: relative;
z-index: 1;
width: 1280px;
height: 800px;
}
.card {
height: 800px;
padding: 52px 72px 40px;
display: flex;
flex-direction: column;
}
.header {
display: flex;
justify-content: space-between;
align-items: flex-start;
animation: fadeUp 700ms ease both;
}
.location {
font-size: 44px;
font-weight: 300;
letter-spacing: -0.035em;
line-height: 1.1;
max-width: 760px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.subhead {
margin-top: 10px;
font-size: 13px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
font-weight: 500;
}
.header-right {
text-align: right;
padding-top: 8px;
animation: fadeUp 700ms 80ms ease both;
}
.date-main {
font-size: 18px;
font-weight: 400;
letter-spacing: -0.01em;
color: var(--text);
}
.coords {
margin-top: 8px;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}
.hero {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 0;
padding: 8px 0 12px;
}
.temps {
display: flex;
align-items: flex-end;
gap: 56px;
animation: fadeUp 800ms 120ms ease both;
}
.temp-block { display: flex; flex-direction: column; }
.temp-hero {
font-size: 176px;
font-weight: 200;
line-height: 0.82;
letter-spacing: -0.055em;
font-variant-numeric: tabular-nums;
}
.temp-hero .deg {
font-size: 0.38em;
font-weight: 300;
vertical-align: super;
letter-spacing: 0;
margin-left: 2px;
opacity: 0.8;
}
.temp-label {
margin-top: 16px;
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
font-weight: 600;
}
.temp-label span.cond {
color: var(--accent-2);
letter-spacing: 0.12em;
font-weight: 500;
}
.temp-low .temp-hero {
font-size: 72px;
letter-spacing: -0.04em;
opacity: 0.78;
padding-bottom: 10px;
}
.icon-wrap {
position: relative;
width: 240px;
height: 240px;
display: flex;
align-items: center;
justify-content: center;
animation: fadeUp 900ms 180ms ease both;
color: var(--accent);
}
.icon-orb {
position: absolute;
width: 220px;
height: 220px;
border-radius: 50%;
background: radial-gradient(circle, var(--glow) 0%, transparent 70%);
animation: breathe 6s ease-in-out infinite;
}
.icon-wrap svg {
position: relative;
width: 168px;
height: 168px;
filter: drop-shadow(0 8px 24px rgba(0,0,0,0.25));
}
.hourly {
animation: fadeUp 800ms 240ms ease both;
}
.hourly-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 14px;
}
.hourly-head h2 {
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--muted);
font-weight: 600;
}
.hourly-head span {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--faint);
}
.chart-box {
position: relative;
height: 132px;
cursor: crosshair;
}
.chart-box svg {
display: block;
width: 100%;
height: 132px;
overflow: visible;
}
.hours {
display: grid;
grid-template-columns: repeat(24, 1fr);
margin-top: 8px;
}
.hour {
text-align: center;
padding: 6px 0 2px;
border-radius: 6px;
transition: background 160ms ease;
}
.hour.active {
background: var(--accent-dim, rgba(201, 184, 150, 0.12));
}
.hour .ht {
font-size: 13px;
font-weight: 500;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
line-height: 1.3;
}
.hour .hl {
font-size: 10px;
letter-spacing: 0.04em;
color: var(--muted);
margin-top: 2px;
font-variant-numeric: tabular-nums;
}
.tooltip {
position: absolute;
top: -8px;
transform: translate(-50%, -100%);
background: rgba(12, 16, 28, 0.88);
border: 1px solid var(--line);
color: var(--text);
font-size: 12px;
letter-spacing: 0.06em;
padding: 6px 10px;
border-radius: 6px;
pointer-events: none;
opacity: 0;
transition: opacity 120ms ease;
white-space: nowrap;
backdrop-filter: blur(10px);
z-index: 3;
}
.tooltip.show { opacity: 1; }
.state {
height: 800px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 72px;
}
.state-kicker {
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 16px;
}
.state h1 {
font-size: 42px;
font-weight: 300;
letter-spacing: -0.03em;
margin-bottom: 14px;
}
.state p {
font-size: 16px;
color: var(--muted);
max-width: 460px;
line-height: 1.55;
}
.spinner {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1.5px solid var(--faint);
border-top-color: var(--accent);
animation: spin 900ms linear infinite;
margin-bottom: 28px;
}
body[data-theme="clear"] {
--bg1: #1a1208; --bg2: #2a1c0e; --bg3: #3d2914;
--accent: #f0b429; --accent-2: #f6d48a;
--glow: rgba(240, 180, 41, 0.28);
--accent-dim: rgba(240, 180, 41, 0.12);
}
body[data-theme="partly"] {
--bg1: #10182b; --bg2: #1a2740; --bg3: #2a3d5c;
--accent: #f0c27a; --accent-2: #f4d7a8;
--glow: rgba(240, 194, 122, 0.22);
--accent-dim: rgba(240, 194, 122, 0.12);
}
body[data-theme="overcast"] {
--bg1: #161b24; --bg2: #222833; --bg3: #323a48;
--accent: #b7c3d4; --accent-2: #d5dce6;
--glow: rgba(183, 195, 212, 0.18);
--accent-dim: rgba(183, 195, 212, 0.12);
}
body[data-theme="fog"] {
--bg1: #1c1a1c; --bg2: #2a272b; --bg3: #3c383c;
--accent: #c4b8b0; --accent-2: #ddd4cc;
--glow: rgba(196, 184, 176, 0.18);
--accent-dim: rgba(196, 184, 176, 0.12);
}
body[data-theme="rain"] {
--bg1: #071422; --bg2: #0e2238; --bg3: #163552;
--accent: #7eb6ff; --accent-2: #b5d6ff;
--glow: rgba(126, 182, 255, 0.22);
--accent-dim: rgba(126, 182, 255, 0.12);
}
body[data-theme="snow"] {
--bg1: #121820; --bg2: #1c2633; --bg3: #2c3a4d;
--accent: #d7e6f5; --accent-2: #f0f6fb;
--glow: rgba(215, 230, 245, 0.2);
--accent-dim: rgba(215, 230, 245, 0.12);
}
body[data-theme="storm"] {
--bg1: #120c1c; --bg2: #1d1430; --bg3: #2e1d4a;
--accent: #c4a0ff; --accent-2: #ddc6ff;
--glow: rgba(196, 160, 255, 0.24);
--accent-dim: rgba(196, 160, 255, 0.12);
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe {
0%, 100% { transform: scale(1); opacity: 0.85; }
50% { transform: scale(1.08); opacity: 1; }
}
</style>
</head>
<body data-theme="overcast">
<div class="atmosphere"></div>
<div class="grain"></div>
<div class="vignette"></div>
<div class="topbar"></div>
<div id="app">
<div class="state">
<div class="spinner"></div>
<div class="state-kicker">Weather</div>
<h1>Loading</h1>
<p>Retrieving conditions…</p>
</div>
</div>
<script>
(function () {
const app = document.getElementById("app");
const WMO = {
0: "Clear sky",
1: "Mainly clear",
2: "Partly cloudy",
3: "Overcast",
45: "Fog",
48: "Depositing rime fog",
51: "Light drizzle",
53: "Moderate drizzle",
55: "Dense drizzle",
56: "Light freezing drizzle",
57: "Dense freezing drizzle",
61: "Slight rain",
63: "Moderate rain",
65: "Heavy rain",
66: "Light freezing rain",
67: "Heavy freezing rain",
71: "Slight snow fall",
73: "Moderate snow fall",
75: "Heavy snow fall",
77: "Snow grains",
80: "Slight rain showers",
81: "Moderate rain showers",
82: "Violent rain showers",
85: "Slight snow showers",
86: "Heavy snow showers",
95: "Thunderstorm",
96: "Thunderstorm with slight hail",
99: "Thunderstorm with heavy hail"
};
function escapeHtml(s) {
return String(s)
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """);
}
function themeFor(code) {
if (code === 0 || code === 1) return "clear";
if (code === 2) return "partly";
if (code === 3) return "overcast";
if (code === 45 || code === 48) return "fog";
if ([51, 53, 55, 56, 57, 61, 63, 65, 66, 67, 80, 81, 82].indexOf(code) >= 0) return "rain";
if ([71, 73, 75, 77, 85, 86].indexOf(code) >= 0) return "snow";
if ([95, 96, 99].indexOf(code) >= 0) return "storm";
return "overcast";
}
function iconSvg(code) {
const common = 'viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"';
const sun = '<circle cx="32" cy="32" r="9" fill="currentColor" fill-opacity="0.15"/><circle cx="32" cy="32" r="9"/><path d="M32 14V9M32 55v-5M14 32H9M55 32h-5M19.2 19.2l-3.5-3.5M48.3 48.3l-3.5-3.5M19.2 44.8l-3.5 3.5M48.3 15.7l-3.5 3.5"/>';
const cloud = '<path d="M18.5 44.5h26.2a9.3 9.3 0 0 0 1.2-18.5 13.2 13.2 0 0 0-25.2-2.6A8 8 0 0 0 18.5 44.5z" fill="currentColor" fill-opacity="0.12"/>';
const cloudOnly = '<path d="M16 42h29a10 10 0 0 0 .8-20 14.5 14.5 0 0 0-27.6-2.4A8.6 8.6 0 0 0 16 42z" fill="currentColor" fill-opacity="0.12"/>';
if (code === 0) return "<svg " + common + ">" + sun + "</svg>";
if (code === 1) return "<svg " + common + '><g transform="translate(-6 -8) scale(0.86)">' + sun + '</g><path d="M20 48h24.5a8.5 8.5 0 0 0 .6-16.9 12 12 0 0 0-22.8-1.8A7.4 7.4 0 0 0 20 48z" fill="currentColor" fill-opacity="0.14"/></svg>';
if (code === 2) return "<svg " + common + '><g transform="translate(-4 -10) scale(0.72)">' + sun + "</g>" + cloud + "</svg>";
if (code === 3) return "<svg " + common + ">" + cloudOnly + '<path d="M22 28.5a11 11 0 0 1 20.2-2.2" /></svg>';
if (code === 45 || code === 48) return '<svg ' + common + '><path d="M12 26h40M16 34h32M14 42h36" opacity="0.95"/><path d="M20 22h8M36 22h6" opacity="0.4"/></svg>';
if ([51, 53, 55, 56, 57].indexOf(code) >= 0) return "<svg " + common + ">" + cloud + '<path d="M24 50v3M32 49v4M40 50v3" opacity="0.85"/></svg>';
if ([71, 73, 75, 77, 85, 86].indexOf(code) >= 0) return "<svg " + common + ">" + cloud + '<path d="M24 50l.5 2.2M23 51.2h2.2M32 49.5l.5 2.2M31 50.7h2.2M40 50l.5 2.2M39 51.2h2.2"/></svg>';
if ([95, 96, 99].indexOf(code) >= 0) return "<svg " + common + ">" + cloud + '<path d="M31 44l-5 9h5l-2 8 9-12h-5l3-5z" fill="currentColor" stroke="none"/></svg>';
return "<svg " + common + ">" + cloud + '<path d="M24 50l-1.2 5M32 49l-1.2 6M40 50l-1.2 5"/></svg>';
}
function getParams() {
const params = new URLSearchParams(window.location.search);
function num(key, fallback) {
const v = params.get(key);
if (v === null || v === "") return fallback;
const n = parseFloat(v);
return Number.isFinite(n) ? n : fallback;
}
const lat = num("lat", 52.52);
const lon = num("lon", 13.405);
const nameRaw = params.get("name");
const name = nameRaw && nameRaw.trim() ? nameRaw.trim() : "Berlin";
const todayStr = new Date().toISOString().slice(0, 10);
let date = params.get("date");
if (!date || !/^\d{4}-\d{2}-\d{2}$/.test(date)) date = todayStr;
return { lat, lon, name, date, todayStr };
}
function formatDate(dateStr) {
const d = new Date(dateStr + "T12:00:00Z");
return d.toLocaleDateString("en-GB", {
weekday: "long",
day: "numeric",
month: "long",
year: "numeric",
timeZone: "UTC"
});
}
function fmtCoord(lat, lon) {
const ns = lat >= 0 ? "N" : "S";
const ew = lon >= 0 ? "E" : "W";
return Math.abs(lat).toFixed(2) + "°" + ns + " " + Math.abs(lon).toFixed(2) + "°" + ew;
}
function conditionName(code) {
if (code == null || Number.isNaN(Number(code))) return "Unknown conditions";
return WMO[Number(code)] || "Unknown conditions";
}
function catmullRom(points) {
if (!points.length) return "";
if (points.length === 1) return "M " + points[0][0] + "," + points[0][1];
let d = "M " + points[0][0] + "," + points[0][1];
for (let i = 0; i < points.length - 1; i++) {
const p0 = points[i - 1] || points[i];
const p1 = points[i];
const p2 = points[i + 1];
const p3 = points[i + 2] || p2;
const c1x = p1[0] + (p2[0] - p0[0]) / 6;
const c1y = p1[1] + (p2[1] - p0[1]) / 6;
const c2x = p2[0] - (p3[0] - p1[0]) / 6;
const c2y = p2[1] - (p3[1] - p1[1]) / 6;
d += " C " + c1x + "," + c1y + " " + c2x + "," + c2y + " " + p2[0] + "," + p2[1];
}
return d;
}
function renderError(title, detail) {
document.body.setAttribute("data-theme", "overcast");
app.innerHTML =
'<div class="state">' +
'<div class="state-kicker">Unavailable</div>' +
"<h1>" + escapeHtml(title) + "</h1>" +
"<p>" + escapeHtml(detail) + "</p>" +
"</div>";
}
function renderWeather(p, daily, hours) {
const code = daily.weather_code;
const theme = themeFor(code);
document.body.setAttribute("data-theme", theme);
document.title = p.name + " · Weather";
const maxT = Math.round(daily.temperature_2m_max);
const minT = Math.round(daily.temperature_2m_min);
const cond = conditionName(code);
const valid = hours.filter(function (h) { return h.temp != null && Number.isFinite(h.temp); });
const tMin = valid.length ? Math.min.apply(null, valid.map(function (h) { return h.temp; })) : 0;
const tMax = valid.length ? Math.max.apply(null, valid.map(function (h) { return h.temp; })) : 1;
const range = tMax - tMin || 1;
const W = 1136;
const H = 132;
const padY = 18;
const n = hours.length || 1;
const pts = hours.map(function (h, i) {
const x = ((i + 0.5) / n) * W;
const t = h.temp != null && Number.isFinite(h.temp) ? h.temp : tMin;
const y = H - padY - ((t - tMin) / range) * (H - padY * 2);
return [x, y];
});
const line = catmullRom(pts);
const area = line + " L " + (pts.length ? pts[pts.length - 1][0] : 0) + "," + H + " L " + (pts.length ? pts[0][0] : 0) + "," + H + " Z";
let maxIdx = 0;
let minIdx = 0;
hours.forEach(function (h, i) {
if (h.temp == null) return;
if (hours[maxIdx].temp == null || h.temp > hours[maxIdx].temp) maxIdx = i;
if (hours[minIdx].temp == null || h.temp < hours[minIdx].temp) minIdx = i;
});
let dots = "";
pts.forEach(function (pt, i) {
if (hours[i].temp == null) return;
const isExt = i === maxIdx || i === minIdx;
dots += '<circle class="pt" data-i="' + i + '" cx="' + pt[0] + '" cy="' + pt[1] + '" r="' + (isExt ? 3.4 : 2.1) + '" fill="' + (isExt ? "var(--accent-2)" : "var(--accent)") + '"></circle>';
});
let hourCols = "";
hours.forEach(function (h, i) {
const label = String(i).padStart(2, "0");
const val = h.temp == null ? "—" : Math.round(h.temp) + "°";
hourCols +=
'<div class="hour" data-i="' + i + '">' +
'<div class="ht">' + val + "</div>" +
'<div class="hl">' + label + "</div>" +
"</div>";
});
app.innerHTML =
'<div class="card">' +
'<header class="header">' +
"<div>" +
'<div class="location">' + escapeHtml(p.name) + "</div>" +
'<div class="subhead">' + escapeHtml(fmtCoord(p.lat, p.lon)) + "</div>" +
"</div>" +
'<div class="header-right">' +
'<div class="date-main">' + escapeHtml(formatDate(p.date)) + "</div>" +
'<div class="coords">' + escapeHtml(p.date) + " · UTC · Celsius</div>" +
"</div>" +
"</header>" +
'<section class="hero">' +
'<div class="temps">' +
'<div class="temp-block">' +
'<div class="temp-hero">' + maxT + '<span class="deg">°</span></div>' +
'<div class="temp-label">High · <span class="cond">' + escapeHtml(cond) + "</span></div>" +
"</div>" +
'<div class="temp-block temp-low">' +
'<div class="temp-hero">' + minT + '<span class="deg">°</span></div>' +
'<div class="temp-label">Low</div>' +
"</div>" +
"</div>" +
'<div class="icon-wrap"><div class="icon-orb"></div>' + iconSvg(code) + "</div>" +
"</section>" +
'<section class="hourly">' +
'<div class="hourly-head"><h2>Hourly temperature</h2><span>24 hours</span></div>' +
'<div class="chart-box" id="chart">' +
'<div class="tooltip" id="tip"></div>' +
'<svg viewBox="0 0 ' + W + " " + H + '" preserveAspectRatio="none" aria-hidden="true">' +
"<defs>" +
'<linearGradient id="ag" x1="0" y1="0" x2="0" y2="1">' +
'<stop offset="0%" stop-color="var(--accent)" stop-opacity="0.32"/>' +
'<stop offset="100%" stop-color="var(--accent)" stop-opacity="0"/>' +
"</linearGradient>" +
"</defs>" +
'<path d="' + area + '" fill="url(#ag)"></path>' +
'<path d="' + line + '" fill="none" stroke="var(--accent)" stroke-width="2.2" vector-effect="non-scaling-stroke"></path>' +
'<line id="guide" x1="0" y1="0" x2="0" y2="' + H + '" stroke="var(--accent-2)" stroke-opacity="0.35" stroke-width="1" vector-effect="non-scaling-stroke" visibility="hidden"></line>' +
dots +
"</svg>" +
"</div>" +
'<div class="hours" id="hours">' + hourCols + "</div>" +
"</section>" +
"</div>";
const chart = document.getElementById("chart");
const tip = document.getElementById("tip");
const guide = document.getElementById("guide");
const hourEls = Array.prototype.slice.call(document.querySelectorAll(".hour"));
function setActive(i) {
hourEls.forEach(function (el) { el.classList.toggle("active", Number(el.getAttribute("data-i")) === i); });
if (i < 0 || i >= hours.length) {
tip.classList.remove("show");
guide.setAttribute("visibility", "hidden");
return;
}
const h = hours[i];
const label = String(i).padStart(2, "0") + ":00";
const val = h.temp == null ? "—" : Math.round(h.temp) + "°C";
tip.textContent = label + " · " + val;
const xPct = ((i + 0.5) / n) * 100;
tip.style.left = xPct + "%";
tip.classList.add("show");
guide.setAttribute("x1", pts[i][0]);
guide.setAttribute("x2", pts[i][0]);
guide.setAttribute("visibility", "visible");
}
function indexFromEvent(e) {
const rect = chart.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width;
return Math.max(0, Math.min(n - 1, Math.floor(x * n)));
}
chart.addEventListener("mousemove", function (e) { setActive(indexFromEvent(e)); });
chart.addEventListener("mouseleave", function () { setActive(-1); });
hourEls.forEach(function (el) {
el.addEventListener("mouseenter", function () { setActive(Number(el.getAttribute("data-i"))); });
el.addEventListener("mouseleave", function () { setActive(-1); });
});
}
async function main() {
const p = getParams();
document.title = p.name + " · Weather";
app.innerHTML =
'<div class="state">' +
'<div class="spinner"></div>' +
'<div class="state-kicker">Weather</div>' +
"<h1>" + escapeHtml(p.name) + "</h1>" +
"<p>Retrieving conditions for " + escapeHtml(formatDate(p.date)) + "…</p>" +
"</div>";
const endpoint = p.date < p.todayStr ? "/api/om/archive" : "/api/om/forecast";
const qs = new URLSearchParams({
latitude: String(p.lat),
longitude: String(p.lon),
daily: "temperature_2m_max,temperature_2m_min,weather_code",
hourly: "temperature_2m",
timezone: "UTC",
temperature_unit: "celsius",
start_date: p.date,
end_date: p.date
});
try {
const res = await fetch(endpoint + "?" + qs.toString());
if (!res.ok) throw new Error("bad status");
const data = await res.json();
if (!data || !data.daily || !data.hourly) throw new Error("shape");
const maxArr = data.daily.temperature_2m_max;
const minArr = data.daily.temperature_2m_min;
const codeArr = data.daily.weather_code;
if (!maxArr || !minArr || !codeArr || maxArr[0] == null || minArr[0] == null) throw new Error("daily");
const times = data.hourly.time || [];
const temps = data.hourly.temperature_2m || [];
const hours = [];
for (let i = 0; i < times.length; i++) {
if (String(times[i]).indexOf(p.date) === 0) {
const t = temps[i];
hours.push({ time: times[i], temp: t == null ? null : Number(t) });
}
}
if (!hours.length) throw new Error("hourly");
renderWeather(p, {
temperature_2m_max: Number(maxArr[0]),
temperature_2m_min: Number(minArr[0]),
weather_code: Number(codeArr[0])
}, hours);
} catch (err) {
renderError(
"Weather data could not be loaded",
"Conditions for " + p.name + " on " + formatDate(p.date) + " are unavailable. Check the location or date and try again."
);
}
}
main();
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 23,767 | html / css / js | 515 / 8,966 / 14,286 |
|---|---|---|---|
| dom nodes | 18 | dom depth | 5 |
| css rules | 61 | js present | yes |
| brightness | 37.4 | contrast | 17.6 |
| colorfulness | 20.5 | whitespace | 62.4% |
This slot's telemetry
| prompt tokens | 526 | completion tokens | 8,555 |
|---|---|---|---|
| total tokens | 9,081 | wall | 185.7 s |
| cost | — | request id | — |
config.json554 B
{
"N": 4,
"auth": {
"credential_ref": "WCB_XAI_OFFICIAL_KEY",
"method": "api-key"
},
"billing": "metered",
"config_id": "grok-4.6-eff-high--api--official--dev",
"effort": "high",
"family": "grok",
"m": {
"min": 4,
"q": 4
},
"model_id": "grok-4.6",
"protocol": "api",
"served_model": "grok-4.6",
"telemetry": {
"completion_tokens": 56823,
"cost_usd": null,
"prompt_tokens": 4176,
"total_tokens": 60999,
"wall_ms": 1407504
},
"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-high--api--official--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-08-12T17:22:50.648117+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T17:20:31.908881+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:25:59.521932+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T17:22:53.838693+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:30:19.725776+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T17:26:04.086330+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:32:37.198166+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T17:30:24.506599+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:36:27.444022+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T17:32:40.554065+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:39:19.297945+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T17:36:30.868138+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:42:08.223455+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T17:39:25.685931+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-08-12T17:44:28.956224+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T17:42:12.106150+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
}
}
}