Update index.html

index.html

@@ -630,30 +630,31 @@
             left: 0;
             width: 100%;
             height: 100%;
-            background: rgba(0, 0, 0, 0.8);
+            background: rgba(0, 0, 0, 0.3);
             z-index: 9999;
             display: none;
-            backdrop-filter: blur(4px);
+            backdrop-filter: blur(2px);
         }
 
         .walkthrough-highlight {
             position: absolute;
-            border: 3px solid #10b981;
+            border: 4px solid #10b981;
             border-radius: 0.5rem;
-            box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2), 0 0 30px rgba(16, 185, 129, 0.4);
+            box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.3), 0 0 40px rgba(16, 185, 129, 0.6);
             pointer-events: none;
             animation: pulse 2s infinite;
             z-index: 10000;
+            background: rgba(16, 185, 129, 0.1);
         }
 
         .walkthrough-popup {
             position: absolute;
             background: #1f2937;
-            border: 2px solid #10b981;
+            border: 3px solid #10b981;
             border-radius: 1rem;
             padding: 1.5rem;
-            max-width: 350px;
-            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
+            max-width: 400px;
+            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8), 0 0 0 2px rgba(16, 185, 129, 0.2);
             z-index: 10001;
             color: white;
         }
@@ -773,7 +774,7 @@
         }
 
         .walkthrough-task-menu {
-            display: none;
+            display: block;
             padding: 2rem;
             max-width: 800px;
             margin: 0 auto;
@@ -821,6 +822,119 @@
             display: none;
         }
 
