deepseek-v4-flash @ max · api

apimax
config
deepseek-v4-flash-eff-max--api--official--dev
batch
2026-07-19--unified
transport
deepseek-official-api
protocol
api · metered
served model
deepseek-v4-flash
captured
Jul 18, 2026, 11:54 AM · N=4
variant
live
slot 0 · P-q · sandboxed iframe
deepseek-v4-flash @max · api P-q slot 0 screenshot

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

within 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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather Card</title>
    <style>
        *,
        *::before,
        *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            height: 100%;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(145deg, #f0f4f8 0%, #d9e2ec 50%, #bcccdc 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #1a202c;
        }

        /* subtle moving gradient */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, 0.35) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 70%, rgba(99, 179, 237, 0.15) 0%, transparent 50%);
            pointer-events: none;
            z-index: 0;
            animation: breathe 12s ease-in-out infinite alternate;
        }

        @keyframes breathe {
            0% {
                opacity: 0.6;
            }
            100% {
                opacity: 1;
            }
        }

        .weather-card {
            position: relative;
            z-index: 1;
            width: 720px;
            max-width: 92vw;
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border-radius: 40px;
            padding: 44px 48px 40px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.5);
            transition: all 0.2s ease;
        }

        /* header row */
        .card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .location-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .location-icon {
            font-size: 28px;
            line-height: 1;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
        }

        .location-name {
            font-size: 26px;
            font-weight: 600;
            letter-spacing: -0.01em;
            color: #0b1e33;
        }

        .date-display {
            font-size: 18px;
            font-weight: 450;
            color: #4a5b6e;
            letter-spacing: 0.01em;
            background: rgba(203, 213, 225, 0.35);
            padding: 6px 18px;
            border-radius: 100px;
            backdrop-filter: blur(4px);
            border: 1px solid rgba(255, 255, 255, 0.4);
        }

        /* main weather area */
        .weather-main {
            display: flex;
            align-items: center;
            gap: 20px;
            margin: 8px 0 18px 0;
        }

        .weather-icon-display {
            font-size: 80px;
            line-height: 1;
            flex-shrink: 0;
            width: 100px;
            text-align: center;
            filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.04));
        }

        .weather-info {
            flex: 1;
        }

        .weather-condition-text {
            font-size: 22px;
            font-weight: 500;
            color: #1e3a5f;
            margin-bottom: 2px;
            letter-spacing: -0.01em;
        }

        .weather-description-sub {
            font-size: 15px;
            color: #5f738c;
            font-weight: 400;
        }

        /* temps */
        .temps-row {
            display: flex;
            align-items: center;
            gap: 32px;
            margin: 20px 0 8px 0;
            padding: 16px 20px;
            background: rgba(241, 245, 249, 0.6);
            border-radius: 24px;
            border: 1px solid rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(4px);
        }

        .temp-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .temp-label {
            font-size: 13px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: #6a7f9a;
            margin-bottom: 2px;
        }

        .temp-value {
            font-size: 42px;
            font-weight: 300;
            letter-spacing: -0.02em;
            line-height: 1.1;
        }

        .temp-value.max {
            font-weight: 350;
            color: #d55c3a;
        }

        .temp-value.min {
            font-weight: 350;
            color: #3b7bb7;
        }

        .temp-unit {
            font-size: 24px;
            font-weight: 300;
            opacity: 0.7;
            margin-left: 2px;
        }

        .temp-divider {
            width: 1px;
            height: 50px;
            background: linear-gradient(to bottom, transparent, rgba(148, 163, 184, 0.5), transparent);
            flex-shrink: 0;
        }

        .temp-spacer {
            flex: 1;
        }

        /* feels like / extra */
        .extra-meta {
            display: flex;
            gap: 24px;
            margin-top: 4px;
            font-size: 14px;
            color: #5a6f8a;
            padding: 0 4px;
        }

        .extra-meta span {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .extra-meta .emoji {
            font-size: 16px;
        }

        /* hourly section */
        .hourly-section {
            margin-top: 28px;
        }

        .hourly-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14px;
        }

        .hourly-title {
            font-size: 16px;
            font-weight: 600;
            color: #1e3a5f;
            letter-spacing: 0.02em;
        }

        .hourly-range-label {
            font-size: 13px;
            color: #6a7f9a;
            background: rgba(203, 213, 225, 0.3);
            padding: 2px 14px;
            border-radius: 100px;
        }

        .chart-wrap {
            position: relative;
            background: rgba(255, 255, 255, 0.4);
            border-radius: 20px;
            padding: 20px 20px 12px 20px;
            border: 1px solid rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(4px);
            overflow: hidden;
        }

        .chart-inner {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            height: 120px;
            gap: 2px;
        }

        .bar-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
            justify-content: flex-end;
            min-width: 0;
            position: relative;
        }

        .bar {
            width: 100%;
            min-height: 4px;
            border-radius: 4px 4px 0 0;
            transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            background: linear-gradient(to top, #3b82f6, #ef4444);
            background-size: 100% 100%;
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-bottom: none;
        }

        .bar-label {
            font-size: 11px;
            font-weight: 450;
            color: #4a5b6e;
            margin-top: 6px;
            letter-spacing: -0.01em;
            white-space: nowrap;
            text-align: center;
            width: 100%;
        }

        .bar-temp {
            font-size: 9px;
            font-weight: 500;
            color: #2d4059;
            opacity: 0.75;
            letter-spacing: -0.01em;
            margin-bottom: 2px;
            text-align: center;
            width: 100%;
        }

        /* error state */
        .error-state {
            display: none;
            text-align: center;
            padding: 40px 20px;
            color: #7f8c9b;
        }

        .error-state .error-icon {
            font-size: 56px;
            margin-bottom: 12px;
            opacity: 0.5;
        }

        .error-state .error-title {
            font-size: 22px;
            font-weight: 500;
            color: #2d4059;
            margin-bottom: 6px;
        }

        .error-state .error-detail {
            font-size: 15px;
            color: #7f8c9b;
            max-width: 380px;
            margin: 0 auto;
            line-height: 1.5;
        }

        .weather-card.loading .card-content {
            opacity: 0.3;
            pointer-events: none;
        }

        .weather-card.loading::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -20px;
            margin-left: -20px;
            width: 40px;
            height: 40px;
            border: 4px solid rgba(59, 130, 246, 0.1);
            border-top-color: #3b82f6;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            z-index: 5;
        }

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

        .weather-card.error .card-content {
            display: none;
        }

        .weather-card.error .error-state {
            display: block;
        }

        /* small details */
        .separator {
            border: none;
            height: 1px;
            background: linear-gradient(to right, transparent, rgba(148, 163, 184, 0.2), transparent);
            margin: 16px 0 12px 0;
        }

        /* responsive adjustments */
        @media (max-width: 800px) {
            .weather-card {
                padding: 28px 24px 28px;
                border-radius: 28px;
            }
            .location-name {
                font-size: 20px;
            }
            .weather-icon-display {
                font-size: 56px;
                width: 72px;
            }
            .temp-value {
                font-size: 32px;
            }
            .temps-row {
                gap: 16px;
                padding: 12px 16px;
            }
            .date-display {
                font-size: 14px;
                padding: 4px 14px;
            }
            .weather-condition-text {
                font-size: 18px;
            }
            .chart-inner {
                height: 90px;
            }
            .bar-label {
                font-size: 9px;
            }
            .bar-temp {
                font-size: 8px;
            }
        }

        @media (max-width: 500px) {
            .weather-card {
                padding: 20px 16px 20px;
                border-radius: 20px;
            }
            .card-header {
                flex-wrap: wrap;
                gap: 8px;
            }
            .location-name {
                font-size: 17px;
            }
            .date-display {
                font-size: 12px;
                padding: 3px 10px;
            }
            .weather-icon-display {
                font-size: 40px;
                width: 52px;
            }
            .weather-main {
                gap: 12px;
            }
            .temp-value {
                font-size: 26px;
            }
            .temps-row {
                padding: 10px 12px;
                gap: 10px;
                flex-wrap: wrap;
            }
            .temp-divider {
                display: none;
            }
            .chart-inner {
                height: 70px;
                gap: 1px;
            }
            .chart-wrap {
                padding: 12px 8px 8px;
            }
            .bar-label {
                font-size: 8px;
                margin-top: 4px;
            }
            .bar-temp {
                font-size: 7px;
                margin-bottom: 1px;
            }
        }

        /* utility for loading state */
        .hidden {
            display: none !important;
        }
    </style>
