deepseek-v4-pro-0812 @ xhigh · api

apixhigh

config: deepseek-v4-pro-0812-eff-xhigh--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 @xhigh · 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 tempmismatchshown: 15
min tempmismatchshown: 18
hourlymismatchcoverage 0/24 · 0 match · 5 mismatch · 19 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.06);
            --card-border: rgba(255, 255, 255, 0.12);
            --text-primary: #ffffff;
            --text-secondary: rgba(255, 255, 255, 0.7);
            --text-muted: rgba(255, 255, 255, 0.45);
            --accent-warm: #f5a623;
            --accent-cool: #4a9eff;
            --shadow-card: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
            --radius-card: 28px;
            --font-stack: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            --chart-height: 260px;
            --chart-pad-top: 44px;
            --chart-pad-bottom: 36px;
            --chart-pad-left: 48px;
            --chart-pad-right: 32px;
        }

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

        body {
            width: 1280px;
            height: 800px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: radial-gradient(ellipse at 30% 20%, #1b1e3a 0%, #0d1225 50%, #080b18 100%);
            font-family: var(--font-stack);
            overflow: hidden;
            position: relative;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            letter-spacing: 0.01em;
        }

        /* Decorative background orbs */
        .bg-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(100px);
            pointer-events: none;
            opacity: 0.5;
            z-index: 0;
            animation: orbPulse 6s ease-in-out infinite alternate;
        }

        .bg-orb-1 {
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(245, 166, 35, 0.15) 0%, transparent 70%);
            top: -120px;
            right: -80px;
            animation-delay: 0s;
        }

        .bg-orb-2 {
            width: 420px;
            height: 420px;
            background: radial-gradient(circle, rgba(74, 158, 255, 0.13) 0%, transparent 70%);
            bottom: -100px;
            left: -60px;
            animation-delay: 3s;
        }

        .bg-orb-3 {
            width: 280px;
            height: 280px;
            background: radial-gradient(circle, rgba(168, 85, 247, 0.1) 0%, transparent 70%);
            top: 40%;
            left: 15%;
            animation-delay: 1.5s;
        }

        @keyframes orbPulse {
            0% {
                transform: scale(1);
                opacity: 0.4;
            }
            100% {
                transform: scale(1.15);
                opacity: 0.6;
            }
        }

        .container {
            position: relative;
            z-index: 1;
        }

        .weather-card {
            width: 820px;
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: var(--radius-card);
            box-shadow: var(--shadow-card);
            backdrop-filter: blur(28px);
            -webkit-backdrop-filter: blur(28px);
            padding: 40px 44px 36px;
            position: relative;
            overflow: hidden;
            animation: cardEntrance 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
            opacity: 0;
            transform: translateY(20px);
        }

        @keyframes cardEntrance {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .weather-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            border-radius: var(--radius-card) var(--radius-card) 0 0;
            background: linear-gradient(90deg, var(--accent-color, #4a9eff), var(--accent-color-secondary, #f5a623), var(--accent-color, #4a9eff));
            background-size: 200% 100%;
            animation: accentShimmer 4s ease-in-out infinite;
            opacity: 0.85;
        }

        @keyframes accentShimmer {
            0%,
            100% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
        }

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

        .location {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 28px;
            font-weight: 600;
            color: var(--text-primary);
            letter-spacing: -0.02em;
            line-height: 1.2;
        }

        .location .pin-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.08);
            flex-shrink: 0;
            font-size: 17px;
        }

        .date-display {
            font-size: 16px;
            font-weight: 400;
            color: var(--text-secondary);
            background: rgba(255, 255, 255, 0.05);
            padding: 8px 18px;
            border-radius: 100px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            letter-spacing: 0.02em;
        }

        .card-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
            margin: 0 0 28px 0;
        }

        .hero-section {
            display: flex;
            align-items: center;
            gap: 28px;
            margin-bottom: 28px;
            flex-wrap: wrap;
        }

        .weather-icon {
            font-size: 84px;
            line-height: 1;
            filter: drop-shadow(0 8px 24px rgba(255, 255, 255, 0.15));
            animation: iconFloat 3s ease-in-out infinite;
            flex-shrink: 0;
            min-width: 100px;
            text-align: center;
        }

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

        .hero-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .weather-condition {
            font-size: 20px;
            font-weight: 500;
            color: var(--text-secondary);
            letter-spacing: 0.01em;
            margin-bottom: 4px;
        }

        .temp-range {
            display: flex;
            align-items: baseline;
            gap: 18px;
            flex-wrap: wrap;
        }

        .temp-main {
            display: flex;
            align-items: baseline;
            gap: 6px;
        }

        .temp-max {
            font-size: 52px;
            font-weight: 700;
            color: var(--text-primary);
            letter-spacing: -0.03em;
            line-height: 1;
        }

        .temp-max .degree {
            font-size: 28px;
            font-weight: 500;
            color: var(--text-secondary);
            vertical-align: super;
            margin-left: 2px;
        }

        .temp-min {
            font-size: 24px;
            font-weight: 400;
            color: var(--text-muted);
            letter-spacing: -0.01em;
            line-height: 1;
        }

        .temp-min .degree {
            font-size: 14px;
            vertical-align: super;
            margin-left: 1px;
            color: var(--text-muted);
        }

        .temp-labels {
            display: flex;
            gap: 14px;
            margin-top: 4px;
        }

        .temp-label {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--text-muted);
            background: rgba(255, 255, 255, 0.06);
            padding: 4px 10px;
            border-radius: 20px;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .temp-label .arrow-up {
            color: #f5a623;
        }
        .temp-label .arrow-down {
            color: #4a9eff;
        }

        .chart-section {
            position: relative;
        }

        .chart-section svg {
            display: block;
            width: 100%;
            height: auto;
            overflow: visible;
        }

        .chart-section .chart-line {
            fill: none;
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .chart-section .chart-area {
            opacity: 0.18;
        }

        .chart-section .chart-dot {
            cursor: pointer;
            transition: r 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
        }
        .chart-section .chart-dot:hover {
            filter: brightness(1.4);
        }

        .chart-section .chart-dot-highlight {
            filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
        }

        .chart-section .grid-line {
            stroke: rgba(255, 255, 255, 0.08);
            stroke-dasharray: 4 6;
            stroke-width: 1;
        }

        .chart-section .hour-label {
            font-size: 11px;
            font-weight: 500;
            fill: var(--text-muted);
            letter-spacing: 0.04em;
        }

        .chart-section .temp-label-on-chart {
            font-size: 10px;
            font-weight: 600;
            fill: var(--text-secondary);
            letter-spacing: 0.02em;
        }

        .chart-section .axis-label {
            font-size: 10px;
            fill: rgba(255, 255, 255, 0.3);
            font-weight: 400;
        }

        /* Loading state */
        .loading-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(13, 18, 37, 0.7);
            border-radius: var(--radius-card);
            z-index: 10;
            opacity: 1;
            transition: opacity 0.4s ease;
            backdrop-filter: blur(4px);
        }

        .loading-overlay.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .loader-spinner {
            width: 42px;
            height: 42px;
            border: 3px solid rgba(255, 255, 255, 0.15);
            border-top-color: #fff;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

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

        /* Error state */
        .error-state {
            display: none;
            text-align: center;
            padding: 40px 20px;
            animation: fadeIn 0.4s ease;
        }
        .error-state.visible {
            display: block;
        }
        .error-state .error-icon {
            font-size: 48px;
            margin-bottom: 16px;
            display: block;
        }
        .error-state .error-title {
            font-size: 20px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 6px;
        }
        .error-state .error-sub {
            font-size: 14px;
            color: var(--text-muted);
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: scale(0.97);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* Responsive adjustments within the fixed viewport */
        @media (max-width: 900px) {
            .weather-card {
                width: 95vw;
                padding: 28px 24px 24px;
            }
            .location {
                font-size: 22px;
            }
            .temp-max {
                font-size: 40px;
            }
            .weather-icon {
                font-size: 60px;
                min-width: 70px;
            }
        }
    </style>
</head>
<body>
    <div class="bg-orb bg-orb-1"></div>
    <div class="bg-orb bg-orb-2"></div>
    <div class="bg-orb bg-orb-3"></div>

    <div class="container">
        <div class="weather-card" id="weatherCard">
            <div class="card-header">
                <div class="location" id="locationDisplay">
                    <span class="pin-icon">📍</span>
                    <span id="locationName">Loading…</span>
                </div>
                <div class="date-display" id="dateDisplay">—</div>
            </div>

            <div class="card-divider"></div>

            <div class="hero-section" id="heroSection" style="display:none;">
                <div class="weather-icon" id="weatherIcon">☀️</div>
                <div class="hero-info">
                    <div class="weather-condition" id="conditionText">—</div>
                    <div class="temp-range">
                        <div class="temp-main">
                            <span class="temp-max" id="tempMax">—<span class="degree">°C</span></span>
                        </div>
                        <span class="temp-min" id="tempMin">—<span class="degree">°C</span></span>
                    </div>
                    <div class="temp-labels">
                        <span class="temp-label"><span class="arrow-up">↑</span> High</span>
                        <span class="temp-label"><span class="arrow-down">↓</span> Low</span>
                    </div>
                </div>
            </div>

            <div class="card-divider" id="secondDivider" style="display:none;"></div>

            <div class="chart-section" id="chartSection" style="display:none;">
                <svg id="hourlyChart" viewBox="0 0 732 290" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"></svg>
            </div>

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

            <div class="loading-overlay" id="loadingOverlay">
                <div class="loader-spinner"></div>
            </div>
        </div>
    </div>

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

            // Weather code mappings
            const weatherCodes = {
                0: { desc: 'Clear sky', icon: '☀️', color: '#f5a623', colorSecondary: '#f7c948' },
                1: { desc: 'Mainly clear', icon: '🌤️', color: '#f5c542', colorSecondary: '#f5a623' },
                2: { desc: 'Partly cloudy', icon: '⛅', color: '#e8c87a', colorSecondary: '#c5a3d4' },
                3: { desc: 'Overcast', icon: '☁️', color: '#9aa8c7', colorSecondary: '#7a88a8' },
                45: { desc: 'Fog', icon: '🌫️', color: '#a8b5c9', colorSecondary: '#8a97ad' },
                48: { desc: 'Rime fog', icon: '🌫️', color: '#a8b5c9', colorSecondary: '#8a97ad' },
                51: { desc: 'Light drizzle', icon: '🌦️', color: '#6baed6', colorSecondary: '#4a9eff' },
                53: { desc: 'Drizzle', icon: '🌦️', color: '#5b9ec8', colorSecondary: '#4a9eff' },
                55: { desc: 'Heavy drizzle', icon: '🌧️', color: '#4a8fc0', colorSecondary: '#3a7cab' },
                56: { desc: 'Freezing drizzle', icon: '🌧️', color: '#7baed0', colorSecondary: '#5b9ec8' },
                57: { desc: 'Freezing drizzle', icon: '🌧️', color: '#7baed0', colorSecondary: '#5b9ec8' },
                61: { desc: 'Light rain', icon: '🌧️', color: '#5b9ec8', colorSecondary: '#4a8fc0' },
                63: { desc: 'Rain', icon: '🌧️', color: '#4a8fc0', colorSecondary: '#3a7cab' },
                65: { desc: 'Heavy rain', icon: '🌧️', color: '#3a7cab', colorSecondary: '#2a6a9a' },
                66: { desc: 'Freezing rain', icon: '🌧️', color: '#7baed0', colorSecondary: '#5b9ec8' },
                67: { desc: 'Freezing rain', icon: '🌧️', color: '#7baed0', colorSecondary: '#5b9ec8' },
                71: { desc: 'Light snow', icon: '🌨️', color: '#c8dce8', colorSecondary: '#a8c5d9' },
                73: { desc: 'Snow', icon: '🌨️', color: '#a8c5d9', colorSecondary: '#8ab0c8' },
                75: { desc: 'Heavy snow', icon: '❄️', color: '#8ab0c8', colorSecondary: '#6a98b5' },
                77: { desc: 'Snow grains', icon: '❄️', color: '#a8c5d9', colorSecondary: '#8ab0c8' },
                80: { desc: 'Light showers', icon: '🌦️', color: '#6baed6', colorSecondary: '#4a9eff' },
                81: { desc: 'Showers', icon: '🌧️', color: '#5b9ec8', colorSecondary: '#4a8fc0' },
                82: { desc: 'Heavy showers', icon: '🌧️', color: '#4a8fc0', colorSecondary: '#3a7cab' },
                85: { desc: 'Snow showers', icon: '🌨️', color: '#c8dce8', colorSecondary: '#a8c5d9' },
                86: { desc: 'Snow showers', icon: '❄️', color: '#a8c5d9', colorSecondary: '#8ab0c8' },
                95: { desc: 'Thunderstorm', icon: '⛈️', color: '#b088d4', colorSecondary: '#8a5fc0' },
                96: { desc: 'Thunderstorm with hail', icon: '⛈️', color: '#a070c8', colorSecondary: '#7a50b5' },
                99: { desc: 'Thunderstorm with hail', icon: '⛈️', color: '#9060c0', colorSecondary: '#6a40a5' }
            };

            function getWeatherInfo(code) {
                return weatherCodes[code] || { desc: 'Unknown', icon: '🌡️', color: '#9aa8c7', colorSecondary: '#7a88a8' };
            }

            function getTodayUTC() {
                const now = new Date();
                const y = now.getUTCFullYear();
                const m = String(now.getUTCMonth() + 1).padStart(2, '0');
                const d = String(now.getUTCDate()).padStart(2, '0');
                return `${y}-${m}-${d}`;
            }

            function getQueryParams() {
                const params = new URLSearchParams(window.location.search);
                const lat = parseFloat(params.get('lat')) || 52.52;
                const lon = parseFloat(params.get('lon')) || 13.405;
                const name = params.get('name') || 'Berlin';
                const date = params.get('date') || getTodayUTC();
                return { lat, lon, name, date };
            }

            function formatDate(dateStr) {
                try {
                    const d = new Date(dateStr + 'T00:00:00Z');
                    if (isNaN(d.getTime())) return dateStr;
                    return d.toLocaleDateString('en-US', {
                        weekday: 'long',
                        year: 'numeric',
                        month: 'long',
                        day: 'numeric',
                        timeZone: 'UTC'
                    });
                } catch (e) {
                    return dateStr;
                }
            }

            function extractHours(times) {
                return times.map(t => {
                    try {
                        const d = new Date(t);
                        return d.getUTCHours();
                    } catch (e) {
                        return null;
                    }
                });
            }

            function tempToColor(temp) {
                // Map -10°C to 40°C to hue range 210 (blue) to 15 (orange-red)
                const clamped = Math.max(-10, Math.min(40, temp));
                const hue = 210 - (clamped + 10) * (195 / 50);
                const saturation = 82;
                const lightness = 58;
                return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
            }

            function tempToColorSoft(temp) {
                const clamped = Math.max(-10, Math.min(40, temp));
                const hue = 210 - (clamped + 10) * (195 / 50);
                return `hsla(${hue}, 82%, 58%, 0.16)`;
            }

            function smoothPath(points) {
                if (points.length < 2) return '';
                if (points.length === 2) {
                    return `M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y}`;
                }
                let d = `M ${points[0].x} ${points[0].y}`;
                for (let i = 0; i < points.length - 1; i++) {
                    const p0 = points[Math.max(0, i - 1)];
                    const p1 = points[i];
                    const p2 = points[i + 1];
                    const p3 = points[Math.min(points.length - 1, i + 2)];
                    const cp1x = p1.x + (p2.x - p0.x) / 6;
                    const cp1y = p1.y + (p2.y - p0.y) / 6;
                    const cp2x = p2.x - (p3.x - p1.x) / 6;
                    const cp2y = p2.y - (p3.y - p1.y) / 6;
                    d += ` C ${cp1x.toFixed(2)} ${cp1y.toFixed(2)}, ${cp2x.toFixed(2)} ${cp2y.toFixed(2)}, ${p2.x.toFixed(2)} ${p2.y.toFixed(2)}`;
                }
                return d;
            }

            function renderChart(temps, hours) {
                const svg = document.getElementById('hourlyChart');
                if (!svg) return;
                if (!temps || temps.length === 0) return;

                const n = Math.min(temps.length, 24);
                const data = temps.slice(0, n);
                const hrLabels = hours.slice(0, n);

                const viewW = 732;
                const viewH = 290;
                const padLeft = 48;
                const padRight = 32;
                const padTop = 44;
                const padBottom = 36;
                const chartW = viewW - padLeft - padRight;
                const chartH = viewH - padTop - padBottom;

                let minT = Math.min(...data);
                let maxT = Math.max(...data);
                const range = maxT - minT;
                const padding = Math.max(2, range * 0.25);
                const yMin = minT - padding;
                const yMax = maxT + padding;
                const yRange = yMax - yMin;

                const xFor = (i) => padLeft + (i / (n - 1)) * chartW;
                const yFor = (t) => padTop + ((yMax - t) / yRange) * chartH;

                const points = data.map((t, i) => ({ x: xFor(i), y: yFor(t), temp: t, hour: hrLabels[i] }));

                let svgContent = '';

                // Grid lines at nice intervals
                const gridInterval = Math.max(2, Math.ceil(yRange / 5));
                for (let g = Math.ceil(yMin / gridInterval) * gridInterval; g <= yMax; g += gridInterval) {
                    if (g < yMin || g > yMax) continue;
                    const gy = yFor(g);
                    svgContent += `<line class="grid-line" x1="${padLeft}" y1="${gy}" x2="${viewW - padRight}" y2="${gy}" />`;
                    svgContent +=
                        `<text class="axis-label" x="${padLeft - 8}" y="${gy + 3}" text-anchor="end">${Math.round(g)}°</text>`;
                }

                // Area fill path
                const areaPath = smoothPath(points);
                if (areaPath) {
                    const lastX = points[points.length - 1].x;
                    const firstX = points[0].x;
                    const bottomY = padTop + chartH;
                    const areaD = areaPath + ` L ${lastX} ${bottomY} L ${firstX} ${bottomY} Z`;
                    const avgTemp = data.reduce((a, b) => a + b, 0) / data.length;
                    const areaFill = tempToColorSoft(avgTemp);
                    svgContent += `<path class="chart-area" d="${areaD}" fill="${areaFill}" />`;
                }

                // Line path
                if (areaPath) {
                    const avgTemp = data.reduce((a, b) => a + b, 0) / data.length;
                    const lineColor = tempToColor(avgTemp);
                    svgContent += `<path class="chart-line" d="${areaPath}" stroke="${lineColor}" stroke-width="2.5" fill="none" />`;
                }

                // Dots
                points.forEach((p, i) => {
                    const isExtreme = p.temp === minT || p.temp === maxT;
                    const dotR = isExtreme ? 6 : 4;
                    const dotClass = isExtreme ? 'chart-dot chart-dot-highlight' : 'chart-dot';
                    const dotColor = tempToColor(p.temp);
                    const dotFill = isExtreme ? '#ffffff' : dotColor;
                    const dotStroke = isExtreme ? dotColor : 'rgba(255,255,255,0.6)';
                    svgContent +=
                        `<circle class="${dotClass}" cx="${p.x.toFixed(2)}" cy="${p.y.toFixed(2)}" r="${dotR}" fill="${dotFill}" stroke="${dotStroke}" stroke-width="1.5" data-temp="${p.temp}" data-hour="${p.hour}" />`;
                    // Tooltip
                    const tooltipText = `${p.hour}:00 — ${Math.round(p.temp)}°C`;
                    svgContent += `<title>${tooltipText}</title>`;
                });

                // Hour labels (every 3 hours)
                for (let i = 0; i < n; i += 3) {
                    const x = points[i].x;
                    const label = String(points[i].hour).padStart(2, '0');
                    svgContent +=
                        `<text class="hour-label" x="${x.toFixed(2)}" y="${viewH - 8}" text-anchor="middle">${label}h</text>`;
                }
                // Always show last hour label if not already covered
                const lastIdx = n - 1;
                if (lastIdx % 3 !== 0) {
                    const x = points[lastIdx].x;
                    const label = String(points[lastIdx].hour).padStart(2, '0');
                    svgContent +=
                        `<text class="hour-label" x="${x.toFixed(2)}" y="${viewH - 8}" text-anchor="middle">${label}h</text>`;
                }

                // Temp labels for min and max
                const minIdx = data.indexOf(minT);
                const maxIdx = data.indexOf(maxT);
                if (minIdx >= 0) {
                    const p = points[minIdx];
                    const labelY = p.y - 12;
                    svgContent +=
                        `<text class="temp-label-on-chart" x="${p.x.toFixed(2)}" y="${labelY.toFixed(2)}" text-anchor="middle" fill="${tempToColor(minT)}" font-weight="700">${Math.round(minT)}°</text>`;
                }
                if (maxIdx >= 0 && maxIdx !== minIdx) {
                    const p = points[maxIdx];
                    const labelY = p.y - 12;
                    svgContent +=
                        `<text class="temp-label-on-chart" x="${p.x.toFixed(2)}" y="${labelY.toFixed(2)}" text-anchor="middle" fill="${tempToColor(maxT)}" font-weight="700">${Math.round(maxT)}°</text>`;
                }

                // If min and max are the same (flat line), show one label
                if (minT === maxT) {
                    const p = points[Math.floor(n / 2)];
                    const labelY = p.y - 12;
                    svgContent +=
                        `<text class="temp-label-on-chart" x="${p.x.toFixed(2)}" y="${labelY.toFixed(2)}" text-anchor="middle" fill="${tempToColor(minT)}" font-weight="700">${Math.round(minT)}°</text>`;
                }

                // Y-axis title
                svgContent +=
                    `<text class="axis-label" x="10" y="${padTop - 12}" text-anchor="start" font-size="9px" fill="rgba(255,255,255,0.3)">°C</text>`;

                svg.innerHTML = svgContent;
            }

            function updateCardAccent(weatherCode) {
                const info = getWeatherInfo(weatherCode);
                const card = document.getElementById('weatherCard');
                card.style.setProperty('--accent-color', info.color);
                card.style.setProperty('--accent-color-secondary', info.colorSecondary);
            }

            function showError() {
                document.getElementById('loadingOverlay').classList.add('hidden');
                document.getElementById('errorState').classList.add('visible');
                document.getElementById('heroSection').style.display = 'none';
                document.getElementById('secondDivider').style.display = 'none';
                document.getElementById('chartSection').style.display = 'none';
                document.getElementById('locationName').textContent = '—';
                document.getElementById('dateDisplay').textContent = '—';
            }

            function showData() {
                document.getElementById('loadingOverlay').classList.add('hidden');
                document.getElementById('errorState').classList.remove('visible');
                document.getElementById('heroSection').style.display = 'flex';
                document.getElementById('secondDivider').style.display = 'block';
                document.getElementById('chartSection').style.display = 'block';
            }

            async function loadWeather() {
                const { lat, lon, name, date } = getQueryParams();
                const todayStr = getTodayUTC();
                const apiPath = date < todayStr ? '/api/om/archive' : '/api/om/forecast';

                const queryParams = new URLSearchParams({
                    latitude: String(lat),
                    longitude: String(lon),
                    daily: 'temperature_2m_max,temperature_2m_min,weather_code',
                    hourly: 'temperature_2m',
                    timezone: 'UTC',
                    temperature_unit: 'celsius',
                    start_date: date,
                    end_date: date
                });

                try {
                    const response = await fetch(`${apiPath}?${queryParams.toString()}`);
                    if (!response.ok) {
                        throw new Error(`HTTP ${response.status}`);
                    }
                    const data = await response.json();

                    // Validate data
                    if (!data || !data.daily || !data.daily.temperature_2m_max ||
                        !data.daily.temperature_2m_min || !data.daily.weather_code ||
                        !data.hourly || !data.hourly.temperature_2m || !data.hourly.time) {
                        throw new Error('Invalid data structure');
                    }

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

                    const info = getWeatherInfo(weatherCode);

                    // Update UI
                    document.getElementById('locationName').textContent = name;
                    document.getElementById('dateDisplay').textContent = formatDate(date);
                    document.getElementById('weatherIcon').textContent = info.icon;
                    document.getElementById('conditionText').textContent = info.desc;
                    document.getElementById('tempMax').innerHTML =
                        `${Math.round(maxTemp)}<span class="degree">°C</span>`;
                    document.getElementById('tempMin').innerHTML =
                        `${Math.round(minTemp)}<span class="degree">°C</span>`;

                    updateCardAccent(weatherCode);
                    renderChart(hourlyTemps, hoursArr);
                    showData();
                } catch (err) {
                    console.error('Weather fetch error:', err);
                    showError();
                }
            }

            // Start loading
            document.addEventListener('DOMContentLoaded', loadWeather);
            // Fallback if DOM already loaded
            if (document.readyState === 'complete' || document.readyState === 'interactive') {
                loadWeather();
            }
        })();
    </script>
