grok-4.6 @ xhigh · api

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

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

similarity 邻居

限于 session 2026-07-19--unified

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

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

  • namematch
  • conditionmatch
  • datematch
  • max tempambiguous展示值:17max-equals-min
  • min tempambiguous展示值:17max-equals-min
  • 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">
<title>Weather</title>
<style>
  :root {
    --bg0: #0c1018;
    --bg1: #171e2e;
    --glow: #c47a3a;
    --orb1: rgba(196, 122, 58, 0.28);
    --orb2: rgba(80, 110, 170, 0.18);
    --ink: #f4efe6;
    --muted: rgba(244, 239, 230, 0.52);
    --faint: rgba(244, 239, 230, 0.14);
    --line: rgba(244, 239, 230, 0.13);
    --accent: #e8c17a;
    --chart: #e8c17a;
    --chart-fill: rgba(232, 193, 122, 0.16);
    --danger: #e8b4a0;
  }
  body[data-theme="clear"] {
    --bg0: #120c09;
    --bg1: #24160f;
    --glow: #e09440;
    --orb1: rgba(232, 150, 56, 0.36);
    --orb2: rgba(255, 196, 110, 0.12);
    --accent: #f0c27a;
    --chart: #f0c27a;
    --chart-fill: rgba(240, 194, 122, 0.18);
  }
  body[data-theme="partly"] {
    --bg0: #0c1018;
    --bg1: #1a2336;
    --glow: #d4926a;
    --orb1: rgba(212, 146, 106, 0.26);
    --orb2: rgba(110, 140, 190, 0.16);
    --accent: #e8c9a0;
    --chart: #e8c9a0;
    --chart-fill: rgba(232, 201, 160, 0.16);
  }
  body[data-theme="cloudy"] {
    --bg0: #12151a;
    --bg1: #262c34;
    --glow: #7a848e;
    --orb1: rgba(140, 150, 160, 0.16);
    --orb2: rgba(90, 100, 112, 0.14);
    --accent: #c5cdd4;
    --chart: #c5cdd4;
    --chart-fill: rgba(197, 205, 212, 0.14);
  }
  body[data-theme="rain"] {
    --bg0: #061014;
    --bg1: #0d2430;
    --glow: #1f6b6e;
    --orb1: rgba(40, 140, 150, 0.22);
    --orb2: rgba(60, 90, 130, 0.16);
    --accent: #8fd4cf;
    --chart: #8fd4cf;
    --chart-fill: rgba(143, 212, 207, 0.16);
  }
  body[data-theme="snow"] {
    --bg0: #0c1218;
    --bg1: #1a2634;
    --glow: #8aa4c0;
    --orb1: rgba(190, 210, 230, 0.16);
    --orb2: rgba(120, 150, 180, 0.14);
    --ink: #f4f7fb;
    --accent: #e8eef6;
    --chart: #d5e4f2;
    --chart-fill: rgba(213, 228, 242, 0.16);
  }
  body[data-theme="thunder"] {
    --bg0: #0a0812;
    --bg1: #1a1230;
    --glow: #6b3fa0;
    --orb1: rgba(130, 80, 190, 0.28);
    --orb2: rgba(80, 50, 140, 0.2);
    --accent: #c4a6e8;
    --chart: #c4a6e8;
    --chart-fill: rgba(196, 166, 232, 0.16);
  }
  body[data-theme="fog"] {
    --bg0: #141310;
    --bg1: #2a2720;
    --glow: #8a8070;
    --orb1: rgba(180, 168, 140, 0.16);
    --orb2: rgba(120, 112, 96, 0.12);
    --accent: #d4cbb8;
    --chart: #d4cbb8;
    --chart-fill: rgba(212, 203, 184, 0.16);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    width: 100%;
    height: 100%;
    background: #05070c;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  .stage {
    width: 1280px;
    height: 800px;
    position: relative;
    overflow: hidden;
    background: var(--bg0);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  }
  .aurora {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 90% 46% at 50% 108%, var(--glow) 0%, transparent 58%),
      radial-gradient(ellipse 42% 38% at 12% 18%, var(--orb1) 0%, transparent 70%),
      radial-gradient(ellipse 36% 34% at 88% 22%, var(--orb2) 0%, transparent 68%),
      linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 48%, var(--bg0) 100%);
    transition: background 0.8s ease;
  }
  body.is-loading .aurora {
    animation: breathe 2.4s ease-in-out infinite;
  }
  .fx {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  body[data-theme="clear"] .fx,
  body[data-theme="partly"] .fx {
    background: radial-gradient(circle at 50% 42%, rgba(255, 186, 80, 0.16), transparent 26%);
  }
  body[data-theme="rain"] .fx {
    background: repeating-linear-gradient(
      82deg,
      transparent 0 11px,
      rgba(180, 220, 230, 0.035) 11px 12px
    );
    animation: fall 1.4s linear infinite;
  }
  body[data-theme="snow"] .fx {
    background-image:
      radial-gradient(1.5px 1.5px at 12% 20%, rgba(255,255,255,0.35) 50%, transparent 60%),
      radial-gradient(1.5px 1.5px at 28% 68%, rgba(255,255,255,0.28) 50%, transparent 60%),
      radial-gradient(1.2px 1.2px at 46% 36%, rgba(255,255,255,0.3) 50%, transparent 60%),
      radial-gradient(1.6px 1.6px at 63% 78%, rgba(255,255,255,0.22) 50%, transparent 60%),
      radial-gradient(1.2px 1.2px at 81% 24%, rgba(255,255,255,0.32) 50%, transparent 60%),
      radial-gradient(1.4px 1.4px at 91% 58%, rgba(255,255,255,0.2) 50%, transparent 60%);
    animation: drift 14s linear infinite;
  }
  body[data-theme="thunder"] .fx {
    background: radial-gradient(ellipse 50% 30% at 70% 20%, rgba(180, 130, 255, 0.12), transparent 70%);
  }
  .vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 78% 72% at 50% 45%, transparent 40%, rgba(0,0,0,0.38) 100%);
  }
  .grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.055;
    mix-blend-mode: overlay;
  }
  .grain svg { width: 100%; height: 100%; display: block; }

  .frame {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 40px 56px 32px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 8px;
  }
  .corners { position: absolute; inset: 18px; pointer-events: none; z-index: 3; }
  .corners i {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 0 solid rgba(244, 239, 230, 0.28);
  }
  .corners i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
  .corners i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
  .corners i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
  .corners i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

  header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    padding-top: 8px;
  }
  .kicker {
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 10px;
  }
  h1 {
    font-family: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
    font-size: 52px;
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1;
    max-width: 820px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .date-block { text-align: right; padding-top: 2px; flex-shrink: 0; }
  #weekday {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.01em;
    margin-bottom: 4px;
  }
  #fulldate {
    font-size: 15px;
    color: var(--muted);
    margin-bottom: 8px;
  }
  .tz {
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
  }

  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
  }
  .condition-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
    min-height: 56px;
  }
  .icon {
    width: 56px;
    height: 56px;
    color: var(--accent);
    filter: drop-shadow(0 0 16px var(--glow));
    flex-shrink: 0;
  }
  .icon svg { width: 100%; height: 100%; display: block; }
  #condition {
    font-size: 13px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink);
  }
  .temps {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 72px;
  }
  .temp {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 180px;
  }
  .t {
    font-size: 118px;
    font-weight: 200;
    letter-spacing: -0.045em;
    line-height: 0.88;
    font-variant-numeric: tabular-nums;
  }
  .deg {
    font-size: 0.38em;
    font-weight: 300;
    letter-spacing: 0;
    margin-left: 2px;
    vertical-align: 0.62em;
    opacity: 0.8;
  }
  .tlbl {
    margin-top: 14px;
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
  }
  .rule {
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--line) 15%, var(--line) 85%, transparent);
    align-self: stretch;
  }

  .hours {
    padding-top: 8px;
  }
  .hours-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--muted);
  }
  #chart { width: 100%; height: 132px; }
  #chart svg { width: 100%; height: 100%; display: block; }
  .hour-scale {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--faint);
  }
  .hour-cell {
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding: 2px 0 0;
    border-radius: 3px;
  }
  .hour-cell.is-extreme .ht { color: var(--accent); }
  .hour-cell.is-now {
    background: rgba(244, 239, 230, 0.05);
    box-shadow: inset 0 -2px 0 var(--accent);
  }
  .ht {
    display: block;
    font-size: 12px;
    font-weight: 560;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }
  .hh {
    display: block;
    margin-top: 5px;
    font-size: 9px;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 600;
  }

  .error-panel {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
  }
  body.is-error .hero,
  body.is-error .hours { display: none; }
  body.is-error .error-panel { display: flex; }
  .error-mark {
    width: 46px;
    height: 46px;
    border: 1px solid var(--danger);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--danger);
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 6px;
  }
  .error-title {
    font-family: Georgia, "Iowan Old Style", Palatino, serif;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.02em;
  }
  .error-sub {
    color: var(--muted);
    font-size: 15px;
    max-width: 420px;
    line-height: 1.5;
  }

  .loader {
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--faint);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.85s linear infinite;
  }
  body.is-loading .icon { display: none; }
  body:not(.is-loading) .loader { display: none; }
  body.is-loading .t { opacity: 0.22; }
  body.is-loading #condition { color: var(--muted); letter-spacing: 0.22em; }

  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes breathe {
    0%, 100% { filter: saturate(1) brightness(1); }
    50% { filter: saturate(1.15) brightness(1.08); }
  }
  @keyframes fall { to { background-position: 18px 28px; } }
  @keyframes drift { to { transform: translateY(18px); } }
  @media (prefers-reduced-motion: reduce) {
    .aurora, .fx, .loader { animation: none !important; }
  }
