gpt-5.4 @ low · api
apilow
- config
- gpt-5.4-eff-low--api--official--dev
- batch
- 2026-07-19--unified
- transport
- openai-official-api
- protocol
- api · metered
- served model
- gpt-5.4-2026-03-05
- 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
gpt-5.4 @none · api0.70gpt-5.6-sol @xhigh · codex-oauth0.69gpt-5.4 @medium · codex-oauth0.67gpt-5.4-mini @medium · codex-oauth0.67qwen3.8-max-preview · qoder0.67farthest
minimax-m2.5 · kiro0.41claude-opus-4-6 @high · kiro0.41gpt-5.5 @low · codex-oauth0.42minimax-m2.7 · go0.44grok-4.3 @medium · api0.44within 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 tempambiguousno-remaining-candidate
- min tempmismatchshown: 25
- 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, initial-scale=1.0" />
<title>Weather Card</title>
<style>
:root{
--bg1:#07111f;
--bg2:#0d1b2e;
--glass:rgba(255,255,255,0.08);
--glass-strong:rgba(255,255,255,0.12);
--text:#f3f7ff;
--muted:rgba(243,247,255,0.68);
--line:rgba(255,255,255,0.10);
--shadow:0 24px 80px rgba(0,0,0,0.45);
--accent:#8fc9ff;
--accent2:#ffd07a;
--good:#9de7b2;
--danger:#ff9aa2;
}
* { box-sizing: border-box; }
html, body {
width: 1280px;
height: 800px;
margin: 0;
overflow: hidden;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
color: var(--text);
background:
radial-gradient(900px 500px at 15% 15%, rgba(84,130,255,0.26), transparent 60%),
radial-gradient(700px 500px at 85% 20%, rgba(123,232,255,0.16), transparent 60%),
radial-gradient(900px 600px at 50% 110%, rgba(255,193,84,0.10), transparent 60%),
linear-gradient(160deg, var(--bg1), var(--bg2));
}
body::before,
body::after {
content:"";
position: fixed;
inset: 0;
pointer-events: none;
}
body::before{
background:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(circle at center, black 35%, transparent 90%);
opacity: .35;
}
body::after{
background:
radial-gradient(circle at 20% 30%, rgba(255,255,255,0.10) 0 2px, transparent 3px),
radial-gradient(circle at 78% 18%, rgba(255,255,255,0.08) 0 1.5px, transparent 2.5px),
radial-gradient(circle at 68% 72%, rgba(255,255,255,0.05) 0 2px, transparent 3px),
radial-gradient(circle at 32% 80%, rgba(255,255,255,0.04) 0 1.5px, transparent 2.5px);
opacity: .7;
}
.frame {
width: 1280px;
height: 800px;
padding: 34px;
display: flex;
align-items: stretch;
justify-content: center;
}
.card {
width: 100%;
height: 100%;
border-radius: 34px;
border: 1px solid rgba(255,255,255,0.10);
background:
linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.05)),
rgba(10,18,32,0.46);
backdrop-filter: blur(18px) saturate(140%);
box-shadow: var(--shadow);
overflow: hidden;
position: relative;
display: grid;
grid-template-columns: 520px 1fr;
}
.glow {
position: absolute;
width: 520px;
height: 520px;
border-radius: 50%;
filter: blur(40px);
opacity: .22;
pointer-events: none;
}
.glow.g1{ top:-140px; left:-120px; background: radial-gradient(circle, #64a8ff, transparent 65%); }
.glow.g2{ bottom:-180px; right:-140px; background: radial-gradient(circle, #ffca66, transparent 65%); }
.left, .right {
position: relative;
z-index: 1;
}
.left {
padding: 36px 34px 30px 34px;
border-right: 1px solid var(--line);
display: flex;
flex-direction: column;
justify-content: space-between;
background:
linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 9px 14px;
border-radius: 999px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
color: var(--muted);
font-size: 14px;
letter-spacing: 0.03em;
width: fit-content;
}
.dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: linear-gradient(180deg, #8fe0ff, #74a8ff);
box-shadow: 0 0 14px rgba(116,168,255,.8);
}
.location {
margin: 20px 0 8px;
font-size: 44px;
font-weight: 700;
line-height: 1.04;
letter-spacing: -0.03em;
}
.date {
color: var(--muted);
font-size: 18px;
letter-spacing: .01em;
}
.hero {
margin-top: 26px;
display: flex;
align-items: flex-start;
gap: 18px;
}
.iconWrap {
width: 110px;
height: 110px;
border-radius: 28px;
display: grid;
place-items: center;
background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05));
border: 1px solid rgba(255,255,255,0.10);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
flex: 0 0 auto;
}
.icon {
font-size: 58px;
line-height: 1;
filter: drop-shadow(0 8px 18px rgba(0,0,0,0.25));
}
.temps {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.maxTemp {
font-size: 80px;
line-height: .92;
font-weight: 750;
letter-spacing: -0.05em;
white-space: nowrap;
}
.minline {
display: flex;
align-items: center;
gap: 10px;
color: var(--muted);
font-size: 22px;
}
.condition {
margin-top: 18px;
font-size: 24px;
font-weight: 600;
letter-spacing: -0.02em;
}
.subCondition {
margin-top: 6px;
color: var(--muted);
font-size: 15px;
}
.stats {
margin-top: 28px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.stat {
border-radius: 20px;
padding: 16px 18px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
}
.statLabel {
color: var(--muted);
font-size: 13px;
text-transform: uppercase;
letter-spacing: .09em;
}
.statValue {
margin-top: 8px;
font-size: 28px;
font-weight: 700;
letter-spacing: -0.03em;
}
.footerNote {
margin-top: auto;
padding-top: 20px;
color: rgba(243,247,255,0.45);
font-size: 13px;
letter-spacing: .02em;
}
.right {
padding: 30px 28px 24px 28px;
display: flex;
flex-direction: column;
}
.rightHeader {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.rightTitle {
font-size: 20px;
font-weight: 650;
letter-spacing: -0.02em;
}
.rightMeta {
color: var(--muted);
font-size: 14px;
}
.chartCard {
flex: 1;
min-height: 0;
border-radius: 26px;
border: 1px solid rgba(255,255,255,0.10);
background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
.chartCard::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(to top, rgba(255,255,255,0.06) 1px, transparent 1px) 0 0 / 100% 25%,
linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / calc(100% / 24) 100%;
opacity: .45;
pointer-events: none;
}
.chartWrap {
position: relative;
flex: 1;
min-height: 0;
padding: 24px 18px 12px 18px;
}
svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
.axisLabels {
padding: 0 18px 14px 18px;
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 0;
color: rgba(243,247,255,0.58);
font-size: 12px;
letter-spacing: .04em;
text-transform: uppercase;
}
.hoursGrid {
margin-top: 16px;
display: grid;
grid-template-columns: repeat(6, minmax(0,1fr));
gap: 12px;
}
.hourChip {
border-radius: 18px;
padding: 12px 14px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.hourTime {
color: var(--muted);
font-size: 13px;
letter-spacing: .04em;
}
.hourTemp {
font-size: 20px;
font-weight: 700;
letter-spacing: -0.03em;
white-space: nowrap;
}
.centerState {
position: absolute;
inset: 0;
display: grid;
place-items: center;
text-align: center;
padding: 40px;
background: linear-gradient(180deg, rgba(7,17,31,0.35), rgba(7,17,31,0.55));
}
.stateBox {
max-width: 620px;
padding: 28px 30px;
border-radius: 26px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
box-shadow: var(--shadow);
}
.stateIcon {
font-size: 44px;
margin-bottom: 10px;
}
.stateTitle {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.03em;
}
.stateText {
margin-top: 8px;
color: var(--muted);
font-size: 16px;
line-height: 1.45;
}
.hidden { display:none !important; }
.small {
font-size: 14px;
color: var(--muted);
}
</style>
</head>
<body>
<div class="frame">
<div class="card">
<div class="glow g1"></div>
<div class="glow g2"></div>
<section class="left">
<div>
<div class="eyebrow">
<span class="dot"></span>
<span id="eyebrowText">Weather Overview</span>
</div>
<div class="location" id="locationName">Berlin</div>
<div class="date" id="dateText">—</div>
<div class="hero">
<div class="iconWrap"><div class="icon" id="weatherIcon">⛅</div></div>
<div class="temps">
<div class="maxTemp" id="maxTemp">—°C</div>
<div class="minline">
<span>Min</span>
<strong id="minTemp" style="color:var(--text); font-weight:700;">—°C</strong>
</div>
<div class="condition" id="conditionText">Loading…</div>
<div class="subCondition" id="conditionDetail">Daily maximum and minimum temperatures in Celsius.</div>
</div>
</div>
<div class="stats">
<div class="stat">
<div class="statLabel">Latitude</div>
<div class="statValue" id="latText">—</div>
</div>
<div class="stat">
<div class="statLabel">Longitude</div>
<div class="statValue" id="lonText">—</div>
</div>
</div>
</div>
<div class="footerNote" id="footerNote">
Source: same-origin Open-Meteo compatible API
</div>
</section>
<section class="right">
<div class="rightHeader">
<div class="rightTitle">Hourly Temperatures</div>
<div class="rightMeta" id="hourlyMeta">24 hours • UTC</div>
</div>
<div class="chartCard">
<div class="chartWrap">
<svg id="tempChart" viewBox="0 0 700 300" preserveAspectRatio="none" aria-label="Hourly temperature chart">
<defs>
<linearGradient id="areaGradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="rgba(143,201,255,0.55)"></stop>
<stop offset="100%" stop-color="rgba(143,201,255,0.02)"></stop>
</linearGradient>
<linearGradient id="lineGradient" x1="0" x2="1" y1="0" y2="0">
<stop offset="0%" stop-color="#8fc9ff"></stop>
<stop offset="100%" stop-color="#ffd07a"></stop>
</linearGradient>
<filter id="softGlow">
<feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
<feMerge>
<feMergeNode in="blur"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<path id="areaPath" fill="url(#areaGradient)" opacity="0.9"></path>
<path id="linePath" fill="none" stroke="url(#lineGradient)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" filter="url(#softGlow)"></path>
<g id="pointGroup"></g>
<g id="labelGroup"></g>
</svg>
</div>
<div class="axisLabels" id="axisLabels"></div>
</div>
<div class="hoursGrid" id="hoursGrid"></div>
</section>
<div class="centerState" id="loadingState">
<div class="stateBox">
<div class="stateIcon">☁️</div>
<div class="stateTitle">Loading weather data</div>
<div class="stateText">Fetching temperatures and conditions for the selected date.</div>
</div>
</div>
<div class="centerState hidden" id="errorState">
<div class="stateBox">
<div class="stateIcon">⚠️</div>
<div class="stateTitle">Weather data could not be loaded</div>
<div class="stateText" id="errorText">Please try again later.</div>
</div>
</div>
</div>
</div>
<script>
(function () {
const params = new URLSearchParams(window.location.search);
const todayUTC = new Date().toISOString().slice(0, 10);
const lat = parseFloat(params.get('lat') || '52.52');
const lon = parseFloat(params.get('lon') || '13.405');
const name = (params.get('name') || 'Berlin').trim() || 'Berlin';
const dateStr = (params.get('date') || todayUTC).trim() || todayUTC;
const els = {
locationName: document.getElementById('locationName'),
dateText: document.getElementById('dateText'),
maxTemp: document.getElementById('maxTemp'),
minTemp: document.getElementById('minTemp'),
conditionText: document.getElementById('conditionText'),
conditionDetail: document.getElementById('conditionDetail'),
weatherIcon: document.getElementById('weatherIcon'),
latText: document.getElementById('latText'),
lonText: document.getElementById('lonText'),
footerNote: document.getElementById('footerNote'),
hourlyMeta: document.getElementById('hourlyMeta'),
axisLabels: document.getElementById('axisLabels'),
hoursGrid: document.getElementById('hoursGrid'),
areaPath: document.getElementById('areaPath'),
linePath: document.getElementById('linePath'),
pointGroup: document.getElementById('pointGroup'),
labelGroup: document.getElementById('labelGroup'),
loadingState: document.getElementById('loadingState'),
errorState: document.getElementById('errorState'),
errorText: document.getElementById('errorText'),
eyebrowText: document.getElementById('eyebrowText')
};
els.locationName.textContent = name;
els.dateText.textContent = formatLongDateUTC(dateStr);
els.latText.textContent = isFinite(lat) ? lat.toFixed(3) + '°' : '—';
els.lonText.textContent = isFinite(lon) ? lon.toFixed(3) + '°' : '—';
els.eyebrowText.textContent = 'Weather Card';
if (!isFinite(lat) || !isFinite(lon) || !/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) {
showError('Invalid query parameters. Expected lat, lon, name, and date=YYYY-MM-DD.');
return;
}
const endpoint = dateStr < todayUTC ? '/api/om/archive' : '/api/om/forecast';
const url = new URL(endpoint, window.location.origin);
url.searchParams.set('latitude', String(lat));
url.searchParams.set('longitude', String(lon));
url.searchParams.set('daily', 'temperature_2m_max,temperature_2m_min,weather_code');
url.searchParams.set('hourly', 'temperature_2m');
url.searchParams.set('timezone', 'UTC');
url.searchParams.set('temperature_unit', 'celsius');
url.searchParams.set('start_date', dateStr);
url.searchParams.set('end_date', dateStr);
fetch(url.toString(), { headers: { 'Accept': 'application/json' } })
.then(async (res) => {
if (!res.ok) throw new Error('HTTP ' + res.status);
return res.json();
})
.then((data) => {
const parsed = normalizeData(data, dateStr);
if (!parsed) throw new Error('Incomplete weather payload.');
render(parsed);
})
.catch((err) => {
showError(err && err.message ? err.message : 'Unknown error');
});
function normalizeData(data, requestedDate) {
const daily = data && data.daily;
const hourly = data && data.hourly;
if (!daily || !hourly) return null;
const times = Array.isArray(hourly.time) ? hourly.time : [];
const temps = Array.isArray(hourly.temperature_2m) ? hourly.temperature_2m : [];
const dailyTimes = Array.isArray(daily.time) ? daily.time : [];
const idx = dailyTimes.indexOf(requestedDate);
const dailyIdx = idx >= 0 ? idx : 0;
const max = daily.temperature_2m_max && daily.temperature_2m_max[dailyIdx];
const min = daily.temperature_2m_min && daily.temperature_2m_min[dailyIdx];
const code = daily.weather_code && daily.weather_code[dailyIdx];
if (max == null || min == null || code == null) return null;
const hourlyItems = [];
for (let i = 0; i < times.length; i++) {
const t = times[i];
const v = temps[i];
if (typeof t === 'string' && t.slice(0, 10) === requestedDate && v != null) {
hourlyItems.push({
time: t,
hour: parseHour(t),
temp: Number(v)
});
}
}
return {
max: Number(max),
min: Number(min),
code: Number(code),
hourly: hourlyItems
};
}
function render(parsed) {
const w = weatherInfo(parsed.code);
els.maxTemp.textContent = fmtTemp(parsed.max);
els.minTemp.textContent = fmtTemp(parsed.min);
els.conditionText.textContent = w.label;
els.conditionDetail.textContent = w.description;
els.weatherIcon.textContent = w.icon;
els.hourlyMeta.textContent = parsed.hourly.length + ' hours • UTC';
els.footerNote.textContent = 'Source: ' + (dateStr < todayUTC ? '/api/om/archive' : '/api/om/forecast') + ' • UTC';
renderAxisLabels();
renderChart(parsed.hourly);
renderHourChips(parsed.hourly);
els.loadingState.classList.add('hidden');
}
function renderAxisLabels() {
const labels = ['00', '03', '06', '09', '12', '15', '18', '21'];
els.axisLabels.innerHTML = labels.map(t => '<div>' + t + ':00</div>').join('');
}
function renderHourChips(hourly) {
const display = hourly.slice(0, 24);
if (!display.length) {
els.hoursGrid.innerHTML = '<div class="small">No hourly temperatures available for this date.</div>';
return;
}
els.hoursGrid.innerHTML = display.map(h => {
const time = String(h.hour).padStart(2, '0') + ':00';
return '<div class="hourChip"><div class="hourTime">' + escapeHtml(time) + '</div><div class="hourTemp">' + escapeHtml(fmtTemp(h.temp)) + '</div></div>';
}).join('');
}
function renderChart(hourly) {
const svgW = 700, svgH = 300;
const padX = 18, padTop = 16, padBottom = 34;
const n = Math.max(hourly.length, 2);
if (!hourly.length) {
els.linePath.setAttribute('d', '');
els.areaPath.setAttribute('d', '');
els.pointGroup.innerHTML = '';
els.labelGroup.innerHTML = '';
return;
}
const values = hourly.map(h => h.temp);
let min = Math.min.apply(null, values);
let max = Math.max.apply(null, values);
if (min === max) {
min -= 1;
max += 1;
}
const range = max - min;
const xStep = (svgW - padX * 2) / (n - 1);
const points = hourly.map((h, i) => {
const x = padX + i * xStep;
const y = padTop + ((max - h.temp) / range) * (svgH - padTop - padBottom);
return { x, y, value: h.temp, hour: h.hour };
});
const lineD = smoothPath(points);
const areaD = lineD + ' L ' + points[points.length - 1].x + ' ' + (svgH - padBottom + 4) + ' L ' + points[0].x + ' ' + (svgH - padBottom + 4) + ' Z';
els.linePath.setAttribute('d', lineD);
els.areaPath.setAttribute('d', areaD);
const markHours = new Set([0, 3, 6, 9, 12, 15, 18, 21]);
els.pointGroup.innerHTML = points.map(p => {
const strong = markHours.has(p.hour);
const r = strong ? 4.4 : 3;
const fill = strong ? '#ffd07a' : '#8fc9ff';
const opacity = strong ? '1' : '0.75';
return '<circle cx="' + p.x.toFixed(2) + '" cy="' + p.y.toFixed(2) + '" r="' + r + '" fill="' + fill + '" opacity="' + opacity + '" />';
}).join('');
els.labelGroup.innerHTML = points
.filter(p => markHours.has(p.hour))
.map(p => {
const ty = Math.max(14, p.y - 12);
return '<text x="' + p.x.toFixed(2) + '" y="' + ty.toFixed(2) + '" text-anchor="middle" fill="rgba(243,247,255,0.88)" font-size="13" font-weight="700">' + escapeHtml(Math.round(p.value) + '°') + '</text>';
}).join('');
}
function smoothPath(points) {
if (points.length < 2) return '';
let d = 'M ' + points[0].x.toFixed(2) + ' ' + points[0].y.toFixed(2);
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 cp1x = p1.x + (p2.x - p0.x) / 6;
const cp1y = p1.y + (p2.y - p0.y) / 6;
const cp2x = p2.x - (p3.x - p1.x) / 6;
const cp2y = p2.y - (p3.y - p1.y) / 6;
d += ' C ' + cp1x.toFixed(2) + ' ' + cp1y.toFixed(2) + ', ' + cp2x.toFixed(2) + ' ' + cp2y.toFixed(2) + ', ' + p2.x.toFixed(2) + ' ' + p2.y.toFixed(2);
}
return d;
}
function weatherInfo(code) {
const map = {
0: { label: 'Clear sky', icon: '☀️', description: 'Bright and clear conditions.' },
1: { label: 'Mainly clear', icon: '🌤️', description: 'Mostly sunny with minimal cloud cover.' },
2: { label: 'Partly cloudy', icon: '⛅', description: 'A mix of sun and clouds.' },
3: { label: 'Overcast', icon: '☁️', description: 'Cloudy skies throughout the day.' },
45: { label: 'Fog', icon: '🌫️', description: 'Foggy conditions and reduced visibility.' },
48: { label: 'Depositing rime fog', icon: '🌫️', description: 'Fog with freezing deposits possible.' },
51: { label: 'Light drizzle', icon: '🌦️', description: 'Intermittent light drizzle.' },
53: { label: 'Moderate drizzle', icon: '🌦️', description: 'Steady drizzle during the day.' },
55: { label: 'Dense drizzle', icon: '🌧️', description: 'Persistent and heavier drizzle.' },
56: { label: 'Light freezing drizzle', icon: '🌧️', description: 'Light freezing drizzle possible.' },
57: { label: 'Dense freezing drizzle', icon: '🌧️', description: 'Heavier freezing drizzle likely.' },
61: { label: 'Slight rain', icon: '🌦️', description: 'Light rainfall at times.' },
63: { label: 'Moderate rain', icon: '🌧️', description: 'Consistent moderate rainfall.' },
65: { label: 'Heavy rain', icon: '🌧️', description: 'Intense rain expected.' },
66: { label: 'Light freezing rain', icon: '🌧️', description: 'Light rain with freezing risk.' },
67: { label: 'Heavy freezing rain', icon: '🌧️', description: 'Heavy rain with freezing risk.' },
71: { label: 'Slight snow fall', icon: '🌨️', description: 'Light snowfall possible.' },
73: { label: 'Moderate snow fall', icon: '❄️', description: 'Steady snowfall through parts of the day.' },
75: { label: 'Heavy snow fall', icon: '❄️', description: 'Heavy snowfall expected.' },
77: { label: 'Snow grains', icon: '🌨️', description: 'Snow grains may occur.' },
80: { label: 'Slight rain showers', icon: '🌦️', description: 'Passing light rain showers.' },
81: { label: 'Moderate rain showers', icon: '🌧️', description: 'Frequent rain showers.' },
82: { label: 'Violent rain showers', icon: '⛈️', description: 'Strong and intense showers likely.' },
85: { label: 'Slight snow showers', icon: '🌨️', description: 'Passing light snow showers.' },
86: { label: 'Heavy snow showers', icon: '❄️', description: 'Stronger snow showers likely.' },
95: { label: 'Thunderstorm', icon: '⛈️', description: 'Thunderstorm conditions possible.' },
96: { label: 'Thunderstorm with slight hail', icon: '⛈️', description: 'Thunderstorms may include hail.' },
99: { label: 'Thunderstorm with heavy hail', icon: '⛈️', description: 'Severe thunderstorm with hail risk.' }
};
return map[code] || { label: 'Unknown conditions', icon: '🌍', description: 'Weather code not recognized.' };
}
function fmtTemp(v) {
return Math.round(v) + '°C';
}
function parseHour(iso) {
const m = iso.match(/T(\d{2}):/);
return m ? parseInt(m[1], 10) : 0;
}
function formatLongDateUTC(dateStr) {
const d = new Date(dateStr + 'T00:00:00Z');
return new Intl.DateTimeFormat('en-US', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
timeZone: 'UTC'
}).format(d);
}
function showError(message) {
els.loadingState.classList.add('hidden');
els.errorState.classList.remove('hidden');
els.errorText.textContent = 'Weather data could not be loaded. ' + message;
els.conditionText.textContent = 'Unavailable';
els.conditionDetail.textContent = 'Unable to retrieve conditions for this date.';
els.maxTemp.textContent = '—°C';
els.minTemp.textContent = '—°C';
els.weatherIcon.textContent = '⚠️';
els.hoursGrid.innerHTML = '';
els.axisLabels.innerHTML = '';
}
function escapeHtml(s) {
return String(s)
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
}
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 26,959 | html / css / js | 4,247 / 9,085 / 13,627 |
|---|---|---|---|
| dom nodes | 72 | dom depth | 12 |
| css rules | 50 | js present | yes |
| brightness | 53.9 | contrast | 28.7 |
| colorfulness | 19.7 | whitespace | 44.2% |
This slot's telemetry
| prompt tokens | 312 | completion tokens | 7,752 |
|---|---|---|---|
| total tokens | 8,064 | wall | 63.3 s |
| cost | — | request id | — |
config.json564 B
{
"N": 4,
"auth": {
"credential_ref": "WCB_OPENAI_OFFICIAL_KEY",
"method": "api-key"
},
"billing": "metered",
"config_id": "gpt-5.4-eff-low--api--official--dev",
"effort": "low",
"family": "gpt",
"m": {
"min": 4,
"q": 4
},
"model_id": "gpt-5.4",
"protocol": "api",
"served_model": "gpt-5.4-2026-03-05",
"telemetry": {
"completion_tokens": 42864,
"cost_usd": null,
"prompt_tokens": 2464,
"total_tokens": 45328,
"wall_ms": 392315
},
"transport": "openai-official-api",
"vendor_sanction_ref": null
}send-log4.6 KB
{
"N": 4,
"batch_id": "2026-07-18--official-gpt",
"config_id": "gpt-5.4-eff-low--api--official--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-07-17T16:57:19.223642+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T16:56:15.875150+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-17T16:57:54.952490+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T16:57:23.130828+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-17T16:58:41.626871+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T16:57:59.119171+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-17T16:59:29.741413+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T16:58:45.308817+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-17T17:00:05.963710+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T16:59:33.767747+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-17T17:01:22.668548+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T17:00:09.658951+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-17T17:02:30.155787+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T17:01:27.424910+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-17T17:03:16.793487+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T17:02:34.513826+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
}
}
}