</body>
</html>

L1 — cheap deterministic descriptors

bytes total	32,427	html / css / js	2,541 / 12,220 / 17,666
dom nodes	43	dom depth	10
css rules	69	js present	yes
brightness	30.4	contrast	17.8
colorfulness	14.1	whitespace	90.1%

This slot's telemetry

prompt tokens	400	completion tokens	17,707
total tokens	18,107	wall	227.1 s
cost	—	request id	—

config.json594 B

{
  "N": 4,
  "auth": {
    "credential_ref": "WCB_DEEPSEEK_KEY",
    "method": "api-key"
  },
  "billing": "metered",
  "config_id": "deepseek-v4-pro-0812-eff-xhigh--api--official--dev",
  "effort": "xhigh",
  "family": "deepseek",
  "m": {
    "min": 4,
    "q": 4
  },
  "model_id": "deepseek-v4-pro-0812",
  "protocol": "api",
  "served_model": "deepseek-v4-pro",
  "telemetry": {
    "completion_tokens": 115973,
    "cost_usd": null,
    "prompt_tokens": 3168,
    "total_tokens": 119141,
    "wall_ms": 1328003
  },
  "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-xhigh--api--official--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-08-13T07:27:23.081834+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T07:25:21.254358+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:31:13.263185+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T07:27:26.140378+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:34:24.415653+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T07:31:16.853909+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:36:07.839466+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T07:34:27.764638+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:40:04.639156+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T07:36:11.093015+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:43:02.695722+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T07:40:08.754217+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:44:59.022254+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T07:43:05.953204+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:47:53.280365+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T07:45:02.394116+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
    }
  }
}