deepseek-v4-flash-vision-exp @ none · api

apinone
config
deepseek-v4-flash-vision-exp-eff-none--api--official--dev
batch
2026-07-19--unified
transport
deepseek-official-api
protocol
api · metered
served model
deepseek-v4-flash-vision-exp
captured
Jul 18, 2026, 11:54 AM · N=4
variant
live
slot 0 · P-q · sandboxed iframe
deepseek-v4-flash-vision-exp @none · api P-q slot 0 screenshot

delivered in a markdown fence — the model wrapped its HTML in a code fence; extraction stripped it. Recorded here for traceability.

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 neighborsNo similarity data for this session — this batch has no computed pairs.

Fidelity — does the card show the right data?

  • namematch
  • conditionmatch
  • datematch
  • max tempmismatchshown: 17.4
  • min tempmismatchshown: 17.2
  • hourlymatchcoverage 22/24 · 22 match · 0 mismatch · 2 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>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: linear-gradient(145deg, #0a1a2f 0%, #1b3b5c 100%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
      padding: 2rem;
    }

    .weather-card {
      width: 100%;
      max-width: 820px;
      background: rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-radius: 2.5rem;
      border: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow: 0 30px 50px rgba(0, 0, 0, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.08);
      padding: 2.5rem 2.5rem 2.8rem;
      color: #f0f7ff;
      transition: all 0.2s ease;
    }

    /* header */
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 1.4rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      padding-bottom: 0.75rem;
    }

    .location {
      font-size: 2rem;
      font-weight: 600;
      letter-spacing: -0.5px;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .location i {
      font-size: 1.8rem;
      opacity: 0.85;
    }

    .date-badge {
      background: rgba(255, 255, 255, 0.18);
      padding: 0.35rem 1.2rem;
      border-radius: 60px;
      font-weight: 500;
      font-size: 1rem;
      letter-spacing: 0.5px;
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* main weather metrics */
    .main-weather {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 1.5rem 0 2rem;
    }

    .temp-block {
      display: flex;
      flex-direction: column;
    }

    .temp-highlow {
      display: flex;
      gap: 1.8rem;
      margin-bottom: 0.8rem;
    }

    .temp-item {
      display: flex;
      flex-direction: column;
    }

    .temp-label {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      opacity: 0.7;
    }

    .temp-value {
      font-size: 2.5rem;
      font-weight: 700;
      line-height: 1.2;
    }

    .temp-value small {
      font-size: 1.2rem;
      font-weight: 400;
      opacity: 0.6;
    }

    .condition-icon {
      text-align: center;
      background: rgba(255, 255, 255, 0.1);
      padding: 0.8rem 1.8rem;
      border-radius: 80px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      backdrop-filter: blur(12px);
    }

    .condition-text {
      font-size: 1.5rem;
      font-weight: 500;
      letter-spacing: 0.2px;
      margin-top: 0.2rem;
    }

    .emoji-large {
      font-size: 2.6rem;
      filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.3));
    }

    /* hourly section */
    .hourly-section {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 1.8rem;
      padding: 1.8rem 1.5rem 1.5rem;
      margin-top: 0.8rem;
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2);
    }

    .section-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      opacity: 0.8;
      margin-bottom: 1.2rem;
    }

    .hourly-scroll {
      display: flex;
      gap: 1rem;
      overflow-x: auto;
      padding-bottom: 0.4rem;
      scrollbar-width: thin;
      scrollbar-color: #77b6e2 rgba(255,255,255,0.1);
    }

    .hourly-scroll::-webkit-scrollbar {
      height: 5px;
    }

    .hourly-scroll::-webkit-scrollbar-thumb {
      background: #77b6e2;
      border-radius: 20px;
    }

    .hour-item {
      background: rgba(255, 255, 255, 0.07);
      border-radius: 30px;
      padding: 0.8rem 0.6rem;
      min-width: 70px;
      display: flex;
      flex-direction: column;
      align-items: center;
      border: 1px solid rgba(255,255,255,0.06);
    }

    .hour-time {
      font-size: 0.8rem;
      font-weight: 600;
      opacity: 0.9;
      background: rgba(0,0,0,0.2);
      padding: 0.2rem 0.5rem;
      border-radius: 30px;
      margin-bottom: 0.5rem;
      color: #c9e5ff;
    }

    .hour-temp {
      font-size: 1.2rem;
      font-weight: 600;
    }

    .error-message {
      background: rgba(255, 100, 80, 0.2);
      padding: 1.6rem;
      border-radius: 1.5rem;
      text-align: center;
      font-size: 1.3rem;
      color: #ffb4a8;
      border-left: 5px solid #ff6b5e;
      margin-top: 1rem;
      font-weight: 500;
    }

    .loading, .error-message {
      font-weight: 500;
    }

    .footer-note {
      margin-top: 1rem;
      font-size: 0.75rem;
      text-align: right;
      opacity: 0.5;
    }

    /* weather code mapping (WMO) */
    .weather-desc {
      font-size: 1rem;
      font-weight: 500;
    }
  </style>