+        /* Loss Landscape Visualization Styles */
+        .loss-landscape-container {
+            background: #1f2937;
+            border: 1px solid #374151;
+            border-radius: 0.5rem;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+            padding: 1.5rem;
+            margin-bottom: 1.5rem;
+        }
+
+        .loss-landscape-title {
+            font-size: 1.125rem;
+            font-weight: 600;
+            margin-bottom: 1rem;
+            color: white;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .loss-landscape-canvas {
+            width: 100%;
+            height: 400px;
+            border: 1px solid #4b5563;
+            border-radius: 0.5rem;
+            background: #111827;
+            cursor: grab;
+        }
+
+        .loss-landscape-canvas:active {
+            cursor: grabbing;
+        }
+
+        .landscape-controls {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1rem;
+            margin-top: 1rem;
+            align-items: center;
+        }
+
+        .landscape-control-group {
+            display: flex;
+            flex-direction: column;
+            gap: 0.25rem;
+        }
+
+        .landscape-control-label {
+            font-size: 0.875rem;
+            color: #9ca3af;
+            font-weight: 500;
+        }
+
+        .landscape-slider {
+            width: 100px;
+            height: 6px;
+            border-radius: 3px;
+            background: #4b5563;
+            outline: none;
+            cursor: pointer;
+        }
+
+        .landscape-toggle {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-size: 0.875rem;
+            color: #d1d5db;
+        }
+
+        .landscape-checkbox {
+            width: 16px;
+            height: 16px;
+            border-radius: 3px;
+            border: 2px solid #4b5563;
+            background: #111827;
+            cursor: pointer;
+        }
+
+        .landscape-checkbox:checked {
+            background: #06b6d4;
+            border-color: #06b6d4;
+        }
+
+        .gradient-legend {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            margin-top: 0.5rem;
+            font-size: 0.75rem;
+            color: #9ca3af;
+        }
+
+        .gradient-arrow {
+            display: inline-block;
+            width: 20px;
+            height: 3px;
+            background: linear-gradient(90deg, #ef4444, #f59e0b);
+            position: relative;
+        }
+
+        .gradient-arrow::after {
+            content: '';
+            position: absolute;
+            right: -3px;
+            top: -2px;
+            width: 0;
+            height: 0;
+            border-left: 5px solid #f59e0b;
+            border-top: 4px solid transparent;
+            border-bottom: 4px solid transparent;
+        }
+
         /* Mobile-friendly adjustments */
         @media (max-width: 640px) {
             .walkthrough-popup {
@@ -846,6 +960,15 @@
                 font-size: 0.8125rem;
                 padding: 0.4rem 0.8rem;
             }
+
+            .loss-landscape-canvas {
+                height: 300px;
+            }
+
+            .landscape-controls {
+                flex-direction: column;
+                align-items: flex-start;
+            }
         }
     </style>
 </head>
@@ -956,25 +1079,48 @@
                 <p class="task-subtitle">Learn step-by-step how neural networks work</p>
             </div>
 
+            <div class="walkthrough-intro">
+                <div style="text-align: center; margin-bottom: 2rem; padding: 1.5rem; background: linear-gradient(135deg, #10b981, #059669); border-radius: 1rem; color: white;">
+                    <h3 style="margin: 0 0 0.5rem 0; font-size: 1.5rem;">🎓 Interactive AI Learning Journey</h3>
+                    <p style="margin: 0; opacity: 0.9;">Choose a tutorial below to start your guided exploration of neural networks. Each tutorial includes interactive demonstrations and step-by-step explanations.</p>
+                </div>
+            </div>
+
             <div class="walkthrough-task-menu">
                 <div class="walkthrough-task-card" onclick="startWalkthrough('basics')">
                     <h3 class="walkthrough-task-title">🧠 Neural Network Basics</h3>
                     <p class="walkthrough-task-description">Learn what neurons, layers, and connections are. Understand how information flows through the network.</p>
+                    <div style="font-size: 0.75rem; color: #9ca3af; margin-top: 0.5rem;">⏱️ 5 steps • 🎯 Beginner</div>
                 </div>
                 
                 <div class="walkthrough-task-card" onclick="startWalkthrough('training')">
                     <h3 class="walkthrough-task-title">🎯 How Training Works</h3>
                     <p class="walkthrough-task-description">Discover how neural networks learn from data through forward propagation, loss calculation, and backpropagation.</p>
+                    <div style="font-size: 0.75rem; color: #9ca3af; margin-top: 0.5rem;">⏱️ 5 steps • 🎯 Beginner</div>
                 </div>
                 
                 <div class="walkthrough-task-card" onclick="startWalkthrough('visualization')">
                     <h3 class="walkthrough-task-title">📊 Understanding the Visualizations</h3>
                     <p class="walkthrough-task-description">Learn to read the network diagram, loss chart, and output predictions to understand what's happening.</p>
+                    <div style="font-size: 0.75rem; color: #9ca3af; margin-top: 0.5rem;">⏱️ 4 steps • 🎯 Beginner</div>
                 </div>
                 
                 <div class="walkthrough-task-card" onclick="startWalkthrough('logic')">
                     <h3 class="walkthrough-task-title">🔗 Logic Gates Tutorial</h3>
                     <p class="walkthrough-task-description">See how neural networks can learn simple AND, OR, and complex XOR logic gates step by step.</p>
+                    <div style="font-size: 0.75rem; color: #9ca3af; margin-top: 0.5rem;">⏱️ 5 steps • 📈 Intermediate</div>
+                </div>
+                
+                <div class="walkthrough-task-card" onclick="startWalkthrough('landscape')">
+                    <h3 class="walkthrough-task-title">🗻 Loss Landscape & Gradients</h3>
+                    <p class="walkthrough-task-description">Explore the 3D loss landscape, understand gradients, and see how training navigates through parameter space.</p>
+                    <div style="font-size: 0.75rem; color: #9ca3af; margin-top: 0.5rem;">⏱️ 6 steps • 🔥 Advanced</div>
+                </div>
+                
+                <div class="walkthrough-task-card" onclick="startWalkthrough('advanced')">
+                    <h3 class="walkthrough-task-title">⚡ Advanced Visualizations</h3>
+                    <p class="walkthrough-task-description">Master gradient flows, weight changes, and understand what makes neural networks tick under the hood.</p>
+                    <div style="font-size: 0.75rem; color: #9ca3af; margin-top: 0.5rem;">⏱️ 7 steps • 🔥 Advanced</div>
                 </div>
             </div>
         </div>
@@ -1097,6 +1243,48 @@
                 </div>
             </div>
 
+            <!-- Loss Landscape Visualization -->
+            <div class="loss-landscape-container">
+                <h3 class="loss-landscape-title">
+                    <svg class="icon icon-stroke" viewBox="0 0 24 24">
+                        <path d="M8 3l4 8 5-5 5 15H2L8 3z"/>
+                    </svg>
+                    Loss Landscape & Gradients
+                </h3>
+                <canvas id="lossLandscapeCanvas" class="loss-landscape-canvas" width="800" height="400"></canvas>
+                <div class="landscape-controls">
+                    <div class="landscape-control-group">
+                        <label class="landscape-control-label">Rotation X</label>
+                        <input type="range" id="rotationX" class="landscape-slider" min="-90" max="90" value="-20">
+                    </div>
+                    <div class="landscape-control-group">
+                        <label class="landscape-control-label">Rotation Z</label>
+                        <input type="range" id="rotationZ" class="landscape-slider" min="0" max="360" value="45">
+                    </div>
+                    <div class="landscape-control-group">
+                        <label class="landscape-control-label">Zoom</label>
+                        <input type="range" id="zoomLevel" class="landscape-slider" min="0.5" max="3" step="0.1" value="1">
+                    </div>
+                    <div class="landscape-toggle">
+                        <input type="checkbox" id="showGradients" class="landscape-checkbox" checked>
+                        <label for="showGradients">Show Gradients</label>
+                    </div>
+                    <div class="landscape-toggle">
+                        <input type="checkbox" id="showContours" class="landscape-checkbox" checked>
+                        <label for="showContours">Show Contours</label>
+                    </div>
+                    <div class="landscape-toggle">
+                        <input type="checkbox" id="showPath" class="landscape-checkbox" checked>
+                        <label for="showPath">Show Training Path</label>
+                    </div>
+                </div>
+                <div class="gradient-legend">
+                    <span>Gradient Direction:</span>
+                    <span class="gradient-arrow"></span>
+                    <span>High → Low Loss</span>
+                </div>
+            </div>
+
             <div class="card">
                 <h3 class="card-title">
                     <svg class="icon" fill="currentColor" viewBox="0 0 24 24">
@@ -1694,6 +1882,21 @@
         let trainInterval = null;
         let animationId = null;
 
+        // Loss landscape variables
+        let lossLandscape = [];
+        let gradientField = [];
+        let trainingPath = [];
+        let landscapeResolution = 30;
+        let rotationX = -20;
+        let rotationZ = 45;
+        let zoomLevel = 1;
+        let showGradients = true;
+        let showContours = true;
+        let showPath = true;
+        let mouseDown = false;
+        let lastMouseX = 0;
+        let lastMouseY = 0;
+
         // DOM elements
         const mainMenu = document.getElementById('mainMenu');
         const taskSelection = document.getElementById('taskSelection');
@@ -1725,6 +1928,15 @@
         const vizTitle = document.getElementById('vizTitle');
         const babyViz = document.getElementById('babyViz');
 
+        // Loss landscape elements
+        const lossLandscapeCanvas = document.getElementById('lossLandscapeCanvas');
+        const rotationXSlider = document.getElementById('rotationX');
+        const rotationZSlider = document.getElementById('rotationZ');
+        const zoomSlider = document.getElementById('zoomLevel');
+        const gradientsCheckbox = document.getElementById('showGradients');
+        const contoursCheckbox = document.getElementById('showContours');
+        const pathCheckbox = document.getElementById('showPath');
+
         // Developer mode elements
         const devTaskName = document.getElementById('devTaskName');
         const devArchitecture = document.getElementById('devArchitecture');
@@ -2067,19 +2279,63 @@
                         ctx.lineTo(x2, y2);
                         ctx.stroke();
                         
-                        // Subtle gradient flow
-                        if (isTraining && Math.abs(weight) > 0.3) {
-                            const flowProgress = ((animationTime * 0.5) % 120) / 120;
-                            const flowX = x1 + (x2 - x1) * flowProgress;
-                            const flowY = y1 + (y2 - y1) * flowProgress;
+                        // Enhanced gradient flow visualization
+                        if (isTraining && Math.abs(weight) > 0.1) {
+                            // Multiple flowing particles for stronger gradients
+                            const numParticles = Math.min(3, Math.floor(Math.abs(weight) * 4));
                             
-                            const flowIntensity = intensity * 0.3;
-                            ctx.fillStyle = weight > 0 ? 
-                                `rgba(34, 197, 94, ${flowIntensity})` : 
-                                `rgba(239, 68, 68, ${flowIntensity})`;
-                            ctx.beginPath();
-                            ctx.arc(flowX, flowY, 2, 0, 2 * Math.PI);
-                            ctx.fill();
+                            for (let p = 0; p < numParticles; p++) {
+                                const offset = (p / numParticles) * 120;
+                                const flowProgress = ((animationTime * 0.8 + offset) % 120) / 120;
+                                const flowX = x1 + (x2 - x1) * flowProgress;
+                                const flowY = y1 + (y2 - y1) * flowProgress;
+                                
+                                const particleSize = 2 + Math.abs(weight) * 2;
+                                const flowIntensity = intensity * 0.4;
+                                
+                                // Gradient direction indicator
+                                const gradientStrength = weightChanges && weightChanges[i] && weightChanges[i][k] && weightChanges[i][k][j] 
+                                    ? Math.min(weightChanges[i][k][j] * 5, 1) : 0;
+                                
+                                ctx.fillStyle = weight > 0 ? 
+                                    `rgba(34, 197, 94, ${flowIntensity + gradientStrength * 0.3})` : 
+                                    `rgba(239, 68, 68, ${flowIntensity + gradientStrength * 0.3})`;
+                                
+                                ctx.beginPath();
+                                ctx.arc(flowX, flowY, particleSize, 0, 2 * Math.PI);
+                                ctx.fill();
+                                
+                                // Add gradient direction arrow for strong changes
+                                if (gradientStrength > 0.5) {
+                                    const arrowLength = 8;
+                                    const angle = Math.atan2(y2 - y1, x2 - x1);
+                                    
+                                    ctx.strokeStyle = weight > 0 ? 
+                                        `rgba(34, 197, 94, ${gradientStrength})` : 
+                                        `rgba(239, 68, 68, ${gradientStrength})`;
+                                    ctx.lineWidth = 2;
+                                    
+                                    ctx.beginPath();
+                                    ctx.moveTo(flowX - arrowLength * Math.cos(angle), 
+                                              flowY - arrowLength * Math.sin(angle));
+                                    ctx.lineTo(flowX + arrowLength * Math.cos(angle), 
+                                              flowY + arrowLength * Math.sin(angle));
+                                    ctx.stroke();
+                                    
+                                    // Arrow head
+                                    const headSize = 3;
+                                    ctx.beginPath();
+                                    ctx.moveTo(flowX + arrowLength * Math.cos(angle), 
+                                              flowY + arrowLength * Math.sin(angle));
+                                    ctx.lineTo(flowX + (arrowLength - headSize) * Math.cos(angle - 0.3), 
+                                              flowY + (arrowLength - headSize) * Math.sin(angle - 0.3));
+                                    ctx.moveTo(flowX + arrowLength * Math.cos(angle), 
+                                              flowY + arrowLength * Math.sin(angle));
+                                    ctx.lineTo(flowX + (arrowLength - headSize) * Math.cos(angle + 0.3), 
+                                              flowY + (arrowLength - headSize) * Math.sin(angle + 0.3));
+                                    ctx.stroke();
+                                }
+                            }
                         }
                     }
                 }
@@ -2097,9 +2353,47 @@
                     const saturation = 50;
                     let lightness = 35 + activation * 25;
                     
-                    if (isTraining && activation > 0.8) {
-                        const pulse = Math.sin(animationTime * 0.05) * 0.1;
-                        lightness += pulse * 10;
+                    // Enhanced neuron visualization with gradient information
+                    if (isTraining) {
+                        if (activation > 0.8) {
+                            const pulse = Math.sin(animationTime * 0.05) * 0.1;
+                            lightness += pulse * 10;
+                        }
+                        
+                        // Show gradient magnitude on neurons
+                        if (weightChanges && weightChanges.length > 0) {
+                            let neuronGradient = 0;
+                            
+                            // Calculate average gradient affecting this neuron
+                            if (layerIndex < network.layers.length - 1 && weightChanges[layerIndex]) {
+                                for (let outIdx = 0; outIdx < weightChanges[layerIndex].length; outIdx++) {
+                                    if (weightChanges[layerIndex][outIdx] && weightChanges[layerIndex][outIdx][nodeIndex]) {
+                                        neuronGradient += Math.abs(weightChanges[layerIndex][outIdx][nodeIndex]);
+                                    }
+                                }
+                                neuronGradient /= weightChanges[layerIndex].length || 1;
+                            }
+                            
+                            // Add gradient ring around active neurons
+                            if (neuronGradient > 0.1) {
+                                const ringIntensity = Math.min(neuronGradient * 3, 1);
+                                ctx.strokeStyle = `rgba(255, 255, 0, ${ringIntensity * 0.7})`;
+                                ctx.lineWidth = 3;
+                                ctx.beginPath();
+                                ctx.arc(x, y, nodeRadius + 2, 0, 2 * Math.PI);
+                                ctx.stroke();
+                                
+                                // Pulsing effect for high gradients
+                                if (neuronGradient > 0.5) {
+                                    const gradientPulse = Math.sin(animationTime * 0.1) * 0.2 + 0.8;
+                                    ctx.strokeStyle = `rgba(255, 255, 0, ${ringIntensity * gradientPulse * 0.3})`;
+                                    ctx.lineWidth = 5;
+                                    ctx.beginPath();
+                                    ctx.arc(x, y, nodeRadius + 4, 0, 2 * Math.PI);
+                                    ctx.stroke();
+                                }
+                            }
+                        }
                     }
                     
                     ctx.fillStyle = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
@@ -2111,13 +2405,36 @@
                     ctx.lineWidth = 1.5;
                     ctx.stroke();
                     
+                    // Enhanced text with gradient information
                     ctx.fillStyle = '#ffffff';
-                    ctx.font = `${Math.max(10, nodeRadius / 1.6)}px monospace`;
+                    ctx.font = `${Math.max(8, nodeRadius / 2)}px monospace`;
                     ctx.textAlign = 'center';
                     ctx.textBaseline = 'middle';
                     ctx.shadowColor = 'rgba(0, 0, 0, 0.9)';
                     ctx.shadowBlur = 2;
-                    ctx.fillText(activation.toFixed(2), x, y);
+                    
+                    // Show activation value
+                    ctx.fillText(activation.toFixed(2), x, y - 2);
+                    
+                    // Show gradient information for training neurons
+                    if (isTraining && weightChanges && weightChanges.length > 0) {
+                        let neuronGradient = 0;
+                        if (layerIndex < network.layers.length - 1 && weightChanges[layerIndex]) {
+                            for (let outIdx = 0; outIdx < weightChanges[layerIndex].length; outIdx++) {
+                                if (weightChanges[layerIndex][outIdx] && weightChanges[layerIndex][outIdx][nodeIndex]) {
+                                    neuronGradient += Math.abs(weightChanges[layerIndex][outIdx][nodeIndex]);
+                                }
+                            }
+                            neuronGradient /= weightChanges[layerIndex].length || 1;
+                        }
+                        
+                        if (neuronGradient > 0.01) {
+                            ctx.fillStyle = neuronGradient > 0.1 ? '#ffff00' : '#ffffff';
+                            ctx.font = `${Math.max(6, nodeRadius / 3)}px monospace`;
+                            ctx.fillText(`Δ${neuronGradient.toFixed(2)}`, x, y + 8);
+                        }
+                    }
+                    
                     ctx.shadowBlur = 0;
                 }
             });
