gemini-3.5-flash @ minimal · api
apiminimal
- config
- gemini-3.5-flash-eff-minimal--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
minimax-m2.7 · opencode0.72claude-opus-4-7 @low · kiro0.70claude-opus-4-8 @medium · kiro0.70gemini-3.5-flash @low · api0.70grok-4.5 @high · grok-cli0.69farthest
gpt-5.6-luna @high · kiro0.36gpt-5.5 @medium · codex-oauth0.38gpt-5.6-luna @medium · codex-oauth0.41gpt-5.6-luna @low · codex-oauth0.41gpt-5.6-luna @none · codex-oauth0.44within 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 tempmatchshown: 25
- 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">
<title>Weather Forecast Card</title>
<style>
:root {
--bg-gradient-day: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
--bg-gradient-night: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
--bg-gradient-cloudy: linear-gradient(135deg, #606c88 0%, #3f4c6b 100%);
--bg-gradient-rain: linear-gradient(135deg, #373b44 0%, #4286f4 100%);
--bg-gradient-snow: linear-gradient(135deg, #83a4d4 0%, #b6fbff 100%);
--card-bg: rgba(255, 255, 255, 0.12);
--card-border: rgba(255, 255, 255, 0.2);
--text-main: #ffffff;
--text-muted: rgba(255, 255, 255, 0.7);
--shadow-primary: 0 20px 50px rgba(0, 0, 0, 0.3);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body {
width: 1280px;
height: 800px;
background: #111;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Container holding the application canvas */
#app-container {
width: 1280px;
height: 800px;
position: relative;
background: var(--bg-gradient-day);
transition: background 1s ease;
display: flex;
justify-content: center;
align-items: center;
}
/* Floating ambient circles for depth */
.ambient-glow {
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
filter: blur(80px);
z-index: 1;
pointer-events: none;
}
.glow-1 { top: 50px; left: 100px; }
.glow-2 { bottom: 50px; right: 100px; }
/* Main Weather Card Frame */
.weather-card {
position: relative;
z-index: 10;
width: 1000px;
height: 600px;
background: var(--card-bg);
border: 1px solid var(--card-border);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 32px;
box-shadow: var(--shadow-primary);
overflow: hidden;
display: grid;
grid-template-columns: 420px 1fr;
color: var(--text-main);
}
/* Left Panel (Hero View) */
.panel-hero {
padding: 48px;
background: rgba(255, 255, 255, 0.04);
border-right: 1px solid var(--card-border);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.meta-container {
display: flex;
flex-direction: column;
gap: 6px;
}
.location-name {
font-size: 36px;
font-weight: 800;
letter-spacing: -0.5px;
text-transform: capitalize;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.location-coordinates {
font-size: 13px;
font-weight: 500;
color: var(--text-muted);
letter-spacing: 0.5px;
}
.date-display {
font-size: 16px;
font-weight: 600;
color: var(--text-muted);
margin-top: 4px;
}
/* Weather Icon and Main Temp */
.hero-weather {
margin: 40px 0;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.weather-illustration {
font-size: 84px;
line-height: 1;
margin-bottom: 20px;
filter: drop-shadow(0 10px 15px rgba(0,0,0,0.15));
}
.weather-desc {
font-size: 24px;
font-weight: 700;
margin-bottom: 8px;
letter-spacing: -0.2px;
}
.temp-range-pills {
display: flex;
gap: 10px;
}
.pill {
background: rgba(255, 255, 255, 0.15);
padding: 6px 14px;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.pill.max { background: rgba(255, 71, 87, 0.25); }
.pill.min { background: rgba(30, 144, 255, 0.25); }
.card-footer {
font-size: 12px;
color: var(--text-muted);
letter-spacing: 0.5px;
text-transform: uppercase;
}
/* Right Panel (Details & Hourly) */
.panel-details {
padding: 48px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.section-title {
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--text-muted);
margin-bottom: 24px;
}
/* Stats Grid */
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 36px;
}
.stat-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 18px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 6px;
}
.stat-label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
color: var(--text-muted);
letter-spacing: 0.5px;
}
.stat-value {
font-size: 22px;
font-weight: 700;
}
/* Hourly Slider/Scroller */
.hourly-scroller {
display: flex;
gap: 14px;
overflow-x: auto;
padding-bottom: 12px;
scroll-behavior: smooth;
}
/* Custom Scrollbar for hourly items */
.hourly-scroller::-webkit-scrollbar {
height: 6px;
}
.hourly-scroller::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
}
.hourly-scroller::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
}
.hourly-item {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 16px;
min-width: 78px;
padding: 16px 8px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hourly-item:hover {
background: rgba(255, 255, 255, 0.12);
transform: translateY(-4px);
border-color: rgba(255, 255, 255, 0.15);
}
.hourly-time {
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
}
.hourly-temp {
font-size: 18px;
font-weight: 700;
}
/* States (Loading and Error Screen) */
.state-screen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(20, 20, 24, 0.95);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 100;
transition: opacity 0.5s ease, visibility 0.5s;
}
.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* Elegant CSS Spinner */
.spinner {
width: 60px;
height: 60px;
border: 4px solid rgba(255, 255, 255, 0.1);
border-left-color: #00f2fe;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 24px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.state-title {
font-size: 24px;
font-weight: 700;
color: var(--text-main);
margin-bottom: 8px;
}
.state-desc {
font-size: 15px;
color: var(--text-muted);
text-align: center;
max-width: 400px;
line-height: 1.5;
}
.error-icon {
font-size: 54px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="app-container">
<div class="ambient-glow glow-1"></div>
<div class="ambient-glow glow-2"></div>
<!-- MAIN WEATHER CARD -->
<div class="weather-card">
<!-- LEFT PANEL -->
<div class="panel-hero">
<div class="meta-container">
<div id="loc-name" class="location-name">—</div>
<div id="loc-coords" class="location-coordinates">—</div>
<div id="date-label" class="date-display">—</div>
</div>
<div class="hero-weather">
<div id="weather-icon" class="weather-illustration">☀️</div>
<div id="weather-desc" class="weather-desc">Loading...</div>
<div class="temp-range-pills">
<div class="pill max">
<span>↑</span> <span id="temp-max">—</span>
</div>
<div class="pill min">
<span>↓</span> <span id="temp-min">—</span>
</div>
</div>
</div>
<div class="card-footer">
METEOROLOGICAL REPORT
</div>
</div>
<!-- RIGHT PANEL -->
<div class="panel-details">
<div>
<div class="section-title">Key Highlights</div>
<div class="stats-grid">
<div class="stat-card">
<span class="stat-label">Max Temperature</span>
<span id="stat-max" class="stat-value">—</span>
</div>
<div class="stat-card">
<span class="stat-label">Min Temperature</span>
<span id="stat-min" class="stat-value">—</span>
</div>
</div>
</div>
<div>
<div class="section-title">Hourly Progression</div>
<div id="hourly-container" class="hourly-scroller">
<!-- Dynamically populated hourly items -->
</div>
</div>
</div>
</div>
<!-- LOADING SCREEN -->
<div id="loading-screen" class="state-screen">
<div class="spinner"></div>
<div class="state-title">Fetching Atmosphere Data</div>
<div class="state-desc">Connecting to meteorological systems to build your layout...</div>
</div>
<!-- ERROR SCREEN -->
<div id="error-screen" class="state-screen hidden">
<div class="error-icon">⚠️</div>
<div class="state-title">Data Retrieval Failed</div>
<div id="error-message" class="state-desc">The weather archive or forecast API is currently unreachable. Please check the coordinates or parameters.</div>
</div>
</div>
<script>
// WMO Weather Interpretation Codes (WMO) map to readable descriptions, icons, and dynamic visual presets
const wmoInterpretation = {
0: { desc: "Clear Sky", icon: "☀️", theme: "day" },
1: { desc: "Mainly Clear", icon: "🌤️", theme: "day" },
2: { desc: "Partly Cloudy", icon: "⛅", theme: "cloudy" },
3: { desc: "Overcast", icon: "☁️", theme: "cloudy" },
45: { desc: "Foggy", icon: "🌫️", theme: "cloudy" },
48: { desc: "Depositing Rime Fog", icon: "🌫️", theme: "cloudy" },
51: { desc: "Light Drizzle", icon: "🌧️", theme: "rain" },
53: { desc: "Moderate Drizzle", icon: "🌧️", theme: "rain" },
55: { desc: "Dense Drizzle", icon: "🌧️", theme: "rain" },
56: { desc: "Light Freezing Drizzle", icon: "🌧️", theme: "rain" },
57: { desc: "Dense Freezing Drizzle", icon: "🌧️", theme: "rain" },
61: { desc: "Slight Rain", icon: "🌧️", theme: "rain" },
63: { desc: "Moderate Rain", icon: "🌧️", theme: "rain" },
65: { desc: "Heavy Rain", icon: "🌧️", theme: "rain" },
66: { desc: "Light Freezing Rain", icon: "🌧️", theme: "rain" },
67: { desc: "Heavy Freezing Rain", icon: "🌧️", theme: "rain" },
71: { desc: "Slight Snow Fall", icon: "❄️", theme: "snow" },
73: { desc: "Moderate Snow Fall", icon: "❄️", theme: "snow" },
75: { desc: "Heavy Snow Fall", icon: "❄️", theme: "snow" },
77: { desc: "Snow Grains", icon: "❄️", theme: "snow" },
80: { desc: "Slight Rain Showers", icon: "🌦️", theme: "rain" },
81: { desc: "Moderate Rain Showers", icon: "🌦️", theme: "rain" },
82: { desc: "Violent Rain Showers", icon: "🌧️", theme: "rain" },
85: { desc: "Slight Snow Showers", icon: "❄️", theme: "snow" },
86: { desc: "Heavy Snow Showers", icon: "❄️", theme: "snow" },
95: { desc: "Thunderstorm", icon: "⛈️", theme: "rain" },
96: { desc: "Thunderstorm with Hail", icon: "⛈️", theme: "rain" },
99: { desc: "Heavy Thunderstorm with Hail", icon: "⛈️", theme: "rain" }
};
// Helper functions for parameter checking and formatting
function getQueryParam(param, defaultValue) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(param) || defaultValue;
}
function getFormattedDate(dateStr) {
let d;
if (dateStr) {
d = new Date(dateStr + "T00:00:00Z");
} else {
d = new Date();
}
if (isNaN(d.getTime())) {
d = new Date();
}
return d;
}
function formatDateLabel(dateObj) {
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
return dateObj.toLocaleDateString('en-US', options);
}
function formatTimeLabel(isoString) {
const d = new Date(isoString);
return d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false, timeZone: 'UTC' });
}
function applyDynamicTheme(themeName) {
const container = document.getElementById('app-container');
if (themeName === 'cloudy') {
container.style.background = 'var(--bg-gradient-cloudy)';
} else if (themeName === 'rain') {
container.style.background = 'var(--bg-gradient-rain)';
} else if (themeName === 'snow') {
container.style.background = 'var(--bg-gradient-snow)';
} else {
container.style.background = 'var(--bg-gradient-day)';
}
}
async function fetchWeatherData() {
// 1. Gather coordinates & meta-data from search params
const lat = parseFloat(getQueryParam('lat', '52.52'));
const lon = parseFloat(getQueryParam('lon', '13.405'));
const name = getQueryParam('name', 'Berlin');
const rawDate = getQueryParam('date', null);
// Determine date instance
const dateObj = getFormattedDate(rawDate);
const formattedIsoDate = dateObj.toISOString().split('T')[0];
// Format static labels on screen
document.getElementById('loc-name').innerText = name;
document.getElementById('loc-coords').innerText = `LAT: ${lat.toFixed(3)} | LON: ${lon.toFixed(3)}`;
document.getElementById('date-label').innerText = formatDateLabel(dateObj);
// 2. Decide API endpoint based on whether the selected date is in the future or past
const today = new Date();
today.setUTCHours(0,0,0,0);
const compareDate = new Date(dateObj);
compareDate.setUTCHours(0,0,0,0);
const isPast = compareDate.getTime() < today.getTime();
const originPath = isPast ? '/api/om/archive' : '/api/om/forecast';
// Build precise query params
const queryParams = new URLSearchParams({
latitude: lat,
longitude: lon,
daily: 'temperature_2m_max,temperature_2m_min,weather_code',
hourly: 'temperature_2m',
timezone: 'UTC',
temperature_unit: 'celsius',
start_date: formattedIsoDate,
end_date: formattedIsoDate
});
const requestUrl = `${originPath}?${queryParams.toString()}`;
try {
const response = await fetch(requestUrl);
if (!response.ok) {
throw new Error(`Server returned HTTP code ${response.status}`);
}
const data = await response.json();
// Validate structure
if (!data.daily || !data.daily.weather_code || !data.daily.temperature_2m_max) {
throw new Error("Target weather parameters missing in the service response.");
}
// 3. Extract weather codes and stats
const weatherCode = data.daily.weather_code[0] ?? 0;
const maxTemp = Math.round(data.daily.temperature_2m_max[0]);
const minTemp = Math.round(data.daily.temperature_2m_min[0]);
const condition = wmoInterpretation[weatherCode] || { desc: "Clear", icon: "☀️", theme: "day" };
// Render values to Hero View & Stats
document.getElementById('weather-icon').innerText = condition.icon;
document.getElementById('weather-desc').innerText = condition.desc;
document.getElementById('temp-max').innerText = `${maxTemp}°C`;
document.getElementById('temp-min').innerText = `${minTemp}°C`;
document.getElementById('stat-max').innerText = `${maxTemp}°C`;
document.getElementById('stat-min').innerText = `${minTemp}°C`;
applyDynamicTheme(condition.theme);
// 4. Extract hourly timelines
const scroller = document.getElementById('hourly-container');
scroller.innerHTML = ''; // Reset container
if (data.hourly && data.hourly.time && data.hourly.temperature_2m) {
data.hourly.time.forEach((timeStr, idx) => {
const tempVal = Math.round(data.hourly.temperature_2m[idx]);
const formattedTime = formatTimeLabel(timeStr);
const hourlyItem = document.createElement('div');
hourlyItem.className = 'hourly-item';
hourlyItem.innerHTML = `
<div class="hourly-time">${formattedTime}</div>
<div class="hourly-temp">${tempVal}°C</div>
`;
scroller.appendChild(hourlyItem);
});
} else {
scroller.innerHTML = `<div style="color: var(--text-muted); font-size: 14px;">Hourly breakdown unavailable</div>`;
}
// Deactivate loading overlay
document.getElementById('loading-screen').classList.add('hidden');
} catch (err) {
console.error(err);
document.getElementById('error-message').innerText = `Failed to process weather request: ${err.message}`;
document.getElementById('error-screen').classList.remove('hidden');
document.getElementById('loading-screen').classList.add('hidden');
}
}
// Initialize display call on load
window.onload = fetchWeatherData;
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 18,274 | html / css / js | 2,709 / 7,588 / 7,977 |
|---|---|---|---|
| dom nodes | 48 | dom depth | 9 |
| css rules | 43 | js present | yes |
| brightness | 109.9 | contrast | 21.6 |
| colorfulness | 52.0 | whitespace | 39.6% |
This slot's telemetry
| prompt tokens | 348 | completion tokens | 5,969 |
|---|---|---|---|
| total tokens | 6,317 | wall | 18.1 s |
| cost | — | request id | — |
config.json604 B
{
"N": 4,
"auth": {
"credential_ref": "WCB_GEMINI_KEY",
"method": "api-key"
},
"billing": "metered",
"config_id": "gemini-3.5-flash-eff-minimal--api--official--dev",
"effort": "minimal",
"family": "gemini",
"m": {
"min": 4,
"q": 4
},
"model_id": "gemini-3.5-flash",
"protocol": "api",
"served_model": "gemini-3.5-flash",
"telemetry": {
"completion_tokens": 50877,
"cost_usd": null,
"prompt_tokens": 2748,
"total_tokens": 53625,
"wall_ms": 161031
},
"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-minimal--api--official--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-07-19T15:53:00.391069+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-19T15:52:38.406816+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:53:21.512891+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-19T15:53:03.395853+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:53:55.774808+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-19T15:53:25.015338+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:54:18.395491+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-19T15:53:59.081933+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:54:42.497611+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-19T15:54:21.435946+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:55:00.264123+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-19T15:54:45.965039+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:55:19.489502+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-19T15:55:03.399421+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:55:42.126107+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-19T15:55:22.738669+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
}
}
}