grok-4.6 @ high · api

apihigh
config
grok-4.6-eff-high--api--official--dev
batch
2026-07-19--unified
transport
xai-official-api
protocol
api · metered
served model
grok-4.6
采集于
2026年7月18日 11:54 · N=4
variant
live
slot 0 · P-q · sandboxed iframe
grok-4.6 @high · api P-q slot 0 截图

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

similarity 邻居

限于 session 2026-07-19--unified

similarity 衡量本 session 内的趋同程度 —— 不是质量。

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

  • namematch
  • conditionmatch
  • datematch
  • max tempmismatch展示值:13.4
  • min tempmismatch展示值:52.52
  • hourlymatchcoverage 24/24 · 24 命中 · 0 不符 · 0 未展示
  • 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">
<title>Weather</title>
<style>
  :root {
    --bg1: #0b1020;
    --bg2: #141c32;
    --bg3: #1a2438;
    --accent: #c9b896;
    --accent-2: #e8dcc4;
    --text: #f3efe6;
    --muted: rgba(243, 239, 230, 0.48);
    --faint: rgba(243, 239, 230, 0.18);
    --line: rgba(243, 239, 230, 0.10);
    --glow: rgba(201, 184, 150, 0.22);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html, body {
    width: 1280px;
    height: 800px;
    overflow: hidden;
    background: var(--bg1);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "kern";
  }

  body { position: relative; }

  .atmosphere {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(900px 520px at 82% 18%, var(--glow), transparent 62%),
      radial-gradient(700px 480px at 8% 88%, rgba(255,255,255,0.04), transparent 55%),
      linear-gradient(165deg, var(--bg1) 0%, var(--bg2) 48%, var(--bg3) 100%);
    transition: background 700ms ease;
  }

  .grain, .vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .grain {
    opacity: 0.07;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .vignette {
    background: radial-gradient(ellipse at 50% 42%, transparent 38%, rgba(0,0,0,0.38) 100%);
  }

  .topbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.85;
    z-index: 2;
  }

  #app {
    position: relative;
    z-index: 1;
    width: 1280px;
    height: 800px;
  }

  .card {
    height: 800px;
    padding: 52px 72px 40px;
    display: flex;
    flex-direction: column;
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    animation: fadeUp 700ms ease both;
  }

  .location {
    font-size: 44px;
    font-weight: 300;
    letter-spacing: -0.035em;
    line-height: 1.1;
    max-width: 760px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .subhead {
    margin-top: 10px;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
  }

  .header-right {
    text-align: right;
    padding-top: 8px;
    animation: fadeUp 700ms 80ms ease both;
  }

  .date-main {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--text);
  }

  .coords {
    margin-top: 8px;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .hero {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 0;
    padding: 8px 0 12px;
  }

  .temps {
    display: flex;
    align-items: flex-end;
    gap: 56px;
    animation: fadeUp 800ms 120ms ease both;
  }

  .temp-block { display: flex; flex-direction: column; }

  .temp-hero {
    font-size: 176px;
    font-weight: 200;
    line-height: 0.82;
    letter-spacing: -0.055em;
    font-variant-numeric: tabular-nums;
  }

  .temp-hero .deg {
    font-size: 0.38em;
    font-weight: 300;
    vertical-align: super;
    letter-spacing: 0;
    margin-left: 2px;
    opacity: 0.8;
  }

  .temp-label {
    margin-top: 16px;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
  }

  .temp-label span.cond {
    color: var(--accent-2);
    letter-spacing: 0.12em;
    font-weight: 500;
  }

  .temp-low .temp-hero {
    font-size: 72px;
    letter-spacing: -0.04em;
    opacity: 0.78;
    padding-bottom: 10px;
  }

  .icon-wrap {
    position: relative;
    width: 240px;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeUp 900ms 180ms ease both;
    color: var(--accent);
  }

  .icon-orb {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--glow) 0%, transparent 70%);
    animation: breathe 6s ease-in-out infinite;
  }

  .icon-wrap svg {
    position: relative;
    width: 168px;
    height: 168px;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.25));
  }

  .hourly {
    animation: fadeUp 800ms 240ms ease both;
  }

  .hourly-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
  }

  .hourly-head h2 {
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
  }

  .hourly-head span {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--faint);
  }

  .chart-box {
    position: relative;
    height: 132px;
    cursor: crosshair;
  }

  .chart-box svg {
    display: block;
    width: 100%;
    height: 132px;
    overflow: visible;
  }

  .hours {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    margin-top: 8px;
  }

  .hour {
    text-align: center;
    padding: 6px 0 2px;
    border-radius: 6px;
    transition: background 160ms ease;
  }

  .hour.active {
    background: var(--accent-dim, rgba(201, 184, 150, 0.12));
  }

  .hour .ht {
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.3;
  }

  .hour .hl {
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
  }

  .tooltip {
    position: absolute;
    top: -8px;
    transform: translate(-50%, -100%);
    background: rgba(12, 16, 28, 0.88);
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 12px;
    letter-spacing: 0.06em;
    padding: 6px 10px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms ease;
    white-space: nowrap;
    backdrop-filter: blur(10px);
    z-index: 3;
  }

  .tooltip.show { opacity: 1; }

  .state {
    height: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 72px;
  }

  .state-kicker {
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 16px;
  }

  .state h1 {
    font-size: 42px;
    font-weight: 300;
    letter-spacing: -0.03em;
    margin-bottom: 14px;
  }

  .state p {
    font-size: 16px;
    color: var(--muted);
    max-width: 460px;
    line-height: 1.55;
  }

  .spinner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--faint);
    border-top-color: var(--accent);
    animation: spin 900ms linear infinite;
    margin-bottom: 28px;
  }

  body[data-theme="clear"] {
    --bg1: #1a1208; --bg2: #2a1c0e; --bg3: #3d2914;
    --accent: #f0b429; --accent-2: #f6d48a;
    --glow: rgba(240, 180, 41, 0.28);
    --accent-dim: rgba(240, 180, 41, 0.12);
  }
  body[data-theme="partly"] {
    --bg1: #10182b; --bg2: #1a2740; --bg3: #2a3d5c;
    --accent: #f0c27a; --accent-2: #f4d7a8;
    --glow: rgba(240, 194, 122, 0.22);
    --accent-dim: rgba(240, 194, 122, 0.12);
  }
  body[data-theme="overcast"] {
    --bg1: #161b24; --bg2: #222833; --bg3: #323a48;
    --accent: #b7c3d4; --accent-2: #d5dce6;
    --glow: rgba(183, 195, 212, 0.18);
    --accent-dim: rgba(183, 195, 212, 0.12);
  }
  body[data-theme="fog"] {
    --bg1: #1c1a1c; --bg2: #2a272b; --bg3: #3c383c;
    --accent: #c4b8b0; --accent-2: #ddd4cc;
    --glow: rgba(196, 184, 176, 0.18);
    --accent-dim: rgba(196, 184, 176, 0.12);
  }
  body[data-theme="rain"] {
    --bg1: #071422; --bg2: #0e2238; --bg3: #163552;
    --accent: #7eb6ff; --accent-2: #b5d6ff;
    --glow: rgba(126, 182, 255, 0.22);
    --accent-dim: rgba(126, 182, 255, 0.12);
  }
  body[data-theme="snow"] {
    --bg1: #121820; --bg2: #1c2633; --bg3: #2c3a4d;
    --accent: #d7e6f5; --accent-2: #f0f6fb;
    --glow: rgba(215, 230, 245, 0.2);
    --accent-dim: rgba(215, 230, 245, 0.12);
  }
  body[data-theme="storm"] {
    --bg1: #120c1c; --bg2: #1d1430; --bg3: #2e1d4a;
    --accent: #c4a0ff; --accent-2: #ddc6ff;
    --glow: rgba(196, 160, 255, 0.24);
    --accent-dim: rgba(196, 160, 255, 0.12);
  }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes breathe {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.08); opacity: 1; }
  }