</head>
<body>
  <div class="weather-card" id="weatherCard">
    <div class="card-header">
      <div class="location">
        <span>📍</span>
        <span id="locationName">--</span>
      </div>
      <div class="date-badge" id="dateDisplay">--</div>
    </div>

    <div class="main-weather" id="mainWeather">
      <div class="temp-block">
        <div class="temp-highlow">
          <div class="temp-item">
            <span class="temp-label">🌡️ max</span>
            <span class="temp-value" id="tempMax">--</span>
          </div>
          <div class="temp-item">
            <span class="temp-label">❄️ min</span>
            <span class="temp-value" id="tempMin">--</span>
          </div>
        </div>
        <div class="weather-desc" id="weatherCondition" style="font-size:1.2rem; color: #b0d4ff;">--</div>
      </div>
      <div class="condition-icon">
        <div class="emoji-large" id="weatherEmoji">☀️</div>
        <div class="condition-text" id="conditionText">--</div>
      </div>
    </div>

    <div class="hourly-section">
      <div class="section-title">
        <span>⏱️ hourly temperatures</span>
        <span style="opacity:0.7;">(UTC)</span>
      </div>
      <div class="hourly-scroll" id="hourlyContainer">
        <!-- injected by JS -->
        <div style="color: #9bb5cf; font-size:0.9rem;">Loading hourly...</div>
      </div>
    </div>

    <div class="footer-note" id="footerNote">·</div>
  </div>

  <script>
    (function () {
      // ---- query parameters ----
      const params = new URLSearchParams(window.location.search);
      const lat = parseFloat(params.get('lat') ?? '52.52');
      const lon = parseFloat(params.get('lon') ?? '13.405');
      const name = params.get('name') || 'Berlin';
      let dateParam = params.get('date');

      let dateObj;
      if (dateParam && /^\d{4}-\d{2}-\d{2}$/.test(dateParam)) {
        dateObj = new Date(dateParam + 'T00:00:00Z');
      } else {
        // today (UTC)
        const now = new Date();
        dateObj = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate()));
      }

      const dateStr = dateObj.toISOString().slice(0, 10); // YYYY-MM-DD in UTC
      const todayStr = new Date().toISOString().slice(0, 10);

      // API path selection
      const isArchive = dateStr < todayStr;
      const apiBase = isArchive ? '/api/om/archive' : '/api/om/forecast';

      // DOM elements
      const locationEl = document.getElementById('locationName');
      const dateEl = document.getElementById('dateDisplay');
      const tempMaxEl = document.getElementById('tempMax');
      const tempMinEl = document.getElementById('tempMin');
      const weatherCondEl = document.getElementById('weatherCondition');
      const weatherEmojiEl = document.getElementById('weatherEmoji');
      const conditionTextEl = document.getElementById('conditionText');
      const hourlyContainer = document.getElementById('hourlyContainer');

      // set initial location & date
      locationEl.textContent = name;
      const formattedDate = new Date(dateStr + 'T00:00:00Z').toUTCString().slice(0, 16);
      dateEl.textContent = dateStr;

      // build API url
      const url = new URL(apiBase, window.location.origin);
      url.searchParams.set('latitude', lat.toString());
      url.searchParams.set('longitude', lon.toString());
      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);

      // generic WMO mapping and emoji
      function getWeatherInfo(code) {
        let desc = 'Unknown';
        let emoji = '🌡️';
        if (code === 0) { desc = 'Clear sky'; emoji = '☀️'; }
        else if (code == 1 || code == 2 || code == 3) { desc = 'Partly cloudy'; emoji = '⛅'; }
        else if (code == 45 || code == 48) { desc = 'Fog'; emoji = '🌫️'; }
        else if (code >= 51 && code <= 57) { desc = 'Drizzle'; emoji = '🌦️'; }
        else if (code >= 61 && code <= 67) { desc = 'Rain'; emoji = '🌧️'; }
        else if (code >= 71 && code <= 77) { desc = 'Snow'; emoji = '❄️'; }
        else if (code >= 80 && code <= 82) { desc = 'Showers'; emoji = '🌧️'; }
        else if (code >= 85 && code <= 86) { desc = 'Snow showers'; emoji = '🌨️'; }
        else if (code >= 95) { desc = 'Thunderstorm'; emoji = '⛈️'; }
        return { desc, emoji };
      }

      async function fetchWeather() {
        try {
          const response = await fetch(url.toString());
          if (!response.ok) throw new Error(`API error ${response.status}`);
          const data = await response.json();

          // Validate data
          if (!data.daily || !data.hourly) throw new Error('Missing daily or hourly data');

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

          const maxTemp = daily.temperature_2m_max?.[0];
          const minTemp = daily.temperature_2m_min?.[0];
          const weatherCode = daily.weather_code?.[0];

          // Hourly temperature array (for the requested date)
          const hourlyTemps = hourly.temperature_2m || [];
          const hourlyTimes = hourly.time || [];

          // If hourly is empty or invalid fallback
          if (typeof maxTemp !== 'number' || typeof minTemp !== 'number') {
            throw new Error('Incomplete temperature data');
          }

          // update max/min
          tempMaxEl.innerHTML = `${maxTemp.toFixed(1)}<small>°C</small>`;
          tempMinEl.innerHTML = `${minTemp.toFixed(1)}<small>°C</small>`;

          // condition display
          if (weatherCode !== undefined) {
            const info = getWeatherInfo(weatherCode);
            weatherCondEl.textContent = info.desc;
            weatherEmojiEl.textContent = info.emoji;
            conditionTextEl.textContent = info.desc;
          } else {
            weatherCondEl.textContent = 'No data';
            weatherEmojiEl.textContent = '❓';
            conditionTextEl.textContent = 'Unknown';
          }

          // hourly display
          hourlyContainer.innerHTML = '';
          if (hourlyTemps.length === 0 || hourlyTimes.length === 0) {
            hourlyContainer.innerHTML = '<div style="color:#b0c8e0;">No hourly data available</div>';
          } else {
            // filter hourly times that match date (they should be already filtered due to start/end but backup)
            const filteredIndices = [];
            for (let i = 0; i < hourlyTimes.length; i++) {
              if (hourlyTimes[i].startsWith(dateStr)) {
                filteredIndices.push(i);
              }
            }

            const indicesToShow = filteredIndices.length ? filteredIndices : [...Array(hourlyTemps.length).keys()].slice(0, 24);

            for (const idx of indicesToShow) {
              const timeVal = hourlyTimes[idx] || `T${idx}`;
              const hourStr = timeVal.includes('T') ? timeVal.split('T')[1]?.slice(0, 5) : '';
              const tempVal = hourlyTemps[idx];
              if (typeof tempVal !== 'number') continue;
              const hourItem = document.createElement('div');
              hourItem.className = 'hour-item';
              hourItem.innerHTML = `
                <div class="hour-time">${hourStr || '--'}</div>
                <div class="hour-temp">${tempVal.toFixed(1)}°</div>
              `;
              hourlyContainer.appendChild(hourItem);
            }
          }

          // update footer note (optional)
          document.getElementById('footerNote').textContent = 'Open-Meteo · ' + (isArchive ? 'archive' : 'forecast');

        } catch (err) {
          // show error and disable / display message
          console.error('weather error:', err);
          const card = document.getElementById('weatherCard');
          card.innerHTML = `
            <div style="padding: 1rem 0.5rem; text-align:center;">
              <div style="font-size:2rem; margin-bottom:1rem;">⚠️</div>
              <div class="error-message" style="display:inline-block;">
                ❌ Weather data could not be loaded.<br>
                <span style="font-size:0.9rem; opacity:0.8;">(${err.message})</span>
              </div>
            </div>
          `;
        }
      }

      fetchWeather();
    })();
  </script>
