gpt-5.4 @ none · api

apinone

config: gpt-5.4-eff-none--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

gpt-5.4 @none · api P-q slot 0 screenshot

The screenshot is the exact frozen pixels the similarity channels measured. Run live re-executes the raw output in a sandboxed iframe; its rendering depends on your browser and fonts and is not guaranteed to match the measured pixels.

similarity neighbors

nearest

gpt-5.4 @low · api0.70 gpt-5.4-mini @high · codex-oauth0.70 gpt-5.6-sol @xhigh · codex-oauth0.70 gpt-5.4 @xhigh · api0.69 gpt-5.4-mini @medium · codex-oauth0.69

farthest

gpt-5.6-luna @high · kiro0.39 gpt-5.5 @low · codex-oauth0.42 claude-haiku-4-5 @xhigh · CC0.42 gpt-5.6-luna @medium · codex-oauth0.44 gpt-5.6-luna @low · codex-oauth0.44

within session 2026-07-19--unified

similarity measures convergence within this session — not quality.

Fidelity — does the card show the right data?

namematch
conditionmatch
datematch
max tempmatchshown: 25
min tempmatchshown: 16
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, initial-scale=1.0" />
  <title>Weather Card</title>
  <style>
    :root {
      --bg1: #0b1220;
      --bg2: #111a2f;
      --card: rgba(255, 255, 255, 0.12);
      --card-strong: rgba(255, 255, 255, 0.18);
      --border: rgba(255, 255, 255, 0.18);
      --text: #eef4ff;
      --muted: rgba(238, 244, 255, 0.72);
      --soft: rgba(238, 244, 255, 0.52);
      --accent: #8cc8ff;
      --accent2: #b39dff;
      --warm: #ffb86b;
      --cool: #7dd3fc;
      --shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
      --radius: 28px;
    }

    * { 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(1200px 600px at 15% 10%, rgba(124, 92, 255, 0.22), transparent 60%),
        radial-gradient(900px 500px at 85% 15%, rgba(71, 191, 255, 0.22), transparent 55%),
        radial-gradient(600px 300px at 50% 100%, rgba(255, 173, 92, 0.10), transparent 60%),
        linear-gradient(135deg, var(--bg1), var(--bg2));
    }

    body {
      position: relative;
      display: grid;
      place-items: center;
    }

    .bg-orb, .bg-orb::before, .bg-orb::after {
      position: absolute;
      border-radius: 999px;
      filter: blur(30px);
      pointer-events: none;
    }

    .bg-orb {
      width: 360px;
      height: 360px;
      left: 120px;
      top: 120px;
      background: rgba(140, 200, 255, 0.08);
    }

    .bg-orb::before {
      content: "";
      width: 260px;
      height: 260px;
      right: -680px;
      top: -50px;
      background: rgba(179, 157, 255, 0.10);
      position: absolute;
    }

    .bg-orb::after {
      content: "";
      width: 300px;
      height: 300px;
      left: 780px;
      top: 360px;
      background: rgba(255, 184, 107, 0.08);
      position: absolute;
    }

    .frame {
      width: 1160px;
      height: 700px;
      padding: 28px;
      border-radius: 36px;
      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.08);
      backdrop-filter: blur(10px);
      position: relative;
      overflow: hidden;
    }

    .frame::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(120deg, rgba(255,255,255,0.06), transparent 28%),
        radial-gradient(600px 240px at 80% -10%, rgba(255,255,255,0.08), transparent 60%);
      pointer-events: none;
    }

    .card {
      position: relative;
      height: 100%;
      display: grid;
      grid-template-columns: 1.05fr 1.25fr;
      gap: 24px;
      z-index: 1;
    }

    .panel {
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.07));
      border: 1px solid var(--border);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
      overflow: hidden;
      position: relative;
    }

    .left {
      padding: 32px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background:
        radial-gradient(360px 220px at 80% 18%, rgba(255,255,255,0.08), transparent 60%),
        linear-gradient(180deg, rgba(145, 190, 255, 0.12), rgba(255,255,255,0.04));
    }

    .location-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
    }

    .eyebrow {
      font-size: 13px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--soft);
      margin-bottom: 10px;
    }

    .location {
      font-size: 42px;
      line-height: 1.05;
      font-weight: 700;
      letter-spacing: -0.03em;
      max-width: 420px;
      text-wrap: balance;
    }

    .date {
      margin-top: 12px;
      font-size: 18px;
      color: var(--muted);
      font-weight: 500;
    }

    .icon-wrap {
      width: 132px;
      height: 132px;
      border-radius: 28px;
      background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.08));
      border: 1px solid rgba(255,255,255,0.14);
      display: grid;
      place-items: center;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
      flex: 0 0 auto;
    }

    .condition {
      margin-top: 22px;
      font-size: 22px;
      color: var(--text);
      font-weight: 600;
    }

    .temps {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-top: 26px;
    }

    .temp-box {
      padding: 18px 18px 16px;
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.06));
      border: 1px solid rgba(255,255,255,0.12);
    }

    .temp-label {
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: var(--soft);
      margin-bottom: 8px;
    }

    .temp-value {
      font-size: 40px;
      line-height: 1;
      font-weight: 750;
      letter-spacing: -0.04em;
    }

    .temp-value.max { color: #ffd19a; }
    .temp-value.min { color: #9edfff; }

    .summary-band {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 18px;
      padding: 14px 16px;
      border-radius: 20px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.10);
      color: var(--muted);
      font-size: 15px;
    }

    .right {
      padding: 24px 24px 18px;
      display: flex;
      flex-direction: column;
      background:
        radial-gradient(420px 240px at 20% 0%, rgba(124, 211, 252, 0.10), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.05));
    }

    .hourly-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 18px;
      padding: 4px 4px 0;
    }

    .hourly-title {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.02em;
    }

    .hourly-sub {
      font-size: 14px;
      color: var(--muted);
    }

    .hourly-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 12px;
      flex: 1;
      align-content: start;
    }

    .hour {
      min-height: 92px;
      border-radius: 20px;
      padding: 14px 12px;
      background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));
      border: 1px solid rgba(255,255,255,0.10);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    }

    .hour-time {
      font-size: 13px;
      color: var(--soft);
      letter-spacing: 0.04em;
    }

    .hour-temp {
      font-size: 25px;
      line-height: 1;
      font-weight: 700;
      letter-spacing: -0.03em;
    }

    .footer-note {
      margin-top: 16px;
      padding: 0 4px;
      font-size: 12px;
      color: rgba(238, 244, 255, 0.5);
    }

    .status {
      position: absolute;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 3;
      background: linear-gradient(180deg, rgba(10,16,30,0.52), rgba(10,16,30,0.68));
      backdrop-filter: blur(8px);
    }

    .status.show { display: flex; }

    .status-card {
      width: 500px;
      max-width: calc(100% - 80px);
      padding: 30px 28px;
      text-align: center;
      border-radius: 28px;
      background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.08));
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: var(--shadow);
    }

    .status-title {
      font-size: 28px;
      font-weight: 700;
      letter-spacing: -0.03em;
      margin-bottom: 10px;
    }

    .status-text {
      font-size: 16px;
      color: var(--muted);
      line-height: 1.5;
    }

    .spinner {
      width: 42px;
      height: 42px;
      margin: 0 auto 18px;
      border-radius: 999px;
      border: 3px solid rgba(255,255,255,0.18);
      border-top-color: rgba(255,255,255,0.85);
      animation: spin 1s linear infinite;
    }

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

    svg { display: block; }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      white-space: nowrap;
      border: 0;
    }
  </style>