</style>
</head>
<body data-theme="overcast">
<div class="atmosphere"></div>
<div class="grain"></div>
<div class="vignette"></div>
<div class="topbar"></div>
<div id="app">
  <div class="state">
    <div class="spinner"></div>
    <div class="state-kicker">Weather</div>
    <h1>Loading</h1>
    <p>Retrieving conditions…</p>
  </div>
</div>
<script>
(function () {
  const app = document.getElementById("app");

  const WMO = {
    0: "Clear sky",
    1: "Mainly clear",
    2: "Partly cloudy",
    3: "Overcast",
    45: "Fog",
    48: "Depositing rime fog",
    51: "Light drizzle",
    53: "Moderate drizzle",
    55: "Dense drizzle",
    56: "Light freezing drizzle",
    57: "Dense freezing drizzle",
    61: "Slight rain",
    63: "Moderate rain",
    65: "Heavy rain",
    66: "Light freezing rain",
    67: "Heavy freezing rain",
    71: "Slight snow fall",
    73: "Moderate snow fall",
    75: "Heavy snow fall",
    77: "Snow grains",
    80: "Slight rain showers",
    81: "Moderate rain showers",
    82: "Violent rain showers",
    85: "Slight snow showers",
    86: "Heavy snow showers",
    95: "Thunderstorm",
    96: "Thunderstorm with slight hail",
    99: "Thunderstorm with heavy hail"
  };

  function escapeHtml(s) {
    return String(s)
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;");
  }

  function themeFor(code) {
    if (code === 0 || code === 1) return "clear";
    if (code === 2) return "partly";
    if (code === 3) return "overcast";
    if (code === 45 || code === 48) return "fog";
    if ([51, 53, 55, 56, 57, 61, 63, 65, 66, 67, 80, 81, 82].indexOf(code) >= 0) return "rain";
    if ([71, 73, 75, 77, 85, 86].indexOf(code) >= 0) return "snow";
    if ([95, 96, 99].indexOf(code) >= 0) return "storm";
    return "overcast";
  }

  function iconSvg(code) {
    const common = 'viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"';
    const sun = '<circle cx="32" cy="32" r="9" fill="currentColor" fill-opacity="0.15"/><circle cx="32" cy="32" r="9"/><path d="M32 14V9M32 55v-5M14 32H9M55 32h-5M19.2 19.2l-3.5-3.5M48.3 48.3l-3.5-3.5M19.2 44.8l-3.5 3.5M48.3 15.7l-3.5 3.5"/>';
    const cloud = '<path d="M18.5 44.5h26.2a9.3 9.3 0 0 0 1.2-18.5 13.2 13.2 0 0 0-25.2-2.6A8 8 0 0 0 18.5 44.5z" fill="currentColor" fill-opacity="0.12"/>';
    const cloudOnly = '<path d="M16 42h29a10 10 0 0 0 .8-20 14.5 14.5 0 0 0-27.6-2.4A8.6 8.6 0 0 0 16 42z" fill="currentColor" fill-opacity="0.12"/>';

    if (code === 0) return "<svg " + common + ">" + sun + "</svg>";
    if (code === 1) return "<svg " + common + '><g transform="translate(-6 -8) scale(0.86)">' + sun + '</g><path d="M20 48h24.5a8.5 8.5 0 0 0 .6-16.9 12 12 0 0 0-22.8-1.8A7.4 7.4 0 0 0 20 48z" fill="currentColor" fill-opacity="0.14"/></svg>';
    if (code === 2) return "<svg " + common + '><g transform="translate(-4 -10) scale(0.72)">' + sun + "</g>" + cloud + "</svg>";
    if (code === 3) return "<svg " + common + ">" + cloudOnly + '<path d="M22 28.5a11 11 0 0 1 20.2-2.2" /></svg>';
    if (code === 45 || code === 48) return '<svg ' + common + '><path d="M12 26h40M16 34h32M14 42h36" opacity="0.95"/><path d="M20 22h8M36 22h6" opacity="0.4"/></svg>';
    if ([51, 53, 55, 56, 57].indexOf(code) >= 0) return "<svg " + common + ">" + cloud + '<path d="M24 50v3M32 49v4M40 50v3" opacity="0.85"/></svg>';
    if ([71, 73, 75, 77, 85, 86].indexOf(code) >= 0) return "<svg " + common + ">" + cloud + '<path d="M24 50l.5 2.2M23 51.2h2.2M32 49.5l.5 2.2M31 50.7h2.2M40 50l.5 2.2M39 51.2h2.2"/></svg>';
    if ([95, 96, 99].indexOf(code) >= 0) return "<svg " + common + ">" + cloud + '<path d="M31 44l-5 9h5l-2 8 9-12h-5l3-5z" fill="currentColor" stroke="none"/></svg>';
    return "<svg " + common + ">" + cloud + '<path d="M24 50l-1.2 5M32 49l-1.2 6M40 50l-1.2 5"/></svg>';
  }

  function getParams() {
    const params = new URLSearchParams(window.location.search);
    function num(key, fallback) {
      const v = params.get(key);
      if (v === null || v === "") return fallback;
      const n = parseFloat(v);
      return Number.isFinite(n) ? n : fallback;
    }
    const lat = num("lat", 52.52);
    const lon = num("lon", 13.405);
    const nameRaw = params.get("name");
    const name = nameRaw && nameRaw.trim() ? nameRaw.trim() : "Berlin";
    const todayStr = new Date().toISOString().slice(0, 10);
    let date = params.get("date");
    if (!date || !/^\d{4}-\d{2}-\d{2}$/.test(date)) date = todayStr;
    return { lat, lon, name, date, todayStr };
  }

  function formatDate(dateStr) {
    const d = new Date(dateStr + "T12:00:00Z");
    return d.toLocaleDateString("en-GB", {
      weekday: "long",
      day: "numeric",
      month: "long",
      year: "numeric",
      timeZone: "UTC"
    });
  }

  function fmtCoord(lat, lon) {
    const ns = lat >= 0 ? "N" : "S";
    const ew = lon >= 0 ? "E" : "W";
    return Math.abs(lat).toFixed(2) + "°" + ns + "   " + Math.abs(lon).toFixed(2) + "°" + ew;
  }

  function conditionName(code) {
    if (code == null || Number.isNaN(Number(code))) return "Unknown conditions";
    return WMO[Number(code)] || "Unknown conditions";
  }

  function catmullRom(points) {
    if (!points.length) return "";
    if (points.length === 1) return "M " + points[0][0] + "," + points[0][1];
    let d = "M " + points[0][0] + "," + points[0][1];
    for (let i = 0; i < points.length - 1; i++) {
      const p0 = points[i - 1] || points[i];
      const p1 = points[i];
      const p2 = points[i + 1];
      const p3 = points[i + 2] || p2;
      const c1x = p1[0] + (p2[0] - p0[0]) / 6;
      const c1y = p1[1] + (p2[1] - p0[1]) / 6;
      const c2x = p2[0] - (p3[0] - p1[0]) / 6;
      const c2y = p2[1] - (p3[1] - p1[1]) / 6;
      d += " C " + c1x + "," + c1y + " " + c2x + "," + c2y + " " + p2[0] + "," + p2[1];
    }
    return d;
  }

  function renderError(title, detail) {
    document.body.setAttribute("data-theme", "overcast");
    app.innerHTML =
      '<div class="state">' +
        '<div class="state-kicker">Unavailable</div>' +
        "<h1>" + escapeHtml(title) + "</h1>" +
        "<p>" + escapeHtml(detail) + "</p>" +
      "</div>";
  }

  function renderWeather(p, daily, hours) {
    const code = daily.weather_code;
    const theme = themeFor(code);
    document.body.setAttribute("data-theme", theme);
    document.title = p.name + " · Weather";

    const maxT = Math.round(daily.temperature_2m_max);
    const minT = Math.round(daily.temperature_2m_min);
    const cond = conditionName(code);

    const valid = hours.filter(function (h) { return h.temp != null && Number.isFinite(h.temp); });
    const tMin = valid.length ? Math.min.apply(null, valid.map(function (h) { return h.temp; })) : 0;
    const tMax = valid.length ? Math.max.apply(null, valid.map(function (h) { return h.temp; })) : 1;
    const range = tMax - tMin || 1;

    const W = 1136;
    const H = 132;
    const padY = 18;
    const n = hours.length || 1;

    const pts = hours.map(function (h, i) {
      const x = ((i + 0.5) / n) * W;
      const t = h.temp != null && Number.isFinite(h.temp) ? h.temp : tMin;
      const y = H - padY - ((t - tMin) / range) * (H - padY * 2);
      return [x, y];
    });

    const line = catmullRom(pts);
    const area = line + " L " + (pts.length ? pts[pts.length - 1][0] : 0) + "," + H + " L " + (pts.length ? pts[0][0] : 0) + "," + H + " Z";

    let maxIdx = 0;
    let minIdx = 0;
    hours.forEach(function (h, i) {
      if (h.temp == null) return;
      if (hours[maxIdx].temp == null || h.temp > hours[maxIdx].temp) maxIdx = i;
      if (hours[minIdx].temp == null || h.temp < hours[minIdx].temp) minIdx = i;
    });

    let dots = "";
    pts.forEach(function (pt, i) {
      if (hours[i].temp == null) return;
      const isExt = i === maxIdx || i === minIdx;
      dots += '<circle class="pt" data-i="' + i + '" cx="' + pt[0] + '" cy="' + pt[1] + '" r="' + (isExt ? 3.4 : 2.1) + '" fill="' + (isExt ? "var(--accent-2)" : "var(--accent)") + '"></circle>';
    });

    let hourCols = "";
    hours.forEach(function (h, i) {
      const label = String(i).padStart(2, "0");
      const val = h.temp == null ? "—" : Math.round(h.temp) + "°";
      hourCols +=
        '<div class="hour" data-i="' + i + '">' +
          '<div class="ht">' + val + "</div>" +
          '<div class="hl">' + label + "</div>" +
        "</div>";
    });

    app.innerHTML =
      '<div class="card">' +
        '<header class="header">' +
          "<div>" +
            '<div class="location">' + escapeHtml(p.name) + "</div>" +
            '<div class="subhead">' + escapeHtml(fmtCoord(p.lat, p.lon)) + "</div>" +
          "</div>" +
          '<div class="header-right">' +
            '<div class="date-main">' + escapeHtml(formatDate(p.date)) + "</div>" +
            '<div class="coords">' + escapeHtml(p.date) + " · UTC · Celsius</div>" +
          "</div>" +
        "</header>" +
        '<section class="hero">' +
          '<div class="temps">' +
            '<div class="temp-block">' +
              '<div class="temp-hero">' + maxT + '<span class="deg">°</span></div>' +
              '<div class="temp-label">High &nbsp;·&nbsp; <span class="cond">' + escapeHtml(cond) + "</span></div>" +
            "</div>" +
            '<div class="temp-block temp-low">' +
              '<div class="temp-hero">' + minT + '<span class="deg">°</span></div>' +
              '<div class="temp-label">Low</div>' +
            "</div>" +
          "</div>" +
          '<div class="icon-wrap"><div class="icon-orb"></div>' + iconSvg(code) + "</div>" +
        "</section>" +
        '<section class="hourly">' +
          '<div class="hourly-head"><h2>Hourly temperature</h2><span>24 hours</span></div>' +
          '<div class="chart-box" id="chart">' +
            '<div class="tooltip" id="tip"></div>' +
            '<svg viewBox="0 0 ' + W + " " + H + '" preserveAspectRatio="none" aria-hidden="true">' +
              "<defs>" +
                '<linearGradient id="ag" x1="0" y1="0" x2="0" y2="1">' +
                  '<stop offset="0%" stop-color="var(--accent)" stop-opacity="0.32"/>' +
                  '<stop offset="100%" stop-color="var(--accent)" stop-opacity="0"/>' +
                "</linearGradient>" +
              "</defs>" +
              '<path d="' + area + '" fill="url(#ag)"></path>' +
              '<path d="' + line + '" fill="none" stroke="var(--accent)" stroke-width="2.2" vector-effect="non-scaling-stroke"></path>' +
              '<line id="guide" x1="0" y1="0" x2="0" y2="' + H + '" stroke="var(--accent-2)" stroke-opacity="0.35" stroke-width="1" vector-effect="non-scaling-stroke" visibility="hidden"></line>' +
              dots +
            "</svg>" +
          "</div>" +
          '<div class="hours" id="hours">' + hourCols + "</div>" +
        "</section>" +
      "</div>";

    const chart = document.getElementById("chart");
    const tip = document.getElementById("tip");
    const guide = document.getElementById("guide");
    const hourEls = Array.prototype.slice.call(document.querySelectorAll(".hour"));

    function setActive(i) {
      hourEls.forEach(function (el) { el.classList.toggle("active", Number(el.getAttribute("data-i")) === i); });
      if (i < 0 || i >= hours.length) {
        tip.classList.remove("show");
        guide.setAttribute("visibility", "hidden");
        return;
      }
      const h = hours[i];
      const label = String(i).padStart(2, "0") + ":00";
      const val = h.temp == null ? "—" : Math.round(h.temp) + "°C";
      tip.textContent = label + "  ·  " + val;
      const xPct = ((i + 0.5) / n) * 100;
      tip.style.left = xPct + "%";
      tip.classList.add("show");
      guide.setAttribute("x1", pts[i][0]);
      guide.setAttribute("x2", pts[i][0]);
      guide.setAttribute("visibility", "visible");
    }

    function indexFromEvent(e) {
      const rect = chart.getBoundingClientRect();
      const x = (e.clientX - rect.left) / rect.width;
      return Math.max(0, Math.min(n - 1, Math.floor(x * n)));
    }

    chart.addEventListener("mousemove", function (e) { setActive(indexFromEvent(e)); });
    chart.addEventListener("mouseleave", function () { setActive(-1); });
    hourEls.forEach(function (el) {
      el.addEventListener("mouseenter", function () { setActive(Number(el.getAttribute("data-i"))); });
      el.addEventListener("mouseleave", function () { setActive(-1); });
    });
  }

  async function main() {
    const p = getParams();
    document.title = p.name + " · Weather";
    app.innerHTML =
      '<div class="state">' +
        '<div class="spinner"></div>' +
        '<div class="state-kicker">Weather</div>' +
        "<h1>" + escapeHtml(p.name) + "</h1>" +
        "<p>Retrieving conditions for " + escapeHtml(formatDate(p.date)) + "…</p>" +
      "</div>";

    const endpoint = p.date < p.todayStr ? "/api/om/archive" : "/api/om/forecast";
    const qs = new URLSearchParams({
      latitude: String(p.lat),
      longitude: String(p.lon),
      daily: "temperature_2m_max,temperature_2m_min,weather_code",
      hourly: "temperature_2m",
      timezone: "UTC",
      temperature_unit: "celsius",
      start_date: p.date,
      end_date: p.date
    });

    try {
      const res = await fetch(endpoint + "?" + qs.toString());
      if (!res.ok) throw new Error("bad status");
      const data = await res.json();
      if (!data || !data.daily || !data.hourly) throw new Error("shape");

      const maxArr = data.daily.temperature_2m_max;
      const minArr = data.daily.temperature_2m_min;
      const codeArr = data.daily.weather_code;
      if (!maxArr || !minArr || !codeArr || maxArr[0] == null || minArr[0] == null) throw new Error("daily");

      const times = data.hourly.time || [];
      const temps = data.hourly.temperature_2m || [];
      const hours = [];
      for (let i = 0; i < times.length; i++) {
        if (String(times[i]).indexOf(p.date) === 0) {
          const t = temps[i];
          hours.push({ time: times[i], temp: t == null ? null : Number(t) });
        }
      }
      if (!hours.length) throw new Error("hourly");

      renderWeather(p, {
        temperature_2m_max: Number(maxArr[0]),
        temperature_2m_min: Number(minArr[0]),
        weather_code: Number(codeArr[0])
      }, hours);
    } catch (err) {
      renderError(
        "Weather data could not be loaded",
        "Conditions for " + p.name + " on " + formatDate(p.date) + " are unavailable. Check the location or date and try again."
      );
    }
  }

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

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

bytes 总计23,767html / css / js515 / 8,966 / 14,286
dom 节点18dom 深度5
css 规则61含 js是
brightness37.4contrast17.6
colorfulness20.5留白62.4%

该 slot 的 telemetry

prompt tokens526completion tokens8,555
total tokens9,081wall185.7 s
cost—request id—
config.json554 B
{
  "N": 4,
  "auth": {
    "credential_ref": "WCB_XAI_OFFICIAL_KEY",
    "method": "api-key"
  },
  "billing": "metered",
  "config_id": "grok-4.6-eff-high--api--official--dev",
  "effort": "high",
  "family": "grok",
  "m": {
    "min": 4,
    "q": 4
  },
  "model_id": "grok-4.6",
  "protocol": "api",
  "served_model": "grok-4.6",
  "telemetry": {
    "completion_tokens": 56823,
    "cost_usd": null,
    "prompt_tokens": 4176,
    "total_tokens": 60999,
    "wall_ms": 1407504
  },
  "transport": "xai-official-api",
  "vendor_sanction_ref": null
}
send-log4.6 KB
{
  "N": 4,
  "batch_id": "2026-08-13--grok46-api",
  "config_id": "grok-4.6-eff-high--api--official--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-08-12T17:22:50.648117+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T17:20:31.908881+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-12T17:25:59.521932+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T17:22:53.838693+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-12T17:30:19.725776+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T17:26:04.086330+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-08-12T17:32:37.198166+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T17:30:24.506599+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-12T17:36:27.444022+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T17:32:40.554065+00:00"
        }
      ],
      "block_index": 2,
      "model_reaching_attempt_index": 0,
      "slot_index": 2,
      "terminal_state": "valid",
      "variant": "P-min"
    },
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-08-12T17:39:19.297945+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T17:36:30.868138+00:00"
        }
      ],
      "block_index": 2,
      "model_reaching_attempt_index": 0,
      "slot_index": 2,
      "terminal_state": "valid",
      "variant": "P-q"
    },
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-08-12T17:42:08.223455+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T17:39:25.685931+00:00"
        }
      ],
      "block_index": 3,
      "model_reaching_attempt_index": 0,
      "slot_index": 3,
      "terminal_state": "valid",
      "variant": "P-q"
    },
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-08-12T17:44:28.956224+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T17:42:12.106150+00:00"
        }
      ],
      "block_index": 3,
      "model_reaching_attempt_index": 0,
      "slot_index": 3,
      "terminal_state": "valid",
      "variant": "P-min"
    }
  ],
  "retry_policy": {
    "max_unreachable_retries": 5,
    "rate_limit_backoff": {
      "max_attempts": 4,
      "max_total_ms": 60000
    }
  }
}