</body>
</html>

L1 — cheap deterministic descriptors

bytes total13,694html / css / js1,691 / 4,962 / 7,041
dom nodes34dom depth8
css rules29js presentyes
brightness44.7contrast16.9
colorfulness20.0whitespace68.6%

This slot's telemetry

prompt tokens321completion tokens3,931
total tokens4,252wall33.1 s
costrequest id
config.json618 B
{
  "N": 4,
  "auth": {
    "credential_ref": "WCB_DEEPSEEK_KEY",
    "method": "api-key"
  },
  "billing": "metered",
  "config_id": "deepseek-v4-flash-vision-exp-eff-none--api--official--dev",
  "effort": "none",
  "family": "deepseek",
  "m": {
    "min": 4,
    "q": 4
  },
  "model_id": "deepseek-v4-flash-vision-exp",
  "protocol": "api",
  "served_model": "deepseek-v4-flash-vision-exp",
  "telemetry": {
    "completion_tokens": 30946,
    "cost_usd": null,
    "prompt_tokens": 2536,
    "total_tokens": 33482,
    "wall_ms": 261606
  },
  "transport": "deepseek-official-api",
  "vendor_sanction_ref": null
}
send-log4.7 KB
{
  "N": 4,
  "batch_id": "2026-08-22--deepseek-vision-exp",
  "config_id": "deepseek-v4-flash-vision-exp-eff-none--api--official--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-09-02T02:23:35.099227+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-09-02T02:23:01.968357+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-09-02T02:24:12.380000+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-09-02T02:23:38.687504+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-09-02T02:24:49.383233+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-09-02T02:24:15.896432+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-09-02T02:25:26.529455+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-09-02T02:24:52.575097+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-09-02T02:26:00.558908+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-09-02T02:25:29.876628+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-09-02T02:26:35.146855+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-09-02T02:26:04.610308+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-09-02T02:27:12.282714+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-09-02T02:26:38.558199+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-09-02T02:27:47.855506+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-09-02T02:27:15.450463+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
    }
  }
}