gpt-5.2-codex @ high · api

apihigh

config: gpt-5.2-codex-eff-high--api--official--dev
batch: 2026-07-19--unified
transport: openai-official-api
protocol: api · metered
served model: gpt-5.2-codex
captured: Jul 18, 2026, 11:54 AM · N=4

variant

live

slot 0 · P-q · sandboxed iframe

gpt-5.2-codex @high · 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

claude-sonnet-5 @medium · CC0.63 gpt-5.6-sol @low · codex-oauth0.63 gpt-5.6-terra @low · kiro0.63 claude-opus-4-8 @low · kiro0.61 claude-sonnet-5 @low · CC0.61

farthest

gpt-5.6-luna @high · kiro0.44 gpt-5.6-luna @medium · codex-oauth0.45 gpt-5.5 @low · codex-oauth0.47 nemotron-3-ultra-free · api0.48 gpt-5.6-sol @max · kiro0.48

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.3
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, height=800, initial-scale=1.0">
<title>Weather Card</title>
<link rel="icon" href="data:,">
<style>
  :root { color-scheme: dark; }
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
    color: #f6f8fb;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  body[data-theme="clear"] { background: linear-gradient(135deg, #1a2a6c, #3352a5, #6dd5ed); }
  body[data-theme="cloudy"] { background: linear-gradient(135deg, #3a3f51, #5f6a7d, #8a9bb5); }
  body[data-theme="rain"] { background: linear-gradient(135deg, #0b1d2a, #203a43, #2c5364); }
  body[data-theme="snow"] { background: linear-gradient(135deg, #2c3e50, #4b79a1, #9ac8e0); }
  body[data-theme="storm"] { background: linear-gradient(135deg, #141e30, #243b55, #0f2027); }
  body[data-theme="fog"] { background: linear-gradient(135deg, #4d5c6b, #768493, #a3b0bc); }

  .container {
    width: 1080px;
    height: 620px;
    position: relative;
  }
  .card {
    width: 100%;
    height: 100%;
    padding: 36px 40px 30px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 30px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }
  .location {
    font-size: 38px;
    font-weight: 600;
    letter-spacing: 0.3px;
  }
  .date {
    font-size: 18px;
    opacity: 0.85;
  }
  .main {
    flex: 1;
    display: flex;
    gap: 28px;
  }
  .summary {
    width: 280px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 24px;
    padding: 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .condition {
    text-align: center;
  }
  .condition .icon {
    font-size: 72px;
    line-height: 1;
  }
  .condition .label {
    font-size: 20px;
    margin-top: 8px;
    font-weight: 500;
  }
  .temps {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .temp-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    padding: 12px 14px;
    border-radius: 14px;
  }
  .temp-row .value {
    font-size: 26px;
    font-weight: 600;
  }
  .temp-row .label {
    font-size: 14px;
    opacity: 0.85;
    letter-spacing: 0.2px;
  }
  .hourly {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 24px;
    padding: 24px;
    box-sizing: border-box;
  }
  .hourly-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .chart-container {
    flex: 1;
    position: relative;
  }
  #hourlyChart {
    width: 100%;
    height: 100%;
  }
  .hourly-list {
    margin-top: 16px;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
  }
  .hourly-item {
    flex: 0 0 auto;
    width: 64px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    padding: 8px 6px;
    text-align: center;
    font-size: 12px;
  }
  .hourly-item .temp {
    font-size: 16px;
    font-weight: 600;
    margin-top: 4px;
  }
  .footer {
    font-size: 12px;
    opacity: 0.6;
    text-align: right;
  }
  .loading, .error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: #fff;
  }
  .error {
    background: rgba(255, 99, 71, 0.2);
    padding: 18px 24px;
    border-radius: 12px;
    border: 1px solid rgba(255, 99, 71, 0.6);
  }
  .hidden {
    display: none;
  }
  .hourly-list::-webkit-scrollbar {
    height: 8px;
  }
  .hourly-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
  }
  .hourly-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
    border-radius: 4px;
  }
</style>
</head>
<body data-theme="clear">
  <div id="app" class="container">
    <div id="card" class="card hidden">
      <div class="header">
        <div class="location" id="location">Berlin</div>
        <div class="date" id="date">--</div>
      </div>
      <div class="main">
        <div class="summary">
          <div class="condition">
            <div class="icon" id="conditionIcon">☀️</div>
            <div class="label" id="conditionLabel">--</div>
          </div>
          <div class="temps">
            <div class="temp-row">
              <span class="label">Max</span>
              <span class="value" id="tempMax">--°C</span>
            </div>
            <div class="temp-row">
              <span class="label">Min</span>
              <span class="value" id="tempMin">--°C</span>
            </div>
          </div>
        </div>
        <div class="hourly">
          <div class="hourly-title">Hourly Temperature (UTC)</div>
          <div class="chart-container">
            <canvas id="hourlyChart"></canvas>
          </div>
          <div class="hourly-list" id="hourlyList"></div>
        </div>
      </div>
      <div class="footer">Data source: Open-Meteo</div>
    </div>
    <div id="loading" class="loading">Loading weather data...</div>
    <div id="error" class="error hidden">Unable to load weather data.</div>
  </div>
<script>
document.addEventListener('DOMContentLoaded', () => {
  const params = new URLSearchParams(window.location.search);
  const latParam = params.get('lat');
  const lonParam = params.get('lon');
  const nameParam = params.get('name');
  const dateParam = params.get('date');

  const lat = isFinite(parseFloat(latParam)) ? parseFloat(latParam) : 52.52;
  const lon = isFinite(parseFloat(lonParam)) ? parseFloat(lonParam) : 13.405;
  const locationName = (nameParam && nameParam.trim()) ? nameParam.trim() : 'Berlin';

  function parseDate(str) {
    if (!str) return null;
    const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(str);
    if (!match) return null;
    const y = +match[1];
    const m = +match[2];
    const d = +match[3];
    const date = new Date(Date.UTC(y, m - 1, d));
    if (date.getUTCFullYear() !== y || date.getUTCMonth() !== m - 1 || date.getUTCDate() !== d) return null;
    return date;
  }

  function formatYMD(date) {
    return date.toISOString().slice(0, 10);
  }

  const now = new Date();
  const todayUTC = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate()));
  let requestedDate = parseDate(dateParam);
  if (!requestedDate) requestedDate = todayUTC;
  const requestedDateStr = formatYMD(requestedDate);

  document.getElementById('location').textContent = locationName;
  const dateDisplay = new Intl.DateTimeFormat('en-US', {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    timeZone: 'UTC'
  }).format(requestedDate);
  document.getElementById('date').textContent = dateDisplay + ' (UTC)';

  const endpoint = requestedDate < todayUTC ? '/api/om/archive' : '/api/om/forecast';

  const query = new URLSearchParams({
    latitude: lat.toString(),
    longitude: lon.toString(),
    daily: 'temperature_2m_max,temperature_2m_min,weather_code',
    hourly: 'temperature_2m',
    timezone: 'UTC',
    temperature_unit: 'celsius',
    start_date: requestedDateStr,
    end_date: requestedDateStr
  });

  const url = endpoint + '?' + query.toString();

  const card = document.getElementById('card');
  const loadingEl = document.getElementById('loading');
  const errorEl = document.getElementById('error');

  function showCard() {
    card.classList.remove('hidden');
    loadingEl.classList.add('hidden');
    errorEl.classList.add('hidden');
  }

  function showError(message) {
    errorEl.textContent = message;
    errorEl.classList.remove('hidden');
    loadingEl.classList.add('hidden');
    card.classList.add('hidden');
  }

  function formatTemp(value, decimals) {
    const num = Number(value);
    if (!isFinite(num)) return '--';
    return num.toFixed(decimals) + '°C';
  }

  const weatherMap = {
    0: { label: 'Clear sky', emoji: '☀️' },
    1: { label: 'Mainly clear', emoji: '🌤️' },
    2: { label: 'Partly cloudy', emoji: '⛅' },
    3: { label: 'Overcast', emoji: '☁️' },
    45: { label: 'Fog', emoji: '🌫️' },
    48: { label: 'Rime fog', emoji: '🌫️' },
    51: { label: 'Light drizzle', emoji: '🌦️' },
    53: { label: 'Moderate drizzle', emoji: '🌦️' },
    55: { label: 'Dense drizzle', emoji: '🌧️' },
    56: { label: 'Freezing drizzle', emoji: '🌧️' },
    57: { label: 'Dense freezing drizzle', emoji: '🌧️' },
    61: { label: 'Slight rain', emoji: '🌦️' },
    63: { label: 'Moderate rain', emoji: '🌧️' },
    65: { label: 'Heavy rain', emoji: '🌧️' },
    66: { label: 'Freezing rain', emoji: '🌧️' },
    67: { label: 'Heavy freezing rain', emoji: '🌧️' },
    71: { label: 'Slight snow', emoji: '🌨️' },
    73: { label: 'Moderate snow', emoji: '🌨️' },
    75: { label: 'Heavy snow', emoji: '❄️' },
    77: { label: 'Snow grains', emoji: '❄️' },
    80: { label: 'Rain showers', emoji: '🌦️' },
    81: { label: 'Heavy showers', emoji: '🌧️' },
    82: { label: 'Violent showers', emoji: '⛈️' },
    85: { label: 'Snow showers', emoji: '🌨️' },
    86: { label: 'Heavy snow showers', emoji: '❄️' },
    95: { label: 'Thunderstorm', emoji: '⛈️' },
    96: { label: 'Thunderstorm w/ hail', emoji: '⛈️' },
    99: { label: 'Thunderstorm w/ hail', emoji: '⛈️' }
  };

  function getWeatherInfo(code) {
    return weatherMap.hasOwnProperty(code) ? weatherMap[code] : { label: 'Unknown', emoji: '❔' };
  }

  function classifyTheme(code) {
    if ([0, 1].includes(code)) return 'clear';
    if ([2, 3].includes(code)) return 'cloudy';
    if ([45, 48].includes(code)) return 'fog';
    if ([71, 73, 75, 77, 85, 86].includes(code)) return 'snow';
    if ([95, 96, 99].includes(code)) return 'storm';
    return 'rain';
  }

  function drawHourly(temps, times) {
    const canvas = document.getElementById('hourlyChart');
    const rect = canvas.getBoundingClientRect();
    const ctx = canvas.getContext('2d');
    const dpr = window.devicePixelRatio || 1;

    canvas.width = rect.width * dpr;
    canvas.height = rect.height * dpr;
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    ctx.clearRect(0, 0, rect.width, rect.height);

    const padding = 32;
    const w = rect.width;
    const h = rect.height;

    const minVal = Math.min(...temps);
    const maxVal = Math.max(...temps);
    const range = maxVal - minVal || 1;
    const min = minVal - range * 0.15;
    const max = maxVal + range * 0.15;

    const xStep = temps.length > 1 ? (w - 2 * padding) / (temps.length - 1) : 0;

    const points = temps.map((t, i) => {
      const x = padding + xStep * i;
      const y = padding + (h - 2 * padding) * (1 - (t - min) / (max - min));
      return { x, y };
    });

    ctx.strokeStyle = 'rgba(255, 255, 255, 0.15)';
    ctx.lineWidth = 1;
    for (let i = 0; i <= 4; i++) {
      const y = padding + (h - 2 * padding) * i / 4;
      ctx.beginPath();
      ctx.moveTo(padding, y);
      ctx.lineTo(w - padding, y);
      ctx.stroke();
    }

    ctx.beginPath();
    points.forEach((p, i) => {
      if (i === 0) ctx.moveTo(p.x, p.y);
      else ctx.lineTo(p.x, p.y);
    });
    ctx.lineTo(w - padding, h - padding);
    ctx.lineTo(padding, h - padding);
    ctx.closePath();
    const gradient = ctx.createLinearGradient(0, padding, 0, h - padding);
    gradient.addColorStop(0, 'rgba(255, 255, 255, 0.25)');
    gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
    ctx.fillStyle = gradient;
    ctx.fill();

    ctx.beginPath();
    points.forEach((p, i) => {
      if (i === 0) ctx.moveTo(p.x, p.y);
      else ctx.lineTo(p.x, p.y);
    });
    ctx.strokeStyle = 'rgba(255, 255, 255, 0.9)';
    ctx.lineWidth = 2.5;
    ctx.stroke();

    const labelEvery = 6;
    ctx.font = '12px "Segoe UI", sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';
    ctx.fillStyle = 'rgba(255, 255, 255, 0.75)';
    times.forEach((t, i) => {
      if (i % labelEvery === 0) {
        const hour = t.slice(11, 13);
        const x = points[i].x;
        ctx.fillText(hour, x, h - padding + 8);
      }
    });

    ctx.textBaseline = 'bottom';
    ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
    points.forEach((p, i) => {
      if (i % labelEvery === 0) {
        ctx.beginPath();
        ctx.arc(p.x, p.y, 3.5, 0, Math.PI * 2);
        ctx.fill();
        ctx.fillText(temps[i].toFixed(0) + '°', p.x, p.y - 8);
      }
    });
  }

  fetch(url)
    .then(response => {
      if (!response.ok) throw new Error('Network response was not ok');
      return response.json();
    })
    .then(data => {
      if (!data || !data.daily || !data.daily.time) throw new Error('Invalid data');
      const daily = data.daily;
      const idx = daily.time.indexOf(requestedDateStr);
      if (idx < 0) throw new Error('Date not found in daily data');
      const maxTemp = Number(daily.temperature_2m_max[idx]);
      const minTemp = Number(daily.temperature_2m_min[idx]);
      const weatherCode = Number(daily.weather_code[idx]);

      const info = getWeatherInfo(weatherCode);
      document.getElementById('conditionIcon').textContent = info.emoji;
      document.getElementById('conditionLabel').textContent = info.label;
      document.getElementById('tempMax').textContent = formatTemp(maxTemp, 1);
      document.getElementById('tempMin').textContent = formatTemp(minTemp, 1);

      const hourlyTimes = data.hourly && data.hourly.time ? data.hourly.time : [];
      const hourlyTemps = data.hourly && data.hourly.temperature_2m ? data.hourly.temperature_2m : [];
      const times = [];
      const temps = [];
      for (let i = 0; i < hourlyTimes.length; i++) {
        if (hourlyTimes[i].startsWith(requestedDateStr)) {
          times.push(hourlyTimes[i]);
          temps.push(Number(hourlyTemps[i]));
        }
      }
      if (temps.length === 0) throw new Error('Hourly data missing');

      const list = document.getElementById('hourlyList');
      list.innerHTML = '';
      times.forEach((t, i) => {
        const hour = t.slice(11, 13);
        const tempVal = temps[i];
        const tempStr = isFinite(tempVal) ? tempVal.toFixed(0) + '°' : '--';
        const item = document.createElement('div');
        item.className = 'hourly-item';
        item.innerHTML = '<div class="hour">' + hour + ':00</div><div class="temp">' + tempStr + '</div>';
        list.appendChild(item);
      });

      document.body.setAttribute('data-theme', classifyTheme(weatherCode));
      showCard();
      requestAnimationFrame(() => drawHourly(temps, times));
    })
    .catch(error => {
      console.error(error);
      showError('Unable to load weather data.');
    });
});
</script>
</body>
</html>

L1 — cheap deterministic descriptors

bytes total	15,260	html / css / js	1,612 / 4,113 / 9,535
dom nodes	34	dom depth	9
css rules	36	js present	yes
brightness	88.6	contrast	29.1
colorfulness	14.0	whitespace	54.1%

This slot's telemetry

prompt tokens	312	completion tokens	37,740
total tokens	38,052	wall	135.1 s
cost	—	request id	—

config.json575 B

{
  "N": 4,
  "auth": {
    "credential_ref": "WCB_OPENAI_OFFICIAL_KEY",
    "method": "api-key"
  },
  "billing": "metered",
  "config_id": "gpt-5.2-codex-eff-high--api--official--dev",
  "effort": "high",
  "family": "gpt",
  "m": {
    "min": 4,
    "q": 4
  },
  "model_id": "gpt-5.2-codex",
  "protocol": "api",
  "served_model": "gpt-5.2-codex",
  "telemetry": {
    "completion_tokens": 224817,
    "cost_usd": null,
    "prompt_tokens": 2464,
    "total_tokens": 227281,
    "wall_ms": 853967
  },
  "transport": "openai-official-api",
  "vendor_sanction_ref": null
}

send-log4.7 KB

{
  "N": 4,
  "batch_id": "2026-07-18--official-gpt",
  "config_id": "gpt-5.2-codex-eff-high--api--official--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-17T15:36:00.850120+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:33:45.737234+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-17T15:37:08.666593+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:36:05.934798+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-17T15:38:45.148221+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:37:11.526990+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-17T15:41:35.660194+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:38:48.761467+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-17T15:44:56.168669+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:41:39.501643+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-17T15:46:02.618740+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:44:59.889308+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-17T15:46:58.381493+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:46:05.463944+00:00"
        }
      ],
      "block_index": 3,
      "model_reaching_attempt_index": 0,
      "slot_index": 3,
      "terminal_state": "valid",
      "variant": "P-min"
    },
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-17T15:48:26.084437+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:47:02.781695+00:00"
        }
      ],
      "block_index": 3,
      "model_reaching_attempt_index": 0,
      "slot_index": 3,
      "terminal_state": "valid",
      "variant": "P-q"
    }
  ],
  "retry_policy": {
    "max_unreachable_retries": 5,
    "rate_limit_backoff": {
      "max_attempts": 4,
      "max_total_ms": 60000
    }
  }
}