minimax-m2.7 · opencode
opencode
- config
- minimax-m2.7--cli--opencode--dev
- batch
- 2026-07-19--unified
- transport
- opencode-cli-isolated-xdg-go-subscription
- protocol
- cli · plan
- served model
- minimax-m2.7
- captured
- Jul 18, 2026, 11:54 AM · N=2
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
gemini-3.5-flash @minimal · api0.72claude-sonnet-5 @medium · CC0.70claude-opus-4-8 @medium · kiro0.69gemini-3.5-flash @low · api0.69mimo-v2.5-pro @high · api0.69farthest
gpt-5.6-luna @high · kiro0.38gpt-5.6-luna @medium · codex-oauth0.39gpt-5.5 @medium · codex-oauth0.41claude-haiku-4-5 @xhigh · CC0.41claude-haiku-4-5 @high · CC0.42within session 2026-07-19--unified
similarity measures convergence within this session — not quality.
Fidelity — does the card show the right data?
- namematch
- conditionmatch
- datematch
- max tempambiguousshown: 25max-equals-min
- min tempambiguousshown: 25max-equals-min
- hourlyambiguouscoverage · 0 match · 0 mismatch · 24 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, height=800">
<title>Weather Card</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
padding: 20px;
}
.card {
background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 32px;
padding: 48px;
width: 900px;
box-shadow:
0 25px 50px -12px rgba(0,0,0,0.5),
inset 0 1px 0 rgba(255,255,255,0.1);
}
.header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 40px;
}
.location-section h1 {
font-size: 42px;
font-weight: 700;
letter-spacing: -1px;
margin-bottom: 8px;
background: linear-gradient(135deg, #fff 0%, #a5c7ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.location-section .date {
font-size: 18px;
color: rgba(255,255,255,0.6);
font-weight: 400;
}
.weather-icon {
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.weather-icon svg {
width: 100%;
height: 100%;
filter: drop-shadow(0 4px 12px rgba(255,200,100,0.3));
}
.temps-section {
display: flex;
align-items: baseline;
gap: 16px;
margin-bottom: 48px;
}
.temp-max {
font-size: 96px;
font-weight: 700;
letter-spacing: -4px;
line-height: 1;
background: linear-gradient(135deg, #ff6b6b 0%, #ffa500 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.temp-min {
font-size: 48px;
font-weight: 500;
color: rgba(255,255,255,0.5);
letter-spacing: -2px;
}
.condition {
font-size: 28px;
font-weight: 500;
color: rgba(255,255,255,0.85);
margin-left: 8px;
}
.hourly-section {
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 32px;
}
.hourly-title {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255,255,255,0.4);
margin-bottom: 24px;
}
.hourly-grid {
display: grid;
grid-template-columns: repeat(24, 1fr);
gap: 8px;
}
.hour-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px 4px;
background: rgba(255,255,255,0.05);
border-radius: 16px;
transition: all 0.2s ease;
}
.hour-item:hover {
background: rgba(255,255,255,0.12);
transform: translateY(-4px);
}
.hour-time {
font-size: 11px;
font-weight: 500;
color: rgba(255,255,255,0.5);
}
.hour-icon {
width: 28px;
height: 28px;
}
.hour-temp {
font-size: 14px;
font-weight: 600;
color: #fff;
}
.error-state {
text-align: center;
padding: 80px 40px;
}
.error-state h2 {
font-size: 28px;
font-weight: 600;
margin-bottom: 16px;
color: #ff6b6b;
}
.error-state p {
font-size: 16px;
color: rgba(255,255,255,0.6);
}
.loading-state {
text-align: center;
padding: 80px 40px;
}
.spinner {
width: 48px;
height: 48px;
border: 3px solid rgba(255,255,255,0.1);
border-top-color: #fff;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 24px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.loading-state p {
font-size: 16px;
color: rgba(255,255,255,0.6);
}
.coords {
font-size: 12px;
color: rgba(255,255,255,0.3);
margin-top: 4px;
}
</style>
</head>
<body>
<div id="app"></div>
<script>
const params = new URLSearchParams(window.location.search);
const lat = parseFloat(params.get('lat')) || 52.52;
const lon = parseFloat(params.get('lon')) || 13.405;
const name = params.get('name') || 'Berlin';
const dateParam = params.get('date') || new Date().toISOString().split('T')[0];
const weatherIcons = {
0: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="25" fill="#FFD93D" stroke="#FFA500" stroke-width="3"/>
<g stroke="#FFD93D" stroke-width="4" stroke-linecap="round">
<line x1="50" y1="12" x2="50" y2="20"/>
<line x1="50" y1="80" x2="50" y2="88"/>
<line x1="12" y1="50" x2="20" y2="50"/>
<line x1="80" y1="50" x2="88" y2="50"/>
<line x1="23" y1="23" x2="28" y2="28"/>
<line x1="72" y1="72" x2="77" y2="77"/>
<line x1="23" y1="77" x2="28" y2="72"/>
<line x1="72" y1="28" x2="77" y2="23"/>
</g>
</svg>`,
1: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="35" cy="40" r="18" fill="#FFD93D"/>
<circle cx="60" cy="50" r="22" fill="rgba(255,255,255,0.2)"/>
<circle cx="70" cy="35" r="15" fill="rgba(255,255,255,0.15)"/>
</svg>`,
2: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="35" r="16" fill="#FFD93D"/>
<ellipse cx="65" cy="45" rx="28" ry="18" fill="rgba(255,255,255,0.25)"/>
<ellipse cx="50" cy="60" rx="35" ry="20" fill="rgba(255,255,255,0.15)"/>
</svg>`,
3: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="50" rx="40" ry="25" fill="rgba(255,255,255,0.3)"/>
<ellipse cx="35" cy="55" rx="30" ry="18" fill="rgba(255,255,255,0.2)"/>
<ellipse cx="65" cy="45" rx="25" ry="15" fill="rgba(255,255,255,0.15)"/>
</svg>`,
45: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="60" rx="45" ry="25" fill="rgba(200,200,220,0.4)"/>
<ellipse cx="30" cy="50" rx="25" ry="18" fill="rgba(200,200,220,0.3)"/>
<ellipse cx="70" cy="55" rx="30" ry="20" fill="rgba(200,200,220,0.25)"/>
</svg>`,
48: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="55" rx="45" ry="28" fill="rgba(180,180,200,0.5)"/>
<ellipse cx="25" cy="50" rx="20" ry="15" fill="rgba(180,180,200,0.35)"/>
<ellipse cx="75" cy="48" rx="22" ry="16" fill="rgba(180,180,200,0.3)"/>
</svg>`,
51: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="35" rx="35" ry="20" fill="rgba(180,180,200,0.4)"/>
<g fill="#87CEEB">
<circle cx="30" cy="65" r="3"/>
<circle cx="45" cy="75" r="2.5"/>
<circle cx="55" cy="60" r="3"/>
<circle cx="70" cy="70" r="2.5"/>
<circle cx="40" cy="85" r="2"/>
<circle cx="60" cy="80" r="2"/>
</g>
</svg>`,
53: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="35" rx="35" ry="20" fill="rgba(160,160,190,0.5)"/>
<g fill="#7EC8E3">
<circle cx="25" cy="60" r="4"/>
<circle cx="40" cy="70" r="3.5"/>
<circle cx="55" cy="55" r="4"/>
<circle cx="75" cy="65" r="3.5"/>
<circle cx="35" cy="82" r="3"/>
<circle cx="60" cy="80" r="3.5"/>
<circle cx="50" cy="72" r="3"/>
</g>
</svg>`,
55: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="35" rx="38" ry="22" fill="rgba(140,140,180,0.6)"/>
<g fill="#5BA3C6">
<circle cx="22" cy="58" r="5"/>
<circle cx="38" cy="68" r="4.5"/>
<circle cx="55" cy="52" r="5"/>
<circle cx="78" cy="62" r="4.5"/>
<circle cx="32" cy="82" r="4"/>
<circle cx="58" cy="78" r="4.5"/>
<circle cx="45" cy="90" r="3.5"/>
<circle cx="68" cy="85" r="4"/>
</g>
</svg>`,
61: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="30" rx="38" ry="20" fill="rgba(140,140,180,0.5)"/>
<g stroke="#5BA3C6" stroke-width="2.5" stroke-linecap="round">
<line x1="25" y1="55" x2="22" y2="70"/>
<line x1="40" y1="58" x2="37" y2="78"/>
<line x1="55" y1="52" x2="52" y2="72"/>
<line x1="70" y1="56" x2="67" y2="76"/>
</g>
</svg>`,
63: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="28" rx="40" ry="22" fill="rgba(120,120,170,0.6)"/>
<g stroke="#4A90B8" stroke-width="3" stroke-linecap="round">
<line x1="20" y1="52" x2="15" y2="72"/>
<line x1="35" y1="55" x2="30" y2="80"/>
<line x1="50" y1="48" x2="45" y2="73"/>
<line x1="65" y1="53" x2="60" y2="78"/>
<line x1="80" y1="50" x2="75" y2="70"/>
</g>
</svg>`,
65: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="25" rx="42" ry="24" fill="rgba(100,100,160,0.7)"/>
<g stroke="#3A7CA5" stroke-width="3.5" stroke-linecap="round">
<line x1="18" y1="50" x2="12" y2="75"/>
<line x1="32" y1="54" x2="26" y2="84"/>
<line x1="48" y1="46" x2="42" y2="76"/>
<line x1="62" y1="52" x2="56" y2="82"/>
<line x1="78" y1="48" x2="72" y2="73"/>
</g>
</svg>`,
71: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="30" rx="38" ry="20" fill="rgba(180,180,200,0.4)"/>
<g fill="#E8F4F8">
<circle cx="25" cy="58" r="3"/>
<circle cx="40" cy="68" r="2.5"/>
<circle cx="55" cy="55" r="3"/>
<circle cx="70" cy="65" r="2.5"/>
<circle cx="35" cy="80" r="2"/>
<circle cx="60" cy="78" r="2"/>
</g>
</svg>`,
73: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="28" rx="40" ry="22" fill="rgba(160,170,190,0.5)"/>
<g fill="#D0E8F0">
<circle cx="20" cy="55" r="4"/>
<circle cx="35" cy="65" r="3.5"/>
<circle cx="50" cy="50" r="4"/>
<circle cx="68" cy="60" r="3.5"/>
<circle cx="30" cy="78" r="3"/>
<circle cx="55" cy="75" r="3.5"/>
<circle cx="75" cy="80" r="3"/>
</g>
</svg>`,
75: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="25" rx="42" ry="24" fill="rgba(150,160,185,0.6)"/>
<g fill="#C0D8E8">
<circle cx="18" cy="52" r="5"/>
<circle cx="32" cy="62" r="4.5"/>
<circle cx="48" cy="46" r="5"/>
<circle cx="65" cy="56" r="4.5"/>
<circle cx="28" cy="76" r="4"/>
<circle cx="52" cy="72" r="4.5"/>
<circle cx="72" cy="78" r="4"/>
<circle cx="40" cy="85" r="3.5"/>
</g>
</svg>`,
77: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="35" rx="40" ry="22" fill="rgba(180,190,210,0.5)"/>
<g fill="rgba(200,210,230,0.8)">
<circle cx="25" cy="55" r="2"/>
<circle cx="40" cy="60" r="1.5"/>
<circle cx="55" cy="52" r="2"/>
<circle cx="70" cy="58" r="1.5"/>
<circle cx="35" cy="70" r="1.8"/>
<circle cx="60" cy="68" r="1.5"/>
</g>
</svg>`,
80: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="25" rx="35" ry="18" fill="rgba(140,150,180,0.5)"/>
<g fill="#87CEEB">
<circle cx="20" cy="55" r="4"/>
<circle cx="35" cy="62" r="3.5"/>
<circle cx="50" cy="50" r="4"/>
<circle cx="68" cy="58" r="3.5"/>
<circle cx="28" cy="75" r="3"/>
<circle cx="58" cy="72" r="3.5"/>
</g>
</svg>`,
81: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="22" rx="38" ry="20" fill="rgba(120,135,170,0.6)"/>
<g fill="#6BB8D9">
<circle cx="18" cy="50" r="5"/>
<circle cx="32" cy="58" r="4.5"/>
<circle cx="48" cy="45" r="5"/>
<circle cx="65" cy="55" r="4.5"/>
<circle cx="25" cy="72" r="4"/>
<circle cx="55" cy="68" r="4.5"/>
<circle cx="75" cy="70" r="4"/>
</g>
</svg>`,
82: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="20" rx="40" ry="22" fill="rgba(100,120,160,0.7)"/>
<g fill="#4A9FC8">
<circle cx="15" cy="48" r="6"/>
<circle cx="30" cy="55" r="5.5"/>
<circle cx="45" cy="42" r="6"/>
<circle cx="62" cy="52" r="5.5"/>
<circle cx="78" cy="48" r="5"/>
<circle cx="22" cy="70" r="5"/>
<circle cx="52" cy="65" r="5.5"/>
<circle cx="70" cy="72" r="5"/>
</g>
</svg>`,
85: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="25" rx="38" ry="20" fill="rgba(150,160,185,0.5)"/>
<g fill="#E0F0FF">
<circle cx="22" cy="55" r="4"/>
<circle cx="38" cy="62" r="3.5"/>
<circle cx="55" cy="50" r="4"/>
<circle cx="72" cy="58" r="3.5"/>
<circle cx="30" cy="75" r="3"/>
<circle cx="60" cy="72" r="3.5"/>
</g>
</svg>`,
86: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="22" rx="40" ry="22" fill="rgba(130,145,175,0.6)"/>
<g fill="#C8E0F8">
<circle cx="18" cy="50" r="5"/>
<circle cx="32" cy="58" r="4.5"/>
<circle cx="48" cy="44" r="5"/>
<circle cx="65" cy="54" r="4.5"/>
<circle cx="78" cy="50" r="4.5"/>
<circle cx="25" cy="72" r="4.5"/>
<circle cx="55" cy="68" r="5"/>
<circle cx="70" cy="75" r="4"/>
</g>
</svg>`,
95: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="25" rx="40" ry="22" fill="rgba(80,80,120,0.7)"/>
<path d="M45 45 L50 70 L42 70 L52 95 L58 65 L50 65 L58 45 Z" fill="#FFD93D" stroke="#FFA500" stroke-width="2"/>
</svg>`,
96: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="25" rx="42" ry="24" fill="rgba(70,70,110,0.8)"/>
<path d="M44 42 L50 68 L41 68 L52 95 L60 62 L51 62 L60 42 Z" fill="#FFD93D"/>
<g fill="#E8E8E8">
<circle cx="25" cy="75" r="4"/>
<circle cx="70" cy="80" r="3.5"/>
<circle cx="80" cy="65" r="3"/>
</g>
</svg>`,
99: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="22" rx="44" ry="26" fill="rgba(60,60,100,0.85)"/>
<path d="M43 40 L50 66 L40 66 L52 94 L62 60 L52 60 L62 40 Z" fill="#FFD93D"/>
<g fill="#D0D0E0">
<circle cx="20" cy="72" r="5"/>
<circle cx="35" cy="82" r="4"/>
<circle cx="75" cy="75" r="5"/>
<circle cx="85" cy="60" r="4"/>
</g>
</svg>`
};
function getWeatherIcon(code) {
return weatherIcons[code] || weatherIcons[0];
}
function getConditionName(code) {
const conditions = {
0: 'Clear Sky',
1: 'Mainly Clear',
2: 'Partly Cloudy',
3: 'Overcast',
45: 'Foggy',
48: 'Depositing Rime Fog',
51: 'Light Drizzle',
53: 'Moderate Drizzle',
55: 'Dense Drizzle',
61: 'Slight Rain',
63: 'Moderate Rain',
65: 'Heavy Rain',
71: 'Slight Snowfall',
73: 'Moderate Snowfall',
75: 'Heavy Snowfall',
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'
};
return conditions[code] || 'Unknown';
}
function formatDate(dateStr) {
const date = new Date(dateStr + 'T00:00:00Z');
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
return date.toLocaleDateString('en-US', options);
}
function isTodayOrFuture(dateStr) {
const today = new Date();
today.setUTCHours(0, 0, 0, 0);
const target = new Date(dateStr + 'T00:00:00Z');
return target >= today;
}
function getSmallIcon(code) {
const iconMap = {
0: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="30" fill="#FFD93D"/>
</svg>`,
1: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="35" cy="45" r="20" fill="#FFD93D"/>
<circle cx="58" cy="55" r="22" fill="rgba(255,255,255,0.2)"/>
</svg>`,
2: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="40" r="18" fill="#FFD93D"/>
<ellipse cx="60" cy="55" rx="28" ry="20" fill="rgba(255,255,255,0.25)"/>
</svg>`,
3: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="50" rx="40" ry="28" fill="rgba(255,255,255,0.35)"/>
</svg>`,
45: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="55" rx="42" ry="25" fill="rgba(200,200,220,0.5)"/>
</svg>`,
48: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="55" rx="45" ry="28" fill="rgba(180,180,200,0.55)"/>
</svg>`,
51: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="30" rx="35" ry="20" fill="rgba(180,180,200,0.45)"/>
<g fill="#87CEEB"><circle cx="35" cy="65" r="4"/><circle cx="55" cy="70" r="3"/><circle cx="70" cy="60" r="3.5"/></g>
</svg>`,
53: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="28" rx="38" ry="22" fill="rgba(160,160,190,0.5)"/>
<g fill="#7EC8E3"><circle cx="30" cy="58" r="5"/><circle cx="50" cy="65" r="4"/><circle cx="70" cy="55" r="5"/></g>
</svg>`,
55: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="25" rx="40" ry="24" fill="rgba(140,140,180,0.6)"/>
<g fill="#5BA3C6"><circle cx="25" cy="55" r="6"/><circle cx="45" cy="62" r="5"/><circle cx="65" cy="52" r="6"/><circle cx="78" cy="60" r="5"/></g>
</svg>`,
61: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="28" rx="38" ry="20" fill="rgba(140,140,180,0.5)"/>
<g stroke="#5BA3C6" stroke-width="3" stroke-linecap="round"><line x1="30" y1="50" x2="25" y2="68"/><line x1="50" y1="48" x2="45" y2="70"/><line x1="70" y1="52" x2="65" y2="72"/></g>
</svg>`,
63: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="25" rx="40" ry="22" fill="rgba(120,120,170,0.6)"/>
<g stroke="#4A90B8" stroke-width="3.5" stroke-linecap="round"><line x1="25" y1="48" x2="18" y2="72"/><line x1="45" y1="45" x2="38" y2="75"/><line x1="65" y1="50" x2="58" y2="78"/></g>
</svg>`,
65: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="22" rx="42" ry="24" fill="rgba(100,100,160,0.7)"/>
<g stroke="#3A7CA5" stroke-width="4" stroke-linecap="round"><line x1="22" y1="46" x2="14" y2="75"/><line x1="42" y1="42" x2="34" y2="78"/><line x1="62" y1="48" x2="54" y2="82"/></g>
</svg>`,
71: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="30" rx="38" ry="20" fill="rgba(180,180,200,0.45)"/>
<g fill="#E8F4F8"><circle cx="30" cy="60" r="4"/><circle cx="50" cy="68" r="3.5"/><circle cx="70" cy="58" r="4"/></g>
</svg>`,
73: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="26" rx="40" ry="22" fill="rgba(160,170,190,0.5)"/>
<g fill="#D0E8F0"><circle cx="25" cy="55" r="5"/><circle cx="45" cy="62" r="4.5"/><circle cx="65" cy="52" r="5"/><circle cx="78" cy="60" r="4"/></g>
</svg>`,
75: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="22" rx="42" ry="24" fill="rgba(150,160,185,0.6)"/>
<g fill="#C0D8E8"><circle cx="22" cy="52" r="6"/><circle cx="40" cy="58" r="5.5"/><circle cx="58" cy="48" r="6"/><circle cx="75" cy="56" r="5.5"/></g>
</svg>`,
77: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="35" rx="40" ry="22" fill="rgba(180,190,210,0.5)"/>
<g fill="rgba(200,210,230,0.8)"><circle cx="30" cy="55" r="3"/><circle cx="50" cy="60" r="2.5"/><circle cx="70" cy="52" r="3"/></g>
</svg>`,
80: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="25" rx="35" ry="18" fill="rgba(140,150,180,0.5)"/>
<g fill="#87CEEB"><circle cx="28" cy="55" r="5"/><circle cx="48" cy="62" r="4.5"/><circle cx="68" cy="52" r="5"/></g>
</svg>`,
81: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="22" rx="38" ry="20" fill="rgba(120,135,170,0.6)"/>
<g fill="#6BB8D9"><circle cx="25" cy="50" r="6"/><circle cx="45" cy="58" r="5.5"/><circle cx="62" cy="48" r="6"/><circle cx="78" cy="55" r="5"/></g>
</svg>`,
82: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="20" rx="40" ry="22" fill="rgba(100,120,160,0.7)"/>
<g fill="#4A9FC8"><circle cx="22" cy="48" r="7"/><circle cx="40" cy="55" r="6.5"/><circle cx="58" cy="45" r="7"/><circle cx="75" cy="52" r="6.5"/></g>
</svg>`,
85: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="25" rx="38" ry="20" fill="rgba(150,160,185,0.5)"/>
<g fill="#E0F0FF"><circle cx="28" cy="55" r="5"/><circle cx="48" cy="62" r="4.5"/><circle cx="68" cy="52" r="5"/></g>
</svg>`,
86: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="22" rx="40" ry="22" fill="rgba(130,145,175,0.6)"/>
<g fill="#C8E0F8"><circle cx="25" cy="50" r="6"/><circle cx="42" cy="58" r="5.5"/><circle cx="60" cy="48" r="6"/><circle cx="78" cy="55" r="5.5"/></g>
</svg>`,
95: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="25" rx="40" ry="22" fill="rgba(80,80,120,0.7)"/>
<path d="M45 42 L52 72 L40 72 L52 98 L60 60 L50 60 L60 42 Z" fill="#FFD93D"/>
</svg>`,
96: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="25" rx="42" ry="24" fill="rgba(70,70,110,0.8)"/>
<path d="M43 40 L50 68 L40 68 L52 95 L62 58 L51 58 L62 40 Z" fill="#FFD93D"/>
<g fill="#E8E8E8"><circle cx="22" cy="75" r="5"/><circle cx="75" cy="72" r="4.5"/></g>
</svg>`,
99: `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="22" rx="44" ry="26" fill="rgba(60,60,100,0.85)"/>
<path d="M42 38 L50 66 L39 66 L52 95 L63 56 L52 56 L63 38 Z" fill="#FFD93D"/>
<g fill="#D0D0E0"><circle cx="20" cy="72" r="6"/><circle cx="78" cy="68" r="5.5"/><circle cx="85" cy="55" r="4.5"/></g>
</svg>`
};
return iconMap[code] || iconMap[0];
}
function renderLoading() {
document.getElementById('app').innerHTML = `
<div class="card">
<div class="loading-state">
<div class="spinner"></div>
<p>Loading weather data...</p>
</div>
</div>
`;
}
function renderError(message) {
document.getElementById('app').innerHTML = `
<div class="card">
<div class="error-state">
<h2>Unable to Load Weather</h2>
<p>${message}</p>
</div>
</div>
`;
}
function renderWeather(data, locationName, dateStr) {
const daily = data.daily;
const hourly = data.hourly;
const dateIndex = daily.time.indexOf(dateStr);
const maxTemp = daily.temperature_2m_max[dateIndex];
const minTemp = daily.temperature_2m_min[dateIndex];
const weatherCode = daily.weather_code[dateIndex];
const startHourIndex = dateIndex * 24;
const endHourIndex = startHourIndex + 24;
const hourlyTemps = hourly.temperature_2m.slice(startHourIndex, endHourIndex);
const hourlyCodes = hourly.weather_code.slice(startHourIndex, endHourIndex);
const hourlyHTML = hourlyTemps.map((temp, i) => {
const hour = String(i).padStart(2, '0') + ':00';
const code = hourlyCodes[i] !== undefined ? hourlyCodes[i] : weatherCode;
return `
<div class="hour-item">
<span class="hour-time">${hour}</span>
<div class="hour-icon">${getSmallIcon(code)}</div>
<span class="hour-temp">${Math.round(temp)}°</span>
</div>
`;
}).join('');
document.getElementById('app').innerHTML = `
<div class="card">
<div class="header">
<div class="location-section">
<h1>${locationName}</h1>
<div class="date">${formatDate(dateStr)}</div>
<div class="coords">${lat.toFixed(4)}°, ${lon.toFixed(4)}°</div>
</div>
<div class="weather-icon">
${getWeatherIcon(weatherCode)}
</div>
</div>
<div class="temps-section">
<span class="temp-max">${Math.round(maxTemp)}°</span>
<span class="temp-min">${Math.round(minTemp)}°</span>
<span class="condition">${getConditionName(weatherCode)}</span>
</div>
<div class="hourly-section">
<div class="hourly-title">Hourly Temperature</div>
<div class="hourly-grid">
${hourlyHTML}
</div>
</div>
</div>
`;
}
async function loadWeather() {
renderLoading();
const apiBase = isTodayOrFuture(dateParam) ? '/api/om/forecast' : '/api/om/archive';
const url = `${apiBase}?latitude=${lat}&longitude=${lon}&daily=temperature_2m_max,temperature_2m_min,weather_code&hourly=temperature_2m,weather_code&timezone=UTC&temperature_unit=celsius&start_date=${dateParam}&end_date=${dateParam}`;
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
const data = await response.json();
if (!data.daily || !data.hourly) {
throw new Error('Invalid data format received');
}
renderWeather(data, name, dateParam);
} catch (error) {
console.error('Weather fetch error:', error);
renderError(error.message || 'Failed to load weather data. Please try again.');
}
}
loadWeather();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 28,664 | html / css / js | 245 / 4,303 / 24,116 |
|---|---|---|---|
| dom nodes | 9 | dom depth | 3 |
| css rules | 29 | js present | yes |
| brightness | 46.2 | contrast | 18.6 |
| colorfulness | 29.8 | whitespace | 64.9% |
This slot's telemetry
| prompt tokens | 0 | completion tokens | 0 |
|---|---|---|---|
| total tokens | 0 | wall | 175 s |
| cost | — | request id | — |
config.json577 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_OPENCODE_KEY",
"method": "oauth-login"
},
"billing": "plan",
"config_id": "minimax-m2.7--cli--opencode--dev",
"effort": null,
"family": "minimax",
"m": {
"min": 2,
"q": 2
},
"model_id": "minimax-m2.7",
"protocol": "cli",
"served_model": "minimax-m2.7",
"telemetry": {
"completion_tokens": null,
"cost_usd": null,
"prompt_tokens": null,
"total_tokens": null,
"wall_ms": 322743
},
"transport": "opencode-cli-isolated-xdg-go-subscription",
"vendor_sanction_ref": null
}send-log2.5 KB
{
"N": 2,
"batch_id": "2026-07-18--dev-opencode-cli",
"config_id": "minimax-m2.7--cli--opencode--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-07-17T17:47:54.929409+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T17:47:09.782863+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-17T17:50:53.593065+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T17:47:58.602522+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-17T17:51:59.470572+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T17:50:59.879530+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-17T17:52:45.999555+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T17:52:02.980918+00:00"
}
],
"block_index": 1,
"model_reaching_attempt_index": 0,
"slot_index": 1,
"terminal_state": "valid",
"variant": "P-min"
}
],
"retry_policy": {
"max_unreachable_retries": 5,
"rate_limit_backoff": {
"max_attempts": 4,
"max_total_ms": 60000
}
}
}