kimi-k2.6 @ enabled · api
apienabled
- config
- kimi-k2.6-eff-enabled--api--official--dev
- batch
- 2026-07-19--unified
- transport
- moonshot-official-api
- protocol
- api · metered
- served model
- kimi-k2.6
- captured
- Jul 18, 2026, 11:54 AM · N=4
variant
live
slot 0 · P-q · sandboxed iframe
The screenshot is the exact frozen pixels the similarity channels measured. Run live re-executes the raw output in a sandboxed iframe; its rendering depends on your browser and fonts and is not guaranteed to match the measured pixels.
similarity neighbors
nearest
qwen3.7-max · qoder0.64claude-opus-4-6 @medium · kiro0.63qwen3.6-plus · go0.63claude-opus-4-6 @low · kiro0.61claude-opus-4-6 @max · kiro0.61farthest
claude-opus-4-8 @max · kiro0.44kimi-k2.6 · go0.45gpt-5.6-terra @high · kiro0.45qwen3.5-plus · go0.47minimax-m2.1 · kiro0.47within session 2026-07-19--unified
similarity measures convergence within this session — not quality.
Fidelity — does the card show the right data?
- namematch
- conditionmatch
- datenot-foundno-parseable-date
- max tempmatchshown: 25.3
- min tempmatchshown: 16
- hourlymatchcoverage 24/24 · 24 match · 0 mismatch · 0 not shown
- request sidematch0 violation(s)
extractor fidelity-extractor-v1+Berlin-2026-07-15
Source — raw model output, one byte unchanged
download card.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1280, initial-scale=1.0, maximum-scale=1.0">
<title>Weather</title>
<style>
@font-face {
font-family: 'Geist';
src: url('data:font/woff2;base64,') format('woff2');
}
@font-face {
font-family: 'Inter';
src: local('Inter'), local('Inter-Regular'), local('SF Pro Display'), local('Segoe UI'), local('Roboto');
}
:root {
--bg: #0B0F19;
--bg-elevated: #111827;
--bg-card: rgba(17, 24, 39, 0.65);
--glass: rgba(255, 255, 255, 0.04);
--glass-border: rgba(255, 255, 255, 0.06);
--text-primary: #F0F4F8;
--text-secondary: #94A3B8;
--text-tertiary: #64748B;
--accent: #60A5FA;
--accent-soft: rgba(96, 165, 250, 0.15);
--warm: #FB923C;
--cool: #38BDF8;
--error: #EF4444;
--success: #34D399;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 1280px;
height: 800px;
overflow: hidden;
background: var(--bg);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
color: var(--text-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
/* Ambient background */
.ambient {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
}
.ambient-blob {
position: absolute;
border-radius: 50%;
filter: blur(120px);
opacity: 0.35;
animation: drift 20s ease-in-out infinite alternate;
}
.ambient-blob.a {
width: 600px;
height: 600px;
background: #1e3a5f;
top: -10%;
left: -5%;
animation-duration: 25s;
}
.ambient-blob.b {
width: 500px;
height: 500px;
background: #0f2a1f;
bottom: -15%;
right: -8%;
animation-duration: 30s;
animation-direction: alternate-reverse;
}
.ambient-blob.c {
width: 400px;
height: 400px;
background: #2a1a3a;
top: 40%;
left: 50%;
animation-duration: 22s;
opacity: 0.2;
}
@keyframes drift {
0% { transform: translate(0, 0) scale(1); }
50% { transform: translate(30px, -20px) scale(1.05); }
100% { transform: translate(-20px, 15px) scale(0.98); }
}
/* Noise texture overlay */
.noise {
position: fixed;
inset: 0;
z-index: 1;
opacity: 0.025;
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.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat: repeat;
pointer-events: none;
}
/* Main card */
.card {
position: relative;
z-index: 10;
width: 800px;
background: var(--bg-card);
backdrop-filter: blur(40px) saturate(1.4);
-webkit-backdrop-filter: blur(40px) saturate(1.4);
border: 1px solid var(--glass-border);
border-radius: 28px;
box-shadow:
0 0 0 1px rgba(255,255,255,0.02),
0 24px 80px rgba(0,0,0,0.5),
0 8px 24px rgba(0,0,0,0.3);
overflow: hidden;
opacity: 0;
transform: translateY(24px) scale(0.98);
animation: cardIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes cardIn {
to { opacity: 1; transform: translateY(0) scale(1); }
}
.card-header {
padding: 32px 40px 20px;
border-bottom: 1px solid var(--glass-border);
}
.header-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
}
.location-block {
flex: 1;
}
.location-name {
font-size: 32px;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--text-primary);
margin-bottom: 6px;
}
.date-display {
font-size: 15px;
color: var(--text-tertiary);
font-weight: 450;
letter-spacing: 0.01em;
}
.date-display svg {
display: inline-block;
vertical-align: -3px;
margin-right: 6px;
opacity: 0.6;
}
.weather-icon-large {
width: 72px;
height: 72px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
background: var(--glass);
border: 1px solid var(--glass-border);
animation: iconFloat 4s ease-in-out infinite;
}
@keyframes iconFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
.weather-icon-large svg {
width: 40px;
height: 40px;
}
/* Card body */
.card-body {
padding: 28px 40px 0;
}
.overview-row {
display: flex;
gap: 24px;
margin-bottom: 28px;
}
.temp-main {
display: flex;
align-items: baseline;
gap: 6px;
}
.temp-value {
font-size: 80px;
font-weight: 300;
letter-spacing: -0.04em;
line-height: 1;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
.temp-unit {
font-size: 28px;
font-weight: 300;
color: var(--text-tertiary);
position: relative;
top: -28px;
}
.condition-text {
font-size: 18px;
font-weight: 500;
color: var(--text-secondary);
margin-top: 8px;
letter-spacing: -0.01em;
}
.temp-range-block {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 8px;
}
.range-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
color: var(--text-secondary);
}
.range-item .label {
width: 48px;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-tertiary);
}
.range-item .val {
font-weight: 600;
font-size: 20px;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
.range-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.range-dot.high { background: var(--warm); box-shadow: 0 0 8px rgba(251, 146, 60, 0.4); }
.range-dot.low { background: var(--cool); box-shadow: 0 0 8px rgba(56, 189, 248, 0.4); }
/* Chart section */
.chart-section {
margin-bottom: 24px;
}
.section-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-tertiary);
margin-bottom: 16px;
}
.chart-container {
position: relative;
height: 180px;
background: var(--glass);
border: 1px solid var(--glass-border);
border-radius: 16px;
overflow: hidden;
}
.chart-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.chart-overlay {
position: absolute;
inset: 0;
pointer-events: none;
}
.chart-tooltip {
position: absolute;
background: rgba(17, 24, 39, 0.9);
border: 1px solid var(--glass-border);
border-radius: 8px;
padding: 6px 10px;
font-size: 12px;
font-weight: 500;
color: var(--text-primary);
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease;
transform: translate(-50%, -100%);
margin-top: -8px;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.chart-tooltip::after {
content: '';
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 8px;
height: 8px;
background: rgba(17, 24, 39, 0.9);
border-right: 1px solid var(--glass-border);
border-bottom: 1px solid var(--glass-border);
}
/* Hourly list */
.hourly-section {
padding: 0 40px 32px;
}
.hourly-scroll {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 8px;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.hourly-scroll::-webkit-scrollbar {
height: 4px;
}
.hourly-scroll::-webkit-scrollbar-track {
background: transparent;
}
.hourly-scroll::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.1);
border-radius: 2px;
}
.hour-item {
flex-shrink: 0;
width: 56px;
text-align: center;
padding: 14px 0;
border-radius: 14px;
background: transparent;
border: 1px solid transparent;
transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
cursor: default;
opacity: 0;
transform: translateY(8px);
animation: itemIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hour-item:hover {
background: var(--glass);
border-color: var(--glass-border);
transform: translateY(-2px);
}
@keyframes itemIn {
to { opacity: 1; transform: translateY(0); }
}
.hour-time {
font-size: 12px;
color: var(--text-tertiary);
font-weight: 500;
margin-bottom: 10px;
font-variant-numeric: tabular-nums;
}
.hour-dot {
width: 6px;
height: 6px;
border-radius: 50%;
margin: 0 auto 10px;
background: var(--text-tertiary);
opacity: 0.4;
transition: all 0.3s ease;
}
.hour-item:hover .hour-dot {
opacity: 1;
transform: scale(1.3);
}
.hour-temp {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
/* Divider */
.divider {
height: 1px;
background: var(--glass-border);
margin: 0 40px;
}
/* Loading */
.loading-overlay {
position: absolute;
inset: 0;
background: var(--bg-card);
backdrop-filter: blur(40px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
z-index: 100;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.loading-overlay.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.spinner {
width: 40px;
height: 40px;
border: 2px solid var(--glass-border);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.loading-text {
font-size: 14px;
color: var(--text-tertiary);
font-weight: 500;
}
/* Error */
.error-overlay {
position: absolute;
inset: 0;
background: var(--bg-card);
backdrop-filter: blur(40px);
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
z-index: 100;
padding: 40px;
text-align: center;
}
.error-overlay.visible {
display: flex;
}
.error-icon {
width: 48px;
height: 48px;
border-radius: 16px;
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.15);
display: flex;
align-items: center;
justify-content: center;
}
.error-icon svg {
width: 24px;
height: 24px;
stroke: var(--error);
}
.error-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
}
.error-desc {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.5;
max-width: 320px;
}
/* Subtle glow behind card */
.card-glow {
position: absolute;
width: 500px;
height: 300px;
background: radial-gradient(ellipse at center, rgba(96, 165, 250, 0.08) 0%, transparent 70%);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 5;
}
/* Data summary row in overview */
.overview-main {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 32px;
}
.overview-left {
flex: 1;
}
.overview-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 16px;
}
.meta-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 100px;
background: var(--glass);
border: 1px solid var(--glass-border);
font-size: 12px;
font-weight: 500;
color: var(--text-tertiary);
}
.meta-pill svg {
width: 14px;
height: 14px;
opacity: 0.6;
}
</style>
</head>
<body>
<div class="ambient">
<div class="ambient-blob a"></div>
<div class="ambient-blob b"></div>
<div class="ambient-blob c"></div>
</div>
<div class="noise"></div>
<div class="card-glow"></div>
<div class="card" id="weatherCard">
<div class="loading-overlay" id="loadingOverlay">
<div class="spinner"></div>
<div class="loading-text">Loading weather data...</div>
</div>
<div class="error-overlay" id="errorOverlay">
<div class="error-icon">
<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<line x1="12" y1="8" x2="12" y2="12"/>
<line x1="12" y1="16" x2="12.01" y2="16"/>
</svg>
</div>
<div class="error-title">Unable to load weather</div>
<div class="error-desc" id="errorDesc">The weather data could not be retrieved. Please check your connection and try again.</div>
</div>
<div class="card-header">
<div class="header-top">
<div class="location-block">
<div class="location-name" id="locationName">Berlin</div>
<div class="date-display" id="dateDisplay">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
<line x1="16" y1="2" x2="16" y2="6"/>
<line x1="8" y1="2" x2="8" y2="6"/>
<line x1="3" y1="10" x2="21" y2="10"/>
</svg>
<span id="dateText">Today</span>
</div>
</div>
<div class="weather-icon-large" id="weatherIcon">
<!-- injected -->
</div>
</div>
</div>
<div class="card-body">
<div class="overview-main">
<div class="overview-left">
<div class="temp-main">
<span class="temp-value" id="avgTemp">--</span>
<span class="temp-unit">°C</span>
</div>
<div class="condition-text" id="conditionText">--</div>
</div>
<div class="overview-right">
<div class="meta-pill" id="apiPill">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
</svg>
<span id="apiLabel">Forecast</span>
</div>
<div class="temp-range-block">
<div class="range-item">
<div class="range-dot high"></div>
<span class="label">High</span>
<span class="val" id="maxTemp">--°</span>
</div>
<div class="range-item">
<div class="range-dot low"></div>
<span class="label">Low</span>
<span class="val" id="minTemp">--°</span>
</div>
</div>
</div>
</div>
<div class="chart-section">
<div class="section-label">Hourly Temperature</div>
<div class="chart-container" id="chartContainer">
<canvas class="chart-canvas" id="chartCanvas"></canvas>
<div class="chart-overlay" id="chartOverlay"></div>
<div class="chart-tooltip" id="chartTooltip"></div>
</div>
</div>
</div>
<div class="divider"></div>
<div class="hourly-section">
<div class="section-label" style="margin-bottom: 12px;">24-Hour Breakdown</div>
<div class="hourly-scroll" id="hourlyScroll">
<!-- injected -->
</div>
</div>
</div>
<script>
(function() {
function getQueryParam(name, def) {
const params = new URLSearchParams(window.location.search);
return params.has(name) ? params.get(name) : def;
}
function parseFloatDef(v, def) {
const n = parseFloat(v);
return isNaN(n) ? def : n;
}
function formatDateLabel(dateStr) {
const d = new Date(dateStr + 'T00:00:00Z');
const today = new Date();
today.setUTCHours(0,0,0,0);
const cmp = new Date(d);
cmp.setUTCHours(0,0,0,0);
const diff = Math.round((cmp - today) / 86400000);
if (diff === 0) return 'Today';
if (diff === -1) return 'Yesterday';
if (diff === 1) return 'Tomorrow';
return d.toLocaleDateString('en-US', { weekday: 'long', month: 'short', day: 'numeric', timeZone: 'UTC' });
}
function getTodayUTC() {
const d = new Date();
return d.toISOString().slice(0, 10);
}
function getWMOInfo(code) {
const map = {
0: { label: 'Clear sky', icon: 'sun' },
1: { label: 'Mainly clear', icon: 'sun-cloud' },
2: { label: 'Partly cloudy', icon: 'cloud-sun' },
3: { label: 'Overcast', icon: 'cloud' },
45: { label: 'Fog', icon: 'fog' },
48: { label: 'Depositing rime fog', icon: 'fog' },
51: { label: 'Light drizzle', icon: 'drizzle' },
53: { label: 'Moderate drizzle', icon: 'drizzle' },
55: { label: 'Dense drizzle', icon: 'drizzle' },
56: { label: 'Freezing drizzle', icon: 'drizzle' },
57: { label: 'Dense freezing drizzle', icon: 'drizzle' },
61: { label: 'Slight rain', icon: 'rain' },
63: { label: 'Moderate rain', icon: 'rain' },
65: { label: 'Heavy rain', icon: 'rain' },
66: { label: 'Freezing rain', icon: 'rain' },
67: { label: 'Heavy freezing rain', icon: 'rain' },
71: { label: 'Slight snow', icon: 'snow' },
73: { label: 'Moderate snow', icon: 'snow' },
75: { label: 'Heavy snow', icon: 'snow' },
77: { label: 'Snow grains', icon: 'snow' },
80: { label: 'Slight rain showers', icon: 'rain' },
81: { label: 'Moderate rain showers', icon: 'rain' },
82: { label: 'Violent rain showers', icon: 'rain' },
85: { label: 'Slight snow showers', icon: 'snow' },
86: { label: 'Heavy snow showers', icon: 'snow' },
95: { label: 'Thunderstorm', icon: 'thunder' },
96: { label: 'Thunderstorm with hail', icon: 'thunder' },
99: { label: 'Heavy thunderstorm', icon: 'thunder' },
};
return map[code] || { label: 'Unknown', icon: 'cloud' };
}
function getIconSVG(type) {
const svgs = {
sun: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4" fill="currentColor" fill-opacity="0.15"/><path d="M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M4.93 19.07l1.41-1.41m11.32-11.32l1.41-1.41"/></svg>`,
'sun-cloud': `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="16" cy="8" r="3" fill="currentColor" fill-opacity="0.15"/><path d="M8 18h8a4 4 0 100-8 3 3 0 00-5.7-1.2A4 4 0 008 18z" fill="currentColor" fill-opacity="0.1"/></svg>`,
'cloud-sun': `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="17" cy="7" r="2.5" fill="currentColor" fill-opacity="0.15"/><path d="M8 19h7a3.5 3.5 0 100-7 2.5 2.5 0 00-4.8-1A3.5 3.5 0 008 19z" fill="currentColor" fill-opacity="0.1"/></svg>`,
cloud: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 19h-9a5 5 0 110-10 4 4 0 017.7-1.5A5 5 0 0118 19z" fill="currentColor" fill-opacity="0.1"/></svg>`,
fog: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 15h16M4 18h16M6 12h12M8 9h8"/></svg>`,
drizzle: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16 14h-4a4 4 0 110-8 3 3 0 015.7-1.2A4 4 0 0116 14z" fill="currentColor" fill-opacity="0.1"/><path d="M10 16v3m4-2v3"/></svg>`,
rain: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16 13h-4a4 4 0 110-8 3 3 0 015.7-1.2A4 4 0 0116 13z" fill="currentColor" fill-opacity="0.1"/><path d="M8 15v3m4-2v3m4-2v3"/></svg>`,
snow: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16 13h-4a4 4 0 110-8 3 3 0 015.7-1.2A4 4 0 0116 13z" fill="currentColor" fill-opacity="0.1"/><path d="M10 15l1.5 1.5M12.5 16.5l1.5-1.5M8 18l1.5 1.5M10.5 19.5l1.5-1.5"/></svg>`,
thunder: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16 12h-4a4 4 0 110-8 3 3 0 015.7-1.2A4 4 0 0116 12z" fill="currentColor" fill-opacity="0.1"/><path d="M13 13l-3 5h4l-1 5"/></svg>`,
};
return svgs[type] || svgs.cloud;
}
function getDotColor(temp, min, max) {
const range = max - min || 1;
const t = (temp - min) / range;
if (t < 0.33) return '#38BDF8';
if (t < 0.66) return '#60A5FA';
return '#FB923C';
}
const lat = parseFloatDef(getQueryParam('lat', '52.52'), 52.52);
const lon = parseFloatDef(getQueryParam('lon', '13.405'), 13.405);
const name = getQueryParam('name', 'Berlin');
const date = getQueryParam('date', getTodayUTC());
document.getElementById('locationName').textContent = name;
document.getElementById('dateText').textContent = formatDateLabel(date);
const todayStr = getTodayUTC();
const isPast = date < todayStr;
const endpoint = isPast ? '/api/om/archive' : '/api/om/forecast';
document.getElementById('apiLabel').textContent = isPast ? 'Archive' : 'Forecast';
const url = `${endpoint}?latitude=${encodeURIComponent(lat)}&longitude=${encodeURIComponent(lon)}&daily=temperature_2m_max,temperature_2m_min,weather_code&hourly=temperature_2m&timezone=UTC&temperature_unit=celsius&start_date=${date}&end_date=${date}`;
async function load() {
try {
const controller = new AbortController();
const timeout = setTimeout(() => controller.abort(), 15000);
const res = await fetch(url, { signal: controller.signal });
clearTimeout(timeout);
if (!res.ok) {
throw new Error(`HTTP ${res.status}`);
}
const data = await res.json();
if (data.error) {
throw new Error(data.reason || data.error);
}
if (!data.daily || !data.hourly) {
throw new Error('Invalid data format');
}
const daily = data.daily;
const hourly = data.hourly;
const maxT = daily.temperature_2m_max[0];
const minT = daily.temperature_2m_min[0];
const wmoCode = daily.weather_code[0];
const wmo = getWMOInfo(wmoCode);
const temps = hourly.temperature_2m;
const times = hourly.time;
const avg = (temps.reduce((a,b) => a+b, 0) / temps.length).toFixed(1);
document.getElementById('avgTemp').textContent = avg;
document.getElementById('maxTemp').textContent = maxT + '°';
document.getElementById('minTemp').textContent = minT + '°';
document.getElementById('conditionText').textContent = wmo.label;
document.getElementById('weatherIcon').innerHTML = getIconSVG(wmo.icon);
// Hourly list
const scroll = document.getElementById('hourlyScroll');
scroll.innerHTML = '';
const hourIndices = [];
for (let i = 0; i < times.length; i++) {
const t = times[i].slice(0, 10);
if (t === date) hourIndices.push(i);
}
hourIndices.forEach((idx, i) => {
const timeStr = times[idx];
const hour = parseInt(timeStr.slice(11, 13), 10);
const temp = temps[idx];
const el = document.createElement('div');
el.className = 'hour-item';
el.style.animationDelay = (i * 0.025) + 's';
const displayHour = hour.toString().padStart(2, '0') + ':00';
const dotColor = getDotColor(temp, minT, maxT);
el.innerHTML = `
<div class="hour-time">${displayHour}</div>
<div class="hour-dot" style="background:${dotColor};opacity:0.7;"></div>
<div class="hour-temp">${Math.round(temp)}°</div>
`;
scroll.appendChild(el);
});
// Chart
drawChart(temps, times, date, minT, maxT);
// Hide loading
document.getElementById('loadingOverlay').classList.add('hidden');
} catch (err) {
console.error(err);
document.getElementById('loadingOverlay').classList.add('hidden');
document.getElementById('errorOverlay').classList.add('visible');
document.getElementById('errorDesc').textContent = err.message || 'Failed to load weather data. Please try again.';
}
}
function drawChart(allTemps, allTimes, targetDate, minT, maxT) {
const canvas = document.getElementById('chartCanvas');
const container = document.getElementById('chartContainer');
const tooltip = document.getElementById('chartTooltip');
const overlay = document.getElementById('chartOverlay');
const dpr = window.devicePixelRatio || 1;
const rect = container.getBoundingClientRect();
const w = rect.width;
const h = rect.height;
canvas.width = w * dpr;
canvas.height = h * dpr;
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
const ctx = canvas.getContext('2d');
ctx.scale(dpr, dpr);
// Filter to target date
const indices = [];
const vals = [];
for (let i = 0; i < allTimes.length; i++) {
if (allTimes[i].slice(0, 10) === targetDate) {
indices.push(i);
vals.push(allTemps[i]);
}
}
if (vals.length === 0) return;
const padL = 40;
const padR = 40;
const padT = 30;
const padB = 30;
const cw = w - padL - padR;
const ch = h - padT - padB;
const dataMin = Math.min(...vals) - 2;
const dataMax = Math.max(...vals) + 2;
const range = dataMax - dataMin || 1;
function xFor(i) {
return padL + (i / (vals.length - 1)) * cw;
}
function yFor(v) {
return padT + ch - ((v - dataMin) / range) * ch;
}
// Grid lines
ctx.strokeStyle = 'rgba(255,255,255,0.03)';
ctx.lineWidth = 1;
for (let i = 0; i <= 4; i++) {
const y = padT + (ch / 4) * i;
ctx.beginPath();
ctx.moveTo(padL, y);
ctx.lineTo(padL + cw, y);
ctx.stroke();
}
// Area fill
const grad = ctx.createLinearGradient(0, padT, 0, padT + ch);
grad.addColorStop(0, 'rgba(96, 165, 250, 0.18)');
grad.addColorStop(0.5, 'rgba(96, 165, 250, 0.06)');
grad.addColorStop(1, 'rgba(96, 165, 250, 0)');
ctx.beginPath();
ctx.moveTo(xFor(0), yFor(vals[0]));
for (let i = 0; i < vals.length - 1; i++) {
const x0 = xFor(i);
const y0 = yFor(vals[i]);
const x1 = xFor(i + 1);
const y1 = yFor(vals[i + 1]);
const cx = (x0 + x1) / 2;
ctx.bezierCurveTo(cx, y0, cx, y1, x1, y1);
}
ctx.lineTo(xFor(vals.length - 1), h - padB);
ctx.lineTo(xFor(0), h - padB);
ctx.closePath();
ctx.fillStyle = grad;
ctx.fill();
// Line
ctx.beginPath();
ctx.moveTo(xFor(0), yFor(vals[0]));
for (let i = 0; i < vals.length - 1; i++) {
const x0 = xFor(i);
const y0 = yFor(vals[i]);
const x1 = xFor(i + 1);
const y1 = yFor(vals[i + 1]);
const cx = (x0 + x1) / 2;
ctx.bezierCurveTo(cx, y0, cx, y1, x1, y1);
}
ctx.strokeStyle = '#60A5FA';
ctx.lineWidth = 2.5;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.stroke();
// Glow under line
ctx.beginPath();
ctx.moveTo(xFor(0), yFor(vals[0]));
for (let i = 0; i < vals.length - 1; i++) {
const x0 = xFor(i);
const y0 = yFor(vals[i]);
const x1 = xFor(i + 1);
const y1 = yFor(vals[i + 1]);
const cx = (x0 + x1) / 2;
ctx.bezierCurveTo(cx, y0, cx, y1, x1, y1);
}
ctx.strokeStyle = 'rgba(96, 165, 250, 0.3)';
ctx.lineWidth = 8;
ctx.stroke();
// Points
for (let i = 0; i < vals.length; i++) {
if (i % 3 !== 0) continue;
const x = xFor(i);
const y = yFor(vals[i]);
ctx.beginPath();
ctx.arc(x, y, 3, 0, Math.PI * 2);
ctx.fillStyle = '#0B0F19';
ctx.fill();
ctx.beginPath();
ctx.arc(x, y, 2.5, 0, Math.PI * 2);
ctx.fillStyle = '#60A5FA';
ctx.fill();
}
// X labels
ctx.fillStyle = 'rgba(148, 163, 184, 0.5)';
ctx.font = '11px Inter, sans-serif';
ctx.textAlign = 'center';
for (let i = 0; i < vals.length; i += 4) {
const hour = parseInt(allTimes[indices[i]].slice(11, 13), 10);
const label = hour.toString().padStart(2, '0') + ':00';
ctx.fillText(label, xFor(i), h - 8);
}
// Y labels
ctx.textAlign = 'right';
ctx.fillStyle = 'rgba(148, 163, 184, 0.35)';
for (let i = 0; i <= 4; i++) {
const v = dataMin + (range / 4) * (4 - i);
ctx.fillText(Math.round(v) + '°', padL - 8, padT + (ch / 4) * i + 4);
}
// Interactive tooltip
overlay.addEventListener('mousemove', function(e) {
const r = container.getBoundingClientRect();
const mx = e.clientX - r.left;
const my = e.clientY - r.top;
let closest = 0;
let minDist = Infinity;
for (let i = 0; i < vals.length; i++) {
const dx = Math.abs(xFor(i) - mx);
if (dx < minDist) {
minDist = dx;
closest = i;
}
}
const x = xFor(closest);
const y = yFor(vals[closest]);
// Vertical line
canvas.style.display = 'block';
// Redraw everything + highlight
requestAnimationFrame(() => {
ctx.clearRect(0, 0, w, h);
// Grid
ctx.strokeStyle = 'rgba(255,255,255,0.03)';
ctx.lineWidth = 1;
for (let i = 0; i <= 4; i++) {
const yy = padT + (ch / 4) * i;
ctx.beginPath();
ctx.moveTo(padL, yy);
ctx.lineTo(padL + cw, yy);
ctx.stroke();
}
// Area
ctx.beginPath();
ctx.moveTo(xFor(0), yFor(vals[0]));
for (let i = 0; i < vals.length - 1; i++) {
const x0 = xFor(i);
const y0 = yFor(vals[i]);
const x1 = xFor(i + 1);
const y1 = yFor(vals[i + 1]);
const cx = (x0 + x1) / 2;
ctx.bezierCurveTo(cx, y0, cx, y1, x1, y1);
}
ctx.lineTo(xFor(vals.length - 1), h - padB);
ctx.lineTo(xFor(0), h - padB);
ctx.closePath();
ctx.fillStyle = grad;
ctx.fill();
// Glow
ctx.beginPath();
ctx.moveTo(xFor(0), yFor(vals[0]));
for (let i = 0; i < vals.length - 1; i++) {
const x0 = xFor(i);
const y0 = yFor(vals[i]);
const x1 = xFor(i + 1);
const y1 = yFor(vals[i + 1]);
const cx = (x0 + x1) / 2;
ctx.bezierCurveTo(cx, y0, cx, y1, x1, y1);
}
ctx.strokeStyle = 'rgba(96, 165, 250, 0.3)';
ctx.lineWidth = 8;
ctx.stroke();
// Line
ctx.beginPath();
ctx.moveTo(xFor(0), yFor(vals[0]));
for (let i = 0; i < vals.length - 1; i++) {
const x0 = xFor(i);
const y0 = yFor(vals[i]);
const x1 = xFor(i + 1);
const y1 = yFor(vals[i + 1]);
const cx = (x0 + x1) / 2;
ctx.bezierCurveTo(cx, y0, cx, y1, x1, y1);
}
ctx.strokeStyle = '#60A5FA';
ctx.lineWidth = 2.5;
ctx.stroke();
// Vertical highlight
ctx.beginPath();
ctx.moveTo(x, padT);
ctx.lineTo(x, h - padB);
ctx.strokeStyle = 'rgba(96, 165, 250, 0.15)';
ctx.lineWidth = 1;
ctx.setLineDash([4, 4]);
ctx.stroke();
ctx.setLineDash([]);
// Highlight point
ctx.beginPath();
ctx.arc(x, y, 6, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(96, 165, 250, 0.2)';
ctx.fill();
ctx.beginPath();
ctx.arc(x, y, 4, 0, Math.PI * 2);
ctx.fillStyle = '#60A5FA';
ctx.fill();
// Labels
ctx.fillStyle = 'rgba(148, 163, 184, 0.5)';
ctx.font = '11px Inter, sans-serif';
ctx.textAlign = 'center';
for (let i = 0; i < vals.length; i += 4) {
const hour = parseInt(allTimes[indices[i]].slice(11, 13), 10);
const label = hour.toString().padStart(2, '0') + ':00';
ctx.fillText(label, xFor(i), h - 8);
}
ctx.textAlign = 'right';
ctx.fillStyle = 'rgba(148, 163, 184, 0.35)';
for (let i = 0; i <= 4; i++) {
const v = dataMin + (range / 4) * (4 - i);
ctx.fillText(Math.round(v) + '°', padL - 8, padT + (ch / 4) * i + 4);
}
});
const hour = parseInt(allTimes[indices[closest]].slice(11, 13), 10);
tooltip.textContent = `${hour.toString().padStart(2,'0')}:00 — ${Math.round(vals[closest])}°C`;
tooltip.style.left = x + 'px';
tooltip.style.top = (y - 8) + 'px';
tooltip.style.opacity = '1';
});
overlay.addEventListener('mouseleave', function() {
tooltip.style.opacity = '0';
// Redraw clean
requestAnimationFrame(() => {
ctx.clearRect(0, 0, w, h);
ctx.strokeStyle = 'rgba(255,255,255,0.03)';
ctx.lineWidth = 1;
for (let i = 0; i <= 4; i++) {
const yy = padT + (ch / 4) * i;
ctx.beginPath();
ctx.moveTo(padL, yy);
ctx.lineTo(padL + cw, yy);
ctx.stroke();
}
ctx.beginPath();
ctx.moveTo(xFor(0), yFor(vals[0]));
for (let i = 0; i < vals.length - 1; i++) {
const x0 = xFor(i);
const y0 = yFor(vals[i]);
const x1 = xFor(i + 1);
const y1 = yFor(vals[i + 1]);
const cx = (x0 + x1) / 2;
ctx.bezierCurveTo(cx, y0, cx, y1, x1, y1);
}
ctx.lineTo(xFor(vals.length - 1), h - padB);
ctx.lineTo(xFor(0), h - padB);
ctx.closePath();
ctx.fillStyle = grad;
ctx.fill();
ctx.beginPath();
ctx.moveTo(xFor(0), yFor(vals[0]));
for (let i = 0; i < vals.length - 1; i++) {
const x0 = xFor(i);
const y0 = yFor(vals[i]);
const x1 = xFor(i + 1);
const y1 = yFor(vals[i + 1]);
const cx = (x0 + x1) / 2;
ctx.bezierCurveTo(cx, y0, cx, y1, x1, y1);
}
ctx.strokeStyle = 'rgba(96, 165, 250, 0.3)';
ctx.lineWidth = 8;
ctx.stroke();
ctx.beginPath();
ctx.moveTo(xFor(0), yFor(vals[0]));
for (let i = 0; i < vals.length - 1; i++) {
const x0 = xFor(i);
const y0 = yFor(vals[i]);
const x1 = xFor(i + 1);
const y1 = yFor(vals[i + 1]);
const cx = (x0 + x1) / 2;
ctx.bezierCurveTo(cx, y0, cx, y1, x1, y1);
}
ctx.strokeStyle = '#60A5FA';
ctx.lineWidth = 2.5;
ctx.stroke();
for (let i = 0; i < vals.length; i++) {
if (i % 3 !== 0) continue;
ctx.beginPath();
ctx.arc(xFor(i), yFor(vals[i]), 3, 0, Math.PI * 2);
ctx.fillStyle = '#0B0F19';
ctx.fill();
ctx.beginPath();
ctx.arc(xFor(i), yFor(vals[i]), 2.5, 0, Math.PI * 2);
ctx.fillStyle = '#60A5FA';
ctx.fill();
}
ctx.fillStyle = 'rgba(148, 163, 184, 0.5)';
ctx.font = '11px Inter, sans-serif';
ctx.textAlign = 'center';
for (let i = 0; i < vals.length; i += 4) {
const hour = parseInt(allTimes[indices[i]].slice(11, 13), 10);
const label = hour.toString().padStart(2, '0') + ':00';
ctx.fillText(label, xFor(i), h - 8);
}
ctx.textAlign = 'right';
ctx.fillStyle = 'rgba(148, 163, 184, 0.35)';
for (let i = 0; i <= 4; i++) {
const v = dataMin + (range / 4) * (4 - i);
ctx.fillText(Math.round(v) + '°', padL - 8, padT + (ch / 4) * i + 4);
}
});
});
}
load();
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 47,629 | html / css / js | 4,655 / 15,662 / 27,312 |
|---|---|---|---|
| dom nodes | 69 | dom depth | 9 |
| css rules | 82 | js present | yes |
| brightness | 24.5 | contrast | 11.6 |
| colorfulness | 12.2 | whitespace | 97.0% |
This slot's telemetry
| prompt tokens | 312 | completion tokens | 12,577 |
|---|---|---|---|
| total tokens | 12,889 | wall | 319.8 s |
| cost | — | request id | — |
config.json560 B
{
"N": 4,
"auth": {
"credential_ref": "WCB_KIMI_KEY",
"method": "api-key"
},
"billing": "metered",
"config_id": "kimi-k2.6-eff-enabled--api--official--dev",
"effort": "enabled",
"family": "kimi",
"m": {
"min": 4,
"q": 4
},
"model_id": "kimi-k2.6",
"protocol": "api",
"served_model": "kimi-k2.6",
"telemetry": {
"completion_tokens": 96039,
"cost_usd": null,
"prompt_tokens": 2464,
"total_tokens": 98503,
"wall_ms": 2488442
},
"transport": "moonshot-official-api",
"vendor_sanction_ref": null
}send-log4.7 KB
{
"N": 4,
"batch_id": "2026-07-20--official-kimi",
"config_id": "kimi-k2.6-eff-enabled--api--official--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-07-20T02:40:56.413627+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-20T02:37:40.830578+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-20T02:46:19.151186+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-20T02:40:59.343088+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-20T02:53:42.498698+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-20T02:46:23.846575+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-20T02:58:00.202663+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-20T02:53:48.619611+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-20T03:03:05.368738+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-20T02:58:04.669499+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-20T03:09:29.375767+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-20T03:03:11.314439+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-20T03:13:43.079672+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-20T03:09:40.365941+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-20T03:19:49.161637+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-20T03:13:47.846379+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
}
}
}