claude-sonnet-5 @ high · CC

CChigh

config: claude-sonnet-5-eff-high--cli--claude-code--dev
batch: 2026-07-19--unified
transport: claude-code-cli-headless
protocol: cli · plan
served model: claude-sonnet-5
采集于: 2026年7月18日 11:54 · N=2

该 model 的全部 effort 与 arm →

variant

live

slot 0 · P-q · sandboxed iframe

claude-sonnet-5 @high · CC P-q slot 0 截图

截图是 similarity 通道测量时的原始像素。运行 live 会在 sandboxed iframe 中重新执行原始输出;渲染结果取决于你的浏览器和字体,不保证与测量像素一致。

similarity 邻居

Fidelity —— 卡片展示的数据对不对?

namematch
conditionmatch
datematch
max tempmatch展示值:25
min tempmatch展示值:16
hourlymismatchcoverage 1/24 · 1 命中 · 6 不符 · 17 未展示
request sidematch0 处违规

extractor fidelity-extractor-v1+Berlin-2026-07-15

源码 —— 原始模型输出,一字节未改

下载 card.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather Card</title>
<style>
  :root{
    --sky-top:#5b8def;
    --sky-bottom:#8fb8f6;
    --ink:#1b2430;
    --ink-soft:#5b6675;
    --card-bg:rgba(255,255,255,0.72);
    --card-border:rgba(255,255,255,0.55);
    --accent:#ff8a3d;
    --chip-bg:rgba(27,36,48,0.06);
    --shadow:0 30px 60px -20px rgba(20,40,80,0.35), 0 8px 20px -8px rgba(20,40,80,0.25);
  }
  *{box-sizing:border-box;}
  html,body{
    margin:0;
    padding:0;
    width:1280px;
    height:800px;
    overflow:hidden;
    font-family:"SF Pro Display","Segoe UI",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
    color:var(--ink);
    background:
      radial-gradient(1100px 700px at 15% -10%, rgba(255,255,255,0.35), transparent 60%),
      linear-gradient(160deg, var(--sky-top) 0%, var(--sky-bottom) 55%, #b9d4f8 100%);
  }
  .bg-orb{
    position:absolute;
    border-radius:50%;
    filter:blur(2px);
    opacity:0.5;
    background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0));
  }
  .stage{
    position:relative;
    width:1280px;
    height:800px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .card{
    position:relative;
    width:820px;
    min-height:560px;
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:28px;
    box-shadow:var(--shadow);
    backdrop-filter:blur(22px) saturate(160%);
    -webkit-backdrop-filter:blur(22px) saturate(160%);
    padding:40px 48px 36px;
    display:flex;
    flex-direction:column;
    gap:22px;
  }
  .top-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
  }
  .place{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .place .name{
    font-size:30px;
    font-weight:700;
    letter-spacing:-0.01em;
  }
  .place .date{
    font-size:15px;
    color:var(--ink-soft);
    font-weight:500;
  }
  .coords{
    font-size:12px;
    color:var(--ink-soft);
    text-align:right;
    line-height:1.5;
    opacity:0.8;
    font-variant-numeric:tabular-nums;
  }
  .headline{
    display:flex;
    align-items:center;
    gap:28px;
    padding:8px 0 4px;
  }
  .headline .icon{
    width:110px;
    height:110px;
    flex-shrink:0;
    filter:drop-shadow(0 10px 14px rgba(20,40,80,0.18));
  }
  .headline .temps{
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .headline .condition{
    font-size:20px;
    font-weight:600;
    color:var(--ink);
  }
  .minmax{
    display:flex;
    align-items:center;
    gap:18px;
    margin-top:6px;
  }
  .minmax .pill{
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--chip-bg);
    padding:8px 16px;
    border-radius:999px;
    font-size:15px;
    font-weight:600;
  }
  .minmax .pill.max{ color:#c9450c; }
  .minmax .pill.min{ color:#1868c9; }
  .minmax .pill .lbl{
    font-size:11px;
    font-weight:700;
    letter-spacing:0.06em;
    text-transform:uppercase;
    opacity:0.6;
  }
  .divider{
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(27,36,48,0.14), transparent);
  }
  .section-title{
    font-size:13px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
  .chart-wrap{
    position:relative;
  }
  #hourly-chart{
    width:100%;
    height:220px;
    display:block;
  }
  .hour-labels{
    display:flex;
    justify-content:space-between;
    margin-top:6px;
    font-size:11px;
    color:var(--ink-soft);
    font-variant-numeric:tabular-nums;
  }
  .state-msg{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:80px 20px;
    text-align:center;
    color:var(--ink-soft);
  }
  .state-msg .spinner{
    width:34px;
    height:34px;
    border-radius:50%;
    border:3px solid rgba(27,36,48,0.15);
    border-top-color:var(--sky-top);
    animation:spin 0.9s linear infinite;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .state-msg.error .err-icon{
    width:44px;
    height:44px;
    border-radius:50%;
    background:#fde2de;
    color:#c92a1e;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    font-weight:800;
  }
  .state-msg .err-title{
    font-size:17px;
    font-weight:700;
    color:var(--ink);
  }
  .state-msg .err-detail{
    font-size:13px;
    max-width:440px;
    line-height:1.5;
  }
  .hidden{ display:none !important; }
  .footer-note{
    font-size:11px;
    color:var(--ink-soft);
    opacity:0.7;
    text-align:center;
  }
</style>
</head>
<body>
<div class="stage" id="stage">
  <div class="card" id="card">

    <div id="loading-state" class="state-msg">
      <div class="spinner"></div>
      <div class="err-title">Loading weather…</div>
    </div>

    <div id="error-state" class="state-msg error hidden">
      <div class="err-icon">!</div>
      <div class="err-title">Couldn't load weather data</div>
      <div class="err-detail" id="error-detail">Something went wrong while fetching the forecast.</div>
    </div>

    <div id="content-state" class="hidden" style="display:flex; flex-direction:column; gap:22px;">
      <div class="top-row">
        <div class="place">
          <div class="name" id="place-name">—</div>
          <div class="date" id="place-date">—</div>
        </div>
        <div class="coords" id="place-coords">—</div>
      </div>

      <div class="headline">
        <svg id="condition-icon" class="icon" viewBox="0 0 100 100"></svg>
        <div class="temps">
          <div class="condition" id="condition-text">—</div>
          <div class="minmax">
            <div class="pill max">
              <span class="lbl">High</span>
              <span id="temp-max">—</span>
            </div>
            <div class="pill min">
              <span class="lbl">Low</span>
              <span id="temp-min">—</span>
            </div>
          </div>
        </div>
      </div>

      <div class="divider"></div>

      <div>
        <div class="section-title">Hourly temperature</div>
        <div class="chart-wrap">
          <svg id="hourly-chart" viewBox="0 0 760 220" preserveAspectRatio="none"></svg>
          <div class="hour-labels" id="hour-labels"></div>
        </div>
      </div>

      <div class="footer-note">Data via Open-Meteo · temperatures in °C</div>
    </div>

  </div>
</div>

<script>
(function(){
  "use strict";

  function qp(name, fallback){
    var v = new URLSearchParams(window.location.search).get(name);
    return (v === null || v === "") ? fallback : v;
  }

  function todayUTC(){
    var d = new Date();
    return d.toISOString().slice(0,10);
  }

  var lat = parseFloat(qp("lat", "52.52"));
  var lon = parseFloat(qp("lon", "13.405"));
  var placeName = qp("name", "Berlin");
  var dateStr = qp("date", todayUTC());
  if (isNaN(lat)) lat = 52.52;
  if (isNaN(lon)) lon = 13.405;

  var WMO = {
    0:  ["Clear sky", "sun"],
    1:  ["Mainly clear", "sun-cloud"],
    2:  ["Partly cloudy", "sun-cloud"],
    3:  ["Overcast", "cloud"],
    45: ["Fog", "fog"],
    48: ["Depositing rime fog", "fog"],
    51: ["Light drizzle", "rain-light"],
    53: ["Drizzle", "rain-light"],
    55: ["Dense drizzle", "rain-light"],
    56: ["Light freezing drizzle", "rain-light"],
    57: ["Freezing drizzle", "rain-light"],
    61: ["Slight rain", "rain-light"],
    63: ["Rain", "rain"],
    65: ["Heavy rain", "rain"],
    66: ["Light freezing rain", "rain"],
    67: ["Freezing rain", "rain"],
    71: ["Slight snow", "snow"],
    73: ["Snow", "snow"],
    75: ["Heavy snow", "snow"],
    77: ["Snow grains", "snow"],
    80: ["Slight rain showers", "rain-light"],
    81: ["Rain showers", "rain"],
    82: ["Violent rain showers", "rain"],
    85: ["Slight snow showers", "snow"],
    86: ["Heavy snow showers", "snow"],
    95: ["Thunderstorm", "storm"],
    96: ["Thunderstorm w/ hail", "storm"],
    99: ["Thunderstorm w/ heavy hail", "storm"]
  };

  function iconSVG(kind){
    var sunGrad = '<defs><radialGradient id="sunG" cx="35%" cy="35%" r="70%">' +
      '<stop offset="0%" stop-color="#fff3c4"/><stop offset="100%" stop-color="#ffb347"/>' +
      '</radialGradient><linearGradient id="cloudG" x1="0" y1="0" x2="0" y2="1">' +
      '<stop offset="0%" stop-color="#ffffff"/><stop offset="100%" stop-color="#dfe8f5"/>' +
      '</linearGradient></defs>';

    var sun = '<circle cx="50" cy="46" r="22" fill="url(#sunG)"/>' +
      raysHTML();

    function raysHTML(){
      var rays = "";
      for (var i=0;i<8;i++){
        var ang = i * Math.PI/4;
        var x1 = 50 + Math.cos(ang)*30, y1 = 46 + Math.sin(ang)*30;
        var x2 = 50 + Math.cos(ang)*38, y2 = 46 + Math.sin(ang)*38;
        rays += '<line x1="'+x1+'" y1="'+y1+'" x2="'+x2+'" y2="'+y2+'" stroke="#ffb347" stroke-width="4" stroke-linecap="round"/>';
      }
      return rays;
    }

    var cloud = '<ellipse cx="55" cy="66" rx="30" ry="18" fill="url(#cloudG)"/>' +
      '<ellipse cx="38" cy="70" rx="20" ry="14" fill="url(#cloudG)"/>' +
      '<ellipse cx="70" cy="72" rx="18" ry="13" fill="url(#cloudG)"/>';

    var fog = '<g stroke="#c7d3e3" stroke-width="5" stroke-linecap="round">' +
      '<line x1="18" y1="45" x2="82" y2="45"/>' +
      '<line x1="12" y1="58" x2="88" y2="58"/>' +
      '<line x1="20" y1="71" x2="80" y2="71"/></g>';

    var rainDrops = '<g stroke="#4a90d9" stroke-width="4" stroke-linecap="round">' +
      '<line x1="38" y1="82" x2="34" y2="94"/>' +
      '<line x1="55" y1="82" x2="51" y2="94"/>' +
      '<line x1="72" y1="82" x2="68" y2="94"/></g>';

    var snowFlakes = '<g fill="#8fb4e0">' +
      '<circle cx="38" cy="88" r="3.5"/><circle cx="55" cy="92" r="3.5"/><circle cx="72" cy="88" r="3.5"/></g>';

    var bolt = '<path d="M56 78 L44 96 L54 96 L46 112 L68 90 L57 90 Z" fill="#ffcf3f" stroke="#e0a800" stroke-width="1.5"/>';

    var body = "";
    switch(kind){
      case "sun": body = sun; break;
      case "sun-cloud": body = sun.replace('r="22"','r="18"').replace('cx="50" cy="46"','cx="38" cy="38"') + cloud; break;
      case "cloud": body = cloud + '<ellipse cx="55" cy="55" rx="26" ry="15" fill="url(#cloudG)"/>'; break;
      case "fog": body = fog; break;
      case "rain-light": body = cloud + rainDrops; break;
      case "rain": body = cloud + rainDrops.replace(/stroke-width="4"/g,'stroke-width="5"'); break;
      case "snow": body = cloud + snowFlakes; break;
      case "storm": body = cloud + bolt; break;
      default: body = sun;
    }
    return sunGrad + body;
  }

  function fmtDate(dstr){
    var parts = dstr.split("-").map(Number);
    var d = new Date(Date.UTC(parts[0], parts[1]-1, parts[2]));
    return d.toLocaleDateString(undefined, { weekday:"long", year:"numeric", month:"long", day:"numeric", timeZone:"UTC" });
  }

  function fmtHour(h){
    var hh = h % 24;
    var suffix = hh < 12 ? "AM" : "PM";
    var display = hh % 12;
    if (display === 0) display = 12;
    return display + suffix;
  }

  function show(state){
    document.getElementById("loading-state").classList.toggle("hidden", state !== "loading");
    document.getElementById("error-state").classList.toggle("hidden", state !== "error");
    var cs = document.getElementById("content-state");
    cs.classList.toggle("hidden", state !== "content");
    cs.style.display = (state === "content") ? "flex" : "none";
  }

  function setError(msg){
    document.getElementById("error-detail").textContent = msg;
    show("error");
  }

  function drawChart(hours, temps){
    var svg = document.getElementById("hourly-chart");
    var W = 760, H = 220, padL = 34, padR = 10, padT = 18, padB = 8;
    var innerW = W - padL - padR, innerH = H - padT - padB;

    var minT = Math.min.apply(null, temps);
    var maxT = Math.max.apply(null, temps);
    if (minT === maxT){ minT -= 1; maxT += 1; }
    var span = maxT - minT;
    var padSpan = span * 0.15;
    minT -= padSpan; maxT += padSpan;
    span = maxT - minT;

    function x(i){ return padL + (i/(temps.length-1)) * innerW; }
    function y(t){ return padT + innerH - ((t-minT)/span) * innerH; }

    var linePts = temps.map(function(t,i){ return x(i)+","+y(t); }).join(" ");
    var areaPts = "M" + x(0) + "," + (padT+innerH) + " L" + linePts.split(" ").map(function(p){return "L"+p;}).join(" ").slice(1) + " L" + x(temps.length-1) + "," + (padT+innerH) + " Z";

    var gridLines = "";
    var gridCount = 4;
    for (var g=0; g<=gridCount; g++){
      var gy = padT + (innerH/gridCount)*g;
      gridLines += '<line x1="'+padL+'" y1="'+gy+'" x2="'+(W-padR)+'" y2="'+gy+'" stroke="rgba(27,36,48,0.08)" stroke-width="1"/>';
      var val = maxT - (span/gridCount)*g;
      gridLines += '<text x="4" y="'+(gy+4)+'" font-size="10" fill="#5b6675" font-family="inherit">'+Math.round(val)+'°</text>';
    }

    var dots = "";
    var step = Math.max(1, Math.round(temps.length/12));
    for (var i=0;i<temps.length;i+=step){
      dots += '<circle cx="'+x(i)+'" cy="'+y(temps[i])+'" r="3" fill="#5b8def" stroke="#fff" stroke-width="1.5"/>';
    }

    svg.innerHTML =
      '<defs><linearGradient id="areaFill" x1="0" y1="0" x2="0" y2="1">' +
      '<stop offset="0%" stop-color="rgba(91,141,239,0.35)"/>' +
      '<stop offset="100%" stop-color="rgba(91,141,239,0.02)"/>' +
      '</linearGradient></defs>' +
      gridLines +
      '<path d="'+areaPts+'" fill="url(#areaFill)"/>' +
      '<polyline points="'+linePts+'" fill="none" stroke="#3f6fd1" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"/>' +
      dots;

    var labelsEl = document.getElementById("hour-labels");
    labelsEl.innerHTML = "";
    var labelStep = Math.max(1, Math.round(hours.length/8));
    for (var j=0;j<hours.length;j+=labelStep){
      var span2 = document.createElement("span");
      span2.textContent = fmtHour(hours[j]);
      labelsEl.appendChild(span2);
    }
  }

  function render(data){
    var daily = data.daily;
    var hourly = data.hourly;
    if (!daily || !daily.time || !daily.time.length || !hourly || !hourly.time || !hourly.temperature_2m){
      setError("The weather service returned an unexpected response.");
      return;
    }

    var idx = daily.time.indexOf(dateStr);
    if (idx === -1) idx = 0;

    var tmax = daily.temperature_2m_max[idx];
    var tmin = daily.temperature_2m_min[idx];
    var code = daily.weather_code[idx];
    var cond = WMO[code] || ["Unknown", "cloud"];

    document.getElementById("place-name").textContent = placeName;
    document.getElementById("place-date").textContent = fmtDate(dateStr);
    document.getElementById("place-coords").innerHTML = lat.toFixed(3) + "°, " + lon.toFixed(3) + "°";
    document.getElementById("condition-text").textContent = cond[0];
    document.getElementById("temp-max").textContent = Math.round(tmax) + "°C";
    document.getElementById("temp-min").textContent = Math.round(tmin) + "°C";
    document.getElementById("condition-icon").innerHTML = iconSVG(cond[1]);

    var hourIdx = [], temps = [];
    for (var i=0;i<hourly.time.length;i++){
      if (hourly.time[i].slice(0,10) === dateStr){
        hourIdx.push(i);
      }
    }
    if (!hourIdx.length){
      setError("No hourly data available for the selected date.");
      return;
    }
    hourIdx.forEach(function(i){
      var hh = parseInt(hourly.time[i].slice(11,13), 10);
      temps.push(hourly.temperature_2m[i]);
      hourly._hoursCollected = hourly._hoursCollected || [];
    });
    var hours = hourIdx.map(function(i){ return parseInt(hourly.time[i].slice(11,13), 10); });

    drawChart(hours, temps);
    show("content");
  }

  function isPastDate(dstr){
    return dstr < todayUTC();
  }

  function buildURL(){
    var base = isPastDate(dateStr) ? "/api/om/archive" : "/api/om/forecast";
    var params = new URLSearchParams({
      latitude: String(lat),
      longitude: String(lon),
      daily: "temperature_2m_max,temperature_2m_min,weather_code",
      hourly: "temperature_2m",
      timezone: "UTC",
      temperature_unit: "celsius",
      start_date: dateStr,
      end_date: dateStr
    });
    return base + "?" + params.toString();
  }

  show("loading");
  fetch(buildURL())
    .then(function(res){
      if (!res.ok) throw new Error("Server responded with status " + res.status);
      return res.json();
    })
    .then(function(data){
      if (data && data.error){
        throw new Error(data.reason || "The weather service returned an error.");
      }
      render(data);
    })
    .catch(function(err){
      setError(err && err.message ? err.message : "Unable to reach the weather service.");
    });

})();
</script>
</body>
</html>

L1 —— 廉价的确定性描述量

bytes 总计	16,692	html / css / js	1,968 / 4,515 / 10,209
dom 节点	40	dom 深度	10
css 规则	34	含 js	是
brightness	201.2	contrast	28.6
colorfulness	49.0	留白	45.3%

该 slot 的 telemetry

prompt tokens	22	completion tokens	11,356
total tokens	11,378	wall	114 s
cost	—	request id	—

config.json574 B

{
  "N": 2,
  "auth": {
    "credential_ref": "WCB_NONE",
    "method": "oauth-login"
  },
  "billing": "plan",
  "config_id": "claude-sonnet-5-eff-high--cli--claude-code--dev",
  "effort": "high",
  "family": "claude",
  "m": {
    "min": 2,
    "q": 2
  },
  "model_id": "claude-sonnet-5",
  "protocol": "cli",
  "served_model": "claude-sonnet-5",
  "telemetry": {
    "completion_tokens": 34951,
    "cost_usd": null,
    "prompt_tokens": 36,
    "total_tokens": 34987,
    "wall_ms": 305397
  },
  "transport": "claude-code-cli-headless",
  "vendor_sanction_ref": null
}

send-log2.5 KB

{
  "N": 2,
  "batch_id": "2026-07-17--dev-cc-sonnet5",
  "config_id": "claude-sonnet-5-eff-high--cli--claude-code--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-17T13:45:55.891852+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T13:44:53.109621+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-17T13:47:55.072434+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T13:46:01.079848+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-17T13:49:23.615336+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T13:48:01.029374+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-17T13:50:13.374127+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T13:49:27.332564+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
    }
  }
}