</style>
</head>
<body class="is-loading">
  <div class="stage">
    <div class="aurora" aria-hidden="true"></div>
    <div class="fx" aria-hidden="true"></div>
    <div class="vignette" aria-hidden="true"></div>
    <div class="grain" aria-hidden="true">
      <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
        <filter id="g">
          <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="4" stitchTiles="stitch"/>
          <feColorMatrix type="saturate" values="0"/>
        </filter>
        <rect width="100%" height="100%" filter="url(#g)"/>
      </svg>
    </div>
    <div class="corners" aria-hidden="true"><i></i><i></i><i></i><i></i></div>
    <main class="frame">
      <header>
        <div>
          <p class="kicker">Location</p>
          <h1 id="place">Berlin</h1>
        </div>
        <div class="date-block">
          <p id="weekday">—</p>
          <p id="fulldate">—</p>
          <p class="tz">UTC · Celsius</p>
        </div>
      </header>
      <section class="hero" id="hero">
        <div class="condition-row">
          <div class="loader" aria-hidden="true"></div>
          <div class="icon" id="icon"></div>
          <p id="condition">Retrieving observations</p>
        </div>
        <div class="temps">
          <div class="temp">
            <div class="t" id="tmax">—</div>
            <div class="tlbl">Maximum</div>
          </div>
          <div class="rule"></div>
          <div class="temp">
            <div class="t" id="tmin">—</div>
            <div class="tlbl">Minimum</div>
          </div>
        </div>
      </section>
      <section class="error-panel" id="error" role="alert">
        <div class="error-mark">!</div>
        <p class="error-title">Weather data could not be loaded</p>
        <p class="error-sub">Observations for this place and date are unavailable.</p>
      </section>
      <section class="hours" id="hoursSection">
        <div class="hours-head">
          <span>Hourly temperature</span>
          <span>24 hours · UTC</span>
        </div>
        <div id="chart"></div>
        <div class="hour-scale" id="hourScale"></div>
      </section>
    </main>
  </div>
