deepseek-v4-flash-vision-exp @ xhigh · api
apixhigh
- config
- deepseek-v4-flash-vision-exp-eff-xhigh--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 tempmatchshown: 25
- min tempmatchshown: 16
- hourlymismatchcoverage 3/24 · 3 match · 6 mismatch · 15 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>
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, #0b1220 0%, #132744 55%, #1e3d5c 100%);
background-attachment: fixed;
overflow: hidden;
transition: background 1s ease;
}
.weather-card {
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-radius: 28px;
box-shadow:
0 8px 32px rgba(2, 8, 20, .28),
0 1px 3px rgba(0, 0, 0, .08),
inset 0 1px 0 rgba(255, 255, 255, .65);
width: 920px;
max-width: calc(100vw - 48px);
padding: 40px 48px 36px;
position: relative;
overflow: hidden;
}
.weather-card::before {
content: "";
position: absolute;
top: -90px;
right: -90px;
width: 220px;
height: 220px;
border-radius: 50%;
background: radial-gradient(circle, rgba(99, 102, 241, .14), transparent 70%);
pointer-events: none;
}
.weather-card::after {
content: "";
position: absolute;
bottom: -60px;
left: -60px;
width: 180px;
height: 180px;
border-radius: 50%;
background: radial-gradient(circle, rgba(14, 165, 233, .1), transparent 70%);
pointer-events: none;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 18px;
border-bottom: 1px solid rgba(15, 23, 42, .06);
margin-bottom: 28px;
position: relative;
z-index: 1;
}
.location-pin {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 22px;
font-weight: 700;
color: #0f172a;
letter-spacing: -.3px;
}
.location-pin svg {
width: 20px;
height: 20px;
color: #6366f1;
fill: currentColor;
}
.location-date {
font-size: 13px;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: .8px;
background: rgba(100, 116, 139, .08);
padding: 6px 14px;
border-radius: 20px;
border: 1px solid rgba(100, 116, 139, .12);
}
.weather-main {
display: flex;
align-items: center;
justify-content: center;
gap: 48px;
padding: 8px 0 24px;
position: relative;
z-index: 1;
}
.icon-wrap {
width: 150px;
height: 150px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 68px;
background: linear-gradient(145deg, #eef2ff 0%, #dbeafe 50%, #e0e7ff 100%);
box-shadow:
inset 0 2px 8px rgba(255, 255, 255, .8),
0 8px 24px rgba(99, 102, 241, .12);
flex-shrink: 0;
position: relative;
}
.icon-wrap::after {
content: "";
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
width: 90px;
height: 10px;
border-radius: 50%;
background: rgba(0, 0, 0, .04);
filter: blur(6px);
}
.info-wrap {
display: flex;
flex-direction: column;
gap: 2px;
}
.condition-text {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: #6366f1;
margin-bottom: 2px;
}
.temp-big {
font-size: 88px;
font-weight: 200;
line-height: 1;
color: #0f172a;
letter-spacing: -5px;
display: flex;
align-items: flex-start;
}
.temp-big .unit {
font-size: 32px;
font-weight: 300;
letter-spacing: 0;
color: #64748b;
margin-top: 14px;
margin-left: 2px;
}
.temp-range {
display: flex;
gap: 12px;
margin-top: 10px;
}
.temp-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: 600;
padding: 4px 12px;
border-radius: 12px;
background: rgba(255, 255, 255, .7);
border: 1px solid rgba(0, 0, 0, .06);
box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.temp-badge.max .val {
color: #d97706;
}
.temp-badge.min .val {
color: #3b82f6;
}
.hourly-section {
border-top: 1px solid rgba(15, 23, 42, .06);
padding-top: 20px;
position: relative;
z-index: 1;
}
.hourly-head {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 14px;
}
.hourly-head .line {
flex: 1;
height: 1px;
background: rgba(15, 23, 42, .08);
}
.hourly-head .title {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
color: #94a3b8;
white-space: nowrap;
}
.chart-wrap {
width: 100%;
overflow: hidden;
border-radius: 12px;
background: rgba(248, 250, 252, .6);
padding: 12px 8px 4px;
}
.loading,
.error-message {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 360px;
text-align: center;
color: #64748b;
font-size: 15px;
font-weight: 500;
position: relative;
z-index: 1;
}
.spinner {
width: 44px;
height: 44px;
border-radius: 50%;
border: 3px solid rgba(99, 102, 241, .2);
border-top-color: #6366f1;
animation: spin .7s linear infinite;
margin-bottom: 16px;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.error-icon {
font-size: 52px;
margin-bottom: 14px;
}
.error-detail {
font-size: 12px;
color: #94a3b8;
margin-top: 6px;
max-width: 320px;
}
</style>
</head>
<body>
<div class="weather-card">
<div id="content">
<div class="loading">
<div class="spinner"></div>
<span>Fetching forecast…</span>
</div>
</div>
</div>
<script>
(function() {
'use strict';
// ── URL 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 rawName = params.get('name') || 'Berlin';
const name = escapeHtml(rawName);
const dateParam = params.get('date') || '';
// Validate date
const todayUTC = new Date().toISOString().split('T')[0];
const targetDate = /^\d{4}-\d{2}-\d{2}$/.test(dateParam) ? dateParam : todayUTC;
// ── Determine API endpoint ────────────────────
const isPast = targetDate < todayUTC;
const endpoint = isPast ? '/api/om/archive' : '/api/om/forecast';
const url = endpoint +
'?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=' + targetDate +
'&end_date=' + targetDate;
// ── Weather code mapping ───────────────────────
const weatherMap = {
0: { label: 'Clear Sky', icon: '☀️' },
1: { label: 'Mainly Clear', icon: '🌤️' },
2: { label: 'Partly Cloudy', icon: '⛅' },
3: { label: 'Overcast', icon: '☁️' },
45: { label: 'Fog', icon: '🌫️' },
48: { label: 'Fog', icon: '🌫️' },
51: { label: 'Drizzle', icon: '🌦️' },
53: { label: 'Drizzle', icon: '🌦️' },
55: { label: 'Drizzle', icon: '🌦️' },
56: { label: 'Freezing Drizzle', icon: '🌧️' },
57: { label: 'Freezing Drizzle', icon: '🌧️' },
61: { label: 'Rain', icon: '🌧️' },
63: { label: 'Rain', icon: '🌧️' },
65: { label: 'Heavy Rain', icon: '🌧️' },
66: { label: 'Freezing Rain', icon: '🌧️' },
67: { label: 'Freezing Rain', icon: '🌧️' },
71: { label: 'Snow', icon: '❄️' },
73: { label: 'Snow', icon: '❄️' },
75: { label: 'Heavy Snow', icon: '❄️' },
77: { label: 'Snow Grains', icon: '❄️' },
80: { label: 'Rain Showers', icon: '🌦️' },
81: { label: 'Rain Showers', icon: '🌦️' },
82: { label: 'Rain Showers', icon: '🌦️' },
85: { label: 'Snow Showers', icon: '❄️' },
86: { label: 'Snow Showers', icon: '❄️' },
95: { label: 'Thunderstorm', icon: '⛈️' },
96: { label: 'Thunderstorm', icon: '⛈️' },
99: { label: 'Thunderstorm', icon: '⛈️' }
};
function getWeatherInfo(code) {
return weatherMap[code] || { label: 'Unknown', icon: '❓' };
}
// ── Helpers ─────────────────────────────────────
function escapeHtml(str) {
const div = document.createElement('div');
div.appendChild(document.createTextNode(str));
return div.innerHTML;
}
function formatDate(dateStr) {
const parts = dateStr.split('-').map(Number);
const d = new Date(Date.UTC(parts[0], parts[1] - 1, parts[2]));
return d.toLocaleDateString('en-US', {
weekday: 'short',
month: 'short',
day: 'numeric',
year: 'numeric',
timeZone: 'UTC'
});
}
function getBackground(code) {
const c = [code];
if (code === 0) return 'linear-gradient(145deg, #0b1220, #132744, #1e3d5c)';
if ([1, 2].includes(code)) return 'linear-gradient(145deg, #0b1220, #132744, #256a8a)';
if (code === 3) return 'linear-gradient(145deg, #1a1f2e, #2d3345, #3e4459)';
if ([45, 48].includes(code)) return 'linear-gradient(145deg, #2a2a35, #3d3d4a, #4e4e5a)';
if ([51, 53, 55, 56, 57, 61, 63, 65, 66, 67, 80, 81, 82].includes(code))
return 'linear-gradient(145deg, #0d1b2a, #1b2838, #2a3f56)';
if ([71, 73, 75, 77, 85, 86].includes(code))
return 'linear-gradient(145deg, #b8c6db, #d0e0f0, #e8f0fa)';
if ([95, 96, 99].includes(code))
return 'linear-gradient(145deg, #0b0b1a, #14142a, #1e1e3a)';
return 'linear-gradient(145deg, #0b1220, #132744, #1e3d5c)';
}
// ── Hourly chart generator ──────────────────────
function generateChart(times, temps) {
if (!times.length) {
return '<div style="text-align:center;color:#94a3b8;padding:20px;">No hourly data available.</div>';
}
const width = 820;
const height = 190;
const margin = { top: 24, bottom: 34, left: 56, right: 20 };
const cw = width - margin.left - margin.right;
const ch = height - margin.top - margin.bottom;
const bw = cw / times.length;
const minT = Math.min(...temps);
const maxT = Math.max(...temps);
const range = Math.max(maxT - minT, 0.1);
let grid = '';
const gridCount = 4;
for (let i = 0; i <= gridCount; i++) {
const y = margin.top + (ch / gridCount) * i;
const val = maxT - (range / gridCount) * i;
grid += '<line x1="' + margin.left + '" y1="' + y +
'" x2="' + (width - margin.right) + '" y2="' + y +
'" stroke="rgba(15,23,42,.05)" stroke-width="1"/>';
grid += '<text x="' + (margin.left - 10) + '" y="' + (y + 4) +
'" text-anchor="end" font-size="11" fill="#94a3b8">' +
Math.round(val) + '°</text>';
}
let bars = '';
let labels = '';
const labelStep = Math.max(1, Math.ceil(times.length / 8));
for (let i = 0; i < times.length; i++) {
const x = margin.left + i * bw;
const bh = Math.max(((temps[i] - minT) / range) * ch, 2);
const y = margin.top + ch - bh;
const bwid = Math.max(bw * 0.62, 5);
const bx = x + (bw - bwid) / 2;
const ratio = (temps[i] - minT) / range;
const hue = 220 - ratio * 220;
const color = 'hsl(' + hue + ',72%,52%)';
bars += '<rect x="' + bx.toFixed(1) + '" y="' + y.toFixed(1) +
'" width="' + bwid.toFixed(1) + '" height="' + Math.max(bh, 3).toFixed(1) +
'" rx="4" fill="' + color + '" opacity="0.85"/>';
if (i % labelStep === 0 || i === times.length - 1) {
const hh = times[i].slice(11, 16) || '00:00';
labels += '<text x="' + (x + bw / 2).toFixed(1) +
'" y="' + (height - 8) + '" text-anchor="middle" font-size="10" fill="#94a3b8">' +
hh + '</text>';
bars += '<text x="' + (x + bw / 2).toFixed(1) +
'" y="' + (y - 5).toFixed(1) + '" text-anchor="middle" font-size="10" fill="#334155" font-weight="700">' +
Math.round(temps[i]) + '°</text>';
}
}
return '<svg viewBox="0 0 ' + width + ' ' + height +
'" width="100%" height="' + height + '" style="display:block" role="img">' +
grid + bars + labels + '</svg>';
}
// ── Fetch & render ──────────────────────────────
async function load() {
const content = document.getElementById('content');
try {
const res = await fetch(url);
if (!res.ok) throw new Error('HTTP ' + res.status);
const data = await res.json();
// Daily data
const dTimes = data.daily && data.daily.time ? data.daily.time : [];
const dMax = data.daily && data.daily.temperature_2m_max ? data.daily.temperature_2m_max : [];
const dMin = data.daily && data.daily.temperature_2m_min ? data.daily.temperature_2m_min : [];
const dCode = data.daily && data.daily.weather_code ? data.daily.weather_code : [];
const idx = dTimes.findIndex(function(t) {
return t === targetDate || t.startsWith(targetDate);
});
if (idx === -1) throw new Error('No data for ' + targetDate);
const maxT = dMax[idx];
const minT = dMin[idx];
const code = dCode[idx];
const wx = getWeatherInfo(code);
// Hourly
const hTimes = data.hourly && data.hourly.time ? data.hourly.time : [];
const hTemps = data.hourly && data.hourly.temperature_2m ? data.hourly.temperature_2m : [];
const filteredTimes = [];
const filteredTemps = [];
for (let i = 0; i < hTimes.length; i++) {
if (hTimes[i].startsWith(targetDate)) {
filteredTimes.push(hTimes[i]);
filteredTemps.push(hTemps[i]);
}
}
// Update background
document.body.style.background = getBackground(code);
const dateStr = formatDate(targetDate);
content.innerHTML =
'<div class="card-header">' +
'<span class="location-pin">' +
'<svg viewBox="0 0 20 20" fill="currentColor"><path d="M10 2C6.1 2 3 5.1 3 9c0 5.5 7 11 7 11s7-5.5 7-11c0-3.9-3.1-7-7-7zm0 9.5c-1.4 0-2.5-1.1-2.5-2.5S8.6 6.5 10 6.5s2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5z"/></svg>' +
name + '</span>' +
'<span class="location-date">' + dateStr + '</span>' +
'</div>' +
'<div class="weather-main">' +
'<div class="icon-wrap">' + wx.icon + '</div>' +
'<div class="info-wrap">' +
'<div class="condition-text">' + wx.label + '</div>' +
'<div class="temp-big">' + Math.round(maxT) + '<span class="unit">°C</span></div>' +
'<div class="temp-range">' +
'<span class="temp-badge max">Max <span class="val">' + Math.round(maxT) + '°</span></span>' +
'<span class="temp-badge min">Min <span class="val">' + Math.round(minT) + '°</span></span>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="hourly-section">' +
'<div class="hourly-head">' +
'<div class="line"></div>' +
'<span class="title">Hourly Temperatures</span>' +
'<div class="line"></div>' +
'</div>' +
'<div class="chart-wrap">' +
generateChart(filteredTimes, filteredTemps) +
'</div>' +
'</div>';
} catch (err) {
document.body.style.background = getBackground(0);
content.innerHTML =
'<div class="error-message">' +
'<div class="error-icon">⚠️</div>' +
'<strong>Unable to load weather data</strong>' +
'<div class="error-detail">' + escapeHtml(err.message) + '</div>' +
'</div>';
}
}
load();
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 21,074 | html / css / js | 478 / 7,498 / 13,098 |
|---|---|---|---|
| dom nodes | 13 | dom depth | 6 |
| css rules | 31 | js present | yes |
| brightness | 143.3 | contrast | 98.9 |
| colorfulness | 33.4 | whitespace | 47.8% |
This slot's telemetry
| prompt tokens | 400 | completion tokens | 21,823 |
|---|---|---|---|
| total tokens | 22,223 | wall | 183.2 s |
| cost | — | request id | — |
config.json623 B
{
"N": 4,
"auth": {
"credential_ref": "WCB_DEEPSEEK_KEY",
"method": "api-key"
},
"billing": "metered",
"config_id": "deepseek-v4-flash-vision-exp-eff-xhigh--api--official--dev",
"effort": "xhigh",
"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": 207294,
"cost_usd": null,
"prompt_tokens": 3168,
"total_tokens": 210462,
"wall_ms": 1762467
},
"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-xhigh--api--official--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-09-02T02:30:54.520339+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-09-02T02:27:51.343035+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:35:11.368973+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-09-02T02:30:57.949008+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:37:19.708004+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-09-02T02:35:15.225040+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:41:14.945236+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-09-02T02:37:23.059867+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:43:19.271897+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-09-02T02:41:18.217777+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:49:39.855346+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-09-02T02:43:22.802817+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:55:05.568276+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-09-02T02:49:43.471670+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:57:38.713730+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-09-02T02:55:09.385129+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
}
}
}