claude-opus-4-8 @ max · CC
CCmax
- config
- claude-opus-4-8-eff-max--cli--claude-code--dev
- batch
- 2026-07-19--unified
- transport
- claude-code-cli-headless
- protocol
- cli · plan
- served model
- claude-opus-4-8
- 采集于
- 2026年7月18日 11:54 · N=2
variant
live
slot 0 · P-q · sandboxed iframe
截图是 similarity 通道测量时的原始像素。运行 live 会在 sandboxed iframe 中重新执行原始输出;渲染结果取决于你的浏览器和字体,不保证与测量像素一致。
similarity 邻居
最近
qwen3.8-max-preview · qoder0.69gpt-5.6-terra @low · codex-oauth0.66claude-opus-4-7 @low · kiro0.64claude-opus-4-8 @high · kiro0.64gpt-5.6-terra @low · kiro0.64最远
claude-haiku-4-5 @xhigh · CC0.38minimax-m2.7 · go0.41claude-haiku-4-5 @medium · CC0.42claude-haiku-4-5 @high · CC0.42claude-fable-5 · CC0.42限于 session 2026-07-19--unified
similarity 衡量本 session 内的趋同程度 —— 不是质量。
Fidelity —— 卡片展示的数据对不对?
- namematch
- conditionmatch
- datematch
- max tempmatch展示值:25
- min tempmatch展示值:16
- hourlyambiguouscoverage · 0 命中 · 0 不符 · 24 未展示
- 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=1280, initial-scale=1">
<meta name="color-scheme" content="dark">
<link rel="icon" href="data:,">
<title>Weather</title>
<style>
:root{
--accent:#8fb6de;
--accent2:#c7d6ea;
--ink:#f3f7fc;
--ink-2:rgba(240,246,253,.72);
--ink-3:rgba(240,246,253,.46);
--card-bg:rgba(15,21,38,.42);
--hair:rgba(255,255,255,.16);
--radius:30px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
color:var(--ink);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow:hidden;
--sky:radial-gradient(120% 100% at 80% 6%, rgba(255,231,170,.35), transparent 46%),
linear-gradient(160deg,#2b5296 0%, #5a86bd 48%, #a7c6e6 92%);
background:var(--sky);
background-attachment:fixed;
}
#stage{
position:relative;
width:100%;height:100vh;
display:grid;place-items:center;
overflow:hidden;
}
#stage::before,#stage::after{
content:"";position:absolute;border-radius:50%;
filter:blur(70px);pointer-events:none;
}
#stage::before{
width:560px;height:560px;background:var(--accent);
top:-160px;left:-90px;opacity:.30;
animation:float1 24s ease-in-out infinite;
}
#stage::after{
width:480px;height:480px;background:var(--accent2);
bottom:-170px;right:-70px;opacity:.22;
animation:float2 30s ease-in-out infinite;
}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,30px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,-24px)}}
.card{
position:relative;z-index:1;
width:1120px;height:690px;
padding:40px 48px;
display:flex;flex-direction:column;gap:24px;
border-radius:var(--radius);
background:var(--card-bg);
-webkit-backdrop-filter:blur(28px) saturate(150%);
backdrop-filter:blur(28px) saturate(150%);
border:1px solid var(--hair);
box-shadow:0 30px 80px -30px rgba(4,9,22,.7),
0 2px 8px rgba(4,9,22,.25),
inset 0 1px 0 rgba(255,255,255,.16);
overflow:hidden;
}
.card::before{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 22%);
}
.card::after{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:radial-gradient(340px 340px at var(--mx,72%) var(--my,10%),
color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
opacity:.6;transition:opacity .3s ease;
}
/* ---------- header ---------- */
.header{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1}
.name{
margin:0;font-size:33px;font-weight:640;letter-spacing:-.015em;line-height:1.05;
max-width:560px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.date{margin-top:7px;font-size:15.5px;font-weight:500;color:var(--ink-2)}
.coords{
margin-top:13px;display:inline-flex;align-items:center;gap:7px;
font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
color:var(--ink-3);
padding:5px 11px 5px 8px;border-radius:999px;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
}
.pin{width:13px;height:13px;color:var(--accent);flex:none}
.cond{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none}
.icon-wrap{width:96px;height:96px;filter:drop-shadow(0 8px 16px rgba(6,12,28,.4))}
.wx{width:100%;height:100%;display:block;overflow:visible}
.cond-text{font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.005em}
/* ---------- hero ---------- */
.hero{display:flex;flex-direction:column;gap:2px;position:relative;z-index:1;margin-top:2px}
.hrow{display:flex;align-items:flex-end;gap:16px}
.big{
font-size:104px;font-weight:600;line-height:.9;letter-spacing:-.04em;
font-variant-numeric:tabular-nums;
background:linear-gradient(178deg,#ffffff,#d8e3f2);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.small{
font-size:44px;font-weight:520;line-height:1;letter-spacing:-.03em;
font-variant-numeric:tabular-nums;color:var(--ink-2);
}
.o,.o2{-webkit-text-fill-color:var(--accent);color:var(--accent);font-weight:500}
.o{font-size:.62em}.o2{font-size:.66em}
.cap{
font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-3);padding-bottom:14px;
}
.hrow.lo .cap{padding-bottom:6px}
/* ---------- chart ---------- */
.chart-wrap{display:flex;flex-direction:column;gap:10px;position:relative;z-index:1;margin-top:auto}
.chart-head{display:flex;align-items:center;justify-content:space-between}
.ch-t{font-size:12.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.utc{
font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--accent);
padding:4px 10px;border-radius:999px;
background:color-mix(in srgb, var(--accent) 14%, transparent);
border:1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}
.chart-box{line-height:0;width:100%}
.spark{width:100%;height:auto;display:block;overflow:visible}
.grid{stroke:rgba(255,255,255,.10);stroke-width:1}
.axis text{fill:var(--ink-3);font-size:13px;font-weight:500;font-family:inherit}
.spark-line{
stroke:var(--accent);stroke-width:3.2;fill:none;
stroke-linecap:round;stroke-linejoin:round;
filter:drop-shadow(0 5px 9px rgba(6,12,28,.35));
}
.spark-area{opacity:0;animation:fadeIn 1s ease .45s forwards}
.markers{opacity:0;animation:fadeIn .7s ease 1.25s forwards}
.markers circle{fill:var(--accent);stroke:rgba(255,255,255,.9);stroke-width:2}
.pl{fill:var(--ink);font-size:15px;font-weight:700;font-family:inherit}
.nowline{stroke:rgba(255,255,255,.45);stroke-width:1.5;stroke-dasharray:2 5;opacity:0;animation:fadeIn .6s ease 1.4s forwards}
.nowlab{fill:var(--ink-2);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-family:inherit;opacity:0;animation:fadeIn .6s ease 1.4s forwards}
.nowdot{fill:#fff;stroke:var(--accent);stroke-width:2.5;opacity:0;animation:fadeIn .6s ease 1.4s forwards}
@keyframes fadeIn{to{opacity:1}}
/* ---------- icon animation ---------- */
.spin{transform-box:view-box;transform-origin:60px 60px;animation:spin 22s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.drop{animation:raindrop 1.3s ease-in-out infinite}
@keyframes raindrop{0%{transform:translateY(-7px);opacity:0}25%{opacity:1}75%{opacity:1}100%{transform:translateY(9px);opacity:0}}
.flake{animation:snowfall 2.6s ease-in-out infinite}
@keyframes snowfall{0%{transform:translate(0,-6px);opacity:0}30%{opacity:1}70%{opacity:1}100%{transform:translate(3px,12px);opacity:0}}
.fog{animation:fogshift 3.2s ease-in-out infinite alternate}
@keyframes fogshift{from{transform:translateX(-3px);opacity:.5}to{transform:translateX(4px);opacity:.95}}
.bolt{animation:flash 2.6s ease-in-out infinite}
@keyframes flash{0%,38%,52%,100%{opacity:1}45%{opacity:.25}}
/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(14px);
transition:opacity .75s ease, transform .75s cubic-bezier(.2,.75,.25,1)}
.card.show .reveal{opacity:1;transform:none}
.card.show .header{transition-delay:.04s}
.card.show .hero{transition-delay:.12s}
.card.show .chart-wrap{transition-delay:.20s}
/* ---------- states ---------- */
.state{
margin:auto;display:flex;flex-direction:column;align-items:center;text-align:center;
max-width:520px;gap:6px;
}
.state-ic{width:120px;height:120px;margin-bottom:8px;filter:drop-shadow(0 10px 20px rgba(6,12,28,.4))}
.state-title{margin:0;font-size:26px;font-weight:640;letter-spacing:-.01em}
.state-msg{margin:4px 0 0;font-size:16px;line-height:1.55;color:var(--ink-2)}
.state-detail{
margin-top:16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:12.5px;color:var(--ink-3);
padding:7px 14px;border-radius:10px;
background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08);
}
/* ---------- loading skeleton ---------- */
.sk{border-radius:12px;background:
linear-gradient(100deg,rgba(255,255,255,.06) 30%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.06) 70%);
background-size:220% 100%;animation:shimmer 1.4s ease-in-out infinite}
@keyframes shimmer{0%{background-position:130% 0}100%{background-position:-130% 0}}
.sk-name{width:230px;height:34px}
.sk-date{width:300px;height:16px;margin-top:11px;border-radius:8px}
.sk-coord{width:170px;height:24px;margin-top:14px;border-radius:999px}
.sk-icon{width:96px;height:96px;border-radius:24px}
.sk-big{width:260px;height:96px;margin-top:2px}
.sk-small{width:130px;height:42px;margin-top:12px}
.sk-chart{width:100%;height:232px;margin-top:auto;border-radius:18px}
.loading .hero{gap:0}
@media (prefers-reduced-motion: reduce){
*{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition:none !important}
.reveal{opacity:1;transform:none}
.spark-area,.markers,.nowline,.nowlab,.nowdot{opacity:1}
.spark-line{stroke-dashoffset:0 !important}
}
</style>
</head>
<body>
<main id="stage">
<section class="card loading" id="card">
<div class="header">
<div class="loc">
<div class="sk sk-name"></div>
<div class="sk sk-date"></div>
<div class="sk sk-coord"></div>
</div>
<div class="cond"><div class="sk sk-icon"></div></div>
</div>
<div class="hero"><div class="sk sk-big"></div><div class="sk sk-small"></div></div>
<div class="chart-wrap"><div class="sk sk-chart"></div></div>
</section>
</main>
<script>
(function(){
"use strict";
var card = document.getElementById("card");
var root = document.documentElement;
/* ---------- read parameters ---------- */
var qs = new URLSearchParams(location.search);
function num(v, d){ var n = parseFloat(v); return isFinite(n) ? n : d; }
var lat = num(qs.get("lat"), 52.52);
var lon = num(qs.get("lon"), 13.405);
var name = (qs.get("name") || "Berlin").trim() || "Berlin";
var todayUTC = new Date().toISOString().slice(0,10);
var dateParam = qs.get("date");
var date = /^\d{4}-\d{2}-\d{2}$/.test(dateParam || "") ? dateParam : todayUTC;
var isPast = date < todayUTC;
var dateLabel;
try{
dateLabel = new Date(date + "T12:00:00Z").toLocaleDateString("en-GB",
{weekday:"long", day:"numeric", month:"long", year:"numeric", timeZone:"UTC"});
}catch(e){ dateLabel = date; }
var coords = coordStr(lat, lon);
document.title = name + " · Weather";
/* ---------- helpers ---------- */
function esc(s){ return String(s).replace(/[&<>"']/g, function(c){
return {"&":"&","<":"<",">":">",'"':""","'":"'"}[c]; }); }
function f(v){ return Math.round(v*10)/10; }
function coordStr(la, lo){
var a = Math.abs(la).toFixed(3) + "°" + (la>=0 ? "N" : "S");
var b = Math.abs(lo).toFixed(3) + "°" + (lo>=0 ? "E" : "W");
return a + " · " + b;
}
var PIN = '<svg class="pin" viewBox="0 0 24 24"><path d="M12 2c-3.9 0-7 3.1-7 7 0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z" fill="currentColor"/></svg>';
/* ---------- WMO weather codes ---------- */
function wmo(code){
var m = {
0:["Clear sky","clear"], 1:["Mainly clear","clear"],
2:["Partly cloudy","partly"], 3:["Overcast","cloudy"],
45:["Fog","fog"], 48:["Rime fog","fog"],
51:["Light drizzle","drizzle"], 53:["Drizzle","drizzle"], 55:["Dense drizzle","drizzle"],
56:["Freezing drizzle","drizzle"], 57:["Freezing drizzle","drizzle"],
61:["Slight rain","rain"], 63:["Rain","rain"], 65:["Heavy rain","rain"],
66:["Freezing rain","rain"], 67:["Freezing rain","rain"],
71:["Slight snow","snow"], 73:["Snow","snow"], 75:["Heavy snow","snow"], 77:["Snow grains","snow"],
80:["Rain showers","rain"], 81:["Rain showers","rain"], 82:["Violent showers","rain"],
85:["Snow showers","snow"], 86:["Heavy snow showers","snow"],
95:["Thunderstorm","thunder"], 96:["Thunderstorm","thunder"], 99:["Severe thunderstorm","thunder"]
};
return m[code] || ["Unknown conditions","cloudy"];
}
var THEMES = {
clear: {accent:"#ffd36b", accent2:"#ff9e64",
sky:"radial-gradient(120% 100% at 78% 4%, rgba(255,226,150,.55), transparent 46%), linear-gradient(160deg,#1f5fd0 0%, #3f86e0 42%, #86bff2 74%, #ffd0a0 108%)"},
partly: {accent:"#ffd88a", accent2:"#8fb6e0",
sky:"radial-gradient(120% 100% at 80% 4%, rgba(255,231,170,.42), transparent 46%), linear-gradient(160deg,#2b5296 0%, #5a86bd 48%, #a7c6e6 94%)"},
cloudy: {accent:"#aecbef", accent2:"#8fa4bd",
sky:"linear-gradient(160deg,#3d4a5c 0%, #5b6a7e 52%, #8b98a9 100%)"},
fog: {accent:"#d3dbe4", accent2:"#9aa6b3",
sky:"linear-gradient(160deg,#495562 0%, #6f7a87 52%, #9ba6b1 100%)"},
drizzle:{accent:"#8fdcef", accent2:"#5b93c9",
sky:"radial-gradient(120% 90% at 74% 6%, rgba(130,180,225,.28), transparent 52%), linear-gradient(160deg,#2b3b53 0%, #3f5878 56%, #63809e 100%)"},
rain: {accent:"#63d1ea", accent2:"#4f7fbd",
sky:"radial-gradient(120% 90% at 74% 6%, rgba(120,170,220,.30), transparent 52%), linear-gradient(160deg,#212e44 0%, #34496a 56%, #526d8e 100%)"},
snow: {accent:"#c4e7ff", accent2:"#93b7df",
sky:"linear-gradient(160deg,#4c5b7a 0%, #7e93b8 48%, #ccdbeb 100%)"},
thunder:{accent:"#c3abff", accent2:"#7b6bd6",
sky:"radial-gradient(120% 90% at 72% 4%, rgba(150,120,230,.42), transparent 54%), linear-gradient(160deg,#171029 0%, #2f2154 54%, #453770 100%)"}
};
function applyTheme(group){
var t = THEMES[group] || THEMES.partly;
root.style.setProperty("--accent", t.accent);
root.style.setProperty("--accent2", t.accent2);
document.body.style.setProperty("--sky", t.sky);
}
/* ---------- weather icons (SVG) ---------- */
var SUN_DEF = '<radialGradient id="gSun" cx="42%" cy="38%" r="66%"><stop offset="0%" stop-color="#fff4cc"/><stop offset="45%" stop-color="#ffd45e"/><stop offset="100%" stop-color="#ff9b3d"/></radialGradient>';
var CLOUD_DEF = '<linearGradient id="gCloud" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#ffffff"/><stop offset="100%" stop-color="#d8e2f0"/></linearGradient><linearGradient id="gCloudD" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#cad6e6"/><stop offset="100%" stop-color="#a6b5cb"/></linearGradient>';
function svgWrap(defs, body, label){
return '<svg class="wx" viewBox="0 0 120 120" role="img" aria-label="'+label+'"><defs>'+defs+'</defs>'+body+'</svg>';
}
function rays(cx, cy, rIn, rOut, w){
var s = "";
for(var i=0;i<8;i++){
var a = i*45;
s += '<rect x="'+(cx-w/2)+'" y="'+(cy-rOut)+'" width="'+w+'" height="'+(rOut-rIn)+'" rx="'+(w/2)+'" fill="var(--accent)" transform="rotate('+a+' '+cx+' '+cy+')"/>';
}
return s;
}
function cloud(dx, dy, fill){
fill = fill || "url(#gCloud)";
return '<g transform="translate('+(dx||0)+' '+(dy||0)+')">'
+ '<rect x="26" y="64" width="66" height="24" rx="12" fill="'+fill+'"/>'
+ '<circle cx="44" cy="64" r="15" fill="'+fill+'"/>'
+ '<circle cx="62" cy="55" r="21" fill="'+fill+'"/>'
+ '<circle cx="82" cy="63" r="16" fill="'+fill+'"/></g>';
}
function iconSun(){
return svgWrap(SUN_DEF,
'<g class="spin">'+rays(60,60,30,45,4)+'</g><circle cx="60" cy="60" r="22" fill="url(#gSun)"/>',
"Clear sky");
}
function iconPartly(){
return svgWrap(SUN_DEF+CLOUD_DEF,
'<g class="spin" style="transform-origin:44px 42px">'+rays(44,42,21,32,3.4)+'</g>'
+ '<circle cx="44" cy="42" r="16" fill="url(#gSun)"/>'+cloud(9,14),
"Partly cloudy");
}
function iconCloud(){
return svgWrap(CLOUD_DEF, cloud(16,2,"url(#gCloudD)")+cloud(-6,16,"url(#gCloud)"), "Overcast");
}
function iconFog(){
var lines = "";
for(var i=0;i<3;i++){
lines += '<rect class="fog" x="'+(30+(i%2)*8)+'" y="'+(94+i*9)+'" width="'+(60-(i%2)*12)+'" height="5" rx="2.5" fill="rgba(255,255,255,.85)" style="animation-delay:'+(i*0.4)+'s"/>';
}
return svgWrap(CLOUD_DEF, cloud(0,-8)+lines, "Fog");
}
function iconRain(count, label){
var xs = count===2 ? [52,70] : [44,60,76];
var d = "";
for(var i=0;i<xs.length;i++){
d += '<line class="drop" x1="'+xs[i]+'" y1="90" x2="'+(xs[i]-3)+'" y2="99" stroke="var(--accent)" stroke-width="3.6" stroke-linecap="round" style="animation-delay:'+(i*0.28)+'s"/>';
}
return svgWrap(CLOUD_DEF, cloud(0,-8)+d, label);
}
function iconSnow(){
var xs = [44,60,76], flakes = "";
for(var i=0;i<xs.length;i++){
flakes += '<circle class="flake" cx="'+xs[i]+'" cy="92" r="3.4" fill="#ffffff" style="animation-delay:'+(i*0.45)+'s"/>';
}
return svgWrap(CLOUD_DEF, cloud(0,-8)+flakes, "Snow");
}
function iconThunder(){
return svgWrap(CLOUD_DEF,
cloud(0,-8,"url(#gCloudD)")+'<path class="bolt" d="M60 86 L49 106 L58 106 L52 122 L74 98 L63 98 L69 86 Z" fill="var(--accent)"/>',
"Thunderstorm");
}
function iconFor(group){
switch(group){
case "clear": return iconSun();
case "partly": return iconPartly();
case "cloudy": return iconCloud();
case "fog": return iconFog();
case "drizzle": return iconRain(2,"Drizzle");
case "rain": return iconRain(3,"Rain");
case "snow": return iconSnow();
case "thunder": return iconThunder();
default: return iconCloud();
}
}
var ERR_ICON = svgWrap(CLOUD_DEF,
cloud(0,-6,"url(#gCloudD)")+'<line x1="34" y1="30" x2="90" y2="98" stroke="rgba(255,255,255,.55)" stroke-width="5" stroke-linecap="round"/>',
"No data");
/* ---------- chart ---------- */
function ticks(lo, hi, count){
var span = hi - lo, raw = span / count;
var mag = Math.pow(10, Math.floor(Math.log(raw)/Math.LN10));
var norm = raw / mag, step;
if(norm < 1.5) step = 1; else if(norm < 3) step = 2; else if(norm < 7) step = 5; else step = 10;
step *= mag;
var start = Math.ceil(lo/step)*step, out = [];
for(var v = start; v <= hi + 1e-9; v += step) out.push(Math.round(v*10)/10);
return out;
}
function segs(pts){
var s = "";
for(var i=0;i<pts.length-1;i++){
var p0 = pts[i-1]||pts[i], p1 = pts[i], p2 = pts[i+1], p3 = pts[i+2]||p2;
var c1x = p1.x + (p2.x-p0.x)/6, c1y = p1.y + (p2.y-p0.y)/6;
var c2x = p2.x - (p3.x-p1.x)/6, c2y = p2.y - (p3.y-p1.y)/6;
s += "C "+f(c1x)+" "+f(c1y)+", "+f(c2x)+" "+f(c2y)+", "+f(p2.x)+" "+f(p2.y)+" ";
}
return s;
}
function buildChart(temps, isToday){
var n = temps.length;
var idx = [];
for(var i=0;i<n;i++){ if(temps[i]!=null) idx.push({t:temps[i], i:i}); }
var valid = idx.map(function(o){return o.t;});
var lo0 = Math.min.apply(null, valid), hi0 = Math.max.apply(null, valid);
var lo = Math.floor(lo0)-1, hi = Math.ceil(hi0)+1;
if(hi-lo < 6){ var mid=(hi+lo)/2; lo=Math.round(mid-3); hi=Math.round(mid+3); }
var W=1000, H=250, P={l:44,r:20,t:34,b:34};
var iw=W-P.l-P.r, ih=H-P.t-P.b, baseY=P.t+ih;
var X = function(i){ return P.l + (n<=1 ? 0 : (i/(n-1))*iw); };
var Y = function(t){ return P.t + (1-(t-lo)/(hi-lo))*ih; };
var pts = idx.map(function(o){ return {x:X(o.i), y:Y(o.t)}; });
var seg = segs(pts);
var first = pts[0], last = pts[pts.length-1];
var lineD = "M "+f(first.x)+" "+f(first.y)+" "+seg;
var areaD = "M "+f(first.x)+" "+f(baseY)+" L "+f(first.x)+" "+f(first.y)+" "+seg+" L "+f(last.x)+" "+f(baseY)+" Z";
var grid="", ylab="";
ticks(lo,hi,4).forEach(function(t){
var y=Y(t);
grid += '<line class="grid" x1="'+P.l+'" y1="'+f(y)+'" x2="'+(W-P.r)+'" y2="'+f(y)+'"/>';
ylab += '<text class="yl" x="'+(P.l-11)+'" y="'+f(y+4)+'" text-anchor="end">'+Math.round(t)+'°</text>';
});
var xlab="";
for(var h=0;h<n;h+=3){
xlab += '<text class="xl" x="'+f(X(h))+'" y="'+(H-P.b+23)+'" text-anchor="middle">'+String(h).padStart(2,"0")+'</text>';
}
var maxO = idx.reduce(function(a,b){return b.t>a.t?b:a;});
var minO = idx.reduce(function(a,b){return b.t<a.t?b:a;});
function marker(o, above){
var x=X(o.i), y=Y(o.t), ly = above ? y-14 : y+22;
return '<g><circle cx="'+f(x)+'" cy="'+f(y)+'" r="4.5"/><text class="pl" x="'+f(x)+'" y="'+f(ly)+'" text-anchor="middle">'+Math.round(o.t)+'°</text></g>';
}
var markers = marker(maxO,true) + (minO.i!==maxO.i ? marker(minO,false) : "");
var now="";
if(isToday){
var ch = new Date().getUTCHours();
if(ch>=0 && ch<n){
var nx=X(ch);
now = '<line class="nowline" x1="'+f(nx)+'" y1="'+(P.t-4)+'" x2="'+f(nx)+'" y2="'+f(baseY)+'"/>'
+ '<text class="nowlab" x="'+f(nx)+'" y="'+(P.t-11)+'" text-anchor="middle">now</text>';
if(temps[ch]!=null) now += '<circle class="nowdot" cx="'+f(nx)+'" cy="'+f(Y(temps[ch]))+'" r="5"/>';
}
}
return '<svg class="spark" viewBox="0 0 '+W+' '+H+'" role="img" aria-label="Hourly temperature chart">'
+ '<defs><linearGradient id="areaG" x1="0" y1="0" x2="0" y2="1">'
+ '<stop offset="0%" stop-color="var(--accent)" stop-opacity="0.42"/>'
+ '<stop offset="60%" stop-color="var(--accent)" stop-opacity="0.10"/>'
+ '<stop offset="100%" stop-color="var(--accent)" stop-opacity="0"/></linearGradient></defs>'
+ '<g class="gridg">'+grid+'</g>'
+ '<g class="axis">'+ylab+xlab+'</g>'
+ now
+ '<path class="spark-area" d="'+areaD+'" fill="url(#areaG)"/>'
+ '<path class="spark-line" d="'+lineD+'"/>'
+ '<g class="markers">'+markers+'</g></svg>';
}
function animateChart(){
var line = card.querySelector(".spark-line");
if(!line || !line.getTotalLength) return;
try{
var L = line.getTotalLength();
line.style.strokeDasharray = L + " " + L;
line.style.strokeDashoffset = L;
line.getBoundingClientRect();
requestAnimationFrame(function(){
line.style.transition = "stroke-dashoffset 1.5s cubic-bezier(.33,.1,.2,1)";
line.style.strokeDashoffset = "0";
});
}catch(e){}
}
/* ---------- render ---------- */
function renderSuccess(o){
card.className = "card";
card.innerHTML =
'<div class="header reveal">'
+ '<div class="loc">'
+ '<h1 class="name">'+esc(name)+'</h1>'
+ '<div class="date">'+esc(dateLabel)+'</div>'
+ '<div class="coords">'+PIN+esc(coords)+'</div>'
+ '</div>'
+ '<div class="cond">'
+ '<div class="icon-wrap">'+o.icon+'</div>'
+ '<div class="cond-text">'+esc(o.condLabel)+'</div>'
+ '</div>'
+ '</div>'
+ '<div class="hero reveal">'
+ '<div class="hrow"><span class="big">'+o.max+'<span class="o">°</span></span><span class="cap">High</span></div>'
+ '<div class="hrow lo"><span class="small">'+o.min+'<span class="o2">°</span></span><span class="cap">Low</span></div>'
+ '</div>'
+ '<div class="chart-wrap reveal">'
+ '<div class="chart-head"><span class="ch-t">Hourly temperature</span><span class="utc">°C · UTC</span></div>'
+ '<div class="chart-box">'+o.chart+'</div>'
+ '</div>';
requestAnimationFrame(function(){
card.classList.add("show");
animateChart();
});
}
function renderError(detail){
card.className = "card show";
card.innerHTML =
'<div class="state reveal">'
+ '<div class="state-ic">'+ERR_ICON+'</div>'
+ '<h2 class="state-title">Weather data unavailable</h2>'
+ '<p class="state-msg">We couldn’t load the forecast for <strong>'+esc(name)+'</strong> on '+esc(dateLabel)+'. The weather service could not be reached.</p>'
+ '<div class="state-detail">'+esc(detail)+'</div>'
+ '</div>';
requestAnimationFrame(function(){ card.classList.add("show"); });
}
/* ---------- fetch ---------- */
function main(){
applyTheme("partly");
var base = isPast ? "/api/om/archive" : "/api/om/forecast";
var p = 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: date, end_date: date
});
fetch(base + "?" + p.toString(), {headers:{accept:"application/json"}})
.then(function(res){
if(!res.ok) throw new Error("Service responded with " + res.status);
return res.json();
})
.then(function(data){
var temps = (data && data.hourly && Array.isArray(data.hourly.temperature_2m))
? data.hourly.temperature_2m : null;
if(!temps) throw new Error("Malformed response from weather service");
var valid = temps.filter(function(t){ return t != null; });
if(!valid.length) throw new Error("No temperature data for this date");
var max = (data.daily && data.daily.temperature_2m_max) ? data.daily.temperature_2m_max[0] : null;
var min = (data.daily && data.daily.temperature_2m_min) ? data.daily.temperature_2m_min[0] : null;
if(max == null) max = Math.max.apply(null, valid);
if(min == null) min = Math.min.apply(null, valid);
var code = (data.daily && data.daily.weather_code) ? data.daily.weather_code[0] : null;
var info = wmo(code);
applyTheme(info[1]);
renderSuccess({
condLabel: info[0],
max: Math.round(max),
min: Math.round(min),
icon: iconFor(info[1]),
chart: buildChart(temps, date === todayUTC)
});
})
.catch(function(err){
renderError(err && err.message ? err.message : "Unknown error");
});
}
/* ---------- cursor sheen ---------- */
card.addEventListener("pointermove", function(e){
var r = card.getBoundingClientRect();
card.style.setProperty("--mx", ((e.clientX-r.left)/r.width*100)+"%");
card.style.setProperty("--my", ((e.clientY-r.top)/r.height*100)+"%");
});
main();
})();
</script>
</body>
</html>L1 —— 廉价的确定性描述量
| bytes 总计 | 26,485 | html / css / js | 803 / 9,202 / 16,480 |
|---|---|---|---|
| dom 节点 | 24 | dom 深度 | 7 |
| css 规则 | 103 | 含 js | 是 |
| brightness | 75.8 | contrast | 19.7 |
| colorfulness | 22.6 | 留白 | 55.1% |
该 slot 的 telemetry
| prompt tokens | 19 | completion tokens | 91,669 |
|---|---|---|---|
| total tokens | 91,688 | wall | 1,233 s |
| cost | — | request id | — |
config.json575 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_NONE",
"method": "oauth-login"
},
"billing": "plan",
"config_id": "claude-opus-4-8-eff-max--cli--claude-code--dev",
"effort": "max",
"family": "claude",
"m": {
"min": 2,
"q": 2
},
"model_id": "claude-opus-4-8",
"protocol": "cli",
"served_model": "claude-opus-4-8",
"telemetry": {
"completion_tokens": 234814,
"cost_usd": null,
"prompt_tokens": 40,
"total_tokens": 234854,
"wall_ms": 3025182
},
"transport": "claude-code-cli-headless",
"vendor_sanction_ref": null
}send-log2.5 KB
{
"N": 2,
"batch_id": "2026-07-17--dev-cc-opus48",
"config_id": "claude-opus-4-8-eff-max--cli--claude-code--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-07-17T14:00:30.911868+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T13:54:23.793246+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-17T14:21:07.310982+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T14:00:34.288614+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-17T14:38:57.324066+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T14:21:11.392837+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-17T14:45:00.546074+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T14:39:01.430636+00:00"
}
],
"block_index": 1,
"model_reaching_attempt_index": 0,
"slot_index": 1,
"terminal_state": "valid",
"variant": "P-min"
}
],
"retry_policy": {
"max_unreachable_retries": 5,
"rate_limit_backoff": {
"max_attempts": 4,
"max_total_ms": 60000
}
}
}