Spaces:

MarcRyan
/

btp

Running

App Files Files Community

MarcRyan commited on May 5, 2025

Commit

b6bd467

verified ·

1 Parent(s): d03ff90

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +650 -19
prompts.txt +1 -0

README.md CHANGED Viewed

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

 ---
+title: btp
+emoji: 🐳
+colorFrom: red
+colorTo: purple
 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,650 @@
-<!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>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>
+<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/btp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ fix this