Spaces:

bhabha-kapil
/

RustAutoScoreEngine

Build error

File size: 20,591 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rust AutoScore Engine - Smart Dashboard</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #00ff88;
            --secondary: #00d4ff;
            --accent: #ff4d4d;
            --bg: #0a0e14;
            --card-bg: rgba(255, 255, 255, 0.03);
            --glass-border: rgba(255, 255, 255, 0.08);
            --panel-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Outfit', sans-serif;
        }

        body {
            background: var(--bg);
            color: #fff;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow-x: hidden;
            background-image: 
                radial-gradient(circle at 20% 20%, rgba(0, 255, 136, 0.05) 0%, transparent 40%),
                radial-gradient(circle at 80% 80%, rgba(0, 212, 255, 0.05) 0%, transparent 40%);
        }

        .bg-grid {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
                              linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
            background-size: 50px 50px;
            z-index: -1;
            pointer-events: none;
        }

        header {
            padding: 3rem 2rem;
            text-align: center;
            width: 100%;
            background: linear-gradient(to bottom, rgba(10, 14, 20, 0.8), transparent);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--glass-border);
            margin-bottom: 2rem;
        }

        h1 {
            font-size: 3.5rem;
            font-weight: 800;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 0.5rem;
            letter-spacing: -2px;
            filter: drop-shadow(0 0 20px rgba(0, 255, 136, 0.3));
        }

        p.subtitle {
            color: #8892b0;
            font-size: 0.9rem;
            letter-spacing: 4px;
            text-transform: uppercase;
            font-weight: 400;
            opacity: 0.8;
        }

        main {
            width: 95%;
            max-width: 1400px;
            display: grid;
            grid-template-columns: 1fr 400px;
            gap: 2.5rem;
            padding: 0 0 4rem 0;
            animation: fadeIn 0.8s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .visual-area {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .upload-container {
            background: var(--card-bg);
            backdrop-filter: blur(30px);
            border: 1px solid var(--glass-border);
            border-radius: 32px;
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            min-height: 700px;
            position: relative;
            overflow: hidden;
            box-shadow: var(--panel-shadow);
        }

        .upload-container:hover {
            border-color: var(--primary);
            box-shadow: 0 0 60px rgba(0, 255, 136, 0.15);
            background: rgba(255, 255, 255, 0.05);
            transform: scale(1.005);
        }

        .upload-container.drag-over {
            border-color: var(--secondary);
            background: rgba(0, 212, 255, 0.08);
            transform: scale(1.01);
        }

        .preview-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            display: none;
            justify-content: center;
            align-items: center;
            border-radius: 20px;
            overflow: hidden;
        }

        #preview-img {
            max-width: 100%;
            max-height: 650px;
            border-radius: 24px;
            display: block;
            object-fit: contain;
            transition: 0.3s;
        }

        #overlay-svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 10;
        }

        .scanline {
            position: absolute;
            top: -100%;
            left: 0;
            width: 100%;
            height: 80px;
            background: linear-gradient(to bottom, transparent, rgba(0, 255, 136, 0.2), transparent);
            opacity: 0.8;
            display: none;
            z-index: 20;
            pointer-events: none;
        }

        @keyframes scan {
            0% { top: -10%; }
            100% { top: 110%; }
        }

        .upload-icon { font-size: 5rem; margin-bottom: 1.5rem; filter: drop-shadow(0 0 15px rgba(255,255,255,0.2)); }
        .upload-text { font-size: 1.8rem; font-weight: 600; color: #fff; letter-spacing: -0.5px; }
        .upload-subtext { color: #8892b0; margin-top: 1rem; font-size: 1rem; }

        .stats-panel {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .stat-card {
            background: var(--card-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: 28px;
            padding: 1.8rem;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .stat-card:hover {
            border-color: rgba(255,255,255,0.2);
            background: rgba(255, 255, 255, 0.06);
            transform: translateY(-5px);
        }

        .stat-label { color: #8892b0; font-size: 0.75rem; font-weight: 700; margin-bottom: 0.8rem; text-transform: uppercase; letter-spacing: 2px; }
        .stat-value { font-size: 2.2rem; font-weight: 800; margin-bottom: 0.5rem; }
        .conf-bar { height: 8px; background: rgba(255,255,255,0.05); border-radius: 4px; margin-top: 1.2rem; overflow: hidden; }
        .conf-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--primary), var(--secondary)); transition: 1.5s cubic-bezier(0.19, 1, 0.22, 1); }

        .loading-spinner {
            width: 70px; height: 70px;
            border: 5px solid rgba(0, 255, 136, 0.05);
            border-top: 5px solid var(--primary);
            border-radius: 50%;
            animation: spin 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
            display: none;
            position: absolute;
            z-index: 30;
            filter: drop-shadow(0 0 15px var(--primary));
        }

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

        .keypoint-marker {
            fill: var(--primary);
            stroke: #fff;
            stroke-width: 2.5px;
            filter: drop-shadow(0 0 10px var(--primary));
            animation: pulse-marker 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
        }

        @keyframes pulse-marker {
            0%, 100% { r: 8; opacity: 1; }
            50% { r: 8; opacity: 0.8; }
        }

        .result-item {
            padding: 14px 0;
            border-bottom: 1px solid rgba(255,255,255,0.04);
            display: flex;
            align-items: center;
            justify-content: space-between;
            animation: slideIn 0.4s ease-out forwards;
        }

        @keyframes slideIn {
            from { opacity: 0; transform: translateX(20px); }
            to { opacity: 1; transform: translateX(0); }
        }

        .badge {
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .badge-dart { background: linear-gradient(135deg, #ff4d4d, #c00); color: white; box-shadow: 0 4px 15px rgba(255, 77, 77, 0.4); }
        .badge-cal { background: linear-gradient(135deg, #00ff88, #00d4ff); color: #0a0e14; box-shadow: 0 4px 15px rgba(0, 255, 136, 0.2); }
    </style>
</head>
<body>
    <div class="bg-grid"></div>
    <header>
        <h1>RUST AUTO SCORE <span style="font-weight: 200; opacity: 0.4;">ENGINE</span></h1>
        <p class="subtitle">Neural Scoring & Board Analytics</p>
    </header>

    <main>
        <section class="visual-area">
            <div class="upload-container" id="drop-zone">
                <div class="scanline" id="scanline"></div>
                <div id="initial-state">
                    <div class="upload-icon">💠</div>
                    <div class="upload-text">Initialize Vision System</div>
                    <div class="upload-subtext">Drop board imagery for real-time neural mapping</div>
                </div>
                <div class="preview-wrapper" id="preview-wrapper">
                    <img id="preview-img">
                    <svg id="overlay-svg"></svg>
                </div>
                <div class="loading-spinner" id="spinner"></div>
            </div>
            <input type="file" id="file-input" style="display: none;" accept="image/*">
        </section>

        <aside class="stats-panel">
            <div class="stat-card">
                <div class="stat-label">Model Status</div>
                <div class="stat-value" id="status-text" style="font-size: 1.4rem; color: var(--primary);">System Ready</div>
            </div>
            <div class="stat-card" id="cal-card">
                <div class="stat-label">Calibration Sync</div>
                <div class="stat-value" id="cal-status" style="font-size: 1.2rem; color: #8892b0;">Pending...</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">AI Confidence</div>
                <div class="stat-value" id="conf-val">0.0%</div>
                <div class="conf-bar"><div class="conf-fill" id="conf-fill"></div></div>
            </div>
            <div class="stat-card">
                <div class="stat-label">Detection Result</div>
                <div class="stat-value" id="result-text" style="font-size: 1.1rem; opacity: 0.8;">No Frame Captured</div>
            </div>
        </aside>
    </main>

    <script>
        const dropZone = document.getElementById('drop-zone');
        const fileInput = document.getElementById('file-input');
        const previewImg = document.getElementById('preview-img');
        const previewWrapper = document.getElementById('preview-wrapper');
        const initialState = document.getElementById('initial-state');
        const svgOverlay = document.getElementById('overlay-svg');
        const spinner = document.getElementById('spinner');
        const scanline = document.getElementById('scanline');

        dropZone.onclick = () => fileInput.click();
        fileInput.onchange = (e) => handleFile(e.target.files[0]);

        dropZone.ondragover = (e) => { e.preventDefault(); dropZone.classList.add('drag-over'); };
        dropZone.ondragleave = () => dropZone.classList.remove('drag-over');
        dropZone.ondrop = (e) => { e.preventDefault(); dropZone.classList.remove('drag-over'); handleFile(e.dataTransfer.files[0]); };

        async function handleFile(file) {
            if (!file || !file.type.startsWith('image/')) return;
            
            const reader = new FileReader();
            reader.onload = (e) => {
                previewImg.src = e.target.result;
                previewWrapper.style.display = 'flex';
                initialState.style.display = 'none';
                clearKeypoints();
            };
            reader.readAsDataURL(file);

            spinner.style.display = 'block';
            scanline.style.display = 'block';
            scanline.style.animation = 'scan 2s linear infinite';
            
            document.getElementById('status-text').innerText = 'Neural Processing...';
            document.getElementById('status-text').style.color = 'var(--secondary)';

            const formData = new FormData();
            formData.append('image', file);

            try {
                const response = await fetch('/api/predict', { method: 'POST', body: formData });
                const data = await response.json();
                
                spinner.style.display = 'none';
                scanline.style.display = 'none';
                
                if (data.status === 'success') {
                    document.getElementById('status-text').innerText = 'Analysis Complete';
                    document.getElementById('status-text').style.color = 'var(--primary)';
                    updateUI(data);
                    drawKeypoints(data.keypoints, data.confidences);
                } else {
                    document.getElementById('status-text').innerText = 'Analysis Failed';
                    document.getElementById('status-text').style.color = 'var(--accent)';
                }
            } catch (err) {
                spinner.style.display = 'none';
                scanline.style.display = 'none';
                document.getElementById('status-text').innerText = 'System Error';
                document.getElementById('status-text').style.color = 'var(--accent)';
            }
        }

        function updateUI(data) {
            const conf = (data.confidence * 100).toFixed(1);
            document.getElementById('conf-val').innerText = `${conf}%`;
            document.getElementById('conf-fill').style.width = `${conf}%`;

            const calStatus = document.getElementById('cal-status');
            if (data.is_calibrated) {
                calStatus.innerText = "VERIFIED ✅";
                calStatus.style.color = "var(--primary)";
            } else {
                calStatus.innerText = "FAILED ❌";
                calStatus.style.color = "var(--accent)";
            }
            
            let resultHtml = `<div style="margin: 1.5rem 0 1rem 0; font-size: 0.95rem; line-height: 1.6; color: rgba(255,255,255,0.9);">${data.message}</div>`;
            if (data.keypoints && data.keypoints.length >= 8) {
                const names = ["Cal 1", "Cal 2", "Cal 3", "Cal 4", "Dart"];
                resultHtml += `<div style="font-size: 0.75rem; color: #8892b0; margin: 1.5rem 0 0.8rem 0; letter-spacing: 2px; text-transform: uppercase;">MAPPED DATA</div>`;
                
                for (let i = 0; i < data.keypoints.length; i += 2) {
                    const classIdx = i / 2;
                    const isCal = classIdx < 4;
                    const name = names[classIdx] || `Dart ${Math.floor(classIdx - 3)}`;
                    const x = data.keypoints[i].toFixed(3);
                    const y = data.keypoints[i+1].toFixed(3);
                    const ptConf = ((data.confidences[classIdx] || 0) * 100).toFixed(0);
                    const isReliable = ptConf > 10;
                    
                    let scoreHtml = "";
                    if (classIdx >= 4 && data.scores && data.scores[classIdx - 4]) {
                        scoreHtml = `<div style="display: flex; flex-direction: column; align-items: flex-end; gap: 4px;">
                                        <span class="badge badge-dart">${data.scores[classIdx - 4]}</span>
                                        <span style="font-size: 0.65rem; color: #8892b0; font-weight: 600;">CONF: ${ptConf}%</span>
                                     </div>`;
                    } else if (isCal) {
                        scoreHtml = `<span class="badge" style="background: ${isReliable ? 'rgba(0,255,136,0.1)' : 'rgba(255,77,77,0.1)'}; color: ${isReliable ? 'var(--primary)' : 'var(--accent)'}; font-size: 0.6rem; border: 1px solid">${isReliable ? ptConf+'% OK' : ptConf+'% ERR'}</span>`;
                    }

                    resultHtml += `
                        <div class="result-item" style="animation-delay: ${classIdx * 0.1}s">
                            <div style="display: flex; flex-direction: column;">
                                <span style="font-weight: 600; font-size: 0.95rem; color: ${isCal ? 'var(--primary)' : 'var(--accent)'}">${name}</span>
                                <span style="font-size: 0.7rem; color: #8892b0; font-family: monospace; letter-spacing: 0.5px;">X:${x} Y:${y}</span>
                            </div>
                            ${scoreHtml}
                        </div>`;
                }
            }
            document.getElementById('result-text').innerHTML = resultHtml;
        }

        function clearKeypoints() {
            while (svgOverlay.firstChild) svgOverlay.removeChild(svgOverlay.firstChild);
        }

        function drawKeypoints(pts, confs) {
            clearKeypoints();
            if (!pts || pts.length === 0) return;

            setTimeout(() => {
                const rect = previewImg.getBoundingClientRect();
                const wrapperRect = previewWrapper.getBoundingClientRect();
                
                const offsetX = rect.left - wrapperRect.left;
                const offsetY = rect.top - wrapperRect.top;
                const width = rect.width;
                const height = rect.height;

                for (let i = 0; i < pts.length; i += 2) {
                    const classIdx = i / 2;
                    const isCal = classIdx < 4;
                    const x = pts[i] * width + offsetX;
                    const y = pts[i+1] * height + offsetY;
                    
                    const ptConf = ((confs[classIdx] || 0) * 100).toFixed(0);
                    const name = isCal ? `CAL ${classIdx+1} (${ptConf}%)` : `DART (${ptConf}%)`;

                    const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
                    
                    const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
                    circle.setAttribute("cx", x);
                    circle.setAttribute("cy", y);
                    circle.setAttribute("r", 8);
                    circle.setAttribute("class", "keypoint-marker");
                    if (!isCal) {
                        circle.style.fill = "#ff4d4d";
                        circle.style.filter = "drop-shadow(0 0 15px rgba(255, 77, 77, 0.6))";
                    }
                    
                    const labelBg = document.createElementNS("http://www.w3.org/2000/svg", "rect");
                    labelBg.setAttribute("x", x + 15);
                    labelBg.setAttribute("y", y - 25);
                    labelBg.setAttribute("width", name.length * 7 + 15);
                    labelBg.setAttribute("height", "22");
                    labelBg.setAttribute("rx", "11");
                    labelBg.setAttribute("fill", "rgba(0,0,0,0.7)");
                    labelBg.setAttribute("style", "backdrop-filter: blur(8px); stroke: rgba(255,255,255,0.1); stroke-width: 1;");

                    const label = document.createElementNS("http://www.w3.org/2000/svg", "text");
                    label.setAttribute("x", x + 21);
                    label.setAttribute("y", y - 9);
                    label.setAttribute("fill", isCal ? "#00ff88" : "#ff4d4d");
                    label.setAttribute("font-size", "10px");
                    label.setAttribute("font-weight", "900");
                    label.setAttribute("style", "text-transform: uppercase; letter-spacing: 1.5px;");
                    label.textContent = name;
                    
                    group.appendChild(circle);
                    group.appendChild(labelBg);
                    group.appendChild(label);
                    svgOverlay.appendChild(group);
                }
            }, 100);
        }
    </script>
</body>
</html>