</head>
<body>

    <div class="weather-card loading" id="weatherCard">
        <div class="card-content">
            <!-- header -->
            <div class="card-header">
                <div class="location-group">
                    <span class="location-icon" id="locationIcon">📍</span>
                    <span class="location-name" id="locationName">Berlin</span>
                </div>
                <span class="date-display" id="dateDisplay">Jan 15, 2025</span>
            </div>

            <!-- main weather -->
            <div class="weather-main">
                <div class="weather-icon-display" id="weatherIcon">☀️</div>
                <div class="weather-info">
                    <div class="weather-condition-text" id="conditionText">Clear Sky</div>
                    <div class="weather-description-sub" id="conditionSub">High · Low</div>
                </div>
            </div>

            <!-- temps -->
            <div class="temps-row">
                <div class="temp-item">
                    <span class="temp-label">Max</span>
                    <span class="temp-value max" id="maxTemp">–<span class="temp-unit">°C</span></span>
                </div>
                <div class="temp-divider"></div>
                <div class="temp-item">
                    <span class="temp-label">Min</span>
                    <span class="temp-value min" id="minTemp">–<span class="temp-unit">°C</span></span>
                </div>
                <div class="temp-spacer"></div>
                <div class="extra-meta" id="extraMeta">
                    <span><span class="emoji">🌡️</span> Feels like <strong id="feelsLike">–</strong>°C</span>
                    <span><span class="emoji">💧</span> Humidity <strong id="humidity">–</strong>%</span>
                </div>
            </div>

            <!-- hourly -->
            <div class="hourly-section">
                <div class="hourly-header">
                    <span class="hourly-title">⏱ Hourly Temperatures</span>
                    <span class="hourly-range-label" id="rangeLabel">00:00 – 23:00</span>
                </div>
                <div class="chart-wrap">
                    <div class="chart-inner" id="hourlyChart"></div>
                </div>
            </div>
        </div>

        <!-- error state -->
        <div class="error-state" id="errorState">
            <div class="error-icon">🌧️</div>
            <div class="error-title">Weather data unavailable</div>
            <div class="error-detail" id="errorDetail">Could not load forecast for this location and date. Please check the parameters and try again.</div>
        </div>
    </div>

    <script>
        (function() {
            'use strict';

            // ---------- DOM refs ----------
            const card = document.getElementById('weatherCard');
            const locationNameEl = document.getElementById('locationName');
            const locationIconEl = document.getElementById('locationIcon');
            const dateDisplayEl = document.getElementById('dateDisplay');
            const weatherIconEl = document.getElementById('weatherIcon');
            const conditionTextEl = document.getElementById('conditionText');
            const conditionSubEl = document.getElementById('conditionSub');
            const maxTempEl = document.getElementById('maxTemp');
            const minTempEl = document.getElementById('minTemp');
            const feelsLikeEl = document.getElementById('feelsLike');
            const humidityEl = document.getElementById('humidity');
            const hourlyChartEl = document.getElementById('hourlyChart');
            const rangeLabelEl = document.getElementById('rangeLabel');
            const errorStateEl = document.getElementById('errorState');
            const errorDetailEl = document.getElementById('errorDetail');

            // ---------- helpers ----------
            function getParam(name, fallback) {
                const params = new URLSearchParams(window.location.search);
                const val = params.get(name);
                return val !== null ? val : fallback;
            }

            function pad(n) {
                return String(n).padStart(2, '0');
            }

            function formatDate(iso) {
                const d = new Date(iso + 'T00:00:00Z');
                const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                return months[d.getUTCMonth()] + ' ' + d.getUTCDate() + ', ' + d.getUTCFullYear();
            }

            function todayUTC() {
                const d = new Date();
                return d.getUTCFullYear() + '-' + pad(d.getUTCMonth() + 1) + '-' + pad(d.getUTCDate());
            }

            function dateFromISO(iso) {
                return new Date(iso + 'T00:00:00Z');
            }

            function isPast(iso) {
                const today = dateFromISO(todayUTC());
                const target = dateFromISO(iso);
                return target < today;
            }

            // ---------- weather code mapping ----------
            const weatherCodes = {
                0: { icon: '☀️', label: 'Clear Sky' },
                1: { icon: '🌤️', label: 'Mainly Clear' },
                2: { icon: '⛅', label: 'Partly Cloudy' },
                3: { icon: '☁️', label: 'Overcast' },
                45: { icon: '🌫️', label: 'Foggy' },
                48: { icon: '🌫️', label: 'Depositing Rime Fog' },
                51: { icon: '🌦️', label: 'Light Drizzle' },
                53: { icon: '🌦️', label: 'Moderate Drizzle' },
                55: { icon: '🌦️', label: 'Dense Drizzle' },
                56: { icon: '🌧️❄️', label: 'Light Freezing Drizzle' },
                57: { icon: '🌧️❄️', label: 'Dense Freezing Drizzle' },
                61: { icon: '🌧️', label: 'Slight Rain' },
                63: { icon: '🌧️', label: 'Moderate Rain' },
                65: { icon: '🌧️', label: 'Heavy Rain' },
                66: { icon: '🌧️❄️', label: 'Light Freezing Rain' },
                67: { icon: '🌧️❄️', label: 'Heavy Freezing Rain' },
                71: { icon: '🌨️', label: 'Slight Snow' },
                73: { icon: '🌨️', label: 'Moderate Snow' },
                75: { icon: '🌨️', label: 'Heavy Snow' },
                77: { icon: '❄️', label: 'Snow Grains' },
                80: { icon: '🌦️', label: 'Slight Rain Showers' },
                81: { icon: '🌦️', label: 'Moderate Rain Showers' },
                82: { icon: '🌦️', label: 'Violent Rain Showers' },
                85: { icon: '🌨️', label: 'Slight Snow Showers' },
                86: { icon: '🌨️', label: 'Heavy Snow Showers' },
                95: { icon: '⛈️', label: 'Thunderstorm' },
                96: { icon: '⛈️🌨️', label: 'Thunderstorm with Hail' },
                99: { icon: '⛈️🌨️', label: 'Thunderstorm with Heavy Hail' },
            };

            function getWeather(code) {
                return weatherCodes[code] || { icon: '🌤️', label: 'Partly Cloudy' };
            }

            // ---------- main ----------
            async function init() {
                const lat = getParam('lat', '52.52');
                const lon = getParam('lon', '13.405');
                const name = getParam('name', 'Berlin');
                const date = getParam('date', todayUTC());

                // update UI immediately with known info
                locationNameEl.textContent = name;
                dateDisplayEl.textContent = formatDate(date);

                // validate date format
                if (!/^\d{4}-\d{2}-\d{2}$/.test(date)) {
                    showError('Invalid date format. Use YYYY-MM-DD.');
                    return;
                }

                const dateObj = dateFromISO(date);
                if (isNaN(dateObj.getTime())) {
                    showError('Invalid date value.');
                    return;
                }

                // choose API
                const past = isPast(date);
                const apiPath = past ? '/api/om/archive' : '/api/om/forecast';

                const params = 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: date,
                    end_date: date,
                });

                const url = apiPath + '?' + params.toString();

                try {
                    card.classList.add('loading');
                    card.classList.remove('error');

                    const resp = await fetch(url);

                    if (!resp.ok) {
                        throw new Error('Server returned ' + resp.status + ' ' + resp.statusText);
                    }

                    const data = await resp.json();

                    // validate response
                    if (!data.daily || !data.daily.time || data.daily.time.length === 0) {
                        throw new Error('No daily data available for this date.');
                    }

                    const dailyIdx = data.daily.time.indexOf(date);
                    if (dailyIdx === -1) {
                        throw new Error('Requested date not found in API response.');
                    }

                    const maxTemp = data.daily.temperature_2m_max[dailyIdx];
                    const minTemp = data.daily.temperature_2m_min[dailyIdx];
                    const weatherCode = data.daily.weather_code ? data.daily.weather_code[dailyIdx] : 0;

                    const weather = getWeather(weatherCode);

                    // hourly data
                    let hourlyTimes = data.hourly.time || [];
                    let hourlyTemps = data.hourly.temperature_2m || [];

                    // filter to the requested date
                    const filteredIndices = [];
                    const filteredHours = [];
                    const filteredTemps = [];
                    for (let i = 0; i < hourlyTimes.length; i++) {
                        const timeStr = hourlyTimes[i];
                        // time format: "2025-01-15T00:00" or "2025-01-15T00:00"
                        if (timeStr.startsWith(date + 'T') || timeStr.startsWith(date + ' ')) {
                            filteredIndices.push(i);
                            // extract hour
                            const hourMatch = timeStr.match(/T(\d{2})/);
                            const hour = hourMatch ? parseInt(hourMatch[1], 10) : filteredIndices.length - 1;
                            filteredHours.push(hour);
                            filteredTemps.push(hourlyTemps[i]);
                        }
                    }

                    // if no hourly filtered, try using all data or show empty
                    if (filteredHours.length === 0 && hourlyTimes.length > 0) {
                        // maybe the API returned data without time filtering correctly; try to use first 24
                        for (let i = 0; i < Math.min(24, hourlyTemps.length); i++) {
                            filteredHours.push(i);
                            filteredTemps.push(hourlyTemps[i]);
                        }
                    }

                    // ---- render UI ----
                    // daily
                    maxTempEl.innerHTML = (maxTemp !== null && maxTemp !== undefined ? Math.round(maxTemp) : '–') +
                        '<span class="temp-unit">°C</span>';
                    minTempEl.innerHTML = (minTemp !== null && minTemp !== undefined ? Math.round(minTemp) : '–') +
                        '<span class="temp-unit">°C</span>';

                    weatherIconEl.textContent = weather.icon;
                    conditionTextEl.textContent = weather.label;

                    // feels like — approximate using hourly average if hourly exists, else use max
                    let avgTemp = null;
                    if (filteredTemps.length > 0) {
                        const sum = filteredTemps.reduce((a, b) => a + b, 0);
                        avgTemp = sum / filteredTemps.length;
                    } else if (maxTemp !== null && minTemp !== null) {
                        avgTemp = (maxTemp + minTemp) / 2;
                    }
                    feelsLikeEl.textContent = avgTemp !== null ? Math.round(avgTemp) : '–';

                    // humidity — not available from API (would need additional param), show placeholder
                    humidityEl.textContent = '–';

                    // condition sub
                    if (maxTemp !== null && minTemp !== null) {
                        conditionSubEl.textContent = 'High ' + Math.round(maxTemp) + '° · Low ' + Math.round(minTemp) +
                        '°C';
                    } else {
                        conditionSubEl.textContent = weather.label;
                    }

                    // hourly chart
                    renderHourlyChart(filteredHours, filteredTemps);

                    if (filteredHours.length > 0) {
                        const firstH = filteredHours[0];
                        const lastH = filteredHours[filteredHours.length - 1];
                        rangeLabelEl.textContent = pad(firstH) + ':00 – ' + pad(lastH) + ':00';
                    } else {
                        rangeLabelEl.textContent = '–– : ––';
                    }

                    card.classList.remove('loading');
                    card.classList.remove('error');

                } catch (err) {
                    console.error('Weather fetch error:', err);
                    showError(err.message || 'Failed to load weather data. Please try again later.');
                }
            }

            // ---------- render hourly bar chart ----------
            function renderHourlyChart(hours, temps) {
                hourlyChartEl.innerHTML = '';

                if (!hours || hours.length === 0) {
                    // show placeholder message
                    const placeholder = document.createElement('div');
                    placeholder.style.cssText =
                        'width:100%;text-align:center;color:#8a9aa8;font-size:14px;padding:24px 0;';
                    placeholder.textContent = 'No hourly data available for this date.';
                    hourlyChartEl.appendChild(placeholder);
                    return;
                }

                // find min/max for scaling
                let minT = Infinity;
                let maxT = -Infinity;
                for (const t of temps) {
                    if (t !== null && t !== undefined && !isNaN(t)) {
                        if (t < minT) minT = t;
                        if (t > maxT) maxT = t;
                    }
                }

                if (minT === Infinity) {
                    minT = 0;
                    maxT = 30;
                }

                // add some padding to range for visual
                const range = maxT - minT || 10;
                const paddedMin = minT - range * 0.12;
                const paddedMax = maxT + range * 0.12;
                const paddedRange = paddedMax - paddedMin || 10;

                const barCount = hours.length;
                const maxBarHeight = 120 - 4; // container height minus padding

                for (let i = 0; i < barCount; i++) {
                    const hour = hours[i];
                    const temp = temps[i];

                    const container = document.createElement('div');
                    container.className = 'bar-container';

                    const bar = document.createElement('div');
                    bar.className = 'bar';

                    let heightPercent = 0;
                    if (temp !== null && temp !== undefined && !isNaN(temp)) {
                        heightPercent = ((temp - paddedMin) / paddedRange) * 100;
                        heightPercent = Math.max(4, Math.min(100, heightPercent));
                    } else {
                        heightPercent = 4;
                    }

                    bar.style.height = heightPercent + '%';

                    // color based on temperature relative to range (blue → red)
                    const ratio = (temp - paddedMin) / paddedRange;
                    const clamped = Math.max(0, Math.min(1, ratio));
                    const r = Math.round(59 + (239 - 59) * clamped);
                    const g = Math.round(130 - 80 * clamped);
                    const b = Math.round(246 - 180 * clamped);
                    const mixedColor = `rgb(${r}, ${g}, ${b})`;
                    bar.style.background = `linear-gradient(to top, ${mixedColor}, ${mixedColor})`;

                    // temp label above bar
                    const tempLabel = document.createElement('div');
                    tempLabel.className = 'bar-temp';
                    tempLabel.textContent = (temp !== null && temp !== undefined && !isNaN(temp)) ? Math.round(temp) +
                        '°' : '–';

                    // hour label below
                    const label = document.createElement('div');
                    label.className = 'bar-label';
                    label.textContent = pad(hour) + 'h';

                    container.appendChild(tempLabel);
                    container.appendChild(bar);
                    container.appendChild(label);
                    hourlyChartEl.appendChild(container);
                }
            }

            // ---------- error ----------
            function showError(msg) {
                card.classList.remove('loading');
                card.classList.add('error');
                errorDetailEl.textContent = msg || 'Could not load weather data. Please check parameters and try again.';
            }

            // ---------- go ----------
            init();
        })();
    </script>

