Add walkthrough mode functionality

index.html

@@ -2388,6 +2388,329 @@
         // Developer mode event listeners
         devArchitecture.addEventListener('input', updateParameterCount);
 
+        // Walkthrough Mode functionality
+        let walkthroughActive = false;
+        let walkthroughStep = 0;
+        let walkthroughTutorial = null;
+        let walkthroughTrainingSpeed = 500; // Slower training speed for walkthrough
+
+        const walkthroughTutorials = {
+            basics: {
+                title: 'Neural Network Basics',
+                steps: [
+                    {
+                        title: 'Welcome to Neural Networks!',
+                        content: 'Neural networks are inspired by the human brain. They consist of layers of interconnected neurons that process information. Let\'s explore how they work!',
+                        element: null,
+                        position: 'center'
+                    },
+                    {
+                        title: 'Input Layer',
+                        content: 'This is the input layer (left side). It receives the raw data - like numbers, images, or text. Each circle represents one input neuron that holds a piece of information.',
+                        element: '#networkCanvas',
+                        position: 'right',
+                        highlight: {x: 0, y: 0, width: 150, height: 300}
+                    },
+                    {
+                        title: 'Hidden Layers',
+                        content: 'These middle layers are where the "magic" happens! They transform the input data through mathematical operations, finding patterns and relationships.',
+                        element: '#networkCanvas',
+                        position: 'top',
+                        highlight: {x: 150, y: 0, width: 100, height: 300}
+                    },
+                    {
+                        title: 'Output Layer',
+                        content: 'The final layer gives us the result - a prediction, classification, or decision based on what the network learned from the input.',
+                        element: '#networkCanvas',
+                        position: 'left',
+                        highlight: {x: 250, y: 0, width: 150, height: 300}
+                    },
+                    {
+                        title: 'Connections (Weights)',
+                        content: 'The lines between neurons are called weights. They determine how strongly one neuron influences another. Green lines mean positive influence, red means negative.',
+                        element: '#networkCanvas',
+                        position: 'bottom'
+                    }
+                ]
+            },
+            training: {
+                title: 'How Training Works',
+                steps: [
+                    {
+                        title: 'The Training Process',
+                        content: 'Training is how neural networks learn! We show the network examples with known answers, and it adjusts its connections to get better at predicting the right answers.',
+                        element: null,
+                        position: 'center'
+                    },
+                    {
+                        title: 'Training Controls',
+                        content: 'Use these buttons to start, pause, or reset training. In walkthrough mode, training runs slower so you can see what\'s happening.',
+                        element: '.control-panel',
+                        position: 'bottom'
+                    },
+                    {
+                        title: 'Epochs Counter',
+                        content: 'An epoch is one complete pass through all training examples. More epochs usually mean better learning, but too many can cause overfitting.',
+                        element: '#epochValue',
+                        position: 'bottom'
+                    },
+                    {
+                        title: 'Loss Value',
+                        content: 'Loss measures how wrong the network\'s predictions are. Lower is better! Watch this number decrease as the network learns.',
+                        element: '#lossValue',
+                        position: 'bottom'
+                    },
+                    {
+                        title: 'Accuracy',
+                        content: 'This shows the percentage of correct predictions. 100% means the network gets every example right!',
+                        element: '#accuracyValue',
+                        position: 'bottom'
+                    }
+                ]
+            },
+            visualization: {
+                title: 'Understanding the Visualizations',
+                steps: [
+                    {
+                        title: 'Reading the Network Diagram',
+                        content: 'The network diagram shows neurons as circles. Brighter neurons are more "activated" (have higher values). Watch them light up as data flows through!',
+                        element: '#networkCanvas',
+                        position: 'right'
+                    },
+                    {
+                        title: 'Loss Chart',
+                        content: 'This chart shows the training progress over time. The line should go down as the network improves. A flat line means learning has stopped.',
+                        element: '#chartContainer',
+                        position: 'left'
+                    },
+                    {
+                        title: 'Task Output',
+                        content: 'These cards show each training example. Green means correct prediction, red means wrong. The network tries to make all cards green!',
+                        element: '#taskOutput',
+                        position: 'top'
+                    },
+                    {
+                        title: 'Current Sample',
+                        content: 'The blue highlighted card shows which example the network is currently learning from. It cycles through all examples.',
+                        element: '.output-card.current',
+                        position: 'top'
+                    }
+                ]
+            },
+            logic: {
+                title: 'Logic Gates Tutorial',
+                steps: [
+                    {
+                        title: 'Logic Gates with Neural Networks',
+                        content: 'Let\'s see how neural networks can learn logic gates - the building blocks of computers! We\'ll start with the simple AND gate.',
+                        element: null,
+                        position: 'center',
+                        action: () => selectTask('and')
+                    },
+                    {
+                        title: 'AND Gate',
+                        content: 'The AND gate outputs 1 only when both inputs are 1. This is "linearly separable" - a simple line can separate the 0s from 1s.',
+                        element: '#taskOutput',
+                        position: 'top'
+                    },
+                    {
+                        title: 'Start Training',
+                        content: 'Click the Start Training button and watch the network learn! Notice how quickly it masters this simple pattern.',
+                        element: '#trainBtn',
+                        position: 'bottom',
+                        action: () => {
+                            if (!isTraining) {
+                                document.getElementById('trainBtn').click();
+                            }
+                        }
+                    },
+                    {
+                        title: 'XOR - The Challenge',
+                        content: 'Now let\'s try XOR - it outputs 1 when inputs are different. This is much harder because it\'s not linearly separable!',
+                        element: null,
+                        position: 'center',
+                        action: () => {
+                            if (isTraining) {
+                                document.getElementById('trainBtn').click();
+                            }
+                            goBack();
+                            selectTask('xor');
+                        }
+                    },
+                    {
+                        title: 'Deeper Network Needed',
+                        content: 'Notice the XOR network has more layers (2→12→8→1). The extra layers let it learn the complex pattern that XOR requires.',
+                        element: '#networkCanvas',
+                        position: 'right'
+                    }
+                ]
+            }
+        };
+
+        function startWalkthrough(tutorialId) {
+            walkthroughTutorial = walkthroughTutorials[tutorialId];
+            walkthroughStep = 0;
+            walkthroughActive = true;
+
+            // Show indicator
+            document.getElementById('walkthroughIndicator').style.display = 'block';
+
+            // Navigate to appropriate section
+            if (tutorialId === 'logic') {
+                document.getElementById('walkthroughMode').style.display = 'none';
+                taskSelection.style.display = 'block';
+                currentCategory = 'fundamentals';
+                showCategory('fundamentals');
+            }
+
+            showWalkthroughStep();
+        }
+
+        function showWalkthroughStep() {
+            const step = walkthroughTutorial.steps[walkthroughStep];
+            const overlay = document.getElementById('walkthroughOverlay');
+            const highlight = document.getElementById('walkthroughHighlight');
+            const popup = document.getElementById('walkthroughPopup');
+            const progress = document.getElementById('walkthroughProgress');
+
+            // Update progress
+            document.getElementById('walkthroughStep').textContent = walkthroughStep + 1;
+            document.getElementById('walkthroughTotal').textContent = walkthroughTutorial.steps.length;
+
+            // Show overlay
+            overlay.style.display = 'block';
+            progress.style.display = 'block';
+
+            // Update popup content
+            document.getElementById('walkthroughTitle').textContent = step.title;
+            document.getElementById('walkthroughContent').textContent = step.content;
+
+            // Position popup and highlight
+            if (step.element) {
+                const element = document.querySelector(step.element);
+                if (element) {
+                    const rect = element.getBoundingClientRect();
+                    
+                    // Highlight element
+                    if (step.highlight) {
+                        const canvasRect = element.getBoundingClientRect();
+                        highlight.style.left = (canvasRect.left + step.highlight.x) + 'px';
+                        highlight.style.top = (canvasRect.top + step.highlight.y) + 'px';
+                        highlight.style.width = step.highlight.width + 'px';
+                        highlight.style.height = step.highlight.height + 'px';
+                    } else {
+                        highlight.style.left = rect.left - 5 + 'px';
+                        highlight.style.top = rect.top - 5 + 'px';
+                        highlight.style.width = rect.width + 10 + 'px';
+                        highlight.style.height = rect.height + 10 + 'px';
+                    }
+                    highlight.style.display = 'block';
+
+                    // Position popup
+                    positionPopup(popup, rect, step.position);
+                }
+            } else {
+                // Center popup
+                highlight.style.display = 'none';
+                popup.style.left = '50%';
+                popup.style.top = '50%';
+                popup.style.transform = 'translate(-50%, -50%)';
+                popup.className = 'walkthrough-popup';
+            }
+
+            popup.style.display = 'block';
+
+            // Execute action if any
+            if (step.action) {
+                setTimeout(step.action, 500);
+            }
+
+            // Update buttons
+            document.getElementById('walkthroughPrev').style.display = 
+                walkthroughStep > 0 ? 'block' : 'none';
+            document.getElementById('walkthroughNext').textContent = 
+                walkthroughStep < walkthroughTutorial.steps.length - 1 ? 'Next' : 'Finish';
+        }
+
+        function positionPopup(popup, targetRect, position) {
+            const popupRect = popup.getBoundingClientRect();
+            let left, top;
+            
+            switch (position) {
+                case 'top':
+                    left = targetRect.left + targetRect.width / 2 - popupRect.width / 2;
+                    top = targetRect.top - popupRect.height - 20;
+                    popup.className = 'walkthrough-popup bottom';
+                    break;
+                case 'bottom':
+                    left = targetRect.left + targetRect.width / 2 - popupRect.width / 2;
+                    top = targetRect.bottom + 20;
+                    popup.className = 'walkthrough-popup top';
+                    break;
+                case 'left':
+                    left = targetRect.left - popupRect.width - 20;
+                    top = targetRect.top + targetRect.height / 2 - popupRect.height / 2;
+                    popup.className = 'walkthrough-popup right';
+                    break;
+                case 'right':
+                    left = targetRect.right + 20;
+                    top = targetRect.top + targetRect.height / 2 - popupRect.height / 2;
+                    popup.className = 'walkthrough-popup left';
+                    break;
+                default:
+                    return;
+            }
+
+            // Keep popup on screen
+            left = Math.max(10, Math.min(left, window.innerWidth - popupRect.width - 10));
+            top = Math.max(10, Math.min(top, window.innerHeight - popupRect.height - 10));
+
+            popup.style.left = left + 'px';
+            popup.style.top = top + 'px';
+            popup.style.transform = 'none';
+        }
+
+        function nextWalkthroughStep() {
+            if (walkthroughStep < walkthroughTutorial.steps.length - 1) {
+                walkthroughStep++;
+                showWalkthroughStep();
+            } else {
+                exitWalkthrough();
+            }
+        }
+
+        function prevWalkthroughStep() {
+            if (walkthroughStep > 0) {
+                walkthroughStep--;
+                showWalkthroughStep();
+            }
+        }
+
+        function exitWalkthrough() {
+            walkthroughActive = false;
+            document.getElementById('walkthroughOverlay').style.display = 'none';
+            document.getElementById('walkthroughHighlight').style.display = 'none';
+            document.getElementById('walkthroughPopup').style.display = 'none';
+            document.getElementById('walkthroughProgress').style.display = 'none';
+            document.getElementById('walkthroughIndicator').style.display = 'none';
+        }
+
+        // Walkthrough event listeners
+        document.getElementById('walkthroughNext').addEventListener('click', nextWalkthroughStep);
+        document.getElementById('walkthroughPrev').addEventListener('click', prevWalkthroughStep);
+        document.getElementById('walkthroughSkip').addEventListener('click', exitWalkthrough);
+
+        // Override training speed when in walkthrough mode
+        const originalTrainStep = trainStep;
+        trainStep = function() {
+            originalTrainStep();
+            
+            if (walkthroughActive && isTraining) {
+                clearInterval(trainInterval);
+                trainInterval = setInterval(trainStep, walkthroughTrainingSpeed);
+            }
+        };
+
         // Initialize
         startAnimation();
     </script>