<script>
(function () {
  var placeEl = document.getElementById('place');
  var weekdayEl = document.getElementById('weekday');
  var fulldateEl = document.getElementById('fulldate');
  var condEl = document.getElementById('condition');
  var tmaxEl = document.getElementById('tmax');
  var tminEl = document.getElementById('tmin');
  var iconEl = document.getElementById('icon');
  var chartEl = document.getElementById('chart');
  var scaleEl = document.getElementById('hourScale');

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

  function validYMD(s) {
    if (!/^\d{4}-\d{2}-\d{2}$/.test(s)) return false;
    var p = s.split('-').map(Number);
    var dt = new Date(Date.UTC(p[0], p[1] - 1, p[2]));
    return dt.getUTCFullYear() === p[0] && dt.getUTCMonth() === p[1] - 1 && dt.getUTCDate() === p[2];
  }

  function fail() {
    document.body.classList.remove('is-loading');
    document.body.classList.add('is-error');
  }

  var qs = new URLSearchParams(location.search);
  var latN = qs.has('lat') ? Number(qs.get('lat')) : 52.52;
  var lonN = qs.has('lon') ? Number(qs.get('lon')) : 13.405;
  var name = (qs.get('name') || 'Berlin').trim() || 'Berlin';
  var date = qs.get('date') || todayUTC();

  placeEl.textContent = name;
  document.title = name + ' · Weather';

  if (!isFinite(latN) || !isFinite(lonN) || latN < -90 || latN > 90 || lonN < -180 || lonN > 180 || !validYMD(date)) {
    weekdayEl.textContent = 'Unknown date';
    fulldateEl.textContent = date || '—';
    fail();
    return;
  }

  var parts = date.split('-').map(Number);
  var dt = new Date(Date.UTC(parts[0], parts[1] - 1, parts[2]));
  weekdayEl.textContent = dt.toLocaleDateString('en-GB', { weekday: 'long', timeZone: 'UTC' });
  fulldateEl.textContent = dt.toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric', timeZone: 'UTC' });

  var ICONS = {
    sun: '<svg viewBox="0 0 64 64" fill="none"><circle cx="32" cy="32" r="11" fill="currentColor"/><g stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M32 6v7M32 51v7M6 32h7M51 32h7M13.2 13.2l5 5M45.8 45.8l5 5M13.2 50.8l5-5M45.8 18.2l5-5"/></g></svg>',
    partly: '<svg viewBox="0 0 64 64" fill="none"><circle cx="26" cy="24" r="8" fill="currentColor"/><g stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M26 8v5M10 24h5M14.2 12.2l3.4 3.4M14.2 35.8l3.4-3.4M37.8 12.2l-3.4 3.4"/></g><path d="M24.5 44.5h20.2a8.3 8.3 0 0 0 1.2-16.5 11.2 11.2 0 0 0-21.6 2.4A7.2 7.2 0 0 0 24.5 44.5z" fill="currentColor" fill-opacity="0.92"/></svg>',
    cloud: '<svg viewBox="0 0 64 64" fill="none"><path d="M18.5 44.5h27.2A9.4 9.4 0 0 0 47 26.1a13 13 0 0 0-25.2 2.6A8.3 8.3 0 0 0 18.5 44.5z" fill="currentColor"/></svg>',
    rain: '<svg viewBox="0 0 64 64" fill="none"><path d="M18.5 36.5h27.2A9.4 9.4 0 0 0 47 18.1a13 13 0 0 0-25.2 2.6A8.3 8.3 0 0 0 18.5 36.5z" fill="currentColor"/><g stroke="currentColor" stroke-width="2.1" stroke-linecap="round"><path d="M24 44v8M32 42v10M40 44v8"/></g></svg>',
    snow: '<svg viewBox="0 0 64 64" fill="none"><path d="M18.5 34.5h27.2A9.4 9.4 0 0 0 47 16.1a13 13 0 0 0-25.2 2.6A8.3 8.3 0 0 0 18.5 34.5z" fill="currentColor"/><g stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M24 42v8M20 46h8M21.7 43.7l6.6 6.6M28.3 43.7l-6.6 6.6M40 42v8M36 46h8M37.7 43.7l6.6 6.6M44.3 43.7l-6.6 6.6"/></g></svg>',
    thunder: '<svg viewBox="0 0 64 64" fill="none"><path d="M17.5 35.5h26.4A9 9 0 0 0 45.2 18a12.6 12.6 0 0 0-24.4 2.4A8 8 0 0 0 17.5 35.5z" fill="currentColor"/><path d="M31 34l-7 14h8l-2 12 11-16h-8l6-10z" fill="currentColor"/></svg>',
    fog: '<svg viewBox="0 0 64 64" fill="none"><g stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M14 24h28M18 32h32M14 40h26M22 48h24"/></g></svg>'
  };

  function weatherInfo(code) {
    var n = Number(code);
    if (!isFinite(n)) return { label: 'Unknown conditions', theme: 'cloudy', icon: 'cloud' };
    if (n === 0) return { label: 'Clear sky', theme: 'clear', icon: 'sun' };
    if (n === 1) return { label: 'Mainly clear', theme: 'clear', icon: 'sun' };
    if (n === 2) return { label: 'Partly cloudy', theme: 'partly', icon: 'partly' };
    if (n === 3) return { label: 'Overcast', theme: 'cloudy', icon: 'cloud' };
    if (n === 45) return { label: 'Fog', theme: 'fog', icon: 'fog' };
    if (n === 48) return { label: 'Rime fog', theme: 'fog', icon: 'fog' };
    if (n === 51) return { label: 'Light drizzle', theme: 'rain', icon: 'rain' };
    if (n === 53) return { label: 'Drizzle', theme: 'rain', icon: 'rain' };
    if (n === 55) return { label: 'Dense drizzle', theme: 'rain', icon: 'rain' };
    if (n === 56 || n === 57) return { label: 'Freezing drizzle', theme: 'snow', icon: 'rain' };
    if (n === 61) return { label: 'Slight rain', theme: 'rain', icon: 'rain' };
    if (n === 63) return { label: 'Moderate rain', theme: 'rain', icon: 'rain' };
    if (n === 65) return { label: 'Heavy rain', theme: 'rain', icon: 'rain' };
    if (n === 66 || n === 67) return { label: 'Freezing rain', theme: 'snow', icon: 'rain' };
    if (n === 71) return { label: 'Slight snow', theme: 'snow', icon: 'snow' };
    if (n === 73) return { label: 'Moderate snow', theme: 'snow', icon: 'snow' };
    if (n === 75) return { label: 'Heavy snow', theme: 'snow', icon: 'snow' };
    if (n === 77) return { label: 'Snow grains', theme: 'snow', icon: 'snow' };
    if (n === 80) return { label: 'Slight rain showers', theme: 'rain', icon: 'rain' };
    if (n === 81) return { label: 'Rain showers', theme: 'rain', icon: 'rain' };
    if (n === 82) return { label: 'Violent rain showers', theme: 'rain', icon: 'rain' };
    if (n === 85) return { label: 'Slight snow showers', theme: 'snow', icon: 'snow' };
    if (n === 86) return { label: 'Heavy snow showers', theme: 'snow', icon: 'snow' };
    if (n === 95) return { label: 'Thunderstorm', theme: 'thunder', icon: 'thunder' };
    if (n === 96) return { label: 'Thunderstorm with hail', theme: 'thunder', icon: 'thunder' };
    if (n === 99) return { label: 'Thunderstorm with heavy hail', theme: 'thunder', icon: 'thunder' };
    return { label: 'Unknown conditions', theme: 'cloudy', icon: 'cloud' };
  }

  function smoothPath(pts) {
    if (!pts.length) return '';
    if (pts.length === 1) return 'M' + pts[0].x + ',' + pts[0].y;
    var d = 'M' + pts[0].x + ',' + pts[0].y;
    for (var i = 0; i < pts.length - 1; i++) {
      var p0 = pts[Math.max(0, i - 1)];
      var p1 = pts[i];
      var p2 = pts[i + 1];
      var p3 = pts[Math.min(pts.length - 1, i + 2)];
      var c1x = p1.x + (p2.x - p0.x) / 6;
      var c1y = p1.y + (p2.y - p0.y) / 6;
      var c2x = p2.x - (p3.x - p1.x) / 6;
      var c2y = p2.y - (p3.y - p1.y) / 6;
      d += ' C' + c1x + ',' + c1y + ' ' + c2x + ',' + c2y + ' ' + p2.x + ',' + p2.y;
    }
    return d;
  }

  function renderChart(hours, temps) {
    if (!temps.length) {
      chartEl.innerHTML = '';
      scaleEl.textContent = 'Hourly temperatures unavailable';
      scaleEl.style.display = 'block';
      scaleEl.style.color = 'var(--muted)';
      scaleEl.style.fontSize = '13px';
      scaleEl.style.letterSpacing = '0.04em';
      scaleEl.style.padding = '18px 0 8px';
      return;
    }
    var w = 1168, h = 132, padT = 16, padB = 10, padX = 10;
    var tMin = Math.min.apply(null, temps);
    var tMax = Math.max.apply(null, temps);
    var span = Math.max(tMax - tMin, 1);
    function x(i) { return padX + (temps.length === 1 ? (w - padX * 2) / 2 : i / (temps.length - 1) * (w - padX * 2)); }
    function y(t) { return padT + (1 - (t - tMin) / span) * (h - padT - padB); }
    var pts = temps.map(function (t, i) { return { x: +x(i).toFixed(2), y: +y(t).toFixed(2) }; });
    var line = smoothPath(pts);
    var last = pts[pts.length - 1];
    var first = pts[0];
    var area = line + ' L' + last.x + ',' + (h - 2) + ' L' + first.x + ',' + (h - 2) + ' Z';
    var minI = temps.indexOf(tMin);
    var maxI = temps.indexOf(tMax);
    var nowH = date === todayUTC() ? new Date().getUTCHours() : -1;
    var dots = '';
    for (var i = 0; i < pts.length; i++) {
      if (i % 3 !== 0 && i !== minI && i !== maxI && i !== nowH) continue;
      var r = (i === minI || i === maxI) ? 3.2 : 2.2;
      dots += '<circle cx="' + pts[i].x + '" cy="' + pts[i].y + '" r="' + r + '" fill="var(--accent)"/>';
    }
    var nowMark = '';
    if (nowH >= 0 && nowH < pts.length) {
      nowMark = '<line x1="' + pts[nowH].x + '" y1="8" x2="' + pts[nowH].x + '" y2="' + (h - 2) + '" stroke="var(--accent)" stroke-opacity="0.28" stroke-dasharray="2 4"/>';
    }
    var aria = 'Hourly temperatures from ' + Math.round(tMin) + ' to ' + Math.round(tMax) + ' degrees Celsius';
    chartEl.innerHTML = '<svg viewBox="0 0 ' + w + ' ' + h + '" preserveAspectRatio="none" role="img" aria-label="' + aria + '">' +
      '<defs><linearGradient id="cf" x1="0" y1="0" x2="0" y2="1">' +
      '<stop offset="0%" stop-color="var(--chart)" stop-opacity="0.32"/>' +
      '<stop offset="100%" stop-color="var(--chart)" stop-opacity="0"/>' +
      '</linearGradient></defs>' +
      '<path d="' + area + '" fill="url(#cf)"/>' +
      nowMark +
      '<path d="' + line + '" fill="none" stroke="var(--chart)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>' +
      dots + '</svg>';

    var frag = document.createDocumentFragment();
    for (var j = 0; j < temps.length; j++) {
      var cell = document.createElement('div');
      cell.className = 'hour-cell';
      if (j === minI || j === maxI) cell.classList.add('is-extreme');
      if (j === nowH) cell.classList.add('is-now');
      var ht = document.createElement('span');
      ht.className = 'ht';
      ht.textContent = Math.round(temps[j]) + '°';
      var hh = document.createElement('span');
      hh.className = 'hh';
      hh.textContent = hours[j];
      cell.appendChild(ht);
      cell.appendChild(hh);
      frag.appendChild(cell);
    }
    scaleEl.innerHTML = '';
    scaleEl.appendChild(frag);
  }

  var q = new URLSearchParams();
  q.set('latitude', String(latN));
  q.set('longitude', String(lonN));
  q.set('daily', 'temperature_2m_max,temperature_2m_min,weather_code');
  q.set('hourly', 'temperature_2m');
  q.set('timezone', 'UTC');
  q.set('temperature_unit', 'celsius');
  q.set('start_date', date);
  q.set('end_date', date);
  var endpoint = date < todayUTC() ? '/api/om/archive' : '/api/om/forecast';

  fetch(endpoint + '?' + q.toString())
    .then(function (res) {
      if (!res.ok) throw new Error('http');
      return res.json();
    })
    .then(function (data) {
      if (!data || data.error) throw new Error('api');
      var daily = data.daily || {};
      var tmax = daily.temperature_2m_max && daily.temperature_2m_max[0];
      var tmin = daily.temperature_2m_min && daily.temperature_2m_min[0];
      var code = daily.weather_code && daily.weather_code[0];
      if (tmax == null || tmin == null || !isFinite(Number(tmax)) || !isFinite(Number(tmin))) throw new Error('nodata');

      var info = weatherInfo(code);
      document.body.dataset.theme = info.theme;
      condEl.textContent = info.label;
      iconEl.innerHTML = ICONS[info.icon] || ICONS.cloud;
      tmaxEl.innerHTML = Math.round(Number(tmax)) + '<span class="deg">°</span>';
      tminEl.innerHTML = Math.round(Number(tmin)) + '<span class="deg">°</span>';

      var hours = [];
      var temps = [];
      var hourly = data.hourly || {};
      var times = hourly.time || [];
      var series = hourly.temperature_2m || [];
      for (var i = 0; i < times.length; i++) {
        if (String(times[i]).indexOf(date) === 0 && series[i] != null && isFinite(Number(series[i]))) {
          hours.push(String(times[i]).slice(11, 13));
          temps.push(Number(series[i]));
        }
      }
      renderChart(hours, temps);
      document.body.classList.remove('is-loading');
      document.body.classList.add('is-ready');
    })
    .catch(function () { fail(); });
})();
</script>
</body>
</html>

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

