grok-4.6 @ xhigh · api
apixhigh
- config
- grok-4.6-eff-xhigh--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 · api0.70grok-4.6 @high · api0.70claude-fable-5 @high · cursor0.69grok-4.6 @medium · api0.69glm-5.2 @enabled · api0.69farthest
north-mini-code-free · api0.47claude-sonnet-4 · cursor0.50claude-sonnet-4-5-thinking · cursor-xl0.50minimax-m2.5 · go0.51gemini-3.1-pro-preview @low · api0.51within 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 tempambiguousshown: 17max-equals-min
- min tempambiguousshown: 17max-equals-min
- 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: #0c1018;
--bg1: #171e2e;
--glow: #c47a3a;
--orb1: rgba(196, 122, 58, 0.28);
--orb2: rgba(80, 110, 170, 0.18);
--ink: #f4efe6;
--muted: rgba(244, 239, 230, 0.52);
--faint: rgba(244, 239, 230, 0.14);
--line: rgba(244, 239, 230, 0.13);
--accent: #e8c17a;
--chart: #e8c17a;
--chart-fill: rgba(232, 193, 122, 0.16);
--danger: #e8b4a0;
}
body[data-theme="clear"] {
--bg0: #120c09;
--bg1: #24160f;
--glow: #e09440;
--orb1: rgba(232, 150, 56, 0.36);
--orb2: rgba(255, 196, 110, 0.12);
--accent: #f0c27a;
--chart: #f0c27a;
--chart-fill: rgba(240, 194, 122, 0.18);
}
body[data-theme="partly"] {
--bg0: #0c1018;
--bg1: #1a2336;
--glow: #d4926a;
--orb1: rgba(212, 146, 106, 0.26);
--orb2: rgba(110, 140, 190, 0.16);
--accent: #e8c9a0;
--chart: #e8c9a0;
--chart-fill: rgba(232, 201, 160, 0.16);
}
body[data-theme="cloudy"] {
--bg0: #12151a;
--bg1: #262c34;
--glow: #7a848e;
--orb1: rgba(140, 150, 160, 0.16);
--orb2: rgba(90, 100, 112, 0.14);
--accent: #c5cdd4;
--chart: #c5cdd4;
--chart-fill: rgba(197, 205, 212, 0.14);
}
body[data-theme="rain"] {
--bg0: #061014;
--bg1: #0d2430;
--glow: #1f6b6e;
--orb1: rgba(40, 140, 150, 0.22);
--orb2: rgba(60, 90, 130, 0.16);
--accent: #8fd4cf;
--chart: #8fd4cf;
--chart-fill: rgba(143, 212, 207, 0.16);
}
body[data-theme="snow"] {
--bg0: #0c1218;
--bg1: #1a2634;
--glow: #8aa4c0;
--orb1: rgba(190, 210, 230, 0.16);
--orb2: rgba(120, 150, 180, 0.14);
--ink: #f4f7fb;
--accent: #e8eef6;
--chart: #d5e4f2;
--chart-fill: rgba(213, 228, 242, 0.16);
}
body[data-theme="thunder"] {
--bg0: #0a0812;
--bg1: #1a1230;
--glow: #6b3fa0;
--orb1: rgba(130, 80, 190, 0.28);
--orb2: rgba(80, 50, 140, 0.2);
--accent: #c4a6e8;
--chart: #c4a6e8;
--chart-fill: rgba(196, 166, 232, 0.16);
}
body[data-theme="fog"] {
--bg0: #141310;
--bg1: #2a2720;
--glow: #8a8070;
--orb1: rgba(180, 168, 140, 0.16);
--orb2: rgba(120, 112, 96, 0.12);
--accent: #d4cbb8;
--chart: #d4cbb8;
--chart-fill: rgba(212, 203, 184, 0.16);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
width: 100%;
height: 100%;
background: #05070c;
display: flex;
align-items: center;
justify-content: center;
color: var(--ink);
font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.stage {
width: 1280px;
height: 800px;
position: relative;
overflow: hidden;
background: var(--bg0);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.aurora {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 90% 46% at 50% 108%, var(--glow) 0%, transparent 58%),
radial-gradient(ellipse 42% 38% at 12% 18%, var(--orb1) 0%, transparent 70%),
radial-gradient(ellipse 36% 34% at 88% 22%, var(--orb2) 0%, transparent 68%),
linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 48%, var(--bg0) 100%);
transition: background 0.8s ease;
}
body.is-loading .aurora {
animation: breathe 2.4s ease-in-out infinite;
}
.fx {
position: absolute;
inset: 0;
pointer-events: none;
}
body[data-theme="clear"] .fx,
body[data-theme="partly"] .fx {
background: radial-gradient(circle at 50% 42%, rgba(255, 186, 80, 0.16), transparent 26%);
}
body[data-theme="rain"] .fx {
background: repeating-linear-gradient(
82deg,
transparent 0 11px,
rgba(180, 220, 230, 0.035) 11px 12px
);
animation: fall 1.4s linear infinite;
}
body[data-theme="snow"] .fx {
background-image:
radial-gradient(1.5px 1.5px at 12% 20%, rgba(255,255,255,0.35) 50%, transparent 60%),
radial-gradient(1.5px 1.5px at 28% 68%, rgba(255,255,255,0.28) 50%, transparent 60%),
radial-gradient(1.2px 1.2px at 46% 36%, rgba(255,255,255,0.3) 50%, transparent 60%),
radial-gradient(1.6px 1.6px at 63% 78%, rgba(255,255,255,0.22) 50%, transparent 60%),
radial-gradient(1.2px 1.2px at 81% 24%, rgba(255,255,255,0.32) 50%, transparent 60%),
radial-gradient(1.4px 1.4px at 91% 58%, rgba(255,255,255,0.2) 50%, transparent 60%);
animation: drift 14s linear infinite;
}
body[data-theme="thunder"] .fx {
background: radial-gradient(ellipse 50% 30% at 70% 20%, rgba(180, 130, 255, 0.12), transparent 70%);
}
.vignette {
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse 78% 72% at 50% 45%, transparent 40%, rgba(0,0,0,0.38) 100%);
}
.grain {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.055;
mix-blend-mode: overlay;
}
.grain svg { width: 100%; height: 100%; display: block; }
.frame {
position: relative;
z-index: 2;
height: 100%;
padding: 40px 56px 32px;
display: grid;
grid-template-rows: auto 1fr auto;
gap: 8px;
}
.corners { position: absolute; inset: 18px; pointer-events: none; z-index: 3; }
.corners i {
position: absolute;
width: 16px;
height: 16px;
border: 0 solid rgba(244, 239, 230, 0.28);
}
.corners i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.corners i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.corners i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.corners i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 32px;
padding-top: 8px;
}
.kicker {
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--muted);
font-weight: 600;
margin-bottom: 10px;
}
h1 {
font-family: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
font-size: 52px;
font-weight: 400;
letter-spacing: -0.025em;
line-height: 1;
max-width: 820px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.date-block { text-align: right; padding-top: 2px; flex-shrink: 0; }
#weekday {
font-size: 18px;
font-weight: 500;
letter-spacing: 0.01em;
margin-bottom: 4px;
}
#fulldate {
font-size: 15px;
color: var(--muted);
margin-bottom: 8px;
}
.tz {
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
font-weight: 600;
}
.hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 0;
}
.condition-row {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 22px;
min-height: 56px;
}
.icon {
width: 56px;
height: 56px;
color: var(--accent);
filter: drop-shadow(0 0 16px var(--glow));
flex-shrink: 0;
}
.icon svg { width: 100%; height: 100%; display: block; }
#condition {
font-size: 13px;
letter-spacing: 0.34em;
text-transform: uppercase;
font-weight: 600;
color: var(--ink);
}
.temps {
display: flex;
align-items: stretch;
justify-content: center;
gap: 72px;
}
.temp {
display: flex;
flex-direction: column;
align-items: center;
min-width: 180px;
}
.t {
font-size: 118px;
font-weight: 200;
letter-spacing: -0.045em;
line-height: 0.88;
font-variant-numeric: tabular-nums;
}
.deg {
font-size: 0.38em;
font-weight: 300;
letter-spacing: 0;
margin-left: 2px;
vertical-align: 0.62em;
opacity: 0.8;
}
.tlbl {
margin-top: 14px;
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--muted);
font-weight: 600;
}
.rule {
width: 1px;
background: linear-gradient(180deg, transparent, var(--line) 15%, var(--line) 85%, transparent);
align-self: stretch;
}
.hours {
padding-top: 8px;
}
.hours-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 8px;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 600;
color: var(--muted);
}
#chart { width: 100%; height: 132px; }
#chart svg { width: 100%; height: 100%; display: block; }
.hour-scale {
display: grid;
grid-template-columns: repeat(24, 1fr);
margin-top: 6px;
padding-top: 10px;
border-top: 1px solid var(--faint);
}
.hour-cell {
text-align: center;
font-variant-numeric: tabular-nums;
padding: 2px 0 0;
border-radius: 3px;
}
.hour-cell.is-extreme .ht { color: var(--accent); }
.hour-cell.is-now {
background: rgba(244, 239, 230, 0.05);
box-shadow: inset 0 -2px 0 var(--accent);
}
.ht {
display: block;
font-size: 12px;
font-weight: 560;
letter-spacing: -0.01em;
line-height: 1.2;
}
.hh {
display: block;
margin-top: 5px;
font-size: 9px;
letter-spacing: 0.06em;
color: var(--muted);
font-weight: 600;
}
.error-panel {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 14px;
}
body.is-error .hero,
body.is-error .hours { display: none; }
body.is-error .error-panel { display: flex; }
.error-mark {
width: 46px;
height: 46px;
border: 1px solid var(--danger);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--danger);
font-size: 20px;
font-weight: 300;
margin-bottom: 6px;
}
.error-title {
font-family: Georgia, "Iowan Old Style", Palatino, serif;
font-size: 28px;
font-weight: 400;
letter-spacing: -0.02em;
}
.error-sub {
color: var(--muted);
font-size: 15px;
max-width: 420px;
line-height: 1.5;
}
.loader {
width: 22px;
height: 22px;
border: 1.5px solid var(--faint);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.85s linear infinite;
}
body.is-loading .icon { display: none; }
body:not(.is-loading) .loader { display: none; }
body.is-loading .t { opacity: 0.22; }
body.is-loading #condition { color: var(--muted); letter-spacing: 0.22em; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe {
0%, 100% { filter: saturate(1) brightness(1); }
50% { filter: saturate(1.15) brightness(1.08); }
}
@keyframes fall { to { background-position: 18px 28px; } }
@keyframes drift { to { transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) {
.aurora, .fx, .loader { animation: none !important; }
}
</style>
</head>
<body class="is-loading">
<div class="stage">
<div class="aurora" aria-hidden="true"></div>
<div class="fx" aria-hidden="true"></div>
<div class="vignette" aria-hidden="true"></div>
<div class="grain" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<filter id="g">
<feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="4" stitchTiles="stitch"/>
<feColorMatrix type="saturate" values="0"/>
</filter>
<rect width="100%" height="100%" filter="url(#g)"/>
</svg>
</div>
<div class="corners" aria-hidden="true"><i></i><i></i><i></i><i></i></div>
<main class="frame">
<header>
<div>
<p class="kicker">Location</p>
<h1 id="place">Berlin</h1>
</div>
<div class="date-block">
<p id="weekday">—</p>
<p id="fulldate">—</p>
<p class="tz">UTC · Celsius</p>
</div>
</header>
<section class="hero" id="hero">
<div class="condition-row">
<div class="loader" aria-hidden="true"></div>
<div class="icon" id="icon"></div>
<p id="condition">Retrieving observations</p>
</div>
<div class="temps">
<div class="temp">
<div class="t" id="tmax">—</div>
<div class="tlbl">Maximum</div>
</div>
<div class="rule"></div>
<div class="temp">
<div class="t" id="tmin">—</div>
<div class="tlbl">Minimum</div>
</div>
</div>
</section>
<section class="error-panel" id="error" role="alert">
<div class="error-mark">!</div>
<p class="error-title">Weather data could not be loaded</p>
<p class="error-sub">Observations for this place and date are unavailable.</p>
</section>
<section class="hours" id="hoursSection">
<div class="hours-head">
<span>Hourly temperature</span>
<span>24 hours · UTC</span>
</div>
<div id="chart"></div>
<div class="hour-scale" id="hourScale"></div>
</section>
</main>
</div>
<script>
(function () {
var placeEl = document.getElementById('place');
var weekdayEl = document.getElementById('weekday');
var fulldateEl = document.getElementById('fulldate');
var condEl = document.getElementById('condition');
var tmaxEl = document.getElementById('tmax');
var tminEl = document.getElementById('tmin');
var iconEl = document.getElementById('icon');
var chartEl = document.getElementById('chart');
var scaleEl = document.getElementById('hourScale');
function todayUTC() {
return new Date().toISOString().slice(0, 10);
}
function validYMD(s) {
if (!/^\d{4}-\d{2}-\d{2}$/.test(s)) return false;
var p = s.split('-').map(Number);
var dt = new Date(Date.UTC(p[0], p[1] - 1, p[2]));
return dt.getUTCFullYear() === p[0] && dt.getUTCMonth() === p[1] - 1 && dt.getUTCDate() === p[2];
}
function fail() {
document.body.classList.remove('is-loading');
document.body.classList.add('is-error');
}
var qs = new URLSearchParams(location.search);
var latN = qs.has('lat') ? Number(qs.get('lat')) : 52.52;
var lonN = qs.has('lon') ? Number(qs.get('lon')) : 13.405;
var name = (qs.get('name') || 'Berlin').trim() || 'Berlin';
var date = qs.get('date') || todayUTC();
placeEl.textContent = name;
document.title = name + ' · Weather';
if (!isFinite(latN) || !isFinite(lonN) || latN < -90 || latN > 90 || lonN < -180 || lonN > 180 || !validYMD(date)) {
weekdayEl.textContent = 'Unknown date';
fulldateEl.textContent = date || '—';
fail();
return;
}
var parts = date.split('-').map(Number);
var dt = new Date(Date.UTC(parts[0], parts[1] - 1, parts[2]));
weekdayEl.textContent = dt.toLocaleDateString('en-GB', { weekday: 'long', timeZone: 'UTC' });
fulldateEl.textContent = dt.toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric', timeZone: 'UTC' });
var ICONS = {
sun: '<svg viewBox="0 0 64 64" fill="none"><circle cx="32" cy="32" r="11" fill="currentColor"/><g stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M32 6v7M32 51v7M6 32h7M51 32h7M13.2 13.2l5 5M45.8 45.8l5 5M13.2 50.8l5-5M45.8 18.2l5-5"/></g></svg>',
partly: '<svg viewBox="0 0 64 64" fill="none"><circle cx="26" cy="24" r="8" fill="currentColor"/><g stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M26 8v5M10 24h5M14.2 12.2l3.4 3.4M14.2 35.8l3.4-3.4M37.8 12.2l-3.4 3.4"/></g><path d="M24.5 44.5h20.2a8.3 8.3 0 0 0 1.2-16.5 11.2 11.2 0 0 0-21.6 2.4A7.2 7.2 0 0 0 24.5 44.5z" fill="currentColor" fill-opacity="0.92"/></svg>',
cloud: '<svg viewBox="0 0 64 64" fill="none"><path d="M18.5 44.5h27.2A9.4 9.4 0 0 0 47 26.1a13 13 0 0 0-25.2 2.6A8.3 8.3 0 0 0 18.5 44.5z" fill="currentColor"/></svg>',
rain: '<svg viewBox="0 0 64 64" fill="none"><path d="M18.5 36.5h27.2A9.4 9.4 0 0 0 47 18.1a13 13 0 0 0-25.2 2.6A8.3 8.3 0 0 0 18.5 36.5z" fill="currentColor"/><g stroke="currentColor" stroke-width="2.1" stroke-linecap="round"><path d="M24 44v8M32 42v10M40 44v8"/></g></svg>',
snow: '<svg viewBox="0 0 64 64" fill="none"><path d="M18.5 34.5h27.2A9.4 9.4 0 0 0 47 16.1a13 13 0 0 0-25.2 2.6A8.3 8.3 0 0 0 18.5 34.5z" fill="currentColor"/><g stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M24 42v8M20 46h8M21.7 43.7l6.6 6.6M28.3 43.7l-6.6 6.6M40 42v8M36 46h8M37.7 43.7l6.6 6.6M44.3 43.7l-6.6 6.6"/></g></svg>',
thunder: '<svg viewBox="0 0 64 64" fill="none"><path d="M17.5 35.5h26.4A9 9 0 0 0 45.2 18a12.6 12.6 0 0 0-24.4 2.4A8 8 0 0 0 17.5 35.5z" fill="currentColor"/><path d="M31 34l-7 14h8l-2 12 11-16h-8l6-10z" fill="currentColor"/></svg>',
fog: '<svg viewBox="0 0 64 64" fill="none"><g stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M14 24h28M18 32h32M14 40h26M22 48h24"/></g></svg>'
};
function weatherInfo(code) {
var n = Number(code);
if (!isFinite(n)) return { label: 'Unknown conditions', theme: 'cloudy', icon: 'cloud' };
if (n === 0) return { label: 'Clear sky', theme: 'clear', icon: 'sun' };
if (n === 1) return { label: 'Mainly clear', theme: 'clear', icon: 'sun' };
if (n === 2) return { label: 'Partly cloudy', theme: 'partly', icon: 'partly' };
if (n === 3) return { label: 'Overcast', theme: 'cloudy', icon: 'cloud' };
if (n === 45) return { label: 'Fog', theme: 'fog', icon: 'fog' };
if (n === 48) return { label: 'Rime fog', theme: 'fog', icon: 'fog' };
if (n === 51) return { label: 'Light drizzle', theme: 'rain', icon: 'rain' };
if (n === 53) return { label: 'Drizzle', theme: 'rain', icon: 'rain' };
if (n === 55) return { label: 'Dense drizzle', theme: 'rain', icon: 'rain' };
if (n === 56 || n === 57) return { label: 'Freezing drizzle', theme: 'snow', icon: 'rain' };
if (n === 61) return { label: 'Slight rain', theme: 'rain', icon: 'rain' };
if (n === 63) return { label: 'Moderate rain', theme: 'rain', icon: 'rain' };
if (n === 65) return { label: 'Heavy rain', theme: 'rain', icon: 'rain' };
if (n === 66 || n === 67) return { label: 'Freezing rain', theme: 'snow', icon: 'rain' };
if (n === 71) return { label: 'Slight snow', theme: 'snow', icon: 'snow' };
if (n === 73) return { label: 'Moderate snow', theme: 'snow', icon: 'snow' };
if (n === 75) return { label: 'Heavy snow', theme: 'snow', icon: 'snow' };
if (n === 77) return { label: 'Snow grains', theme: 'snow', icon: 'snow' };
if (n === 80) return { label: 'Slight rain showers', theme: 'rain', icon: 'rain' };
if (n === 81) return { label: 'Rain showers', theme: 'rain', icon: 'rain' };
if (n === 82) return { label: 'Violent rain showers', theme: 'rain', icon: 'rain' };
if (n === 85) return { label: 'Slight snow showers', theme: 'snow', icon: 'snow' };
if (n === 86) return { label: 'Heavy snow showers', theme: 'snow', icon: 'snow' };
if (n === 95) return { label: 'Thunderstorm', theme: 'thunder', icon: 'thunder' };
if (n === 96) return { label: 'Thunderstorm with hail', theme: 'thunder', icon: 'thunder' };
if (n === 99) return { label: 'Thunderstorm with heavy hail', theme: 'thunder', icon: 'thunder' };
return { label: 'Unknown conditions', theme: 'cloudy', icon: 'cloud' };
}
function smoothPath(pts) {
if (!pts.length) return '';
if (pts.length === 1) return 'M' + pts[0].x + ',' + pts[0].y;
var d = 'M' + pts[0].x + ',' + pts[0].y;
for (var i = 0; i < pts.length - 1; i++) {
var p0 = pts[Math.max(0, i - 1)];
var p1 = pts[i];
var p2 = pts[i + 1];
var p3 = pts[Math.min(pts.length - 1, i + 2)];
var c1x = p1.x + (p2.x - p0.x) / 6;
var c1y = p1.y + (p2.y - p0.y) / 6;
var c2x = p2.x - (p3.x - p1.x) / 6;
var c2y = p2.y - (p3.y - p1.y) / 6;
d += ' C' + c1x + ',' + c1y + ' ' + c2x + ',' + c2y + ' ' + p2.x + ',' + p2.y;
}
return d;
}
function renderChart(hours, temps) {
if (!temps.length) {
chartEl.innerHTML = '';
scaleEl.textContent = 'Hourly temperatures unavailable';
scaleEl.style.display = 'block';
scaleEl.style.color = 'var(--muted)';
scaleEl.style.fontSize = '13px';
scaleEl.style.letterSpacing = '0.04em';
scaleEl.style.padding = '18px 0 8px';
return;
}
var w = 1168, h = 132, padT = 16, padB = 10, padX = 10;
var tMin = Math.min.apply(null, temps);
var tMax = Math.max.apply(null, temps);
var span = Math.max(tMax - tMin, 1);
function x(i) { return padX + (temps.length === 1 ? (w - padX * 2) / 2 : i / (temps.length - 1) * (w - padX * 2)); }
function y(t) { return padT + (1 - (t - tMin) / span) * (h - padT - padB); }
var pts = temps.map(function (t, i) { return { x: +x(i).toFixed(2), y: +y(t).toFixed(2) }; });
var line = smoothPath(pts);
var last = pts[pts.length - 1];
var first = pts[0];
var area = line + ' L' + last.x + ',' + (h - 2) + ' L' + first.x + ',' + (h - 2) + ' Z';
var minI = temps.indexOf(tMin);
var maxI = temps.indexOf(tMax);
var nowH = date === todayUTC() ? new Date().getUTCHours() : -1;
var dots = '';
for (var i = 0; i < pts.length; i++) {
if (i % 3 !== 0 && i !== minI && i !== maxI && i !== nowH) continue;
var r = (i === minI || i === maxI) ? 3.2 : 2.2;
dots += '<circle cx="' + pts[i].x + '" cy="' + pts[i].y + '" r="' + r + '" fill="var(--accent)"/>';
}
var nowMark = '';
if (nowH >= 0 && nowH < pts.length) {
nowMark = '<line x1="' + pts[nowH].x + '" y1="8" x2="' + pts[nowH].x + '" y2="' + (h - 2) + '" stroke="var(--accent)" stroke-opacity="0.28" stroke-dasharray="2 4"/>';
}
var aria = 'Hourly temperatures from ' + Math.round(tMin) + ' to ' + Math.round(tMax) + ' degrees Celsius';
chartEl.innerHTML = '<svg viewBox="0 0 ' + w + ' ' + h + '" preserveAspectRatio="none" role="img" aria-label="' + aria + '">' +
'<defs><linearGradient id="cf" x1="0" y1="0" x2="0" y2="1">' +
'<stop offset="0%" stop-color="var(--chart)" stop-opacity="0.32"/>' +
'<stop offset="100%" stop-color="var(--chart)" stop-opacity="0"/>' +
'</linearGradient></defs>' +
'<path d="' + area + '" fill="url(#cf)"/>' +
nowMark +
'<path d="' + line + '" fill="none" stroke="var(--chart)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>' +
dots + '</svg>';
var frag = document.createDocumentFragment();
for (var j = 0; j < temps.length; j++) {
var cell = document.createElement('div');
cell.className = 'hour-cell';
if (j === minI || j === maxI) cell.classList.add('is-extreme');
if (j === nowH) cell.classList.add('is-now');
var ht = document.createElement('span');
ht.className = 'ht';
ht.textContent = Math.round(temps[j]) + '°';
var hh = document.createElement('span');
hh.className = 'hh';
hh.textContent = hours[j];
cell.appendChild(ht);
cell.appendChild(hh);
frag.appendChild(cell);
}
scaleEl.innerHTML = '';
scaleEl.appendChild(frag);
}
var q = new URLSearchParams();
q.set('latitude', String(latN));
q.set('longitude', String(lonN));
q.set('daily', 'temperature_2m_max,temperature_2m_min,weather_code');
q.set('hourly', 'temperature_2m');
q.set('timezone', 'UTC');
q.set('temperature_unit', 'celsius');
q.set('start_date', date);
q.set('end_date', date);
var endpoint = date < todayUTC() ? '/api/om/archive' : '/api/om/forecast';
fetch(endpoint + '?' + q.toString())
.then(function (res) {
if (!res.ok) throw new Error('http');
return res.json();
})
.then(function (data) {
if (!data || data.error) throw new Error('api');
var daily = data.daily || {};
var tmax = daily.temperature_2m_max && daily.temperature_2m_max[0];
var tmin = daily.temperature_2m_min && daily.temperature_2m_min[0];
var code = daily.weather_code && daily.weather_code[0];
if (tmax == null || tmin == null || !isFinite(Number(tmax)) || !isFinite(Number(tmin))) throw new Error('nodata');
var info = weatherInfo(code);
document.body.dataset.theme = info.theme;
condEl.textContent = info.label;
iconEl.innerHTML = ICONS[info.icon] || ICONS.cloud;
tmaxEl.innerHTML = Math.round(Number(tmax)) + '<span class="deg">°</span>';
tminEl.innerHTML = Math.round(Number(tmin)) + '<span class="deg">°</span>';
var hours = [];
var temps = [];
var hourly = data.hourly || {};
var times = hourly.time || [];
var series = hourly.temperature_2m || [];
for (var i = 0; i < times.length; i++) {
if (String(times[i]).indexOf(date) === 0 && series[i] != null && isFinite(Number(series[i]))) {
hours.push(String(times[i]).slice(11, 13));
temps.push(Number(series[i]));
}
}
renderChart(hours, temps);
document.body.classList.remove('is-loading');
document.body.classList.add('is-ready');
})
.catch(function () { fail(); });
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 25,305 | html / css / js | 2,373 / 10,950 / 11,982 |
|---|---|---|---|
| dom nodes | 55 | dom depth | 8 |
| css rules | 78 | js present | yes |
| brightness | 28.0 | contrast | 13.0 |
| colorfulness | 15.1 | whitespace | 95.5% |
This slot's telemetry
| prompt tokens | 527 | completion tokens | 9,396 |
|---|---|---|---|
| total tokens | 9,923 | wall | 319 s |
| cost | — | request id | — |
config.json556 B
{
"N": 4,
"auth": {
"credential_ref": "WCB_XAI_OFFICIAL_KEY",
"method": "api-key"
},
"billing": "metered",
"config_id": "grok-4.6-eff-xhigh--api--official--dev",
"effort": "xhigh",
"family": "grok",
"m": {
"min": 4,
"q": 4
},
"model_id": "grok-4.6",
"protocol": "api",
"served_model": "grok-4.6",
"telemetry": {
"completion_tokens": 69418,
"cost_usd": null,
"prompt_tokens": 4184,
"total_tokens": 73602,
"wall_ms": 2028603
},
"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-xhigh--api--official--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-08-12T18:07:22.443245+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T18:02:03.428958+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-12T18:09:44.926499+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T18:07:26.976163+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-12T18:13:10.574440+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T18:09:48.077108+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-12T18:18:26.616922+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T18:13:13.676040+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-12T18:21:28.544801+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T18:18:30.282265+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-12T18:27:47.601853+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T18:21:31.618450+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-12T18:33:03.083486+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T18:27:52.047872+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-12T18:36:18.654510+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T18:33:07.766055+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
}
}
}