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
deepseek-v4-flash-vision-exp @high · dsh P-q slot 0 截图

截图是 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,218html / css / js2,709 / 6,784 / 14,725
dom 节点62dom 深度8
css 规则61含 js
brightness53.0contrast24.5
colorfulness22.8留白43.6%

该 slot 的 telemetry

prompt tokens21,599completion tokens37,193
total tokens58,792wall319.2 s
costrequest 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
    }
  }
}