gemini-3.1-pro-preview @ medium · api

apimedium

config: gemini-3.1-pro-preview-eff-medium--api--official--dev
batch: 2026-07-19--unified
transport: google-gemini-developer-api-openai-compat
protocol: api · metered
served model: gemini-3.1-pro-preview
captured: Jul 18, 2026, 11:54 AM · N=4

variant

live

slot 0 · P-q · sandboxed iframe

gemini-3.1-pro-preview @medium · 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-opus-4-6 @max · kiro0.61 claude-sonnet-4-6 @medium · kiro0.61 kimi-k2.5 · go0.61 claude-opus-4-6 @high · kiro0.59 claude-opus-4-6 @low · kiro0.59

farthest

gpt-5.5 @medium · codex-oauth0.45 mimo-v2.5-pro · opencode0.47 gpt-5.6-sol @max · codex-oauth0.47 deepseek-v3.2 · kiro0.47 claude-sonnet-5 @xhigh · CC0.47

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=device-width, initial-scale=1.0">
<title>Weather Card</title>
<style>
  :root {
    --bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
    --card-bg: rgba(255, 255, 255, 0.05);
    --card-border: rgba(255, 255, 255, 0.1);
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --bar-gradient: linear-gradient(to top, #38bdf8, #818cf8);
    --error-color: #f87171;
  }

  body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1280px;
    height: 800px;
    background: var(--bg-gradient);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text-primary);
    overflow: hidden;
  }

  *, *::before, *::after {
    box-sizing: inherit;
  }

  .card {
    width: 860px;
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--card-border);
    border-radius: 32px;
    padding: 48px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 24px;
    margin-bottom: 40px;
  }

  .header h1 {
    margin: 0;
    font-size: 42px;
    font-weight: 600;
    letter-spacing: -1px;
  }

  .header p {
    margin: 0;
    font-size: 20px;
    color: var(--text-secondary);
    font-weight: 500;
  }

  .main-info {
    display: flex;
    align-items: center;
    margin-bottom: 48px;
  }

  .icon {
    font-size: 96px;
    line-height: 1;
    margin-right: 32px;
    filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.3));
  }

  .details {
    flex-grow: 1;
  }

  .condition {
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 12px;
  }

  .temps {
    font-size: 24px;
  }

  .temps .max {
    font-weight: 700;
    margin-right: 16px;
    color: #fff;
  }

  .temps .min {
    color: var(--text-secondary);
  }

  .hourly-container {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 24px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
  }

  .hourly-container::-webkit-scrollbar {
    height: 8px;
  }

  .hourly-container::-webkit-scrollbar-track {
    background: transparent;
  }

  .hourly-container::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.2);
    border-radius: 10px;
  }

  .hourly-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 52px;
  }

  .hourly-item .temp {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
  }

  .bar-container {
    width: 10px;
    height: 100px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 5px;
    position: relative;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
  }

  .bar {
    width: 100%;
    background: var(--bar-gradient);
    border-radius: 5px;
    transition: height 0.5s ease-out;
  }

  .hourly-item .time {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
  }

  #loading, #error {
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    padding: 60px 0;
  }

  #error {
    color: var(--error-color);
  }
