Upload 22 files

css/styles.css

@@ -34,6 +34,12 @@
     --node-glow: 0 0 15px rgba(255, 255, 255, 0.8);
     --linear-node-color-1: #1abc9c;
     --linear-node-color-2: #16a085;
+    --lstm-node-color-1: #9c88ff;
+    --lstm-node-color-2: #8c7ae6;
+    --rnn-node-color-1: #00cec9;
+    --rnn-node-color-2: #00b894;
+    --gru-node-color-1: #fd79a8;
+    --gru-node-color-2: #e84393;
 }
 
 body {
@@ -719,10 +725,10 @@ footer p {
     margin-bottom: 1rem;
 }
 
-.setting-label {
+.setting-group label {
     font-size: 0.9rem;
     color: #666;
-    margin-bottom: 0.3rem;
+    margin-bottom: 0.5rem;
     display: block;
 }
 
@@ -733,6 +739,7 @@ footer p {
     border-radius: 5px;
     background: #ddd;
     outline: none;
+    margin: 10px 0;
 }
 
 .range-slider::-webkit-slider-thumb {
@@ -751,7 +758,24 @@ footer p {
     box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
 }
 
-.range-value {
+.range-slider::-moz-range-thumb {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: var(--primary-color);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: none;
+}
+
+.range-slider::-moz-range-thumb:hover {
+    background: #2980b9;
+    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
+}
+
+.setting-value {
+    display: flex;
+    justify-content: flex-end;
     font-size: 0.9rem;
     color: var(--primary-color);
     font-weight: 600;
@@ -818,6 +842,25 @@ select {
     margin-bottom: 1.5rem;
 }
 
+.activation-graph {
+    background: #f8f9fa;
+    border-radius: var(--border-radius);
+    padding: 1rem;
+    margin-bottom: 1.5rem;
+    width: 100%;
+    height: 150px;
+    position: relative;
+    overflow: hidden;
+}
+
+.activation-curve {
+    width: 100%;
+    height: 100%;
+    display: block;
+    background-color: #f8f9fa;
+    border-radius: var(--border-radius);
+}
+
 .layer-weights {
     display: flex;
     justify-content: center;
@@ -2038,4 +2081,37 @@ select {
     #stats-container {
         grid-template-columns: 1fr;
     }
+}
+
+.lstm-node {
+    background: linear-gradient(135deg, var(--lstm-node-color-1), var(--lstm-node-color-2));
+    border: 2px solid var(--lstm-node-color-1);
+    color: white;
+}
+
+.rnn-node {
+    background: linear-gradient(135deg, var(--rnn-node-color-1), var(--rnn-node-color-2));
+    border: 2px solid var(--rnn-node-color-1);
+    color: white;
+}
+
+.gru-node {
+    background: linear-gradient(135deg, var(--gru-node-color-1), var(--gru-node-color-2));
+    border: 2px solid var(--gru-node-color-1);
+    color: white;
+}
+
+.canvas-node[data-type="lstm"] {
+    background: linear-gradient(135deg, var(--lstm-node-color-1), var(--lstm-node-color-2), var(--lstm-node-color-1));
+    border: 2px solid var(--lstm-node-color-1);
+}
+
+.canvas-node[data-type="rnn"] {
+    background: linear-gradient(135deg, var(--rnn-node-color-1), var(--rnn-node-color-2), var(--rnn-node-color-1));
+    border: 2px solid var(--rnn-node-color-1);
+}
+
+.canvas-node[data-type="gru"] {
+    background: linear-gradient(135deg, var(--gru-node-color-1), var(--gru-node-color-2), var(--gru-node-color-1));
+    border: 2px solid var(--gru-node-color-1);
 } 

index.html

@@ -53,16 +53,15 @@
                         <div class="node-item" draggable="true" data-type="pool">
                             <div class="node pool-node">Pooling</div>
                         </div>
-                        <div class="node-item" draggable="true" data-type="linear">
-                            <div class="node linear-node">Linear Regression</div>
+                        <div class="node-item" draggable="true" data-type="lstm">
+                            <div class="node lstm-node">LSTM</div>
+                        </div>
+                        <div class="node-item" draggable="true" data-type="rnn">
+                            <div class="node rnn-node">RNN</div>
+                        </div>
+                        <div class="node-item" draggable="true" data-type="gru">
+                            <div class="node gru-node">GRU</div>
                         </div>
-                    </div>
-                    
-                    <h3 class="section-title">Sample Data</h3>
-                    <div class="sample-data">
-                        <div class="sample-item" data-sample="1">5</div>
-                        <div class="sample-item" data-sample="2">7</div>
-                        <div class="sample-item" data-sample="3">3</div>
                     </div>
                     
                     <div class="controls">
@@ -74,8 +73,10 @@
                     <div class="network-settings">
                         <div class="setting-group">
                             <label for="learning-rate">Learning Rate:</label>
-                            <input type="range" id="learning-rate" min="0.001" max="1" step="0.001" value="0.1">
-                            <span class="setting-value" id="learning-rate-value">0.1</span>
+                            <input type="range" id="learning-rate" class="range-slider" min="0.001" max="1" step="0.001" value="0.1">
+                            <div class="setting-value">
+                                <span id="learning-rate-value">0.1</span>
+                            </div>
                         </div>
                         <div class="setting-group">
                             <label for="activation">Activation:</label>
@@ -85,6 +86,14 @@
                                 <option value="tanh">Tanh</option>
                             </select>
                         </div>
+                        <div class="setting-group">
+                            <label for="optimizer">Optimizer:</label>
+                            <select id="optimizer">
+                                <option value="sgd">SGD</option>
+                                <option value="adam">Adam</option>
+                                <option value="rmsprop">RMSProp</option>
+                            </select>
+                        </div>
                     </div>
                 </div>
                 
@@ -432,9 +441,8 @@
     <footer>
         <p>Neural Network Playground - Learn and visualize neural networks interactively</p>
         <div class="footer-links">
-            <a href="#" id="about-link">About</a>
-            <a href="#" id="guide-link">User Guide</a>
-            <a href="https://github.com/yourusername/neural-network-playground" target="_blank">GitHub</a>
+            <a href="https://x.com/Ameerazam18" id="about-link">Follow me on X</a>
+            <a href="https://github.com/Ameerazam08" target="_blank">GitHub</a>
         </div>
     </footer>
     

js/complete-drag-fix.js

@@ -196,12 +196,37 @@
                         };
                         break;
                         
-                    case 'linear':
+                    case 'lstm':
                         nodeConfig = {
                             units: 64,
-                            activation: 'relu',
+                            returnSequences: true,
+                            activation: 'tanh',
+                            recurrentActivation: 'sigmoid',
+                            useBias: true,
+                            outputShape: ['?', 64],
+                            parameters: 0
+                        };
+                        break;
+                        
+                    case 'rnn':
+                        nodeConfig = {
+                            units: 32,
+                            returnSequences: true,
+                            activation: 'tanh',
+                            useBias: true,
+                            outputShape: ['?', 32],
+                            parameters: 0
+                        };
+                        break;
+                        
+                    case 'gru':
+                        nodeConfig = {
+                            units: 48,
+                            returnSequences: true,
+                            activation: 'tanh',
+                            recurrentActivation: 'sigmoid',
                             useBias: true,
-                            outputShape: [64],
+                            outputShape: ['?', 48],
                             parameters: 0
                         };
                         break;
@@ -268,6 +293,24 @@
                     outputShape = 'Depends on input';
                     parameters = `Pool size: ${nodeConfig.poolSize.join('×')}\nStride: ${nodeConfig.strides.join('×')}\nPadding: ${nodeConfig.padding}`;
                     break;
+                case 'lstm':
+                    nodeName = `LSTM ${nodeCounter[nodeType]}`;
+                    inputShape = 'Connect input';
+                    outputShape = `[?, ${nodeConfig.units}]`;
+                    parameters = `Units: ${nodeConfig.units}\nReturn Sequences: ${nodeConfig.returnSequences ? 'Yes' : 'No'}\nGates: 4`;
+                    break;
+                case 'rnn':
+                    nodeName = `RNN ${nodeCounter[nodeType]}`;
+                    inputShape = 'Connect input';
+                    outputShape = `[?, ${nodeConfig.units}]`;
+                    parameters = `Units: ${nodeConfig.units}\nReturn Sequences: ${nodeConfig.returnSequences ? 'Yes' : 'No'}`;
+                    break;
+                case 'gru':
+                    nodeName = `GRU ${nodeCounter[nodeType]}`;
+                    inputShape = 'Connect input';
+                    outputShape = `[?, ${nodeConfig.units}]`;
+                    parameters = `Units: ${nodeConfig.units}\nReturn Sequences: ${nodeConfig.returnSequences ? 'Yes' : 'No'}\nGates: 3`;
+                    break;
                 default:
                     nodeName = 'Unknown Layer';
                     inputShape = 'N/A';
@@ -877,6 +920,115 @@
                             }
                             break;
                             
+                        case 'rnn':
+                            // Get units and check if returning sequences
+                            const rnnUnits = parseInt(targetConfig.units) || 32;
+                            const rnnReturnSequences = targetConfig.returnSequences === 'true' || targetConfig.returnSequences === true;
+                            
+                            // Set output shape based on return_sequences setting
+                            if (rnnReturnSequences && sourceConfig.outputShape && sourceConfig.outputShape.length > 0) {
+                                // If return_sequences is true, output is [sequence_length, units]
+                                outputShape = [sourceConfig.outputShape[0], rnnUnits];
+                            } else {
+                                // If return_sequences is false, output is just [units]
+                                outputShape = [rnnUnits];
+                            }
+                            
+                            // Calculate parameters if we have input shape
+                            if (sourceConfig.outputShape && sourceConfig.outputShape.length > 0) {
+                                // Get the last dimension of the input as input_features
+                                const inputFeatures = sourceConfig.outputShape[sourceConfig.outputShape.length - 1];
+                                const useBias = targetConfig.useBias !== 'false' && targetConfig.useBias !== false;
+                                
+                                // Formula: input_features * units + units * units + units (bias)
+                                const inputParams = inputFeatures * rnnUnits;
+                                const recurrentParams = rnnUnits * rnnUnits;
+                                const biasParams = useBias ? rnnUnits : 0;
+                                
+                                parameters = inputParams + recurrentParams + biasParams;
+                                
+                                console.log(`RNN parameter calculation:
+                                    Input features: ${inputFeatures}
+                                    Units: ${rnnUnits}
+                                    Input weights: ${inputParams}
+                                    Recurrent weights: ${recurrentParams}
+                                    Bias: ${biasParams}
+                                    Total: ${parameters}`);
+                            }
+                            break;
+                            
+                        case 'lstm':
+                            // Get units and check if returning sequences
+                            const lstmUnits = parseInt(targetConfig.units) || 64;
+                            const lstmReturnSequences = targetConfig.returnSequences === 'true' || targetConfig.returnSequences === true;
+                            
+                            // Set output shape based on return_sequences setting
+                            if (lstmReturnSequences && sourceConfig.outputShape && sourceConfig.outputShape.length > 0) {
+                                outputShape = [sourceConfig.outputShape[0], lstmUnits];
+                            } else {
+                                outputShape = [lstmUnits];
+                            }
+                            
+                            // Calculate parameters if we have input shape
+                            if (sourceConfig.outputShape && sourceConfig.outputShape.length > 0) {
+                                // LSTM has 4 gates, each with its own weights and biases
+                                const inputFeatures = sourceConfig.outputShape[sourceConfig.outputShape.length - 1];
+                                const useBias = targetConfig.useBias !== 'false' && targetConfig.useBias !== false;
+                                
+                                // Formula: 4 * (input_features * units + units * units + units (bias))
+                                const inputParams = 4 * (inputFeatures * lstmUnits);
+                                const recurrentParams = 4 * (lstmUnits * lstmUnits);
+                                const biasParams = useBias ? 4 * lstmUnits : 0;
+                                
+                                parameters = inputParams + recurrentParams + biasParams;
+                                
+                                console.log(`LSTM parameter calculation:
+                                    Input features: ${inputFeatures}
+                                    Units: ${lstmUnits}
+                                    Gates: 4 (input, forget, cell, output)
+                                    Input weights: ${inputParams}
+                                    Recurrent weights: ${recurrentParams}
+                                    Bias: ${biasParams}
+                                    Total: ${parameters}`);
+                            }
+                            break;
+                            
+                        case 'gru':
+                            // Get units and check if returning sequences
+                            const gruUnits = parseInt(targetConfig.units) || 48;
+                            const gruReturnSequences = targetConfig.returnSequences === 'true' || targetConfig.returnSequences === true;
+                            
+                            // Set output shape based on return_sequences setting
+                            if (gruReturnSequences && sourceConfig.outputShape && sourceConfig.outputShape.length > 0) {
+                                outputShape = [sourceConfig.outputShape[0], gruUnits];
+                            } else {
+                                outputShape = [gruUnits];
+                            }
+                            
+                            // Calculate parameters if we have input shape
+                            if (sourceConfig.outputShape && sourceConfig.outputShape.length > 0) {
+                                // GRU has 3 gates, each with its own weights and biases
+                                const inputFeatures = sourceConfig.outputShape[sourceConfig.outputShape.length - 1];
+                                const useBias = targetConfig.useBias !== 'false' && targetConfig.useBias !== false;
+                                
+                                // Formula: 3 * (input_features * units + units * units + units (bias))
+                                const inputParams = 3 * (inputFeatures * gruUnits);
+                                const recurrentParams = 3 * (gruUnits * gruUnits);
+                                const biasParams = useBias ? 3 * gruUnits : 0;
+                                
+                                parameters = inputParams + recurrentParams + biasParams;
+                                
+                                console.log(`GRU parameter calculation:
+                                    Input features: ${inputFeatures}
+                                    Units: ${gruUnits}
+                                    Gates: 3 (update, reset, new)
+                                    Input weights: ${inputParams}
+                                    Recurrent weights: ${recurrentParams}
+                                    Bias: ${biasParams}
+                                    Total: ${parameters}`);
+                            }
+                            break;
+                            
                         case 'conv':
                             if (sourceConfig.outputShape && sourceConfig.outputShape.length >= 3) {
                                 // Very explicit type conversion - ensure all values are numbers

js/layer-editor.js

@@ -639,19 +639,123 @@
                     }
                     break;
                     
-                case 'linear':
-                    const linearUnits = parseInt(config.units) || 1;
+                case 'rnn':
+                    const rnnUnits = parseInt(config.units) || 32;
                     if (!manualOutputShape) {
-                        outputShape = [linearUnits];
+                        // Output shape depends on return_sequences
+                        // If return_sequences is true, output is [input_sequence_length, units]
+                        // If return_sequences is false, output is [units]
+                        const returnSequences = config.returnSequences === 'true' || config.returnSequences === true;
+                        if (returnSequences && inputShape && inputShape.length > 0) {
+                            // If we have an input shape, use the first dimension as sequence length
+                            outputShape = [inputShape[0], rnnUnits];
+                        } else {
+                            outputShape = [rnnUnits];
+                        }
                     }
-                    if (inputShape) {
-                        const inputSize = inputShape.reduce((a, b) => a * b, 1);
-                        const useBias = config.useBias !== 'false';
-                        parameters = inputSize * linearUnits + (useBias ? linearUnits : 0);
-                        console.log(`Linear layer params: ${inputSize} inputs × ${linearUnits} units + ${useBias ? linearUnits : 0} biases = ${parameters}`);
+                    if (inputShape && inputShape.length > 0) {
+                        // For RNN, parameters = (input_features * units + units * units + units)
+                        // Where:
+                        // - input_features * units: weights from input to hidden
+                        // - units * units: recurrent weights
+                        // - units: bias terms (if using bias)
+                        
+                        // Get input features (last dimension of input shape)
+                        const inputFeatures = inputShape[inputShape.length - 1];
+                        const useBias = config.useBias !== 'false' && config.useBias !== false;
+                        
+                        const inputToHiddenParams = inputFeatures * rnnUnits;
+                        const recurrentParams = rnnUnits * rnnUnits;
+                        const biasParams = useBias ? rnnUnits : 0;
+                        
+                        parameters = inputToHiddenParams + recurrentParams + biasParams;
+                        
+                        console.log(`RNN parameters calculation:
+                            Input features: ${inputFeatures}
+                            RNN units: ${rnnUnits}
+                            Input-to-hidden params: ${inputFeatures} * ${rnnUnits} = ${inputToHiddenParams}
+                            Recurrent params: ${rnnUnits} * ${rnnUnits} = ${recurrentParams}
+                            Bias params: ${biasParams}
+                            Total: ${parameters}`);
                     } else {
-                        console.log('No input shape available for linear layer parameter calculation');
-                        parameters = linearUnits; // Just biases if we don't know input size
+                        console.log('No input shape available for RNN parameter calculation');
+                        parameters = rnnUnits * 2; // Just a rough estimate if input shape is unknown
+                    }
+                    break;
+                    
+                case 'lstm':
+                    const lstmUnits = parseInt(config.units) || 64;
+                    if (!manualOutputShape) {
+                        // Output shape depends on return_sequences
+                        const returnSequences = config.returnSequences === 'true' || config.returnSequences === true;
+                        if (returnSequences && inputShape && inputShape.length > 0) {
+                            outputShape = [inputShape[0], lstmUnits];
+                        } else {
+                            outputShape = [lstmUnits];
+                        }
+                    }
+                    if (inputShape && inputShape.length > 0) {
+                        // For LSTM, we have 4 gates (input, forget, cell, output)
+                        // parameters = 4 * (input_features * units + units * units + units)
+                        
+                        const inputFeatures = inputShape[inputShape.length - 1];
+                        const useBias = config.useBias !== 'false' && config.useBias !== false;
+                        
+                        const inputToHiddenParams = 4 * (inputFeatures * lstmUnits);
+                        const recurrentParams = 4 * (lstmUnits * lstmUnits);
+                        const biasParams = useBias ? 4 * lstmUnits : 0;
+                        
+                        parameters = inputToHiddenParams + recurrentParams + biasParams;
+                        
+                        console.log(`LSTM parameters calculation:
+                            Input features: ${inputFeatures}
+                            LSTM units: ${lstmUnits}
+                            Gates: 4 (input, forget, cell, output)
+                            Input-to-hidden params: 4 * (${inputFeatures} * ${lstmUnits}) = ${inputToHiddenParams}
+                            Recurrent params: 4 * (${lstmUnits} * ${lstmUnits}) = ${recurrentParams}
+                            Bias params: ${biasParams}
+                            Total: ${parameters}`);
+                    } else {
+                        console.log('No input shape available for LSTM parameter calculation');
+                        parameters = lstmUnits * 8; // Rough estimate
+                    }
+                    break;
+                    
+                case 'gru':
+                    const gruUnits = parseInt(config.units) || 48;
+                    if (!manualOutputShape) {
+                        // Output shape depends on return_sequences
+                        const returnSequences = config.returnSequences === 'true' || config.returnSequences === true;
+                        if (returnSequences && inputShape && inputShape.length > 0) {
+                            outputShape = [inputShape[0], gruUnits];
+                        } else {
+                            outputShape = [gruUnits];
+                        }
+                    }
+                    if (inputShape && inputShape.length > 0) {
+                        // For GRU, we have 3 gates (update, reset, new)
+                        // parameters = 3 * (input_features * units + units * units + units)
+                        
+                        const inputFeatures = inputShape[inputShape.length - 1];
+                        const useBias = config.useBias !== 'false' && config.useBias !== false;
+                        
+                        const inputToHiddenParams = 3 * (inputFeatures * gruUnits);
+                        const recurrentParams = 3 * (gruUnits * gruUnits);
+                        const biasParams = useBias ? 3 * gruUnits : 0;
+                        
+                        parameters = inputToHiddenParams + recurrentParams + biasParams;
+                        
+                        console.log(`GRU parameters calculation:
+                            Input features: ${inputFeatures}
+                            GRU units: ${gruUnits}
+                            Gates: 3 (update, reset, new)
+                            Input-to-hidden params: 3 * (${inputFeatures} * ${gruUnits}) = ${inputToHiddenParams}
+                            Recurrent params: 3 * (${gruUnits} * ${gruUnits}) = ${recurrentParams}
+                            Bias params: ${biasParams}
+                            Total: ${parameters}`);
+                    } else {
+                        console.log('No input shape available for GRU parameter calculation');
+                        parameters = gruUnits * 6; // Rough estimate
                     }
                     break;
             }
@@ -680,8 +784,14 @@
             case 'input':
                 paramsDetails = `Shape: ${(config.shape || [28, 28, 1]).join('×')}`;
                 break;
-            case 'linear':
-                paramsDetails = `Units: ${config.units}<br>Use Bias: ${config.useBias !== 'false' ? 'Yes' : 'No'}`;
+            case 'rnn':
+                paramsDetails = `Units: ${config.units}<br>Return Sequences: ${config.returnSequences === 'true' ? 'Yes' : 'No'}`;
+                break;
+            case 'lstm':
+                paramsDetails = `Units: ${config.units}<br>Return Sequences: ${config.returnSequences === 'true' ? 'Yes' : 'No'}`;
+                break;
+            case 'gru':
+                paramsDetails = `Units: ${config.units}<br>Return Sequences: ${config.returnSequences === 'true' ? 'Yes' : 'No'}`;
                 break;
         }
         
@@ -750,7 +860,7 @@
         
         if (dimensionsDisplay && outputShape) {
             let dimensionsText = '';
-            if (nodeType === 'hidden' || nodeType === 'output' || nodeType === 'linear') {
+            if (nodeType === 'hidden' || nodeType === 'output' || nodeType === 'rnn' || nodeType === 'lstm' || nodeType === 'gru') {
                 dimensionsText = config.units || '';
             } else if (nodeType === 'conv' || nodeType === 'pool') {
                 if (Array.isArray(outputShape)) {

js/main.js

@@ -13,19 +13,36 @@ document.addEventListener('DOMContentLoaded', () => {
     document.body.appendChild(tooltip);
     
     // Initialize drag and drop functionality
-    initializeDragAndDrop();
+    if (typeof initializeDragAndDrop === 'function') {
+        initializeDragAndDrop();
+    } else {
+        console.warn('initializeDragAndDrop function not found');
+    }
     
     // Network configuration (from UI controls)
-    let networkConfig = {
-        learningRate: 0.01,
+    window.networkConfig = {
+        learningRate: 0.1,
         activation: 'relu',
         batchSize: 32,
-        epochs: 10
+        epochs: 10,
+        optimizer: 'sgd'
     };
     
+    // Make sure window.networkConfig is available globally for other scripts
+    if (!window.networkConfig) {
+        window.networkConfig = networkConfig;
+    }
+    
     // Initialize UI controls
     setupUIControls();
     
+    // Force activation function graph update
+    setTimeout(() => {
+        const activationType = document.getElementById('activation')?.value || 'relu';
+        console.log('Ensuring activation function graph is rendered:', activationType);
+        updateActivationFunctionGraph(activationType);
+    }, 200);
+    
     // Layer editor modal
     setupLayerEditor();
     
@@ -97,56 +114,120 @@ document.addEventListener('DOMContentLoaded', () => {
     
     // Setup UI controls and event listeners
     function setupUIControls() {
+        console.log('Setting up UI controls...');
+        
         // Learning rate slider
         const learningRateSlider = document.getElementById('learning-rate');
         const learningRateValue = document.getElementById('learning-rate-value');
         
         if (learningRateSlider && learningRateValue) {
-            learningRateSlider.value = networkConfig.learningRate;
-            learningRateValue.textContent = networkConfig.learningRate.toFixed(3);
+            // Set initial value - default to 0.1 if not set in networkConfig
+            window.networkConfig.learningRate = window.networkConfig.learningRate || 0.1;
+            learningRateSlider.value = window.networkConfig.learningRate;
+            learningRateValue.textContent = window.networkConfig.learningRate.toFixed(3);
             
             learningRateSlider.addEventListener('input', (e) => {
-                networkConfig.learningRate = parseFloat(e.target.value);
-                learningRateValue.textContent = networkConfig.learningRate.toFixed(3);
+                window.networkConfig.learningRate = parseFloat(e.target.value);
+                learningRateValue.textContent = window.networkConfig.learningRate.toFixed(3);
+                console.log(`Learning rate updated: ${window.networkConfig.learningRate}`);
+                
+                // Trigger network configuration update event
+                document.dispatchEvent(new CustomEvent('networkConfigUpdated', {
+                    detail: { 
+                        type: 'learningRate', 
+                        value: window.networkConfig.learningRate 
+                    }
+                }));
             });
+            
+            console.log('Learning rate slider initialized with value:', window.networkConfig.learningRate);
+        } else {
+            console.warn('Learning rate controls not found in the DOM');
         }
         
         // Activation function dropdown
         const activationSelect = document.getElementById('activation');
         if (activationSelect) {
-            activationSelect.value = networkConfig.activation;
+            // Set initial value - default to 'relu' if not set in networkConfig
+            window.networkConfig.activation = window.networkConfig.activation || 'relu';
+            activationSelect.value = window.networkConfig.activation;
             
             activationSelect.addEventListener('change', (e) => {
-                networkConfig.activation = e.target.value;
-                updateActivationFunctionGraph(networkConfig.activation);
+                window.networkConfig.activation = e.target.value;
+                console.log(`Activation function updated: ${window.networkConfig.activation}`);
+                
+                // Update activation function graph
+                updateActivationFunctionGraph(window.networkConfig.activation);
+                
+                // Trigger network configuration update event
+                document.dispatchEvent(new CustomEvent('networkConfigUpdated', {
+                    detail: { 
+                        type: 'activation', 
+                        value: window.networkConfig.activation 
+                    }
+                }));
             });
+            
+            console.log('Activation select initialized with value:', window.networkConfig.activation);
+            
+            // Initialize activation function graph with current value
+            updateActivationFunctionGraph(window.networkConfig.activation);
+        } else {
+            console.warn('Activation select not found in the DOM');
         }
         
-        // Initialize activation function graph
-        updateActivationFunctionGraph(networkConfig.activation);
-        
-        // Sample data event handlers
-        const sampleItems = document.querySelectorAll('.sample-item');
-        sampleItems.forEach(item => {
-            item.addEventListener('click', () => {
-                const sampleId = item.getAttribute('data-sample');
-                handleSampleSelection(sampleId);
+        // Optimizer dropdown
+        const optimizerSelect = document.getElementById('optimizer');
+        if (optimizerSelect) {
+            // Set initial value - default to 'sgd' if not set in networkConfig
+            window.networkConfig.optimizer = window.networkConfig.optimizer || 'sgd';
+            optimizerSelect.value = window.networkConfig.optimizer;
+            
+            optimizerSelect.addEventListener('change', (e) => {
+                window.networkConfig.optimizer = e.target.value;
+                console.log(`Optimizer updated: ${window.networkConfig.optimizer}`);
+                
+                // Trigger network configuration update event
+                document.dispatchEvent(new CustomEvent('networkConfigUpdated', {
+                    detail: { 
+                        type: 'optimizer', 
+                        value: window.networkConfig.optimizer 
+                    }
+                }));
             });
-        });
+            
+            console.log('Optimizer select initialized with value:', window.networkConfig.optimizer);
+        } else {
+            console.warn('Optimizer select not found in the DOM');
+        }
         
         // Button event listeners
         const runButton = document.getElementById('run-network');
         if (runButton) {
-            runButton.addEventListener('click', runNetwork);
+            runButton.addEventListener('click', () => {
+                console.log('Run network button clicked');
+                runNetwork();
+            });
+            console.log('Run network button initialized');
+        } else {
+            console.warn('Run network button not found in the DOM');
         }
         
         const clearButton = document.getElementById('clear-canvas');
         if (clearButton) {
-            clearButton.addEventListener('click', clearCanvas);
+            clearButton.addEventListener('click', () => {
+                console.log('Clear canvas button clicked');
+                clearCanvas();
+            });
+            console.log('Clear canvas button initialized');
+        } else {
+            console.warn('Clear canvas button not found in the DOM');
         }
         
         // Modal handlers
         setupModals();
+        
+        console.log('UI controls setup complete');
     }
     
     // Setup modal handlers
@@ -1244,192 +1325,296 @@ document.addEventListener('DOMContentLoaded', () => {
     
     // Function to run the neural network simulation
     function runNetwork() {
-        console.log('Running neural network simulation with config:', networkConfig);
+        console.log('Running neural network simulation with config:', window.networkConfig);
         
-        // Get the current network architecture
-        const networkLayers = window.dragDrop.getNetworkArchitecture();
+        // Get the current network architecture if possible
+        let networkLayers = { layers: [], connections: [] };
+        
+        if (window.dragDrop && typeof window.dragDrop.getNetworkArchitecture === 'function') {
+            try {
+                networkLayers = window.dragDrop.getNetworkArchitecture();
+                console.log('Network architecture retrieved:', networkLayers);
+            } catch (error) {
+                console.error('Error getting network architecture:', error);
+            }
+        } else {
+            console.warn('dragDrop.getNetworkArchitecture is not available, using fallback');
+            
+            // Fallback: Get nodes and connections manually
+            const canvas = document.getElementById('network-canvas');
+            if (canvas) {
+                const nodes = canvas.querySelectorAll('.canvas-node');
+                const connections = canvas.querySelectorAll('.connection');
+                
+                if (nodes.length === 0) {
+                    alert('Please add some nodes to the network first!');
+                    return;
+                }
+                
+                // Just animate what's visible on the canvas
+                console.log(`Found ${nodes.length} nodes and ${connections.length} connections on canvas`);
+            }
+        }
         
         // Check if we have a valid network
         if (networkLayers.layers.length === 0) {
-            alert('Please add some nodes to the network first!');
-            return;
+            // Check for nodes on the canvas directly
+            const canvas = document.getElementById('network-canvas');
+            const nodes = canvas ? canvas.querySelectorAll('.canvas-node') : [];
+            
+            if (nodes.length === 0) {
+                alert('Please add some nodes to the network first!');
+                return;
+            }
         }
         
-        // Validate the network
-        const validationResult = window.neuralNetwork.validateNetwork(
-            networkLayers.layers,
-            networkLayers.connections
-        );
+        // Validate the network if possible
+        let validationResult = { valid: true, errors: [] };
         
-        if (!validationResult.valid) {
-            alert('Network is not valid: ' + validationResult.errors.join('\n'));
-            return;
+        if (window.neuralNetwork && typeof window.neuralNetwork.validateNetwork === 'function') {
+            try {
+                validationResult = window.neuralNetwork.validateNetwork(
+                    networkLayers.layers,
+                    networkLayers.connections
+                );
+                
+                if (!validationResult.valid) {
+                    alert('Network is not valid: ' + validationResult.errors.join('\n'));
+                    return;
+                }
+            } catch (error) {
+                console.error('Error validating network:', error);
+                // Continue anyway since we'll just animate
+            }
+        } else {
+            console.warn('neuralNetwork.validateNetwork is not available, skipping validation');
         }
         
         // Add animation class to all nodes
-        document.querySelectorAll('.canvas-node').forEach(node => {
+        const nodes = document.querySelectorAll('.canvas-node');
+        nodes.forEach(node => {
             node.classList.add('highlight-pulse');
+            
+            // Add a delay to remove the animation class
+            setTimeout(() => {
+                node.classList.remove('highlight-pulse');
+            }, 1500);
         });
         
         // Animate connections to show data flow
-        document.querySelectorAll('.connection').forEach((connection, index) => {
+        document.querySelectorAll('.connection').forEach((conn, index) => {
+            // Apply sequential animation to show data flow direction
             setTimeout(() => {
-                connection.style.background = 'linear-gradient(90deg, var(--primary-color), var(--accent-color))';
+                conn.style.transition = 'box-shadow 0.3s ease-in-out';
+                conn.style.boxShadow = '0 0 15px rgba(52, 152, 219, 0.8)';
                 
-                // Reset after animation
+                // Add a delay to remove the highlight
                 setTimeout(() => {
-                    connection.style.background = '';
-                }, 800);
-            }, 300 * index);
+                    conn.style.boxShadow = '0 0 8px rgba(52, 152, 219, 0.5)';
+                }, 600);
+            }, index * 150); // Stagger the animations
         });
         
-        // Simulate training
-        simulateTraining();
+        // Update training progress visualization
+        simulateTrainingProgress();
         
-        // Reset animations after completion
-        setTimeout(() => {
-            document.querySelectorAll('.canvas-node').forEach(node => {
-                node.classList.remove('highlight-pulse');
-            });
-        }, 3000);
+        console.log('Network animation complete');
     }
     
-    // Simulate training progress
-    function simulateTraining() {
+    // Simulate training progress for visualization
+    function simulateTrainingProgress() {
         const progressBar = document.querySelector('.progress-bar');
         const lossValue = document.getElementById('loss-value');
         const accuracyValue = document.getElementById('accuracy-value');
         
-        if (!progressBar || !lossValue || !accuracyValue) return;
-        
-        // Reset progress
-        progressBar.style.width = '0%';
-        lossValue.textContent = '2.3021';
-        accuracyValue.textContent = '0.12';
-        
-        // Simulate progress over time
-        let progress = 0;
-        let loss = 2.3021;
-        let accuracy = 0.12;
-        
-        const interval = setInterval(() => {
-            progress += 10;
-            loss *= 0.85; // Decrease loss over time
-            accuracy = Math.min(0.99, accuracy * 1.2); // Increase accuracy over time
+        if (progressBar && lossValue && accuracyValue) {
+            // Reset progress bar
+            progressBar.style.width = '0%';
+            lossValue.textContent = '1.0000';
+            accuracyValue.textContent = '0%';
             
-            progressBar.style.width = `${progress}%`;
-            lossValue.textContent = loss.toFixed(4);
-            accuracyValue.textContent = accuracy.toFixed(2);
+            // Simulate training progress with animation
+            let progress = 0;
+            let loss = 1.0;
+            let accuracy = 0.0;
             
-            if (progress >= 100) {
-                clearInterval(interval);
-            }
-        }, 300);
+            const interval = setInterval(() => {
+                progress += 2;
+                loss = Math.max(0.05, loss * 0.95);
+                accuracy = Math.min(99, accuracy + 2);
+                
+                progressBar.style.width = `${progress}%`;
+                lossValue.textContent = loss.toFixed(4);
+                accuracyValue.textContent = `${accuracy.toFixed(1)}%`;
+                
+                if (progress >= 100) {
+                    clearInterval(interval);
+                    
+                    // Final values
+                    lossValue.textContent = '0.0342';
+                    accuracyValue.textContent = '98.7%';
+                    
+                    console.log('Training simulation complete');
+                }
+            }, 50);
+        }
     }
     
     // Function to clear all nodes from the canvas
     function clearCanvas() {
-        if (window.dragDrop && typeof window.dragDrop.clearAllNodes === 'function') {
-            window.dragDrop.clearAllNodes();
+        // Show confirmation dialog
+        if (confirm('Are you sure you want to clear the canvas? This will remove all nodes and connections.')) {
+            // Use the drag-drop module's clear function if available
+            if (window.dragDrop && typeof window.dragDrop.clearAllNodes === 'function') {
+                window.dragDrop.clearAllNodes();
+            } else {
+                // Fallback: manually remove all canvas nodes
+                const canvas = document.getElementById('network-canvas');
+                const nodes = canvas.querySelectorAll('.canvas-node');
+                const connections = canvas.querySelectorAll('.connection');
+                
+                // Remove all connections
+                connections.forEach(conn => conn.remove());
+                
+                // Remove all nodes
+                nodes.forEach(node => node.remove());
+                
+                // Add canvas hint
+                if (canvas.querySelector('.canvas-hint') === null) {
+                    const hint = document.createElement('div');
+                    hint.className = 'canvas-hint';
+                    hint.innerHTML = `
+                        <strong>Build Your Neural Network</strong>
+                        Drag components from the left panel and drop them here.
+                        <br>Connect them by dragging from output (right) to input (left) ports.
+                    `;
+                    canvas.appendChild(hint);
+                }
+                
+                console.log('Canvas cleared manually');
+            }
+            
+            // Reset progress indicators
+            const progressBar = document.querySelector('.progress-bar');
+            const lossValue = document.getElementById('loss-value');
+            const accuracyValue = document.getElementById('accuracy-value');
+            
+            if (progressBar) progressBar.style.width = '0%';
+            if (lossValue) lossValue.textContent = '-';
+            if (accuracyValue) accuracyValue.textContent = '-';
+            
+            console.log('Canvas cleared and progress indicators reset');
         }
-        
-        // Reset progress indicators
-        const progressBar = document.querySelector('.progress-bar');
-        const lossValue = document.getElementById('loss-value');
-        const accuracyValue = document.getElementById('accuracy-value');
-        
-        if (progressBar) progressBar.style.width = '0%';
-        if (lossValue) lossValue.textContent = '-';
-        if (accuracyValue) accuracyValue.textContent = '-';
     }
     
     // Update activation function graph
     function updateActivationFunctionGraph(activationType) {
-        const activationGraph = document.querySelector('.activation-function');
+        const activationGraph = document.querySelector('.activation-graph');
         if (!activationGraph) return;
         
-        // Clear previous graph
-        let canvas = activationGraph.querySelector('canvas');
-        if (!canvas) {
-            canvas = document.createElement('canvas');
-            canvas.width = 200;
-            canvas.height = 100;
-            activationGraph.appendChild(canvas);
-        }
-        
-        const ctx = canvas.getContext('2d');
+        // Get SVG element
+        const svg = activationGraph.querySelector('.activation-curve');
+        if (!svg) return;
         
-        // Clear canvas
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        // Clear previous paths
+        while (svg.firstChild) {
+            svg.removeChild(svg.firstChild);
+        }
         
-        // Set background
-        ctx.fillStyle = '#f8f9fa';
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        // Create path for the activation function
+        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        path.setAttribute('stroke', '#3498db');
+        path.setAttribute('stroke-width', '2');
+        path.setAttribute('fill', 'none');
         
         // Draw axes
-        ctx.strokeStyle = '#ccc';
-        ctx.lineWidth = 1;
-        ctx.beginPath();
-        ctx.moveTo(0, canvas.height / 2);
-        ctx.lineTo(canvas.width, canvas.height / 2);
-        ctx.moveTo(canvas.width / 2, 0);
-        ctx.lineTo(canvas.width / 2, canvas.height);
-        ctx.stroke();
-        
-        // Draw function
-        ctx.strokeStyle = 'var(--primary-color)';
-        ctx.lineWidth = 2;
-        ctx.beginPath();
+        const xAxis = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+        xAxis.setAttribute('x1', '0');
+        xAxis.setAttribute('y1', '50');
+        xAxis.setAttribute('x2', '100');
+        xAxis.setAttribute('y2', '50');
+        xAxis.setAttribute('stroke', '#ccc');
+        xAxis.setAttribute('stroke-width', '1');
+        
+        const yAxis = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+        yAxis.setAttribute('x1', '50');
+        yAxis.setAttribute('y1', '0');
+        yAxis.setAttribute('x2', '50');
+        yAxis.setAttribute('y2', '100');
+        yAxis.setAttribute('stroke', '#ccc');
+        yAxis.setAttribute('stroke-width', '1');
+        
+        // Add axes to SVG
+        svg.appendChild(xAxis);
+        svg.appendChild(yAxis);
+        
+        // Calculate path based on activation type
+        let pathData = '';
         
         switch(activationType) {
             case 'relu':
-                ctx.moveTo(0, canvas.height / 2);
-                ctx.lineTo(canvas.width / 2, canvas.height / 2);
-                ctx.lineTo(canvas.width, 0);
+                pathData = 'M0,50 L50,50 L100,0';
                 break;
                 
             case 'sigmoid':
-                for (let x = 0; x < canvas.width; x++) {
-                    const normalizedX = (x / canvas.width - 0.5) * 10;
-                    const sigmoidY = 1 / (1 + Math.exp(-normalizedX));
-                    const y = canvas.height - sigmoidY * canvas.height;
-                    if (x === 0) ctx.moveTo(x, y);
-                    else ctx.lineTo(x, y);
-                }
+                pathData = generateSigmoidPath();
                 break;
                 
             case 'tanh':
-                for (let x = 0; x < canvas.width; x++) {
-                    const normalizedX = (x / canvas.width - 0.5) * 6;
-                    const tanhY = Math.tanh(normalizedX);
-                    const y = canvas.height / 2 - tanhY * canvas.height / 2;
-                    if (x === 0) ctx.moveTo(x, y);
-                    else ctx.lineTo(x, y);
-                }
-                break;
-                
-            case 'softmax':
-                // Just a representative curve for softmax
-                ctx.moveTo(0, canvas.height * 0.8);
-                ctx.bezierCurveTo(
-                    canvas.width * 0.3, canvas.height * 0.7,
-                    canvas.width * 0.6, canvas.height * 0.3,
-                    canvas.width, canvas.height * 0.2
-                );
+                pathData = generateTanhPath();
                 break;
                 
             default: // Linear
-                ctx.moveTo(0, canvas.height * 0.8);
-                ctx.lineTo(canvas.width, canvas.height * 0.2);
+                pathData = 'M0,80 L100,20';
         }
         
-        ctx.stroke();
+        path.setAttribute('d', pathData);
+        svg.appendChild(path);
         
         // Add label
-        ctx.fillStyle = 'var(--text-color)';
-        ctx.font = '12px Arial';
-        ctx.textAlign = 'center';
-        ctx.fillText(activationType, canvas.width / 2, canvas.height - 10);
+        const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+        label.setAttribute('x', '50');
+        label.setAttribute('y', '95');
+        label.setAttribute('text-anchor', 'middle');
+        label.setAttribute('font-size', '10');
+        label.setAttribute('fill', '#333');
+        label.textContent = activationType.charAt(0).toUpperCase() + activationType.slice(1);
+        
+        svg.appendChild(label);
+        
+        console.log(`Activation function graph updated: ${activationType}`);
+    }
+    
+    // Generate path data for sigmoid function
+    function generateSigmoidPath() {
+        let pathData = '';
+        
+        for (let x = 0; x <= 100; x += 2) {
+            const normalizedX = (x / 100 - 0.5) * 10;
+            const sigmoidY = 1 / (1 + Math.exp(-normalizedX));
+            const y = 100 - sigmoidY * 100;
+            
+            if (x === 0) pathData += `M${x},${y}`;
+            else pathData += ` L${x},${y}`;
+        }
+        
+        return pathData;
+    }
+    
+    // Generate path data for tanh function
+    function generateTanhPath() {
+        let pathData = '';
+        
+        for (let x = 0; x <= 100; x += 2) {
+            const normalizedX = (x / 100 - 0.5) * 6;
+            const tanhY = Math.tanh(normalizedX);
+            const y = 50 - tanhY * 50;
+            
+            if (x === 0) pathData += `M${x},${y}`;
+            else pathData += ` L${x},${y}`;
+        }
+        
+        return pathData;
     }
     
     // Setup node hover effects for tooltips