Hugging Face's logo

Spaces:
deedrop1140
/
MachineLearningAlgorithms
Building

App Files Community
MachineLearningAlgorithms / templates /desiciongame.html
deedrop1140's picture
deedrop1140
Upload 137 files
f7c7e26 verified
raw
history blame contribute delete
22.9 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Decision Tree Regression Game</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
padding: 30px;
text-align: center;
color: white;
}
.header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.header p {
font-size: 1.1rem;
opacity: 0.9;
}
.game-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
padding: 30px;
}
@media (max-width: 768px) {
.game-container {
grid-template-columns: 1fr;
}
}
.canvas-section {
position: relative;
}
#regressionCanvas {
width: 100%;
height: 400px;
border: 3px solid #4facfe;
border-radius: 15px;
background: #f8f9fa;
cursor: crosshair;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.controls {
background: #f8f9fa;
padding: 25px;
border-radius: 15px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.control-group {
margin-bottom: 20px;
}
.control-group h3 {
color: #4facfe;
margin-bottom: 15px;
font-size: 1.2rem;
}
.btn {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
color: white;
border: none;
padding: 12px 24px;
border-radius: 8px;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
margin: 5px;
transition: transform 0.2s, box-shadow 0.2s;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(79, 172, 254, 0.3);
}
.btn-secondary {
background: linear-gradient(135deg, #fd746c 0%, #ff9068 100%);
}
.btn-success {
background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
}
.data-points {
background: white;
padding: 15px;
border-radius: 10px;
border: 2px solid #e9ecef;
max-height: 200px;
overflow-y: auto;
}
.data-point {
display: flex;
justify-content: space-between;
padding: 8px;
border-bottom: 1px solid #e9ecef;
}
.data-point:last-child {
border-bottom: none;
}
.stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-top: 20px;
}
.stat-box {
background: white;
padding: 15px;
border-radius: 10px;
border: 2px solid #e9ecef;
text-align: center;
}
.stat-value {
font-size: 1.5rem;
font-weight: bold;
color: #4facfe;
}
.instructions {
background: linear-gradient(135deg, #fffcdc 0%, #d9a7c7 100%);
padding: 25px;
border-radius: 15px;
margin-top: 30px;
}
.instructions h3 {
color: #764ba2;
margin-bottom: 15px;
}
.instructions ul {
list-style: none;
padding: 0;
}
.instructions li {
padding: 8px 0;
border-bottom: 1px solid rgba(118, 75, 162, 0.2);
}
.instructions li:last-child {
border-bottom: none;
}
.prediction-area {
background: linear-gradient(135deg, #a8ff78 0%, #78ffd6 100%);
padding: 20px;
border-radius: 15px;
margin-top: 20px;
text-align: center;
}
.prediction-input {
padding: 12px;
border: 2px solid #4facfe;
border-radius: 8px;
font-size: 1rem;
margin-right: 10px;
width: 100px;
}
.tree-depth-slider {
width: 100%;
margin: 15px 0;
}
.slider-value {
text-align: center;
font-weight: bold;
color: #4facfe;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🎯 Decision Tree Regression Game</h1>
<p>Visualize and interact with machine learning regression in real-time!</p>
</div>
<div class="game-container">
<div class="canvas-section">
<canvas id="regressionCanvas" width="500" height="400"></canvas>
<div class="stats">
<div class="stat-box">
<div>Data Points</div>
<div class="stat-value" id="pointCount">0</div>
</div>
<div class="stat-box">
<div>Tree Depth</div>
<div class="stat-value" id="treeDepth">1</div>
</div>
</div>
</div>
<div class="controls">
<div class="control-group">
<h3>🎮 Game Controls</h3>
<button class="btn" onclick="addRandomPoints(10)">➕ Add 10 Random Points</button>
<button class="btn btn-secondary" onclick="clearAllPoints()">🗑️ Clear All Points</button>
<button class="btn btn-success" onclick="trainModel()">🚀 Train Model</button>
</div>
<div class="control-group">
<h3>🌳 Tree Settings</h3>
<label>Max Tree Depth:</label>
<input type="range" min="1" max="10" value="3" class="tree-depth-slider" id="treeDepthSlider" oninput="updateTreeDepth()">
<div class="slider-value" id="depthValue">3</div>
</div>
<div class="control-group">
<h3>📊 Data Points</h3>
<div class="data-points" id="dataPointsList">
<div class="data-point">No data points yet...</div>
</div>
</div>
<div class="prediction-area">
<h3>🔮 Make a Prediction</h3>
<input type="number" class="prediction-input" id="predictInput" placeholder="Enter X value" step="0.1">
<button class="btn" onclick="makePrediction()">Predict Y</button>
<div id="predictionResult" style="margin-top: 10px; font-weight: bold;"></div>
</div>
</div>
</div>
<div class="instructions">
<p>You can see by incres depth it more non-linaer and by decring depth it more linaer </p>
<h3>📖 How to Play</h3>
<ul>
<li>🎯 <strong>Click</strong> on the canvas to add data points</li>
<li>🔄 Use the slider to adjust tree depth (complexity)</li>
<li>🚀 Click "Train Model" to build the decision tree</li>
<li>🔮 Enter an X value to predict the corresponding Y</li>
<li>📊 Watch how the tree partitions the feature space</li>
<li>🎨 Different colors represent different tree nodes</li>
</ul>
</div>
</div>
<script>
// Canvas and context
const canvas = document.getElementById('regressionCanvas');
const ctx = canvas.getContext('2d');
const width = canvas.width;
const height = canvas.height;
// Data storage
let dataPoints = [];
let decisionTree = null;
let maxDepth = 3;
// Initialize canvas
function initCanvas() {
ctx.clearRect(0, 0, width, height);
drawGrid();
drawAxes();
}
// Draw grid lines
function drawGrid() {
ctx.strokeStyle = '#e0e0e0';
ctx.lineWidth = 1;
// Vertical grid lines
for (let x = 0; x <= width; x += 50) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, height);
ctx.stroke();
}
// Horizontal grid lines
for (let y = 0; y <= height; y += 50) {
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(width, y);
ctx.stroke();
}
}
// Draw coordinate axes
function drawAxes() {
ctx.strokeStyle = '#333';
ctx.lineWidth = 2;
// X-axis
ctx.beginPath();
ctx.moveTo(0, height / 2);
ctx.lineTo(width, height / 2);
ctx.stroke();
// Y-axis
ctx.beginPath();
ctx.moveTo(width / 2, 0);
ctx.lineTo(width / 2, height);
ctx.stroke();
// Labels
ctx.fillStyle = '#333';
ctx.font = '12px Arial';
ctx.fillText('X', width - 20, height / 2 - 10);
ctx.fillText('Y', width / 2 + 10, 20);
}
// Convert canvas coordinates to data coordinates
function canvasToData(x, y) {
return {
x: (x - width / 2) / (width / 20),
y: (height / 2 - y) / (height / 20)
};
}
// Convert data coordinates to canvas coordinates
function dataToCanvas(x, y) {
return {
x: width / 2 + x * (width / 20),
y: height / 2 - y * (height / 20)
};
}
// Add data point on click
canvas.addEventListener('click', (event) => {
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const dataCoord = canvasToData(x, y);
dataPoints.push(dataCoord);
updateDataPointsList();
drawDataPoints();
if (decisionTree) {
drawDecisionTree();
}
});
// Draw all data points
function drawDataPoints() {
dataPoints.forEach(point => {
const canvasCoord = dataToCanvas(point.x, point.y);
ctx.fillStyle = '#ff6b6b';
ctx.beginPath();
ctx.arc(canvasCoord.x, canvasCoord.y, 6, 0, 2 * Math.PI);
ctx.fill();
ctx.strokeStyle = '#fff';
ctx.lineWidth = 2;
ctx.stroke();
});
document.getElementById('pointCount').textContent = dataPoints.length;
}
// Update data points list
function updateDataPointsList() {
const list = document.getElementById('dataPointsList');
list.innerHTML = '';
if (dataPoints.length === 0) {
list.innerHTML = '<div class="data-point">No data points yet...</div>';
return;
}
dataPoints.forEach((point, index) => {
const div = document.createElement('div');
div.className = 'data-point';
div.innerHTML = `
<span>Point ${index + 1}</span>
<span>(${point.x.toFixed(2)}, ${point.y.toFixed(2)})</span>
`;
list.appendChild(div);
});
}
// Add random data points
function addRandomPoints(count) {
for (let i = 0; i < count; i++) {
const x = (Math.random() - 0.5) * 18;
const y = Math.sin(x * 2) * 3 + (Math.random() - 0.5) * 2;
dataPoints.push({ x, y });
}
updateDataPointsList();
drawDataPoints();
if (decisionTree) {
drawDecisionTree();
}
}
// Clear all data points
function clearAllPoints() {
dataPoints = [];
decisionTree = null;
updateDataPointsList();
initCanvas();
document.getElementById('predictionResult').textContent = '';
}
// Update tree depth from slider
function updateTreeDepth() {
maxDepth = parseInt(document.getElementById('treeDepthSlider').value);
document.getElementById('depthValue').textContent = maxDepth;
document.getElementById('treeDepth').textContent = maxDepth;
if (decisionTree) {
trainModel();
}
}
// Simple decision tree node class
class TreeNode {
constructor(featureIndex = null, threshold = null, value = null, left = null, right = null) {
this.featureIndex = featureIndex;
this.threshold = threshold;
this.value = value;
this.left = left;
this.right = right;
}
}
// Train decision tree model
function trainModel() {
if (dataPoints.length < 2) {
alert('Need at least 2 data points to train the model!');
return;
}
// Convert data to arrays for processing
const X = dataPoints.map(p => [p.x]);
const y = dataPoints.map(p => p.y);
// Build decision tree
decisionTree = buildDecisionTree(X, y, maxDepth);
drawDecisionTree();
}
// Recursive function to build decision tree
function buildDecisionTree(X, y, maxDepth, depth = 0) {
if (depth >= maxDepth || X.length <= 1) {
return new TreeNode(null, null, mean(y));
}
// Find best split
const { bestFeature, bestThreshold, bestScore } = findBestSplit(X, y);
if (bestScore === -Infinity) {
return new TreeNode(null, null, mean(y));
}
// Split data
const [leftX, leftY, rightX, rightY] = splitData(X, y, bestFeature, bestThreshold);
// Recursively build left and right subtrees
const left = buildDecisionTree(leftX, leftY, maxDepth, depth + 1);
const right = buildDecisionTree(rightX, rightY, maxDepth, depth + 1);
return new TreeNode(bestFeature, bestThreshold, null, left, right);
}
// Find best split for decision tree
function findBestSplit(X, y) {
let bestFeature = 0;
let bestThreshold = 0;
let bestScore = -Infinity;
for (let feature = 0; feature < X[0].length; feature++) {
const featureValues = X.map(x => x[feature]);
const uniqueValues = [...new Set(featureValues)].sort((a, b) => a - b);
for (let i = 0; i < uniqueValues.length - 1; i++) {
const threshold = (uniqueValues[i] + uniqueValues[i + 1]) / 2;
const score = calculateSplitScore(X, y, feature, threshold);
if (score > bestScore) {
bestScore = score;
bestFeature = feature;
bestThreshold = threshold;
}
}
}
return { bestFeature, bestThreshold, bestScore };
}
// Calculate split score (variance reduction)
function calculateSplitScore(X, y, feature, threshold) {
const [leftX, leftY, rightX, rightY] = splitData(X, y, feature, threshold);
if (leftY.length === 0 || rightY.length === 0) {
return -Infinity;
}
const totalVariance = variance(y);
const leftVariance = variance(leftY);
const rightVariance = variance(rightY);
const leftWeight = leftY.length / y.length;
const rightWeight = rightY.length / y.length;
return totalVariance - (leftWeight * leftVariance + rightWeight * rightVariance);
}
// Split data based on feature and threshold
function splitData(X, y, feature, threshold) {
const leftX = [];
const leftY = [];
const rightX = [];
const rightY = [];
for (let i = 0; i < X.length; i++) {
if (X[i][feature] <= threshold) {
leftX.push(X[i]);
leftY.push(y[i]);
} else {
rightX.push(X[i]);
rightY.push(y[i]);
}
}
return [leftX, leftY, rightX, rightY];
}
// Calculate mean of array
function mean(arr) {
return arr.reduce((sum, val) => sum + val, 0) / arr.length;
}
// Calculate variance of array
function variance(arr) {
const avg = mean(arr);
return arr.reduce((sum, val) => sum + Math.pow(val - avg, 2), 0) / arr.length;
}
// Make prediction using trained tree
function predict(tree, x) {
if (tree.value !== null) {
return tree.value;
}
if (x[tree.featureIndex] <= tree.threshold) {
return predict(tree.left, x);
} else {
return predict(tree.right, x);
}
}
// Draw decision tree boundaries
function drawDecisionTree() {
initCanvas();
drawDataPoints();
if (!decisionTree) return;
// Draw prediction lines for each region
const colors = ['#4facfe', '#fd746c', '#56ab2f', '#a8ff78', '#ff9068', '#00f2fe', '#ff6b6b'];
// Sample many points and draw predictions
ctx.lineWidth = 3;
for (let x = -10; x <= 10; x += 0.1) {
const prediction = predict(decisionTree, [x]);
const canvasCoord = dataToCanvas(x, prediction);
const nextX = x + 0.1;
const nextPrediction = predict(decisionTree, [nextX]);
const nextCanvasCoord = dataToCanvas(nextX, nextPrediction);
// Use different colors for different regions
const colorIndex = Math.abs(Math.floor(x * 2)) % colors.length;
ctx.strokeStyle = colors[colorIndex];
ctx.beginPath();
ctx.moveTo(canvasCoord.x, canvasCoord.y);
ctx.lineTo(nextCanvasCoord.x, nextCanvasCoord.y);
ctx.stroke();
}
}
// Make prediction for user input
function makePrediction() {
const input = document.getElementById('predictInput');
const xValue = parseFloat(input.value);
if (isNaN(xValue)) {
alert('Please enter a valid number!');
return;
}
if (!decisionTree) {
alert('Please train the model first!');
return;
}
const prediction = predict(decisionTree, [xValue]);
document.getElementById('predictionResult').textContent =
`Prediction: For x = ${xValue.toFixed(2)}, y ≈ ${prediction.toFixed(2)}`;
// Draw the prediction point
const canvasCoord = dataToCanvas(xValue, prediction);
ctx.fillStyle = '#ff00ff';
ctx.beginPath();
ctx.arc(canvasCoord.x, canvasCoord.y, 8, 0, 2 * Math.PI);
ctx.fill();
ctx.strokeStyle = '#fff';
ctx.lineWidth = 2;
ctx.stroke();
}
// Initialize the game
window.onload = function() {
initCanvas();
updateTreeDepth(); // Set initial depth value
};
</script>
<style>
.my-btn {
background: linear-gradient(135deg, #4facfe, #00f2fe);
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
margin-left: 550px;
margin-right: 550px;
display: flex;
justify-content: center; /* horizontal center */
align-items: center; /* vertical center */
font-size: 16px;
font-weight: bold;
cursor: pointer;
align-items: center;
transition: all 0.3s ease;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.my-btn:hover {
background: linear-gradient(135deg, #43e97b, #38f9d7);
transform: scale(1.05);
box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}
.my-btn:active {
transform: scale(0.98);
}
</style>
<a href="/dtr" class="my-btn">Go back to decision tree regrssion</a>
</body>
</html>