@@ -2202,6 +2519,310 @@
             lossArea.setAttribute('points', points + ' 100,100 0,100');
         }
 
+        // Loss landscape functions
+        function calculateLossLandscape() {
+            if (!network || !currentTask) return;
+            
+            const range = 2;
+            lossLandscape = [];
+            gradientField = [];
+            
+            // Sample key weights from the first layer for visualization
+            const originalWeights = JSON.parse(JSON.stringify(network.weights));
+            
+            for (let i = 0; i < landscapeResolution; i++) {
+                lossLandscape[i] = [];
+                gradientField[i] = [];
+                
+                for (let j = 0; j < landscapeResolution; j++) {
+                    // Perturb the first two weights
+                    const w1 = (i / (landscapeResolution - 1) - 0.5) * range;
+                    const w2 = (j / (landscapeResolution - 1) - 0.5) * range;
+                    
+                    if (network.weights[0] && network.weights[0][0]) {
+                        network.weights[0][0][0] = originalWeights[0][0][0] + w1;
+                        if (network.weights[0][0][1] !== undefined) {
+                            network.weights[0][0][1] = originalWeights[0][0][1] + w2;
+                        }
+                    }
+                    
+                    // Calculate loss at this point
+                    let totalLoss = 0;
+                    let gradX = 0, gradY = 0;
+                    
+                    const epsilon = 0.001;
+                    
+                    // Calculate loss
+                    for (const sample of currentTask.data) {
+                        const output = network.forward(sample.input);
+                        const loss = sample.target.reduce((sum, t, idx) => 
+                            sum + Math.pow(t - output[idx], 2), 0) / sample.target.length;
+                        totalLoss += loss;
+                    }
+                    totalLoss /= currentTask.data.length;
+                    
+                    // Calculate numerical gradients
+                    if (network.weights[0] && network.weights[0][0]) {
+                        // Gradient in x direction
+                        network.weights[0][0][0] = originalWeights[0][0][0] + w1 + epsilon;
+                        let lossPlus = 0;
+                        for (const sample of currentTask.data) {
+                            const output = network.forward(sample.input);
+                            const loss = sample.target.reduce((sum, t, idx) => 
+                                sum + Math.pow(t - output[idx], 2), 0) / sample.target.length;
+                            lossPlus += loss;
+                        }
+                        lossPlus /= currentTask.data.length;
+                        gradX = (lossPlus - totalLoss) / epsilon;
+                        
+                        // Reset and calculate gradient in y direction
+                        network.weights[0][0][0] = originalWeights[0][0][0] + w1;
+                        if (network.weights[0][0][1] !== undefined) {
+                            network.weights[0][0][1] = originalWeights[0][0][1] + w2 + epsilon;
+                            let lossPlusY = 0;
+                            for (const sample of currentTask.data) {
+                                const output = network.forward(sample.input);
+                                const loss = sample.target.reduce((sum, t, idx) => 
+                                    sum + Math.pow(t - output[idx], 2), 0) / sample.target.length;
+                                lossPlusY += loss;
+                            }
+                            lossPlusY /= currentTask.data.length;
+                            gradY = (lossPlusY - totalLoss) / epsilon;
+                        }
+                    }
+                    
+                    lossLandscape[i][j] = totalLoss;
+                    gradientField[i][j] = { x: gradX, y: gradY };
+                }
+            }
+            
+            // Restore original weights
+            network.weights = originalWeights;
+        }
+
+        function drawLossLandscape() {
+            const canvas = lossLandscapeCanvas;
+            const ctx = canvas.getContext('2d');
+            const width = canvas.width;
+            const height = canvas.height;
+            
+            ctx.clearRect(0, 0, width, height);
+            
+            if (lossLandscape.length === 0) {
+                ctx.fillStyle = '#9ca3af';
+                ctx.font = '16px system-ui';
+                ctx.textAlign = 'center';
+                ctx.fillText('Training to generate loss landscape...', width/2, height/2);
+                return;
+            }
+            
+            // Transform and projection parameters
+            const centerX = width / 2;
+            const centerY = height / 2;
+            const scale = 200 * zoomLevel;
+            
+            const radX = (rotationX * Math.PI) / 180;
+            const radZ = (rotationZ * Math.PI) / 180;
+            
+            // Find min/max loss for normalization
+            let minLoss = Infinity, maxLoss = -Infinity;
+            for (let i = 0; i < landscapeResolution; i++) {
+                for (let j = 0; j < landscapeResolution; j++) {
+                    minLoss = Math.min(minLoss, lossLandscape[i][j]);
+                    maxLoss = Math.max(maxLoss, lossLandscape[i][j]);
+                }
+            }
+            
+            const lossRange = maxLoss - minLoss || 1;
+            
+            // Create projected points
+            const projectedPoints = [];
+            for (let i = 0; i < landscapeResolution; i++) {
+                projectedPoints[i] = [];
+                for (let j = 0; j < landscapeResolution; j++) {
+                    const x = (i / (landscapeResolution - 1) - 0.5) * 2;
+                    const y = (j / (landscapeResolution - 1) - 0.5) * 2;
+                    const z = ((lossLandscape[i][j] - minLoss) / lossRange - 0.5) * 1.5;
+                    
+                    // 3D rotation
+                    const y1 = y * Math.cos(radX) - z * Math.sin(radX);
+                    const z1 = y * Math.sin(radX) + z * Math.cos(radX);
+                    const x2 = x * Math.cos(radZ) - y1 * Math.sin(radZ);
+                    const y2 = x * Math.sin(radZ) + y1 * Math.cos(radZ);
+                    
+                    projectedPoints[i][j] = {
+                        x: centerX + x2 * scale,
+                        y: centerY + y2 * scale,
+                        z: z1,
+                        loss: lossLandscape[i][j]
+                    };
+                }
+            }
+            
+            // Draw contour lines if enabled
+            if (showContours) {
+                const contourLevels = 8;
+                for (let level = 0; level < contourLevels; level++) {
+                    const targetLoss = minLoss + (level / contourLevels) * lossRange;
+                    ctx.strokeStyle = `hsla(${240 - level * 30}, 70%, 60%, 0.3)`;
+                    ctx.lineWidth = 1;
+                    
+                    for (let i = 0; i < landscapeResolution - 1; i++) {
+                        for (let j = 0; j < landscapeResolution - 1; j++) {
+                            const corners = [
+                                projectedPoints[i][j],
+                                projectedPoints[i+1][j],
+                                projectedPoints[i+1][j+1],
+                                projectedPoints[i][j+1]
+                            ];
+                            
+                            // Simple contour drawing
+                            for (let k = 0; k < 4; k++) {
+                                const p1 = corners[k];
+                                const p2 = corners[(k + 1) % 4];
+                                
+                                if ((p1.loss <= targetLoss && p2.loss >= targetLoss) ||
+                                    (p1.loss >= targetLoss && p2.loss <= targetLoss)) {
+                                    const t = (targetLoss - p1.loss) / (p2.loss - p1.loss);
+                                    const x = p1.x + t * (p2.x - p1.x);
+                                    const y = p1.y + t * (p2.y - p1.y);
+                                    
+                                    ctx.beginPath();
+                                    ctx.arc(x, y, 1, 0, 2 * Math.PI);
+                                    ctx.stroke();
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            
+            // Draw surface mesh
+            for (let i = 0; i < landscapeResolution - 1; i++) {
+                for (let j = 0; j < landscapeResolution - 1; j++) {
+                    const corners = [
+                        projectedPoints[i][j],
+                        projectedPoints[i+1][j],
+                        projectedPoints[i+1][j+1],
+                        projectedPoints[i][j+1]
+                    ];
+                    
+                    // Color based on loss value
+                    const avgLoss = corners.reduce((sum, p) => sum + p.loss, 0) / 4;
+                    const normalizedLoss = (avgLoss - minLoss) / lossRange;
+                    const hue = 240 - normalizedLoss * 120; // Blue to red
+                    const alpha = 0.6;
+                    
+                    ctx.fillStyle = `hsla(${hue}, 70%, 50%, ${alpha})`;
+                    ctx.strokeStyle = `hsla(${hue}, 70%, 30%, 0.8)`;
+                    ctx.lineWidth = 0.5;
+                    
+                    ctx.beginPath();
+                    ctx.moveTo(corners[0].x, corners[0].y);
+                    for (let k = 1; k < corners.length; k++) {
+                        ctx.lineTo(corners[k].x, corners[k].y);
+                    }
+                    ctx.closePath();
+                    ctx.fill();
+                    ctx.stroke();
+                }
+            }
+            
+            // Draw gradient arrows if enabled
+            if (showGradients) {
+                const step = Math.max(1, Math.floor(landscapeResolution / 15));
+                for (let i = 0; i < landscapeResolution; i += step) {
+                    for (let j = 0; j < landscapeResolution; j += step) {
+                        const point = projectedPoints[i][j];
+                        const grad = gradientField[i][j];
+                        
+                        if (grad && (Math.abs(grad.x) > 0.01 || Math.abs(grad.y) > 0.01)) {
+                            const arrowLength = 30;
+                            const gradMagnitude = Math.sqrt(grad.x * grad.x + grad.y * grad.y);
+                            const normalizedGradX = (grad.x / gradMagnitude) * arrowLength;
+                            const normalizedGradY = (grad.y / gradMagnitude) * arrowLength;
+                            
+                            // Transform gradient direction
+                            const gx1 = normalizedGradX * Math.cos(radZ) - normalizedGradY * Math.sin(radZ);
+                            const gy1 = normalizedGradX * Math.sin(radZ) + normalizedGradY * Math.cos(radZ);
+                            
+                            ctx.strokeStyle = '#f59e0b';
+                            ctx.lineWidth = 2;
+                            ctx.beginPath();
+                            ctx.moveTo(point.x, point.y);
+                            ctx.lineTo(point.x - gx1, point.y - gy1);
+                            ctx.stroke();
+                            
+                            // Arrow head
+                            const headLength = 6;
+                            const angle = Math.atan2(-gy1, -gx1);
+                            ctx.beginPath();
+                            ctx.moveTo(point.x - gx1, point.y - gy1);
+                            ctx.lineTo(
+                                point.x - gx1 + headLength * Math.cos(angle - Math.PI/6),
+                                point.y - gy1 + headLength * Math.sin(angle - Math.PI/6)
+                            );
+                            ctx.moveTo(point.x - gx1, point.y - gy1);
+                            ctx.lineTo(
+                                point.x - gx1 + headLength * Math.cos(angle + Math.PI/6),
+                                point.y - gy1 + headLength * Math.sin(angle + Math.PI/6)
+                            );
+                            ctx.stroke();
+                        }
+                    }
+                }
+            }
+            
+            // Draw training path if enabled
+            if (showPath && trainingPath.length > 1) {
+                ctx.strokeStyle = '#06b6d4';
+                ctx.lineWidth = 3;
+                ctx.beginPath();
+                
+                for (let i = 0; i < trainingPath.length; i++) {
+                    const pathPoint = trainingPath[i];
+                    // Project path point to screen coordinates
+                    const x = (pathPoint.w1 / 2 + 0.5) * (landscapeResolution - 1);
+                    const y = (pathPoint.w2 / 2 + 0.5) * (landscapeResolution - 1);
+                    
+                    if (x >= 0 && x < landscapeResolution && y >= 0 && y < landscapeResolution) {
+                        const xi = Math.floor(x);
+                        const yi = Math.floor(y);
+                        
+                        if (xi < landscapeResolution && yi < landscapeResolution && projectedPoints[xi] && projectedPoints[xi][yi]) {
+                            const point = projectedPoints[xi][yi];
+                            if (i === 0) {
+                                ctx.moveTo(point.x, point.y);
+                            } else {
+                                ctx.lineTo(point.x, point.y);
+                            }
+                        }
+                    }
+                }
+                ctx.stroke();
+                
+                // Mark current position
+                if (trainingPath.length > 0) {
+                    const current = trainingPath[trainingPath.length - 1];
+                    const x = (current.w1 / 2 + 0.5) * (landscapeResolution - 1);
+                    const y = (current.w2 / 2 + 0.5) * (landscapeResolution - 1);
+                    
+                    if (x >= 0 && x < landscapeResolution && y >= 0 && y < landscapeResolution) {
+                        const xi = Math.floor(x);
+                        const yi = Math.floor(y);
+                        
+                        if (xi < landscapeResolution && yi < landscapeResolution && projectedPoints[xi] && projectedPoints[xi][yi]) {
+                            const point = projectedPoints[xi][yi];
+                            ctx.fillStyle = '#06b6d4';
+                            ctx.beginPath();
+                            ctx.arc(point.x, point.y, 5, 0, 2 * Math.PI);
+                            ctx.fill();
+                        }
+                    }
+                }
+            }
+        }
+
         // Training step
         function trainStep() {
             const result = network.trainBatch(currentTask.data);
@@ -2216,6 +2837,21 @@
             lossHistory.push(result.loss);
             if (lossHistory.length > 100) lossHistory.shift();
             
+            // Track training path for loss landscape
+            if (network.weights[0] && network.weights[0][0] && trainingPath.length < 1000) {
+                trainingPath.push({
+                    w1: network.weights[0][0][0] || 0,
+                    w2: network.weights[0][0][1] || 0,
+                    loss: result.loss,
+                    epoch: epoch
+                });
+            }
+            
+            // Recalculate loss landscape periodically
+            if (epoch % 10 === 0) {
+                calculateLossLandscape();
+            }
+            
             const newPredictions = currentTask.data.map(data => {
                 const output = network.forward(data.input);
                 const rawOutput = output[0];
@@ -2279,6 +2915,7 @@
             
             updateLossChart();
             drawNetwork();
+            drawLossLandscape();
             if (currentTask.hasVisualization) {
                 drawDataVisualization();
             }
@@ -2315,6 +2952,7 @@
                 if (currentTask.isBabyMode) {
                     updateBabyVisualization();
                 }
+                drawLossLandscape();
             }
             animationId = requestAnimationFrame(animate);
         }
@@ -2344,6 +2982,12 @@
             accuracy = 0;
             animationTime = 0;
             
+            // Reset loss landscape
+            lossLandscape = [];
+            gradientField = [];
+            trainingPath = [];
+            calculateLossLandscape();
+            
             trainBtn.innerHTML = `
                 <svg class="icon" fill="currentColor" viewBox="0 0 24 24">
                     <path d="M8 5v14l11-7z"/>
@@ -2368,8 +3012,7 @@
                 `;
                 trainBtn.className = 'btn btn-pause';
                 
-                // Use slower speed in walkthrough mode
-                const trainingSpeed = walkthroughActive ? walkthroughTrainingSpeed : 100;
+                const trainingSpeed = 100;
                 trainInterval = setInterval(trainStep, trainingSpeed);
             } else {
                 trainBtn.innerHTML = `
@@ -2390,6 +3033,79 @@
         // Developer mode event listeners
         devArchitecture.addEventListener('input', updateParameterCount);
 
+        // Loss landscape event listeners
+        rotationXSlider.addEventListener('input', (e) => {
+            rotationX = parseFloat(e.target.value);
+            drawLossLandscape();
+        });
+
+        rotationZSlider.addEventListener('input', (e) => {
+            rotationZ = parseFloat(e.target.value);
+            drawLossLandscape();
+        });
+
+        zoomSlider.addEventListener('input', (e) => {
+            zoomLevel = parseFloat(e.target.value);
+            drawLossLandscape();
+        });
+
+        gradientsCheckbox.addEventListener('change', (e) => {
+            showGradients = e.target.checked;
+            drawLossLandscape();
+        });
+
+        contoursCheckbox.addEventListener('change', (e) => {
+            showContours = e.target.checked;
+            drawLossLandscape();
+        });
+
+        pathCheckbox.addEventListener('change', (e) => {
+            showPath = e.target.checked;
+            drawLossLandscape();
+        });
+
+        // Mouse interaction for loss landscape
+        lossLandscapeCanvas.addEventListener('mousedown', (e) => {
+            mouseDown = true;
+            lastMouseX = e.clientX;
+            lastMouseY = e.clientY;
+        });
+
+        lossLandscapeCanvas.addEventListener('mousemove', (e) => {
+            if (mouseDown) {
+                const deltaX = e.clientX - lastMouseX;
+                const deltaY = e.clientY - lastMouseY;
+                
+                rotationZ = (rotationZ + deltaX * 0.5) % 360;
+                rotationX = Math.max(-90, Math.min(90, rotationX - deltaY * 0.5));
+                
+                rotationXSlider.value = rotationX;
+                rotationZSlider.value = rotationZ;
+                
+                drawLossLandscape();
+                
+                lastMouseX = e.clientX;
+                lastMouseY = e.clientY;
+            }
+        });
+
+        lossLandscapeCanvas.addEventListener('mouseup', () => {
+            mouseDown = false;
+        });
+
+        lossLandscapeCanvas.addEventListener('mouseleave', () => {
+            mouseDown = false;
+        });
+
+        // Wheel zoom for loss landscape
+        lossLandscapeCanvas.addEventListener('wheel', (e) => {
+            e.preventDefault();
+            const delta = e.deltaY > 0 ? 0.9 : 1.1;
+            zoomLevel = Math.max(0.5, Math.min(3, zoomLevel * delta));
+            zoomSlider.value = zoomLevel;
+            drawLossLandscape();
+        });
+
         // Walkthrough Mode functionality
         let walkthroughActive = false;
         let walkthroughStep = 0;
@@ -2411,21 +3127,21 @@
                         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}
+                        highlight: {x: 0, y: 0, width: 130, 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}
+                        highlight: {x: 130, y: 0, width: 140, 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}
+                        highlight: {x: 270, y: 0, width: 130, height: 300}
                     },
                     {
                         title: 'Connections (Weights)',
@@ -2546,6 +3262,94 @@
                         position: 'right'
                     }
                 ]
+            },
+            landscape: {
+                title: 'Loss Landscape & Gradients',
+                steps: [
+                    {
+                        title: 'Welcome to Loss Landscapes!',
+                        content: 'The loss landscape shows how the error changes as we adjust the network\'s weights. Think of it like a 3D mountain range where we want to find the lowest valley.',
+                        element: null,
+                        position: 'center'
+                    },
+                    {
+                        title: 'The 3D Loss Surface',
+                        content: 'This 3D visualization shows the loss landscape. Blue areas are low loss (good), red areas are high loss (bad). The network tries to \'roll downhill\' to find the minimum.',
+                        element: '#lossLandscapeCanvas',
+                        position: 'right'
+                    },
+                    {
+                        title: 'Gradient Arrows',
+                        content: 'The yellow arrows show gradients - they point in the direction of steepest increase in loss. The network moves OPPOSITE to these arrows to reduce loss.',
+                        element: '.landscape-toggle',
+                        position: 'top'
+                    },
+                    {
+                        title: 'Training Path',
+                        content: 'The blue line shows the path the network takes during training. It starts somewhere random and gradually finds its way to low-loss regions.',
+                        element: '#lossLandscapeCanvas',
+                        position: 'bottom'
+                    },
+                    {
+                        title: 'Interactive Controls',
+                        content: 'Use these controls to rotate, zoom, and toggle different visualizations. Try dragging on the landscape to rotate it around!',
+                        element: '.landscape-controls',
+                        position: 'bottom'
+                    },
+                    {
+                        title: 'Start Training to See It Live',
+                        content: 'Now start training a task and watch how the loss landscape guides the learning process. The path will update in real-time!',
+                        element: '#trainBtn',
+                        position: 'bottom'
+                    }
+                ]
+            },
+            advanced: {
+                title: 'Advanced Visualizations',
+                steps: [
+                    {
+                        title: 'Advanced Neural Network Insights',
+                        content: 'Now let\'s explore the advanced visualizations that show exactly what happens inside the neural network during training.',
+                        element: null,
+                        position: 'center'
+                    },
+                    {
+                        title: 'Gradient Flow in Connections',
+                        content: 'Watch the animated particles flowing along connections. More particles = stronger gradients. Green flows are positive weights, red are negative.',
+                        element: '#networkCanvas',
+                        position: 'right'
+                    },
+                    {
+                        title: 'Neuron Gradient Rings',
+                        content: 'Yellow rings around neurons show gradient magnitude. Bright, pulsing rings mean the neuron is changing rapidly during training.',
+                        element: '#networkCanvas',
+                        position: 'left'
+                    },
+                    {
+                        title: 'Weight Change Indicators',
+                        content: 'The thickness and brightness of connections show how much each weight is changing. Thicker, brighter lines = more learning happening.',
+                        element: '#networkCanvas',
+                        position: 'top'
+                    },
+                    {
+                        title: 'Loss Landscape Contours',
+                        content: 'Contour lines on the loss landscape are like elevation lines on a topographic map - they show areas of equal loss value.',
+                        element: '#lossLandscapeCanvas',
+                        position: 'right'
+                    },
+                    {
+                        title: 'Real-time Training Visualization',
+                        content: 'All these visualizations update in real-time as the network trains. You can see the exact moment when the network \'gets it\'!',
+                        element: '.control-panel',
+                        position: 'bottom'
+                    },
+                    {
+                        title: 'Understanding Convergence',
+                        content: 'Watch how the training path in the loss landscape eventually stops moving - this means the network has converged to a solution.',
+                        element: '#lossLandscapeCanvas',
+                        position: 'bottom'
+                    }
+                ]
             }
         };
 
@@ -2563,6 +3367,20 @@
                 taskSelection.style.display = 'block';
                 currentCategory = 'fundamentals';
                 showCategory('fundamentals');
+            } else if (tutorialId === 'landscape' || tutorialId === 'advanced') {
+                document.getElementById('walkthroughMode').style.display = 'none';
+                taskSelection.style.display = 'block';
+                currentCategory = 'fundamentals';
+                showCategory('fundamentals');
+                // Auto-select XOR for better landscape visualization
+                setTimeout(() => selectTask('xor'), 500);
+            } else if (tutorialId === 'basics' || tutorialId === 'training' || tutorialId === 'visualization') {
+                // For basic tutorials, start with a simple task for better understanding
+                document.getElementById('walkthroughMode').style.display = 'none';
+                taskSelection.style.display = 'block';
+                currentCategory = 'fundamentals';
+                showCategory('fundamentals');
+                setTimeout(() => selectTask('and'), 500);
             }
 
             showWalkthroughStep();
@@ -2579,9 +3397,13 @@
             document.getElementById('walkthroughStep').textContent = walkthroughStep + 1;
             document.getElementById('walkthroughTotal').textContent = walkthroughTutorial.steps.length;
 
-            // Show overlay
+            // Show overlay with reduced opacity for better visibility
             overlay.style.display = 'block';
             progress.style.display = 'block';
+            
+            // Ensure all content is visible by adjusting z-index
+            document.getElementById('trainingInterface').style.position = 'relative';
+            document.getElementById('trainingInterface').style.zIndex = '1';
 
             // Update popup content
             document.getElementById('walkthroughTitle').textContent = step.title;
@@ -2593,7 +3415,7 @@
                 if (element) {
                     const rect = element.getBoundingClientRect();
                     
-                    // Highlight element
+                    // Highlight element with better visibility
                     if (step.highlight) {
                         const canvasRect = element.getBoundingClientRect();
                         highlight.style.left = (canvasRect.left + step.highlight.x) + 'px';
@@ -2601,12 +3423,18 @@
                         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.left = rect.left - 8 + 'px';
+                        highlight.style.top = rect.top - 8 + 'px';
+                        highlight.style.width = rect.width + 16 + 'px';
+                        highlight.style.height = rect.height + 16 + 'px';
                     }
                     highlight.style.display = 'block';
+                    
+                    // Bring highlighted element to front
+                    if (element) {
+                        element.style.position = 'relative';
+                        element.style.zIndex = '10002';
+                    }
 
                     // Position popup
                     positionPopup(popup, rect, step.position);
@@ -2695,6 +3523,20 @@
             document.getElementById('walkthroughPopup').style.display = 'none';
             document.getElementById('walkthroughProgress').style.display = 'none';
             document.getElementById('walkthroughIndicator').style.display = 'none';
+            
+            // Reset z-index values
+            const trainingInterface = document.getElementById('trainingInterface');
+            if (trainingInterface) {
+                trainingInterface.style.zIndex = '';
+                trainingInterface.style.position = '';
+            }
+            
+            // Reset any highlighted elements
+            const networkCanvas = document.getElementById('networkCanvas');
+            if (networkCanvas) {
+                networkCanvas.style.zIndex = '';
+                networkCanvas.style.position = '';
+            }
         }
 
         // Walkthrough event listeners
@@ -2704,7 +3546,17 @@
 
         // Initialize
         startAnimation();
+        
+        // Initialize loss landscape on page load
+        setTimeout(() => {
+            if (lossLandscapeCanvas) {
+                const ctx = lossLandscapeCanvas.getContext('2d');
+                ctx.fillStyle = '#9ca3af';
+                ctx.font = '16px system-ui';
+                ctx.textAlign = 'center';
+                ctx.fillText('Select a task to view loss landscape', lossLandscapeCanvas.width/2, lossLandscapeCanvas.height/2);
+            }
+        }, 100);
     </script>
-    <script src="walkthrough-enhancement.js"></script>
 </body>
 </html>