</style>
</head>
<body>

  <div class="card" id="weather-card">
    <div id="loading">Loading weather data...</div>
    <div id="error" style="display: none;">Could not load weather data.</div>
    
    <div id="content" style="display: none;">
      <div class="header">
        <h1 id="loc-name"></h1>
        <p id="date-str"></p>
      </div>
      
      <div class="main-info">
        <div class="icon" id="weather-icon"></div>
        <div class="details">
          <div class="condition" id="weather-desc"></div>
          <div class="temps">
            <span class="max" id="temp-max"></span>
            <span class="min" id="temp-min"></span>
          </div>
        </div>
      </div>

      <div class="hourly-container" id="hourly-list"></div>
    </div>
  </div>

  <script>
    const weatherCodes = {
      0: { desc: 'Clear sky', icon: '☀️' },
      1: { desc: 'Mainly clear', icon: '🌤️' },
      2: { desc: 'Partly cloudy', icon: '⛅' },
      3: { desc: 'Overcast', icon: '☁️' },
      45: { desc: 'Fog', icon: '🌫️' },
      48: { desc: 'Depositing rime fog', icon: '🌫️' },
      51: { desc: 'Light drizzle', icon: '🌧️' },
      53: { desc: 'Moderate drizzle', icon: '🌧️' },
      55: { desc: 'Dense drizzle', icon: '🌧️' },
      56: { desc: 'Light freezing drizzle', icon: '🌧️' },
      57: { desc: 'Dense freezing drizzle', icon: '🌧️' },
      61: { desc: 'Slight rain', icon: '🌧️' },
      63: { desc: 'Moderate rain', icon: '🌧️' },
      65: { desc: 'Heavy rain', icon: '🌧️' },
      66: { desc: 'Light freezing rain', icon: '🌧️' },
      67: { desc: 'Heavy freezing rain', icon: '🌧️' },
      71: { desc: 'Slight snow fall', icon: '🌨️' },
      73: { desc: 'Moderate snow fall', icon: '🌨️' },
      75: { desc: 'Heavy snow fall', icon: '🌨️' },
      77: { desc: 'Snow grains', icon: '🌨️' },
      80: { desc: 'Slight rain showers', icon: '🌦️' },
      81: { desc: 'Moderate rain showers', icon: '🌦️' },
      82: { desc: 'Violent rain showers', icon: '🌦️' },
      85: { desc: 'Slight snow showers', icon: '🌨️' },
      86: { desc: 'Heavy snow showers', icon: '🌨️' },
      95: { desc: 'Thunderstorm', icon: '⛈️' },
      96: { desc: 'Thunderstorm with slight hail', icon: '⛈️' },
      99: { desc: 'Thunderstorm with heavy hail', icon: '⛈️' }
    };

    function getWeatherInfo(code) {
      return weatherCodes[code] || { desc: 'Unknown condition', icon: '❓' };
    }

    function init() {
      const urlParams = new URLSearchParams(window.location.search);
      const lat = urlParams.get('lat') || '52.52';
      const lon = urlParams.get('lon') || '13.405';
      const locName = urlParams.get('name') || 'Berlin';
      
      const todayStr = new Date().toISOString().split('T')[0];
      const date = urlParams.get('date') || todayStr;
      
      const isPast = date < todayStr;
      const baseUrl = isPast ? '/api/om/archive' : '/api/om/forecast';
      
      const queryParams = new URLSearchParams({
        latitude: lat,
        longitude: lon,
        daily: 'temperature_2m_max,temperature_2m_min,weather_code',
        hourly: 'temperature_2m',
        timezone: 'UTC',
        temperature_unit: 'celsius',
        start_date: date,
        end_date: date
      });

      const apiUrl = `${baseUrl}?${queryParams.toString()}`;

      fetch(apiUrl)
        .then(response => {
          if (!response.ok) throw new Error('Network response was not ok');
          return response.json();
        })
        .then(data => {
          if (!data.daily || !data.hourly || data.daily.time.length === 0) {
            throw new Error('Incomplete data received');
          }

          document.getElementById('loading').style.display = 'none';
          document.getElementById('content').style.display = 'block';

          // Set Header
          document.getElementById('loc-name').textContent = locName;
          
          const dateObj = new Date(date);
          const dateFormatted = dateObj.toLocaleDateString(undefined, {
            weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC'
          });
          document.getElementById('date-str').textContent = dateFormatted;

          // Set Main Info
          const maxTemp = data.daily.temperature_2m_max[0];
          const minTemp = data.daily.temperature_2m_min[0];
          const wCode = data.daily.weather_code[0];
          const wInfo = getWeatherInfo(wCode);

          document.getElementById('weather-icon').textContent = wInfo.icon;
          document.getElementById('weather-desc').textContent = wInfo.desc;
          document.getElementById('temp-max').textContent = Math.round(maxTemp) + '°C';
          document.getElementById('temp-min').textContent = Math.round(minTemp) + '°C';

          // Set Hourly
          const hourlyList = document.getElementById('hourly-list');
          hourlyList.innerHTML = '';

          const temps = data.hourly.temperature_2m;
          const times = data.hourly.time;
          
          const maxH = Math.max(...temps);
          const minH = Math.min(...temps);
          const range = Math.max(maxH - minH, 1);
          const padding = range * 0.2;
          const topVal = maxH + padding;
          const bottomVal = minH - padding;

          times.forEach((t, i) => {
            const timeStr = t.split('T')[1];
            const temp = temps[i];
            const tempRounded = Math.round(temp);

            const item = document.createElement('div');
            item.className = 'hourly-item';

            const tempEl = document.createElement('div');
            tempEl.className = 'temp';
            tempEl.textContent = tempRounded + '°';

            const barContainer = document.createElement('div');
            barContainer.className = 'bar-container';

            const bar = document.createElement('div');
            bar.className = 'bar';
            
            let heightPercent = ((temp - bottomVal) / (topVal - bottomVal)) * 100;
            heightPercent = Math.max(0, Math.min(100, heightPercent));
            bar.style.height = heightPercent + '%';

            barContainer.appendChild(bar);

            const timeEl = document.createElement('div');
            timeEl.className = 'time';
            timeEl.textContent = timeStr;

            item.appendChild(tempEl);
            item.appendChild(barContainer);
            item.appendChild(timeEl);

            hourlyList.appendChild(item);
          });
        })
        .catch(err => {
          document.getElementById('loading').style.display = 'none';
          document.getElementById('error').style.display = 'block';
          console.error(err);
        });
    }

    document.addEventListener('DOMContentLoaded', init);
  </script>
