deepseek-v4-pro-0812 @ minimal · api

apiminimal

config: deepseek-v4-pro-0812-eff-minimal--api--official--dev
batch: 2026-07-19--unified
transport: deepseek-official-api
protocol: api · metered
served model: deepseek-v4-pro
captured: Jul 18, 2026, 11:54 AM · N=4

variant

live

slot 0 · P-q · sandboxed iframe

deepseek-v4-pro-0812 @minimal · api P-q slot 0 screenshot

delivered in a markdown fence — the model wrapped its HTML in a code fence; extraction stripped it. Recorded here for traceability.

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 neighborsNo similarity data for this session — this batch has no computed pairs.

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 {
            --card-bg: rgba(255, 255, 255, 0.94);
            --card-shadow: 0 25px 60px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.15);
            --text-primary: #1a1a2e;
            --text-secondary: #5a5a7a;
            --text-tertiary: #8a8aaa;
            --accent-color: #3b82f6;
            --divider-color: #e8e8f0;
            --radius-large: 28px;
            --radius-medium: 16px;
            --radius-small: 10px;
            --transition-speed: 0.5s;
            --bg-gradient: linear-gradient(135deg, #0f0c29 0%, #302b63 45%, #24243e 100%);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            width: 1280px;
            height: 800px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Segoe UI', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
            background: var(--bg-gradient);
            transition: background var(--transition-speed) ease;
            overflow: hidden;
            position: relative;
        }

        body::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.04) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 80%, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
            pointer-events: none;
            z-index: 0;
        }

        body::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.2) 100%);
            pointer-events: none;
            z-index: 0;
        }

        .weather-card {
            position: relative;
            z-index: 1;
            width: 1000px;
            background: var(--card-bg);
            border-radius: var(--radius-large);
            box-shadow: var(--card-shadow);
            padding: 40px 48px 36px;
            animation: cardIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
            backdrop-filter: blur(2px);
            border: 1px solid rgba(255, 255, 255, 0.5);
        }

        @keyframes cardIn {
            0% {
                opacity: 0;
                transform: translateY(30px) scale(0.97);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .card-header {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            margin-bottom: 28px;
            flex-wrap: wrap;
            gap: 12px;
        }

        .location {
            font-size: 36px;
            font-weight: 700;
            color: var(--text-primary);
            letter-spacing: -0.5px;
            line-height: 1.1;
            transition: color 0.3s ease;
        }

        .location-icon {
            display: inline-block;
            margin-right: 8px;
            font-size: 28px;
            vertical-align: middle;
            animation: none;
        }

        .date-display {
            font-size: 17px;
            font-weight: 500;
            color: var(--text-secondary);
            letter-spacing: 0.2px;
            background: rgba(0, 0, 0, 0.04);
            padding: 8px 18px;
            border-radius: 50px;
            transition: background 0.3s ease, color 0.3s ease;
        }

        .weather-summary {
            display: flex;
            align-items: center;
            gap: 32px;
            padding: 18px 0 24px;
            min-height: 120px;
        }

        .weather-icon-large {
            font-size: 72px;
            line-height: 1;
            filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.12));
            transition: transform 0.4s ease;
            flex-shrink: 0;
            animation: iconFloat 3s ease-in-out infinite;
        }

        @keyframes iconFloat {
            0%,
            100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-6px);
            }
        }

        .temp-info {
            flex: 1;
        }

        .temp-main-row {
            display: flex;
            align-items: baseline;
            gap: 18px;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }

        .temp-max {
            font-size: 56px;
            font-weight: 800;
            color: var(--text-primary);
            letter-spacing: -1.5px;
            line-height: 1;
            transition: color 0.3s ease;
        }

        .temp-separator {
            font-size: 28px;
            font-weight: 600;
            color: var(--text-tertiary);
        }

        .temp-min {
            font-size: 38px;
            font-weight: 600;
            color: var(--text-secondary);
            letter-spacing: -1px;
            line-height: 1;
            transition: color 0.3s ease;
        }

        .temp-degree {
            font-size: 0.55em;
            font-weight: 500;
            vertical-align: super;
            margin-left: 1px;
        }

        .condition-text {
            font-size: 20px;
            font-weight: 500;
            color: var(--text-secondary);
            letter-spacing: 0.1px;
            transition: color 0.3s ease;
        }

        .condition-badge {
            display: inline-block;
            background: var(--accent-color);
            color: #fff;
            padding: 5px 14px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 0.3px;
            margin-left: 10px;
            transition: background 0.4s ease, transform 0.3s ease;
            text-transform: capitalize;
        }

        .divider {
            height: 1px;
            background: linear-gradient(to right, var(--divider-color), rgba(200, 200, 220, 0.4), var(--divider-color));
            margin: 10px 0 22px;
            border: none;
        }

        .hourly-section-title {
            font-size: 14px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--text-tertiary);
            margin-bottom: 16px;
            transition: color 0.3s ease;
        }

        .hourly-strip {
            display: flex;
            gap: 2px;
            align-items: flex-end;
            justify-content: space-between;
            min-height: 110px;
            padding: 0 2px;
        }

        .hour-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            flex: 1;
            min-width: 0;
            cursor: default;
            transition: transform 0.25s ease, opacity 0.25s ease;
        }

        .hour-item:hover {
            transform: translateY(-4px);
        }

        .hour-temp {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
            letter-spacing: -0.3px;
            transition: color 0.3s ease;
            white-space: nowrap;
        }

        .hour-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--accent-color);
            transition: background 0.4s ease, box-shadow 0.3s ease, transform 0.3s ease;
            flex-shrink: 0;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        }

        .hour-item:hover .hour-dot {
            transform: scale(1.6);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        }

        .hour-label {
            font-size: 11px;
            font-weight: 500;
            color: var(--text-tertiary);
            letter-spacing: 0.2px;
            transition: color 0.3s ease;
            white-space: nowrap;
        }

        .hour-bar-container {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }

        .hour-bar-track {
            width: 100%;
            height: 40px;
            position: relative;
            display: flex;
            align-items: flex-end;
            justify-content: center;
        }

        .hour-bar {
            width: 4px;
            border-radius: 4px;
            background: var(--accent-color);
            transition: background 0.4s ease, height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
            min-height: 2px;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
        }

        .error-state {
            display: none;
            text-align: center;
            padding: 40px 30px;
            font-size: 18px;
            color: var(--text-secondary);
            animation: cardIn 0.5s ease forwards;
        }

        .error-state .error-icon {
            font-size: 48px;
            margin-bottom: 16px;
            display: block;
        }

        .error-state .error-title {
            font-size: 24px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 8px;
        }

        .error-state .error-detail {
            font-size: 15px;
            color: var(--text-tertiary);
            line-height: 1.6;
        }

        .loading-state {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 60px 30px;
            gap: 16px;
            font-size: 18px;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .spinner {
            width: 28px;
            height: 28px;
            border: 3px solid var(--divider-color);
            border-top-color: var(--accent-color);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

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

        /* Responsive adjustments for slightly smaller viewports */
        @media (max-width: 1100px) {
            .weather-card {
                width: 90%;
                padding: 30px 30px 28px;
            }
            .weather-icon-large {
                font-size: 56px;
            }
            .temp-max {
                font-size: 44px;
            }
            .temp-min {
                font-size: 30px;
            }
        }
    </style>
</head>
<body>

    <div class="weather-card" id="weatherCard">
        <!-- Loading state -->
        <div class="loading-state" id="loadingState">
            <div class="spinner"></div>
            <span>Loading weather data…</span>
        </div>

        <!-- Error state -->
        <div class="error-state" id="errorState">
            <span class="error-icon">😕</span>
            <div class="error-title">Unable to load weather data</div>
            <div class="error-detail">Please check the location and date, then try again.</div>
        </div>

        <!-- Main content -->
        <div id="mainContent" style="display: none;">
            <div class="card-header">
                <h1 class="location" id="locationDisplay">
                    <span class="location-icon">📍</span>
                    <span id="locationName">Berlin</span>
                </h1>
                <p class="date-display" id="dateDisplay">January 1, 2024</p>
            </div>

            <div class="weather-summary">
                <div class="weather-icon-large" id="weatherIconLarge">☀️</div>
                <div class="temp-info">
                    <div class="temp-main-row">
                        <span class="temp-max" id="tempMax">--°C</span>
                        <span class="temp-separator">/</span>
                        <span class="temp-min" id="tempMin">--°C</span>
                    </div>
                    <div>
                        <span class="condition-text" id="conditionText">Clear sky</span>
                        <span class="condition-badge" id="conditionBadge">Clear</span>
                    </div>
                </div>
            </div>

            <hr class="divider">

            <p class="hourly-section-title">Hourly Temperatures (UTC)</p>
            <div class="hourly-strip" id="hourlyStrip">
                <!-- Dynamically populated -->
            </div>
        </div>
    </div>

    <script>
        (function() {
            // ─── URL Parameter Parsing ───────────────────────────────────────────
            const params = new URLSearchParams(window.location.search);
            const lat = parseFloat(params.get('lat')) || 52.52;
            const lon = parseFloat(params.get('lon')) || 13.405;
            const locationName = params.get('name') || 'Berlin';
            const todayUTC = new Date().toISOString().split('T')[0];
            const requestedDate = params.get('date') || todayUTC;

            // ─── DOM References ──────────────────────────────────────────────────
            const card = document.getElementById('weatherCard');
            const loadingState = document.getElementById('loadingState');
            const errorState = document.getElementById('errorState');
            const mainContent = document.getElementById('mainContent');
            const locationDisplay = document.getElementById('locationDisplay');
            const locationNameEl = document.getElementById('locationName');
            const dateDisplay = document.getElementById('dateDisplay');
            const weatherIconLarge = document.getElementById('weatherIconLarge');
            const tempMaxEl = document.getElementById('tempMax');
            const tempMinEl = document.getElementById('tempMin');
            const conditionText = document.getElementById('conditionText');
            const conditionBadge = document.getElementById('conditionBadge');
            const hourlyStrip = document.getElementById('hourlyStrip');

            // ─── Weather Code Mappings ──────────────────────────────────────────
            const weatherCodes = {
                0: { emoji: '☀️', label: 'Clear sky', badge: 'Clear' },
                1: { emoji: '🌤️', label: 'Mainly clear', badge: 'Mostly Clear' },
                2: { emoji: '⛅', label: 'Partly cloudy', badge: 'Partly Cloudy' },
                3: { emoji: '☁️', label: 'Overcast', badge: 'Overcast' },
                45: { emoji: '🌫️', label: 'Foggy', badge: 'Fog' },
                48: { emoji: '🌫️', label: 'Rime fog', badge: 'Rime Fog' },
                51: { emoji: '🌦️', label: 'Light drizzle', badge: 'Drizzle' },
                53: { emoji: '🌦️', label: 'Drizzle', badge: 'Drizzle' },
                55: { emoji: '🌧️', label: 'Heavy drizzle', badge: 'Drizzle' },
                61: { emoji: '🌧️', label: 'Light rain', badge: 'Rain' },
                63: { emoji: '🌧️', label: 'Rain', badge: 'Rain' },
                65: { emoji: '🌧️', label: 'Heavy rain', badge: 'Heavy Rain' },
                66: { emoji: '🌧️', label: 'Freezing rain', badge: 'Freezing Rain' },
                67: { emoji: '🌧️', label: 'Heavy freezing rain', badge: 'Freezing Rain' },
                71: { emoji: '❄️', label: 'Light snow', badge: 'Snow' },
                73: { emoji: '❄️', label: 'Snow', badge: 'Snow' },
                75: { emoji: '❄️', label: 'Heavy snow', badge: 'Heavy Snow' },
                77: { emoji: '🌨️', label: 'Snow grains', badge: 'Snow Grains' },
                80: { emoji: '🌦️', label: 'Light showers', badge: 'Showers' },
                81: { emoji: '🌧️', label: 'Showers', badge: 'Showers' },
                82: { emoji: '🌧️', label: 'Heavy showers', badge: 'Heavy Showers' },
                85: { emoji: '🌨️', label: 'Snow showers', badge: 'Snow Showers' },
                86: { emoji: '🌨️', label: 'Heavy snow showers', badge: 'Snow Showers' },
                95: { emoji: '⛈️', label: 'Thunderstorm', badge: 'Thunderstorm' },
                96: { emoji: '⛈️', label: 'Thunderstorm with hail', badge: 'Thunderstorm' },
                99: { emoji: '🌩️', label: 'Severe thunderstorm', badge: 'Severe Storm' },
            };

            const backgroundGradients = {
                0: 'linear-gradient(135deg, #0f0c29 0%, #302b63 35%, #4a3f8a 65%, #6b5b95 100%)',
                1: 'linear-gradient(135deg, #1a1a3e 0%, #2d3a6e 40%, #4a5a8a 70%, #6a5a9a 100%)',
                2: 'linear-gradient(135deg, #1e1e3a 0%, #2c3e6b 40%, #4a5a8a 65%, #3a3a5e 100%)',
                3: 'linear-gradient(135deg, #1a1a2e 0%, #2c2c4a 40%, #3e3e5e 65%, #2a2a3e 100%)',
                45: 'linear-gradient(135deg, #2a2a3a 0%, #3e3e52 40%, #555570 65%, #3a3a4e 100%)',
                48: 'linear-gradient(135deg, #2a2a3a 0%, #3e3e52 40%, #555570 65%, #3a3a4e 100%)',
                51: 'linear-gradient(135deg, #1a2a3a 0%, #2a3e52 40%, #3a5a6e 65%, #1e3244 100%)',
                53: 'linear-gradient(135deg, #1a2a3a 0%, #2a3e52 40%, #3a5a6e 65%, #1e3244 100%)',
                55: 'linear-gradient(135deg, #16263a 0%, #24384e 40%, #34526a 65%, #1a2e42 100%)',
                61: 'linear-gradient(135deg, #16222e 0%, #22384a 40%, #2e5066 65%, #16242e 100%)',
                63: 'linear-gradient(135deg, #16222e 0%, #22384a 40%, #2e5066 65%, #16242e 100%)',
                65: 'linear-gradient(135deg, #101e2a 0%, #1c3040 40%, #28485a 65%, #0e1822 100%)',
                66: 'linear-gradient(135deg, #1a2432 0%, #2a3a4e 40%, #3a5066 65%, #18202e 100%)',
                67: 'linear-gradient(135deg, #1a2432 0%, #2a3a4e 40%, #3a5066 65%, #18202e 100%)',
                71: 'linear-gradient(135deg, #1a2a3a 0%, #2e4056 40%, #4a6078 65%, #1e2e3e 100%)',
                73: 'linear-gradient(135deg, #1a2a3a 0%, #2e4056 40%, #4a6078 65%, #1e2e3e 100%)',
                75: 'linear-gradient(135deg, #162438 0%, #26384e 40%, #3e5268 65%, #14202e 100%)',
                77: 'linear-gradient(135deg, #1e2a3a 0%, #304456 40%, #4a6078 65%, #1c2838 100%)',
                80: 'linear-gradient(135deg, #1a2e3e 0%, #2a4456 40%, #3e6078 65%, #182838 100%)',
                81: 'linear-gradient(135deg, #1a2e3e 0%, #2a4456 40%, #3e6078 65%, #182838 100%)',
                82: 'linear-gradient(135deg, #14283a 0%, #223e50 40%, #345a6e 65%, #101e28 100%)',
                85: 'linear-gradient(135deg, #1e2e3e 0%, #304856 40%, #4a6478 65%, #1a2838 100%)',
                86: 'linear-gradient(135deg, #1e2e3e 0%, #304856 40%, #4a6478 65%, #1a2838 100%)',
                95: 'linear-gradient(135deg, #0e0e1e 0%, #1e1e3e 35%, #2e2e5e 55%, #1a1a30 100%)',
                96: 'linear-gradient(135deg, #0e0e1e 0%, #1e1e3e 35%, #2e2e5e 55%, #1a1a30 100%)',
                99: 'linear-gradient(135deg, #080818 0%, #181838 35%, #282858 55%, #101020 100%)',
            };

            function getWeatherInfo(code) {
                return weatherCodes[code] || { emoji: '🌡️', label: 'Unknown', badge: 'Unknown' };
            }

            function getBackgroundGradient(code) {
                return backgroundGradients[code] || backgroundGradients[3];
            }

            function getTempColor(temp) {
                if (temp < -5) return '#0d47a1';
                if (temp < 0) return '#1976d2';
                if (temp < 3) return '#42a5f5';
                if (temp < 7) return '#4dd0e1';
                if (temp < 10) return '#26c6da';
                if (temp < 13) return '#80deea';
                if (temp < 16) return '#a5d6a7';
                if (temp < 19) return '#66bb6a';
                if (temp < 22) return '#ffd54f';
                if (temp < 25) return '#ffb74d';
                if (temp < 28) return '#ff8a65';
                if (temp < 31) return '#ff7043';
                return '#e53935';
            }

            function getTempColorForBar(temp) {
                const color = getTempColor(temp);
                return color;
            }

            function getTempBarHeight(temp, minTemp, maxTemp) {
                const range = Math.max(maxTemp - minTemp, 1);
                const normalized = (temp - minTemp) / range;
                return Math.max(4, Math.min(38, Math.round(normalized * 38)));
            }

            // ─── Format Date ────────────────────────────────────────────────────
            function formatDisplayDate(dateStr) {
                try {
                    const d = new Date(dateStr + 'T00:00:00Z');
                    return d.toLocaleDateString('en-US', {
                        weekday: 'long',
                        year: 'numeric',
                        month: 'long',
                        day: 'numeric',
                        timeZone: 'UTC',
                    });
                } catch {
                    return dateStr;
                }
            }

            // ─── Extract Hour from ISO timestamp ────────────────────────────────
            function extractHour(isoString) {
                // e.g. "2024-01-01T14:00" → 14
                try {
                    const parts = isoString.split('T');
                    if (parts.length > 1) {
                        return String(parseInt(parts[1].split(':')[0], 10)).padStart(2, '0');
                    }
                    return '--';
                } catch {
                    return '--';
                }
            }

            // ─── Determine API endpoint ─────────────────────────────────────────
            function getApiEndpoint(dateStr) {
                const todayStr = new Date().toISOString().split('T')[0];
                return dateStr < todayStr ? '/api/om/archive' : '/api/om/forecast';
            }

            // ─── Build API URL ─────────────────────────────────────────────────
            function buildApiUrl(apiEndpoint) {
                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: requestedDate,
                    end_date: requestedDate,
                });
                return `${apiEndpoint}?${queryParams.toString()}`;
            }

            // ─── Fetch Data ─────────────────────────────────────────────────────
            async function fetchWeatherData() {
                const apiEndpoint = getApiEndpoint(requestedDate);
                const url = buildApiUrl(apiEndpoint);

                try {
                    const response = await fetch(url, {
                        method: 'GET',
                        headers: {
                            'Accept': 'application/json',
                        },
                    });

                    if (!response.ok) {
                        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                    }

                    const data = await response.json();

                    if (!data || !data.daily || !data.hourly) {
                        throw new Error('Invalid or incomplete data from API');
                    }

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

                    if (!data.daily.temperature_2m_max || !data.daily.temperature_2m_min || !data.daily
                        .weather_code) {
                        throw new Error('Missing daily fields in API response');
                    }

                    if (!data.hourly.time || !data.hourly.temperature_2m) {
                        throw new Error('Missing hourly data in API response');
                    }

                    return data;
                } catch (error) {
                    console.error('Fetch error:', error);
                    throw error;
                }
            }

            // ─── Render Hourly Strip ───────────────────────────────────────────
            function renderHourlyStrip(hourlyTimes, hourlyTemps, minTemp, maxTemp) {
                hourlyStrip.innerHTML = '';
                const count = Math.min(hourlyTimes.length, 24);

                for (let i = 0; i < count; i++) {
                    const temp = hourlyTemps[i];
                    const hour = extractHour(hourlyTimes[i]);
                    const barHeight = getTempBarHeight(temp, minTemp, maxTemp);
                    const barColor = getTempColorForBar(temp);

                    const hourItem = document.createElement('div');
                    hourItem.className = 'hour-item';
                    hourItem.setAttribute('data-hour', hour);

                    const tempSpan = document.createElement('span');
                    tempSpan.className = 'hour-temp';
                    tempSpan.textContent = `${Math.round(temp)}°`;
                    tempSpan.style.color = barColor;

                    const barTrack = document.createElement('div');
                    barTrack.className = 'hour-bar-track';
                    const bar = document.createElement('div');
                    bar.className = 'hour-bar';
                    bar.style.height = `${barHeight}px`;
                    bar.style.background = `linear-gradient(180deg, ${barColor}, ${barColor}cc)`;
                    bar.style.boxShadow = `0 2px 8px ${barColor}60`;
                    barTrack.appendChild(bar);

                    const hourLabel = document.createElement('span');
                    hourLabel.className = 'hour-label';
                    hourLabel.textContent = hour;

                    hourItem.appendChild(tempSpan);
                    hourItem.appendChild(barTrack);
                    hourItem.appendChild(hourLabel);

                    hourlyStrip.appendChild(hourItem);
                }
            }

            // ─── Update Background Gradient ────────────────────────────────────
            function updateBackground(weatherCode) {
                const gradient = getBackgroundGradient(weatherCode);
                document.body.style.background = gradient;
            }

            // ─── Update Card Accent ────────────────────────────────────────────
            function updateCardAccent(weatherCode) {
                const info = getWeatherInfo(weatherCode);
                const accentMap = {
                    0: '#f59e0b',
                    1: '#fbbf24',
                    2: '#f59e0b',
                    3: '#6366f1',
                    45: '#94a3b8',
                    48: '#94a3b8',
                    51: '#38bdf8',
                    53: '#38bdf8',
                    55: '#0ea5e9',
                    61: '#3b82f6',
                    63: '#3b82f6',
                    65: '#2563eb',
                    66: '#3b82f6',
                    67: '#2563eb',
                    71: '#93c5fd',
                    73: '#93c5fd',
                    75: '#60a5fa',
                    77: '#93c5fd',
                    80: '#38bdf8',
                    81: '#0ea5e9',
                    82: '#0284c7',
                    85: '#93c5fd',
                    86: '#60a5fa',
                    95: '#8b5cf6',
                    96: '#7c3aed',
                    99: '#6d28d9',
                };
                const accent = accentMap[weatherCode] || '#3b82f6';
                card.style.setProperty('--accent-color', accent);
                conditionBadge.style.background = accent;
                conditionBadge.style.boxShadow = `0 2px 10px ${accent}50`;
                conditionBadge.style.color = '#fff';
            }

            // ─── Main Initialization ───────────────────────────────────────────
            async function init() {
                locationNameEl.textContent = locationName;
                dateDisplay.textContent = formatDisplayDate(requestedDate);

                try {
                    const data = await fetchWeatherData();

                    const dailyTime = data.daily.time[0];
                    const maxTemp = data.daily.temperature_2m_max[0];
                    const minTemp = data.daily.temperature_2m_min[0];
                    const weatherCode = data.daily.weather_code[0];
                    const hourlyTimes = data.hourly.time;
                    const hourlyTemps = data.hourly.temperature_2m;

                    const weatherInfo = getWeatherInfo(weatherCode);

                    // Update UI
                    tempMaxEl.innerHTML = `${Math.round(maxTemp)}<span class="temp-degree">°C</span>`;
                    tempMinEl.innerHTML = `${Math.round(minTemp)}<span class="temp-degree">°C</span>`;
                    weatherIconLarge.textContent = weatherInfo.emoji;
                    conditionText.textContent = weatherInfo.label;
                    conditionBadge.textContent = weatherInfo.badge;

                    // Update background and accent
                    updateBackground(weatherCode);
                    updateCardAccent(weatherCode);

                    // Render hourly strip
                    renderHourlyStrip(hourlyTimes, hourlyTemps, minTemp, maxTemp);

                    // Show content
                    loadingState.style.display = 'none';
                    errorState.style.display = 'none';
                    mainContent.style.display = 'block';

                } catch (error) {
                    console.error('Failed to load weather:', error);

                    loadingState.style.display = 'none';
                    errorState.style.display = 'block';
                    mainContent.style.display = 'none';

                    errorState.innerHTML = `
                        <span class="error-icon">😕</span>
                        <div class="error-title">Unable to load weather data</div>
                        <div class="error-detail">
                            Could not retrieve weather information for "${locationName}" on ${requestedDate}.<br>
                            Please verify the location and date, then try again.<br>
                            <small style="font-size:12px;opacity:0.7;">${error.message || 'Network error'}</small>
                        </div>
                    `;
                }
            }

            // ─── Run ────────────────────────────────────────────────────────────
            init();
        })();
    </script>

