Spaces:

LMLK
/

greyhound-race-predictor

Running

File size: 32,703 Bytes

a3a2716

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Greyhound Race Predictor</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js"></script>
    <style>
        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
        
        /* Custom slider */
        input[type="range"] {
            -webkit-appearance: none;
            height: 8px;
            background: #e2e8f0;
            border-radius: 5px;
            background-image: linear-gradient(#3b82f6, #3b82f6);
            background-size: 50% 100%;
            background-repeat: no-repeat;
        }
        
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 20px;
            width: 20px;
            border-radius: 50%;
            background: #3b82f6;
            cursor: pointer;
            box-shadow: 0 0 2px 0 #555;
            transition: background .3s ease-in-out;
        }
        
        input[type="range"]::-webkit-slider-runnable-track {
            -webkit-appearance: none;
            box-shadow: none;
            border: none;
            background: transparent;
        }
        
        /* Radar chart styling */
        .radar-chart-container {
            position: relative;
            height: 400px;
            width: 100%;
        }
        
        /* Animation for tabs */
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
            animation: fadeIn 0.3s ease-in-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        /* Custom tooltip */
        .tooltip {
            position: relative;
            display: inline-block;
        }
        
        .tooltip .tooltiptext {
            visibility: hidden;
            width: 200px;
            background-color: #333;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -100px;
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <div class="container mx-auto px-4 py-8 max-w-7xl">
        <!-- Header -->
        <header class="bg-blue-600 text-white rounded-lg shadow-md mb-8">
            <div class="px-6 py-4">
                <h1 class="text-3xl font-bold">Greyhound Race Predictor</h1>
                <p class="mt-2">Advanced algorithm to predict race outcomes based on key performance metrics</p>
            </div>
        </header>
        
        <!-- Tabs Navigation -->
        <div class="flex border-b border-gray-300 mb-6">
            <button class="tab-btn py-2 px-4 font-medium text-blue-600 border-b-2 border-blue-600" data-tab="input">Dog Data Input</button>
            <button class="tab-btn py-2 px-4 font-medium text-gray-500 hover:text-blue-600" data-tab="results">Prediction Results</button>
        </div>
        
        <!-- Formula Explanation -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-8">
            <h2 class="text-xl font-semibold mb-4 text-blue-600">Prediction Data</h2>
            <div class="bg-blue-50 p-4 rounded-lg">
                <p class="font-medium mb-2"></p>
                <p class="mb-4"></p>
                <p class="mb-2">Each metric is rated on a scale of 0-10:</p>
                <ul class="list-disc pl-5 space-y-1">
                    <li><span class="font-medium">Form:</span> Recent race positions (higher values for better positions)</li>
                    <li><span class="font-medium">Speed:</span> Recent race times compared to competitors (higher for faster times)</li>
                    <li><span class="font-medium">Consistency:</span> How reliably the dog performs in races (higher for more consistent results)</li>
                    <li><span class="font-medium">Track:</span> Experience and performance at this particular track (higher for better track history)</li>
                    <li><span class="font-medium">Recency:</span> How recent and relevant the form data is (higher for more recent good form)</li>
                </ul>
            </div>
        </div>
        
        <!-- Input Tab -->
        <div id="input" class="tab-content active">
            <!-- Dog Input Forms -->
            <div class="space-y-6 mb-8" id="dogFormsContainer">
                <!-- Dog forms will be added here dynamically -->
            </div>
            
            <!-- Action Buttons -->
            <div class="flex flex-wrap gap-4 mb-8">
                <button id="calculateBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg shadow-md transition duration-300">
                    Calculate Predictions
                </button>
                <button id="clearBtn" class="bg-gray-500 hover:bg-gray-600 text-white font-medium py-2 px-6 rounded-lg shadow-md transition duration-300">
                    Clear All Data
                </button>
                <button id="sampleBtn" class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-6 rounded-lg shadow-md transition duration-300">
                    Load Sample Data
                </button>
                <button id="addDogBtn" class="bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-6 rounded-lg shadow-md transition duration-300">
                    Add Another Dog
                </button>
            </div>
        </div>
        
        <!-- Results Tab -->
        <div id="results" class="tab-content">
            <!-- Text Results -->
            <div class="bg-white rounded-lg shadow-md p-6 mb-8">
                <h2 class="text-xl font-semibold mb-4 text-blue-600">Prediction Results</h2>
                <div id="resultsText" class="bg-gray-50 p-4 rounded-lg max-h-96 overflow-y-auto border border-gray-200">
                    <!-- Results will be displayed here -->
                    <p class="text-gray-500 italic">No predictions calculated yet. Enter dog data and click "Calculate Predictions".</p>
                </div>
            </div>
            
            <!-- Charts -->
            <div class="grid grid-cols-1 gap-8">
                <!-- Probability Chart -->
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h2 class="text-xl font-semibold mb-4 text-blue-600">Win Probability</h2>
                    <div class="h-96">
                        <canvas id="probabilityChart"></canvas>
                    </div>
                </div>
                
                <!-- Radar Chart -->
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h2 class="text-xl font-semibold mb-4 text-blue-600">Top Dogs Metrics Comparison</h2>
                    <div class="radar-chart-container">
                        <canvas id="radarChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Initialize app
        document.addEventListener('DOMContentLoaded', function() {
            // Constants
            const MAX_DOGS = 8;
            const METRICS = ['form', 'speed', 'consistency', 'track', 'recency'];
            const METRIC_LABELS = ['Form', 'Speed', 'Consistency', 'Track', 'Recency'];
            const METRIC_WEIGHTS = [0.8, 0.7, 0.6, 0.5, 0.4];
            
            // State
            let dogsData = [];
            let dogCount = 0;
            let probabilityChart = null;
            let radarChart = null;
            
            // DOM Elements
            const dogFormsContainer = document.getElementById('dogFormsContainer');
            const resultsText = document.getElementById('resultsText');
            const calculateBtn = document.getElementById('calculateBtn');
            const clearBtn = document.getElementById('clearBtn');
            const sampleBtn = document.getElementById('sampleBtn');
            const addDogBtn = document.getElementById('addDogBtn');
            const tabBtns = document.querySelectorAll('.tab-btn');
            const tabContents = document.querySelectorAll('.tab-content');
            
            // Initialize with 6 dogs (standard race size)
            for (let i = 0; i < 6; i++) {
                addDogForm();
            }
            
            // Event Listeners
            calculateBtn.addEventListener('click', calculatePredictions);
            clearBtn.addEventListener('click', clearAllData);
            sampleBtn.addEventListener('click', loadSampleData);
            addDogBtn.addEventListener('click', addDogForm);
            
            // Tab switching
            tabBtns.forEach(btn => {
                btn.addEventListener('click', () => {
                    const tabId = btn.getAttribute('data-tab');
                    
                    // Update active tab button
                    tabBtns.forEach(tb => {
                        tb.classList.remove('text-blue-600', 'border-blue-600');
                        tb.classList.add('text-gray-500');
                    });
                    btn.classList.add('text-blue-600', 'border-blue-600');
                    btn.classList.remove('text-gray-500');
                    
                    // Show selected tab content
                    tabContents.forEach(content => {
                        content.classList.remove('active');
                    });
                    document.getElementById(tabId).classList.add('active');
                });
            });
            
            // Functions
            function addDogForm() {
                if (dogCount >= MAX_DOGS) {
                    alert(`Maximum of ${MAX_DOGS} dogs allowed.`);
                    return;
                }
                
                const dogNum = dogCount + 1;
                const dogId = `dog-${dogNum}`;
                
                // Initialize dog data
                dogsData[dogCount] = {
                    id: dogId,
                    name: '',
                    form: 5,
                    speed: 5,
                    consistency: 5,
                    track: 5,
                    recency: 5
                };
                
                // Create form HTML
                const dogForm = document.createElement('div');
                dogForm.className = 'bg-white rounded-lg shadow-md p-6';
                dogForm.id = dogId;
                dogForm.innerHTML = `
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-lg font-medium text-gray-800">Dog ${dogNum}</h3>
                        <button class="remove-dog-btn text-red-500 hover:text-red-700" data-dog-id="${dogId}">
                            Remove
                        </button>
                    </div>
                    
                    <div class="mb-4">
                        <label for="${dogId}-name" class="block text-sm font-medium text-gray-700 mb-1">Dog Name</label>
                        <input type="text" id="${dogId}-name" class="dog-name-input w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Enter dog name">
                    </div>
                    
                    ${METRICS.map((metric, idx) => `
                        <div class="mb-3">
                            <div class="flex justify-between mb-1">
                                <label for="${dogId}-${metric}" class="block text-sm font-medium text-gray-700">
                                    ${METRIC_LABELS[idx]} 
                                    <span class="tooltip">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                        </svg>
                                        <span class="tooltiptext">${getMetricTooltip(METRIC_LABELS[idx])}</span>
                                    </span>
                                </label>
                                <span id="${dogId}-${metric}-value" class="text-sm font-medium text-blue-600">5.0</span>
                            </div>
                            <input type="range" id="${dogId}-${metric}" class="w-full metric-slider" min="0" max="10" step="0.1" value="5" data-dog-id="${dogId}" data-metric="${metric}">
                        </div>
                    `).join('')}
                `;
                
                dogFormsContainer.appendChild(dogForm);
                dogCount++;
                
                // Add event listeners for this dog's inputs
                document.getElementById(`${dogId}-name`).addEventListener('input', updateDogName);
                
                METRICS.forEach(metric => {
                    const slider = document.getElementById(`${dogId}-${metric}`);
                    slider.addEventListener('input', updateMetricValue);
                });
                
                // Add event listener for remove button
                document.querySelector(`button[data-dog-id="${dogId}"]`).addEventListener('click', removeDogForm);
            }
            
            function getMetricTooltip(metric) {
                const tips = {
                    'Form': 'Recent race positions (higher values for better positions)',
                    'Speed': 'Recent race times compared to competitors (higher for faster times)',
                    'Consistency': 'How reliably the dog performs in races (higher for more consistent results)',
                    'Track': 'Experience and performance at this particular track (higher for better track history)',
                    'Recency': 'How recent and relevant the form data is (higher for more recent good form)'
                };
                return tips[metric] || '';
            }
            
            function updateDogName(e) {
                const dogId = e.target.closest('.bg-white').id;
                const dogIndex = dogsData.findIndex(dog => dog.id === dogId);
                
                if (dogIndex !== -1) {
                    dogsData[dogIndex].name = e.target.value;
                }
            }
            
            function updateMetricValue(e) {
                const value = parseFloat(e.target.value);
                const metric = e.target.getAttribute('data-metric');
                const dogId = e.target.getAttribute('data-dog-id');
                const dogIndex = dogsData.findIndex(dog => dog.id === dogId);
                
                // Update the displayed value
                document.getElementById(`${dogId}-${metric}-value`).textContent = value.toFixed(1);
                
                // Update the data model
                if (dogIndex !== -1) {
                    dogsData[dogIndex][metric] = value;
                }
            }
            
            function removeDogForm(e) {
                const dogId = e.target.getAttribute('data-dog-id');
                const dogIndex = dogsData.findIndex(dog => dog.id === dogId);
                
                if (dogIndex !== -1) {
                    // Remove from DOM
                    document.getElementById(dogId).remove();
                    
                    // Remove from data model
                    dogsData.splice(dogIndex, 1);
                    dogCount--;
                    
                    // Reindex remaining dogs
                    const remainingForms = document.querySelectorAll('#dogFormsContainer > div');
                    remainingForms.forEach((form, index) => {
                        const newDogNum = index + 1;
                        form.querySelector('h3').textContent = `Dog ${newDogNum}`;
                    });
                }
            }
            
            function clearAllData() {
                // Clear all dog forms
                dogFormsContainer.innerHTML = '';
                
                // Reset data
                dogsData = [];
                dogCount = 0;
                
                // Reinitialize with 6 dogs
                for (let i = 0; i < 6; i++) {
                    addDogForm();
                }
                
                // Clear results
                resultsText.innerHTML = '<p class="text-gray-500 italic">No predictions calculated yet. Enter dog data and click "Calculate Predictions".</p>';
                
                // Clear charts
                if (probabilityChart) {
                    probabilityChart.destroy();
                    probabilityChart = null;
                }
                
                if (radarChart) {
                    radarChart.destroy();
                    radarChart = null;
                }
                
                // Switch to input tab
                document.querySelector('.tab-btn[data-tab="input"]').click();
            }
            
            function loadSampleData() {
                // Sample data based on the race card
                const sampleData = [
                    { name: "DA BOLD ROSE", form: 6.5, speed: 7.0, consistency: 8.0, track: 8.0, recency: 7.0 },
                    { name: "DOUBLE DROP", form: 7.0, speed: 8.5, consistency: 9.0, track: 8.0, recency: 7.5 },
                    { name: "QUENAGH MANILLA", form: 4.5, speed: 6.0, consistency: 6.5, track: 7.0, recency: 6.0 },
                    { name: "FLASHING MELODY", form: 7.0, speed: 8.5, consistency: 7.5, track: 7.5, recency: 8.0 },
                    { name: "DRYLAND ROXY", form: 6.0, speed: 6.5, consistency: 7.0, track: 7.0, recency: 6.5 },
                    { name: "GEM FRIENDLY", form: 9.5, speed: 8.0, consistency: 9.5, track: 8.0, recency: 9.0 }
                ];
                
                // Clear existing data
                clearAllData();
                
                // Load sample data
                sampleData.forEach((data, index) => {
                    if (index < dogCount) {
                        const dogId = dogsData[index].id;
                        
                        // Set name
                        document.getElementById(`${dogId}-name`).value = data.name;
                        dogsData[index].name = data.name;
                        
                        // Set metrics
                        METRICS.forEach(metric => {
                            document.getElementById(`${dogId}-${metric}`).value = data[metric];
                            document.getElementById(`${dogId}-${metric}-value`).textContent = data[metric].toFixed(1);
                            dogsData[index][metric] = data[metric];
                        });
                    }
                });
            }
            
            function calculatePredictions() {
                // Filter out dogs without names
                const validDogs = dogsData.filter(dog => dog.name.trim() !== '');
                
                if (validDogs.length < 2) {
                    alert("Please enter data for at least 2 dogs.");
                    return;
                }
                
                // Calculate scores
                const results = validDogs.map(dog => {
                    const score = METRICS.reduce((sum, metric, idx) => {
                        return sum + (dog[metric] * METRIC_WEIGHTS[idx]);
                    }, 0);
                    
                    return {
                        name: dog.name,
                        score: score,
                        form: dog.form,
                        speed: dog.speed,
                        consistency: dog.consistency,
                        track: dog.track,
                        recency: dog.recency
                    };
                });
                
                // Calculate win percentages
                const totalScore = results.reduce((sum, dog) => sum + dog.score, 0);
                
                results.forEach(dog => {
                    dog.percentage = (dog.score / totalScore) * 100;
                });
                
                // Sort by percentage (descending)
                results.sort((a, b) => b.percentage - a.percentage);
                
                // Display results
                displayTextResults(results);
                createCharts(results);
                
                // Switch to results tab
                document.querySelector('.tab-btn[data-tab="results"]').click();
            }
            
            function displayTextResults(results) {
                let html = `
                    <h3 class="text-xl font-bold mb-4 text-center">GREYHOUND RACE WIN PROBABILITY PREDICTIONS</h3>
                    <div class="border-b border-gray-300 mb-6"></div>
                `;
                
                // Display each dog's results
                results.forEach((dog, index) => {
                    html += `
                        <div class="mb-6 pb-4 ${index < results.length - 1 ? 'border-b border-gray-200' : ''}">
                            <div class="flex items-center mb-2">
                                <span class="bg-blue-600 text-white font-bold rounded-full w-8 h-8 flex items-center justify-center mr-3">${index + 1}</span>
                                <h4 class="text-lg font-semibold">${dog.name}</h4>
                            </div>
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <p class="text-sm text-gray-600">Win Probability: <span class="font-medium text-blue-600">${dog.percentage.toFixed(2)}%</span></p>
                                    <p class="text-sm text-gray-600">Total Score: <span class="font-medium text-blue-600">${dog.score.toFixed(2)}</span></p>
                                </div>
                                
                                <div>
                                    <p class="text-sm font-medium mb-1">Metrics (0-10 scale):</p>
                                    <div class="grid grid-cols-2 gap-2">
                                        <p class="text-sm text-gray-600">Form: <span class="font-medium">${dog.form.toFixed(1)}</span></p>
                                        <p class="text-sm text-gray-600">Speed: <span class="font-medium">${dog.speed.toFixed(1)}</span></p>
                                        <p class="text-sm text-gray-600">Consistency: <span class="font-medium">${dog.consistency.toFixed(1)}</span></p>
                                        <p class="text-sm text-gray-600">Track: <span class="font-medium">${dog.track.toFixed(1)}</span></p>
                                        <p class="text-sm text-gray-600">Recency: <span class="font-medium">${dog.recency.toFixed(1)}</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                });
                
                // Summary
                html += `
                    <div class="mt-6 pt-4 border-t border-gray-300">
                        <h4 class="text-lg font-semibold mb-2">ANALYSIS SUMMARY</h4>
                        <div class="border-b border-gray-300 mb-3 w-1/4"></div>
                `;
                
                if (results[0].percentage - results[1].percentage > 5) {
                    html += `
                        <p class="text-gray-700">${results[0].name} is the clear favorite with a ${results[0].percentage.toFixed(2)}% chance of winning.</p>
                    `;
                } else {
                    html += `
                        <p class="text-gray-700">The race appears competitive between ${results[0].name} (${results[0].percentage.toFixed(2)}%) and ${results[1].name} (${results[1].percentage.toFixed(2)}%).</p>
                    `;
                }
                
                html += `</div>`;
                
                resultsText.innerHTML = html;
            }
            
            function createCharts(results) {
                // Destroy existing charts if they exist
                if (probabilityChart) {
                    probabilityChart.destroy();
                }
                if (radarChart) {
                    radarChart.destroy();
                }
                
                // Create probability chart
                createProbabilityChart(results);
                
                // Create radar chart (only for top 3 dogs)
                createRadarChart(results.slice(0, 3));
            }
            
            function createProbabilityChart(results) {
                const ctx = document.getElementById('probabilityChart').getContext('2d');
                
                // Limit to top 6 dogs for better visualization
                const displayResults = results.slice(0, 6);
                
                const data = {
                    labels: displayResults.map(dog => dog.name),
                    datasets: [{
                        label: 'Win Probability %',
                        data: displayResults.map(dog => dog.percentage),
                        backgroundColor: [
                            'rgba(239, 68, 68, 0.7)',
                            'rgba(249, 115, 22, 0.7)',
                            'rgba(234, 179, 8, 0.7)',
                            'rgba(16, 185, 129, 0.7)',
                            'rgba(59, 130, 246, 0.7)',
                            'rgba(139, 92, 246, 0.7)'
                        ],
                        borderColor: [
                            'rgba(239, 68, 68, 1)',
                            'rgba(249, 115, 22, 1)',
                            'rgba(234, 179, 8, 1)',
                            'rgba(16, 185, 129, 1)',
                            'rgba(59, 130, 246, 1)',
                            'rgba(139, 92, 246, 1)'
                        ],
                        borderWidth: 1
                    }]
                };
                
                const options = {
                    indexAxis: 'y',
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return `${context.parsed.x}% win probability`;
                                }
                            }
                        },
                        datalabels: {
                            anchor: 'end',
                            align: 'end',
                            formatter: (value) => `${value.toFixed(1)}%`,
                            color: '#1f2937',
                            font: {
                                weight: 'bold'
                            }
                        }
                    },
                    scales: {
                        x: {
                            beginAtZero: true,
                            max: Math.min(100, Math.ceil(Math.max(...displayResults.map(dog => dog.percentage)) * 1.2)),
                            title: {
                                display: true,
                                text: 'Win Probability (%)'
                            }
                        },
                        y: {
                            ticks: {
                                autoSkip: false
                            }
                        }
                    }
                };
                
                probabilityChart = new Chart(ctx, {
                    type: 'bar',
                    data: data,
                    options: options,
                    plugins: [ChartDataLabels]
                });
            }
            
            function createRadarChart(results) {
                const ctx = document.getElementById('radarChart').getContext('2d');
                
                const data = {
                    labels: METRIC_LABELS,
                    datasets: results.map((dog, index) => ({
                        label: dog.name,
                        data: [dog.form, dog.speed, dog.consistency, dog.track, dog.recency],
                        backgroundColor: [
                            'rgba(239, 68, 68, 0.2)',
                            'rgba(234, 179, 8, 0.2)',
                            'rgba(59, 130, 246, 0.2)'
                        ][index],
                        borderColor: [
                            'rgba(239, 68, 68, 1)',
                            'rgba(234, 179, 8, 1)',
                            'rgba(59, 130, 246, 1)'
                        ][index],
                        borderWidth: 2,
                        pointBackgroundColor: [
                            'rgba(239, 68, 68, 1)',
                            'rgba(234, 179, 8, 1)',
                            'rgba(59, 130, 246, 1)'
                        ][index],
                        pointRadius: 4
                    }))
                };
                
                const options = {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return `${context.dataset.label}: ${context.raw}`;
                                }
                            }
                        }
                    },
                    scales: {
                        r: {
                            angleLines: {
                                display: true
                            },
                            suggestedMin: 0,
                            suggestedMax: 10,
                            ticks: {
                                stepSize: 2
                            }
                        }
                    }
                };
                
                radarChart = new Chart(ctx, {
                    type: 'radar',
                    data: data,
                    options: options
                });
            }
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=LMLK/greyhound-race-predictor" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>