deepseek-v4-flash-vision-exp @ high · dsh
dshhigh
- config
- deepseek-v4-flash-vision-exp-eff-high--cli--dsh--dev
- batch
- 2026-07-19--unified
- transport
- dsh-0.1.0-rc.8-headless-isolated-home
- protocol
- cli · api
- served model
- deepseek-v4-flash-vision-exp
- 采集于
- 2026年7月18日 11:54 · N=2
variant
live
slot 0 · P-q · sandboxed iframe

截图是 similarity 通道测量时的原始像素。运行 live 会在 sandboxed iframe 中重新执行原始输出;渲染结果取决于你的浏览器和字体,不保证与测量像素一致。
similarity 邻居本 session 没有 similarity 数据 —— 这个 batch 没有计算 pairs。
Fidelity —— 卡片展示的数据对不对?
- namematch
- conditionmatch
- datematch
- max tempmatch展示值:25
- min tempmatch展示值:16
- hourlymismatchcoverage 1/24 · 1 命中 · 7 不符 · 16 未展示
- request sidematch0 处违规
extractor fidelity-extractor-v1+Berlin-2026-07-15
源码 —— 原始模型输出,一字节未改
下载 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{
--accent:#ffd77a;
--accent-2:#7fd7ff;
--glow:rgba(255,215,122,.24);
--ink:#eef4ff;
--muted:#9baccb;
--faint:#6d7fa0;
--card:rgba(255,255,255,.05);
--card-border:rgba(255,255,255,.11);
--chip:rgba(255,255,255,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
font-family:'Inter','SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
color:var(--ink);
min-height:100vh;
display:grid;
place-items:center;
padding:40px;
background:
radial-gradient(1200px 820px at 88% -12%, var(--glow), transparent 62%),
radial-gradient(1000px 720px at -8% 112%, rgba(127,215,255,.13), transparent 56%),
linear-gradient(158deg,#081424 0%,#0d2136 46%,#08192c 100%);
background-attachment:fixed;
-webkit-font-smoothing:antialiased;
transition:background 1.1s ease;
}
body::after{
content:"";
position:fixed;inset:0;pointer-events:none;
background:radial-gradient(900px 600px at 30% 20%, rgba(255,255,255,.05), transparent 60%);
mix-blend-mode:overlay;
}
.card{
position:relative;
width:min(920px,100%);
border-radius:28px;
padding:38px 42px 36px;
background:
linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.02) 60%),
var(--card);
border:1px solid var(--card-border);
box-shadow:
0 40px 90px -28px rgba(0,0,0,.65),
0 3px 14px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.12);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
overflow:hidden;
}
.card::before{
content:"";
position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
}
/* Header */
.head{
display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
}
.loc{min-width:0}
.loc-line{display:flex;align-items:center;gap:12px}
.pin{
width:34px;height:34px;border-radius:50%;
display:grid;place-items:center;flex:none;
background:rgba(127,215,255,.14);
border:1px solid rgba(127,215,255,.25);
color:var(--accent-2);
}
.pin svg{width:17px;height:17px;display:block}
.name{
font-size:30px;font-weight:650;letter-spacing:-.02em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.date{
margin-top:8px;font-size:14px;color:var(--muted);
display:flex;align-items:center;gap:8px;
}
.date .dot{width:4px;height:4px;border-radius:50%;background:#4a5b7a}
.utc-chip{
margin-left:2px;font-size:11px;font-weight:600;letter-spacing:.06em;
color:var(--accent-2);background:rgba(127,215,255,.12);
border:1px solid rgba(127,215,255,.2);
padding:2px 8px;border-radius:999px;
}
/* Condition chip (header right) */
.cond-chip{
display:flex;align-items:center;gap:11px;flex:none;
background:var(--chip);
border:1px solid var(--card-border);
border-radius:999px;padding:9px 16px 9px 12px;
}
.cond-chip .ic{width:30px;height:30px;display:grid;place-items:center}
.cond-chip .ic svg{width:30px;height:30px;display:block}
.cond-chip-label{font-size:13.5px;font-weight:600;color:#ddebff;letter-spacing:.01em}
/* Hero */
.hero{
display:flex;align-items:center;gap:34px;
margin-top:34px;
}
.hero-main{display:flex;align-items:center;gap:26px;flex:1}
.hero-ic{width:78px;height:78px;flex:none;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}
.hero-ic svg{width:100%;height:100%;display:block}
.hero-temps{display:flex;flex-direction:column}
.cond-label{font-size:17px;font-weight:600;color:#dfeaff;margin-bottom:6px}
.big-temp{
font-size:104px;line-height:.92;font-weight:800;letter-spacing:-.045em;
font-variant-numeric:tabular-nums;
}
.big-temp .deg{font-size:52px;font-weight:600;vertical-align:baseline;line-height:1;color:var(--accent-2)}
.hero-side{
flex:none;display:flex;flex-direction:column;gap:12px;
padding-left:30px;border-left:1px solid var(--card-border);
}
.stat{display:flex;flex-direction:column;gap:2px}
.stat .k{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.stat .v{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat.low .v{color:var(--accent-2)}
.stat.high .v{color:var(--accent)}
/* Range bar */
.rangebar{display:flex;align-items:center;gap:14px;margin-top:26px}
.rangebar .rv{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:52px;font-weight:600}
.rangebar .rv.max{text-align:right}
.rb-track{
position:relative;flex:1;height:8px;border-radius:999px;
background:linear-gradient(90deg,#3cc6ff,#7fd7ff 45%,#ffd77a 75%,#ff9d63);
box-shadow:inset 0 1px 2px rgba(0,0,0,.25);
}
.rangebar .min-clr{color:#7fd7ff}
.rangebar .max-clr{color:#ffb45e}
/* Chart */
.chart-wrap{margin-top:30px}
.chart-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.chart-title{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.chart-range{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.chart{position:relative}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.legend{
display:flex;gap:18px;margin-top:6px;font-size:11.5px;color:var(--faint);
font-variant-numeric:tabular-nums;
}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend .sw{width:8px;height:8px;border-radius:50%}
.peak{background:#ffd77a}.low{background:#7fd7ff}
/* Error / loading states */
.error{
width:min(920px,100%);border-radius:28px;padding:52px 44px;text-align:center;
background:rgba(255,255,255,.04);border:1px solid var(--card-border);
backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.error .e-ic{width:56px;height:56px;margin:0 auto 18px;color:#ff9d63;opacity:.9}
.error h2{font-size:22px;font-weight:650;letter-spacing:-.01em}
.error p{margin-top:10px;color:var(--muted);font-size:14.5px;line-height:1.6}
.error code{
display:inline-block;margin-top:14px;font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace;
font-size:12px;color:var(--faint);background:rgba(0,0,0,.25);
padding:7px 12px;border-radius:8px;word-break:break-all;max-width:100%;
}
[hidden]{display:none!important}
.loading{font-size:14px;color:var(--muted);letter-spacing:.02em}
.spinner{
width:26px;height:26px;margin:0 auto 16px;border-radius:50%;
border:3px solid rgba(255,255,255,.15);border-top-color:var(--accent-2);
animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
</style>
</head>
<body>
<div class="card" id="card" hidden>
<header class="head">
<div class="loc">
<div class="loc-line">
<span class="pin" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21s-6-5.3-6-10a6 6 0 1 1 12 0c0 4.7-6 10-6 10z"/><circle cx="12" cy="11" r="2.3"/></svg>
</span>
<h1 class="name" id="name">—</h1>
</div>
<div class="date" id="date">—</div>
</div>
<div class="cond-chip">
<span class="ic" id="condChipIcon"></span>
<span class="cond-chip-label" id="condChipLabel">—</span>
</div>
</header>
<section class="hero">
<div class="hero-main">
<div class="hero-ic" id="heroIcon"></div>
<div class="hero-temps">
<div class="cond-label" id="condLabel">—</div>
<div class="big-temp"><span id="tempMax">—</span><span class="deg">°C</span></div>
</div>
</div>
<div class="hero-side">
<div class="stat high"><span class="k">High</span><span class="v" id="statMax">—</span></div>
<div class="stat low"><span class="k">Low</span><span class="v" id="statMin">—</span></div>
</div>
</section>
<div class="rangebar" id="rangebar" hidden>
<span class="rv min-clr" id="rbMin">—</span>
<div class="rb-track"></div>
<span class="rv max-clr" id="rbMax">—</span>
</div>
<section class="chart-wrap">
<div class="chart-head">
<div class="chart-title">Hourly · 24h</div>
<div class="chart-range" id="chartRange">—</div>
</div>
<div class="chart" id="chart"></div>
<div class="legend">
<span><span class="sw peak"></span>Peak <b id="lgPeak"></b></span>
<span><span class="sw low"></span>Lowest <b id="lgLow"></b></span>
</div>
</section>
</div>
<div class="error" id="error" hidden>
<svg class="e-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/><line x1="12" y1="9" x2="12" y2="13.5"/><line x1="12" y1="17" x2="12" y2="17.01"/></svg>
<h2>Couldn't load the weather</h2>
<p id="errorMsg">Something went wrong while fetching weather data for this location.</p>
<code id="errorCode"></code>
</div>
<div class="loading" id="loading">
<div class="spinner"></div>
Loading weather…
</div>
<script>
(function(){
"use strict";
/* ---------- Weather (WMO code) lookup ---------- */
const WEATHER = {
0:{label:"Clear sky", cat:"clear"},
1:{label:"Mainly clear", cat:"clear"},
2:{label:"Partly cloudy", cat:"partly"},
3:{label:"Overcast", cat:"cloudy"},
45:{label:"Fog", cat:"fog"}, 48:{label:"Rime fog", cat:"fog"},
51:{label:"Light drizzle", cat:"drizzle"}, 53:{label:"Drizzle", cat:"drizzle"}, 55:{label:"Dense drizzle", cat:"drizzle"},
56:{label:"Freezing drizzle", cat:"drizzle"}, 57:{label:"Freezing drizzle", cat:"drizzle"},
61:{label:"Light rain", cat:"rain"}, 63:{label:"Rain", cat:"rain"}, 65:{label:"Heavy rain", cat:"rain"},
66:{label:"Freezing rain", cat:"rain"}, 67:{label:"Freezing rain", cat:"rain"},
71:{label:"Light snow", cat:"snow"}, 73:{label:"Snow", cat:"snow"}, 75:{label:"Heavy snow", cat:"snow"},
77:{label:"Snow grains", cat:"snow"},
80:{label:"Light rain showers", cat:"rain"}, 81:{label:"Rain showers", cat:"rain"}, 82:{label:"Heavy rain showers", cat:"rain"},
85:{label:"Snow showers", cat:"snow"}, 86:{label:"Snow showers", cat:"snow"},
95:{label:"Thunderstorm", cat:"thunder"}, 96:{label:"Thunderstorm · hail", cat:"thunder"}, 99:{label:"Thunderstorm · hail", cat:"thunder"}
};
/* ---------- Themes driven by weather category ---------- */
const THEMES = {
clear: {bg:"radial-gradient(1200px 820px at 88% -12%, rgba(255,214,105,.34), transparent 62%), radial-gradient(1000px 720px at -8% 112%, rgba(96,180,255,.2), transparent 56%), linear-gradient(158deg,#0d2a48 0%,#123b63 46%,#0a2540 100%)",
accent:"#ffd77a", accent2:"#8fd0ff", glow:"rgba(255,214,105,.22)"},
partly: {bg:"radial-gradient(1200px 820px at 88% -12%, rgba(140,196,255,.28), transparent 62%), radial-gradient(1000px 720px at -8% 112%, rgba(127,215,255,.16), transparent 56%), linear-gradient(158deg,#0a1c33 0%,#12334e 46%,#0a2036 100%)",
accent:"#bfe0ff", accent2:"#8fd0ff", glow:"rgba(140,196,255,.22)"},
cloudy: {bg:"radial-gradient(1200px 820px at 88% -12%, rgba(150,170,205,.2), transparent 62%), radial-gradient(1000px 720px at -8% 112%, rgba(120,150,190,.14), transparent 56%), linear-gradient(158deg,#0a1828 0%,#12304a 46%,#0a1f33 100%)",
accent:"#c6d6ee", accent2:"#9fb6d8", glow:"rgba(150,170,205,.14)"},
fog: {bg:"radial-gradient(1200px 820px at 88% -12%, rgba(170,185,210,.2), transparent 62%), radial-gradient(1000px 720px at -8% 112%, rgba(150,165,190,.15), transparent 56%), linear-gradient(158deg,#0a1a28 0%,#1a2c3c 46%,#14222e 100%)",
accent:"#cfe0ee", accent2:"#a9bccf", glow:"rgba(170,185,210,.16)"},
drizzle:{bg:"radial-gradient(1200px 820px at 88% -12%, rgba(98,160,214,.2), transparent 62%), radial-gradient(1000px 720px at -8% 112%, rgba(80,150,200,.16), transparent 56%), linear-gradient(158deg,#0a1826 0%,#123047 46%,#0a1b2c 100%)",
accent:"#9cc8ec", accent2:"#7fc2f0", glow:"rgba(98,160,214,.18)"},
rain: {bg:"radial-gradient(1200px 820px at 88% -12%, rgba(70,120,180,.22), transparent 62%), radial-gradient(1000px 720px at -8% 112%, rgba(60,110,170,.16), transparent 56%), linear-gradient(158deg,#081521 0%,#102c42 46%,#081a29 100%)",
accent:"#7fb4e6", accent2:"#6fb4ec", glow:"rgba(70,120,180,.2)"},
snow: {bg:"radial-gradient(1200px 820px at 88% -12%, rgba(210,230,255,.24), transparent 62%), radial-gradient(1000px 720px at -8% 112%, rgba(180,210,245,.16), transparent 56%), linear-gradient(158deg,#0d1a2b 0%,#243a52 46%,#122231 100%)",
accent:"#e8f3ff", accent2:"#cfe6ff", glow:"rgba(210,230,255,.22)"},
thunder:{bg:"radial-gradient(1200px 820px at 88% -12%, rgba(120,90,190,.28), transparent 62%), radial-gradient(1000px 720px at -8% 112%, rgba(90,70,150,.18), transparent 56%), linear-gradient(158deg,#12102a 0%,#241b45 46%,#160f2c 100%)",
accent:"#d7c2ff", accent2:"#e0b6ff", glow:"rgba(150,110,220,.24)"}
};
/* ---------- SVG icon builders (per category) ---------- */
const uid = (function(){let n=0;return () => "g"+(++n);})();
const svg = (body,vb) => '<svg viewBox="0 0 64 64" preserveAspectRatio="xMidYMid meet" fill="none" xmlns="http://www.w3.org/2000/svg">'+body+'</svg>';
function sunBase(){
const id=uid();
let rays="";
for(let i=0;i<8;i++){
const a=i*Math.PI/4;
const x1=32+Math.cos(a)*18, y1=32+Math.sin(a)*18;
const x2=32+Math.cos(a)*24, y2=32+Math.sin(a)*24;
rays+='<line x1="'+x1.toFixed(1)+'" y1="'+y1.toFixed(1)+'" x2="'+x2.toFixed(1)+'" y2="'+y2.toFixed(1)+'"/>';
}
return {
defs:'<defs><radialGradient id="'+id+'" cx="50%" cy="42%" r="60%"><stop offset="0%" stop-color="#fff3c4"/><stop offset="55%" stop-color="#ffd868"/><stop offset="100%" stop-color="#ffb23e"/></radialGradient></defs>',
core:'<circle cx="32" cy="32" r="12" fill="url(#'+id+')"/>'+
'<g stroke="#ffd77a" stroke-width="2.6" stroke-linecap="round" opacity="0.95">'+rays+'</g>'
};
}
function cloudBody(fill){
// layered soft cloud
return '<path d="M22 47 a11 11 0 0 1 -1.5 -21.9 a14 14 0 0 1 26.8 -3.4 a9.5 9.5 0 0 1 4 18.3 a11 11 0 0 1 -3.3 7z" fill="'+fill+'"/>';
}
function icon(cat){
const c='#dfe9f8', c2='#b9cfe9';
switch(cat){
case "clear":{const s=sunBase();return svg(s.defs+s.core);}
case "partly":{const s=sunBase();return svg(s.defs+ s.core.replace('r="12"','r="10"') + '<path d="M8 38 a10 10 0 0 1 1 -20 a13 13 0 0 1 25 -3 a9 9 0 0 1 4 17 a10 10 0 0 1 -3 6z" fill="'+c2+'" opacity="0.92"/>');}
case "cloudy":return svg(cloudBody(c));
case "fog":return svg(cloudBody(c2)+'<g stroke="#dbe7f4" stroke-width="2.4" stroke-linecap="round" opacity="0.85"><line x1="10" y1="50" x2="54" y2="50"/><line x1="16" y1="56" x2="48" y2="56"/></g>');
case "drizzle":return svg(cloudBody(c)+'<g fill="none" stroke="#7fc2f0" stroke-width="2.4" stroke-linecap="round"><line x1="22" y1="50" x2="20" y2="56"/><line x1="32" y1="50" x2="30" y2="56"/><line x1="42" y1="50" x2="40" y2="56"/></g>');
case "rain":return svg(cloudBody(c)+'<g fill="none" stroke="#6fb6f0" stroke-width="2.6" stroke-linecap="round" opacity="0.95"><line x1="20" y1="49" x2="17" y2="57"/><line x1="32" y1="49" x2="29" y2="57"/><line x1="44" y1="49" x2="41" y2="57"/></g>');
case "snow":return svg(cloudBody(c)+'<g fill="#eaf4ff"><circle cx="20" cy="51" r="2.4"/><circle cx="32" cy="53" r="2.4"/><circle cx="43" cy="51" r="2.4"/><circle cx="26" cy="57" r="2"/><circle cx="38" cy="57" r="2"/></g>');
case "thunder":return svg(cloudBody(c)+'<path d="M32 48 L26 57 h7 L28 64 l12 -10 h-8 l4 -6z" fill="#ffd868" stroke="none"/>');
default:return svg(cloudBody(c));
}
}
/* ---------- Query helpers ---------- */
function qs(name, def){
const v = new URLSearchParams(location.search).get(name);
return (v===null || v.trim()==="") ? def : v.trim();
}
function pad(n){return String(n).padStart(2,"0");}
function todayUTC(){
const d=new Date();
return d.getUTCFullYear()+"-"+pad(d.getUTCMonth()+1)+"-"+pad(d.getUTCDate());
}
function fmtDate(dateStr){
const d=new Date(dateStr+"T00:00:00Z");
return d.toLocaleDateString("en-US",{weekday:"long",year:"numeric",month:"long",day:"numeric",timeZone:"UTC"});
}
/* ---------- Render ---------- */
const $=id=>document.getElementById(id);
function applyTheme(cat){
const t=THEMES[cat]||THEMES.cloudy;
const r=document.documentElement.style;
r.setProperty("--accent",t.accent);
r.setProperty("--accent-2",t.accent2);
r.setProperty("--glow",t.glow);
document.body.style.background=t.bg;
}
function buildChart(hours){
// chart dimensions
const W=920, H=280, padL=16, padR=16, padT=22, padB=40;
const cur=hours.map(d=>d.t);
let mn=Math.min(...cur), mx=Math.max(...cur);
if(mn===mx){mn-=0.5;mx+=0.5;}
const span=mx-mn;
const rangeMin=mn-span*0.12, rangeMax=mx+span*0.12;
const x=i=>padL+i*(W-padL-padR)/(hours.length-1);
const y=v=>padT+(rangeMax-v)/(rangeMax-rangeMin)*(H-padT-padB);
const pts=cur.map((v,i)=>({x:x(i),y:y(v)}));
// smooth path (Catmull-Rom -> Bezier)
function smooth(pts){
let d="M "+pts[0].x.toFixed(1)+","+pts[0].y.toFixed(1);
for(let i=0;i<pts.length-1;i++){
const p0=pts[i-1]||pts[i],p1=pts[i],p2=pts[i+1],p3=pts[i+2]||p2;
const c1x=p1.x+(p2.x-p0.x)/6, c1y=p1.y+(p2.y-p0.y)/6;
const c2x=p2.x-(p3.x-p1.x)/6, c2y=p2.y-(p3.y-p1.y)/6;
d+=" C "+c1x.toFixed(1)+","+c1y.toFixed(1)+" "+c2x.toFixed(1)+","+c2y.toFixed(1)+" "+p2.x.toFixed(1)+","+p2.y.toFixed(1);
}
return d;
}
const line=smooth(pts);
const area=line+" L "+x(pts.length-1).toFixed(1)+","+(H-padB)+" L "+x(0).toFixed(1)+","+(H-padB)+" Z";
const fy=uid(), af=uid();
// markers: peak & low
const peakIdx=cur.indexOf(mx), lowIdx=cur.indexOf(mn);
const dot=(idx,color,r)=>'<circle cx="'+x(idx).toFixed(1)+'" cy="'+y(cur[idx]).toFixed(1)+'" r="'+r+'" fill="'+color+'" stroke="#0c1a2d" stroke-width="2.5"/>';
// x labels (hours)
let labels="";
const step=Math.max(1,Math.round(hours.length/8));
for(let i=0;i<hours.length;i+=step){
const t=hours[i];
labels+='<text x="'+x(i).toFixed(1)+'" y="'+(H-14)+'" text-anchor="middle" fill="#7c8cac" font-size="12">'+t.h+":00</text>";
}
// y gridlines
let grid="";
const gNum=4;
for(let g=0;g<=gNum;g++){
const gy=padT+g*(H-padT-padB)/gNum;
const val=rangeMax-(rangeMax-rangeMin)*g/gNum;
grid+='<line x1="'+padL+'" y1="'+gy.toFixed(1)+'" x2="'+(W-padR)+'" y2="'+gy.toFixed(1)+'" stroke="rgba(255,255,255,0.05)" stroke-width="1"/>';
grid+='<text x="'+(padL-2)+'" y="'+(gy+4).toFixed(1)+'" text-anchor="end" fill="#6d7fa0" font-size="11">'+Math.round(val)+"°</text>";
}
return '<svg viewBox="0 0 '+W+' '+H+'" preserveAspectRatio="xMidYMid meet">'+
'<defs>'+
'<linearGradient id="'+fy+'" x1="0" y1="0" x2="0" y2="1">'+
'<stop offset="0%" stop-color="var(--accent-2)" stop-opacity="0.42"/>'+
'<stop offset="100%" stop-color="var(--accent-2)" stop-opacity="0"/>'+
'</linearGradient>'+
'<filter id="'+af+'" x="-20%" y="-20%" width="140%" height="140%">'+
'<feDropShadow dx="0" dy="4" stdDeviation="5" flood-color="#000" flood-opacity="0.3"/>'+
'</filter>'+
'</defs>'+
grid+
'<path d="'+area+'" fill="url(#'+fy+')"/>'+
'<path d="'+line+'" fill="none" stroke="var(--accent)" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" filter="url(#'+af+')"/>'+
dot(peakIdx,"#ffd77a",5.5)+dot(lowIdx,"#7fd7ff",5.5)+
labels+
'</svg>';
}
function render(data, meta){
const daily=data.daily||{}, hourly=data.hourly||{};
if(!daily.time||!daily.time.length) throw new Error("The API returned no matching day ("+(meta.date)+").");
const dayIdx=daily.time.indexOf(meta.date);
if(dayIdx<0) throw new Error("No weather data found for "+meta.date+".");
const tMax=daily.temperature_2m_max[dayIdx];
const tMin=daily.temperature_2m_min[dayIdx];
const code=daily.weather_code[dayIdx];
const info=WEATHER[code]||{label:"Unknown",cat:"cloudy"};
// hourly for this date only
const hours=[];
if(hourly.time&&hourly.temperature_2m){
for(let i=0;i<hourly.time.length;i++){
if(hourly.time[i].slice(0,10)===meta.date){
hours.push({h:hourly.time[i].slice(11,13),t:hourly.temperature_2m[i]});
}
}
}
// apply visual theme
applyTheme(info.cat);
// header
$("name").textContent=meta.name;
$("date").innerHTML=fmtDate(meta.date)+'<span class="dot"></span><span class="utc-chip">UTC</span>';
$("condChipIcon").innerHTML=icon(info.cat);
$("condChipLabel").textContent=info.label;
// hero
document.title="Weather · "+meta.name;
$("heroIcon").innerHTML=icon(info.cat);
$("condLabel").textContent=info.label;
$("tempMax").textContent=Math.round(tMax);
$("statMax").textContent=Math.round(tMax)+"°C";
$("statMin").textContent=Math.round(tMin)+"°C";
// range bar
$("rangebar").hidden=false;
$("rbMin").textContent=Math.round(tMin)+"°";
$("rbMax").textContent=Math.round(tMax)+"°";
// chart
if(hours.length){
$("chartInner").innerHTML=buildChart(hours);
const temps=hours.map(h=>h.t);
$("chartRange").textContent=Math.round(Math.min(...temps))+"° / "+Math.round(Math.max(...temps))+"°";
$("lgPeak").textContent=Math.round(Math.max(...temps))+"°";
$("lgLow").textContent=Math.round(Math.min(...temps))+"°";
$("chartEmpty").hidden=true;
} else {
$("chartEmpty").hidden=false;
}
}
function showError(err, meta){
const e=$("error");
$("errorMsg").textContent=meta
? "We couldn't load weather data for “"+meta.name+"” ("+meta.date+"). Please try again."
: "Something went wrong while fetching the weather data.";
$("errorCode").textContent=(err&&err.message)?err.message:"";
e.hidden=false;
}
function main(){
$("loading").hidden=false;
const lat=parseFloat(qs("lat","52.52"));
const lon=parseFloat(qs("lon","13.405"));
const name=qs("name","Berlin");
const date=qs("date", todayUTC());
const meta={date:date,name:name};
if(!isFinite(lat)||!isFinite(lon)){
showError(new Error("Invalid latitude/longitude parameters."),null);
return;
}
const today=todayUTC();
// Open-Meteo only covers the future/today via /forecast, past via /archive
const endpoint=(date>=today)?"/api/om/forecast":"/api/om/archive";
const url=endpoint
+"?latitude="+(lat.toFixed(4))
+"&longitude="+(lon.toFixed(4))
+"&daily=temperature_2m_max,temperature_2m_min,weather_code"
+"&hourly=temperature_2m"
+"&timezone=UTC"
+"&temperature_unit=celsius"
+"&start_date="+date
+"&end_date="+date;
fetch(url)
.then(function(res){
if(!res.ok) throw new Error("HTTP "+res.status+" "+res.statusText+" from "+endpoint);
return res.json();
})
.then(function(json){
$("loading").hidden=true;
$("card").hidden=false;
render(json, meta);
})
.catch(function(err){
$("loading").hidden=true;
showError(err, meta);
});
}
// inject a stable chart slot so buildChart can target it
const cw=$("chart");
cw.innerHTML='<div id="chartInner"></div><div id="chartEmpty" hidden style="text-align:center;color:var(--faint);font-size:13px;padding:12px 0">Hourly data unavailable for this day.</div>';
main();
})();
</script>
</body>
</html>L1 —— 廉价的确定性描述量
| bytes 总计 | 24,218 | html / css / js | 2,709 / 6,784 / 14,725 |
|---|---|---|---|
| dom 节点 | 62 | dom 深度 | 8 |
| css 规则 | 61 | 含 js | 是 |
| brightness | 53.0 | contrast | 24.5 |
| colorfulness | 22.8 | 留白 | 43.6% |
该 slot 的 telemetry
| prompt tokens | 21,599 | completion tokens | 37,193 |
|---|---|---|---|
| total tokens | 58,792 | wall | 319.2 s |
| cost | — | request id | — |
config.json627 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_DEEPSEEK_KEY",
"method": "api-key"
},
"billing": "api",
"config_id": "deepseek-v4-flash-vision-exp-eff-high--cli--dsh--dev",
"effort": "high",
"family": "deepseek",
"m": {
"min": 2,
"q": 2
},
"model_id": "deepseek-v4-flash-vision-exp",
"protocol": "cli",
"served_model": "deepseek-v4-flash-vision-exp",
"telemetry": {
"completion_tokens": 70741,
"cost_usd": null,
"prompt_tokens": 63410,
"total_tokens": 134151,
"wall_ms": 588511
},
"transport": "dsh-0.1.0-rc.8-headless-isolated-home",
"vendor_sanction_ref": null
}send-log2.5 KB
{
"N": 2,
"batch_id": "2026-08-22--dsh-vision-s0",
"config_id": "deepseek-v4-flash-vision-exp-eff-high--cli--dsh--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-08-21T17:03:31.110740+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-21T16:58:11.921736+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:04:49.460935+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-21T17:03:36.130659+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:05:57.811873+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-21T17:04:52.803846+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:08:12.245153+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-21T17:06:01.255951+00:00"
}
],
"block_index": 1,
"model_reaching_attempt_index": 0,
"slot_index": 1,
"terminal_state": "valid",
"variant": "P-q"
}
],
"retry_policy": {
"max_unreachable_retries": 5,
"rate_limit_backoff": {
"max_attempts": 4,
"max_total_ms": 60000
}
}
}