|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Neural Network Playground</title>
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
|
|
|
|
<style>
|
|
|
:root {
|
|
|
--background: 222 47% 6%;
|
|
|
--foreground: 210 40% 96%;
|
|
|
--card: 222 47% 8%;
|
|
|
--primary: 199 89% 48%;
|
|
|
--primary-foreground: 222 47% 6%;
|
|
|
--secondary: 280 65% 55%;
|
|
|
--secondary-foreground: 210 40% 98%;
|
|
|
--muted: 217 33% 15%;
|
|
|
--muted-foreground: 215 20% 55%;
|
|
|
--accent: 142 71% 45%;
|
|
|
--destructive: 0 84% 60%;
|
|
|
--destructive-foreground: 210 40% 98%;
|
|
|
--border: 217 33% 20%;
|
|
|
|
|
|
|
|
|
--node-input: 199 89% 48%;
|
|
|
--node-hidden: 280 65% 55%;
|
|
|
--node-positive: 142 71% 45%;
|
|
|
--node-negative: 350 89% 60%;
|
|
|
|
|
|
--radius: 0.75rem;
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
background-color: hsl(var(--background));
|
|
|
color: hsl(var(--foreground));
|
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
|
}
|
|
|
|
|
|
.glass-panel {
|
|
|
background-color: hsla(var(--card), 0.6);
|
|
|
backdrop-filter: blur(16px);
|
|
|
border: 1px solid hsla(var(--border), 0.5);
|
|
|
border-radius: var(--radius);
|
|
|
box-shadow: 0 0 30px hsl(199 89% 48% / 0.1);
|
|
|
}
|
|
|
|
|
|
.gradient-text {
|
|
|
background: linear-gradient(135deg, hsl(199 89% 48%) 0%, hsl(280 65% 55%) 100%);
|
|
|
-webkit-background-clip: text;
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
background-clip: text;
|
|
|
}
|
|
|
|
|
|
|
|
|
@keyframes flow {
|
|
|
0% { stroke-dashoffset: 20; }
|
|
|
100% { stroke-dashoffset: 0; }
|
|
|
}
|
|
|
.animate-flow {
|
|
|
animation: flow 1s linear infinite;
|
|
|
}
|
|
|
|
|
|
@keyframes pulse-glow {
|
|
|
0%, 100% { opacity: 1; filter: brightness(1); }
|
|
|
50% { opacity: 0.7; filter: brightness(1.2); }
|
|
|
}
|
|
|
.animate-node-pulse {
|
|
|
animation: pulse-glow 2s ease-in-out infinite;
|
|
|
}
|
|
|
|
|
|
|
|
|
::-webkit-scrollbar { width: 8px; }
|
|
|
::-webkit-scrollbar-track { background: hsl(var(--background)); }
|
|
|
::-webkit-scrollbar-thumb { background: hsl(var(--muted)); border-radius: 4px; }
|
|
|
::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground)); }
|
|
|
|
|
|
input[type=range] {
|
|
|
-webkit-appearance: none;
|
|
|
background: transparent;
|
|
|
}
|
|
|
input[type=range]::-webkit-slider-thumb {
|
|
|
-webkit-appearance: none;
|
|
|
height: 16px;
|
|
|
width: 16px;
|
|
|
border-radius: 50%;
|
|
|
background: hsl(var(--primary));
|
|
|
cursor: pointer;
|
|
|
margin-top: -6px;
|
|
|
}
|
|
|
input[type=range]::-webkit-slider-runnable-track {
|
|
|
width: 100%;
|
|
|
height: 4px;
|
|
|
cursor: pointer;
|
|
|
background: hsl(var(--muted));
|
|
|
border-radius: 2px;
|
|
|
}
|
|
|
|
|
|
.btn {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
border-radius: 0.5rem;
|
|
|
font-size: 0.875rem;
|
|
|
font-weight: 500;
|
|
|
transition-colors: 0.15s;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
.btn:disabled {
|
|
|
opacity: 0.5;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
.btn-glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: white; }
|
|
|
.btn-glass:hover { background: rgba(255,255,255,0.1); }
|
|
|
.btn-accent { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
|
|
|
.btn-destructive { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
|
|
|
.btn-glow {
|
|
|
background: hsl(var(--primary));
|
|
|
color: white;
|
|
|
box-shadow: 0 0 15px hsl(var(--primary)/0.5);
|
|
|
}
|
|
|
.btn-glow:hover { box-shadow: 0 0 25px hsl(var(--primary)/0.6); }
|
|
|
|
|
|
.tab-btn {
|
|
|
flex: 1;
|
|
|
padding: 0.375rem;
|
|
|
font-size: 0.875rem;
|
|
|
font-weight: 500;
|
|
|
border-radius: 0.375rem;
|
|
|
transition: all 0.2s;
|
|
|
color: hsl(var(--muted-foreground));
|
|
|
}
|
|
|
.tab-btn.active {
|
|
|
background-color: hsl(var(--card));
|
|
|
color: hsl(var(--primary));
|
|
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body class="min-h-screen p-4 selection:bg-[hsl(var(--primary))] selection:text-white">
|
|
|
|
|
|
|
|
|
<div class="fixed inset-0 pointer-events-none overflow-hidden -z-10">
|
|
|
<div class="absolute top-0 left-1/4 w-96 h-96 bg-[hsl(var(--primary)/0.1)] rounded-full blur-[100px]"></div>
|
|
|
<div class="absolute bottom-0 right-1/4 w-96 h-96 bg-[hsl(var(--secondary)/0.1)] rounded-full blur-[100px]"></div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<header class="relative z-10 border-b border-white/10 bg-[hsl(var(--background)/0.8)] backdrop-blur-md sticky top-0 mb-8 rounded-xl">
|
|
|
<div class="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
|
|
|
<div class="flex items-center gap-3">
|
|
|
<div class="p-2 rounded-xl bg-[hsl(var(--primary)/0.2)] animate-pulse">
|
|
|
<i data-lucide="brain" class="h-6 w-6 text-[hsl(var(--primary))]"></i>
|
|
|
</div>
|
|
|
<div>
|
|
|
<h1 class="text-xl font-bold gradient-text">Neural Network Playground</h1>
|
|
|
<div class="absolute left-1/2 -translate-x-1/2 flex items-center"> <audio id="clickSound" src="https://www.soundjay.com/buttons/sounds/button-3.mp3"></audio> <a href="/neural-network-classification" onclick="playSound(); return false;" class="inline-flex items-center justify-center text-center leading-none bg-blue-600 hover:bg-blue-500 text-white font-bold py-2 px-6 rounded-xl text-sm transition-all duration-150 shadow-[0_4px_0_rgb(29,78,216)] active:shadow-none active:translate-y-[4px] uppercase tracking-wider"> Back to Core </a> </div>
|
|
|
<p class="text-xs text-[hsl(var(--muted-foreground))]">Interactive Classification Visualizer</p>
|
|
|
<p class="text-xxl p-3 text-[hsl(var(--muted-foreground))]">After training you cant train agian and cant change output so if you want add a custom data in predefine data so add before training</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="hidden md:flex items-center gap-4 text-sm text-[hsl(var(--muted-foreground))]">
|
|
|
<div class="flex items-center gap-2 bg-white/5 px-3 py-1.5 rounded-full">
|
|
|
<i data-lucide="layers" class="h-4 w-4"></i>
|
|
|
<span id="header-neurons-count">4 hidden neurons</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</header>
|
|
|
|
|
|
|
|
|
<main class="relative z-10 max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-6">
|
|
|
|
|
|
|
|
|
<div class="lg:col-span-3 space-y-6">
|
|
|
|
|
|
<div class="glass-panel p-5 space-y-5">
|
|
|
<div>
|
|
|
<h3 class="text-sm font-medium text-[hsl(var(--muted-foreground))] mb-3">Data Class</h3>
|
|
|
<div class="flex gap-2">
|
|
|
<button onclick="setClass(1)" id="btn-class-a" class="btn btn-accent h-9 px-3 flex-1 text-sm">
|
|
|
<div class="w-3 h-3 rounded-full bg-[hsl(var(--node-positive))] mr-2"></div> Class A
|
|
|
</button>
|
|
|
<button onclick="setClass(0)" id="btn-class-b" class="btn btn-glass h-9 px-3 flex-1 text-sm">
|
|
|
<div class="w-3 h-3 rounded-full bg-[hsl(var(--node-negative))] mr-2"></div> Class B
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
<h3 class="text-sm font-medium text-[hsl(var(--muted-foreground))] mb-3">
|
|
|
Hidden Neurons: <span id="neurons-display" class="text-[hsl(var(--primary))]">4</span>
|
|
|
</h3>
|
|
|
<div class="flex items-center gap-3">
|
|
|
<button onclick="changeNeurons(-1)" class="btn btn-glass h-10 w-10 p-0"><i data-lucide="minus" class="h-4 w-4"></i></button>
|
|
|
<input type="range" min="1" max="8" value="4" class="flex-1" id="neurons-slider" oninput="changeNeuronsFromSlider(this.value)">
|
|
|
<button onclick="changeNeurons(1)" class="btn btn-glass h-10 w-10 p-0"><i data-lucide="plus" class="h-4 w-4"></i></button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
<h3 class="text-sm font-medium text-[hsl(var(--muted-foreground))] mb-3">
|
|
|
Learning Rate: <span id="lr-display" class="text-[hsl(var(--secondary))]">0.50</span>
|
|
|
</h3>
|
|
|
<input type="range" min="1" max="100" value="50" class="w-full" id="lr-slider" oninput="changeLR(this.value)">
|
|
|
</div>
|
|
|
|
|
|
<div class="flex gap-2">
|
|
|
<button id="btn-train" onclick="toggleTraining()" class="btn btn-glow flex-1 h-10 px-4">
|
|
|
<i data-lucide="play" class="h-4 w-4 mr-2"></i> Train Network
|
|
|
</button>
|
|
|
<button onclick="resetApp()" class="btn btn-glass h-10 w-10 p-0">
|
|
|
<i data-lucide="rotate-ccw" class="h-4 w-4"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
|
|
|
<div id="accuracy-panel" class="text-center py-3 rounded-lg bg-white/5 hidden">
|
|
|
<span class="text-sm text-[hsl(var(--muted-foreground))]">Accuracy: </span>
|
|
|
<span id="accuracy-display" class="text-lg font-bold">0.0%</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="glass-panel p-4 space-y-3">
|
|
|
<h3 class="text-sm font-medium text-[hsl(var(--muted-foreground))]">Presets</h3>
|
|
|
<div class="grid grid-cols-2 gap-2">
|
|
|
<button onclick="loadPreset('Linear')" class="btn btn-glass flex flex-col h-auto py-3">
|
|
|
<i data-lucide="waves" class="h-4 w-4 mb-1"></i> <span class="text-xs">Linear</span>
|
|
|
</button>
|
|
|
<button onclick="loadPreset('XOR')" class="btn btn-glass flex flex-col h-auto py-3">
|
|
|
<i data-lucide="target" class="h-4 w-4 mb-1"></i> <span class="text-xs">XOR</span>
|
|
|
</button>
|
|
|
<button onclick="loadPreset('Circle')" class="btn btn-glass flex flex-col h-auto py-3">
|
|
|
<i data-lucide="circle" class="h-4 w-4 mb-1"></i> <span class="text-xs">Circle</span>
|
|
|
</button>
|
|
|
<button onclick="loadPreset('Spiral')" class="btn btn-glass flex flex-col h-auto py-3">
|
|
|
<i data-lucide="sparkles" class="h-4 w-4 mb-1"></i> <span class="text-xs">Spiral</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="glass-panel p-4 space-y-3">
|
|
|
<div class="flex justify-between items-center text-sm font-medium text-[hsl(var(--muted-foreground))]">
|
|
|
<span class="flex items-center gap-2"><i data-lucide="clock" class="h-4 w-4"></i> Training Log</span>
|
|
|
<span id="epoch-display" class="text-[hsl(var(--primary))] animate-pulse hidden">Epoch 0</span>
|
|
|
</div>
|
|
|
<div class="w-full bg-white/10 rounded-full h-1.5 overflow-hidden">
|
|
|
<div id="progress-bar" class="h-full bg-gradient-to-r from-[hsl(var(--primary))] to-[hsl(var(--secondary))]" style="width: 0%"></div>
|
|
|
</div>
|
|
|
<div id="logs-container" class="space-y-1 max-h-32 overflow-y-auto">
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="lg:col-span-6 space-y-6">
|
|
|
|
|
|
<div class="glass-panel p-6">
|
|
|
<div class="flex justify-between items-center mb-4">
|
|
|
<h2 class="text-lg font-semibold flex items-center gap-2">
|
|
|
<i data-lucide="brain" class="h-5 w-5 text-[hsl(var(--primary))]"></i> Network Architecture
|
|
|
</h2>
|
|
|
</div>
|
|
|
<div class="flex justify-center" id="network-container">
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="glass-panel p-6">
|
|
|
<div class="flex justify-between items-center mb-4">
|
|
|
<h2 class="text-lg font-semibold">Data & Decision Boundary</h2>
|
|
|
<span class="text-xs px-2 py-1 bg-white/10 rounded text-[hsl(var(--primary))] font-mono">Points: <span id="points-count">0</span></span>
|
|
|
</div>
|
|
|
<div class="flex justify-center relative">
|
|
|
<div class="relative">
|
|
|
<canvas id="main-canvas" width="300" height="300" class="rounded-lg border border-white/10 cursor-crosshair shadow-2xl bg-black"></canvas>
|
|
|
<div class="absolute -bottom-6 left-0 right-0 text-center text-xs text-muted-foreground text-[hsl(var(--muted-foreground))]">X Coordinate</div>
|
|
|
<div class="absolute -left-6 top-1/2 -translate-y-1/2 -rotate-90 text-xs text-muted-foreground text-[hsl(var(--muted-foreground))]">Y Coordinate</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mt-4 flex flex-wrap justify-center gap-4 text-xs text-[hsl(var(--muted-foreground))]">
|
|
|
<div class="flex items-center gap-2"><div class="w-3 h-3 rounded-full bg-[hsl(var(--node-positive))]"></div> Class A</div>
|
|
|
<div class="flex items-center gap-2"><div class="w-3 h-3 rounded-full bg-[hsl(var(--node-negative))]"></div> Class B</div>
|
|
|
<div class="flex items-center gap-2"><div class="w-3 h-3 bg-[hsl(var(--node-positive))/0.3]"></div> Prediction A</div>
|
|
|
<div class="flex items-center gap-2"><div class="w-3 h-3 bg-[hsl(var(--node-negative))/0.3]"></div> Prediction B</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="lg:col-span-3 space-y-6">
|
|
|
<div class="w-full">
|
|
|
<div class="flex bg-white/5 p-1 rounded-lg mb-4">
|
|
|
<button onclick="switchTab('howItWorks')" id="tab-howItWorks" class="tab-btn active"><i data-lucide="lightbulb" class="h-3 w-3 mr-1 inline"></i> How It Works</button>
|
|
|
<button onclick="switchTab('learn')" id="tab-learn" class="tab-btn"><i data-lucide="sparkles" class="h-3 w-3 mr-1 inline"></i> Learn</button>
|
|
|
</div>
|
|
|
|
|
|
<div id="content-howItWorks" class="glass-panel p-5 space-y-4">
|
|
|
<h3 class="text-lg font-semibold gradient-text">Live Prediction (Hover)</h3>
|
|
|
<div class="space-y-4 text-sm">
|
|
|
<div>
|
|
|
<div class="flex items-center gap-2 mb-2 font-medium text-[hsl(var(--node-input))]">
|
|
|
<span class="w-5 h-5 rounded-full bg-[hsl(var(--node-input))/0.2] flex items-center justify-center text-xs">1</span> Input
|
|
|
</div>
|
|
|
<div class="bg-white/5 p-3 rounded-lg border border-white/10 font-mono text-xs">
|
|
|
X: <span id="val-x">0.00</span><br>
|
|
|
Y: <span id="val-y">0.00</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
<div class="flex items-center gap-2 mb-2 font-medium text-[hsl(var(--node-hidden))]">
|
|
|
<span class="w-5 h-5 rounded-full bg-[hsl(var(--node-hidden))/0.2] flex items-center justify-center text-xs">2</span> Hidden Layer
|
|
|
</div>
|
|
|
<div id="val-hidden" class="bg-white/5 p-3 rounded-lg border border-white/10 font-mono text-xs grid grid-cols-4 gap-1">
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
<div class="flex items-center gap-2 mb-2 font-medium text-[hsl(var(--accent))]">
|
|
|
<span class="w-5 h-5 rounded-full bg-[hsl(var(--accent))/0.2] flex items-center justify-center text-xs">3</span> Output
|
|
|
</div>
|
|
|
<div class="bg-white/5 p-3 rounded-lg border border-white/10">
|
|
|
<div class="flex justify-between items-center">
|
|
|
<span class="text-xs text-gray-400">Raw: <span id="val-raw">0.0000</span></span>
|
|
|
<span id="val-class" class="font-bold text-gray-500">-</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="content-learn" class="glass-panel p-5 space-y-4 hidden">
|
|
|
<div class="flex items-center gap-3">
|
|
|
<div class="p-2 rounded-lg bg-[hsl(var(--primary))/0.2]"><i data-lucide="brain" class="h-5 w-5 text-[hsl(var(--primary))]"></i></div>
|
|
|
<h3 class="font-semibold gradient-text">Training Process</h3>
|
|
|
</div>
|
|
|
<p class="text-sm text-gray-300 leading-relaxed">
|
|
|
The network learns by "Backpropagation". It compares its guess to the real label, finds the error, and adjusts the weights backwards from output to input.
|
|
|
</p>
|
|
|
<div class="p-3 rounded-lg bg-white/5 text-xs text-gray-400 border border-white/10">
|
|
|
💡 <strong>Tip:</strong> If the network gets stuck, try increasing neurons or clicking "Reset" to randomize weights.
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</main>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
class SimpleNeuralNetwork {
|
|
|
constructor(inputSize, hiddenSize, outputSize, learningRate) {
|
|
|
this.inputSize = inputSize;
|
|
|
this.hiddenSize = hiddenSize;
|
|
|
this.outputSize = outputSize;
|
|
|
this.learningRate = learningRate;
|
|
|
|
|
|
|
|
|
const scale1 = Math.sqrt(2 / (this.inputSize + this.hiddenSize));
|
|
|
this.w1 = Array(this.hiddenSize).fill(0).map(() =>
|
|
|
Array(this.inputSize).fill(0).map(() => (Math.random() * 2 - 1) * scale1)
|
|
|
);
|
|
|
this.b1 = Array(this.hiddenSize).fill(0);
|
|
|
|
|
|
const scale2 = Math.sqrt(2 / (this.hiddenSize + this.outputSize));
|
|
|
this.w2 = Array(this.outputSize).fill(0).map(() =>
|
|
|
Array(this.hiddenSize).fill(0).map(() => (Math.random() * 2 - 1) * scale2)
|
|
|
);
|
|
|
this.b2 = Array(this.outputSize).fill(0);
|
|
|
}
|
|
|
|
|
|
sigmoid(x) { return 1 / (1 + Math.exp(-x)); }
|
|
|
sigmoidDeriv(y) { return y * (1 - y); }
|
|
|
|
|
|
forward(inputs) {
|
|
|
const hActivations = this.w1.map((weights, i) =>
|
|
|
this.sigmoid(weights.reduce((acc, w, j) => acc + w * inputs[j], 0) + this.b1[i])
|
|
|
);
|
|
|
const outputs = this.w2.map((weights, i) =>
|
|
|
this.sigmoid(weights.reduce((acc, w, j) => acc + w * hActivations[j], 0) + this.b2[i])
|
|
|
);
|
|
|
return { activations: [[...inputs], hActivations, outputs], output: outputs[0] };
|
|
|
}
|
|
|
|
|
|
predict(x, y) { return this.forward([x, y]).output; }
|
|
|
|
|
|
train(data, batchSize) {
|
|
|
for(let k = 0; k < batchSize * 5; k++) {
|
|
|
const point = data[Math.floor(Math.random() * data.length)];
|
|
|
const inputs = [point.x, point.y];
|
|
|
const target = [point.label];
|
|
|
|
|
|
const { activations } = this.forward(inputs);
|
|
|
const hActivations = activations[1];
|
|
|
const outputs = activations[2];
|
|
|
|
|
|
const outputErrors = outputs.map((o, i) => target[i] - o);
|
|
|
const outputGradients = outputs.map((o, i) => outputErrors[i] * this.sigmoidDeriv(o));
|
|
|
|
|
|
const hiddenErrors = this.w1.map((_, i) =>
|
|
|
this.w2.reduce((acc, weights, j) => acc + weights[i] * outputGradients[j], 0)
|
|
|
);
|
|
|
const hiddenGradients = hActivations.map((h, i) => hiddenErrors[i] * this.sigmoidDeriv(h));
|
|
|
|
|
|
for(let i=0; i<this.outputSize; i++) {
|
|
|
for(let j=0; j<this.hiddenSize; j++) {
|
|
|
this.w2[i][j] += this.learningRate * outputGradients[i] * hActivations[j];
|
|
|
}
|
|
|
this.b2[i] += this.learningRate * outputGradients[i];
|
|
|
}
|
|
|
|
|
|
for(let i=0; i<this.hiddenSize; i++) {
|
|
|
for(let j=0; j<this.inputSize; j++) {
|
|
|
this.w1[i][j] += this.learningRate * hiddenGradients[i] * inputs[j];
|
|
|
}
|
|
|
this.b1[i] += this.learningRate * hiddenGradients[i];
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
getWeights() { return [this.w1, this.w2]; }
|
|
|
}
|
|
|
|
|
|
|
|
|
let state = {
|
|
|
dataPoints: [],
|
|
|
currentClass: 1,
|
|
|
hiddenNeurons: 4,
|
|
|
learningRate: 0.5,
|
|
|
isTraining: false,
|
|
|
network: null,
|
|
|
epoch: 0,
|
|
|
accuracy: 0,
|
|
|
activations: null,
|
|
|
predictions: [],
|
|
|
logs: [],
|
|
|
lastProbe: { x: 0, y: 0 }
|
|
|
};
|
|
|
|
|
|
|
|
|
function generatePredictions() {
|
|
|
const gridSize = 30;
|
|
|
const grid = [];
|
|
|
for (let i = 0; i < gridSize; i++) {
|
|
|
const row = [];
|
|
|
for (let j = 0; j < gridSize; j++) {
|
|
|
const x = (j / gridSize) * 2 - 1;
|
|
|
const y = 1 - (i / gridSize) * 2;
|
|
|
row.push(state.network.predict(x, y));
|
|
|
}
|
|
|
grid.push(row);
|
|
|
}
|
|
|
return grid;
|
|
|
}
|
|
|
|
|
|
|
|
|
function init() {
|
|
|
lucide.createIcons();
|
|
|
state.network = new SimpleNeuralNetwork(2, state.hiddenNeurons, 1, state.learningRate);
|
|
|
state.predictions = generatePredictions();
|
|
|
setupCanvas();
|
|
|
renderUI();
|
|
|
|
|
|
|
|
|
state.activations = [[0,0], Array(state.hiddenNeurons).fill(0), [0]];
|
|
|
updateExplainers();
|
|
|
}
|
|
|
|
|
|
|
|
|
function setClass(c) {
|
|
|
state.currentClass = c;
|
|
|
const btnA = document.getElementById('btn-class-a');
|
|
|
const btnB = document.getElementById('btn-class-b');
|
|
|
|
|
|
if(c === 1) {
|
|
|
btnA.classList.remove('btn-glass'); btnA.classList.add('btn-accent');
|
|
|
btnB.classList.add('btn-glass'); btnB.classList.remove('btn-destructive');
|
|
|
} else {
|
|
|
btnA.classList.add('btn-glass'); btnA.classList.remove('btn-accent');
|
|
|
btnB.classList.remove('btn-glass'); btnB.classList.add('btn-destructive');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function changeNeurons(delta) {
|
|
|
const newVal = Math.max(1, Math.min(8, state.hiddenNeurons + delta));
|
|
|
state.hiddenNeurons = newVal;
|
|
|
document.getElementById('neurons-slider').value = newVal;
|
|
|
updateNeuronsUI();
|
|
|
}
|
|
|
|
|
|
function changeNeuronsFromSlider(val) {
|
|
|
state.hiddenNeurons = parseInt(val);
|
|
|
updateNeuronsUI();
|
|
|
}
|
|
|
|
|
|
function updateNeuronsUI() {
|
|
|
document.getElementById('neurons-display').innerText = state.hiddenNeurons;
|
|
|
document.getElementById('header-neurons-count').innerText = state.hiddenNeurons + " hidden neurons";
|
|
|
resetApp();
|
|
|
}
|
|
|
|
|
|
function changeLR(val) {
|
|
|
state.learningRate = val / 100;
|
|
|
document.getElementById('lr-display').innerText = state.learningRate.toFixed(2);
|
|
|
if(state.network) state.network.learningRate = state.learningRate;
|
|
|
}
|
|
|
|
|
|
function resetApp() {
|
|
|
state.dataPoints = [];
|
|
|
state.isTraining = false;
|
|
|
state.epoch = 0;
|
|
|
state.accuracy = 0;
|
|
|
state.logs = [];
|
|
|
state.network = new SimpleNeuralNetwork(2, state.hiddenNeurons, 1, state.learningRate);
|
|
|
state.predictions = generatePredictions();
|
|
|
state.lastProbe = { x: 0, y: 0 };
|
|
|
|
|
|
document.getElementById('points-count').innerText = "0";
|
|
|
document.getElementById('accuracy-panel').classList.add('hidden');
|
|
|
document.getElementById('epoch-display').classList.add('hidden');
|
|
|
document.getElementById('progress-bar').style.width = '0%';
|
|
|
document.getElementById('logs-container').innerHTML = '';
|
|
|
|
|
|
const btnTrain = document.getElementById('btn-train');
|
|
|
btnTrain.innerHTML = '<i data-lucide="play" class="h-4 w-4 mr-2"></i> Train Network';
|
|
|
lucide.createIcons();
|
|
|
|
|
|
renderCanvas();
|
|
|
renderNetwork();
|
|
|
|
|
|
|
|
|
state.activations = state.network.forward([0, 0]).activations;
|
|
|
updateExplainers();
|
|
|
}
|
|
|
|
|
|
function switchTab(tab) {
|
|
|
document.getElementById('tab-howItWorks').classList.remove('active');
|
|
|
document.getElementById('tab-learn').classList.remove('active');
|
|
|
document.getElementById('content-howItWorks').classList.add('hidden');
|
|
|
document.getElementById('content-learn').classList.add('hidden');
|
|
|
|
|
|
document.getElementById('tab-' + tab).classList.add('active');
|
|
|
document.getElementById('content-' + tab).classList.remove('hidden');
|
|
|
}
|
|
|
|
|
|
|
|
|
const canvas = document.getElementById('main-canvas');
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
const canvasSize = 300;
|
|
|
const gridSize = 30;
|
|
|
|
|
|
function setupCanvas() {
|
|
|
canvas.addEventListener('mousedown', handleCanvasClick);
|
|
|
canvas.addEventListener('mousemove', handleCanvasHover);
|
|
|
canvas.addEventListener('mouseleave', () => {
|
|
|
renderCanvas();
|
|
|
});
|
|
|
renderCanvas();
|
|
|
}
|
|
|
|
|
|
function handleCanvasClick(e) {
|
|
|
const rect = canvas.getBoundingClientRect();
|
|
|
const scaleX = canvas.width / rect.width;
|
|
|
const scaleY = canvas.height / rect.height;
|
|
|
const clickX = (e.clientX - rect.left) * scaleX;
|
|
|
const clickY = (e.clientY - rect.top) * scaleY;
|
|
|
|
|
|
const x = (clickX / (canvasSize / 2)) - 1;
|
|
|
const y = 1 - (clickY / (canvasSize / 2));
|
|
|
|
|
|
const point = {
|
|
|
x: Math.max(-1, Math.min(1, x)),
|
|
|
y: Math.max(-1, Math.min(1, y)),
|
|
|
label: state.currentClass
|
|
|
};
|
|
|
|
|
|
state.dataPoints.push(point);
|
|
|
state.lastProbe = { x, y };
|
|
|
document.getElementById('points-count').innerText = state.dataPoints.length;
|
|
|
|
|
|
|
|
|
state.activations = state.network.forward([point.x, point.y]).activations;
|
|
|
updateExplainers();
|
|
|
|
|
|
renderCanvas();
|
|
|
renderNetwork();
|
|
|
}
|
|
|
|
|
|
function handleCanvasHover(e) {
|
|
|
const rect = canvas.getBoundingClientRect();
|
|
|
const scaleX = canvas.width / rect.width;
|
|
|
const scaleY = canvas.height / rect.height;
|
|
|
const clickX = (e.clientX - rect.left) * scaleX;
|
|
|
const clickY = (e.clientY - rect.top) * scaleY;
|
|
|
|
|
|
renderCanvas();
|
|
|
|
|
|
|
|
|
ctx.beginPath();
|
|
|
ctx.arc(clickX, clickY, 8, 0, Math.PI * 2);
|
|
|
ctx.strokeStyle = state.currentClass === 1 ? 'hsl(142, 71%, 45%)' : 'hsl(350, 89%, 60%)';
|
|
|
ctx.setLineDash([4, 4]);
|
|
|
ctx.stroke();
|
|
|
ctx.setLineDash([]);
|
|
|
|
|
|
|
|
|
const x = (clickX / (canvasSize / 2)) - 1;
|
|
|
const y = 1 - (clickY / (canvasSize / 2));
|
|
|
state.lastProbe = { x, y };
|
|
|
|
|
|
if (state.network) {
|
|
|
state.activations = state.network.forward([x, y]).activations;
|
|
|
updateExplainers();
|
|
|
renderNetwork();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function renderCanvas() {
|
|
|
|
|
|
ctx.fillStyle = 'hsl(222, 47%, 8%)';
|
|
|
ctx.fillRect(0, 0, canvasSize, canvasSize);
|
|
|
|
|
|
|
|
|
if (state.predictions && state.predictions.length > 0) {
|
|
|
const cellSize = canvasSize / gridSize;
|
|
|
for (let i = 0; i < gridSize; i++) {
|
|
|
for (let j = 0; j < gridSize; j++) {
|
|
|
const pred = state.predictions[i][j];
|
|
|
|
|
|
const hue = pred > 0.5 ? 142 : 350;
|
|
|
const lightness = 20 + Math.abs(pred - 0.5) * 40;
|
|
|
const alpha = 0.3 + Math.abs(pred - 0.5) * 0.4;
|
|
|
ctx.fillStyle = `hsla(${hue}, 70%, ${lightness}%, ${alpha})`;
|
|
|
ctx.fillRect(j * cellSize, i * cellSize, cellSize, cellSize);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
ctx.strokeStyle = 'hsla(217, 33%, 40%, 0.2)';
|
|
|
ctx.lineWidth = 1;
|
|
|
for (let i = 0; i <= canvasSize; i += 30) {
|
|
|
ctx.beginPath(); ctx.moveTo(i, 0); ctx.lineTo(i, canvasSize); ctx.stroke();
|
|
|
ctx.beginPath(); ctx.moveTo(0, i); ctx.lineTo(canvasSize, i); ctx.stroke();
|
|
|
}
|
|
|
|
|
|
|
|
|
ctx.strokeStyle = 'hsla(217, 33%, 50%, 0.5)';
|
|
|
ctx.lineWidth = 2;
|
|
|
ctx.beginPath(); ctx.moveTo(canvasSize / 2, 0); ctx.lineTo(canvasSize / 2, canvasSize); ctx.stroke();
|
|
|
ctx.beginPath(); ctx.moveTo(0, canvasSize / 2); ctx.lineTo(canvasSize, canvasSize / 2); ctx.stroke();
|
|
|
|
|
|
|
|
|
state.dataPoints.forEach(point => {
|
|
|
const drawX = (point.x + 1) * (canvasSize / 2);
|
|
|
const drawY = (1 - point.y) * (canvasSize / 2);
|
|
|
|
|
|
ctx.beginPath();
|
|
|
ctx.arc(drawX, drawY, 6, 0, Math.PI * 2);
|
|
|
ctx.fillStyle = point.label === 1 ? 'hsl(142, 71%, 45%)' : 'hsl(350, 89%, 60%)';
|
|
|
ctx.fill();
|
|
|
ctx.strokeStyle = 'white';
|
|
|
ctx.lineWidth = 2;
|
|
|
ctx.stroke();
|
|
|
});
|
|
|
}
|
|
|
|
|
|
|
|
|
function renderNetwork() {
|
|
|
const container = document.getElementById('network-container');
|
|
|
const width = 500;
|
|
|
const height = 300;
|
|
|
const layers = [2, state.hiddenNeurons, 1];
|
|
|
const layerSpacing = (width - 100) / (layers.length - 1);
|
|
|
|
|
|
let svgHtml = `<svg width="${width}" height="${height}" style="overflow: visible;">`;
|
|
|
|
|
|
|
|
|
const nodePositions = [];
|
|
|
layers.forEach((count, layerIdx) => {
|
|
|
const x = 50 + layerIdx * layerSpacing;
|
|
|
const maxNodes = Math.max(...layers);
|
|
|
const vSpacing = (height - 100) / (maxNodes + 1);
|
|
|
const offset = ((maxNodes - count) * vSpacing) / 2;
|
|
|
for(let i=0; i<count; i++) {
|
|
|
nodePositions.push({
|
|
|
x: x,
|
|
|
y: 50 + offset + (i+1) * vSpacing,
|
|
|
layer: layerIdx,
|
|
|
index: i
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
|
|
|
|
|
|
const weights = state.network.getWeights();
|
|
|
let fromIndex = 0;
|
|
|
for(let l=0; l<layers.length-1; l++) {
|
|
|
const fromCount = layers[l];
|
|
|
const toCount = layers[l+1];
|
|
|
const toStartIndex = fromIndex + fromCount;
|
|
|
|
|
|
for(let i=0; i<fromCount; i++) {
|
|
|
for(let j=0; j<toCount; j++) {
|
|
|
const w = weights[l][j][i];
|
|
|
const fromNode = nodePositions[fromIndex + i];
|
|
|
const toNode = nodePositions[toStartIndex + j];
|
|
|
const opacity = Math.min(0.8, 0.1 + Math.abs(w) * 0.3);
|
|
|
const color = w > 0 ? 'hsl(142, 71%, 45%)' : 'hsl(350, 89%, 60%)';
|
|
|
const dash = state.isTraining ? 'stroke-dasharray="4 4" class="animate-flow"' : '';
|
|
|
|
|
|
svgHtml += `<line x1="${fromNode.x}" y1="${fromNode.y}" x2="${toNode.x}" y2="${toNode.y}" stroke="${color}" stroke-width="${1 + Math.abs(w)}" stroke-opacity="${opacity}" ${dash} />`;
|
|
|
}
|
|
|
}
|
|
|
fromIndex += fromCount;
|
|
|
}
|
|
|
|
|
|
|
|
|
nodePositions.forEach(node => {
|
|
|
let activation = 0;
|
|
|
if(state.activations) {
|
|
|
activation = state.activations[node.layer][node.index];
|
|
|
}
|
|
|
|
|
|
let color = 'hsl(280, 65%, 55%)';
|
|
|
if(node.layer === 0) color = 'hsl(199, 89%, 48%)';
|
|
|
if(node.layer === layers.length - 1) {
|
|
|
color = activation > 0.5 ? 'hsl(142, 71%, 45%)' : 'hsl(350, 89%, 60%)';
|
|
|
}
|
|
|
|
|
|
const r = 10 + (activation * 5);
|
|
|
const pulseClass = state.isTraining ? 'class="animate-node-pulse"' : '';
|
|
|
|
|
|
svgHtml += `<circle cx="${node.x}" cy="${node.y}" r="${r+4}" fill="none" stroke="${color}" stroke-opacity="0.3" ${pulseClass} />`;
|
|
|
svgHtml += `<circle cx="${node.x}" cy="${node.y}" r="${r}" fill="${color}" />`;
|
|
|
svgHtml += `<text x="${node.x}" y="${node.y - r - 5}" text-anchor="middle" fill="white" font-size="9">${activation.toFixed(2)}</text>`;
|
|
|
});
|
|
|
|
|
|
svgHtml += `</svg>`;
|
|
|
container.innerHTML = svgHtml;
|
|
|
}
|
|
|
|
|
|
|
|
|
function updateExplainers() {
|
|
|
if(!state.activations) return;
|
|
|
|
|
|
|
|
|
document.getElementById('val-x').innerText = state.activations[0][0].toFixed(2);
|
|
|
document.getElementById('val-y').innerText = state.activations[0][1].toFixed(2);
|
|
|
|
|
|
|
|
|
const hiddenContainer = document.getElementById('val-hidden');
|
|
|
let hiddenHtml = '';
|
|
|
state.activations[1].forEach(v => {
|
|
|
const cls = v > 0.5 ? 'bg-white/10 text-white' : 'text-gray-500';
|
|
|
hiddenHtml += `<div class="text-center p-1 rounded ${cls}">${v.toFixed(1)}</div>`;
|
|
|
});
|
|
|
hiddenContainer.innerHTML = hiddenHtml;
|
|
|
|
|
|
|
|
|
const outVal = state.activations[2][0];
|
|
|
document.getElementById('val-raw').innerText = outVal.toFixed(4);
|
|
|
const classEl = document.getElementById('val-class');
|
|
|
|
|
|
|
|
|
if(outVal > 0.5) {
|
|
|
classEl.innerText = "Class A";
|
|
|
classEl.style.color = "hsl(142, 71%, 45%)";
|
|
|
} else {
|
|
|
classEl.innerText = "Class B";
|
|
|
classEl.style.color = "hsl(350, 89%, 60%)";
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
function toggleTraining() {
|
|
|
if(state.dataPoints.length < 2) {
|
|
|
alert("Please add at least 2 data points first!");
|
|
|
return;
|
|
|
}
|
|
|
state.isTraining = !state.isTraining;
|
|
|
const btn = document.getElementById('btn-train');
|
|
|
|
|
|
if(state.isTraining) {
|
|
|
btn.innerHTML = '<i data-lucide="zap" class="h-4 w-4 animate-pulse mr-2"></i> Stop';
|
|
|
document.getElementById('epoch-display').classList.remove('hidden');
|
|
|
document.getElementById('accuracy-panel').classList.remove('hidden');
|
|
|
trainStep();
|
|
|
} else {
|
|
|
btn.innerHTML = '<i data-lucide="play" class="h-4 w-4 mr-2"></i> Train Network';
|
|
|
}
|
|
|
lucide.createIcons();
|
|
|
}
|
|
|
|
|
|
function trainStep() {
|
|
|
if(!state.isTraining) return;
|
|
|
if(state.epoch >= 100) {
|
|
|
toggleTraining();
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
state.network.train(state.dataPoints, 10);
|
|
|
state.epoch++;
|
|
|
|
|
|
|
|
|
|
|
|
state.activations = state.network.forward([state.lastProbe.x, state.lastProbe.y]).activations;
|
|
|
updateExplainers();
|
|
|
renderNetwork();
|
|
|
|
|
|
if(state.epoch % 5 === 0) {
|
|
|
|
|
|
state.predictions = generatePredictions();
|
|
|
|
|
|
|
|
|
let correct = 0;
|
|
|
state.dataPoints.forEach(p => {
|
|
|
if ((state.network.predict(p.x, p.y) > 0.5 ? 1 : 0) === p.label) correct++;
|
|
|
});
|
|
|
state.accuracy = correct / state.dataPoints.length;
|
|
|
|
|
|
|
|
|
document.getElementById('epoch-display').innerText = "Epoch " + state.epoch;
|
|
|
document.getElementById('accuracy-display').innerText = (state.accuracy * 100).toFixed(1) + "%";
|
|
|
document.getElementById('accuracy-display').className = "text-lg font-bold " + (state.accuracy > 0.8 ? 'text-[hsl(var(--accent))]' : state.accuracy > 0.5 ? 'text-[hsl(var(--secondary))]' : 'text-[hsl(var(--destructive))]');
|
|
|
|
|
|
document.getElementById('progress-bar').style.width = state.epoch + "%";
|
|
|
|
|
|
|
|
|
const logItem = `<div class="flex justify-between text-xs py-1 border-b border-white/5 last:border-0">
|
|
|
<span class="text-[hsl(var(--muted-foreground))]">Epoch ${state.epoch}</span>
|
|
|
<span class="${state.accuracy > 0.8 ? 'text-[hsl(var(--accent))]' : 'text-white'}">${(state.accuracy * 100).toFixed(1)}%</span>
|
|
|
</div>`;
|
|
|
document.getElementById('logs-container').insertAdjacentHTML('afterbegin', logItem);
|
|
|
|
|
|
renderCanvas();
|
|
|
}
|
|
|
|
|
|
requestAnimationFrame(trainStep);
|
|
|
}
|
|
|
|
|
|
|
|
|
function loadPreset(type) {
|
|
|
let points = [];
|
|
|
if (type === 'XOR') {
|
|
|
for(let i=0; i<20; i++) {
|
|
|
points.push({ x: -0.5 + Math.random()*0.3, y: 0.5 + Math.random()*0.3, label: 1 });
|
|
|
points.push({ x: 0.5 + Math.random()*0.3, y: -0.5 - Math.random()*0.3, label: 1 });
|
|
|
points.push({ x: 0.5 + Math.random()*0.3, y: 0.5 + Math.random()*0.3, label: 0 });
|
|
|
points.push({ x: -0.5 + Math.random()*0.3, y: -0.5 - Math.random()*0.3, label: 0 });
|
|
|
}
|
|
|
} else if (type === 'Circle') {
|
|
|
for(let i=0; i<40; i++) {
|
|
|
const angle = Math.random() * Math.PI * 2;
|
|
|
const r1 = Math.random() * 0.4;
|
|
|
points.push({ x: Math.cos(angle)*r1, y: Math.sin(angle)*r1, label: 1 });
|
|
|
const r2 = 0.6 + Math.random() * 0.3;
|
|
|
points.push({ x: Math.cos(angle)*r2, y: Math.sin(angle)*r2, label: 0 });
|
|
|
}
|
|
|
} else if (type === 'Linear') {
|
|
|
for(let i=0; i<30; i++) {
|
|
|
points.push({ x: -0.4 - Math.random()*0.4, y: Math.random()*1.6 - 0.8, label: 1 });
|
|
|
points.push({ x: 0.4 + Math.random()*0.4, y: Math.random()*1.6 - 0.8, label: 0 });
|
|
|
}
|
|
|
} else if (type === 'Spiral') {
|
|
|
for (let i = 0; i < 60; i++) {
|
|
|
const r = i / 60;
|
|
|
const t = 1.75 * i / 60 * 2 * Math.PI;
|
|
|
points.push({ x: r * Math.sin(t), y: r * Math.cos(t), label: 1 });
|
|
|
points.push({ x: r * Math.sin(t + Math.PI), y: r * Math.cos(t + Math.PI), label: 0 });
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
state.dataPoints = points;
|
|
|
state.isTraining = false;
|
|
|
state.epoch = 0;
|
|
|
state.accuracy = 0;
|
|
|
state.logs = [];
|
|
|
state.network = new SimpleNeuralNetwork(2, state.hiddenNeurons, 1, state.learningRate);
|
|
|
state.predictions = generatePredictions();
|
|
|
state.lastProbe = { x: 0, y: 0 };
|
|
|
|
|
|
document.getElementById('points-count').innerText = points.length;
|
|
|
document.getElementById('accuracy-panel').classList.add('hidden');
|
|
|
document.getElementById('epoch-display').classList.add('hidden');
|
|
|
document.getElementById('progress-bar').style.width = '0%';
|
|
|
document.getElementById('logs-container').innerHTML = '';
|
|
|
|
|
|
const btnTrain = document.getElementById('btn-train');
|
|
|
btnTrain.innerHTML = '<i data-lucide="play" class="h-4 w-4 mr-2"></i> Train Network';
|
|
|
lucide.createIcons();
|
|
|
|
|
|
renderCanvas();
|
|
|
renderNetwork();
|
|
|
|
|
|
if(points.length) {
|
|
|
|
|
|
state.lastProbe = { x: points[0].x, y: points[0].y };
|
|
|
state.activations = state.network.forward([points[0].x, points[0].y]).activations;
|
|
|
updateExplainers();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function renderUI() {
|
|
|
renderNetwork();
|
|
|
}
|
|
|
|
|
|
|
|
|
window.onload = init;
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