</head>
<body>
  <div class="bg-orb"></div>

  <div class="frame">
    <div class="card" id="card">
      <section class="panel left">
        <div>
          <div class="location-row">
            <div>
              <div class="eyebrow">Weather Overview</div>
              <div class="location" id="locationName">Berlin</div>
              <div class="date" id="displayDate">—</div>
            </div>
            <div class="icon-wrap" id="iconWrap" aria-hidden="true"></div>
          </div>

          <div class="condition" id="conditionText">Loading weather…</div>

          <div class="temps">
            <div class="temp-box">
              <div class="temp-label">Maximum</div>
              <div class="temp-value max" id="maxTemp">—</div>
            </div>
            <div class="temp-box">
              <div class="temp-label">Minimum</div>
              <div class="temp-value min" id="minTemp">—</div>
            </div>
          </div>

          <div class="summary-band">
            <span>UTC day view</span>
            <span style="opacity:.45">•</span>
            <span id="coordText">52.52, 13.405</span>
          </div>
        </div>
      </section>

      <section class="panel right">
        <div class="hourly-head">
          <div class="hourly-title">Hourly temperatures</div>
          <div class="hourly-sub" id="hourCount">24 readings</div>
        </div>
        <div class="hourly-grid" id="hourlyGrid"></div>
        <div class="footer-note">Temperatures shown in °C for the selected UTC date.</div>
      </section>
    </div>

    <div class="status show" id="status">
      <div class="status-card">
        <div class="spinner" id="spinner"></div>
        <div class="status-title" id="statusTitle">Loading weather</div>
        <div class="status-text" id="statusText">Fetching conditions for the selected location and date.</div>
      </div>
    </div>
  </div>

  <script>
    const qs = new URLSearchParams(location.search);

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

    function validDateString(s) {
      return /^\d{4}-\d{2}-\d{2}$/.test(s || "");
    }

    const lat = Number.isFinite(parseFloat(qs.get("lat"))) ? parseFloat(qs.get("lat")) : 52.52;
    const lon = Number.isFinite(parseFloat(qs.get("lon"))) ? parseFloat(qs.get("lon")) : 13.405;
    const name = (qs.get("name") || "Berlin").trim() || "Berlin";
    const dateStr = validDateString(qs.get("date")) ? qs.get("date") : todayUTC();

    const requested = new Date(dateStr + "T00:00:00Z");
    const today = new Date(todayUTC() + "T00:00:00Z");
    const apiPath = requested < today ? "/api/om/archive" : "/api/om/forecast";

    const els = {
      locationName: document.getElementById("locationName"),
      displayDate: document.getElementById("displayDate"),
      conditionText: document.getElementById("conditionText"),
      maxTemp: document.getElementById("maxTemp"),
      minTemp: document.getElementById("minTemp"),
      coordText: document.getElementById("coordText"),
      hourlyGrid: document.getElementById("hourlyGrid"),
      hourCount: document.getElementById("hourCount"),
      iconWrap: document.getElementById("iconWrap"),
      status: document.getElementById("status"),
      statusTitle: document.getElementById("statusTitle"),
      statusText: document.getElementById("statusText"),
      spinner: document.getElementById("spinner")
    };

    els.locationName.textContent = name;
    els.coordText.textContent = lat.toFixed(3) + ", " + lon.toFixed(3);
    els.displayDate.textContent = formatDate(dateStr);

    function formatDate(iso) {
      const d = new Date(iso + "T00:00:00Z");
      return new Intl.DateTimeFormat("en", {
        weekday: "long",
        year: "numeric",
        month: "long",
        day: "numeric",
        timeZone: "UTC"
      }).format(d);
    }

    function setStatus(title, text, loading) {
      els.status.classList.add("show");
      els.statusTitle.textContent = title;
      els.statusText.textContent = text;
      els.spinner.style.display = loading ? "block" : "none";
    }

    function hideStatus() {
      els.status.classList.remove("show");
    }

    function c(v) {
      return Math.round(v) + "°C";
    }

    function weatherInfo(code) {
      const map = {
        0: ["Clear sky", "clear"],
        1: ["Mainly clear", "partly"],
        2: ["Partly cloudy", "partly"],
        3: ["Overcast", "cloudy"],
        45: ["Fog", "fog"],
        48: ["Depositing rime fog", "fog"],
        51: ["Light drizzle", "drizzle"],
        53: ["Moderate drizzle", "drizzle"],
        55: ["Dense drizzle", "drizzle"],
        56: ["Light freezing drizzle", "drizzle"],
        57: ["Dense freezing drizzle", "drizzle"],
        61: ["Slight rain", "rain"],
        63: ["Moderate rain", "rain"],
        65: ["Heavy rain", "rain"],
        66: ["Light freezing rain", "rain"],
        67: ["Heavy freezing rain", "rain"],
        71: ["Slight snow fall", "snow"],
        73: ["Moderate snow fall", "snow"],
        75: ["Heavy snow fall", "snow"],
        77: ["Snow grains", "snow"],
        80: ["Slight rain showers", "showers"],
        81: ["Moderate rain showers", "showers"],
        82: ["Violent rain showers", "showers"],
        85: ["Slight snow showers", "snow"],
        86: ["Heavy snow showers", "snow"],
        95: ["Thunderstorm", "storm"],
        96: ["Thunderstorm with slight hail", "storm"],
        99: ["Thunderstorm with heavy hail", "storm"]
      };
      return map[code] || ["Unknown conditions", "cloudy"];
    }

    function iconSVG(type) {
      const common = 'viewBox="0 0 120 120" width="88" height="88"';
      if (type === "clear") {
        return '<svg ' + common + ' aria-hidden="true"><defs><radialGradient id="g1" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="#fff1a8"/><stop offset="100%" stop-color="#ffbf5f"/></radialGradient></defs><circle cx="60" cy="60" r="24" fill="url(#g1)"/><g stroke="#ffd37b" stroke-width="5" stroke-linecap="round" opacity=".95"><line x1="60" y1="14" x2="60" y2="28"/><line x1="60" y1="92" x2="60" y2="106"/><line x1="14" y1="60" x2="28" y2="60"/><line x1="92" y1="60" x2="106" y2="60"/><line x1="27" y1="27" x2="37" y2="37"/><line x1="83" y1="83" x2="93" y2="93"/><line x1="27" y1="93" x2="37" y2="83"/><line x1="83" y1="37" x2="93" y2="27"/></g></svg>';
      }
      if (type === "partly") {
        return '<svg ' + common + ' aria-hidden="true"><defs><radialGradient id="g2" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="#fff1a8"/><stop offset="100%" stop-color="#ffbf5f"/></radialGradient></defs><circle cx="42" cy="42" r="18" fill="url(#g2)"/><g stroke="#ffd37b" stroke-width="4" stroke-linecap="round" opacity=".9"><line x1="42" y1="13" x2="42" y2="23"/><line x1="42" y1="61" x2="42" y2="71"/><line x1="13" y1="42" x2="23" y2="42"/><line x1="61" y1="42" x2="71" y2="42"/><line x1="22" y1="22" x2="29" y2="29"/><line x1="55" y1="55" x2="62" y2="62"/><line x1="22" y1="62" x2="29" y2="55"/><line x1="55" y1="29" x2="62" y2="22"/></g><g><ellipse cx="67" cy="71" rx="28" ry="18" fill="#eef5ff" opacity=".96"/><ellipse cx="52" cy="74" rx="18" ry="13" fill="#dfeaf7"/><ellipse cx="83" cy="75" rx="17" ry="12" fill="#dfeaf7"/></g></svg>';
      }
      if (type === "cloudy") {
        return '<svg ' + common + ' aria-hidden="true"><g><ellipse cx="62" cy="66" rx="30" ry="20" fill="#eef5ff" opacity=".97"/><ellipse cx="44" cy="71" rx="18" ry="14" fill="#dfeaf7"/><ellipse cx="84" cy="72" rx="19" ry="14" fill="#dfeaf7"/><ellipse cx="62" cy="76" rx="40" ry="16" fill="#cfdced" opacity=".9"/></g></svg>';
      }
      if (type === "fog") {
        return '<svg ' + common + ' aria-hidden="true"><g><ellipse cx="58" cy="48" rx="24" ry="16" fill="#eef5ff" opacity=".9"/><ellipse cx="74" cy="52" rx="18" ry="13" fill="#dfeaf7"/><ellipse cx="44" cy="54" rx="16" ry="12" fill="#dfeaf7"/></g><g stroke="#d8e5f5" stroke-width="5" stroke-linecap="round" opacity=".85"><line x1="24" y1="72" x2="96" y2="72"/><line x1="18" y1="84" x2="88" y2="84"/><line x1="30" y1="96" x2="102" y2="96"/></g></svg>';
      }
      if (type === "drizzle" || type === "rain" || type === "showers") {
        return '<svg ' + common + ' aria-hidden="true"><g><ellipse cx="60" cy="46" rx="28" ry="18" fill="#eef5ff" opacity=".96"/><ellipse cx="43" cy="51" rx="17" ry="13" fill="#dfeaf7"/><ellipse cx="80" cy="52" rx="18" ry="13" fill="#dfeaf7"/></g><g stroke="#7ccfff" stroke-width="5" stroke-linecap="round"><line x1="42" y1="70" x2="36" y2="86"/><line x1="60" y1="72" x2="54" y2="88"/><line x1="78" y1="70" x2="72" y2="86"/></g></svg>';
      }
      if (type === "snow") {
        return '<svg ' + common + ' aria-hidden="true"><g><ellipse cx="60" cy="44" rx="28" ry="18" fill="#eef5ff" opacity=".96"/><ellipse cx="43" cy="49" rx="17" ry="13" fill="#dfeaf7"/><ellipse cx="80" cy="50" rx="18" ry="13" fill="#dfeaf7"/></g><g stroke="#dff4ff" stroke-width="4" stroke-linecap="round"><line x1="42" y1="73" x2="42" y2="85"/><line x1="36" y1="79" x2="48" y2="79"/><line x1="38" y1="75" x2="46" y2="83"/><line x1="46" y1="75" x2="38" y2="83"/><line x1="60" y1="73" x2="60" y2="85"/><line x1="54" y1="79" x2="66" y2="79"/><line x1="56" y1="75" x2="64" y2="83"/><line x1="64" y1="75" x2="56" y2="83"/><line x1="78" y1="73" x2="78" y2="85"/><line x1="72" y1="79" x2="84" y2="79"/><line x1="74" y1="75" x2="82" y2="83"/><line x1="82" y1="75" x2="74" y2="83"/></g></svg>';
      }
      if (type === "storm") {
        return '<svg ' + common + ' aria-hidden="true"><g><ellipse cx="60" cy="42" rx="28" ry="18" fill="#eef5ff" opacity=".95"/><ellipse cx="43" cy="47" rx="17" ry="13" fill="#dfeaf7"/><ellipse cx="80" cy="48" rx="18" ry="13" fill="#dfeaf7"/></g><polygon points="58,60 48,82 61,82 54,104 76,74 63,74 72,60" fill="#ffd36d"/></svg>';
      }
      return '<svg ' + common + ' aria-hidden="true"><circle cx="60" cy="60" r="18" fill="#dfeaf7"/></svg>';
    }

    function buildHourly(times, temps) {
      els.hourlyGrid.innerHTML = "";
      const count = Math.min(times.length, temps.length);
      els.hourCount.textContent = count + " readings";
      for (let i = 0; i < count; i++) {
        const time = String(times[i]).slice(11, 16);
        const temp = Math.round(temps[i]);
        const cell = document.createElement("div");
        cell.className = "hour";
        cell.innerHTML = '<div class="hour-time">' + time + '</div><div class="hour-temp">' + temp + '°</div>';
        els.hourlyGrid.appendChild(cell);
      }
    }

    async function load() {
      setStatus("Loading weather", "Fetching conditions for the selected location and date.", true);

      const params = new URLSearchParams({
        latitude: String(lat),
        longitude: String(lon),
        daily: "temperature_2m_max,temperature_2m_min,weather_code",
        hourly: "temperature_2m",
        timezone: "UTC",
        temperature_unit: "celsius",
        start_date: dateStr,
        end_date: dateStr
      });

      try {
        const res = await fetch(apiPath + "?" + params.toString(), { credentials: "same-origin" });
        if (!res.ok) throw new Error("HTTP " + res.status);
        const data = await res.json();

        const daily = data && data.daily;
        const hourly = data && data.hourly;

        if (
          !daily ||
          !hourly ||
          !Array.isArray(daily.temperature_2m_max) ||
          !Array.isArray(daily.temperature_2m_min) ||
          !Array.isArray(daily.weather_code) ||
          !Array.isArray(hourly.time) ||
          !Array.isArray(hourly.temperature_2m) ||
          daily.temperature_2m_max.length < 1 ||
          daily.temperature_2m_min.length < 1 ||
          daily.weather_code.length < 1
        ) {
          throw new Error("Malformed weather data");
        }

        const max = daily.temperature_2m_max[0];
        const min = daily.temperature_2m_min[0];
        const code = daily.weather_code[0];
        const info = weatherInfo(code);

        els.maxTemp.textContent = c(max);
        els.minTemp.textContent = c(min);
        els.conditionText.textContent = info[0];
        els.iconWrap.innerHTML = iconSVG(info[1]);

        const hourTimes = [];
        const hourTemps = [];
        for (let i = 0; i < hourly.time.length; i++) {
          if (String(hourly.time[i]).slice(0, 10) === dateStr) {
            hourTimes.push(hourly.time[i]);
            hourTemps.push(hourly.temperature_2m[i]);
          }
        }

        if (!hourTimes.length) {
          throw new Error("No hourly data available for selected date");
        }

        buildHourly(hourTimes, hourTemps);
        hideStatus();
      } catch (err) {
        els.conditionText.textContent = "Weather data unavailable";
        els.maxTemp.textContent = "—";
        els.minTemp.textContent = "—";
        els.iconWrap.innerHTML = iconSVG("cloudy");
        els.hourlyGrid.innerHTML = "";
        els.hourCount.textContent = "0 readings";
        setStatus("Could not load weather", "The weather data for this location and date could not be loaded.", false);
      }
    }

    load();
  </script>