</body>
</html>

L1 — cheap deterministic descriptors

bytes total	10,418	html / css / js	988 / 3,365 / 6,065
dom nodes	23	dom depth	8
css rules	25	js present	yes
brightness	36.1	contrast	19.4
colorfulness	18.6	whitespace	50.2%

This slot's telemetry

prompt tokens	348	completion tokens	3,441
total tokens	3,789	wall	56.5 s
cost	—	request id	—

config.json620 B

{
  "N": 4,
  "auth": {
    "credential_ref": "WCB_GEMINI_KEY",
    "method": "api-key"
  },
  "billing": "metered",
  "config_id": "gemini-3.1-pro-preview-eff-medium--api--official--dev",
  "effort": "medium",
  "family": "gemini",
  "m": {
    "min": 4,
    "q": 4
  },
  "model_id": "gemini-3.1-pro-preview",
  "protocol": "api",
  "served_model": "gemini-3.1-pro-preview",
  "telemetry": {
    "completion_tokens": 26420,
    "cost_usd": null,
    "prompt_tokens": 2748,
    "total_tokens": 29168,
    "wall_ms": 336627
  },
  "transport": "google-gemini-developer-api-openai-compat",
  "vendor_sanction_ref": null
}

send-log4.7 KB

{
  "N": 4,
  "batch_id": "2026-07-20--official-gemini",
  "config_id": "gemini-3.1-pro-preview-eff-medium--api--official--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-19T15:25:51.230794+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-19T15:25:21.685034+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-19T15:26:50.334821+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-19T15:25:53.806569+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-19T15:27:47.141404+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-19T15:26:53.743192+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-19T15:28:27.090348+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-19T15:27:50.353212+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-19T15:29:20.756573+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-19T15:28:30.385517+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-19T15:29:54.286686+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-19T15:29:24.531885+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-19T15:30:29.517762+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-19T15:29:57.960136+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-19T15:31:20.838760+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-19T15:30:32.097079+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
    }
  }
}