|
|
<!DOCTYPE html> |
|
|
<html lang="vi"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>MLP Interactive Visualization</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script> |
|
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
body { font-family: 'Inter', sans-serif; background-color: #f1f5f9; } |
|
|
|
|
|
|
|
|
.button-active-blue { |
|
|
background-color: #2563eb !important; |
|
|
color: white !important; |
|
|
border-color: #2563eb !important; |
|
|
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); |
|
|
} |
|
|
.button-active-red { |
|
|
background-color: #dc2626 !important; |
|
|
color: white !important; |
|
|
border-color: #dc2626 !important; |
|
|
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); |
|
|
} |
|
|
|
|
|
|
|
|
#plotCanvas { touch-action: none; } |
|
|
#plotCanvas.cursor-class-0 { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%233b82f6" stroke="white" stroke-width="2"><circle cx="12" cy="12" r="8"/><path d="M12 2v4M12 18v4M22 12h-4M6 12H2"/></svg>') 12 12, crosshair; } |
|
|
#plotCanvas.cursor-class-1 { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23ef4444" stroke="white" stroke-width="2"><circle cx="12" cy="12" r="8"/><path d="M12 2v4M12 18v4M22 12h-4M6 12H2"/></svg>') 12 12, crosshair; } |
|
|
|
|
|
|
|
|
#hiddenLayersConfigContainer::-webkit-scrollbar { width: 6px; } |
|
|
#hiddenLayersConfigContainer::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 8px; } |
|
|
#hiddenLayersConfigContainer::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 8px; } |
|
|
#hiddenLayersConfigContainer::-webkit-scrollbar-thumb:hover { background: #64748b; } |
|
|
|
|
|
|
|
|
.neuron { |
|
|
stroke-width: 1.5; |
|
|
transition: stroke-width 0.2s ease-in-out; |
|
|
} |
|
|
.neuron:hover { |
|
|
stroke-width: 4; |
|
|
} |
|
|
.neuron.input { fill: #60a5fa; stroke: #2563eb; } |
|
|
.neuron.hidden-0 { fill: #818cf8; stroke: #4f46e5; } |
|
|
.neuron.hidden-1 { fill: #a78bfa; stroke: #7c3aed; } |
|
|
.neuron.hidden-2 { fill: #c084fc; stroke: #9333ea; } |
|
|
.neuron.hidden-3 { fill: #e879f9; stroke: #c026d3; } |
|
|
.neuron.hidden-other { fill: #f472b6; stroke: #db2777; } |
|
|
.neuron.output { fill: #f87171; stroke: #dc2626; } |
|
|
|
|
|
.connection { |
|
|
stroke: #cbd5e1; |
|
|
stroke-width: 0.75; |
|
|
transition: stroke-opacity 0.2s; |
|
|
} |
|
|
|
|
|
.layer-label { |
|
|
font-size: 11px; |
|
|
font-weight: 600; |
|
|
fill: #475569; |
|
|
text-anchor: middle; |
|
|
} |
|
|
.neuron-count-label { |
|
|
font-size: 10px; |
|
|
font-weight: 500; |
|
|
fill: #64748b; |
|
|
text-anchor: middle; |
|
|
} |
|
|
|
|
|
|
|
|
.title-icon { margin-left: 0.6rem; font-size: 1.1rem; } |
|
|
.action-icon { margin-right: 0.35rem; } |
|
|
.status-icon { margin-right: 0.5rem; flex-shrink: 0; font-size: 1.1rem; } |
|
|
.loading-icon { animation: spin 1.5s linear infinite; display: inline-block; } |
|
|
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } |
|
|
|
|
|
|
|
|
.cm-cell { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
flex-direction: column; |
|
|
line-height: 1.2; |
|
|
padding: 0.5rem; |
|
|
border-radius: 0.25rem; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.cm-value { font-size: 1.125rem; font-weight: 800; } |
|
|
.cm-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } |
|
|
</style> |
|
|
</head> |
|
|
<body class="text-slate-800"> |
|
|
|
|
|
<div class="container mx-auto p-2 sm:p-4 max-w-full"> |
|
|
<header class="mb-4 text-center"> |
|
|
<h1 class="text-3xl sm:text-4xl font-extrabold text-blue-600">MLP Interactive Visualization</h1> |
|
|
<p class="text-md text-slate-600 mt-1">Build, train, and visualize a Multi-Layer Perceptron.</p> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="flex flex-col lg:flex-row gap-2.5"> |
|
|
|
|
|
<div class="lg:w-6/12 bg-white p-3.5 rounded-2xl shadow-xl border border-slate-200 space-y-5"> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<h2 class="text-xl font-bold text-slate-700 border-b border-slate-200 pb-2 flex items-center"> |
|
|
1. Data & Training <span class="title-icon">⚙️</span> |
|
|
</h2> |
|
|
<div class="grid grid-cols-2 sm:grid-cols-4 gap-x-4 gap-y-3"> |
|
|
<div class="col-span-2 sm:col-span-4"> |
|
|
<label class="text-sm font-medium text-slate-700 block mb-1.5">Data Input Class:</label> |
|
|
<div class="flex rounded-lg shadow-sm"> |
|
|
<button id="class0Button" class="flex-1 px-3 py-2 border border-slate-300 rounded-l-lg bg-white text-base font-semibold text-slate-700 hover:bg-slate-50 focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-150" title="Select Class 0 for the next data points">Class 0 (Blue)</button> |
|
|
<button id="class1Button" class="flex-1 px-3 py-2 border-t border-b border-r border-slate-300 rounded-r-lg bg-white text-base font-semibold text-slate-700 hover:bg-slate-50 focus:z-10 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-all duration-150" title="Select Class 1 for the next data points">Class 1 (Red)</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="datasetSelect" class="text-sm font-medium text-slate-700 block mb-1">Load Dataset:</label> |
|
|
<select id="datasetSelect" class="mt-0 block w-full px-2 py-1.5 border border-slate-300 bg-white rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" title="Choose a preset dataset."> |
|
|
<option value="manual">Manual Input</option> |
|
|
<option value="two_moons">Two Moons</option> |
|
|
<option value="circles">Concentric Circles</option> |
|
|
<option value="xor">XOR</option> |
|
|
<option value="spiral">Spiral</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label for="dataNoise" class="text-sm font-medium text-slate-700 block mb-1">Data Noise:</label> |
|
|
<input type="number" id="dataNoise" value="0.05" min="0" max="0.5" step="0.01" class="mt-0 block w-full px-2 py-1.5 border border-slate-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" title="Add random noise to the data points."> |
|
|
</div> |
|
|
<div> |
|
|
<label for="learningRate" class="text-sm font-medium text-slate-700 block mb-1">Learning Rate:</label> |
|
|
<input type="number" id="learningRate" value="0.01" step="0.001" min="0.00001" class="mt-0 block w-full px-2 py-1.5 border border-slate-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" title="How fast the model learns."> |
|
|
</div> |
|
|
<div> |
|
|
<label for="epochs" class="text-sm font-medium text-slate-700 block mb-1">Epochs:</label> |
|
|
<input type="number" id="epochs" value="150" step="10" min="1" class="mt-0 block w-full px-2 py-1.5 border border-slate-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" title="Number of training iterations."> |
|
|
</div> |
|
|
<div> |
|
|
<label for="optimizerSelect" class="text-sm font-medium text-slate-700 block mb-1">Optimizer:</label> |
|
|
<select id="optimizerSelect" class="mt-0 block w-full px-2 py-1.5 border border-slate-300 bg-white rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" title="Algorithm to update weights."> |
|
|
<option value="adam">Adam</option> |
|
|
<option value="sgd">SGD</option> |
|
|
<option value="rmsprop">RMSprop</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label for="batchSize" class="text-sm font-medium text-slate-700 block mb-1">Batch Size:</label> |
|
|
<input type="number" id="batchSize" value="16" min="0" step="4" class="mt-0 block w-full px-2 py-1.5 border border-slate-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" title="Samples per weight update. 0=Full."> |
|
|
</div> |
|
|
<div> |
|
|
<label for="regularizationTypeSelect" class="text-sm font-medium text-slate-700 block mb-1">Regularization:</label> |
|
|
<select id="regularizationTypeSelect" class="mt-0 block w-full px-2 py-1.5 border border-slate-300 bg-white rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" title="Technique to prevent overfitting."> |
|
|
<option value="none">None</option> |
|
|
<option value="l1">L1</option> |
|
|
<option value="l2">L2</option> |
|
|
</select> |
|
|
</div> |
|
|
<div id="regularizationRateContainer" class="hidden"> |
|
|
<label for="regularizationRateInput" class="text-sm font-medium text-slate-700 block mb-1">Reg. Rate (λ):</label> |
|
|
<input type="number" id="regularizationRateInput" value="0.001" step="0.0001" min="0" class="mt-0 block w-full px-2 py-1.5 border border-slate-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" title="Strength of the L1/L2 penalty."> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-2"> |
|
|
<h2 class="text-xl font-bold text-slate-700 border-b border-slate-200 pb-2 flex items-center"> |
|
|
2. MLP Architecture <span class="title-icon">🧠</span> |
|
|
</h2> |
|
|
<div id="networkVisualization" class="bg-slate-50 rounded-lg p-2 min-h-[120px] border border-slate-200"></div> |
|
|
<h3 class="text-sm font-medium text-slate-700 pt-2">Hidden Layers:</h3> |
|
|
<div id="hiddenLayersConfigContainer" class="grid grid-cols-1 md:grid-cols-2 gap-2 max-h-48 overflow-y-auto pr-1.5"></div> |
|
|
<button id="addHiddenLayerButton" class="mt-1 w-full flex justify-center items-center py-2 px-3 border-2 border-dashed border-blue-400 rounded-lg shadow-sm text-sm font-semibold text-blue-600 bg-blue-50 hover:bg-blue-100 hover:border-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-150" title="Add a new hidden layer."> |
|
|
<span class="action-icon text-base">➕</span> Add Layer |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-2"> |
|
|
<h2 class="text-xl font-bold text-slate-700 border-b border-slate-200 pb-2 flex items-center"> |
|
|
3. Actions <span class="title-icon">⚡️</span> |
|
|
</h2> |
|
|
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2.5"> |
|
|
<button id="trainButton" class="col-span-2 flex justify-center items-center py-2.5 px-3 border border-transparent rounded-lg shadow-md text-base font-bold text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-green-400" title="Start or retrain the model."> |
|
|
<span class="action-icon">▶️</span> <span id="trainButtonText">Train</span> |
|
|
</button> |
|
|
<button id="stopButton" class="hidden col-span-2 flex justify-center items-center py-2.5 px-3 border border-transparent rounded-lg shadow-md text-base font-bold text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-all" title="Stop the current training process."> |
|
|
<span class="action-icon">⏹️</span> <span>Stop</span> |
|
|
</button> |
|
|
<button id="resetWeightsButton" class="flex justify-center items-center py-2.5 px-3 border border-slate-300 rounded-lg shadow-sm text-base font-semibold text-slate-700 bg-white hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed" title="Re-initialize the model's weights."> |
|
|
<span class="action-icon">🔄</span> <span>Reset</span> |
|
|
</button> |
|
|
<button id="clearButton" class="flex justify-center items-center py-2.5 px-3 border border-slate-300 rounded-lg shadow-sm text-base font-semibold text-slate-700 bg-white hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed" title="Delete all data and reset settings."> |
|
|
<span class="action-icon">🗑️</span> <span>Clear All</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:w-6/12 flex flex-col gap-2.5"> |
|
|
<div class="bg-white p-2 rounded-2xl shadow-xl border border-slate-200"> |
|
|
<canvas id="plotCanvas" class="border border-slate-200 rounded-xl w-full"></canvas> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-3.5 rounded-2xl shadow-xl border border-slate-200 flex flex-col flex-grow"> |
|
|
<h2 class="text-xl font-bold text-slate-700 mb-2 border-b border-slate-200 pb-2 flex items-center"> |
|
|
Training Status <span class="title-icon">📊</span> |
|
|
</h2> |
|
|
<div id="trainingParamsDisplay" class="text-xs mb-2 space-y-1"></div> |
|
|
<div id="statusMessage" class="text-sm text-slate-600 p-2 bg-slate-50 rounded-lg min-h-[44px] mb-3 whitespace-pre-line leading-snug flex items-center justify-center border border-slate-200"></div> |
|
|
<div class="flex-grow flex flex-col sm:flex-row gap-4"> |
|
|
<div class="w-full sm:w-2/3 relative min-h-[150px]"> |
|
|
<canvas id="trainingPlotCanvas" class="w-full h-full"></canvas> |
|
|
</div> |
|
|
<div id="confusionMatrixContainer" class="w-full sm:w-1/3"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
|
|
|
|
|
|
const App = { |
|
|
|
|
|
state: { |
|
|
model: null, |
|
|
dataPoints: [], |
|
|
currentClass: 0, |
|
|
hiddenLayerConfigs: [], |
|
|
trainingHistory: { loss: [], acc: [] }, |
|
|
isTraining: false, |
|
|
}, |
|
|
ui: {}, |
|
|
config: { |
|
|
pointRadius: 4.5, |
|
|
classColors: { |
|
|
0: { point: 'rgba(59, 130, 246, 1)', boundary: 'rgba(59, 130, 246, 0.3)' }, |
|
|
1: { point: 'rgba(239, 68, 68, 1)', boundary: 'rgba(239, 68, 68, 0.3)' } |
|
|
}, |
|
|
statusIcons: { |
|
|
info: 'ℹ️', success: '✅', warning: '⚠️', error: '❌', loading: '⏳' |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
async init() { |
|
|
this.cacheUIElements(); |
|
|
this.registerEventListeners(); |
|
|
|
|
|
await tf.ready(); |
|
|
try { |
|
|
await tf.setBackend('cpu'); |
|
|
console.log("TensorFlow.js backend set to CPU."); |
|
|
} catch (e) { console.warn("Could not set TF.js backend to CPU.", e); } |
|
|
|
|
|
this.methods.resizePlotCanvas(); |
|
|
this.initializeApplicationState(); |
|
|
}, |
|
|
|
|
|
cacheUIElements() { |
|
|
const ids = [ |
|
|
'class0Button', 'class1Button', 'datasetSelect', 'dataNoise', 'batchSize', |
|
|
'hiddenLayersConfigContainer', 'addHiddenLayerButton', 'networkVisualization', |
|
|
'optimizerSelect', 'learningRate', 'epochs', 'regularizationTypeSelect', |
|
|
'regularizationRateContainer', 'regularizationRateInput', 'trainButton', |
|
|
'stopButton', 'resetWeightsButton', 'clearButton', 'statusMessage', |
|
|
'plotCanvas', 'trainingPlotCanvas', 'trainingParamsDisplay', 'trainButtonText', |
|
|
'confusionMatrixContainer' |
|
|
]; |
|
|
ids.forEach(id => { this.ui[id] = document.getElementById(id); }); |
|
|
this.ui.canvas = this.ui.plotCanvas; |
|
|
this.ui.ctx = this.ui.canvas.getContext('2d'); |
|
|
}, |
|
|
|
|
|
registerEventListeners() { |
|
|
window.addEventListener('resize', () => { |
|
|
this.methods.resizePlotCanvas(); |
|
|
this.methods.drawTrainingPlot(); |
|
|
this.methods.drawNetworkVisualization(); |
|
|
}); |
|
|
this.ui.canvas.addEventListener('click', (e) => this.methods.handleCanvasClick(e)); |
|
|
this.ui.class0Button.addEventListener('click', () => this.methods.setActiveClass(0)); |
|
|
this.ui.class1Button.addEventListener('click', () => this.methods.setActiveClass(1)); |
|
|
this.ui.addHiddenLayerButton.addEventListener('click', () => this.methods.addHiddenLayerUI()); |
|
|
this.ui.trainButton.addEventListener('click', () => this.methods.trainAndVisualize()); |
|
|
this.ui.stopButton.addEventListener('click', () => this.methods.stopTraining()); |
|
|
this.ui.resetWeightsButton.addEventListener('click', () => this.methods.resetModelWeights()); |
|
|
this.ui.clearButton.addEventListener('click', () => this.methods.clearAllDataAndReseed()); |
|
|
this.ui.datasetSelect.addEventListener('change', () => this.methods.loadSelectedDataset()); |
|
|
this.ui.dataNoise.addEventListener('input', () => { if (this.ui.datasetSelect.value !== 'manual') this.methods.loadSelectedDataset(); }); |
|
|
this.ui.regularizationTypeSelect.addEventListener('change', () => this.methods.toggleRegularizationRateInput()); |
|
|
}, |
|
|
|
|
|
initializeApplicationState() { |
|
|
this.methods.setActiveClass(0); |
|
|
this.methods.addHiddenLayerUI(8, 'relu'); |
|
|
this.methods.addHiddenLayerUI(4, 'relu'); |
|
|
this.methods.toggleRegularizationRateInput(); |
|
|
this.methods.drawAll(); |
|
|
this.methods.drawTrainingPlot(); |
|
|
this.methods.updateTrainingParamsDisplay(); |
|
|
this.methods.updateButtonStates(); |
|
|
this.methods.renderConfusionMatrix(null); |
|
|
this.methods.updateStatus('Ready. Click canvas to add points or load a dataset.', 'info'); |
|
|
}, |
|
|
|
|
|
|
|
|
methods: { |
|
|
|
|
|
resizePlotCanvas() { |
|
|
const dpr = window.devicePixelRatio || 1; |
|
|
const rect = App.ui.canvas.parentElement.getBoundingClientRect(); |
|
|
if (rect.width === 0) return; |
|
|
|
|
|
App.ui.canvas.width = rect.width * dpr; |
|
|
const newHeight = Math.min(rect.width * 0.85, Math.max(300, window.innerHeight * 0.5)); |
|
|
App.ui.canvas.height = newHeight * dpr; |
|
|
|
|
|
App.ui.ctx.scale(dpr, dpr); |
|
|
App.ui.canvas.style.width = `${rect.width}px`; |
|
|
App.ui.canvas.style.height = `${newHeight}px`; |
|
|
|
|
|
App.ui.canvasWidth = rect.width; |
|
|
App.ui.canvasHeight = newHeight; |
|
|
this.drawAll(); |
|
|
}, |
|
|
|
|
|
setActiveClass(classNum) { |
|
|
App.state.currentClass = classNum; |
|
|
App.ui.class0Button.classList.toggle('button-active-blue', classNum === 0); |
|
|
App.ui.class1Button.classList.toggle('button-active-red', classNum === 1); |
|
|
App.ui.plotCanvas.className = App.ui.plotCanvas.className.replace(/cursor-class-\d/, ''); |
|
|
App.ui.plotCanvas.classList.add(`cursor-class-${classNum}`); |
|
|
}, |
|
|
|
|
|
toggleRegularizationRateInput() { |
|
|
App.ui.regularizationRateContainer.classList.toggle('hidden', App.ui.regularizationTypeSelect.value === 'none'); |
|
|
}, |
|
|
|
|
|
updateStatus(message, type = 'info') { |
|
|
const icon = App.config.statusIcons[type] || ''; |
|
|
const loadingClass = type === 'loading' ? 'loading-icon' : ''; |
|
|
const iconHtml = `<span class="status-icon ${loadingClass}">${icon}</span>`; |
|
|
App.ui.statusMessage.innerHTML = `${iconHtml}<span>${message}</span>`; |
|
|
|
|
|
const typeToColor = { |
|
|
info: 'text-slate-600 bg-slate-50 border-slate-200', |
|
|
success: 'text-green-700 bg-green-50 border-green-200 font-semibold', |
|
|
warning: 'text-amber-700 bg-amber-50 border-amber-200 font-semibold', |
|
|
error: 'text-red-700 bg-red-50 border-red-200 font-semibold', |
|
|
loading: 'text-blue-700 bg-blue-50 border-blue-200' |
|
|
}; |
|
|
App.ui.statusMessage.className = `text-sm p-2 rounded-lg min-h-[44px] whitespace-pre-line leading-snug flex items-center justify-center border ${typeToColor[type] || ''}`; |
|
|
}, |
|
|
|
|
|
setTrainingState(training) { |
|
|
App.state.isTraining = training; |
|
|
App.ui.trainButton.classList.toggle('hidden', training); |
|
|
App.ui.stopButton.classList.toggle('hidden', !training); |
|
|
this.updateButtonStates(); |
|
|
}, |
|
|
|
|
|
updateButtonStates() { |
|
|
const hasData = App.state.dataPoints.length > 0; |
|
|
const hasModel = App.state.model != null; |
|
|
App.ui.trainButton.disabled = App.state.isTraining || !hasData; |
|
|
App.ui.clearButton.disabled = App.state.isTraining; |
|
|
App.ui.resetWeightsButton.disabled = App.state.isTraining || !hasModel; |
|
|
|
|
|
if (hasModel && App.state.trainingHistory.loss.length > 0 && !App.state.isTraining) { |
|
|
App.ui.trainButtonText.textContent = 'Retrain'; |
|
|
} else { |
|
|
App.ui.trainButtonText.textContent = 'Train'; |
|
|
} |
|
|
}, |
|
|
|
|
|
|
|
|
addHiddenLayerUI(defaultNeurons = 8, defaultActivation = 'relu') { |
|
|
if (App.state.hiddenLayerConfigs.length >= 8) { |
|
|
this.updateStatus("Max 8 hidden layers reached.", 'warning'); |
|
|
return; |
|
|
} |
|
|
const layerIndex = App.state.hiddenLayerConfigs.length; |
|
|
App.state.hiddenLayerConfigs.push({ neurons: parseInt(defaultNeurons), activation: defaultActivation }); |
|
|
|
|
|
const layerDiv = document.createElement('div'); |
|
|
layerDiv.className = 'layer-config-item bg-slate-50 border border-slate-200 p-2 rounded-lg flex items-center justify-between gap-2 hover:bg-slate-100 transition-colors'; |
|
|
layerDiv.dataset.index = layerIndex; |
|
|
|
|
|
layerDiv.innerHTML = ` |
|
|
<div class="flex-grow flex items-center gap-x-3"> |
|
|
<div class="flex items-center"> |
|
|
<label for="neurons_${layerIndex}" class="text-sm font-medium text-slate-600 mr-2 whitespace-nowrap">L${layerIndex + 1} Units:</label> |
|
|
<input type="number" id="neurons_${layerIndex}" value="${defaultNeurons}" min="1" max="64" step="1" class="w-16 px-2 py-1 border border-slate-300 rounded-md shadow-sm text-sm focus:ring-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<label for="activation_${layerIndex}" class="text-sm font-medium text-slate-600 mr-2">Act:</label> |
|
|
<select id="activation_${layerIndex}" class="flex-1 min-w-[90px] px-2 py-1 border bg-white border-slate-300 rounded-md shadow-sm text-sm focus:ring-blue-500 focus:border-blue-500"> |
|
|
${['relu', 'sigmoid', 'tanh', 'leakyRelu'].map(act => `<option value="${act}" ${act === defaultActivation ? 'selected' : ''}>${act.charAt(0).toUpperCase() + act.slice(1)}</option>`).join('')} |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<button title="Remove layer" class="remove-btn flex-shrink-0 p-1.5 text-red-500 hover:text-red-700 rounded-full hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-1 transition-all duration-150"> |
|
|
<span class="text-base font-bold">⛔</span> |
|
|
</button> |
|
|
`; |
|
|
|
|
|
App.ui.hiddenLayersConfigContainer.appendChild(layerDiv); |
|
|
|
|
|
layerDiv.querySelector(`#neurons_${layerIndex}`).onchange = (e) => { |
|
|
const value = parseInt(e.target.value); |
|
|
App.state.hiddenLayerConfigs[layerIndex].neurons = !isNaN(value) && value > 0 ? value : 1; |
|
|
e.target.value = App.state.hiddenLayerConfigs[layerIndex].neurons; |
|
|
this.drawNetworkVisualization(); |
|
|
}; |
|
|
layerDiv.querySelector(`#activation_${layerIndex}`).onchange = (e) => { |
|
|
App.state.hiddenLayerConfigs[layerIndex].activation = e.target.value; |
|
|
this.drawNetworkVisualization(); |
|
|
}; |
|
|
layerDiv.querySelector('.remove-btn').onclick = () => { |
|
|
App.state.hiddenLayerConfigs.splice(layerIndex, 1); |
|
|
this.redrawLayerConfigs(); |
|
|
}; |
|
|
this.drawNetworkVisualization(); |
|
|
}, |
|
|
|
|
|
redrawLayerConfigs() { |
|
|
const configs = [...App.state.hiddenLayerConfigs]; |
|
|
App.ui.hiddenLayersConfigContainer.innerHTML = ''; |
|
|
App.state.hiddenLayerConfigs = []; |
|
|
configs.forEach(config => this.addHiddenLayerUI(config.neurons, config.activation)); |
|
|
}, |
|
|
|
|
|
|
|
|
handleCanvasClick(event) { |
|
|
if (!App.ui.canvas) return; |
|
|
const rect = App.ui.canvas.getBoundingClientRect(); |
|
|
const x = event.clientX - rect.left; |
|
|
const y = event.clientY - rect.top; |
|
|
|
|
|
App.state.dataPoints.push({ x, y, normX: x / App.ui.canvasWidth, normY: y / App.ui.canvasHeight, label: App.state.currentClass }); |
|
|
this.drawPoints(); |
|
|
this.updateStatus(`Added Class ${App.state.currentClass} point. Total: ${App.state.dataPoints.length}.`, 'info'); |
|
|
App.ui.datasetSelect.value = "manual"; |
|
|
this.updateButtonStates(); |
|
|
}, |
|
|
|
|
|
loadSelectedDataset() { |
|
|
if (App.state.model) { App.state.model.dispose(); App.state.model = null; } |
|
|
tf.disposeVariables(); |
|
|
App.state.dataPoints = []; |
|
|
const datasetName = App.ui.datasetSelect.value; |
|
|
if (datasetName === 'manual') { |
|
|
this.drawAll(); |
|
|
this.updateButtonStates(); |
|
|
return; |
|
|
} |
|
|
const noise = parseFloat(App.ui.dataNoise.value) || 0; |
|
|
const nSamples = 150; |
|
|
|
|
|
const generators = { |
|
|
two_moons: (n, noise) => { |
|
|
const n_per_moon = Math.floor(n / 2); |
|
|
const radius = 0.3; |
|
|
for (let i = 0; i < n_per_moon; i++) { |
|
|
const angle = (i / n_per_moon) * Math.PI; |
|
|
|
|
|
this.addDataPoint( |
|
|
0.5 + radius * Math.cos(angle) - 0.125, |
|
|
0.5 + radius * Math.sin(angle) + 0.1, |
|
|
0, noise |
|
|
); |
|
|
|
|
|
this.addDataPoint( |
|
|
0.5 + radius * Math.cos(angle + Math.PI) + 0.125, |
|
|
0.5 + radius * Math.sin(angle + Math.PI) - 0.1, |
|
|
1, noise |
|
|
); |
|
|
} |
|
|
}, |
|
|
circles: (n, noise) => { for (let i=0; i<n; i++) { const r=Math.random(), a=Math.random()*2*Math.PI, l=r<0.5?0:1, rs=l===0?0.2:0.4; this.addDataPoint(0.5+rs*Math.cos(a), 0.5+rs*Math.sin(a), l, noise); } }, |
|
|
xor: (n, noise) => { const q=Math.floor(n/4), s=0.3; for (let i=0; i<q; i++) { this.addDataPoint(0.5-s, 0.5-s, 0, noise*2); this.addDataPoint(0.5+s, 0.5-s, 1, noise*2); this.addDataPoint(0.5-s, 0.5+s, 1, noise*2); this.addDataPoint(0.5+s, 0.5+s, 0, noise*2); } }, |
|
|
spiral: (n, noise) => { const pts=Math.floor(n/2); for (let i=0; i<pts; i++) { const a=i/20*Math.PI, r=0.05+i/pts*0.4; this.addDataPoint(0.5+r*Math.cos(a), 0.5+r*Math.sin(a), 0, noise*0.5); this.addDataPoint(0.5+r*Math.cos(a+Math.PI), 0.5+r*Math.sin(a+Math.PI), 1, noise*0.5); } } |
|
|
}; |
|
|
|
|
|
generators[datasetName](nSamples, noise); |
|
|
App.state.dataPoints.forEach(p => { p.x = p.normX * App.ui.canvasWidth; p.y = p.normY * App.ui.canvasHeight; }); |
|
|
this.drawAll(); |
|
|
this.updateStatus(`Loaded '${datasetName}' dataset. Noise: ${noise}.`, 'info'); |
|
|
|
|
|
App.state.trainingHistory = { loss: [], acc: [] }; |
|
|
this.drawTrainingPlot(); |
|
|
this.renderConfusionMatrix(null); |
|
|
this.updateButtonStates(); |
|
|
this.updateTrainingParamsDisplay(); |
|
|
}, |
|
|
|
|
|
addDataPoint(normX, normY, label, noise) { |
|
|
App.state.dataPoints.push({ |
|
|
x: 0, y: 0, |
|
|
normX: normX + (Math.random() - 0.5) * noise, |
|
|
normY: normY + (Math.random() - 0.5) * noise, |
|
|
label: label |
|
|
}); |
|
|
}, |
|
|
|
|
|
|
|
|
drawAll(boundaryGrid = null) { |
|
|
if (!App.ui.ctx || !App.ui.canvasWidth || !App.ui.canvasHeight) return; |
|
|
App.ui.ctx.clearRect(0, 0, App.ui.canvasWidth, App.ui.canvasHeight); |
|
|
if (boundaryGrid) { |
|
|
const { grid, resolution } = boundaryGrid; |
|
|
for (let i = 0; i < grid.length; i++) { |
|
|
for (let j = 0; j < grid[i].length; j++) { |
|
|
App.ui.ctx.fillStyle = App.config.classColors[grid[i][j]].boundary; |
|
|
App.ui.ctx.fillRect(j * resolution, i * resolution, resolution, resolution); |
|
|
} |
|
|
} |
|
|
} |
|
|
App.state.dataPoints.forEach(point => { |
|
|
App.ui.ctx.beginPath(); |
|
|
App.ui.ctx.arc(point.x, point.y, App.config.pointRadius, 0, 2 * Math.PI); |
|
|
App.ui.ctx.fillStyle = App.config.classColors[point.label].point; |
|
|
App.ui.ctx.fill(); |
|
|
App.ui.ctx.strokeStyle = 'rgba(255,255,255,0.7)'; |
|
|
App.ui.ctx.lineWidth = 1.5; |
|
|
App.ui.ctx.stroke(); |
|
|
}); |
|
|
}, |
|
|
|
|
|
drawPoints() { this.drawAll(); }, |
|
|
|
|
|
drawNetworkVisualization() { |
|
|
const container = App.ui.networkVisualization; |
|
|
container.innerHTML = ''; |
|
|
const allLayers = [ |
|
|
{ type: 'input', neurons: 2, activation: 'Input' }, |
|
|
...App.state.hiddenLayerConfigs.map((cfg, i) => ({ type: `hidden-${i % 5}`, neurons: cfg.neurons, activation: cfg.activation })), |
|
|
{ type: 'output', neurons: 1, activation: 'Sigmoid' } |
|
|
]; |
|
|
|
|
|
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); |
|
|
const rect = container.getBoundingClientRect(); |
|
|
if(rect.width === 0 || rect.height === 0) return; |
|
|
svg.setAttribute('viewBox', `0 0 ${rect.width} ${rect.height}`); |
|
|
|
|
|
const margin = { top: 25, right: 15, bottom: 20, left: 15 }; |
|
|
const width = rect.width - margin.left - margin.right; |
|
|
const height = rect.height - margin.top - margin.bottom; |
|
|
const layerSpacing = allLayers.length > 1 ? width / (allLayers.length - 1) : width; |
|
|
|
|
|
|
|
|
for (let i = 0; i < allLayers.length - 1; i++) { |
|
|
const x1 = margin.left + i * layerSpacing; |
|
|
const x2 = margin.left + (i + 1) * layerSpacing; |
|
|
const maxNeurons = 8; |
|
|
const currentNeurons = Math.min(allLayers[i].neurons, maxNeurons); |
|
|
const nextNeurons = Math.min(allLayers[i+1].neurons, maxNeurons); |
|
|
for (let j = 0; j < currentNeurons; j++) { |
|
|
const y1 = margin.top + height * ((j + 0.5) / currentNeurons); |
|
|
for (let k = 0; k < nextNeurons; k++) { |
|
|
const y2 = margin.top + height * ((k + 0.5) / nextNeurons); |
|
|
const line = document.createElementNS("http://www.w3.org/2000/svg", "line"); |
|
|
line.setAttribute('x1', x1); line.setAttribute('y1', y1); |
|
|
line.setAttribute('x2', x2); line.setAttribute('y2', y2); |
|
|
line.setAttribute('class', 'connection'); |
|
|
svg.appendChild(line); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
allLayers.forEach((layer, i) => { |
|
|
const x = margin.left + i * layerSpacing; |
|
|
const maxNeurons = 8; |
|
|
const displayNeurons = Math.min(layer.neurons, maxNeurons); |
|
|
const neuronRadius = Math.max(3, Math.min(7, height / (displayNeurons * 2.5))); |
|
|
for (let j = 0; j < displayNeurons; j++) { |
|
|
const y = margin.top + height * ((j + 0.5) / displayNeurons); |
|
|
const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle"); |
|
|
circle.setAttribute('cx', x); circle.setAttribute('cy', y); |
|
|
circle.setAttribute('r', neuronRadius); |
|
|
circle.setAttribute('class', `neuron ${layer.type}`); |
|
|
svg.appendChild(circle); |
|
|
} |
|
|
const labelText = layer.activation.charAt(0).toUpperCase() + layer.activation.slice(1); |
|
|
const textLabel = document.createElementNS("http://www.w3.org/2000/svg", "text"); |
|
|
textLabel.setAttribute('x', x); textLabel.setAttribute('y', margin.top - 8); |
|
|
textLabel.setAttribute('class', 'layer-label'); |
|
|
textLabel.textContent = labelText; |
|
|
svg.appendChild(textLabel); |
|
|
|
|
|
const countLabel = document.createElementNS("http://www.w3.org/2000/svg", "text"); |
|
|
countLabel.setAttribute('x', x); countLabel.setAttribute('y', margin.top + height + 15); |
|
|
countLabel.setAttribute('class', 'neuron-count-label'); |
|
|
countLabel.textContent = `${layer.neurons} N`; |
|
|
svg.appendChild(countLabel); |
|
|
}); |
|
|
container.appendChild(svg); |
|
|
}, |
|
|
|
|
|
drawTrainingPlot() { |
|
|
const canvas = App.ui.trainingPlotCanvas; |
|
|
const ctx = canvas.getContext('2d'); |
|
|
const dpr = window.devicePixelRatio || 1; |
|
|
const rect = canvas.getBoundingClientRect(); |
|
|
if (rect.width === 0 || rect.height === 0) return; |
|
|
canvas.width = rect.width * dpr; |
|
|
canvas.height = rect.height * dpr; |
|
|
ctx.scale(dpr, dpr); |
|
|
const { width, height } = rect; |
|
|
const padding = {top: 20, right: 15, bottom: 20, left: 30}; |
|
|
|
|
|
ctx.fillStyle = '#f8fafc'; |
|
|
ctx.fillRect(0,0,width,height); |
|
|
|
|
|
if (App.state.trainingHistory.loss.length === 0) { |
|
|
ctx.fillStyle = '#64748b'; |
|
|
ctx.textAlign = 'center'; |
|
|
ctx.font = '12px Inter'; |
|
|
ctx.fillText('Training history will be plotted here.', width / 2, height / 2); |
|
|
return; |
|
|
} |
|
|
|
|
|
ctx.beginPath(); |
|
|
ctx.strokeStyle = '#e2e8f0'; |
|
|
ctx.lineWidth = 1; |
|
|
for(let i = 0; i <= 4; i++){ |
|
|
const y = padding.top + i * (height - padding.top - padding.bottom) / 4; |
|
|
ctx.moveTo(padding.left, y); |
|
|
ctx.lineTo(width-padding.right, y); |
|
|
} |
|
|
ctx.stroke(); |
|
|
|
|
|
ctx.font = '10px Inter'; |
|
|
ctx.fillStyle = '#475569'; |
|
|
ctx.textAlign = 'right'; |
|
|
for(let i = 0; i <= 4; i++){ |
|
|
ctx.fillText((1 - i/4).toFixed(1), padding.left - 6, padding.top + 3 + i * (height - padding.top - padding.bottom) / 4); |
|
|
} |
|
|
|
|
|
const plotData = (data, color) => { |
|
|
ctx.beginPath(); ctx.strokeStyle = color; ctx.lineWidth = 2; ctx.lineJoin = 'round'; ctx.lineCap = 'round'; |
|
|
data.forEach((val, i) => { |
|
|
const x = padding.left + (i / (Math.max(1, data.length -1))) * (width - padding.left - padding.right); |
|
|
const y = (height - padding.bottom) - Math.min(Math.max(val,0.0),1.0) * (height - padding.top - padding.bottom); |
|
|
if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); |
|
|
}); |
|
|
ctx.stroke(); |
|
|
}; |
|
|
plotData(App.state.trainingHistory.loss, 'rgba(239, 68, 68, 0.9)'); |
|
|
plotData(App.state.trainingHistory.acc, 'rgba(37, 99, 235, 0.9)'); |
|
|
|
|
|
ctx.textAlign = 'left'; |
|
|
ctx.font = '600 11px Inter'; |
|
|
ctx.fillStyle = 'rgba(239, 68, 68, 1)'; ctx.fillRect(padding.left + 5, 5, 10, 3); |
|
|
ctx.fillStyle = '#374151'; ctx.fillText('Loss', padding.left + 20, 10); |
|
|
ctx.fillStyle = 'rgba(37, 99, 235, 1)'; ctx.fillRect(padding.left + 75, 5, 10, 3); |
|
|
ctx.fillStyle = '#374151'; ctx.fillText('Accuracy', padding.left + 90, 10); |
|
|
}, |
|
|
|
|
|
updateTrainingParamsDisplay() { |
|
|
const container = App.ui.trainingParamsDisplay; |
|
|
if (!App.state.model) { |
|
|
container.innerHTML = `<div class="text-slate-500">Train a model to see parameters.</div>`; |
|
|
return; |
|
|
} |
|
|
const lr = parseFloat(App.ui.learningRate.value); |
|
|
const regType = App.ui.regularizationTypeSelect.value; |
|
|
const regRate = parseFloat(App.ui.regularizationRateInput.value) || 0; |
|
|
let regDesc = regType !== 'none' ? `${regType.toUpperCase()}(λ=${regRate})` : 'None'; |
|
|
let hiddenDesc = App.state.hiddenLayerConfigs.map(l => l.neurons).join(' → '); |
|
|
|
|
|
container.innerHTML = ` |
|
|
<div class="flex flex-wrap gap-x-4 gap-y-1"> |
|
|
<span><span class="font-semibold text-slate-500">Opt:</span> <span class="font-medium text-slate-800">${App.ui.optimizerSelect.value.toUpperCase()}</span></span> |
|
|
<span><span class="font-semibold text-slate-500">LR:</span> <span class="font-medium text-slate-800">${lr.toExponential(1)}</span></span> |
|
|
<span><span class="font-semibold text-slate-500">Batch:</span> <span class="font-medium text-slate-800">${parseInt(App.ui.batchSize.value) === 0 ? 'Full' : App.ui.batchSize.value}</span></span> |
|
|
<span><span class="font-semibold text-slate-500">Reg:</span> <span class="font-medium text-slate-800">${regDesc}</span></span> |
|
|
</div> |
|
|
<div><span class="font-semibold text-slate-500">Layers:</span> <span class="font-medium text-slate-800">2 → ${hiddenDesc || '...'} → 1</span></div> |
|
|
`; |
|
|
}, |
|
|
|
|
|
renderConfusionMatrix(matrix) { |
|
|
const container = App.ui.confusionMatrixContainer; |
|
|
if (!matrix) { |
|
|
container.innerHTML = `<div class="flex items-center justify-center h-full text-sm text-center text-slate-400 bg-slate-50 rounded-lg p-2 border border-slate-200">Confusion matrix appears here after training.</div>`; |
|
|
return; |
|
|
} |
|
|
container.innerHTML = ` |
|
|
<div class="h-full flex flex-col"> |
|
|
<h4 class="text-sm font-semibold text-center text-slate-600 mb-1.5">Confusion Matrix</h4> |
|
|
<div class="grid grid-cols-2 grid-rows-2 gap-1.5 flex-grow"> |
|
|
<div class="cm-cell bg-blue-100 text-blue-800" title="True Negative"><span class="cm-value">${matrix.tn}</span><span class="cm-label">TN</span></div> |
|
|
<div class="cm-cell bg-red-100 text-red-800" title="False Positive"><span class="cm-value">${matrix.fp}</span><span class="cm-label">FP</span></div> |
|
|
<div class="cm-cell bg-red-100 text-red-800" title="False Negative"><span class="cm-value">${matrix.fn}</span><span class="cm-label">FN</span></div> |
|
|
<div class="cm-cell bg-green-100 text-green-800" title="True Positive"><span class="cm-value">${matrix.tp}</span><span class="cm-label">TP</span></div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
}, |
|
|
|
|
|
|
|
|
getSafeNumericInput(element, defaultValue, isInteger = true) { |
|
|
let value = isInteger ? parseInt(element.value, 10) : parseFloat(element.value); |
|
|
if (isNaN(value)) { |
|
|
value = defaultValue; |
|
|
element.value = defaultValue; |
|
|
} |
|
|
return value; |
|
|
}, |
|
|
|
|
|
buildModel() { |
|
|
if (App.state.model) { App.state.model.dispose(); App.state.model = null; } |
|
|
tf.disposeVariables(); |
|
|
|
|
|
const learningRate = this.getSafeNumericInput(App.ui.learningRate, 0.01, false); |
|
|
const regType = App.ui.regularizationTypeSelect.value; |
|
|
const regRate = this.getSafeNumericInput(App.ui.regularizationRateInput, 0, false); |
|
|
|
|
|
const kernelRegularizer = (regType !== 'none' && regRate > 0) |
|
|
? tf.regularizers[regType]({[regType]: regRate}) |
|
|
: null; |
|
|
|
|
|
App.state.model = tf.sequential(); |
|
|
const inputShape = [2]; |
|
|
|
|
|
App.state.hiddenLayerConfigs.forEach((layerConfig, index) => { |
|
|
App.state.model.add(tf.layers.dense({ |
|
|
units: layerConfig.neurons, |
|
|
inputShape: index === 0 ? inputShape : undefined, |
|
|
activation: layerConfig.activation, |
|
|
kernelRegularizer |
|
|
})); |
|
|
}); |
|
|
|
|
|
App.state.model.add(tf.layers.dense({ |
|
|
units: 1, |
|
|
activation: 'sigmoid', |
|
|
inputShape: App.state.hiddenLayerConfigs.length === 0 ? inputShape : undefined, |
|
|
})); |
|
|
|
|
|
const optimizerInstance = tf.train[App.ui.optimizerSelect.value](learningRate); |
|
|
App.state.model.compile({ optimizer: optimizerInstance, loss: 'binaryCrossentropy', metrics: ['accuracy'] }); |
|
|
App.state.model.stopTraining = false; |
|
|
}, |
|
|
|
|
|
async trainAndVisualize() { |
|
|
if (App.state.isTraining) return; |
|
|
const uniqueLabels = new Set(App.state.dataPoints.map(p => p.label)); |
|
|
if (App.state.dataPoints.length < 4 || uniqueLabels.size < 2) { |
|
|
this.updateStatus('Requires at least 4 points and data from both classes.', 'error'); |
|
|
return; |
|
|
} |
|
|
|
|
|
this.setTrainingState(true); |
|
|
this.updateStatus('Starting training...', 'loading'); |
|
|
this.renderConfusionMatrix(null); |
|
|
await tf.nextFrame(); |
|
|
|
|
|
this.buildModel(); |
|
|
this.updateTrainingParamsDisplay(); |
|
|
|
|
|
const epochs = this.getSafeNumericInput(App.ui.epochs, 150, true); |
|
|
let batchSize = this.getSafeNumericInput(App.ui.batchSize, 16, true); |
|
|
if (batchSize === 0) batchSize = App.state.dataPoints.length; |
|
|
|
|
|
const [xs, ys] = tf.tidy(() => { |
|
|
const normalized = App.state.dataPoints.map(p => [p.normX, p.normY]); |
|
|
const labels = App.state.dataPoints.map(p => p.label); |
|
|
return [tf.tensor2d(normalized), tf.tensor2d(labels, [labels.length, 1])]; |
|
|
}); |
|
|
|
|
|
App.state.trainingHistory = { loss: [], acc: [] }; |
|
|
this.drawTrainingPlot(); |
|
|
|
|
|
try { |
|
|
await App.state.model.fit(xs, ys, { |
|
|
epochs, batchSize, |
|
|
callbacks: { |
|
|
onEpochEnd: async (epoch, logs) => { |
|
|
if (App.state.model.stopTraining) { App.state.model.stop(); return; } |
|
|
this.updateStatus(`Epoch ${epoch + 1}/${epochs} - Loss: ${logs.loss.toFixed(4)}, Acc: ${logs.acc.toFixed(4)}`, 'loading'); |
|
|
App.state.trainingHistory.loss.push(logs.loss); |
|
|
App.state.trainingHistory.acc.push(logs.acc); |
|
|
this.drawTrainingPlot(); |
|
|
|
|
|
if ((epoch + 1) % Math.max(1, Math.floor(epochs / 25)) === 0) { |
|
|
const boundaryGrid = await this.generateBoundaryGrid(); |
|
|
this.drawAll(boundaryGrid); |
|
|
} |
|
|
await tf.nextFrame(); |
|
|
}, |
|
|
onTrainEnd: async () => { |
|
|
const finalAcc = App.state.trainingHistory.acc.slice(-1)[0] || 0; |
|
|
if (!App.state.model.stopTraining) { |
|
|
this.updateStatus(`Training complete! Final Accuracy: <b>${(finalAcc*100).toFixed(2)}%</b>`, 'success'); |
|
|
} |
|
|
const boundaryGrid = await this.generateBoundaryGrid(); |
|
|
this.drawAll(boundaryGrid); |
|
|
|
|
|
const confusionMatrix = await this.calculateConfusionMatrix(xs, ys); |
|
|
this.renderConfusionMatrix(confusionMatrix); |
|
|
this.setTrainingState(false); |
|
|
} |
|
|
} |
|
|
}); |
|
|
} catch (error) { |
|
|
console.error("Training error:", error); |
|
|
this.updateStatus(`Training error: ${error.message}`, 'error'); |
|
|
this.setTrainingState(false); |
|
|
} finally { |
|
|
xs.dispose(); |
|
|
ys.dispose(); |
|
|
} |
|
|
}, |
|
|
|
|
|
async calculateConfusionMatrix(xs, ys) { |
|
|
if (!App.state.model) return null; |
|
|
return tf.tidy(() => { |
|
|
const predictions = App.state.model.predict(xs).round(); |
|
|
const tp = ys.mul(predictions).sum().dataSync()[0]; |
|
|
const tn = ys.sub(1).mul(-1).mul(predictions.sub(1).mul(-1)).sum().dataSync()[0]; |
|
|
const fp = predictions.sub(ys).relu().sum().dataSync()[0]; |
|
|
const fn = ys.sub(predictions).relu().sum().dataSync()[0]; |
|
|
return { tp, tn, fp, fn }; |
|
|
}); |
|
|
}, |
|
|
|
|
|
async generateBoundaryGrid() { |
|
|
if (!App.state.model || !App.ui.canvasWidth || !App.ui.canvasHeight) return null; |
|
|
const resolution = Math.max(5, Math.floor(App.ui.canvasWidth / 80)); |
|
|
const numCols = Math.floor(App.ui.canvasWidth / resolution); |
|
|
const numRows = Math.floor(App.ui.canvasHeight / resolution); |
|
|
if (numCols <= 0 || numRows <= 0) return null; |
|
|
|
|
|
const boundaryData = tf.tidy(() => { |
|
|
const gridPoints = []; |
|
|
for (let i = 0; i < numRows; i++) { |
|
|
for (let j = 0; j < numCols; j++) { |
|
|
gridPoints.push([(j * resolution) / App.ui.canvasWidth, (i * resolution) / App.ui.canvasHeight]); |
|
|
} |
|
|
} |
|
|
const predsTensor = App.state.model.predict(tf.tensor2d(gridPoints)); |
|
|
return predsTensor.dataSync(); |
|
|
}); |
|
|
|
|
|
const grid = []; let k = 0; |
|
|
for (let i = 0; i < numRows; i++) { |
|
|
const row = []; |
|
|
for (let j = 0; j < numCols; j++) row.push(boundaryData[k++] > 0.5 ? 1 : 0); |
|
|
grid.push(row); |
|
|
} |
|
|
return { grid, resolution }; |
|
|
}, |
|
|
|
|
|
stopTraining() { |
|
|
if (App.state.model) { |
|
|
App.state.model.stopTraining = true; |
|
|
this.updateStatus("Training stopped by user.", 'warning'); |
|
|
} |
|
|
}, |
|
|
|
|
|
resetModelWeights() { |
|
|
if (App.state.isTraining) return; |
|
|
this.updateStatus("Model weights reset. Ready to train again.", 'info'); |
|
|
this.buildModel(); |
|
|
this.drawAll(); |
|
|
App.state.trainingHistory = { loss: [], acc: [] }; |
|
|
this.drawTrainingPlot(); |
|
|
this.renderConfusionMatrix(null); |
|
|
this.updateButtonStates(); |
|
|
}, |
|
|
|
|
|
clearAllDataAndReseed() { |
|
|
if (App.state.isTraining) return; |
|
|
App.state.dataPoints = []; |
|
|
if(App.state.model) { App.state.model.dispose(); App.state.model = null; } |
|
|
tf.disposeVariables(); |
|
|
App.state.hiddenLayerConfigs = []; |
|
|
App.ui.hiddenLayersConfigContainer.innerHTML = ''; |
|
|
|
|
|
App.initializeApplicationState(); |
|
|
this.updateStatus('Cleared all data and reset configuration.', 'info'); |
|
|
} |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => App.init()); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
