grok-4.5 @ medium · api

apimedium

config: grok-4.5-eff-medium--api--official--dev
batch: 2026-07-19--unified
transport: xai-official-api
protocol: api · metered
served model: grok-4.5
采集于: 2026年7月18日 11:54 · N=4

该 model 的全部 effort 与 arm →

variant

live

slot 0 · P-q · sandboxed iframe

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

similarity 邻居

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

namematch
conditionmatch
datematch
max tempmatch展示值:25
min tempmatch展示值:16
hourlyambiguouscoverage · 0 命中 · 0 不符 · 24 未展示
request sidematch0 处违规

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

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

下载 card.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1280, height=800">
<title>Weather</title>
<style>
  :root {
    --bg-1: #0b1220;
    --bg-2: #162033;
    --card: rgba(255, 255, 255, 0.08);
    --card-border: rgba(255, 255, 255, 0.12);
    --text: #f4f7fb;
    --muted: rgba(244, 247, 251, 0.65);
    --accent: #7dd3fc;
    --accent-2: #a78bfa;
    --warm: #fbbf24;
    --cool: #67e8f9;
    --danger: #fca5a5;
    --shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  }

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

  html, body {
    width: 1280px;
    height: 800px;
    overflow: hidden;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--text);
    background: radial-gradient(1200px 700px at 15% 10%, #1e3a5f 0%, transparent 55%),
                radial-gradient(900px 600px at 90% 80%, #3b1d5c 0%, transparent 50%),
                linear-gradient(160deg, var(--bg-1), var(--bg-2));
  }

  body {
    display: grid;
    place-items: center;
  }

  .shell {
    width: 1120px;
    height: 680px;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 22px;
  }

  .hero {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 22px;
    min-height: 280px;
  }

  .card {
    background: linear-gradient(145deg, rgba(255,255,255,0.11), rgba(255,255,255,0.04));
    border: 1px solid var(--card-border);
    border-radius: 28px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    position: relative;
    overflow: hidden;
  }

  .card::before {
    content: "";
    position: absolute;
    inset: -40% auto auto -20%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(125, 211, 252, 0.22), transparent 70%);
    pointer-events: none;
  }

  .main {
    padding: 36px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

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

  .location {
    font-size: 15px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
  }

  .place {
    margin-top: 10px;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
  }

  .date {
    margin-top: 10px;
    font-size: 18px;
    color: var(--muted);
  }

  .badge {
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
  }

  .condition-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-top: 28px;
  }

  .temps {
    display: flex;
    align-items: baseline;
    gap: 18px;
  }

  .max {
    font-size: 84px;
    font-weight: 720;
    letter-spacing: -0.05em;
    line-height: 0.9;
    background: linear-gradient(180deg, #fff 20%, var(--warm));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .min {
    font-size: 34px;
    color: var(--cool);
    font-weight: 650;
  }

  .min span, .max span {
    font-size: 0.55em;
    opacity: 0.8;
  }

  .condition {
    text-align: right;
  }

  .icon {
    font-size: 64px;
    line-height: 1;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.25));
  }

  .condition-label {
    margin-top: 8px;
    font-size: 20px;
    font-weight: 600;
  }

  .side {
    padding: 28px;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 18px;
  }

  .side h2 {
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .stats {
    display: grid;
    gap: 14px;
    align-content: start;
  }

  .stat {
    padding: 18px 18px;
    border-radius: 18px;
    background: rgba(0,0,0,0.18);
    border: 1px solid rgba(255,255,255,0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .stat .label {
    color: var(--muted);
    font-size: 14px;
  }

  .stat .value {
    font-size: 22px;
    font-weight: 700;
  }

  .hourly {
    padding: 28px 32px 24px;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 18px;
  }

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

  .hourly-head h2 {
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .hourly-head .hint {
    color: var(--muted);
    font-size: 13px;
  }

  .chart-wrap {
    position: relative;
    height: 100%;
    min-height: 240px;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 10px;
  }

  .bars {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 8px;
    align-items: end;
    height: 100%;
    padding: 8px 4px 0;
  }

  .bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 8px;
  }

  .bar-val {
    font-size: 11px;
    color: var(--muted);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    font-variant-numeric: tabular-nums;
  }

  .bar-col:hover .bar-val,
  .bar-col.is-peak .bar-val {
    opacity: 1;
    transform: translateY(0);
  }

  .bar {
    width: 100%;
    border-radius: 999px 999px 8px 8px;
    background: linear-gradient(180deg, var(--accent), rgba(167, 139, 250, 0.75));
    box-shadow: 0 8px 18px rgba(125, 211, 252, 0.18);
    min-height: 8px;
    transition: transform 0.2s ease, filter 0.2s ease;
  }

  .bar-col:hover .bar {
    transform: scaleY(1.04);
    filter: brightness(1.12);
  }

  .labels {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 8px;
  }

  .labels span {
    text-align: center;
    font-size: 11px;
    color: rgba(244,247,251,0.45);
    font-variant-numeric: tabular-nums;
  }

  .labels span.show {
    color: var(--muted);
  }

  .state {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 40px;
    text-align: center;
  }

  .loader {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.12);
    border-top-color: var(--accent);
    animation: spin 0.9s linear infinite;
    margin: 0 auto 18px;
  }

  .state-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
  }

  .state-sub {
    color: var(--muted);
    font-size: 16px;
    max-width: 420px;
    line-height: 1.5;
  }

  .error .state-title { color: var(--danger); }

  .hidden { display: none !important; }

  @keyframes spin { to { transform: rotate(360deg); } }

  .content.hidden + .state { display: grid; }
</style>
</head>
<body>
  <div class="shell">
    <div id="loading" class="card state">
      <div>
        <div class="loader"></div>
        <div class="state-title">Loading weather</div>
        <div class="state-sub">Fetching conditions for the selected location and date…</div>
      </div>
    </div>

    <div id="error" class="card state error hidden">
      <div>
        <div class="state-title">Weather unavailable</div>
        <div class="state-sub" id="error-msg">The data could not be loaded. Please check the location, date, or try again later.</div>
      </div>
    </div>

    <div id="app" class="hidden" style="display:contents">
      <div class="hero">
        <section class="card main">
          <div class="meta">
            <div>
              <div class="location">Location</div>
              <div class="place" id="place">—</div>
              <div class="date" id="date-label">—</div>
            </div>
            <div class="badge" id="source-badge">Forecast</div>
          </div>
          <div class="condition-row">
            <div class="temps">
              <div class="max" id="tmax">—<span>°</span></div>
              <div class="min" id="tmin">—<span>°</span></div>
            </div>
            <div class="condition">
              <div class="icon" id="icon">⛅</div>
              <div class="condition-label" id="condition">—</div>
            </div>
          </div>
        </section>

        <aside class="card side">
          <h2>Day summary</h2>
          <div class="stats">
            <div class="stat">
              <span class="label">High</span>
              <span class="value" id="stat-max">—</span>
            </div>
            <div class="stat">
              <span class="label">Low</span>
              <span class="value" id="stat-min">—</span>
            </div>
            <div class="stat">
              <span class="label">Condition</span>
              <span class="value" id="stat-cond" style="font-size:16px">—</span>
            </div>
            <div class="stat">
              <span class="label">Hours</span>
              <span class="value" id="stat-hours">24</span>
            </div>
          </div>
        </aside>
      </div>

      <section class="card hourly">
        <div class="hourly-head">
          <h2>Hourly temperature</h2>
          <div class="hint">UTC · °C</div>
        </div>
        <div class="chart-wrap">
          <div class="bars" id="bars"></div>
          <div class="labels" id="labels"></div>
        </div>
      </section>
    </div>
  </div>

<script>
(function () {
  const WEATHER = {
    0:  { label: "Clear sky", icon: "☀️" },
    1:  { label: "Mainly clear", icon: "🌤️" },
    2:  { label: "Partly cloudy", icon: "⛅" },
    3:  { label: "Overcast", icon: "☁️" },
    45: { label: "Fog", icon: "🌫️" },
    48: { label: "Depositing rime fog", icon: "🌫️" },
    51: { label: "Light drizzle", icon: "🌦️" },
    53: { label: "Moderate drizzle", icon: "🌦️" },
    55: { label: "Dense drizzle", icon: "🌧️" },
    56: { label: "Light freezing drizzle", icon: "🌧️" },
    57: { label: "Dense freezing drizzle", icon: "🌧️" },
    61: { label: "Slight rain", icon: "🌧️" },
    63: { label: "Moderate rain", icon: "🌧️" },
    65: { label: "Heavy rain", icon: "🌧️" },
    66: { label: "Light freezing rain", icon: "🌧️" },
    67: { label: "Heavy freezing rain", icon: "🌧️" },
    71: { label: "Slight snow", icon: "🌨️" },
    73: { label: "Moderate snow", icon: "🌨️" },
    75: { label: "Heavy snow", icon: "❄️" },
    77: { label: "Snow grains", icon: "❄️" },
    80: { label: "Slight rain showers", icon: "🌦️" },
    81: { label: "Moderate rain showers", icon: "🌧️" },
    82: { label: "Violent rain showers", icon: "⛈️" },
    85: { label: "Slight snow showers", icon: "🌨️" },
    86: { label: "Heavy snow showers", icon: "❄️" },
    95: { label: "Thunderstorm", icon: "⛈️" },
    96: { label: "Thunderstorm with slight hail", icon: "⛈️" },
    99: { label: "Thunderstorm with heavy hail", icon: "⛈️" }
  };

  function todayUTC() {
    const d = new Date();
    const y = d.getUTCFullYear();
    const m = String(d.getUTCMonth() + 1).padStart(2, "0");
    const day = String(d.getUTCDate()).padStart(2, "0");
    return y + "-" + m + "-" + day;
  }

  function parseParams() {
    const q = new URLSearchParams(window.location.search);
    const lat = parseFloat(q.get("lat"));
    const lon = parseFloat(q.get("lon"));
    return {
      lat: Number.isFinite(lat) ? lat : 52.52,
      lon: Number.isFinite(lon) ? lon : 13.405,
      name: (q.get("name") || "Berlin").trim() || "Berlin",
      date: (q.get("date") || todayUTC()).trim() || todayUTC()
    };
  }

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

  function formatDisplayDate(dateStr) {
    const parts = dateStr.split("-").map(Number);
    const dt = new Date(Date.UTC(parts[0], parts[1] - 1, parts[2]));
    return dt.toLocaleDateString("en-US", {
      weekday: "long",
      year: "numeric",
      month: "long",
      day: "numeric",
      timeZone: "UTC"
    });
  }

  function weatherInfo(code) {
    return WEATHER[code] || { label: "Unknown (" + code + ")", icon: "🌡️" };
  }

  function showError(msg) {
    document.getElementById("loading").classList.add("hidden");
    document.getElementById("app").classList.add("hidden");
    document.getElementById("app").style.display = "none";
    const err = document.getElementById("error");
    err.classList.remove("hidden");
    if (msg) document.getElementById("error-msg").textContent = msg;
  }

  function showApp() {
    document.getElementById("loading").classList.add("hidden");
    document.getElementById("error").classList.add("hidden");
    const app = document.getElementById("app");
    app.classList.remove("hidden");
    app.style.display = "contents";
  }

  function buildHourly(temps) {
    const bars = document.getElementById("bars");
    const labels = document.getElementById("labels");
    bars.innerHTML = "";
    labels.innerHTML = "";

    const values = temps.map(function (t) { return typeof t === "number" ? t : null; });
    const valid = values.filter(function (v) { return v !== null; });
    if (!valid.length) {
      bars.innerHTML = '<div style="grid-column:1/-1;align-self:center;text-align:center;color:var(--muted)">No hourly data</div>';
      return;
    }

    const min = Math.min.apply(null, valid);
    const max = Math.max.apply(null, valid);
    const span = Math.max(max - min, 1);
    let peakIdx = values.indexOf(max);

    values.forEach(function (t, i) {
      const col = document.createElement("div");
      col.className = "bar-col" + (i === peakIdx ? " is-peak" : "");

      const val = document.createElement("div");
      val.className = "bar-val";
      val.textContent = t === null ? "—" : Math.round(t) + "°";

      const bar = document.createElement("div");
      bar.className = "bar";
      if (t === null) {
        bar.style.height = "8px";
        bar.style.opacity = "0.25";
      } else {
        const pct = 12 + ((t - min) / span) * 88;
        bar.style.height = pct + "%";
      }

      col.appendChild(val);
      col.appendChild(bar);
      bars.appendChild(col);

      const lab = document.createElement("span");
      const hour = String(i).padStart(2, "0");
      lab.textContent = hour;
      if (i % 3 === 0) lab.classList.add("show");
      labels.appendChild(lab);
    });
  }

  async function load() {
    const p = parseParams();
    const past = isPastDate(p.date);
    const endpoint = past ? "/api/om/archive" : "/api/om/forecast";

    const params = 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
    });

    let data;
    try {
      const res = await fetch(endpoint + "?" + params.toString());
      if (!res.ok) throw new Error("Request failed (" + res.status + ")");
      data = await res.json();
      if (data.error) throw new Error(data.reason || "API error");
    } catch (e) {
      showError("The data could not be loaded. " + (e && e.message ? e.message : "Please try again."));
      return;
    }

    try {
      const daily = data.daily || {};
      const hourly = data.hourly || {};
      const tmax = daily.temperature_2m_max && daily.temperature_2m_max[0];
      const tmin = daily.temperature_2m_min && daily.temperature_2m_min[0];
      const code = daily.weather_code && daily.weather_code[0];
      const temps = hourly.temperature_2m || [];

      if (tmax == null || tmin == null || code == null || !temps.length) {
        throw new Error("Incomplete weather payload for this date.");
      }

      const info = weatherInfo(code);
      const maxR = Math.round(tmax);
      const minR = Math.round(tmin);

      document.getElementById("place").textContent = p.name;
      document.getElementById("date-label").textContent = formatDisplayDate(p.date);
      document.getElementById("source-badge").textContent = past ? "Historical" : "Forecast";
      document.getElementById("tmax").innerHTML = maxR + "<span>°</span>";
      document.getElementById("tmin").innerHTML = minR + "<span>°</span>";
      document.getElementById("icon").textContent = info.icon;
      document.getElementById("condition").textContent = info.label;
      document.getElementById("stat-max").textContent = maxR + "°C";
      document.getElementById("stat-min").textContent = minR + "°C";
      document.getElementById("stat-cond").textContent = info.label;
      document.getElementById("stat-hours").textContent = String(temps.length);

      buildHourly(temps);
      showApp();
    } catch (e) {
      showError("The data could not be loaded. " + (e && e.message ? e.message : ""));
    }
  }

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

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

bytes 总计	16,929	html / css / js	2,780 / 6,661 / 7,488
dom 节点	58	dom 深度	10
css 规则	51	含 js	是
brightness	54.6	contrast	39.3
colorfulness	33.2	留白	53.3%

该 slot 的 telemetry

prompt tokens	526	completion tokens	5,397
total tokens	5,923	wall	54.3 s
cost	—	request id	—

config.json557 B

{
  "N": 4,
  "auth": {
    "credential_ref": "WCB_XAI_OFFICIAL_KEY",
    "method": "api-key"
  },
  "billing": "metered",
  "config_id": "grok-4.5-eff-medium--api--official--dev",
  "effort": "medium",
  "family": "grok",
  "m": {
    "min": 4,
    "q": 4
  },
  "model_id": "grok-4.5",
  "protocol": "api",
  "served_model": "grok-4.5",
  "telemetry": {
    "completion_tokens": 34364,
    "cost_usd": null,
    "prompt_tokens": 4176,
    "total_tokens": 38540,
    "wall_ms": 331939
  },
  "transport": "xai-official-api",
  "vendor_sanction_ref": null
}

send-log4.6 KB

{
  "N": 4,
  "batch_id": "2026-07-18--official-grok",
  "config_id": "grok-4.5-eff-medium--api--official--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-17T15:20:00.292750+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:19:31.249305+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-17T15:20:58.119239+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:20:03.821122+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-17T15:21:24.563754+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:21:01.946127+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-07-17T15:22:26.527052+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:21:28.341696+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-17T15:23:36.383874+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:22:30.388936+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-07-17T15:24:07.275951+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:23:40.308531+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-07-17T15:25:06.552917+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:24:10.944155+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-07-17T15:25:29.751280+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:25:10.456273+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
    }
  }
}