</body>
</html>

L1 — cheap deterministic descriptors

bytes total	21,815	html / css / js	2,145 / 8,451 / 11,219
dom nodes	42	dom depth	9
css rules	45	js present	yes
brightness	56.4	contrast	26.7
colorfulness	18.4	whitespace	37.9%

This slot's telemetry

prompt tokens	312	completion tokens	6,913
total tokens	7,225	wall	104 s
cost	—	request id	—

config.json566 B

{
  "N": 4,
  "auth": {
    "credential_ref": "WCB_OPENAI_OFFICIAL_KEY",
    "method": "api-key"
  },
  "billing": "metered",
  "config_id": "gpt-5.4-eff-none--api--official--dev",
  "effort": "none",
  "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": 39779,
    "cost_usd": null,
    "prompt_tokens": 2464,
    "total_tokens": 42243,
    "wall_ms": 403502
  },
  "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-none--api--official--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-17T17:14:30.989721+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T17:13:59.303481+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-17T17:16:18.854989+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T17:14:34.899634+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-17T17:17:04.860218+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T17:16:22.902787+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-17T17:18:02.150902+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T17:17:08.389279+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:19:09.058975+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T17:18:05.734621+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:19:44.544239+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T17:19:12.898704+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:20:32.506758+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T17:19:48.044587+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:21:09.097802+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T17:20:36.377732+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
    }
  }
}