gemini-3.5-flash @ low · api
apilow
- config
- gemini-3.5-flash-eff-low--api--official--dev
- batch
- 2026-07-19--unified
- transport
- google-gemini-developer-api-openai-compat
- protocol
- api · metered
- served model
- gemini-3.5-flash
- 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
claude-opus-4-8 @medium · kiro0.70gemini-3.5-flash @minimal · api0.70claude-sonnet-4-6 @max · kiro0.69grok-4.5 @high · grok-cli0.69grok-4.5 @low · grok-cli0.69farthest
gpt-5.5 @medium · codex-oauth0.34gpt-5.6-luna @low · codex-oauth0.36gpt-5.6-luna @medium · codex-oauth0.38north-mini-code-free · api0.39gpt-5.6-luna @high · kiro0.39within 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 tempambiguousinsufficient-distinct-temperature-nodes
- min tempambiguousinsufficient-distinct-temperature-nodes
- 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=device-width, initial-scale=1.0">
<title>Weather Card</title>
<style>
:root {
--bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
--card-bg: rgba(30, 41, 59, 0.7);
--card-border: rgba(255, 255, 255, 0.08);
--text-primary: #f8fafc;
--text-secondary: #94a3b8;
--accent-blue: #38bdf8;
--accent-orange: #f97316;
--accent-purple: #a855f7;
--glass-glow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body {
background: var(--bg-gradient);
color: var(--text-primary);
width: 1280px;
height: 800px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
/* Ambient glowing backgrounds */
.ambient-glow {
position: absolute;
width: 600px;
height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
top: -100px;
left: -100px;
z-index: 0;
pointer-events: none;
}
.ambient-glow-2 {
position: absolute;
width: 600px;
height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(168, 85, 247, 0.12) 0%, rgba(0, 0, 0, 0) 70%);
bottom: -100px;
right: -100px;
z-index: 0;
pointer-events: none;
}
.container {
z-index: 10;
width: 1100px;
height: 640px;
background: var(--card-bg);
border: 1px solid var(--card-border);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 24px;
box-shadow: var(--glass-glow);
padding: 48px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* Loading / Error overlay */
.status-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(15, 23, 42, 0.95);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 100;
border-radius: 24px;
transition: opacity 0.4s ease;
}
.status-overlay.hidden {
opacity: 0;
pointer-events: none;
}
.spinner {
width: 64px;
height: 64px;
border: 5px solid rgba(255, 255, 255, 0.1);
border-top-color: var(--accent-blue);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 24px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.error-message {
color: #ef4444;
font-size: 1.25rem;
text-align: center;
max-width: 500px;
line-height: 1.5;
display: none;
}
/* Header Layout */
.header {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.location-info h1 {
font-size: 3rem;
font-weight: 800;
letter-spacing: -0.025em;
background: linear-gradient(to right, #ffffff, #cbd5e1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 6px;
}
.location-info p {
color: var(--text-secondary);
font-size: 1.1rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
}
.coordinates {
font-size: 0.9rem;
opacity: 0.7;
}
/* Current Weather Visuals */
.main-weather-block {
display: flex;
align-items: center;
gap: 40px;
margin: 20px 0;
}
.weather-visual {
display: flex;
align-items: center;
gap: 24px;
}
.weather-icon-large {
width: 110px;
height: 110px;
filter: drop-shadow(0 10px 15px rgba(56, 189, 248, 0.3));
}
.temperature-display {
display: flex;
flex-direction: column;
}
.condition-text {
font-size: 1.8rem;
font-weight: 600;
color: var(--text-primary);
}
.temp-range {
display: flex;
align-items: center;
gap: 16px;
margin-top: 8px;
font-size: 1.15rem;
}
.temp-max {
color: var(--accent-orange);
font-weight: 600;
display: flex;
align-items: center;
gap: 4px;
}
.temp-min {
color: var(--accent-blue);
font-weight: 600;
display: flex;
align-items: center;
gap: 4px;
}
/* Hourly Forecast section */
.hourly-section {
background: rgba(15, 23, 42, 0.4);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 18px;
padding: 24px;
}
.hourly-title {
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-secondary);
margin-bottom: 20px;
font-weight: 700;
}
.hourly-scroll {
display: flex;
overflow-x: auto;
gap: 16px;
padding-bottom: 8px;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
.hourly-scroll::-webkit-scrollbar {
height: 6px;
}
.hourly-scroll::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
border-radius: 10px;
}
.hourly-card {
flex: 0 0 76px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 12px;
padding: 14px 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 120px;
transition: all 0.3s ease;
}
.hourly-card:hover {
background: rgba(255, 255, 255, 0.06);
transform: translateY(-2px);
border-color: rgba(255, 255, 255, 0.1);
}
.hourly-time {
font-size: 0.85rem;
color: var(--text-secondary);
font-weight: 500;
}
.hourly-temp {
font-size: 1.15rem;
font-weight: 700;
color: var(--text-primary);
}
.hourly-bar-container {
width: 100%;
height: 24px;
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
}
.hourly-bar {
width: 6px;
background: linear-gradient(to top, var(--accent-blue), var(--accent-orange));
border-radius: 3px;
transition: height 0.5s ease;
}
</style>
</head>
<body>
<div class="ambient-glow"></div>
<div class="ambient-glow-2"></div>
<div class="container">
<!-- Status Overlay for loading/error -->
<div id="statusOverlay" class="status-overlay">
<div id="spinner" class="spinner"></div>
<div id="errorMessage" class="error-message">
Unable to retrieve weather data.<br>Please check parameters or try again.
</div>
</div>
<!-- Card Header -->
<div class="header">
<div class="location-info">
<h1 id="locName">Location</h1>
<p>
<span id="formattedDate">Date</span>
<span class="coordinates" id="coords">Lat: --, Lon: --</span>
</p>
</div>
<div style="text-align: right;">
<span id="labelBadge" style="background: rgba(56,189,248,0.15); color: var(--accent-blue); padding: 6px 14px; border-radius: 50px; font-weight:600; font-size:0.9rem; border: 1px solid rgba(56,189,248,0.2)">METEO CARD</span>
</div>
</div>
<!-- Main Temperature Block -->
<div class="main-weather-block">
<div class="weather-visual">
<div id="largeIconContainer">
<!-- Dynamic Large Weather SVG Icon will insert here -->
</div>
<div class="temperature-display">
<span id="mainCondition" class="condition-text">Loading...</span>
<div class="temp-range">
<span class="temp-max">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"/></svg>
<span id="maxTemp">--</span>°C
</span>
<span style="opacity: 0.3">|</span>
<span class="temp-min">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"/></svg>
<span id="minTemp">--</span>°C
</span>
</div>
</div>
</div>
</div>
<!-- Hourly forecast panel -->
<div class="hourly-section">
<h2 class="hourly-title">Hourly Temperature Profile</h2>
<div class="hourly-scroll" id="hourlyContainer">
<!-- Hourly nodes populated dynamically -->
</div>
</div>
</div>
<script>
// Define Weather Code Mapping
const weatherCodes = {
0: { label: "Clear Sky", icon: "sunny" },
1: { label: "Mainly Clear", icon: "cloudy-sunny" },
2: { label: "Partly Cloudy", icon: "cloudy-sunny" },
3: { label: "Overcast", icon: "cloudy" },
45: { label: "Foggy", icon: "fog" },
48: { label: "Depositing Rime Fog", icon: "fog" },
51: { label: "Light Drizzle", icon: "rainy" },
53: { label: "Moderate Drizzle", icon: "rainy" },
55: { label: "Dense Drizzle", icon: "rainy" },
61: { label: "Slight Rain", icon: "rainy" },
63: { label: "Moderate Rain", icon: "rainy" },
65: { label: "Heavy Rain", icon: "rainy" },
71: { label: "Slight Snowfall", icon: "snowy" },
73: { label: "Moderate Snowfall", icon: "snowy" },
75: { label: "Heavy Snowfall", icon: "snowy" },
80: { label: "Slight Rain Showers", icon: "rainy" },
81: { label: "Moderate Rain Showers", icon: "rainy" },
82: { label: "Violent Rain Showers", icon: "rainy" },
95: { label: "Thunderstorm", icon: "thunderstorm" },
96: { label: "Thunderstorm with Hail", icon: "thunderstorm" },
99: { label: "Thunderstorm with Heavy Hail", icon: "thunderstorm" }
};
const SVGIcons = {
sunny: `<svg class="weather-icon-large" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg>`,
"cloudy-sunny": `<svg class="weather-icon-large" viewBox="0 0 24 24" fill="none" stroke="#38bdf8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v2M4.93 4.93l1.41 1.41M20 12h2M19.07 4.93l-1.41 1.41"/><path d="M15.3 14.8a5 5 0 1 1-6-6 5.5 5.5 0 0 1 10.5 2.5 5.5 5.5 0 0 1-4.5 3.5z" fill="rgba(56,189,248,0.2)"/></svg>`,
cloudy: `<svg class="weather-icon-large" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.5 19A3.5 3.5 0 0 0 18 12h-1.25a7 7 0 0 0-13.5 1.5A4 4 0 0 0 4 21h13.5a3.5 3.5 0 0 0 0-2z" fill="rgba(148,163,184,0.2)"/></svg>`,
fog: `<svg class="weather-icon-large" viewBox="0 0 24 24" fill="none" stroke="#cbd5e1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10h16M4 14h16M6 18h12M8 6h8"/></svg>`,
rainy: `<svg class="weather-icon-large" viewBox="0 0 24 24" fill="none" stroke="#0ea5e9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 13a4 4 0 0 0-8 0a4.5 4.5 0 0 0 4 4.5A4.5 4.5 0 0 0 16 13z"/><path d="M8 19l-1 2M12 20l-1 2M16 19l-1 2"/></svg>`,
snowy: `<svg class="weather-icon-large" viewBox="0 0 24 24" fill="none" stroke="#e2e8f0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5L7 19M5 5l14 14M2 12h20"/></svg>`,
thunderstorm: `<svg class="weather-icon-large" viewBox="0 0 24 24" fill="none" stroke="#a855f7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 11h-6l2-7H7l-2 9h6l-2 7z" fill="rgba(168,85,247,0.2)"/></svg>`,
unknown: `<svg class="weather-icon-large" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01"/></svg>`
};
async function initWeatherCard() {
const urlParams = new URLSearchParams(window.location.search);
const lat = parseFloat(urlParams.get('lat')) || 52.52;
const lon = parseFloat(urlParams.get('lon')) || 13.405;
const name = urlParams.get('name') || 'Berlin';
// Handle Date
const todayUtcString = new Date().toISOString().split('T')[0];
const dateStr = urlParams.get('date') || todayUtcString;
// Determine historical vs forecast API
const isHistorical = new Date(dateStr) < new Date(todayUtcString);
const baseUrl = isHistorical ? '/api/om/archive' : '/api/om/forecast';
// DOM Updates
document.getElementById('locName').innerText = name;
document.getElementById('formattedDate').innerText = new Date(dateStr).toLocaleDateString(undefined, {
weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC'
});
document.getElementById('coords').innerText = `Lat: ${lat.toFixed(3)}, Lon: ${lon.toFixed(3)}`;
// Build request parameters
const params = new URLSearchParams({
latitude: lat.toString(),
longitude: lon.toString(),
daily: 'temperature_2m_max,temperature_2m_min,weather_code',
hourly: 'temperature_2m',
timezone: 'UTC',
temperature_unit: 'celsius',
start_date: dateStr,
end_date: dateStr
});
try {
const response = await fetch(`${baseUrl}?${params.toString()}`);
if (!response.ok) throw new Error('API request failed');
const data = await response.json();
if (!data.daily || !data.hourly) throw new Error('Incomplete data received');
// Daily Metrics
const weatherCode = data.daily.weather_code[0];
const maxTemp = Math.round(data.daily.temperature_2m_max[0]);
const minTemp = Math.round(data.daily.temperature_2m_min[0]);
const condition = weatherCodes[weatherCode] || { label: "Unspecified", icon: "unknown" };
document.getElementById('mainCondition').innerText = condition.label;
document.getElementById('maxTemp').innerText = maxTemp;
document.getElementById('minTemp').innerText = minTemp;
document.getElementById('largeIconContainer').innerHTML = SVGIcons[condition.icon] || SVGIcons.unknown;
// Render hourly timeline
const hourlyContainer = document.getElementById('hourlyContainer');
hourlyContainer.innerHTML = '';
const hourlyTemps = data.hourly.temperature_2m;
const hours = data.hourly.time;
const tempsOnly = hourlyTemps.map(t => Math.round(t));
const maxHourTemp = Math.max(...tempsOnly);
const minHourTemp = Math.min(...tempsOnly);
const tempRange = (maxHourTemp - minHourTemp) || 1;
hours.forEach((time, index) => {
const temp = tempsOnly[index];
const hourDate = new Date(time);
const hourString = hourDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false, timeZone: 'UTC' });
// Height calculation for micro chart bar (min 15%, max 100%)
const heightPercent = 15 + ((temp - minHourTemp) / tempRange) * 85;
const card = document.createElement('div');
card.className = 'hourly-card';
card.innerHTML = `
<span class="hourly-time">${hourString}</span>
<div class="hourly-bar-container">
<div class="hourly-bar" style="height: ${heightPercent}%"></div>
</div>
<span class="hourly-temp">${temp}°</span>
`;
hourlyContainer.appendChild(card);
});
// Hide loader
document.getElementById('statusOverlay').classList.add('hidden');
} catch (err) {
console.error(err);
document.getElementById('spinner').style.display = 'none';
document.getElementById('errorMessage').style.display = 'block';
}
}
window.onload = initWeatherCard;
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 19,141 | html / css / js | 3,004 / 7,823 / 8,314 |
|---|---|---|---|
| dom nodes | 41 | dom depth | 9 |
| css rules | 35 | js present | yes |
| brightness | 36.2 | contrast | 14.0 |
| colorfulness | 19.4 | whitespace | 82.3% |
This slot's telemetry
| prompt tokens | 348 | completion tokens | 6,011 |
|---|---|---|---|
| total tokens | 6,359 | wall | 21.1 s |
| cost | — | request id | — |
config.json596 B
{
"N": 4,
"auth": {
"credential_ref": "WCB_GEMINI_KEY",
"method": "api-key"
},
"billing": "metered",
"config_id": "gemini-3.5-flash-eff-low--api--official--dev",
"effort": "low",
"family": "gemini",
"m": {
"min": 4,
"q": 4
},
"model_id": "gemini-3.5-flash",
"protocol": "api",
"served_model": "gemini-3.5-flash",
"telemetry": {
"completion_tokens": 42319,
"cost_usd": null,
"prompt_tokens": 2748,
"total_tokens": 45067,
"wall_ms": 151140
},
"transport": "google-gemini-developer-api-openai-compat",
"vendor_sanction_ref": null
}send-log4.7 KB
{
"N": 4,
"batch_id": "2026-07-20--official-gemini",
"config_id": "gemini-3.5-flash-eff-low--api--official--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-07-19T15:42:21.815440+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-19T15:42:00.723787+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-19T15:42:39.697693+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-19T15:42:24.941265+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-19T15:43:09.110684+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-19T15:42:42.839442+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-19T15:43:26.388219+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-19T15:43:12.231366+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-19T15:43:49.191759+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-19T15:43:29.520817+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-19T15:44:04.030172+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-19T15:43:52.219284+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-19T15:44:23.465939+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-19T15:44:07.085470+00:00"
}
],
"block_index": 3,
"model_reaching_attempt_index": 0,
"slot_index": 3,
"terminal_state": "valid",
"variant": "P-min"
},
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-07-19T15:44:53.534285+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-19T15:44:26.526271+00:00"
}
],
"block_index": 3,
"model_reaching_attempt_index": 0,
"slot_index": 3,
"terminal_state": "valid",
"variant": "P-q"
}
],
"retry_policy": {
"max_unreachable_retries": 5,
"rate_limit_backoff": {
"max_attempts": 4,
"max_total_ms": 60000
}
}
}