bytes 总计25,305html / css / js2,373 / 10,950 / 11,982
dom 节点55dom 深度8
css 规则78含 js是
brightness28.0contrast13.0
colorfulness15.1留白95.5%

该 slot 的 telemetry

prompt tokens527completion tokens9,396
total tokens9,923wall319 s
cost—request id—
config.json556 B
{
  "N": 4,
  "auth": {
    "credential_ref": "WCB_XAI_OFFICIAL_KEY",
    "method": "api-key"
  },
  "billing": "metered",
  "config_id": "grok-4.6-eff-xhigh--api--official--dev",
  "effort": "xhigh",
  "family": "grok",
  "m": {
    "min": 4,
    "q": 4
  },
  "model_id": "grok-4.6",
  "protocol": "api",
  "served_model": "grok-4.6",
  "telemetry": {
    "completion_tokens": 69418,
    "cost_usd": null,
    "prompt_tokens": 4184,
    "total_tokens": 73602,
    "wall_ms": 2028603
  },
  "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-xhigh--api--official--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-08-12T18:07:22.443245+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T18:02:03.428958+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-12T18:09:44.926499+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T18:07:26.976163+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-12T18:13:10.574440+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T18:09:48.077108+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-12T18:18:26.616922+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T18:13:13.676040+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-12T18:21:28.544801+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T18:18:30.282265+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-12T18:27:47.601853+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T18:21:31.618450+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-12T18:33:03.083486+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T18:27:52.047872+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-12T18:36:18.654510+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T18:33:07.766055+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
    }
  }
}