Spaces:

MarcRyan
/

stp

Running

App Files Files Community

MarcRyan commited on May 5, 2025

Commit

4637fbe

verified ·

1 Parent(s): cee4955

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +677 -19
prompts.txt +2 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Stp
-emoji: 👁
-colorFrom: blue
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: stp
+emoji: 🐳
+colorFrom: green
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,677 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Soccer Team Performance Predictor</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/brain/0.6.3/brain.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .neuron {
+            transition: all 0.3s ease;
+        }
+        .neuron:hover {
+            transform: scale(1.1);
+        }
+        .network-container {
+            perspective: 1000px;
+        }
+        .layer {
+            transform-style: preserve-3d;
+        }
+        .connection {
+            stroke-dasharray: 1000;
+            stroke-dashoffset: 1000;
+            animation: draw 1.5s forwards;
+        }
+        @keyframes draw {
+            to {
+                stroke-dashoffset: 0;
+            }
+        }
+        .progress-ring__circle {
+            transition: stroke-dashoffset 0.35s;
+            transform: rotate(-90deg);
+            transform-origin: 50% 50%;
+        }
+        .team-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+        }
+        .team-card {
+            transition: all 0.3s ease;
+        }
+        .soccer-pitch {
+            background: linear-gradient(to bottom, #4ade80, #22c55e);
+            position: relative;
+            overflow: hidden;
+        }
+        .soccer-pitch::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 50%;
+            width: 2px;
+            height: 100%;
+            background: white;
+            transform: translateX(-50%);
+        }
+        .soccer-pitch::after {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 100px;
+            height: 100px;
+            border: 2px solid white;
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <header class="text-center mb-12">
+            <h1 class="text-4xl font-bold text-gray-800 mb-2">⚽ Soccer Team Performance Predictor</h1>
+            <p class="text-gray-600 max-w-2xl mx-auto">A neural network that predicts team loss probability based on key soccer performance metrics</p>
+        </header>
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Configuration Panel -->
+            <div class="bg-white rounded-xl shadow-md p-6">
+                <h2 class="text-xl font-semibold text-gray-800 mb-4">Network Configuration</h2>
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Hidden Layers</label>
+                        <input type="range" id="hiddenLayersInput" min="1" max="5" value="3" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
+                        <div class="flex justify-between text-xs text-gray-500">
+                            <span>1</span>
+                            <span>2</span>
+                            <span>3</span>
+                            <span>4</span>
+                            <span>5</span>
+                        </div>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Neurons per Layer</label>
+                        <input type="range" id="neuronsPerLayerInput" min="3" max="10" value="6" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
+                        <div class="flex justify-between text-xs text-gray-500">
+                            <span>3</span>
+                            <span>4</span>
+                            <span>5</span>
+                            <span>6</span>
+                            <span>7</span>
+                            <span>8</span>
+                            <span>9</span>
+                            <span>10</span>
+                        </div>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Learning Rate</label>
+                        <input type="range" id="learningRateInput" min="0.01" max="0.5" step="0.01" value="0.2" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
+                        <div class="flex justify-between text-xs text-gray-500">
+                            <span>0.01</span>
+                            <span>0.25</span>
+                            <span>0.5</span>
+                        </div>
+                    </div>
+                    <div class="flex space-x-3 pt-2">
+                        <button id="trainBtn" class="flex-1 bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg flex items-center justify-center">
+                            <i class="fas fa-brain mr-2"></i> Train Network
+                        </button>
+                        <button id="resetBtn" class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded-lg flex items-center justify-center">
+                            <i class="fas fa-redo mr-2"></i> Reset
+                        </button>
+                    </div>
+                </div>
+                <div class="mt-6">
+                    <h3 class="text-sm font-medium text-gray-700 mb-2">Training Status</h3>
+                    <div id="trainingStatus" class="text-sm text-gray-600 bg-gray-100 p-3 rounded-lg">
+                        Network not trained yet
+                    </div>
+                </div>
+            </div>
+            <!-- Network Visualization -->
+            <div class="bg-white rounded-xl shadow-md p-6">
+                <h2 class="text-xl font-semibold text-gray-800 mb-4">Network Architecture</h2>
+                <div id="networkVisualization" class="network-container h-64 flex justify-center items-center">
+                    <svg id="networkSvg" width="100%" height="100%" viewBox="0 0 500 300"></svg>
+                </div>
+                <div class="mt-6">
+                    <h3 class="text-sm font-medium text-gray-700 mb-2">Error Over Time</h3>
+                    <div class="bg-gray-100 p-2 rounded-lg">
+                        <canvas id="errorChart" height="150"></canvas>
+                    </div>
+                </div>
+            </div>
+            <!-- Prediction Panel -->
+            <div class="bg-white rounded-xl shadow-md p-6">
+                <h2 class="text-xl font-semibold text-gray-800 mb-4">Make a Prediction</h2>
+                <div class="space-y-3">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Goals Conceded per Game</label>
+                        <input id="goalsConcededInput" type="number" step="0.1" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500" placeholder="1.2">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Shots on Target per Game</label>
+                        <input id="shotsOnTargetInput" type="number" step="0.1" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500" placeholder="5.5">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Pass Accuracy %</label>
+                        <input id="passAccuracyInput" type="number" step="0.1" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500" placeholder="85.0">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Tackles per Game</label>
+                        <input id="tacklesInput" type="number" step="0.1" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500" placeholder="15.0">
+                    </div>
+                    <button id="predictBtn" class="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg mt-4 flex items-center justify-center">
+                        <i class="fas fa-calculator mr-2"></i> Predict Loss Probability
+                    </button>
+                    <div id="predictionResult" class="mt-4 p-4 rounded-lg bg-green-50 hidden">
+                        <h4 class="font-medium text-green-800 mb-1">Prediction Result</h4>
+                        <p id="predictionText" class="text-green-600"></p>
+                        <div class="mt-3 flex items-center">
+                            <div class="w-12 h-12 mr-3">
+                                <svg class="progress-ring" width="48" height="48">
+                                    <circle class="progress-ring__circle" stroke="#E5E7EB" stroke-width="4" fill="transparent" r="20" cx="24" cy="24"/>
+                                    <circle class="progress-ring__circle" stroke="#10B981" stroke-width="4" fill="transparent" r="20" cx="24" cy="24"/>
+                                </svg>
+                            </div>
+                            <div class="text-2xl font-bold text-green-600" id="predictionPercentage">0%</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Team Cards -->
+        <div class="mt-12">
+            <h2 class="text-2xl font-bold text-gray-800 mb-6">Top European Clubs</h2>
+            <div id="teamPredictions" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"></div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Configuration
+            const config = {
+                hiddenLayers: 3,
+                neuronsPerLayer: 6,
+                learningRate: 0.2,
+                iterations: 20000,
+                errorThresh: 0.005
+            };
+            // Sample soccer teams data
+            let soccerTeams = [
+                { name: "Manchester City", logo: "🔵", goalsConceded: 0.8, shotsOnTarget: 6.7, passAccuracy: 89.2, tackles: 12.3 },
+                { name: "Real Madrid", logo: "⚪", goalsConceded: 1.1, shotsOnTarget: 5.9, passAccuracy: 87.5, tackles: 14.2 },
+                { name: "Bayern Munich", logo: "🔴", goalsConceded: 0.9, shotsOnTarget: 6.3, passAccuracy: 88.1, tackles: 13.7 },
+                { name: "Liverpool", logo: "🔴", goalsConceded: 1.2, shotsOnTarget: 6.1, passAccuracy: 85.7, tackles: 15.8 },
+                { name: "Paris Saint-Germain", logo: "🔵", goalsConceded: 1.0, shotsOnTarget: 5.8, passAccuracy: 86.9, tackles: 11.9 },
+                { name: "Barcelona", logo: "🔵🔴", goalsConceded: 1.3, shotsOnTarget: 5.5, passAccuracy: 87.8, tackles: 12.5 },
+                { name: "Chelsea", logo: "🔵", goalsConceded: 1.4, shotsOnTarget: 4.9, passAccuracy: 84.3, tackles: 16.2 },
+                { name: "AC Milan", logo: "⚫🔴", goalsConceded: 1.2, shotsOnTarget: 4.7, passAccuracy: 83.5, tackles: 14.9 }
+            ];
+            // Initialize network
+            let net = new brain.NeuralNetwork();
+            let errorChart;
+            let trainingData = generateTrainingData();
+            // DOM Elements
+            const hiddenLayersInput = document.getElementById('hiddenLayersInput');
+            const neuronsPerLayerInput = document.getElementById('neuronsPerLayerInput');
+            const learningRateInput = document.getElementById('learningRateInput');
+            const trainBtn = document.getElementById('trainBtn');
+            const resetBtn = document.getElementById('resetBtn');
+            const goalsConcededInput = document.getElementById('goalsConcededInput');
+            const shotsOnTargetInput = document.getElementById('shotsOnTargetInput');
+            const passAccuracyInput = document.getElementById('passAccuracyInput');
+            const tacklesInput = document.getElementById('tacklesInput');
+            const predictBtn = document.getElementById('predictBtn');
+            const predictionResult = document.getElementById('predictionResult');
+            const predictionText = document.getElementById('predictionText');
+            const predictionPercentage = document.getElementById('predictionPercentage');
+            const teamPredictions = document.getElementById('teamPredictions');
+            const trainingStatus = document.getElementById('trainingStatus');
+            // Initialize UI
+            initUI();
+            drawNetwork();
+            initChart();
+            renderTeamCards();
+            // Event Listeners
+            hiddenLayersInput.addEventListener('input', updateConfig);
+            neuronsPerLayerInput.addEventListener('input', updateConfig);
+            learningRateInput.addEventListener('input', updateConfig);
+            trainBtn.addEventListener('click', trainNetwork);
+            resetBtn.addEventListener('click', resetNetwork);
+            predictBtn.addEventListener('click', predictLossProbability);
+            // Functions
+            function generateTrainingData() {
+                // Generate synthetic training data based on realistic soccer stats
+                const data = [];
+                for (let i = 0; i < 100; i++) {
+                    // Generate random but realistic soccer stats
+                    const goalsConceded = 0.5 + Math.random() * 2.5; // Between 0.5 and 3.0
+                    const shotsOnTarget = 2.0 + Math.random() * 6.0; // Between 2.0 and 8.0
+                    const passAccuracy = 70.0 + Math.random() * 25.0; // Between 70% and 95%
+                    const tackles = 8.0 + Math.random() * 12.0; // Between 8 and 20
+                    // Calculate a synthetic loss probability based on these stats
+                    // Better stats (fewer goals conceded, more shots on target, higher pass accuracy, more tackles)
+                    // should lead to lower loss probability
+                    let lossProbability =
+                        (goalsConceded / 3.0) * 0.4 + // Goals conceded contributes 40%
+                        ((8.0 - shotsOnTarget) / 6.0) * 0.3 + // Shots on target contributes 30%
+                        ((95.0 - passAccuracy) / 25.0) * 0.2 + // Pass accuracy contributes 20%
+                        ((20.0 - tackles) / 12.0) * 0.1; // Tackles contributes 10%
+                    // Add some randomness
+                    lossProbability += (Math.random() - 0.5) * 0.1;
+                    // Ensure between 0 and 1
+                    lossProbability = Math.max(0, Math.min(1, lossProbability));
+                    data.push({
+                        input: {
+                            goalsConceded: normalize(goalsConceded, 0.5, 3.0),
+                            shotsOnTarget: normalize(shotsOnTarget, 2.0, 8.0),
+                            passAccuracy: normalize(passAccuracy, 70.0, 95.0),
+                            tackles: normalize(tackles, 8.0, 20.0)
+                        },
+                        output: {
+                            loss: lossProbability
+                        }
+                    });
+                }
+                return data;
+            }
+            function normalize(value, min, max) {
+                return (value - min) / (max - min);
+            }
+            function denormalize(value, min, max) {
+                return value * (max - min) + min;
+            }
+            function initUI() {
+                // Set initial values from config
+                hiddenLayersInput.value = config.hiddenLayers;
+                neuronsPerLayerInput.value = config.neuronsPerLayer;
+                learningRateInput.value = config.learningRate;
+                // Initialize prediction progress ring
+                const circle = document.querySelector('.progress-ring__circle:last-child');
+                const radius = circle.r.baseVal.value;
+                const circumference = radius * 2 * Math.PI;
+                circle.style.strokeDasharray = circumference;
+                circle.style.strokeDashoffset = circumference;
+            }
+            function updateConfig() {
+                config.hiddenLayers = parseInt(hiddenLayersInput.value);
+                config.neuronsPerLayer = parseInt(neuronsPerLayerInput.value);
+                config.learningRate = parseFloat(learningRateInput.value);
+                drawNetwork();
+            }
+            function resetNetwork() {
+                net = new brain.NeuralNetwork();
+                trainingStatus.textContent = "Network reset - not trained";
+                trainingStatus.className = "text-sm text-gray-600 bg-gray-100 p-3 rounded-lg";
+                // Reset chart
+                if (errorChart) {
+                    errorChart.data.labels = [];
+                    errorChart.data.datasets[0].data = [];
+                    errorChart.update();
+                }
+                // Hide prediction result
+                predictionResult.classList.add('hidden');
+            }
+            function trainNetwork() {
+                trainBtn.disabled = true;
+                trainBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Training...';
+                trainingStatus.textContent = "Training in progress...";
+                trainingStatus.className = "text-sm text-green-600 bg-green-100 p-3 rounded-lg";
+                // Configure network
+                net = new brain.NeuralNetwork({
+                    hiddenLayers: [Array(config.hiddenLayers).fill(config.neuronsPerLayer)].flat(),
+                    learningRate: config.learningRate,
+                    iterations: config.iterations,
+                    errorThresh: config.errorThresh,
+                    log: true,
+                    logPeriod: 1000,
+                    callback: function(info) {
+                        updateTrainingStatus(info.iterations, info.error);
+                        updateChart(info.iterations, info.error);
+                    },
+                    callbackPeriod: 1000
+                });
+                // Train in a timeout to allow UI to update
+                setTimeout(() => {
+                    net.train(trainingData, (err, info) => {
+                        trainBtn.disabled = false;
+                        trainBtn.innerHTML = '<i class="fas fa-brain mr-2"></i> Train Network';
+                        if (err) {
+                            trainingStatus.textContent = "Training failed: " + err;
+                            trainingStatus.className = "text-sm text-red-600 bg-red-100 p-3 rounded-lg";
+                        } else {
+                            trainingStatus.textContent = `Training complete! Final error: ${info.error.toFixed(6)} after ${info.iterations} iterations`;
+                            trainingStatus.className = "text-sm text-green-600 bg-green-100 p-3 rounded-lg";
+                        }
+                        // Animate network connections
+                        animateNetwork();
+                    });
+                }, 100);
+            }
+            function updateTrainingStatus(iterations, error) {
+                trainingStatus.textContent = `Training... Iteration: ${iterations}, Error: ${error.toFixed(6)}`;
+            }
+            function initChart() {
+                const ctx = document.getElementById('errorChart').getContext('2d');
+                errorChart = new Chart(ctx, {
+                    type: 'line',
+                    data: {
+                        labels: [],
+                        datasets: [{
+                            label: 'Training Error',
+                            data: [],
+                            borderColor: 'rgb(16, 185, 129)',
+                            backgroundColor: 'rgba(16, 185, 129, 0.1)',
+                            borderWidth: 2,
+                            tension: 0.4,
+                            fill: true
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        scales: {
+                            y: {
+                                beginAtZero: true,
+                                title: {
+                                    display: true,
+                                    text: 'Error'
+                                }
+                            },
+                            x: {
+                                title: {
+                                    display: true,
+                                    text: 'Iterations'
+                                }
+                            }
+                        },
+                        plugins: {
+                            legend: {
+                                display: false
+                            },
+                            tooltip: {
+                                callbacks: {
+                                    label: function(context) {
+                                        return `Error: ${context.parsed.y.toFixed(6)}`;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                });
+            }
+            function updateChart(iteration, error) {
+                errorChart.data.labels.push(iteration);
+                errorChart.data.datasets[0].data.push(error);
+                errorChart.update();
+            }
+            function drawNetwork() {
+                const svg = document.getElementById('networkSvg');
+                svg.innerHTML = '';
+                const width = 500;
+                const height = 300;
+                const layerCount = config.hiddenLayers + 2; // Input + hidden + output
+                const neuronRadius = 15;
+                // Draw layers
+                for (let layer = 0; layer < layerCount; layer++) {
+                    const isInput = layer === 0;
+                    const isOutput = layer === layerCount - 1;
+                    let neuronCount;
+                    if (isInput) neuronCount = 4; // 4 input features
+                    else if (isOutput) neuronCount = 1; // 1 output (loss probability)
+                    else neuronCount = config.neuronsPerLayer;
+                    const layerX = 50 + (width - 100) * (layer / (layerCount - 1));
+                    // Draw neurons
+                    for (let n = 0; n < neuronCount; n++) {
+                        const neuronY = height / 2 + (n - (neuronCount - 1) / 2) * 40;
+                        // Neuron circle
+                        const neuron = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+                        neuron.setAttribute("cx", layerX);
+                        neuron.setAttribute("cy", neuronY);
+                        neuron.setAttribute("r", neuronRadius);
+                        neuron.setAttribute("class", "neuron");
+                        if (isInput) {
+                            neuron.setAttribute("fill", "#4ADE80"); // Green for input
+                        } else if (isOutput) {
+                            neuron.setAttribute("fill", "#3B82F6"); // Blue for output
+                        } else {
+                            neuron.setAttribute("fill", "#F59E0B"); // Yellow for hidden
+                        }
+                        svg.appendChild(neuron);
+                        // Neuron label
+                        if (isInput) {
+                            const labels = ["Goals Conceded", "Shots on Target", "Pass %", "Tackles"];
+                            const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
+                            text.setAttribute("x", layerX - 50);
+                            text.setAttribute("y", neuronY + 5);
+                            text.setAttribute("text-anchor", "end");
+                            text.setAttribute("class", "text-xs font-medium fill-gray-700");
+                            text.textContent = labels[n];
+                            svg.appendChild(text);
+                        } else if (isOutput) {
+                            const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
+                            text.setAttribute("x", layerX + 50);
+                            text.setAttribute("y", neuronY + 5);
+                            text.setAttribute("text-anchor", "start");
+                            text.setAttribute("class", "text-xs font-medium fill-gray-700");
+                            text.textContent = "Loss %";
+                            svg.appendChild(text);
+                        }
+                    }
+                }
+            }
+            function animateNetwork() {
+                const svg = document.getElementById('networkSvg');
+                const connections = [];
+                const width = 500;
+                const height = 300;
+                const layerCount = config.hiddenLayers + 2;
+                const neuronRadius = 15;
+                // Create connections between layers
+                for (let layer = 0; layer < layerCount - 1; layer++) {
+                    const isFirstLayer = layer === 0;
+                    const isLastLayer = layer === layerCount - 2;
+                    let fromNeuronCount;
+                    if (isFirstLayer) fromNeuronCount = 4;
+                    else fromNeuronCount = config.neuronsPerLayer;
+                    let toNeuronCount;
+                    if (isLastLayer) toNeuronCount = 1;
+                    else toNeuronCount = config.neuronsPerLayer;
+                    const fromLayerX = 50 + (width - 100) * (layer / (layerCount - 1));
+                    const toLayerX = 50 + (width - 100) * ((layer + 1) / (layerCount - 1));
+                    for (let from = 0; from < fromNeuronCount; from++) {
+                        const fromY = height / 2 + (from - (fromNeuronCount - 1) / 2) * 40;
+                        for (let to = 0; to < toNeuronCount; to++) {
+                            const toY = height / 2 + (to - (toNeuronCount - 1) / 2) * 40;
+                            const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+                            line.setAttribute("x1", fromLayerX + neuronRadius);
+                            line.setAttribute("y1", fromY);
+                            line.setAttribute("x2", toLayerX - neuronRadius);
+                            line.setAttribute("y2", toY);
+                            line.setAttribute("stroke", "#9CA3AF");
+                            line.setAttribute("stroke-width", "1");
+                            line.setAttribute("class", "connection");
+                            svg.appendChild(line);
+                            connections.push(line);
+                        }
+                    }
+                }
+                // Animate connections with staggered delay
+                connections.forEach((conn, i) => {
+                    setTimeout(() => {
+                        conn.style.strokeDashoffset = "0";
+                    }, i * 20);
+                });
+            }
+            function predictLossProbability() {
+                if (!net.trainOpts) {
+                    predictionText.textContent = "Please train the network first";
+                    predictionResult.classList.remove('hidden');
+                    predictionResult.className = "mt-4 p-4 rounded-lg bg-yellow-50";
+                    return;
+                }
+                // Get input values
+                const goalsConceded = parseFloat(goalsConcededInput.value) || 1.2;
+                const shotsOnTarget = parseFloat(shotsOnTargetInput.value) || 5.5;
+                const passAccuracy = parseFloat(passAccuracyInput.value) || 85.0;
+                const tackles = parseFloat(tacklesInput.value) || 15.0;
+                // Normalize inputs
+                const normalizedInput = {
+                    goalsConceded: normalize(goalsConceded, 0.5, 3.0),
+                    shotsOnTarget: normalize(shotsOnTarget, 2.0, 8.0),
+                    passAccuracy: normalize(passAccuracy, 70.0, 95.0),
+                    tackles: normalize(tackles, 8.0, 20.0)
+                };
+                // Make prediction
+                const output = net.run(normalizedInput);
+                const lossProbability = output.loss;
+                const percentage = Math.round(lossProbability * 100);
+                // Display result
+                predictionText.textContent = `Based on the team's stats (Goals Conceded: ${goalsConceded.toFixed(1)}, Shots on Target: ${shotsOnTarget.toFixed(1)}, Pass Accuracy: ${passAccuracy.toFixed(1)}%, Tackles: ${tackles.toFixed(1)}), the predicted loss probability is:`;
+                predictionPercentage.textContent = `${percentage}%`;
+                // Update progress ring
+                const circle = document.querySelector('.progress-ring__circle:last-child');
+                const radius = circle.r.baseVal.value;
+                const circumference = radius * 2 * Math.PI;
+                const offset = circumference - (percentage / 100) * circumference;
+                circle.style.strokeDashoffset = offset;
+                // Set color based on probability
+                if (percentage > 70) {
+                    circle.style.stroke = "#EF4444"; // red
+                    predictionPercentage.className = "text-2xl font-bold text-red-600";
+                } else if (percentage > 50) {
+                    circle.style.stroke = "#F59E0B"; // orange
+                    predictionPercentage.className = "text-2xl font-bold text-yellow-600";
+                } else {
+                    circle.style.stroke = "#10B981"; // green
+                    predictionPercentage.className = "text-2xl font-bold text-green-600";
+                }
+                predictionResult.classList.remove('hidden');
+                predictionResult.className = "mt-4 p-4 rounded-lg bg-green-50";
+            }
+            function renderTeamCards() {
+                teamPredictions.innerHTML = '';
+                soccerTeams.forEach(team => {
+                    const card = document.createElement('div');
+                    card.className = 'bg-white rounded-lg shadow-md p-4 team-card hover:shadow-lg transition-all';
+                    card.innerHTML = `
+                        <div class="flex items-center mb-3">
+                            <div class="text-2xl mr-3">${team.logo}</div>
+                            <h3 class="font-semibold text-gray-800">${team.name}</h3>
+                        </div>
+                        <div class="grid grid-cols-2 gap-2 text-sm mb-3">
+                            <div><span class="text-gray-500">Goals Conceded:</span> ${team.goalsConceded.toFixed(1)}</div>
+                            <div><span class="text-gray-500">Shots on Target:</span> ${team.shotsOnTarget.toFixed(1)}</div>
+                            <div><span class="text-gray-500">Pass %:</span> ${team.passAccuracy.toFixed(1)}%</div>
+                            <div><span class="text-gray-500">Tackles:</span> ${team.tackles.toFixed(1)}</div>
+                        </div>
+                        <div class="flex items-center">
+                            <button class="w-full bg-green-100 hover:bg-green-200 text-green-800 py-2 px-3 rounded flex items-center justify-center predict-btn" data-team='${JSON.stringify(team)}'>
+                                <i class="fas fa-calculator mr-2 text-xs"></i> Predict Performance
+                            </button>
+                        </div>
+                    `;
+                    teamPredictions.appendChild(card);
+                });
+                // Add event listeners to predict buttons
+                document.querySelectorAll('.predict-btn').forEach(btn => {
+                    btn.addEventListener('click', function() {
+                        const team = JSON.parse(this.getAttribute('data-team'));
+                        goalsConcededInput.value = team.goalsConceded;
+                        shotsOnTargetInput.value = team.shotsOnTarget;
+                        passAccuracyInput.value = team.passAccuracy;
+                        tacklesInput.value = team.tackles;
+                        if (net.trainOpts) {
+                            predictLossProbability();
+                        } else {
+                            predictionText.textContent = "Please train the network first";
+                            predictionResult.classList.remove('hidden');
+                            predictionResult.className = "mt-4 p-4 rounded-lg bg-yellow-50";
+                        }
+                    });
+                });
+            }
+        });
+    </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=MarcRyan/stp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ put this in a browser <!DOCTYPE html> <html> <head> <title>My app</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta charset="utf-8"> <style> body { display: flex; justify-content: center; align-items: center; overflow: hidden; height: 100dvh; font-family: "Arial", sans-serif; text-align: center; } .arrow { position: absolute; bottom: 32px; left: 0px; width: 100px; transform: rotate(30deg); } h1 { font-size: 50px; } h1 span { color: #acacac; font-size: 32px; } </style> </head> <body> <h1> <span>I'm ready to work,</span><br /> Ask me anything. </h1> <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="arrow" /> <script></script> </body> </html>
2	+ make this but for soccer - <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Baseball Team Performance Predictor</title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/brain/0.6.3/brain.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> .neuron { transition: all 0.3s ease; } .neuron:hover { transform: scale(1.1); } .network-container { perspective: 1000px; } .layer { transform-style: preserve-3d; } .connection { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw 1.5s forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } .progress-ring__circle { transition: stroke-dashoffset 0.35s; transform: rotate(-90deg); transform-origin: 50% 50%; } .team-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } .team-card { transition: all 0.3s ease; } </style> </head> <body class="bg-gray-50 min-h-screen"> <div class="container mx-auto px-4 py-8"> <header class="text-center mb-12"> <h1 class="text-4xl font-bold text-gray-800 mb-2">⚾ Baseball Team Performance Predictor</h1> <p class="text-gray-600 max-w-2xl mx-auto">A neural network that predicts team loss probability based on key performance metrics</p> </header> <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> <!-- Configuration Panel --> <div class="bg-white rounded-xl shadow-md p-6"> <h2 class="text-xl font-semibold text-gray-800 mb-4">Network Configuration</h2> <div class="space-y-4"> <div> <label class="block text-sm font-medium text-gray-700 mb-1">Hidden Layers</label> <input type="range" id="hiddenLayersInput" min="1" max="5" value="3" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> <div class="flex justify-between text-xs text-gray-500"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">Neurons per Layer</label> <input type="range" id="neuronsPerLayerInput" min="3" max="10" value="6" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> <div class="flex justify-between text-xs text-gray-500"> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span> <span>9</span> <span>10</span> </div> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">Learning Rate</label> <input type="range" id="learningRateInput" min="0.01" max="0.5" step="0.01" value="0.2" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> <div class="flex justify-between text-xs text-gray-500"> <span>0.01</span> <span>0.25</span> <span>0.5</span> </div> </div> <div class="flex space-x-3 pt-2"> <button id="trainBtn" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center justify-center"> <i class="fas fa-brain mr-2"></i> Train Network </button> <button id="resetBtn" class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded-lg flex items-center justify-center"> <i class="fas fa-redo mr-2"></i> Reset </button> </div> </div> <div class="mt-6"> <h3 class="text-sm font-medium text-gray-700 mb-2">Training Status</h3> <div id="trainingStatus" class="text-sm text-gray-600 bg-gray-100 p-3 rounded-lg"> Network not trained yet </div> </div> </div> <!-- Network Visualization --> <div class="bg-white rounded-xl shadow-md p-6"> <h2 class="text-xl font-semibold text-gray-800 mb-4">Network Architecture</h2> <div id="networkVisualization" class="network-container h-64 flex justify-center items-center"> <svg id="networkSvg" width="100%" height="100%" viewBox="0 0 500 300"></svg> </div> <div class="mt-6"> <h3 class="text-sm font-medium text-gray-700 mb-2">Error Over Time</h3> <div class="bg-gray-100 p-2 rounded-lg"> <canvas id="errorChart" height="150"></canvas> </div> </div> </div> <!-- Prediction Panel --> <div class="bg-white rounded-xl shadow-md p-6"> <h2 class="text-xl font-semibold text-gray-800 mb-4">Make a Prediction</h2> <div class="space-y-3"> <div> <label class="block text-sm font-medium text-gray-700 mb-1">Team ERA</label> <input id="eraInput" type="number" step="0.01" class="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="4.50"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">Team Batting Average</label> <input id="baInput" type="number" step="0.001" class="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="0.250"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">Home Runs</label> <input id="hrInput" type="number" class="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="150"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">Fielding Errors</label> <input id="errorsInput" type="number" class="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="100"> </div> <button id="predictBtn" class="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg mt-4 flex items-center justify-center"> <i class="fas fa-calculator mr-2"></i> Predict Loss Probability </button> <div id="predictionResult" class="mt-4 p-4 rounded-lg bg-blue-50 hidden"> <h4 class="font-medium text-blue-800 mb-1">Prediction Result</h4> <p id="predictionText" class="text-blue-600"></p> <div class="mt-3 flex items-center"> <div class="w-12 h-12 mr-3"> <svg class="progress-ring" width="48" height="48"> <circle class="progress-ring__circle" stroke="#E5E7EB" stroke-width="4" fill="transparent" r="20" cx="24" cy="24"/> <circle class="progress-ring__circle" stroke="#3B82F6" stroke-width="4" fill="transparent" r="20" cx="24" cy="24"/> </svg> </div> <div class="text-2xl font-bold text-blue-600" id="predictionPercentage">0%</div> </div> </div> </div> </div> </div> <!-- Team Cards --> <div class="mt-12"> <h2 class="text-2xl font-bold text-gray-800 mb-6">MLB Teams</h2> <div id="teamPredictions" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"></div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Configuration const config = { hiddenLayers: 3, neuronsPerLayer: 6, learningRate: 0.2, iterations: 20000, errorThresh: 0.005 }; // Sample baseball teams data let baseballTeams = [ { name: "New York Yankees", logo: "🏆", era: 3.75, ba: 0.257, hr: 245, errors: 85 }, { name: "Los Angeles Dodgers", logo: "🔵", era: 3.42, ba: 0.263, hr: 235, errors: 78 }, { name: "Houston Astros", logo: "🌟", era: 3.68, ba: 0.261, hr: 221, errors: 92 }, { name: "Atlanta Braves", logo: "🔴", era: 3.89, ba: 0.255, hr: 239, errors: 87 }, { name: "Boston Red Sox", logo: "🧦", era: 4.12, ba: 0.249, hr: 198, errors: 105 }, { name: "Chicago Cubs", logo: "🐻", era: 4.05, ba: 0.242, hr: 187, errors: 112 }, { name: "San Francisco Giants", logo: "🌉", era: 3.95, ba: 0.247, hr: 176, errors: 98 }, { name: "St. Louis Cardinals", logo: "🐦", era: 3.78, ba: 0.254, hr: 203, errors: 89 } ]; // Initialize network let net = new brain.NeuralNetwork(); let errorChart; let trainingData = generateTrainingData(); // DOM Elements const hiddenLayersInput = document.getElementById('hiddenLayersInput'); const neuronsPerLayerInput = document.getElementById('neuronsPerLayerInput'); const learningRateInput = document.getElementById('learningRateInput'); const trainBtn = document.getElementById('trainBtn'); const resetBtn = document.getElementById('resetBtn'); const eraInput = document.getElementById('eraInput'); const baInput = document.getElementById('baInput'); const hrInput = document.getElementById('hrInput'); const errorsInput = document.getElementById('errorsInput'); const predictBtn = document.getElementById('predictBtn'); const predictionResult = document.getElementById('predictionResult'); const predictionText = document.getElementById('predictionText'); const predictionPercentage = document.getElementById('predictionPercentage'); const teamPredictions = document.getElementById('teamPredictions'); const trainingStatus = document.getElementById('trainingStatus'); // Initialize UI initUI(); drawNetwork(); initChart(); renderTeamCards(); // Event Listeners hiddenLayersInput.addEventListener('input', updateConfig); neuronsPerLayerInput.addEventListener('input', updateConfig); learningRateInput.addEventListener('input', updateConfig); trainBtn.addEventListener('click', trainNetwork); resetBtn.addEventListener('click', resetNetwork); predictBtn.addEventListener('click', predictLossProbability); // Functions function generateTrainingData() { // Generate synthetic training data based on realistic baseball stats const data = []; for (let i = 0; i < 100; i++) { // Generate random but realistic baseball stats const era = 2.5 + Math.random() * 3.5; // ERA between 2.5 and 6.0 const ba = 0.220 + Math.random() * 0.080; // BA between .220 and .300 const hr = 100 + Math.random() * 200; // HR between 100 and 300 const errors = 50 + Math.random() * 100; // Errors between 50 and 150 // Calculate a synthetic loss probability based on these stats // Better stats (lower ERA, higher BA, more HR, fewer errors) should lead to lower loss probability let lossProbability = (era / 6.0) * 0.4 + // ERA contributes 40% ((0.300 - ba) / 0.080) * 0.3 + // BA contributes 30% ((300 - hr) / 200) * 0.2 + // HR contributes 20% (errors / 150) * 0.1; // Errors contribute 10% // Add some randomness lossProbability += (Math.random() - 0.5) * 0.1; // Ensure between 0 and 1 lossProbability = Math.max(0, Math.min(1, lossProbability)); data.push({ input: { era: normalize(era, 2.5, 6.0), ba: normalize(ba, 0.220, 0.300), hr: normalize(hr, 100, 300), errors: normalize(errors, 50, 150) }, output: { loss: lossProbability } }); } return data; } function normalize(value, min, max) { return (value - min) / (max - min); } function denormalize(value, min, max) { return value * (max - min) + min; } function initUI() { // Set initial values from config hiddenLayersInput.value = config.hiddenLayers; neuronsPerLayerInput.value = config.neuronsPerLayer; learningRateInput.value = config.learningRate; // Initialize prediction progress ring const circle = document.querySelector('.progress-ring__circle:last-child'); const radius = circle.r.baseVal.value; const circumference = radius * 2 * Math.PI; circle.style.strokeDasharray = circumference; circle.style.strokeDashoffset = circumference; } function updateConfig() { config.hiddenLayers = parseInt(hiddenLayersInput.value); config.neuronsPerLayer = parseInt(neuronsPerLayerInput.value); config.learningRate = parseFloat(learningRateInput.value); drawNetwork(); } function resetNetwork() { net = new brain.NeuralNetwork(); trainingStatus.textContent = "Network reset - not trained"; trainingStatus.className = "text-sm text-gray-600 bg-gray-100 p-3 rounded-lg"; // Reset chart if (errorChart) { errorChart.data.labels = []; errorChart.data.datasets[0].data = []; errorChart.update(); } // Hide prediction result predictionResult.classList.add('hidden'); } function trainNetwork() { trainBtn.disabled = true; trainBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Training...'; trainingStatus.textContent = "Training in progress..."; trainingStatus.className = "text-sm text-blue-600 bg-blue-100 p-3 rounded-lg"; // Configure network net = new brain.NeuralNetwork({ hiddenLayers: [Array(config.hiddenLayers).fill(config.neuronsPerLayer)].flat(), learningRate: config.learningRate, iterations: config.iterations, errorThresh: config.errorThresh, log: true, logPeriod: 1000, callback: function(info) { updateTrainingStatus(info.iterations, info.error); updateChart(info.iterations, info.error); }, callbackPeriod: 1000 }); // Train in a timeout to allow UI to update setTimeout(() => { net.train(trainingData, (err, info) => { trainBtn.disabled = false; trainBtn.innerHTML = '<i class="fas fa-brain mr-2"></i> Train Network'; if (err) { trainingStatus.textContent = "Training failed: " + err; trainingStatus.className = "text-sm text-red-600 bg-red-100 p-3 rounded-lg"; } else { trainingStatus.textContent = `Training complete! Final error: ${info.error.toFixed(6)} after ${info.iterations} iterations`; trainingStatus.className = "text-sm text-green-600 bg-green-100 p-3 rounded-lg"; } // Animate network connections animateNetwork(); }); }, 100); } function updateTrainingStatus(iterations, error) { trainingStatus.textContent = `Training... Iteration: ${iterations}, Error: ${error.toFixed(6)}`; } function initChart() { const ctx = document.getElementById('errorChart').getContext('2d'); errorChart = new Chart(ctx, { type: 'line', data: { labels: [], datasets: [{ label: 'Training Error', data: [], borderColor: 'rgb(99, 102, 241)', backgroundColor: 'rgba(99, 102, 241, 0.1)', borderWidth: 2, tension: 0.4, fill: true }] }, options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, title: { display: true, text: 'Error' } }, x: { title: { display: true, text: 'Iterations' } } }, plugins: { legend: { display: false }, tooltip: { callbacks: { label: function(context) { return `Error: ${context.parsed.y.toFixed(6)}`; } } } } } }); } function updateChart(iteration, error) { errorChart.data.labels.push(iteration); errorChart.data.datasets[0].data.push(error); errorChart.update(); } function drawNetwork() { const svg = document.getElementById('networkSvg'); svg.innerHTML = ''; const width = 500; const height = 300; const layerCount = config.hiddenLayers + 2; // Input + hidden + output const neuronRadius = 15; // Draw layers for (let layer = 0; layer < layerCount; layer++) { const isInput = layer === 0; const isOutput = layer === layerCount - 1; let neuronCount; if (isInput) neuronCount = 4; // 4 input features else if (isOutput) neuronCount = 1; // 1 output (loss probability) else neuronCount = config.neuronsPerLayer; const layerX = 50 + (width - 100) * (layer / (layerCount - 1)); // Draw neurons for (let n = 0; n < neuronCount; n++) { const neuronY = height / 2 + (n - (neuronCount - 1) / 2) * 40; // Neuron circle const neuron = document.createElementNS("http://www.w3.org/2000/svg", "circle"); neuron.setAttribute("cx", layerX); neuron.setAttribute("cy", neuronY); neuron.setAttribute("r", neuronRadius); neuron.setAttribute("class", "neuron"); if (isInput) { neuron.setAttribute("fill", "#60A5FA"); // Blue for input } else if (isOutput) { neuron.setAttribute("fill", "#10B981"); // Green for output } else { neuron.setAttribute("fill", "#F59E0B"); // Yellow for hidden } svg.appendChild(neuron); // Neuron label if (isInput) { const labels = ["ERA", "BA", "HR", "Errors"]; const text = document.createElementNS("http://www.w3.org/2000/svg", "text"); text.setAttribute("x", layerX - 50); text.setAttribute("y", neuronY + 5); text.setAttribute("text-anchor", "end"); text.setAttribute("class", "text-xs font-medium fill-gray-700"); text.textContent = labels[n]; svg.appendChild(text); } else if (isOutput) { const text = document.createElementNS("http://www.w3.org/2000/svg", "text"); text.setAttribute("x", layerX + 50); text.setAttribute("y", neuronY + 5); text.setAttribute("text-anchor", "start"); text.setAttribute("class", "text-xs font-medium fill-gray-700"); text.textContent = "Loss %"; svg.appendChild(text); } } } } function animateNetwork() { const svg = document.getElementById('networkSvg'); const connections = []; const width = 500; const height = 300; const layerCount = config.hiddenLayers + 2; const neuronRadius = 15; // Create connections between layers for (let layer = 0; layer < layerCount - 1; layer++) { const isFirstLayer = layer === 0; const isLastLayer = layer === layerCount - 2; let fromNeuronCount; if (isFirstLayer) fromNeuronCount = 4; else fromNeuronCount = config.neuronsPerLayer; let toNeuronCount; if (isLastLayer) toNeuronCount = 1; else toNeuronCount = config.neuronsPerLayer; const fromLayerX = 50 + (width - 100) * (layer / (layerCount - 1)); const toLayerX = 50 + (width - 100) * ((layer + 1) / (layerCount - 1)); for (let from = 0; from < fromNeuronCount; from++) { const fromY = height / 2 + (from - (fromNeuronCount - 1) / 2) * 40; for (let to = 0; to < toNeuronCount; to++) { const toY = height / 2 + (to - (toNeuronCount - 1) / 2) * 40; const line = document.createElementNS("http://www.w3.org/2000/svg", "line"); line.setAttribute("x1", fromLayerX + neuronRadius); line.setAttribute("y1", fromY); line.setAttribute("x2", toLayerX - neuronRadius); line.setAttribute("y2", toY); line.setAttribute("stroke", "#9CA3AF"); line.setAttribute("stroke-width", "1"); line.setAttribute("class", "connection"); svg.appendChild(line); connections.push(line); } } } // Animate connections with staggered delay connections.forEach((conn, i) => { setTimeout(() => { conn.style.strokeDashoffset = "0"; }, i * 20); }); } function predictLossProbability() { if (!net.trainOpts) { predictionText.textContent = "Please train the network first"; predictionResult.classList.remove('hidden'); predictionResult.className = "mt-4 p-4 rounded-lg bg-yellow-50"; return; } // Get input values const era = parseFloat(eraInput.value) \|\| 4.50; const ba = parseFloat(baInput.value) \|\| 0.250; const hr = parseInt(hrInput.value) \|\| 150; const errors = parseInt(errorsInput.value) \|\| 100; // Normalize inputs const normalizedInput = { era: normalize(era, 2.5, 6.0), ba: normalize(ba, 0.220, 0.300), hr: normalize(hr, 100, 300), errors: normalize(errors, 50, 150) }; // Make prediction const output = net.run(normalizedInput); const lossProbability = output.loss; const percentage = Math.round(lossProbability * 100); // Display result predictionText.textContent = `Based on the team's stats (ERA: ${era.toFixed(2)}, BA: ${ba.toFixed(3)}, HR: ${hr}, Errors: ${errors}), the predicted loss probability is:`; predictionPercentage.textContent = `${percentage}%`; // Update progress ring const circle = document.querySelector('.progress-ring__circle:last-child'); const radius = circle.r.baseVal.value; const circumference = radius * 2 * Math.PI; const offset = circumference - (percentage / 100) * circumference; circle.style.strokeDashoffset = offset; // Set color based on probability if (percentage > 70) { circle.style.stroke = "#EF4444"; // red predictionPercentage.className = "text-2xl font-bold text-red-600"; } else if (percentage > 50) { circle.style.stroke = "#F59E0B"; // orange predictionPercentage.className = "text-2xl font-bold text-yellow-600"; } else { circle.style.stroke = "#10B981"; // green predictionPercentage.className = "text-2xl font-bold text-green-600"; } predictionResult.classList.remove('hidden'); predictionResult.className = "mt-4 p-4 rounded-lg bg-blue-50"; } function renderTeamCards() { teamPredictions.innerHTML = ''; baseballTeams.forEach(team => { const card = document.createElement('div'); card.className = 'bg-white rounded-lg shadow-md p-4 team-card hover:shadow-lg transition-all'; card.innerHTML = ` <div class="flex items-center mb-3"> <div class="text-2xl mr-3">${team.logo}</div> <h3 class="font-semibold text-gray-800">${team.name}</h3> </div> <div class="grid grid-cols-2 gap-2 text-sm mb-3"> <div><span class="text-gray-500">ERA:</span> ${team.era.toFixed(2)}</div> <div><span class="text-gray-500">BA:</span> ${team.ba.toFixed(3)}</div> <div><span class="text-gray-500">HR:</span> ${team.hr}</div> <div><span class="text-gray-500">Errors:</span> ${team.errors}</div> </div> <div class="flex items-center"> <button class="w-full bg-blue-100 hover:bg-blue-200 text-blue-800 py-2 px-3 rounded flex items-center justify-center predict-btn" data-team='${JSON.stringify(team)}'> <i class="fas fa-calculator mr-2 text-xs"></i> Predict Performance </button> </div> `; teamPredictions.appendChild(card); }); // Add event listeners to predict buttons document.querySelectorAll('.predict-btn').forEach(btn => { btn.addEventListener('click', function() { const team = JSON.parse(this.getAttribute('data-team')); eraInput.value = team.era; baInput.value = team.ba; hrInput.value = team.hr; errorsInput.value = team.errors; if (net.trainOpts) { predictLossProbability(); } else { predictionText.textContent = "Please train the network first"; predictionResult.classList.remove('hidden'); predictionResult.className = "mt-4 p-4 rounded-lg bg-yellow-50"; } }); }); } }); </script> </body> </html>