File size: 2,761 Bytes
b012e8c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | /**
* main.js
* Minimalistic Three.js scene with JSON-based initialization
*/
// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
(async () => {
window.sceneManager = new SceneManager();
const figureOptions = {
layerSpacing: 10,
neuronSpacing: 2,
neuronRadius: 0.5,
inputColor: '#ff6b6b',
hiddenColor: '#ffd93d',
outputColor: '#4ecdc4',
weightThreshold: 0.1,
lineWidth: 0.1,
opacity: 0.1
};
// preprocess MNIST data
const { trainingData, testData } = await preprocessMNISTData();
console.log('✓ MNIST data preprocessed');
//model:
//create model network:
const network = new Network([784, 16, 16, 10]); // example architecture
// Train the network
//network.SGD(trainingData, 1, 10, 0.5, testData);
//testing:
// const network = new Network([784, 1, 1, 1]);
// Visualizer instance (non-static class)
const visualizer = new NetworkToDisplay(network, sceneManager, figureOptions);
// Build spheres and initial connections directly in the scene
visualizer.initialGeneration();
const visualizer_function = () => {
visualizer.updateConnections();
console.log('✓ Visualization updated');
};
// Initialize epoch counter
let epochCount = 0;
//attach epoch training to button
const trainEpochButton = document.getElementById('epochButton');
if (trainEpochButton) {
trainEpochButton.addEventListener('click', () => {
network.SGD_single_epoch(trainingData, 100, 0.5, testData, visualizer_function);
// Increment and update epoch counter display
epochCount++;
const epochCounterDiv = document.getElementById('epochCounter');
if (epochCounterDiv) {
epochCounterDiv.textContent = `Epoch: ${epochCount}`;
}
});
}
})();
// sceneManager.loadFromJSON({
// spheres: [
// { name: 'A', radius: 1.5, color: '#ff0000', position: { x: -5, y: 0, z: 0 } },
// { name: 'B', radius: 1.5, color: '#00ff00', position: { x: 5, y: 0, z: 0 } }
// ],
// connections: [
// { id: 'AB', from: 'A', to: 'B', color: '#ffffff', lineWidth: 2 }
// ]
// });
// Example: Uncomment to add initial demo spheres
// sceneManager.addMultipleSpheres(5);
// sceneManager.connectSphereChain(['Sphere_0', 'Sphere_1', 'Sphere_2', 'Sphere_3', 'Sphere_4']);
});
|