deepseek-v4-flash @ high · api
apihigh
- config
- deepseek-v4-flash-eff-high--api--official--dev
- batch
- 2026-07-19--unified
- transport
- deepseek-official-api
- protocol
- api · metered
- served model
- deepseek-v4-flash
- 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
claude-opus-4-6 @max · kiro0.69claude-opus-4-6 @low · kiro0.66kimi-k3 @disabled · api0.66claude-sonnet-4-6 @high · kiro0.64deepseek-v4-flash · opencode0.64farthest
gpt-5.5 @high · codex-oauth0.42minimax-m2.7 · go0.44claude-haiku-4-5 @xhigh · CC0.44claude-fable-5 · CC0.45gpt-5.5 @xhigh · codex-oauth0.47within 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 tempambiguousinsufficient-distinct-temperature-nodes
- min tempambiguousinsufficient-distinct-temperature-nodes
- 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>
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 1280px;
height: 800px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: linear-gradient(145deg, #0b0e1a 0%, #1a1f35 40%, #2a1e3c 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
/* subtle ambient glow */
body::before {
content: '';
position: absolute;
top: -30%;
left: -20%;
width: 70%;
height: 70%;
background: radial-gradient(ellipse, rgba(99, 102, 241, 0.15), transparent 70%);
pointer-events: none;
}
body::after {
content: '';
position: absolute;
bottom: -20%;
right: -10%;
width: 60%;
height: 60%;
background: radial-gradient(ellipse, rgba(168, 85, 247, 0.10), transparent 70%);
pointer-events: none;
}
.weather-card {
position: relative;
width: 780px;
max-width: 90vw;
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(32px);
-webkit-backdrop-filter: blur(32px);
border-radius: 48px;
padding: 48px 56px 44px;
box-shadow:
0 30px 80px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.10),
0 0 0 1px rgba(255, 255, 255, 0.04);
transition: all 0.2s ease;
color: #f0f2f8;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 28px;
}
.location-group {
display: flex;
align-items: center;
gap: 10px;
}
.location-icon {
font-size: 26px;
line-height: 1;
opacity: 0.8;
}
.location-name {
font-size: 24px;
font-weight: 600;
letter-spacing: -0.01em;
color: #fff;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.date-group {
text-align: right;
}
.date-display {
font-size: 18px;
font-weight: 450;
color: rgba(255, 255, 255, 0.75);
letter-spacing: 0.02em;
background: rgba(255, 255, 255, 0.06);
padding: 6px 18px;
border-radius: 100px;
border: 1px solid rgba(255, 255, 255, 0.06);
backdrop-filter: blur(4px);
}
.weather-main {
display: flex;
align-items: center;
justify-content: space-between;
margin: 18px 0 32px;
padding: 8px 0;
}
.weather-left {
display: flex;
align-items: center;
gap: 32px;
}
.weather-icon-display {
font-size: 80px;
line-height: 1;
filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.25));
animation: float 4s ease-in-out infinite;
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-6px);
}
}
.temp-block {
display: flex;
flex-direction: column;
gap: 2px;
}
.temp-max {
font-size: 72px;
font-weight: 700;
line-height: 1;
color: #fff;
letter-spacing: -0.03em;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
}
.temp-max .degree {
font-size: 40px;
font-weight: 300;
opacity: 0.7;
vertical-align: super;
margin-left: 2px;
}
.temp-min-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
}
.temp-min {
font-size: 26px;
font-weight: 450;
color: rgba(255, 255, 255, 0.65);
}
.temp-min .degree {
font-size: 18px;
opacity: 0.6;
}
.temp-sep {
color: rgba(255, 255, 255, 0.15);
font-weight: 200;
font-size: 22px;
}
.weather-right {
text-align: right;
}
.condition-label {
font-size: 22px;
font-weight: 500;
color: rgba(255, 255, 255, 0.92);
letter-spacing: 0.01em;
background: rgba(255, 255, 255, 0.05);
padding: 8px 24px;
border-radius: 100px;
border: 1px solid rgba(255, 255, 255, 0.06);
backdrop-filter: blur(4px);
}
.hourly-section {
margin-top: 10px;
padding-top: 28px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.hourly-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
}
.hourly-title {
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.4);
}
.hourly-range {
font-size: 13px;
color: rgba(255, 255, 255, 0.3);
font-weight: 400;
}
.hourly-chart-wrap {
position: relative;
padding: 6px 0 2px;
overflow-x: auto;
overflow-y: visible;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}
.hourly-chart-wrap::-webkit-scrollbar {
height: 4px;
}
.hourly-chart-wrap::-webkit-scrollbar-track {
background: transparent;
}
.hourly-chart-wrap::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.12);
border-radius: 10px;
}
.hourly-chart {
display: flex;
align-items: flex-end;
gap: 6px;
min-height: 130px;
padding: 0 2px;
}
.hour-bar-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
flex: 1 0 38px;
transition: transform 0.15s ease;
cursor: default;
}
.hour-bar-wrap:hover {
transform: translateY(-2px);
}
.hour-bar {
width: 100%;
max-width: 36px;
border-radius: 6px 6px 2px 2px;
min-height: 4px;
transition: height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
box-shadow: 0 0 12px rgba(255, 255, 255, 0.04);
position: relative;
}
.hour-bar-temp {
font-size: 12px;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
line-height: 1;
transition: color 0.2s;
letter-spacing: -0.01em;
}
.hour-bar-wrap:hover .hour-bar-temp {
color: #fff;
}
.hour-bar-label {
font-size: 11px;
font-weight: 400;
color: rgba(255, 255, 255, 0.3);
letter-spacing: 0.02em;
margin-top: 2px;
}
.error-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 40px;
text-align: center;
gap: 16px;
color: rgba(255, 255, 255, 0.6);
}
.error-state .error-icon {
font-size: 48px;
opacity: 0.5;
}
.error-state .error-text {
font-size: 18px;
font-weight: 450;
max-width: 380px;
line-height: 1.6;
}
.error-state .error-hint {
font-size: 14px;
color: rgba(255, 255, 255, 0.3);
}
.loading-state {
display: flex;
align-items: center;
justify-content: center;
padding: 80px 40px;
gap: 18px;
color: rgba(255, 255, 255, 0.4);
font-size: 18px;
font-weight: 400;
}
.spinner {
width: 28px;
height: 28px;
border: 3px solid rgba(255, 255, 255, 0.06);
border-top-color: rgba(255, 255, 255, 0.5);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.temp-range-vis {
display: flex;
align-items: center;
gap: 4px;
margin-top: 2px;
}
.temp-range-vis .dot {
font-size: 8px;
color: rgba(255, 255, 255, 0.15);
}
/* subtle responsive tweaks */
@media (max-width: 860px) {
.weather-card {
padding: 32px 28px 28px;
border-radius: 32px;
width: 94vw;
}
.temp-max {
font-size: 54px;
}
.weather-icon-display {
font-size: 60px;
}
.weather-left {
gap: 20px;
}
.location-name {
font-size: 20px;
}
.condition-label {
font-size: 18px;
padding: 6px 16px;
}
}
@media (max-width: 600px) {
.weather-main {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.weather-right {
text-align: left;
width: 100%;
}
.card-header {
flex-direction: column;
gap: 10px;
}
.date-group {
text-align: left;
}
.temp-max {
font-size: 48px;
}
.weather-icon-display {
font-size: 52px;
}
.hour-bar-wrap {
flex: 1 0 28px;
}
.hour-bar {
max-width: 26px;
}
}
</style>
</head>
<body>
<div class="weather-card" id="weatherCard">
<!-- content rendered by JS -->
<div class="loading-state" id="loadingState">
<div class="spinner"></div>
<span>Loading weather…</span>
</div>
<div class="error-state" id="errorState" style="display:none;">
<div class="error-icon">⚠️</div>
<div class="error-text">Could not load weather data for this location and date.</div>
<div class="error-hint">Check the coordinates or try a different date.</div>
</div>
<div id="weatherContent" style="display:none;"></div>
</div>
<script>
(function() {
'use strict';
// ─── params ───────────────────────────────────────────────────────
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';
const rawDate = params.get('date') || '';
let dateStr;
if (rawDate && /^\d{4}-\d{2}-\d{2}$/.test(rawDate)) {
dateStr = rawDate;
} else {
const now = new Date();
dateStr = now.toISOString().slice(0, 10);
}
// ─── DOM refs ────────────────────────────────────────────────────
const loadingEl = document.getElementById('loadingState');
const errorEl = document.getElementById('errorState');
const contentEl = document.getElementById('weatherContent');
function showLoading() {
loadingEl.style.display = 'flex';
errorEl.style.display = 'none';
contentEl.style.display = 'none';
}
function showError() {
loadingEl.style.display = 'none';
errorEl.style.display = 'flex';
contentEl.style.display = 'none';
}
function showContent(html) {
loadingEl.style.display = 'none';
errorEl.style.display = 'none';
contentEl.style.display = 'block';
contentEl.innerHTML = html;
}
// ─── weather code helpers ────────────────────────────────────────
function getWeatherIcon(code) {
const c = Math.round(code);
if (c === 0) return '☀️';
if (c === 1) return '🌤️';
if (c === 2) return '⛅';
if (c === 3) return '☁️';
if (c === 45 || c === 48) return '🌫️';
if (c >= 51 && c <= 57) return '🌦️';
if (c >= 61 && c <= 67) return '🌧️';
if (c >= 71 && c <= 77) return '❄️';
if (c >= 80 && c <= 82) return '🌧️';
if (c >= 85 && c <= 86) return '❄️';
if (c >= 95 && c <= 99) return '⛈️';
return '🌤️';
}
function getWeatherLabel(code) {
const c = Math.round(code);
const map = {
0: 'Clear Sky',
1: 'Mainly Clear',
2: 'Partly Cloudy',
3: 'Overcast',
45: 'Foggy',
48: 'Rime Fog',
51: 'Light Drizzle',
53: 'Moderate Drizzle',
55: 'Dense Drizzle',
56: 'Light Freezing Drizzle',
57: 'Dense Freezing Drizzle',
61: 'Slight Rain',
63: 'Moderate Rain',
65: 'Heavy Rain',
66: 'Light Freezing Rain',
67: 'Heavy Freezing Rain',
71: 'Slight Snow',
73: 'Moderate Snow',
75: 'Heavy Snow',
77: 'Snow Grains',
80: 'Slight Rain Showers',
81: 'Moderate Rain Showers',
82: 'Violent Rain Showers',
85: 'Slight Snow Showers',
86: 'Heavy Snow Showers',
95: 'Thunderstorm',
96: 'Thunderstorm with Hail',
99: 'Thunderstorm with Heavy Hail'
};
return map[c] || 'Unknown';
}
// ─── temperature color ───────────────────────────────────────────
function tempColor(t) {
// blue (cold) → cyan → yellow → red (hot)
// map -10°C → 240°, 0°C → 210°, 10°C → 160°, 20°C → 80°, 30°C → 30°, 40°C → 0°
let hue;
if (t <= -10) hue = 245;
else if (t <= 0) hue = 245 - (t + 10) * 3.5;
else if (t <= 10) hue = 210 - t * 5;
else if (t <= 20) hue = 160 - (t - 10) * 8;
else if (t <= 30) hue = 80 - (t - 20) * 5;
else hue = 30 - Math.min((t - 30) * 3, 30);
hue = Math.max(0, Math.min(260, hue));
const sat = 70 + (t < 0 ? 10 : 0);
const lig = 52 + (t > 20 ? 8 : 0);
return `hsl(${hue}, ${sat}%, ${lig}%)`;
}
// ─── format date nicely ─────────────────────────────────────────
function formatDate(iso) {
const d = new Date(iso + 'T00:00:00Z');
const options = { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric', timeZone: 'UTC' };
return d.toLocaleDateString('en-US', options);
}
// ─── build hourly chart HTML ────────────────────────────────────
function buildHourlyChart(hourlyTemps) {
if (!hourlyTemps || hourlyTemps.length === 0) return '';
const temps = hourlyTemps;
const minT = Math.min(...temps);
const maxT = Math.max(...temps);
const range = maxT - minT || 1;
// normalise bar height: min height 8px, max height 100px
const MIN_BAR = 8;
const MAX_BAR = 100;
let bars = '';
for (let i = 0; i < temps.length; i++) {
const t = temps[i];
const norm = (t - minT) / range;
const height = MIN_BAR + norm * (MAX_BAR - MIN_BAR);
const color = tempColor(t);
const label = String(i).padStart(2, '0') + ':00';
const tempStr = t.toFixed(1) + '°';
bars += `
<div class="hour-bar-wrap">
<div class="hour-bar-temp">${tempStr}</div>
<div class="hour-bar" style="height:${height}px; background:${color};"></div>
<div class="hour-bar-label">${label}</div>
</div>
`;
}
const rangeLabel = `${minT.toFixed(1)}° – ${maxT.toFixed(1)}°`;
return `
<div class="hourly-section">
<div class="hourly-header">
<span class="hourly-title">Hourly Temperatures</span>
<span class="hourly-range">${rangeLabel}</span>
</div>
<div class="hourly-chart-wrap">
<div class="hourly-chart">
${bars}
</div>
</div>
</div>
`;
}
// ─── render card ────────────────────────────────────────────────
function renderCard(data) {
const daily = data.daily;
if (!daily || !daily.time || daily.time.length === 0) {
showError();
return;
}
const idx = 0;
const tMax = daily.temperature_2m_max[idx];
const tMin = daily.temperature_2m_min[idx];
const wCode = daily.weather_code[idx];
const icon = getWeatherIcon(wCode);
const label = getWeatherLabel(wCode);
// hourly data for the requested date
let hourlyTemps = [];
if (data.hourly && data.hourly.time && data.hourly.temperature_2m) {
const targetDate = dateStr;
for (let i = 0; i < data.hourly.time.length; i++) {
const hTime = data.hourly.time[i];
if (hTime.startsWith(targetDate)) {
hourlyTemps.push(data.hourly.temperature_2m[i]);
}
}
}
// If hourly data is empty, try to fallback to daily min/max approximation
// but we'll just show what we have
const dateNice = formatDate(dateStr);
const hourlyHtml = buildHourlyChart(hourlyTemps);
const html = `
<div class="card-header">
<div class="location-group">
<span class="location-icon">📍</span>
<span class="location-name">${escapeHtml(name)}</span>
</div>
<div class="date-group">
<span class="date-display">${dateNice}</span>
</div>
</div>
<div class="weather-main">
<div class="weather-left">
<div class="weather-icon-display">${icon}</div>
<div class="temp-block">
<div class="temp-max">${tMax.toFixed(1)}<span class="degree">°C</span></div>
<div class="temp-min-row">
<span class="temp-min">${tMin.toFixed(1)}<span class="degree">°C</span></span>
<span class="temp-sep">|</span>
<span class="temp-min" style="color:rgba(255,255,255,0.5);font-weight:300;font-size:16px;">min</span>
</div>
</div>
</div>
<div class="weather-right">
<div class="condition-label">${label}</div>
</div>
</div>
${hourlyHtml}
`;
showContent(html);
}
function escapeHtml(str) {
const div = document.createElement('div');
div.textContent = str;
return div.innerHTML;
}
// ─── fetch data ─────────────────────────────────────────────────
async function fetchWeather() {
showLoading();
const isPast = dateStr < new Date().toISOString().slice(0, 10);
const endpoint = isPast ? '/api/om/archive' : '/api/om/forecast';
const query = 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: dateStr,
end_date: dateStr
});
const url = endpoint + '?' + query.toString();
try {
const resp = await fetch(url);
if (!resp.ok) {
throw new Error(`HTTP ${resp.status}`);
}
const data = await resp.json();
if (!data || !data.daily || !data.daily.time || data.daily.time.length === 0) {
throw new Error('No data for this date');
}
renderCard(data);
} catch (err) {
console.warn('Weather fetch error:', err);
showError();
}
}
// ─── start ──────────────────────────────────────────────────────
fetchWeather();
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 24,659 | html / css / js | 878 / 10,908 / 12,873 |
|---|---|---|---|
| dom nodes | 17 | dom depth | 5 |
| css rules | 67 | js present | yes |
| brightness | 44.0 | contrast | 30.7 |
| colorfulness | 31.9 | whitespace | 60.1% |
This slot's telemetry
| prompt tokens | 321 | completion tokens | 8,986 |
|---|---|---|---|
| total tokens | 9,307 | wall | 54.4 s |
| cost | — | request id | — |
config.json585 B
{
"N": 4,
"auth": {
"credential_ref": "WCB_DEEPSEEK_KEY",
"method": "api-key"
},
"billing": "metered",
"config_id": "deepseek-v4-flash-eff-high--api--official--dev",
"effort": "high",
"family": "deepseek",
"m": {
"min": 4,
"q": 4
},
"model_id": "deepseek-v4-flash",
"protocol": "api",
"served_model": "deepseek-v4-flash",
"telemetry": {
"completion_tokens": 73028,
"cost_usd": null,
"prompt_tokens": 2536,
"total_tokens": 75564,
"wall_ms": 450158
},
"transport": "deepseek-official-api",
"vendor_sanction_ref": null
}send-log4.7 KB
{
"N": 4,
"batch_id": "2026-07-19--official-deepseek",
"config_id": "deepseek-v4-flash-eff-high--api--official--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-07-19T07:21:00.357056+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-19T07:20:19.909183+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-19T07:21:59.640698+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-19T07:21:05.256516+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-19T07:23:19.887488+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-19T07:22:03.449389+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-19T07:24:07.494006+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-19T07:23:24.848528+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-19T07:24:44.386045+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-19T07:24:11.289984+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-19T07:26:13.901262+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-19T07:24:48.069381+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-19T07:27:36.688048+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-19T07:26:17.416680+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-19T07:28:18.821346+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-19T07:27:40.770412+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
}
}
}