grok-4.6 · api

api
config
grok-4.6--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 · api P-q slot 0 截图

内容未就绪 — 抓拍时这张卡还停在占位/加载态,真实内容从未填入。截图记录的就是页面当时的样子;下方「原始输出」里可以看到它自己的代码。

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

similarity 邻居

限于 session 2026-07-19--unified

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

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

  • namematch
  • conditionmatch
  • datematch
  • max tempnot-foundno-temperature-candidate
  • min tempnot-foundno-temperature-candidate
  • hourlynot-foundcoverage · 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, height=800">
<title>Weather</title>
<style>
  :root {
    --ink: #f6f3ec;
    --ink-soft: rgba(246, 243, 236, 0.62);
    --ink-faint: rgba(246, 243, 236, 0.38);
    --line: rgba(255, 255, 255, 0.14);
    --accent: #e8d5b5;
    --bar: rgba(255, 255, 255, 0.78);
    --bar-soft: rgba(255, 255, 255, 0.18);
    --card: rgba(12, 16, 24, 0.28);
  }

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

  html, body {
    width: 1280px;
    height: 800px;
    overflow: hidden;
    font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--ink);
    background: #12141c;
  }

  body {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .atmosphere {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    background: linear-gradient(158deg, #141822 0%, #1c2433 55%, #2a3142 100%);
  }

  .atmosphere::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.11;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
    opacity: 0.55;
  }
  .orb-a {
    width: 520px; height: 520px;
    top: -180px; right: -80px;
    background: radial-gradient(circle, #c4894a 0%, transparent 68%);
    animation: drift 18s ease-in-out infinite;
  }
  .orb-b {
    width: 420px; height: 420px;
    bottom: -160px; left: -100px;
    background: radial-gradient(circle, #2a628c 0%, transparent 70%);
    animation: drift 22s ease-in-out infinite reverse;
  }
  .orb-c {
    width: 260px; height: 260px;
    top: 280px; left: 520px;
    background: radial-gradient(circle, #8a6cb0 0%, transparent 70%);
    opacity: 0.28;
    animation: drift 26s ease-in-out infinite 2s;
  }

  @keyframes drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(28px, -18px) scale(1.06); }
  }

  body[data-theme="clear"] .atmosphere {
    background: linear-gradient(158deg, #10243f 0%, #1d4d78 36%, #c47a38 78%, #e59b45 100%);
  }
  body[data-theme="clear"] { --accent: #ffd89a; --bar: #ffe3b0; }
  body[data-theme="clear"] .orb-a { background: radial-gradient(circle, #ffb45a 0%, transparent 68%); opacity: 0.7; }
  body[data-theme="clear"] .orb-b { background: radial-gradient(circle, #2b6ea8 0%, transparent 70%); }

  body[data-theme="partly"] .atmosphere {
    background: linear-gradient(160deg, #16344e 0%, #3a6d8c 48%, #8eacc4 100%);
  }
  body[data-theme="partly"] { --accent: #e7f2fa; --bar: #d9ebf7; }
  body[data-theme="partly"] .orb-a { background: radial-gradient(circle, #f0d2a0 0%, transparent 68%); }

  body[data-theme="overcast"] .atmosphere {
    background: linear-gradient(160deg, #1a202c 0%, #3a4556 58%, #6a7586 100%);
  }
  body[data-theme="overcast"] { --accent: #d5dbe3; --bar: #cfd6df; }
  body[data-theme="overcast"] .orb-a { background: radial-gradient(circle, #8b95a3 0%, transparent 68%); opacity: 0.35; }

  body[data-theme="fog"] .atmosphere {
    background: linear-gradient(160deg, #262e2c 0%, #556660 52%, #97a49c 100%);
  }
  body[data-theme="fog"] { --accent: #e0e8e3; --bar: #d5dfd8; }
  body[data-theme="fog"] .orb-a { background: radial-gradient(circle, #c5d0c8 0%, transparent 68%); opacity: 0.4; }

  body[data-theme="rain"] .atmosphere {
    background: linear-gradient(165deg, #070f16 0%, #0e2236 42%, #18425f 78%, #1f5a6e 100%);
  }
  body[data-theme="rain"] { --accent: #7ed0e8; --bar: #6ec5de; }
  body[data-theme="rain"] .orb-a { background: radial-gradient(circle, #3d8eaa 0%, transparent 68%); }
  body[data-theme="rain"] .orb-c { background: radial-gradient(circle, #4aa3c4 0%, transparent 70%); opacity: 0.3; }

  body[data-theme="snow"] .atmosphere {
    background: linear-gradient(160deg, #101624 0%, #2a4060 50%, #7a9bb8 100%);
  }
  body[data-theme="snow"] { --accent: #eaf4ff; --bar: #e4f0fb; }
  body[data-theme="snow"] .orb-a { background: radial-gradient(circle, #c5dcf0 0%, transparent 68%); opacity: 0.45; }

  body[data-theme="storm"] .atmosphere {
    background: linear-gradient(160deg, #090712 0%, #19122e 40%, #2c1a4c 72%, #172844 100%);
  }
  body[data-theme="storm"] { --accent: #d4b8ff; --bar: #c8a6ff; }
  body[data-theme="storm"] .orb-a { background: radial-gradient(circle, #7a4ec8 0%, transparent 68%); }
  body[data-theme="storm"] .orb-c { background: radial-gradient(circle, #e0b84a 0%, transparent 70%); opacity: 0.22; }

  .stage {
    position: relative;
    z-index: 1;
    width: 1280px;
    height: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card {
    width: 1128px;
    height: 704px;
    padding: 48px 56px 40px;
    border-radius: 36px;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.045));
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.18) inset,
      0 30px 60px rgba(0,0,0,0.22),
      0 8px 20px rgba(0,0,0,0.12);
    backdrop-filter: blur(36px) saturate(1.25);
    -webkit-backdrop-filter: blur(36px) saturate(1.25);
    display: flex;
    flex-direction: column;
    animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @keyframes rise {
    from { opacity: 0; transform: translateY(18px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
  }

  .kicker {
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 600;
    margin-bottom: 10px;
  }

  .location {
    font-size: 44px;
    font-weight: 560;
    letter-spacing: -0.035em;
    line-height: 1.05;
    max-width: 700px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .meta-row {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--ink-soft);
    font-size: 16px;
    font-weight: 450;
  }

  .dot {
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--accent);
    opacity: 0.8;
  }

  .icon-wrap {
    width: 168px;
    height: 168px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.18));
  }
  .icon-wrap svg { width: 148px; height: 148px; }

  .temps {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 8px;
    padding-bottom: 28px;
  }

  .hero {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }

  .hero-num {
    font-size: 152px;
    font-weight: 220;
    letter-spacing: -0.055em;
    line-height: 0.82;
    font-variant-numeric: tabular-nums;
  }

  .hero-unit {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .deg {
    font-size: 36px;
    font-weight: 300;
    letter-spacing: -0.03em;
    color: var(--ink-soft);
  }

  .condition {
    font-size: 22px;
    font-weight: 450;
    letter-spacing: -0.02em;
    color: var(--ink);
    max-width: 280px;
    line-height: 1.25;
  }

  .range {
    display: flex;
    gap: 28px;
    padding-bottom: 18px;
  }

  .stat {
    min-width: 108px;
  }

  .stat-label {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: 650;
    margin-bottom: 6px;
  }

  .stat-val {
    font-size: 34px;
    font-weight: 400;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
  }

  .stat-val span {
    font-size: 20px;
    color: var(--ink-soft);
    margin-left: 1px;
  }

  .divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line) 8%, var(--line) 92%, transparent);
    margin: 4px 0 22px;
  }

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

  .hourly-head h2 {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 650;
    color: var(--ink-soft);
  }

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

  .chart {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 196px;
  }

  .guides {
    position: absolute;
    left: 0; right: 0; top: 22px; bottom: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
  }
  .guides i {
    display: block;
    height: 1px;
    background: rgba(255,255,255,0.07);
  }

  .hours {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
    gap: 6px;
    height: 196px;
    padding: 0 2px;
  }

  .hour {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
  }

  .h-temp {
    height: 22px;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
    opacity: 0;
    transition: opacity 0.2s ease;
    letter-spacing: -0.02em;
  }
  .hour.mark .h-temp,
  .hour:hover .h-temp { opacity: 1; color: var(--ink); }

  .h-col {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .h-bar {
    width: 100%;
    max-width: 28px;
    height: var(--h, 40%);
    border-radius: 8px 8px 4px 4px;
    background: linear-gradient(180deg, var(--bar) 0%, var(--bar-soft) 140%);
    transform-origin: bottom;
    animation: grow 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset;
  }

  .hour.peak .h-bar {
    background: linear-gradient(180deg, var(--accent) 0%, rgba(255,255,255,0.2) 140%);
  }

  @keyframes grow {
    from { transform: scaleY(0); opacity: 0.2; }
    to { transform: scaleY(1); opacity: 1; }
  }

  .h-label {
    height: 26px;
    display: flex;
    align-items: flex-end;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
    font-weight: 550;
  }
  .hour.mark .h-label { color: var(--ink-soft); }

  .status {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
  }

  .status p {
    font-size: 22px;
    font-weight: 450;
    letter-spacing: -0.02em;
  }

  .status .sub {
    font-size: 15px;
    color: var(--ink-soft);
    max-width: 460px;
    line-height: 1.5;
  }

  .pulse {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--accent);
    animation: pulse 1.2s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(232, 213, 181, 0.5);
  }

  @keyframes pulse {
    0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(232, 213, 181, 0.45); }
    70% { transform: scale(1); box-shadow: 0 0 0 14px rgba(232, 213, 181, 0); }
    100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(232, 213, 181, 0); }
  }

  .fail-mark {
    width: 72px; height: 72px;
    border: 1.5px solid var(--line);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
  }

  noscript {
    position: relative;
    z-index: 2;
    color: var(--ink);
    font-size: 18px;
  }
</style>
</head>
<body>
  <div class="atmosphere" aria-hidden="true">
    <div class="orb orb-a"></div>
    <div class="orb orb-b"></div>
    <div class="orb orb-c"></div>
  </div>
  <main class="stage">
    <article class="card" id="card">
      <div class="status">
        <div class="pulse"></div>
        <p>Fetching the sky</p>
        <div class="sub">Loading temperature and conditions…</div>
      </div>
    </article>
  </main>
  <noscript>JavaScript is required to load weather data.</noscript>
<script>
(function () {
  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",
    73: "Moderate snow",
    75: "Heavy snow",
    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 themeOf(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 sw = 'stroke="currentColor" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"';
    const sun = '<circle cx="44" cy="44" r="13"/><path d="M44 16v6M44 66v6M16 44h6M66 44h6M24.2 24.2l4.2 4.2M59.6 59.6l4.2 4.2M24.2 63.8l4.2-4.2M59.6 28.4l4.2-4.2"/>';
    if (code === 0) return '<svg viewBox="0 0 88 88" ' + sw + '>' + sun + "</svg>";
    if (code === 1) return '<svg viewBox="0 0 88 88" ' + sw + '><circle cx="38" cy="36" r="11"/><path d="M38 16v5M18 36h5M22.2 20.2l3.5 3.5M22.2 51.8l3.5-3.5M54 36h5"/><path d="M32 62h28a10 10 0 0 0 1.2-19.9 14 14 0 0 0-26.6-3.4A11 11 0 0 0 32 62z"/></svg>';
    if (code === 2) return '<svg viewBox="0 0 88 88" ' + sw + '><circle cx="34" cy="32" r="10"/><path d="M34 14v5M16 32h5M21 19l3.4 3.4M21 45l3.4-3.4"/><path d="M30 64h32a11 11 0 0 0 1.4-21.9 15.5 15.5 0 0 0-29.4-3.6A12 12 0 0 0 30 64z"/></svg>';
    if (code === 3) return '<svg viewBox="0 0 88 88" ' + sw + '><path d="M24 58h38a12 12 0 0 0 1.5-23.9A17 17 0 0 0 31.4 30 13.5 13.5 0 0 0 24 58z"/><path d="M28 68h30"/></svg>';
    if (code === 45 || code === 48) return '<svg viewBox="0 0 88 88" ' + sw + '><path d="M18 34h52M22 44h44M26 54h36M30 64h28"/></svg>';
    if ([71, 73, 75, 77, 85, 86].indexOf(code) >= 0) {
      return '<svg viewBox="0 0 88 88" ' + sw + '><path d="M24 42h36a11 11 0 0 0 1.3-21.8A15.5 15.5 0 0 0 32 17.4 12.5 12.5 0 0 0 24 42z"/><path d="M30 54v6M30 64l-2 4M30 64l2 4M44 52v6M44 62l-2 4M44 62l2 4M58 54v6M58 64l-2 4M58 64l2 4"/></svg>';
    }
    if ([95, 96, 99].indexOf(code) >= 0) {
      return '<svg viewBox="0 0 88 88" ' + sw + '><path d="M24 40h36a11 11 0 0 0 1.3-21.8A15.5 15.5 0 0 0 32 15.4 12.5 12.5 0 0 0 24 40z"/><path d="M42 44l-10 16h10l-4 16 16-20h-10l6-12z" fill="currentColor" stroke="none" opacity="0.92"/></svg>';
    }
    return '<svg viewBox="0 0 88 88" ' + sw + '><path d="M24 44h36a11 11 0 0 0 1.3-21.8A15.5 15.5 0 0 0 32 19.4 12.5 12.5 0 0 0 24 44z"/><path d="M32 56l-2 10M44 54l-2 12M56 56l-2 10"/></svg>';
  }

  function esc(s) {
    return String(s).replace(/[&<>"']/g, function (c) {
      return ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c];
    });
  }

  function fmtTemp(t) {
    if (t == null || isNaN(t)) return "–";
    var r = Math.round(t * 10) / 10;
    return Number.isInteger(r) ? String(r) : r.toFixed(1);
  }

  function fmtDate(iso) {
    var p = iso.split("-").map(Number);
    var dt = new Date(Date.UTC(p[0], p[1] - 1, p[2]));
    return new Intl.DateTimeFormat("en-GB", {
      weekday: "long",
      day: "numeric",
      month: "long",
      year: "numeric",
      timeZone: "UTC"
    }).format(dt);
  }

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

  function fail() {
    document.body.removeAttribute("data-theme");
    document.getElementById("card").innerHTML =
      '<div class="status">' +
        '<div class="fail-mark">' +
          '<svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round">' +
            '<path d="M6 20h16a5.5 5.5 0 0 0 .7-10.9A7.8 7.8 0 0 0 10.2 7.2 6.2 6.2 0 0 0 6 20z"/>' +
            '<path d="M9 26l14-14"/>' +
          "</svg>" +
        "</div>" +
        "<p>Weather data could not be loaded</p>" +
        '<div class="sub">The forecast for this location and date could not be retrieved. Check the coordinates and try again.</div>' +
      "</div>";
  }

  function render(name, date, data) {
    var daily = data && data.daily;
    if (!daily || daily.temperature_2m_max == null || daily.temperature_2m_max[0] == null ||
        daily.temperature_2m_min == null || daily.temperature_2m_min[0] == null ||
        daily.weather_code == null || daily.weather_code[0] == null) {
      fail();
      return;
    }

    var tmax = daily.temperature_2m_max[0];
    var tmin = daily.temperature_2m_min[0];
    var code = daily.weather_code[0];
    var cond = WMO[code] || "Unknown conditions";
    var theme = themeOf(code);
    document.body.setAttribute("data-theme", theme);

    var hours = [];
    if (data.hourly && data.hourly.time && data.hourly.temperature_2m) {
      for (var i = 0; i < data.hourly.time.length; i++) {
        var tm = data.hourly.time[i];
        var tv = data.hourly.temperature_2m[i];
        if (tm && tm.indexOf(date) === 0 && tv != null && !isNaN(tv)) {
          hours.push({ hour: tm.slice(11, 13), temp: tv });
        }
      }
    }

    var hero = fmtTemp(tmax);
    var bars = "";
    if (hours.length) {
      var lo = hours[0].temp, hi = hours[0].temp, peak = 0;
      for (var h = 0; h < hours.length; h++) {
        if (hours[h].temp < lo) lo = hours[h].temp;
        if (hours[h].temp > hi) { hi = hours[h].temp; peak = h; }
      }
      var span = Math.max(hi - lo, 3);
      var floor = lo - span * 0.12;
      var ceil = hi + span * 0.08;
      var den = ceil - floor || 1;
      for (var j = 0; j < hours.length; j++) {
        var pct = 16 + ((hours[j].temp - floor) / den) * 84;
        var mark = (parseInt(hours[j].hour, 10) % 3 === 0);
        var cls = "hour" + (mark ? " mark" : "") + (j === peak ? " peak" : "");
        bars +=
          '<div class="' + cls + '" style="--h:' + pct.toFixed(1) + "%;animation-delay:" + (j * 22) + 'ms">' +
            '<div class="h-temp">' + esc(fmtTemp(hours[j].temp)) + "</div>" +
            '<div class="h-col"><div class="h-bar" style="animation-delay:' + (80 + j * 22) + 'ms"></div></div>' +
            '<div class="h-label">' + (mark ? esc(hours[j].hour) : "") + "</div>" +
          "</div>";
      }
    } else {
      bars = '<div class="status" style="min-height:196px"><div class="sub">Hourly temperatures are unavailable for this date.</div></div>';
    }

    document.getElementById("card").innerHTML =
      '<div class="top">' +
        "<div>" +
          '<div class="kicker">Weather card</div>' +
          '<div class="location">' + esc(name) + "</div>" +
          '<div class="meta-row">' +
            "<span>" + esc(fmtDate(date)) + "</span>" +
            '<span class="dot"></span>' +
            "<span>UTC · Celsius</span>" +
          "</div>" +
        "</div>" +
        '<div class="icon-wrap" aria-hidden="true">' + iconSvg(code) + "</div>" +
      "</div>" +
      '<div class="temps">' +
        '<div class="hero">' +
          '<div class="hero-num">' + esc(hero) + "</div>" +
          '<div class="hero-unit">' +
            '<div class="deg">°C</div>' +
            '<div class="condition">' + esc(cond) + "</div>" +
          "</div>" +
        "</div>" +
        '<div class="range">' +
          '<div class="stat"><div class="stat-label">High</div><div class="stat-val">' + esc(fmtTemp(tmax)) + "<span>°</span></div></div>" +
          '<div class="stat"><div class="stat-label">Low</div><div class="stat-val">' + esc(fmtTemp(tmin)) + "<span>°</span></div></div>" +
        "</div>" +
      "</div>" +
      '<div class="divider"></div>' +
      '<div class="hourly-head"><h2>Hourly temperature</h2><span>24 hours · UTC</span></div>' +
      '<div class="chart">' +
        '<div class="guides" aria-hidden="true"><i></i><i></i><i></i><i></i></div>' +
        '<div class="hours">' + bars + "</div>" +
      "</div>";
  }

  async function load() {
    var q = new URLSearchParams(location.search);
    var lat = q.get("lat") || "52.52";
    var lon = q.get("lon") || "13.405";
    var name = q.get("name") || "Berlin";
    var date = q.get("date");
    var today = todayUTC();
    if (!date || !/^\d{4}-\d{2}-\d{2}$/.test(date)) date = today;

    var endpoint = date < today ? "/api/om/archive" : "/api/om/forecast";
    var qs = 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
    });

    try {
      var res = await fetch(endpoint + "?" + qs.toString());
      if (!res.ok) throw new Error("status");
      var data = await res.json();
      if (!data || data.error) throw new Error("payload");
      render(name, date, data);
    } catch (e) {
      fail();
    }
  }

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

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

bytes 总计21,926html / css / js691 / 11,721 / 9,514
dom 节点19dom 深度6
css 规则89含 js是
brightness63.1contrast26.7
colorfulness36.4留白45.0%

该 slot 的 telemetry

prompt tokens526completion tokens8,269
total tokens8,795wall178.3 s
cost—request id—
config.json543 B
{
  "N": 4,
  "auth": {
    "credential_ref": "WCB_XAI_OFFICIAL_KEY",
    "method": "api-key"
  },
  "billing": "metered",
  "config_id": "grok-4.6--api--official--dev",
  "effort": null,
  "family": "grok",
  "m": {
    "min": 4,
    "q": 4
  },
  "model_id": "grok-4.6",
  "protocol": "api",
  "served_model": "grok-4.6",
  "telemetry": {
    "completion_tokens": 56930,
    "cost_usd": null,
    "prompt_tokens": 4176,
    "total_tokens": 61106,
    "wall_ms": 1364298
  },
  "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--api--official--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-08-12T16:59:29.366750+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T16:56:31.035986+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:02:36.903968+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T16:59:35.159699+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:05:47.334983+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T17:02:40.172500+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:07:29.121003+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T17:05:52.033475+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:10:18.966988+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T17:08:16.482009+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:14:33.283064+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T17:10:22.349717+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:16:33.415747+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T17:14:37.916680+00:00"
        }
      ],
      "block_index": 3,
      "model_reaching_attempt_index": 0,
      "slot_index": 3,
      "terminal_state": "valid",
      "variant": "P-min"
    },
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-08-12T17:20:27.954523+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T17:16:36.872403+00:00"
        }
      ],
      "block_index": 3,
      "model_reaching_attempt_index": 0,
      "slot_index": 3,
      "terminal_state": "valid",
      "variant": "P-q"
    }
  ],
  "retry_policy": {
    "max_unreachable_retries": 5,
    "rate_limit_backoff": {
      "max_attempts": 4,
      "max_total_ms": 60000
    }
  }
}