deepseek-v4-flash-vision-exp @ low · api
apilow
- config
- deepseek-v4-flash-vision-exp-eff-low--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
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 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">
<title>Weather Card</title>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(145deg, #0b141e, #101f2e, #1a2c3a);
color: #e8edf0;
overflow: hidden;
}
body::before {
content: '';
position: fixed;
top: 50%;
left: 50%;
width: 800px;
height: 800px;
background: radial-gradient(circle, rgba(255, 159, 67, .12), transparent 60%);
transform: translate(-50%, -50%);
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
body::after {
content: '';
position: fixed;
top: 30%;
left: 70%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(84, 160, 255, .1), transparent 60%);
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.weather-card {
position: relative;
z-index: 1;
width: 820px;
border-radius: 30px;
background: linear-gradient(165deg, rgba(28, 42, 55, .92), rgba(16, 26, 36, .96));
box-shadow: 0 12px 48px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .08);
padding: 44px 52px;
border: 1px solid rgba(255, 255, 255, .06);
max-width: 95vw;
}
.card-header {
text-align: center;
margin-bottom: 8px;
}
.location-name {
font-size: 34px;
font-weight: 800;
letter-spacing: .4px;
color: #fff;
line-height: 1.2;
text-shadow: 0 2px 12px rgba(0, 0, 0, .3);
}
.date-label {
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, .62);
text-transform: uppercase;
letter-spacing: 2px;
margin-top: 6px;
line-height: 1.4;
}
.weather-summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 32px 10px 24px;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.weather-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
flex: 1;
}
.weather-icon {
font-size: 88px;
line-height: 1;
filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .2));
}
.condition-text {
font-size: 15px;
font-weight: 500;
color: rgba(255, 255, 255, .85);
letter-spacing: .3px;
}
.temperatures {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
flex: 1;
padding-left: 30px;
}
.temp-max {
font-size: 80px;
font-weight: 200;
color: #ff9f43;
line-height: 1;
letter-spacing: -2px;
}
.temp-min {
font-size: 34px;
font-weight: 300;
color: #54a0ff;
line-height: 1.2;
margin-top: 4px;
}
.temp-labels {
display: flex;
gap: 20px;
margin-top: 10px;
}
.temp-labels span {
font-size: 11px;
color: rgba(255, 255, 255, .5);
text-transform: uppercase;
letter-spacing: 1px;
}
.hourly-section {
margin-top: 28px;
}
.hourly-title {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2.5px;
color: rgba(255, 255, 255, .5);
margin-bottom: 14px;
}
.hourly-chart-container {
width: 100%;
overflow: hidden;
background: rgba(0, 0, 0, .15);
border-radius: 12px;
padding: 15px 10px 8px;
border: 1px solid rgba(255, 255, 255, .04);
}
.hourly-chart-container svg {
display: block;
width: 100%;
height: auto;
}
.loading-state {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
font-size: 16px;
color: rgba(255, 255, 255, .7);
letter-spacing: .5px;
}
.loading-state::before {
content: '';
width: 32px;
height: 32px;
border: 3px solid rgba(255, 255, 255, .2);
border-top-color: rgba(255, 255, 255, .8);
border-radius: 50%;
animation: spin .8s linear infinite;
margin-right: 14px;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.error-state {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
font-size: 16px;
color: #ff6b6b;
text-align: center;
line-height: 1.6;
padding: 30px;
}
.hourly-btn {
margin-top: 18px;
text-align: center;
}
</style>
</head>
<body>
<div class="weather-card" id="weather-card">
<div class="loading-state">Loading weather data…</div>
</div>
<script>
(function() {
'use strict';
// ── Weather code mapping ──
function getWeatherCondition(code) {
const map = {
0: 'Clear sky',
1: 'Mainly clear',
2: 'Partly cloudy',
3: 'Overcast',
45: 'Foggy',
48: 'Rime fog',
51: 'Light drizzle',
53: 'Drizzle',
55: 'Dense drizzle',
56: 'Freezing drizzle',
57: 'Freezing drizzle',
61: 'Light rain',
63: 'Rain',
65: 'Heavy rain',
66: 'Freezing rain',
67: 'Freezing rain',
71: 'Light snow',
73: 'Snow',
75: 'Heavy snow',
77: 'Snow grains',
80: 'Light showers',
81: 'Rain showers',
82: 'Heavy rain showers',
85: 'Snow showers',
86: 'Snow showers',
95: 'Thunderstorm',
96: 'Thunderstorm w/ hail',
99: 'Thunderstorm w/ hail'
};
return map[code] || 'Unknown';
}
function getWeatherIcon(code) {
if (code === 0) return '☀️';
if (code === 1) return '🌤️';
if (code === 2) return '⛅';
if (code === 3) return '☁️';
if (code === 45 || code === 48) return '🌫️';
if (code >= 51 && code <= 57) return '🌦️';
if (code >= 61 && code <= 67) return '🌧️';
if (code >= 71 && code <= 77) return '❄️';
if (code >= 80 && code <= 82) return '🌧️';
if (code >= 85 && code <= 86) return '❄️';
if (code >= 95 && code <= 99) return '⛈️';
return '🌡️';
}
// ── Date formatting ──
function formatDate(dateStr) {
const d = new Date(dateStr + 'T00:00:00Z');
return d.toLocaleDateString('en-US', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
timeZone: 'UTC'
});
}
// ── Build SVG hourly chart ──
function buildHourlyChart(temps, times) {
const w = 660;
const h = 180;
const padL = 38;
const padR = 12;
const padT = 20;
const padB = 34;
const cw = w - padL - padR;
const ch = h - padT - padB;
const validTemps = [];
const validTimes = [];
for (let i = 0; i < temps.length; i++) {
if (temps[i] !== null && temps[i] !== undefined) {
validTemps.push(temps[i]);
validTimes.push(times[i]);
}
}
if (validTemps.length === 0) {
return '<p style="color:rgba(255,255,255,.5);text-align:center;padding:20px;">No hourly data</p>';
}
const minT = Math.min(...validTemps);
const maxT = Math.max(...validTemps);
const range = maxT - minT || 1;
const n = validTemps.length;
const points = validTemps.map((temp, i) => {
const x = padL + (i / (n - 1)) * cw;
const y = padT + ch - ((temp - minT) / range) * ch;
return { x, y, temp };
});
const polylinePts = points.map(p => `${p.x},${p.y}`).join(' ');
const polygonPts = `${padL},${padT + ch} ${polylinePts} ${padL + cw},${padT + ch}`;
let circles = '';
points.forEach(p => {
circles += `<circle cx="${p.x}" cy="${p.y}" r="3" fill="#101f2e" stroke="#ff9f43" stroke-width="2"/>`;
});
let labels = '';
const labelInterval = Math.max(1, Math.floor(n / 8));
for (let i = 0; i < n; i += labelInterval) {
const timeStr = validTimes[i].substring(11, 16);
labels += `<text x="${points[i].x}" y="${h - 8}" text-anchor="middle" fill="rgba(255,255,255,.5)" font-size="9">${timeStr}</text>`;
}
let tempLabels = '';
let maxP = points[0];
let minP = points[0];
points.forEach(p => {
if (p.temp > maxP.temp) maxP = p;
if (p.temp < minP.temp) minP = p;
});
tempLabels += `<text x="${maxP.x}" y="${maxP.y - 10}" text-anchor="middle" fill="#ff9f43" font-size="12" font-weight="700">${Math.round(maxP.temp)}°</text>`;
tempLabels += `<text x="${minP.x}" y="${minP.y + 16}" text-anchor="middle" fill="#54a0ff" font-size="11" font-weight="600">${Math.round(minP.temp)}°</text>`;
return `
<svg viewBox="0 0 ${w} ${h}" width="100%" style="height:auto;display:block;"
preserveAspectRatio="xMidYMid meet">
<defs>
<linearGradient id="tempGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="rgba(255,159,67,0.35)"/>
<stop offset="100%" stop-color="rgba(255,159,67,0.02)"/>
</linearGradient>
</defs>
<line x1="${padL}" y1="${padT + ch / 2}" x2="${padL + cw}" y2="${padT + ch / 2}"
stroke="rgba(255,255,255,0.08)" stroke-dasharray="6,4"/>
<polygon points="${polygonPts}" fill="url(#tempGrad)"/>
<polyline points="${polylinePts}" fill="none" stroke="#ff9f43" stroke-width="2.5"
stroke-linecap="round" stroke-linejoin="round"/>
${circles}
${labels}
${tempLabels}
</svg>`;
}
// ── Render weather card ──
function render(card, data) {
const condition = getWeatherCondition(data.weatherCode);
const icon = getWeatherIcon(data.weatherCode);
const formattedDate = formatDate(data.date);
const chartHtml = buildHourlyChart(data.hourlyTemps, data.hourlyTimes);
card.innerHTML = `
<div class="card-header">
<div class="location-name">${escHtml(data.locationName)}</div>
<div class="date-label">${formattedDate}</div>
</div>
<div class="weather-summary">
<div class="weather-info">
<div class="weather-icon">${icon}</div>
<div class="condition-text">${condition}</div>
</div>
<div class="temperatures">
<div class="temp-max">${Math.round(data.maxTemp)}°C</div>
<div class="temp-min">${Math.round(data.minTemp)}°C</div>
<div class="temp-labels">
<span>❄ Min</span>
<span>☀ Max</span>
</div>
</div>
</div>
<div class="hourly-section">
<div class="hourly-title">Hourly Temperature</div>
<div class="hourly-chart-container">
${chartHtml}
</div>
</div>`;
}
function escHtml(str) {
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g,
'"');
}
// ── Main init ──
async function init() {
const params = new URLSearchParams(window.location.search);
const lat = params.get('lat') || '52.52';
const lon = params.get('lon') || '13.405';
const name = params.get('name') || 'Berlin';
const date = params.get('date') || new Date().toISOString().split('T')[0];
const today = new Date().toISOString().split('T')[0];
const isPast = date < today;
const apiPath = isPast ? '/api/om/archive' : '/api/om/forecast';
const url = `${apiPath}?latitude=${encodeURIComponent(lat)}&longitude=${encodeURIComponent(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 card = document.getElementById('weather-card');
try {
card.innerHTML = '<div class="loading-state">Loading weather data…</div>';
const resp = await fetch(url);
if (!resp.ok) throw new Error('Network error: ' + resp.status);
const data = await resp.json();
if (!data.daily || !data.hourly || !data.daily.temperature_2m_max ||
!data.daily.temperature_2m_min || !data.daily.weather_code ||
!data.hourly.temperature_2m || !data.hourly.time) {
throw new Error('Invalid API response');
}
const maxTemp = data.daily.temperature_2m_max[0];
const minTemp = data.daily.temperature_2m_min[0];
const weatherCode = data.daily.weather_code[0];
const hourlyTemps = data.hourly.temperature_2m;
const hourlyTimes = data.hourly.time;
if (maxTemp === undefined || minTemp === undefined || weatherCode === undefined) {
throw new Error('Missing daily values');
}
render(card, {
locationName: name,
date: date,
maxTemp: maxTemp,
minTemp: minTemp,
weatherCode: weatherCode,
hourlyTemps: hourlyTemps,
hourlyTimes: hourlyTimes
});
} catch (err) {
card.innerHTML = '<div class="error-state">⚠️<br>Unable to load weather data.<br>Please try again later.</div>';
}
}
// Start
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 17,537 | html / css / js | 296 / 5,828 / 11,413 |
|---|---|---|---|
| dom nodes | 9 | dom depth | 4 |
| css rules | 27 | js present | yes |
| brightness | 32.3 | contrast | 15.4 |
| colorfulness | 18.8 | whitespace | 95.8% |
This slot's telemetry
| prompt tokens | 321 | completion tokens | 17,553 |
|---|---|---|---|
| total tokens | 17,874 | wall | 135.4 s |
| cost | — | request id | — |
config.json619 B
{
"N": 4,
"auth": {
"credential_ref": "WCB_DEEPSEEK_KEY",
"method": "api-key"
},
"billing": "metered",
"config_id": "deepseek-v4-flash-vision-exp-eff-low--api--official--dev",
"effort": "low",
"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": 145804,
"cost_usd": null,
"prompt_tokens": 2536,
"total_tokens": 148340,
"wall_ms": 1123980
},
"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-low--api--official--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-08-21T17:17:00.544093+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-21T17:14:42.966377+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-08-21T17:19:19.422964+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-21T17:17:04.038578+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-08-21T17:21:59.899606+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-21T17:19:22.903835+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-08-21T17:25:07.432151+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-21T17:22:03.506785+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-08-21T17:27:31.634961+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-21T17:25:11.025037+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-08-21T17:29:09.594391+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-21T17:27:35.367959+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-08-21T17:31:33.458206+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-21T17:29:12.503203+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-08-21T17:33:51.571051+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-21T17:31:37.262650+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
}
}
}