Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ // Network visualization
+ const canvas = document.getElementById('network-canvas');
+ const ctx = canvas.getContext('2d');
+ let animationId;
+ let isAnimating = false;
+
+ function resizeCanvas() {
+ canvas.width = canvas.offsetWidth;
+ canvas.height = canvas.offsetHeight;
+ }
+
+ window.addEventListener('resize', resizeCanvas);
+ resizeCanvas();
+
+ // Network node class
+ class Node {
+ constructor(x, y, radius, color) {
+ this.x = x;
+ this.y = y;
+ this.radius = radius;
+ this.color = color;
+ this.connections = [];
+ }
+
+ draw() {
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+ ctx.fillStyle = this.color;
+ ctx.fill();
+ ctx.closePath();
+ }
+ }
+
+ // Initialize network
+ let nodes = [];
+
+ function initializeNetwork() {
+ nodes = [];
+ const inputDim = parseInt(document.getElementById('input-dim').value);
+ const hiddenUnits = parseInt(document.getElementById('hidden-units').value);
+ const attentionHeads = parseInt(document.getElementById('attention-heads').value);
+
+ // Input layer
+ for (let i = 0; i < inputDim; i++) {
+ const x = canvas.width * 0.2;
+ const y = canvas.height * (i + 1) / (inputDim + 1);
+ nodes.push(new Node(x, y, 10, '#4dabf7'));
+ }
+
+ // Hidden layer
+ for (let i = 0; i < hiddenUnits; i++) {
+ const x = canvas.width * 0.5;
+ const y = canvas.height * (i + 1) / (hiddenUnits + 1);
+ nodes.push(new Node(x, y, 8, '#2a6bc2'));
+ }
+
+ // Output layer
+ for (let i = 0; i < attentionHeads; i++) {
+ const x = canvas.width * 0.8;
+ const y = canvas.height * (i + 1) / (attentionHeads + 1);
+ nodes.push(new Node(x, y, 10, '#1d4580'));
+ }
+ }
+
+ function drawConnections() {
+ ctx.strokeStyle = 'rgba(42, 107, 194, 0.2)';
+ ctx.lineWidth = 1;
+
+ for (let i = 0; i < nodes.length; i++) {
+ for (let j = i + 1; j < nodes.length; j++) {
+ if (Math.abs(nodes[i].x - nodes[j].x) > canvas.width * 0.1) {
+ ctx.beginPath();
+ ctx.moveTo(nodes[i].x, nodes[i].y);
+ ctx.lineTo(nodes[j].x, nodes[j].y);
+ ctx.stroke();
+ }
+ }
+ }
+ }
+
+ function animate() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ drawConnections();
+ nodes.forEach(node => node.draw());
+
+ if (isAnimating) {
+ nodes.forEach(node => {
+ node.y += Math.sin(Date.now() / 1000) * 0.5;
+ });
+ animationId = requestAnimationFrame(animate);
+ }
+ }
+
+ // Event listeners
+ document.getElementById('apply-config').addEventListener('click', () => {
+ initializeNetwork();
+ animate();
+ });
+
+ document.getElementById('animate-btn').addEventListener('click', () => {
+ isAnimating = !isAnimating;
+ if (isAnimating) {
+ animate();
+ document.getElementById('animate-btn').textContent = 'Stop Animation';
+ } else {
+ cancelAnimationFrame(animationId);
+ document.getElementById('animate-btn').textContent = 'Animate Flow';
+ }
+ });
+
+ document.getElementById('reset-btn').addEventListener('click', () => {
+ isAnimating = false;
+ cancelAnimationFrame(animationId);
+ document.getElementById('animate-btn').textContent = 'Animate Flow';
+ initializeNetwork();
+ animate();
+ });
+
+ // Initialize on load
+ initializeNetwork();
+ animate();
+ });