</body>
</html>

L1 — cheap deterministic descriptors

bytes total	32,266	html / css / js	2,192 / 10,640 / 19,434
dom nodes	35	dom depth	8
css rules	51	js present	yes
brightness	140.5	contrast	90.6
colorfulness	24.3	whitespace	43.3%

This slot's telemetry

prompt tokens	321	completion tokens	12,426
total tokens	12,747	wall	125.1 s
cost	—	request id	—

config.json595 B

{
  "N": 4,
  "auth": {
    "credential_ref": "WCB_DEEPSEEK_KEY",
    "method": "api-key"
  },
  "billing": "metered",
  "config_id": "deepseek-v4-pro-0812-eff-minimal--api--official--dev",
  "effort": "minimal",
  "family": "deepseek",
  "m": {
    "min": 4,
    "q": 4
  },
  "model_id": "deepseek-v4-pro-0812",
  "protocol": "api",
  "served_model": "deepseek-v4-pro",
  "telemetry": {
    "completion_tokens": 91806,
    "cost_usd": null,
    "prompt_tokens": 2536,
    "total_tokens": 94342,
    "wall_ms": 938903
  },
  "transport": "deepseek-official-api",
  "vendor_sanction_ref": null
}

send-log4.7 KB

{
  "N": 4,
  "batch_id": "2026-08-13--ds-pro-ga",
  "config_id": "deepseek-v4-pro-0812-eff-minimal--api--official--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-08-13T07:11:20.728163+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T07:09:15.668131+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-08-13T07:12:49.087443+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T07:11:24.506132+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-08-13T07:14:40.965769+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T07:12:52.319950+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-08-13T07:16:28.276761+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T07:14:43.925063+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-08-13T07:18:10.811639+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T07:16:32.033250+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-08-13T07:20:36.434991+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T07:18:13.800398+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-08-13T07:22:43.854827+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T07:20:39.400316+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-08-13T07:25:18.010955+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T07:22:47.532697+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
    }
  }
}