</body>
</html>

L1 — cheap deterministic descriptors

bytes total30,680html / css / js2,947 / 12,186 / 15,547
dom nodes48dom depth8
css rules76js presentyes
brightness227.4contrast26.0
colorfulness27.5whitespace85.4%

This slot's telemetry

prompt tokens400completion tokens12,142
total tokens12,542wall82.9 s
costrequest id
config.json585 B
{
  "N": 4,
  "auth": {
    "credential_ref": "WCB_DEEPSEEK_KEY",
    "method": "api-key"
  },
  "billing": "metered",
  "config_id": "deepseek-v4-flash-eff-max--api--official--dev",
  "effort": "max",
  "family": "deepseek",
  "m": {
    "min": 4,
    "q": 4
  },
  "model_id": "deepseek-v4-flash",
  "protocol": "api",
  "served_model": "deepseek-v4-flash",
  "telemetry": {
    "completion_tokens": 106607,
    "cost_usd": null,
    "prompt_tokens": 3168,
    "total_tokens": 109775,
    "wall_ms": 815457
  },
  "transport": "deepseek-official-api",
  "vendor_sanction_ref": null
}
send-log4.7 KB
{
  "N": 4,
  "batch_id": "2026-07-19--official-deepseek",
  "config_id": "deepseek-v4-flash-eff-max--api--official--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-19T07:29:45.269439+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-19T07:28:22.383142+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-19T07:30:43.258635+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-19T07:29:49.397583+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-19T07:32:02.410812+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-19T07:30:46.939439+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-19T07:34:15.495421+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-19T07:32:06.674542+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-19T07:36:19.582815+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-19T07:34:19.472658+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-19T07:38:06.983477+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-19T07:36:24.466673+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-19T07:39:40.199466+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-19T07:38:10.392040+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-19T07:42:26.046956+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-19T07:39:44.054577+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
    }
  }
}