deepseek-v4-pro-0812 @ medium · api

apimedium

config: deepseek-v4-pro-0812-eff-medium--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 @medium · 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 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=1280, initial-scale=1">
    <title>Weather Forecast</title>
    <style>
        :root {
            --bg-from: #080f22;
            --bg-via: #0e1a35;
            --bg-to: #131b30;
            --card-bg: rgba(17, 25, 45, 0.78);
            --card-border: rgba(255, 255, 255, 0.09);
            --card-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.3);
            --text-primary: #f2f5fa;
            --text-secondary: #8fa3bc;
            --text-muted: #5a6f8c;
            --text-faint: #43536c;
            --accent-warm: #f6b26b;
            --accent-cool: #79b8f5;
            --divider: rgba(255, 255, 255, 0.07);
            --glow-color: rgba(120, 170, 240, 0.18);
            --chart-height: 150px;
            --bar-radius: 6px;
            --card-padding: 42px 44px 36px;
            --card-max-width: 620px;
            --transition-speed: 0.5s;
        }

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

        html {
            font-size: 16px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        body {
            width: 1280px;
            height: 800px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: radial-gradient(ellipse 80% 65% at 22% 12%, rgba(44, 62, 100, 0.55) 0%, transparent 60%),
                radial-gradient(ellipse 70% 55% at 78% 88%, rgba(62, 48, 100, 0.38) 0%, transparent 58%),
                linear-gradient(165deg, var(--bg-from) 0%, var(--bg-via) 42%, var(--bg-to) 100%);
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            overflow: hidden;
            color: var(--text-primary);
            transition: background 1.2s ease;
        }

        /* Dynamic background tints per condition */
        body.weather-clear {
            --bg-from: #0a101e;
            --bg-via: #161d34;
            --bg-to: #2a271f;
            --glow-color: rgba(246, 178, 107, 0.22);
        }
        body.weather-clouds {
            --bg-from: #0a0e19;
            --bg-via: #151c2e;
            --bg-to: #1e2536;
            --glow-color: rgba(150, 165, 190, 0.15);
        }
        body.weather-rain {
            --bg-from: #070d18;
            --bg-via: #0e1828;
            --bg-to: #142038;
            --glow-color: rgba(110, 155, 220, 0.2);
        }
        body.weather-snow {
            --bg-from: #0a1020;
            --bg-via: #141e38;
            --bg-to: #1e2a4a;
            --glow-color: rgba(185, 215, 255, 0.2);
        }
        body.weather-fog {
            --bg-from: #0c0f18;
            --bg-via: #161c28;
            --bg-to: #1c2230;
            --glow-color: rgba(180, 195, 210, 0.12);
        }
        body.weather-thunder {
            --bg-from: #0c0a14;
            --bg-via: #181220;
            --bg-to: #221a2e;
            --glow-color: rgba(200, 160, 220, 0.22);
        }
        body.weather-drizzle {
            --bg-from: #080d17;
            --bg-via: #121a28;
            --bg-to: #172236;
            --glow-color: rgba(130, 175, 220, 0.15);
        }

        body.weather-clear,
        body.weather-clouds,
        body.weather-rain,
        body.weather-snow,
        body.weather-fog,
        body.weather-thunder,
        body.weather-drizzle {
            background: radial-gradient(ellipse 80% 65% at 22% 12%, rgba(44, 62, 100, 0.45) 0%, transparent 60%),
                radial-gradient(ellipse 70% 55% at 78% 88%, rgba(62, 48, 100, 0.32) 0%, transparent 58%),
                linear-gradient(165deg, var(--bg-from) 0%, var(--bg-via) 42%, var(--bg-to) 100%);
        }

        #app {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }

        .card {
            background: var(--card-bg);
            backdrop-filter: blur(28px);
            -webkit-backdrop-filter: blur(28px);
            border: 1px solid var(--card-border);
            border-radius: 32px;
            box-shadow: var(--card-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
            padding: var(--card-padding);
            max-width: var(--card-max-width);
            width: 100%;
            position: relative;
            animation: cardEntrance 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
            opacity: 0;
            transform: translateY(16px) scale(0.98);
        }

        .card.loaded {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        @keyframes cardEntrance {
            0% {
                opacity: 0;
                transform: translateY(16px) scale(0.98);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* Subtle top edge highlight */
        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 8%;
            right: 8%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
            border-radius: 1px;
        }

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

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

        .location-icon {
            font-size: 22px;
            line-height: 1;
            flex-shrink: 0;
            filter: drop-shadow(0 2px 6px rgba(246, 178, 107, 0.35));
        }

        .location-name {
            font-size: 27px;
            font-weight: 650;
            letter-spacing: -0.02em;
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .date-display {
            font-size: 15px;
            font-weight: 450;
            color: var(--text-secondary);
            letter-spacing: 0.01em;
            white-space: nowrap;
            flex-shrink: 0;
            padding-top: 4px;
        }

        .card-main {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 18px 0 26px;
            position: relative;
        }

        .weather-icon-wrap {
            position: relative;
            margin-bottom: 8px;
        }

        .weather-icon-glow {
            position: absolute;
            inset: -22px;
            border-radius: 50%;
            background: radial-gradient(circle at center, var(--glow-color) 0%, transparent 70%);
            filter: blur(10px);
            pointer-events: none;
            transition: background 0.8s ease;
        }

        .weather-icon {
            font-size: 72px;
            line-height: 1;
            position: relative;
            z-index: 1;
            animation: iconPulse 3s ease-in-out infinite;
            filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.3));
        }

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

        .weather-condition {
            font-size: 18px;
            font-weight: 520;
            color: var(--text-secondary);
            letter-spacing: 0.02em;
            margin-bottom: 16px;
        }

        .temp-row {
            display: flex;
            align-items: center;
            gap: 22px;
        }

        .temp-block {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
        }

        .temp-value {
            font-size: 42px;
            font-weight: 700;
            letter-spacing: -0.03em;
            line-height: 1.05;
        }

        .temp-value.high-temp {
            color: var(--accent-warm);
        }
        .temp-value.low-temp {
            color: var(--accent-cool);
        }

        .temp-label {
            font-size: 12px;
            font-weight: 480;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--text-muted);
        }

        .temp-separator {
            width: 1px;
            height: 42px;
            background: linear-gradient(180deg, transparent, var(--divider), transparent);
            flex-shrink: 0;
        }

        .divider-line {
            height: 1px;
            background: var(--divider);
            margin: 8px 0 22px;
            position: relative;
        }

        .divider-line::after {
            content: '';
            position: absolute;
            top: -1px;
            left: 50%;
            transform: translateX(-50%);
            width: 70px;
            height: 3px;
            border-radius: 2px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
        }

        .hourly-section {
            margin-top: 4px;
        }

        .hourly-title {
            font-size: 13px;
            font-weight: 550;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: var(--text-muted);
            margin-bottom: 16px;
            text-align: center;
        }

        .chart-wrapper {
            position: relative;
            height: var(--chart-height);
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 3px;
            padding: 0 4px;
            margin-bottom: 8px;
            border-bottom: 1px solid var(--divider);
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.015) 0%, transparent 40%);
            border-radius: 8px 8px 0 0;
        }

        .bar-column {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            flex: 1;
            height: 100%;
            min-width: 0;
            transition: opacity 0.3s ease;
        }

        .bar-column:hover {
            opacity: 0.85;
        }

        .bar-temp-label {
            font-size: 9.5px;
            font-weight: 520;
            color: var(--text-muted);
            margin-bottom: 4px;
            letter-spacing: -0.01em;
            white-space: nowrap;
            transition: color 0.2s ease;
            user-select: none;
        }

        .bar-column:hover .bar-temp-label {
            color: var(--text-secondary);
        }

        .bar-rect {
            width: 100%;
            max-width: 16px;
            border-radius: var(--bar-radius) var(--bar-radius) 2px 2px;
            background: linear-gradient(180deg, var(--bar-color-light) 0%, var(--bar-color) 100%);
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
            animation: barGrow 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
            transform-origin: bottom;
            transform: scaleY(0);
            min-height: 3px;
            transition: filter 0.2s ease;
        }

        .bar-rect:hover {
            filter: brightness(1.15);
        }

        @keyframes barGrow {
            0% {
                transform: scaleY(0);
            }
            100% {
                transform: scaleY(1);
            }
        }

        .hour-labels {
            display: flex;
            justify-content: space-between;
            gap: 3px;
            padding: 0 4px;
        }

        .hour-label {
            flex: 1;
            text-align: center;
            font-size: 10px;
            font-weight: 450;
            color: var(--text-faint);
            letter-spacing: 0.02em;
            user-select: none;
        }

        .hour-label:empty {
            visibility: hidden;
        }

        /* Loading state */
        .loading-indicator {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 18px;
            padding: 80px 20px;
            min-height: 320px;
        }

        .spinner {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: 3px solid rgba(255, 255, 255, 0.08);
            border-top-color: var(--accent-cool);
            animation: spin 0.85s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        .loading-text {
            font-size: 14px;
            color: var(--text-muted);
            font-weight: 450;
            letter-spacing: 0.03em;
        }

        /* Error state */
        .error-display {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 14px;
            padding: 70px 24px;
            min-height: 260px;
            text-align: center;
        }

        .error-icon {
            font-size: 44px;
            line-height: 1;
            opacity: 0.7;
        }

        .error-message {
            font-size: 15px;
            font-weight: 480;
            color: var(--text-secondary);
            letter-spacing: 0.01em;
            max-width: 360px;
            line-height: 1.5;
        }

        .error-sub {
            font-size: 13px;
            color: var(--text-muted);
            font-weight: 400;
        }

        /* Responsive within fixed desktop */
        @media (max-width: 680px) {
            .card {
                max-width: 94%;
                padding: 30px 22px 26px;
                border-radius: 26px;
            }
            .location-name {
                font-size: 22px;
            }
            .temp-value {
                font-size: 34px;
            }
            .weather-icon {
                font-size: 58px;
            }
            .chart-wrapper {
                gap: 1px;
            }
            .bar-rect {
                max-width: 12px;
                border-radius: 4px 4px 2px 2px;
            }
            .bar-temp-label {
                font-size: 8px;
            }
            .hour-label {
                font-size: 8.5px;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="card" id="weather-card" role="region" aria-label="Weather forecast card">
            <!-- Content rendered dynamically -->
        </div>
    </div>

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

            // --- URL parameter parsing ---
            const urlParams = new URLSearchParams(window.location.search);
            const lat = urlParams.get('lat') || '52.52';
            const lon = urlParams.get('lon') || '13.405';
            const locationName = urlParams.get('name') || 'Berlin';

            // Determine date (default: today UTC)
            const todayUTCStr = new Date().toISOString().slice(0, 10);
            const requestedDate = urlParams.get('date') || todayUTCStr;

            // Validate date format
            const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
            if (!dateRegex.test(requestedDate)) {
                renderError('Invalid date format. Expected YYYY-MM-DD.');
                return;
            }

            // Determine API endpoint
            const isPastDate = requestedDate < todayUTCStr;
            const apiPath = isPastDate ? '/api/om/archive' : '/api/om/forecast';

            // Build API URL
            const apiUrl = `${apiPath}?latitude=${encodeURIComponent(lat)}&longitude=${encodeURIComponent(lon)}&daily=temperature_2m_max,temperature_2m_min,weather_code&hourly=temperature_2m&timezone=UTC&temperature_unit=celsius&start_date=${requestedDate}&end_date=${requestedDate}`;

            // --- Weather condition mapping ---
            const weatherConditions = {
                0: { emoji: '☀️', label: 'Clear Sky', bodyClass: 'weather-clear' },
                1: { emoji: '🌤️', label: 'Mainly Clear', bodyClass: 'weather-clear' },
                2: { emoji: '⛅', label: 'Partly Cloudy', bodyClass: 'weather-clouds' },
                3: { emoji: '☁️', label: 'Overcast', bodyClass: 'weather-clouds' },
                45: { emoji: '🌫️', label: 'Foggy', bodyClass: 'weather-fog' },
                48: { emoji: '🌫️', label: 'Rime Fog', bodyClass: 'weather-fog' },
                51: { emoji: '🌦️', label: 'Light Drizzle', bodyClass: 'weather-drizzle' },
                53: { emoji: '🌦️', label: 'Drizzle', bodyClass: 'weather-drizzle' },
                55: { emoji: '🌧️', label: 'Heavy Drizzle', bodyClass: 'weather-drizzle' },
                56: { emoji: '🌧️', label: 'Freezing Drizzle', bodyClass: 'weather-drizzle' },
                57: { emoji: '🌧️', label: 'Freezing Drizzle', bodyClass: 'weather-drizzle' },
                61: { emoji: '🌧️', label: 'Light Rain', bodyClass: 'weather-rain' },
                63: { emoji: '🌧️', label: 'Rain', bodyClass: 'weather-rain' },
                65: { emoji: '🌧️', label: 'Heavy Rain', bodyClass: 'weather-rain' },
                66: { emoji: '🌧️', label: 'Freezing Rain', bodyClass: 'weather-rain' },
                67: { emoji: '🌧️', label: 'Freezing Rain', bodyClass: 'weather-rain' },
                71: { emoji: '🌨️', label: 'Light Snow', bodyClass: 'weather-snow' },
                73: { emoji: '🌨️', label: 'Snow', bodyClass: 'weather-snow' },
                75: { emoji: '❄️', label: 'Heavy Snow', bodyClass: 'weather-snow' },
                77: { emoji: '🌨️', label: 'Snow Grains', bodyClass: 'weather-snow' },
                80: { emoji: '🌦️', label: 'Light Showers', bodyClass: 'weather-rain' },
                81: { emoji: '🌧️', label: 'Rain Showers', bodyClass: 'weather-rain' },
                82: { emoji: '⛈️', label: 'Violent Showers', bodyClass: 'weather-rain' },
                85: { emoji: '🌨️', label: 'Snow Showers', bodyClass: 'weather-snow' },
                86: { emoji: '🌨️', label: 'Snow Showers', bodyClass: 'weather-snow' },
                95: { emoji: '⛈️', label: 'Thunderstorm', bodyClass: 'weather-thunder' },
                96: { emoji: '⛈️', label: 'Storm with Hail', bodyClass: 'weather-thunder' },
                99: { emoji: '⛈️', label: 'Storm with Hail', bodyClass: 'weather-thunder' },
            };

            function getWeatherCondition(code) {
                return weatherConditions[code] || { emoji: '🌡️', label: 'Unknown', bodyClass: 'weather-clouds' };
            }

            // --- Temperature-to-color mapping for bars ---
            function getBarColor(tempC) {
                if (tempC <= -5) return { main: '#5a9bd5', light: '#7bb8e8' };
                if (tempC <= 0) return { main: '#6cb4e4', light: '#8cc8f0' };
                if (tempC <= 5) return { main: '#6fc3d9', light: '#8fd4e8' };
                if (tempC <= 10) return { main: '#5ec4ae', light: '#7ed6c0' };
                if (tempC <= 15) return { main: '#8bc48a', light: '#a8d6a0' };
                if (tempC <= 20) return { main: '#e0b85a', light: '#f0cc78' };
                if (tempC <= 25) return { main: '#e8903d', light: '#f5a65c' };
                if (tempC <= 30) return { main: '#e66e2c', light: '#f0854a' };
                return { main: '#d94d4d', light: '#e86c6c' };
            }

            // --- Date formatting ---
            function formatDateDisplay(dateStr) {
                const parts = dateStr.split('-');
                const year = parseInt(parts[0], 10);
                const month = parseInt(parts[1], 10) - 1;
                const day = parseInt(parts[2], 10);
                const date = new Date(Date.UTC(year, month, day));
                return date.toLocaleDateString('en-US', {
                    weekday: 'long',
                    month: 'long',
                    day: 'numeric',
                    year: 'numeric',
                    timeZone: 'UTC',
                });
            }

            // --- Rendering functions ---

            function renderLoading() {
                const card = document.getElementById('weather-card');
                card.innerHTML = `
                    <div class="loading-indicator">
                        <div class="spinner"></div>
                        <div class="loading-text">Loading weather data&hellip;</div>
                    </div>`;
                card.classList.remove('loaded');
                // Force reflow to re-trigger animation
                void card.offsetHeight;
                card.classList.add('loaded');
            }

            function renderError(message) {
                const card = document.getElementById('weather-card');
                document.body.className = '';
                card.innerHTML = `
                    <div class="error-display">
                        <div class="error-icon">⚠️</div>
                        <div class="error-message">${escapeHtml(message)}</div>
                        <div class="error-sub">Unable to load weather data. Please check your connection and try again.</div>
                    </div>`;
                card.classList.remove('loaded');
                void card.offsetHeight;
                card.classList.add('loaded');
            }

            function escapeHtml(str) {
                const div = document.createElement('div');
                div.textContent = str;
                return div.innerHTML;
            }

            function renderWeatherCard(data, dateStr) {
                const card = document.getElementById('weather-card');
                const locationDisplay = escapeHtml(locationName);
                const formattedDate = formatDateDisplay(dateStr);

                const daily = data.daily || {};
                const hourly = data.hourly || {};

                const maxTemp = daily.temperature_2m_max && daily.temperature_2m_max.length > 0 ?
                    daily.temperature_2m_max[0] : null;
                const minTemp = daily.temperature_2m_min && daily.temperature_2m_min.length > 0 ?
                    daily.temperature_2m_min[0] : null;
                const weatherCode = daily.weather_code && daily.weather_code.length > 0 ?
                    daily.weather_code[0] : 0;

                const condition = getWeatherCondition(weatherCode);
                document.body.className = condition.bodyClass;

                // Format temperatures
                const maxTempStr = maxTemp !== null ? `${Math.round(maxTemp)}°` : '—';
                const minTempStr = minTemp !== null ? `${Math.round(minTemp)}°` : '—';

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

                let hourlyHtml = '';
                let hourLabelsHtml = '';

                if (hourlyTimes.length > 0 && hourlyTemps.length > 0 && hourlyTemps.length === hourlyTimes.length) {
                    // Find the min and max hourly temps for scaling
                    const tempValues = hourlyTemps.filter(t => t !== null && t !== undefined);
                    if (tempValues.length > 0) {
                        const hMin = Math.min(...tempValues);
                        const hMax = Math.max(...tempValues);
                        const range = Math.max(hMax - hMin, 2); // Prevent divide by zero
                        const maxBarHeight = 110; // px within chart area
                        const minBarHeight = 8; // px minimum

                        for (let i = 0; i < hourlyTemps.length; i++) {
                            const temp = hourlyTemps[i];
                            const timeStr = hourlyTimes[i] || '';
                            const hourMatch = timeStr.match(/T(\d{2}):/);
                            const hour = hourMatch ? hourMatch[1] : (i.toString().padStart(2, '0'));

                            if (temp === null || temp === undefined) {
                                hourlyHtml += `<div class="bar-column" style="flex:1;"></div>`;
                            } else {
                                const normalized = (temp - hMin) / range;
                                const barHeight = Math.max(minBarHeight, normalized * maxBarHeight);
                                const color = getBarColor(temp);
                                const tempLabel = `${Math.round(temp)}°`;

                                hourlyHtml += `
                                    <div class="bar-column" title="${hour}:00 — ${tempLabel}">
                                        <span class="bar-temp-label">${tempLabel}</span>
                                        <div class="bar-rect" style="height:${barHeight}px; --bar-color:${color.main}; --bar-color-light:${color.light}; animation-delay:${i * 0.015}s;"></div>
                                    </div>`;
                            }

                            // Hour labels every 3 hours
                            const hourNum = parseInt(hour, 10);
                            if (hourNum % 3 === 0) {
                                hourLabelsHtml += `<span class="hour-label">${hour}</span>`;
                            } else {
                                hourLabelsHtml += `<span class="hour-label"></span>`;
                            }
                        }
                    }

                    // Wrap hourly chart
                    const chartHtml = `
                        <div class="hourly-section">
                            <div class="hourly-title">Hourly Temperatures</div>
                            <div class="chart-wrapper">${hourlyHtml}</div>
                            <div class="hour-labels">${hourLabelsHtml}</div>
                        </div>`;
                    const finalHourlyHtml = chartHtml;
                    finalizeCard();

                    function finalizeCard() {
                        card.innerHTML = `
                            <div class="card-header">
                                <div class="location-group">
                                    <span class="location-icon">📍</span>
                                    <span class="location-name">${locationDisplay}</span>
                                </div>
                                <span class="date-display">${formattedDate}</span>
                            </div>
                            <div class="card-main">
                                <div class="weather-icon-wrap">
                                    <div class="weather-icon-glow"></div>
                                    <div class="weather-icon">${condition.emoji}</div>
                                </div>
                                <div class="weather-condition">${condition.label}</div>
                                <div class="temp-row">
                                    <div class="temp-block">
                                        <span class="temp-value high-temp">${maxTempStr}</span>
                                        <span class="temp-label">High</span>
                                    </div>
                                    <div class="temp-separator"></div>
                                    <div class="temp-block">
                                        <span class="temp-value low-temp">${minTempStr}</span>
                                        <span class="temp-label">Low</span>
                                    </div>
                                </div>
                            </div>
                            <div class="divider-line"></div>
                            ${chartHtml}`;
                        card.classList.remove('loaded');
                        void card.offsetHeight;
                        card.classList.add('loaded');
                    }
                } else {
                    // No hourly data available
                    const chartHtml = `
                        <div class="hourly-section">
                            <div class="hourly-title">Hourly Temperatures</div>
                            <div style="text-align:center;padding:30px 0;color:var(--text-muted);font-size:14px;">
                                Hourly data not available for this date.
                            </div>
                        </div>`;

                    card.innerHTML = `
                        <div class="card-header">
                            <div class="location-group">
                                <span class="location-icon">📍</span>
                                <span class="location-name">${locationDisplay}</span>
                            </div>
                            <span class="date-display">${formattedDate}</span>
                        </div>
                        <div class="card-main">
                            <div class="weather-icon-wrap">
                                <div class="weather-icon-glow"></div>
                                <div class="weather-icon">${condition.emoji}</div>
                            </div>
                            <div class="weather-condition">${condition.label}</div>
                            <div class="temp-row">
                                <div class="temp-block">
                                    <span class="temp-value high-temp">${maxTempStr}</span>
                                    <span class="temp-label">High</span>
                                </div>
                                <div class="temp-separator"></div>
                                <div class="temp-block">
                                    <span class="temp-value low-temp">${minTempStr}</span>
                                    <span class="temp-label">Low</span>
                                </div>
                            </div>
                        </div>
                        <div class="divider-line"></div>
                        ${chartHtml}`;
                    card.classList.remove('loaded');
                    void card.offsetHeight;
                    card.classList.add('loaded');
                }
            }

            // --- Main fetch logic ---
            async function fetchWeather() {
                renderLoading();
                try {
                    const response = await fetch(apiUrl, {
                        method: 'GET',
                        headers: {
                            'Accept': 'application/json',
                        },
                    });

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

                    const data = await response.json();

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

                    renderWeatherCard(data, requestedDate);
                } catch (err) {
                    console.error('Weather fetch error:', err);
                    renderError('Could not load weather data for this location and date.');
                }
            }

            // Start fetching
            fetchWeather();
        })();
    </script>
</body>
</html>

L1 — cheap deterministic descriptors

bytes total	31,964	html / css / js	430 / 14,558 / 16,976
dom nodes	10	dom depth	4
css rules	75	js present	yes
brightness	31.8	contrast	21.3
colorfulness	28.8	whitespace	94.1%

This slot's telemetry

prompt tokens	400	completion tokens	14,548
total tokens	14,948	wall	152.1 s
cost	—	request id	—

config.json596 B

{
  "N": 4,
  "auth": {
    "credential_ref": "WCB_DEEPSEEK_KEY",
    "method": "api-key"
  },
  "billing": "metered",
  "config_id": "deepseek-v4-pro-0812-eff-medium--api--official--dev",
  "effort": "medium",
  "family": "deepseek",
  "m": {
    "min": 4,
    "q": 4
  },
  "model_id": "deepseek-v4-pro-0812",
  "protocol": "api",
  "served_model": "deepseek-v4-pro",
  "telemetry": {
    "completion_tokens": 114844,
    "cost_usd": null,
    "prompt_tokens": 3168,
    "total_tokens": 118012,
    "wall_ms": 1187614
  },
  "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-medium--api--official--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-08-13T06:52:50.511525+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T06:49:02.054043+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-13T06:55:25.806559+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T06:52:53.668412+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-13T06:58:18.070133+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T06:55:29.221662+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-13T06:59:58.090771+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T06:58:21.203437+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:01:28.612362+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T07:00:01.499279+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:04:07.967278+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T07:01:31.628809+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:07:14.512779+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T07:04:11.170249+00:00"
        }
      ],
      "block_index": 3,
      "model_reaching_attempt_index": 0,
      "slot_index": 3,
      "terminal_state": "valid",
      "variant": "P-q"
    },
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-08-13T07:09:12.221761+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T07:07:17.739440+00:00"
        }
      ],
      "block_index": 3,
      "model_reaching_attempt_index": 0,
      "slot_index": 3,
      "terminal_state": "valid",
      "variant": "P-min"
    }
  ],
  "retry_policy": {
    "max_unreachable_retries": 5,
    "rate_limit_backoff": {
      "max_attempts": 4,
      "max_total_ms": 60000
    }
  }
}