Initial commit of Neural Network Playground with improved node display and Linear Regression support

README.md

@@ -1,9 +1,46 @@
----
-title: Neural Network Playground
-emoji: 🌖
-colorFrom: pink
-colorTo: blue
-sdk: static
-pinned: false
----
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Neural Network Playground
+
+An interactive web-based application for visualizing and experimenting with neural network architectures.
+
+## Features
+
+- **Drag-and-Drop Interface**: Easily create neural network architectures by dragging and dropping different layer types
+- **Multiple Layer Types**: Support for Input, Hidden, Output, Convolutional, and Pooling layers
+- **Dynamic Connections**: Create connections between layers to define your network topology
+- **Visual Styling**: Beautiful gradient-based styling for different layer types with animations
+- **Layer Properties**: View and edit detailed properties for each layer
+- **Network Validation**: Automatic validation of network architectures
+- **Training Simulation**: Visual simulation of the training process
+- **Responsive Design**: Works on desktop and mobile devices
+
+## Getting Started
+
+1. Clone this repository
+2. Open `index.html` in your browser or use a local server:
+   ```
+   python -m http.server
+   ```
+3. Visit `http://localhost:8000` in your browser
+
+## How to Use
+
+1. Drag layer components from the left panel onto the canvas
+2. Connect layers by dragging from output ports (right side) to input ports (left side)
+3. Click on a layer to view its properties
+4. Edit layer properties by clicking the edit button
+5. Click "Run Network" to simulate training
+
+## Technologies Used
+
+- HTML5
+- CSS3 (with animations and gradients)
+- JavaScript (vanilla)
+- No external libraries required!
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions, issues, and feature requests are welcome! 

css/styles.css

@@ -32,6 +32,8 @@
     --pool-node-color-1: #e74c3c;
     --pool-node-color-2: #c0392b;
     --node-glow: 0 0 15px rgba(255, 255, 255, 0.8);
+    --linear-node-color-1: #1abc9c;
+    --linear-node-color-2: #16a085;
 }
 
 body {
@@ -157,6 +159,12 @@ header h1 {
     color: white;
 }
 
+.node-item[data-type="linear"] {
+    background-image: linear-gradient(135deg, var(--linear-node-color-1), var(--linear-node-color-2));
+    border-bottom: 3px solid var(--linear-node-color-2);
+    box-shadow: var(--shadow-sm);
+}
+
 .node-icon {
     width: 24px;
     height: 24px;
@@ -251,6 +259,12 @@ header h1 {
     color: white;
 }
 
+.linear-node {
+    background-image: linear-gradient(135deg, var(--linear-node-color-1), var(--linear-node-color-2));
+    position: relative;
+    border-radius: var(--border-radius);
+}
+
 .controls {
     margin-top: 2rem;
 }
@@ -385,21 +399,66 @@ footer p {
 .canvas-node {
     position: absolute;
     width: 180px;
-    padding: 0.8rem;
-    border-radius: var(--border-radius);
-    color: white;
+    min-height: 120px;
+    border-radius: 8px;
     box-shadow: var(--shadow-md);
-    z-index: 10;
-    transition: all 0.3s ease;
+    padding: 0;
     cursor: move;
-    background-size: 300% 300%;
-    animation: gradientShift 8s ease infinite;
+    transition: all 0.2s ease-in-out;
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+}
+
+.canvas-node .node-header {
+    padding: 8px 12px;
+    font-weight: bold;
+    border-radius: 8px 8px 0 0;
+    color: white;
+    background-color: rgba(0, 0, 0, 0.2);
+    text-align: center;
+    font-size: 14px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.canvas-node .node-content {
+    padding: 8px;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.shape-info {
+    background-color: rgba(255, 255, 255, 0.15);
+    border-radius: 4px;
+    padding: 6px;
+}
+
+.shape-row {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    color: white;
+    padding: 2px 0;
 }
 
-@keyframes gradientShift {
-    0% { background-position: 0% 50%; }
-    50% { background-position: 100% 50%; }
-    100% { background-position: 0% 50%; }
+.shape-label {
+    font-weight: bold;
+}
+
+.params-section {
+    background-color: rgba(255, 255, 255, 0.15);
+    border-radius: 4px;
+    padding: 6px;
+}
+
+.params-display {
+    font-family: monospace;
+    font-size: 11px;
+    color: white;
+    margin: 0;
+    white-space: pre-wrap;
 }
 
 .canvas-node.dragging {
@@ -434,6 +493,11 @@ footer p {
     border: 2px solid var(--pool-node-color-1);
 }
 
+.canvas-node[data-type="linear"] {
+    background-image: linear-gradient(135deg, var(--linear-node-color-1), var(--linear-node-color-2));
+    border: 2px solid var(--linear-node-color-2);
+}
+
 .canvas-node .node-title {
     font-weight: 600;
     font-size: 0.9rem;
@@ -1222,4 +1286,48 @@ select {
     100% {
         box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
     }
+}
+
+/* Style for connection ports */
+.port {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: white;
+    border: 2px solid rgba(0, 0, 0, 0.3);
+    z-index: 3;
+    transition: all 0.2s ease;
+}
+
+.port:hover {
+    transform: scale(1.5);
+    box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
+}
+
+.input-port {
+    top: 50%;
+    left: -6px;
+    transform: translateY(-50%);
+}
+
+.output-port {
+    top: 50%;
+    right: -6px;
+    transform: translateY(-50%);
+}
+
+/* Connection line styles */
+.connection-line {
+    stroke: rgba(255, 255, 255, 0.7);
+    stroke-width: 2;
+    fill: none;
+    pointer-events: none;
+}
+
+.connection-line-temp {
+    stroke: rgba(255, 255, 255, 0.5);
+    stroke-dasharray: 5, 5;
+    stroke-width: 2;
+    fill: none;
 } 

index.html

@@ -39,6 +39,9 @@
                     <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>
                 </div>
                 
                 <h3 class="section-title">Sample Data</h3>

js/drag-drop.js

@@ -76,107 +76,137 @@ function initializeDragAndDrop() {
             canvasNode.style.left = `${x}px`;
             canvasNode.style.top = `${y}px`;
             
-            // Set node content based on type
-            let nodeName, dimensions, units;
+            // Get default config for this node type
+            const nodeConfig = window.neuralNetwork.createNodeConfig(nodeType);
+            
+            // Create node content with input and output shape information
+            let nodeName, inputShape, outputShape, parameters;
             
             switch(nodeType) {
                 case 'input':
                     nodeName = 'Input Layer';
-                    dimensions = '1 × 28 × 28';
+                    inputShape = 'N/A';
+                    outputShape = '[' + nodeConfig.shape.join(' × ') + ']';
+                    parameters = nodeConfig.parameters;
                     break;
                 case 'hidden':
-                    // Customize if it's the first hidden layer
                     const hiddenCount = document.querySelectorAll('.canvas-node[data-type="hidden"]').length;
-                    units = hiddenCount === 0 ? 128 : 64;
+                    nodeConfig.units = hiddenCount === 0 ? 128 : 64;
                     nodeName = `Hidden Layer ${hiddenCount + 1}`;
-                    dimensions = `${units}`;
+                    // Input shape will be updated when connections are made
+                    inputShape = 'Connect input';
+                    outputShape = `[${nodeConfig.units}]`;
+                    parameters = 'Connect input to calculate';
                     break;
                 case 'output':
                     nodeName = 'Output Layer';
-                    dimensions = '10';
+                    inputShape = 'Connect input';
+                    outputShape = `[${nodeConfig.units}]`;
+                    parameters = 'Connect input to calculate';
                     break;
                 case 'conv':
                     const convCount = document.querySelectorAll('.canvas-node[data-type="conv"]').length;
-                    const filters = 32 * (convCount + 1);
+                    nodeConfig.filters = 32 * (convCount + 1);
                     nodeName = `Conv2D ${convCount + 1}`;
-                    dimensions = `${filters} × 26 × 26`;
+                    inputShape = 'Connect input';
+                    outputShape = 'Depends on input';
+                    // Create parameter string
+                    parameters = `In: ?, Out: ${nodeConfig.filters}\nKernel: ${nodeConfig.kernelSize.join('×')}\nStride: ${nodeConfig.strides.join('×')}\nPadding: ${nodeConfig.padding}`;
                     break;
                 case 'pool':
                     const poolCount = document.querySelectorAll('.canvas-node[data-type="pool"]').length;
-                    nodeName = `MaxPool ${poolCount + 1}`;
-                    dimensions = '32 × 13 × 13';
+                    nodeName = `Pooling ${poolCount + 1}`;
+                    inputShape = 'Connect input';
+                    outputShape = 'Depends on input';
+                    parameters = `Pool size: ${nodeConfig.poolSize.join('×')}\nStride: ${nodeConfig.strides.join('×')}\nPadding: ${nodeConfig.padding}`;
                     break;
                 default:
-                    nodeName = 'Neural Node';
-                    dimensions = '64';
+                    nodeName = 'Unknown Layer';
+                    inputShape = 'N/A';
+                    outputShape = 'N/A';
+                    parameters = 'N/A';
             }
             
-            canvasNode.innerHTML = `
-                <div class="node-title">${nodeName}</div>
-                <div class="node-id">${layerId}</div>
-                <div class="node-dimensions">${dimensions}</div>
-                <div class="node-port port-in"></div>
-                <div class="node-port port-out"></div>
-                <div class="node-controls">
-                    <button class="node-edit-btn" title="Edit layer parameters"><i class="icon">⚙️</i></button>
-                    <button class="node-delete-btn" title="Delete layer"><i class="icon">🗑️</i></button>
-                </div>
+            // Create node header
+            const nodeHeader = document.createElement('div');
+            nodeHeader.className = 'node-header';
+            nodeHeader.textContent = nodeName;
+            
+            // Create node content
+            const nodeContent = document.createElement('div');
+            nodeContent.className = 'node-content';
+            
+            // Add shape information in a structured way
+            const shapeInfo = document.createElement('div');
+            shapeInfo.className = 'shape-info';
+            shapeInfo.innerHTML = `
+                <div class="shape-row"><span class="shape-label">Input:</span> <span class="input-shape">${inputShape}</span></div>
+                <div class="shape-row"><span class="shape-label">Output:</span> <span class="output-shape">${outputShape}</span></div>
             `;
             
-            // Store dimensions for hover display
-            canvasNode.setAttribute('data-dimensions', dimensions);
-            canvasNode.setAttribute('data-name', nodeName);
+            // Add parameters section
+            const paramsSection = document.createElement('div');
+            paramsSection.className = 'params-section';
+            paramsSection.innerHTML = `<pre class="params-display">${parameters}</pre>`;
             
-            // Add to network layers
-            const layerInfo = {
-                id: layerId,
-                type: nodeType,
-                name: nodeName,
-                dimensions: dimensions,
-                position: { x, y }
-            };
+            // Add connection ports
+            const inputPort = document.createElement('div');
+            inputPort.className = 'port input-port';
+            inputPort.setAttribute('data-port-type', 'input');
             
-            networkLayers.layers.push(layerInfo);
+            const outputPort = document.createElement('div');
+            outputPort.className = 'port output-port';
+            outputPort.setAttribute('data-port-type', 'output');
             
-            // Add to canvas
-            canvas.appendChild(canvasNode);
+            // Assemble the node
+            nodeContent.appendChild(shapeInfo);
+            nodeContent.appendChild(paramsSection);
             
-            // Add events for moving nodes on the canvas
-            canvasNode.addEventListener('mousedown', startDrag);
+            canvasNode.appendChild(nodeHeader);
+            canvasNode.appendChild(nodeContent);
+            canvasNode.appendChild(inputPort);
+            canvasNode.appendChild(outputPort);
             
-            // Connection handling
-            const portIn = canvasNode.querySelector('.port-in');
-            const portOut = canvasNode.querySelector('.port-out');
+            // Add node to the canvas
+            canvas.appendChild(canvasNode);
             
-            portOut.addEventListener('mousedown', (e) => {
+            // Store node configuration
+            canvasNode.layerConfig = nodeConfig;
+            
+            // Add event listeners for node manipulation
+            canvasNode.addEventListener('mousedown', startDrag);
+            inputPort.addEventListener('mousedown', (e) => {
+                e.stopPropagation();
+            });
+            outputPort.addEventListener('mousedown', (e) => {
                 e.stopPropagation();
                 startConnection(canvasNode, e);
             });
             
-            portIn.addEventListener('mouseup', (e) => {
-                e.stopPropagation();
-                endConnection(canvasNode);
+            // Double-click to edit node properties
+            canvasNode.addEventListener('dblclick', () => {
+                openLayerEditor(canvasNode);
             });
             
-            // Button event listeners
-            const editBtn = canvasNode.querySelector('.node-edit-btn');
-            if (editBtn) {
-                editBtn.addEventListener('click', (e) => {
-                    e.stopPropagation();
-                    openLayerEditor(canvasNode);
-                });
-            }
+            // Right-click to delete
+            canvasNode.addEventListener('contextmenu', (e) => {
+                e.preventDefault();
+                deleteNode(canvasNode);
+            });
             
-            const deleteBtn = canvasNode.querySelector('.node-delete-btn');
-            if (deleteBtn) {
-                deleteBtn.addEventListener('click', (e) => {
-                    e.stopPropagation();
-                    deleteNode(canvasNode);
-                });
-            }
+            // Add to network layers for architecture building
+            networkLayers.layers.push({
+                id: layerId,
+                type: nodeType,
+                config: nodeConfig
+            });
             
-            // Update node parameters (for sequential model validation)
-            updateLayerConnectivity();
+            // Notify about network changes
+            document.dispatchEvent(new CustomEvent('networkUpdated', {
+                detail: networkLayers
+            }));
+            
+            updateConnections();
         }
     }
     
@@ -448,87 +478,269 @@ function initializeDragAndDrop() {
     
     // End creating a connection
     function endConnection(targetNode) {
-        if (!isConnecting) return;
-        
-        // Check if a valid node port was targeted
-        if (targetNode && targetNode.classList && targetNode.classList.contains('canvas-node')) {
-            // Get node IDs for the connection
-            const sourceId = startNode.getAttribute('data-id');
-            const targetId = targetNode.getAttribute('data-id');
-            
-            // Check if connection already exists
-            const exists = networkLayers.connections.some(conn => 
-                conn.source === sourceId && conn.target === targetId
-            );
-            
-            if (!exists) {
-                // Create permanent connection
-                const connection = connectionLine.cloneNode(true);
-                connection.classList.remove('temp-connection');
-                connection.setAttribute('data-source', sourceId);
-                connection.setAttribute('data-target', targetId);
-                canvas.appendChild(connection);
-                
-                // Add to connections array
-                networkLayers.connections.push({
-                    source: sourceId,
-                    target: targetId,
-                    sourceType: startNode.getAttribute('data-type'),
-                    targetType: targetNode.getAttribute('data-type')
-                });
-                
-                // Update parameters for model consistency
-                updateLayerConnectivity();
-                
-                console.log(`Connected ${sourceId} to ${targetId}`);
-            }
-        }
-        
-        // Remove temporary line
-        if (connectionLine && connectionLine.parentNode) {
-            connectionLine.parentNode.removeChild(connectionLine);
+        if (!isConnecting || !connectionLine || !startNode) return;
+        
+        const sourceType = startNode.getAttribute('data-type');
+        const targetType = targetNode.getAttribute('data-type');
+        const sourceId = startNode.getAttribute('data-id');
+        const targetId = targetNode.getAttribute('data-id');
+        
+        // Check if this is a valid connection
+        if (isValidConnection(sourceType, targetType, sourceId, targetId)) {
+            // Create a permanent SVG connection
+            const canvas = document.getElementById('network-canvas');
+            const svgContainer = document.querySelector('#network-canvas .svg-container') || createSVGContainer();
+            
+            // Get positions for source and target nodes
+            const sourceRect = startNode.getBoundingClientRect();
+            const targetRect = targetNode.getBoundingClientRect();
+            const canvasRect = canvas.getBoundingClientRect();
+            
+            // Calculate port positions
+            const sourcePort = startNode.querySelector('.output-port');
+            const targetPort = targetNode.querySelector('.input-port');
+            
+            const sourcePortRect = sourcePort.getBoundingClientRect();
+            const targetPortRect = targetPort.getBoundingClientRect();
+            
+            const startX = sourcePortRect.left + (sourcePortRect.width / 2) - canvasRect.left;
+            const startY = sourcePortRect.top + (sourcePortRect.height / 2) - canvasRect.top;
+            const endX = targetPortRect.left + (targetPortRect.width / 2) - canvasRect.left;
+            const endY = targetPortRect.top + (targetPortRect.height / 2) - canvasRect.top;
+            
+            // Create the connection
+            const pathId = `connection-${sourceId}-${targetId}`;
+            const connectionPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            connectionPath.setAttribute('id', pathId);
+            connectionPath.setAttribute('class', 'connection-line');
+            
+            // Curved path (bezier)
+            const dx = Math.abs(endX - startX) * 0.7;
+            const path = `M ${startX} ${startY} C ${startX + dx} ${startY}, ${endX - dx} ${endY}, ${endX} ${endY}`;
+            connectionPath.setAttribute('d', path);
+            
+            // Add connection to SVG container
+            svgContainer.appendChild(connectionPath);
+            
+            // Add to connections
+            networkLayers.connections.push({
+                id: pathId,
+                source: sourceId,
+                target: targetId,
+                sourceType: sourceType,
+                targetType: targetType
+            });
+            
+            // Update input and output shapes
+            updateNodeShapes(sourceId, targetId);
+            
+            // Notify about connection
+            document.dispatchEvent(new CustomEvent('networkUpdated', {
+                detail: networkLayers
+            }));
         }
         
-        // Remove port highlights
+        // Clean up
         removePortHighlights();
-        
-        // Reset variables
+        if (connectionLine) {
+            connectionLine.remove();
+            connectionLine = null;
+        }
         isConnecting = false;
         startNode = null;
-        connectionLine = null;
-        
-        // Remove event listeners
-        document.removeEventListener('mousemove', drawConnection);
-        document.removeEventListener('mouseup', cancelConnection);
     }
     
-    // Update layer connectivity to ensure model consistency
-    function updateLayerConnectivity() {
-        // This is where we'd propagate input/output shapes between connected layers
-        // For now we'll just highlight connected nodes
-        
-        // Reset all nodes
-        document.querySelectorAll('.canvas-node').forEach(node => {
-            node.classList.remove('connected-node');
-        });
-        
-        // Mark all nodes that have connections
-        const connectedNodeIds = new Set();
-        networkLayers.connections.forEach(conn => {
-            connectedNodeIds.add(conn.source);
-            connectedNodeIds.add(conn.target);
-        });
-        
-        connectedNodeIds.forEach(id => {
-            const node = document.querySelector(`.canvas-node[data-id="${id}"]`);
-            if (node) {
-                node.classList.add('connected-node');
+    // Update input and output shapes when connections are made
+    function updateNodeShapes(sourceId, targetId) {
+        const sourceNode = document.querySelector(`.canvas-node[data-id="${sourceId}"]`);
+        const targetNode = document.querySelector(`.canvas-node[data-id="${targetId}"]`);
+        
+        if (sourceNode && targetNode) {
+            const sourceConfig = sourceNode.layerConfig;
+            const targetConfig = targetNode.layerConfig;
+            
+            // Update the target's input shape based on the source's output shape
+            if (sourceConfig && targetConfig) {
+                // Calculate output shape based on node type
+                let outputShape;
+                switch (sourceNode.getAttribute('data-type')) {
+                    case 'input':
+                        outputShape = sourceConfig.shape;
+                        break;
+                    case 'hidden':
+                        outputShape = [sourceConfig.units];
+                        break;
+                    case 'output':
+                        outputShape = [sourceConfig.units];
+                        break;
+                    case 'conv':
+                        // For Conv2D, the output shape depends on the input and parameters
+                        // This is a simplified calculation
+                        if (targetConfig.inputShape) {
+                            const h = targetConfig.inputShape[0];
+                            const w = targetConfig.inputShape[1];
+                            const kh = sourceConfig.kernelSize[0];
+                            const kw = sourceConfig.kernelSize[1];
+                            const sh = sourceConfig.strides[0];
+                            const sw = sourceConfig.strides[1];
+                            const padding = sourceConfig.padding;
+                            
+                            let outHeight, outWidth;
+                            if (padding === 'same') {
+                                outHeight = Math.ceil(h / sh);
+                                outWidth = Math.ceil(w / sw);
+                            } else { // 'valid'
+                                outHeight = Math.ceil((h - kh + 1) / sh);
+                                outWidth = Math.ceil((w - kw + 1) / sw);
+                            }
+                            
+                            outputShape = [outHeight, outWidth, sourceConfig.filters];
+                        } else {
+                            outputShape = ['?', '?', sourceConfig.filters];
+                        }
+                        break;
+                    case 'pool':
+                        // For pooling, also depends on the input and parameters
+                        if (targetConfig.inputShape) {
+                            const h = targetConfig.inputShape[0];
+                            const w = targetConfig.inputShape[1];
+                            const c = targetConfig.inputShape[2];
+                            const ph = sourceConfig.poolSize[0];
+                            const pw = sourceConfig.poolSize[1];
+                            const sh = sourceConfig.strides[0];
+                            const sw = sourceConfig.strides[1];
+                            const padding = sourceConfig.padding;
+                            
+                            let outHeight, outWidth;
+                            if (padding === 'same') {
+                                outHeight = Math.ceil(h / sh);
+                                outWidth = Math.ceil(w / sw);
+                            } else { // 'valid'
+                                outHeight = Math.ceil((h - ph + 1) / sh);
+                                outWidth = Math.ceil((w - pw + 1) / sw);
+                            }
+                            
+                            outputShape = [outHeight, outWidth, c];
+                        } else {
+                            outputShape = ['?', '?', '?'];
+                        }
+                        break;
+                    case 'linear':
+                        outputShape = [sourceConfig.outputFeatures];
+                        break;
+                    default:
+                        outputShape = ['?', '?', '?'];
+                }
+                
+                // Update the target's input shape
+                targetConfig.inputShape = outputShape;
+                
+                // Update UI
+                updateNodeDisplayShapes(sourceNode, targetNode);
             }
-        });
-        
-        // Trigger a custom event that the main script can listen for
-        const event = new CustomEvent('networkUpdated', { detail: networkLayers });
-        document.dispatchEvent(event);
+        }
+    }
+    
+    // Update the displayed shapes in the UI
+    function updateNodeDisplayShapes(sourceNode, targetNode) {
+        if (sourceNode && targetNode) {
+            const sourceType = sourceNode.getAttribute('data-type');
+            const targetType = targetNode.getAttribute('data-type');
+            const sourceConfig = sourceNode.layerConfig;
+            const targetConfig = targetNode.layerConfig;
+            
+            // Update source node output shape display
+            const sourceOutputElem = sourceNode.querySelector('.output-shape');
+            if (sourceOutputElem && sourceConfig) {
+                let outputText;
+                switch (sourceType) {
+                    case 'input':
+                        outputText = `[${sourceConfig.shape.join(' × ')}]`;
+                        break;
+                    case 'hidden':
+                    case 'output':
+                        outputText = `[${sourceConfig.units}]`;
+                        break;
+                    case 'conv':
+                        if (sourceConfig.outputShape) {
+                            outputText = `[${sourceConfig.outputShape.join(' × ')}]`;
+                        } else {
+                            outputText = `[? × ? × ${sourceConfig.filters}]`;
+                        }
+                        break;
+                    case 'pool':
+                        if (sourceConfig.outputShape) {
+                            outputText = `[${sourceConfig.outputShape.join(' × ')}]`;
+                        } else {
+                            outputText = 'Depends on input';
+                        }
+                        break;
+                    case 'linear':
+                        outputText = `[${sourceConfig.outputFeatures}]`;
+                        break;
+                    default:
+                        outputText = 'Unknown';
+                }
+                sourceOutputElem.textContent = outputText;
+            }
+            
+            // Update target node input shape display
+            const targetInputElem = targetNode.querySelector('.input-shape');
+            if (targetInputElem && targetConfig && targetConfig.inputShape) {
+                targetInputElem.textContent = `[${targetConfig.inputShape.join(' × ')}]`;
+                
+                // Update parameters section
+                const targetParamsElem = targetNode.querySelector('.params-display');
+                if (targetParamsElem) {
+                    // Calculate and display parameters
+                    let paramsText = '';
+                    switch (targetType) {
+                        case 'hidden':
+                            const inputUnits = Array.isArray(targetConfig.inputShape) ? 
+                                targetConfig.inputShape.reduce((acc, val) => acc * val, 1) : 
+                                targetConfig.inputShape;
+                                
+                            const biasParams = targetConfig.useBias ? targetConfig.units : 0;
+                            const totalParams = (inputUnits * targetConfig.units) + biasParams;
+                            
+                            paramsText = `In: ${inputUnits}, Out: ${targetConfig.units}\nParams: ${totalParams.toLocaleString()}\nDropout: ${targetConfig.dropoutRate}`;
+                            break;
+                        case 'output':
+                            const outInputUnits = Array.isArray(targetConfig.inputShape) ? 
+                                targetConfig.inputShape.reduce((acc, val) => acc * val, 1) : 
+                                targetConfig.inputShape;
+                                
+                            const outBiasParams = targetConfig.useBias ? targetConfig.units : 0;
+                            const outTotalParams = (outInputUnits * targetConfig.units) + outBiasParams;
+                            
+                            paramsText = `In: ${outInputUnits}, Out: ${targetConfig.units}\nParams: ${outTotalParams.toLocaleString()}\nActivation: ${targetConfig.activation}`;
+                            break;
+                        case 'conv':
+                            const channels = targetConfig.inputShape[2] || '?';
+                            const kernelH = targetConfig.kernelSize[0];
+                            const kernelW = targetConfig.kernelSize[1];
+                            const kernelParams = kernelH * kernelW * channels * targetConfig.filters;
+                            const convBiasParams = targetConfig.useBias ? targetConfig.filters : 0;
+                            const convTotalParams = kernelParams + convBiasParams;
+                            
+                            paramsText = `In: ${channels}, Out: ${targetConfig.filters}\nKernel: ${targetConfig.kernelSize.join('×')}\nStride: ${targetConfig.strides.join('×')}\nPadding: ${targetConfig.padding}\nParams: ${convTotalParams.toLocaleString()}`;
+                            break;
+                        case 'pool':
+                            paramsText = `Pool size: ${targetConfig.poolSize.join('×')}\nStride: ${targetConfig.strides.join('×')}\nPadding: ${targetConfig.padding}\nParams: 0`;
+                            break;
+                        case 'linear':
+                            const linearInputs = targetConfig.inputFeatures;
+                            const linearBiasParams = targetConfig.useBias ? targetConfig.outputFeatures : 0;
+                            const linearTotalParams = (linearInputs * targetConfig.outputFeatures) + linearBiasParams;
+                            
+                            paramsText = `In: ${linearInputs}, Out: ${targetConfig.outputFeatures}\nParams: ${linearTotalParams.toLocaleString()}\nLearning Rate: ${targetConfig.learningRate}\nLoss: ${targetConfig.lossFunction}`;
+                            break;
+                    }
+                    
+                    targetParamsElem.textContent = paramsText;
+                }
+            }
+        }
     }
     
     // Delete a node and its connections

js/main.js

@@ -299,214 +299,352 @@ document.addEventListener('DOMContentLoaded', () => {
     
     // Handle opening the layer editor
     function handleOpenLayerEditor(e) {
-        const layerDetails = e.detail;
-        console.log('Opening layer editor for:', layerDetails);
+        const node = e.detail.node;
+        const nodeType = node.getAttribute('data-type');
+        const layerId = node.getAttribute('data-id');
         
-        const layerEditorModal = document.getElementById('layer-editor-modal');
-        if (!layerEditorModal) return;
-        
-        // Get the form and populate it
-        const layerForm = layerEditorModal.querySelector('.layer-form');
-        if (!layerForm) return;
+        // Get current configuration
+        const layerConfig = node.layerConfig || window.neuralNetwork.createNodeConfig(nodeType);
         
-        // Set the layer ID in a data attribute for retrieval when saving
-        layerForm.setAttribute('data-layer-id', layerDetails.id);
-        layerForm.setAttribute('data-layer-type', layerDetails.type);
-        
-        // Set modal title
-        const modalTitle = layerEditorModal.querySelector('.modal-title');
+        // Update modal title
+        const modalTitle = document.querySelector('.layer-editor-modal .modal-title');
         if (modalTitle) {
-            modalTitle.textContent = `Edit ${layerDetails.name}`;
+            modalTitle.textContent = `Edit ${nodeType.charAt(0).toUpperCase() + nodeType.slice(1)} Layer`;
         }
         
-        // Get layer config template
-        const layerConfig = window.neuralNetwork.nodeConfigTemplates[layerDetails.type];
+        // Get layer form
+        const layerForm = document.querySelector('.layer-form');
+        if (!layerForm) return;
         
-        // Generate form fields based on layer type
+        // Clear previous form fields
         layerForm.innerHTML = '';
         
-        // Add common fields
-        layerForm.innerHTML += `
-            <div class="form-group">
-                <label for="layer-name">Layer Name</label>
-                <input type="text" id="layer-name" value="${layerDetails.name}">
-            </div>
-        `;
-        
-        // Add type-specific fields
-        switch (layerDetails.type) {
+        // Create form fields based on layer type
+        switch (nodeType) {
             case 'input':
+                // Input shape fields
                 layerForm.innerHTML += `
                     <div class="form-group">
-                        <label for="input-shape">Input Shape</label>
-                        <input type="text" id="input-shape" value="${layerConfig.shape.join(' × ')}">
+                        <label>Input Dimensions:</label>
+                        <div class="form-row">
+                            <input type="number" id="input-height" min="1" value="${layerConfig.shape[0]}" placeholder="Height">
+                            <input type="number" id="input-width" min="1" value="${layerConfig.shape[1]}" placeholder="Width">
+                            <input type="number" id="input-channels" min="1" value="${layerConfig.shape[2]}" placeholder="Channels">
+                        </div>
+                        <small>Input shape: [${layerConfig.shape.join(' × ')}]</small>
                     </div>
                     <div class="form-group">
-                        <label for="batch-size">Batch Size</label>
-                        <input type="number" id="batch-size" value="${layerConfig.batchSize}">
+                        <label>Batch Size:</label>
+                        <input type="number" id="batch-size" min="1" value="${layerConfig.batchSize}" placeholder="Batch Size">
                     </div>
                 `;
                 break;
                 
             case 'hidden':
+                // Units and activation function
                 layerForm.innerHTML += `
                     <div class="form-group">
-                        <label for="units">Units</label>
-                        <input type="number" id="units" value="${layerConfig.units}">
+                        <label>Units:</label>
+                        <input type="number" id="hidden-units" min="1" value="${layerConfig.units}" placeholder="Number of units">
+                        <small>Output shape: [${layerConfig.units}]</small>
                     </div>
                     <div class="form-group">
-                        <label for="activation">Activation</label>
-                        <select id="activation">
+                        <label>Activation Function:</label>
+                        <select id="hidden-activation">
                             <option value="relu" ${layerConfig.activation === 'relu' ? 'selected' : ''}>ReLU</option>
                             <option value="sigmoid" ${layerConfig.activation === 'sigmoid' ? 'selected' : ''}>Sigmoid</option>
                             <option value="tanh" ${layerConfig.activation === 'tanh' ? 'selected' : ''}>Tanh</option>
-                            <option value="linear" ${layerConfig.activation === 'linear' ? 'selected' : ''}>Linear</option>
+                            <option value="leaky_relu" ${layerConfig.activation === 'leaky_relu' ? 'selected' : ''}>Leaky ReLU</option>
                         </select>
                     </div>
                     <div class="form-group">
-                        <label for="use-bias">Use Bias</label>
-                        <select id="use-bias">
-                            <option value="true" ${layerConfig.useBias ? 'selected' : ''}>Yes</option>
-                            <option value="false" ${!layerConfig.useBias ? 'selected' : ''}>No</option>
-                        </select>
+                        <label>Dropout Rate:</label>
+                        <input type="range" id="dropout-rate" min="0" max="0.9" step="0.1" value="${layerConfig.dropoutRate}">
+                        <span id="dropout-value">${layerConfig.dropoutRate}</span>
                     </div>
                     <div class="form-group">
-                        <label for="dropout-rate">Dropout Rate</label>
-                        <input type="number" id="dropout-rate" min="0" max="0.9" step="0.1" value="${layerConfig.dropoutRate}">
+                        <label>Use Bias:</label>
+                        <input type="checkbox" id="use-bias" ${layerConfig.useBias ? 'checked' : ''}>
                     </div>
                 `;
+                
+                // Add listener for dropout rate slider
+                setTimeout(() => {
+                    const dropoutSlider = document.getElementById('dropout-rate');
+                    const dropoutValue = document.getElementById('dropout-value');
+                    if (dropoutSlider && dropoutValue) {
+                        dropoutSlider.addEventListener('input', (e) => {
+                            dropoutValue.textContent = e.target.value;
+                        });
+                    }
+                }, 100);
                 break;
                 
             case 'output':
+                // Output units and activation
                 layerForm.innerHTML += `
                     <div class="form-group">
-                        <label for="units">Units</label>
-                        <input type="number" id="units" value="${layerConfig.units}">
+                        <label>Units:</label>
+                        <input type="number" id="output-units" min="1" value="${layerConfig.units}" placeholder="Number of output units">
+                        <small>Output shape: [${layerConfig.units}]</small>
                     </div>
                     <div class="form-group">
-                        <label for="activation">Activation</label>
-                        <select id="activation">
-                            <option value="softmax" ${layerConfig.activation === 'softmax' ? 'selected' : ''}>Softmax</option>
-                            <option value="sigmoid" ${layerConfig.activation === 'sigmoid' ? 'selected' : ''}>Sigmoid</option>
-                            <option value="linear" ${layerConfig.activation === 'linear' ? 'selected' : ''}>Linear</option>
+                        <label>Activation Function:</label>
+                        <select id="output-activation">
+                            <option value="softmax" ${layerConfig.activation === 'softmax' ? 'selected' : ''}>Softmax (Classification)</option>
+                            <option value="sigmoid" ${layerConfig.activation === 'sigmoid' ? 'selected' : ''}>Sigmoid (Binary Classification)</option>
+                            <option value="linear" ${layerConfig.activation === 'linear' ? 'selected' : ''}>Linear (Regression)</option>
                         </select>
                     </div>
+                    <div class="form-group">
+                        <label>Use Bias:</label>
+                        <input type="checkbox" id="output-use-bias" ${layerConfig.useBias ? 'checked' : ''}>
+                    </div>
                 `;
                 break;
                 
             case 'conv':
+                // Convolutional layer parameters
                 layerForm.innerHTML += `
                     <div class="form-group">
-                        <label for="filters">Filters</label>
-                        <input type="number" id="filters" value="${layerConfig.filters}">
+                        <label>Filters:</label>
+                        <input type="number" id="conv-filters" min="1" value="${layerConfig.filters}" placeholder="Number of filters">
+                        <small>Output channels</small>
                     </div>
                     <div class="form-group">
-                        <label for="kernel-size">Kernel Size</label>
-                        <input type="text" id="kernel-size" value="${layerConfig.kernelSize.join(' × ')}">
+                        <label>Kernel Size:</label>
+                        <div class="form-row">
+                            <input type="number" id="kernel-size-h" min="1" max="7" value="${layerConfig.kernelSize[0]}" placeholder="Height">
+                            <input type="number" id="kernel-size-w" min="1" max="7" value="${layerConfig.kernelSize[1]}" placeholder="Width">
+                        </div>
+                        <small>Filter dimensions: ${layerConfig.kernelSize.join(' × ')}</small>
                     </div>
                     <div class="form-group">
-                        <label for="strides">Strides</label>
-                        <input type="text" id="strides" value="${layerConfig.strides.join(' × ')}">
+                        <label>Strides:</label>
+                        <div class="form-row">
+                            <input type="number" id="stride-h" min="1" max="4" value="${layerConfig.strides[0]}" placeholder="Height">
+                            <input type="number" id="stride-w" min="1" max="4" value="${layerConfig.strides[1]}" placeholder="Width">
+                        </div>
                     </div>
                     <div class="form-group">
-                        <label for="padding">Padding</label>
-                        <select id="padding">
-                            <option value="valid" ${layerConfig.padding === 'valid' ? 'selected' : ''}>Valid</option>
-                            <option value="same" ${layerConfig.padding === 'same' ? 'selected' : ''}>Same</option>
+                        <label>Padding:</label>
+                        <select id="padding-type">
+                            <option value="valid" ${layerConfig.padding === 'valid' ? 'selected' : ''}>Valid (No Padding)</option>
+                            <option value="same" ${layerConfig.padding === 'same' ? 'selected' : ''}>Same (Preserve Dimensions)</option>
                         </select>
                     </div>
                     <div class="form-group">
-                        <label for="activation">Activation</label>
-                        <select id="activation">
+                        <label>Activation Function:</label>
+                        <select id="conv-activation">
                             <option value="relu" ${layerConfig.activation === 'relu' ? 'selected' : ''}>ReLU</option>
                             <option value="sigmoid" ${layerConfig.activation === 'sigmoid' ? 'selected' : ''}>Sigmoid</option>
                             <option value="tanh" ${layerConfig.activation === 'tanh' ? 'selected' : ''}>Tanh</option>
-                            <option value="linear" ${layerConfig.activation === 'linear' ? 'selected' : ''}>Linear</option>
+                            <option value="leaky_relu" ${layerConfig.activation === 'leaky_relu' ? 'selected' : ''}>Leaky ReLU</option>
                         </select>
                     </div>
                 `;
                 break;
                 
             case 'pool':
+                // Pooling layer parameters
                 layerForm.innerHTML += `
                     <div class="form-group">
-                        <label for="pool-size">Pool Size</label>
-                        <input type="text" id="pool-size" value="${layerConfig.poolSize.join(' × ')}">
+                        <label>Pool Size:</label>
+                        <div class="form-row">
+                            <input type="number" id="pool-size-h" min="1" max="4" value="${layerConfig.poolSize[0]}" placeholder="Height">
+                            <input type="number" id="pool-size-w" min="1" max="4" value="${layerConfig.poolSize[1]}" placeholder="Width">
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label>Strides:</label>
+                        <div class="form-row">
+                            <input type="number" id="pool-stride-h" min="1" max="4" value="${layerConfig.strides[0]}" placeholder="Height">
+                            <input type="number" id="pool-stride-w" min="1" max="4" value="${layerConfig.strides[1]}" placeholder="Width">
+                        </div>
                     </div>
                     <div class="form-group">
-                        <label for="strides">Strides</label>
-                        <input type="text" id="strides" value="${layerConfig.strides.join(' × ')}">
+                        <label>Padding:</label>
+                        <select id="pool-padding">
+                            <option value="valid" ${layerConfig.padding === 'valid' ? 'selected' : ''}>Valid (No Padding)</option>
+                            <option value="same" ${layerConfig.padding === 'same' ? 'selected' : ''}>Same (Preserve Dimensions)</option>
+                        </select>
                     </div>
                     <div class="form-group">
-                        <label for="padding">Padding</label>
-                        <select id="padding">
-                            <option value="valid" ${layerConfig.padding === 'valid' ? 'selected' : ''}>Valid</option>
-                            <option value="same" ${layerConfig.padding === 'same' ? 'selected' : ''}>Same</option>
+                        <label>Pool Type:</label>
+                        <select id="pool-type">
+                            <option value="max" selected>Max Pooling</option>
+                            <option value="avg">Average Pooling</option>
                         </select>
                     </div>
                 `;
                 break;
+                
+            case 'linear':
+                // Linear regression layer parameters
+                layerForm.innerHTML += `
+                    <div class="form-group">
+                        <label>Input Features:</label>
+                        <input type="number" id="input-features" min="1" value="${layerConfig.inputFeatures}" placeholder="Number of input features">
+                        <small>Input shape: [${layerConfig.inputFeatures}]</small>
+                    </div>
+                    <div class="form-group">
+                        <label>Output Features:</label>
+                        <input type="number" id="output-features" min="1" value="${layerConfig.outputFeatures}" placeholder="Number of output features">
+                        <small>Output shape: [${layerConfig.outputFeatures}]</small>
+                    </div>
+                    <div class="form-group">
+                        <label>Use Bias:</label>
+                        <input type="checkbox" id="linear-use-bias" ${layerConfig.useBias ? 'checked' : ''}>
+                    </div>
+                    <div class="form-group">
+                        <label>Learning Rate:</label>
+                        <input type="range" id="learning-rate-slider" min="0.001" max="0.1" step="0.001" value="${layerConfig.learningRate}">
+                        <span id="learning-rate-value">${layerConfig.learningRate}</span>
+                    </div>
+                    <div class="form-group">
+                        <label>Loss Function:</label>
+                        <select id="loss-function">
+                            <option value="mse" ${layerConfig.lossFunction === 'mse' ? 'selected' : ''}>Mean Squared Error</option>
+                            <option value="mae" ${layerConfig.lossFunction === 'mae' ? 'selected' : ''}>Mean Absolute Error</option>
+                            <option value="huber" ${layerConfig.lossFunction === 'huber' ? 'selected' : ''}>Huber Loss</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label>Optimizer:</label>
+                        <select id="optimizer">
+                            <option value="sgd" ${layerConfig.optimizer === 'sgd' ? 'selected' : ''}>Stochastic Gradient Descent</option>
+                            <option value="adam" ${layerConfig.optimizer === 'adam' ? 'selected' : ''}>Adam</option>
+                            <option value="rmsprop" ${layerConfig.optimizer === 'rmsprop' ? 'selected' : ''}>RMSprop</option>
+                        </select>
+                    </div>
+                `;
+                
+                // Add listener for learning rate slider
+                setTimeout(() => {
+                    const learningRateSlider = document.getElementById('learning-rate-slider');
+                    const learningRateValue = document.getElementById('learning-rate-value');
+                    if (learningRateSlider && learningRateValue) {
+                        learningRateSlider.addEventListener('input', (e) => {
+                            learningRateValue.textContent = parseFloat(e.target.value).toFixed(3);
+                        });
+                    }
+                }, 100);
+                break;
+                
+            default:
+                layerForm.innerHTML = '<p>No editable properties for this layer type.</p>';
         }
         
-        // Add save button
+        // Add a preview of calculated parameters if available
+        if (nodeType !== 'input') {
+            const parameterCount = window.neuralNetwork.calculateParameters(nodeType, layerConfig);
+            if (parameterCount) {
+                layerForm.innerHTML += `
+                    <div class="form-group">
+                        <label>Parameter Summary:</label>
+                        <div class="parameters-summary">
+                            <p>Total parameters: <strong>${formatNumber(parameterCount)}</strong></p>
+                            <p>Memory usage (32-bit): ~${formatMemorySize(parameterCount * 4)}</p>
+                        </div>
+                    </div>
+                `;
+            }
+        }
+        
+        // Add save and cancel buttons
         layerForm.innerHTML += `
-            <div class="form-group form-grid-full">
-                <button type="button" class="btn btn-primary save-layer-btn">Save Changes</button>
+            <div class="form-buttons">
+                <button type="button" id="save-layer-config" class="btn-primary">Save Changes</button>
+                <button type="button" id="cancel-layer-edit" class="btn-secondary">Cancel</button>
             </div>
         `;
         
-        // Show the modal
-        openModal(layerEditorModal);
+        // Open the modal
+        const modal = document.getElementById('layer-editor-modal');
+        if (modal) {
+            openModal(modal);
+            
+            // Add event listeners for buttons
+            const saveButton = document.getElementById('save-layer-config');
+            if (saveButton) {
+                saveButton.addEventListener('click', () => {
+                    saveLayerConfig(node, nodeType, layerId);
+                    closeModal(modal);
+                });
+            }
+            
+            const cancelButton = document.getElementById('cancel-layer-edit');
+            if (cancelButton) {
+                cancelButton.addEventListener('click', () => {
+                    closeModal(modal);
+                });
+            }
+        }
     }
     
     // Save layer configuration
-    function saveLayerConfig() {
-        const layerEditorModal = document.getElementById('layer-editor-modal');
-        if (!layerEditorModal) return;
-        
-        const layerForm = layerEditorModal.querySelector('.layer-form');
-        if (!layerForm) return;
-        
-        const layerId = layerForm.getAttribute('data-layer-id');
-        const layerType = layerForm.getAttribute('data-layer-type');
+    function saveLayerConfig(node, nodeType, layerId) {
+        // Get form values
+        const form = document.querySelector('.layer-form');
+        if (!form) return;
         
-        // Get node on canvas
-        const node = document.querySelector(`.canvas-node[data-id="${layerId}"]`);
-        if (!node) return;
+        const values = {};
+        const inputs = form.querySelectorAll('input, select');
+        inputs.forEach(input => {
+            values[input.id] = input.value;
+        });
         
-        // Get form values
-        const name = document.getElementById('layer-name').value;
+        // Update node configuration
+        node.layerConfig = {
+            type: nodeType,
+            shape: [
+                parseInt(values['input-height']),
+                parseInt(values['input-width']),
+                parseInt(values['input-channels'])
+            ],
+            batchSize: parseInt(values['batch-size']),
+            units: parseInt(values['hidden-units']),
+            activation: values['hidden-activation'],
+            dropoutRate: parseFloat(values['dropout-rate']),
+            useBias: values['use-bias'] === 'true',
+            learningRate: parseFloat(values['learning-rate-slider']),
+            lossFunction: values['loss-function'],
+            optimizer: values['optimizer'],
+            inputFeatures: parseInt(values['input-features']),
+            outputFeatures: parseInt(values['output-features'])
+        };
         
         // Update node title
         const nodeTitle = node.querySelector('.node-title');
         if (nodeTitle) {
-            nodeTitle.textContent = name;
+            nodeTitle.textContent = nodeType.charAt(0).toUpperCase() + nodeType.slice(1);
         }
         
         // Update node data attribute
-        node.setAttribute('data-name', name);
+        node.setAttribute('data-name', nodeType.charAt(0).toUpperCase() + nodeType.slice(1));
         
         // Update dimensions based on layer type
         let dimensions = '';
-        switch (layerType) {
+        switch (nodeType) {
             case 'input':
-                const inputShape = document.getElementById('input-shape').value;
-                dimensions = inputShape;
+                dimensions = values['input-height'] + ' × ' + values['input-width'] + ' × ' + values['input-channels'];
                 break;
                 
             case 'hidden':
             case 'output':
-                const units = document.getElementById('units').value;
-                dimensions = units;
+                dimensions = values['hidden-units'];
                 break;
                 
             case 'conv':
-                const filters = document.getElementById('filters').value;
-                dimensions = `${filters} × 26 × 26`; // Simplified
+                dimensions = values['conv-filters'] + ' × ' + values['kernel-size-h'] + ' × ' + values['kernel-size-w'];
                 break;
                 
             case 'pool':
-                dimensions = '32 × 13 × 13'; // Simplified
+                dimensions = values['pool-size-h'] + ' × ' + values['pool-size-w'];
+                break;
+                
+            case 'linear':
+                dimensions = values['input-features'] + ' → ' + values['output-features'];
                 break;
         }
         
@@ -524,16 +662,13 @@ document.addEventListener('DOMContentLoaded', () => {
         const layerIndex = networkLayers.layers.findIndex(layer => layer.id === layerId);
         
         if (layerIndex !== -1) {
-            networkLayers.layers[layerIndex].name = name;
+            networkLayers.layers[layerIndex].name = nodeType.charAt(0).toUpperCase() + nodeType.slice(1);
             networkLayers.layers[layerIndex].dimensions = dimensions;
         }
         
         // Trigger network updated event
         const event = new CustomEvent('networkUpdated', { detail: networkLayers });
         document.dispatchEvent(event);
-        
-        // Close the modal
-        closeModal(layerEditorModal);
     }
     
     // Handle sample selection

js/neural-network.js

@@ -11,7 +11,8 @@
         'hidden': 0,
         'output': 0,
         'conv': 0,
-        'pool': 0
+        'pool': 0,
+        'linear': 0
     };
     
     // Default configuration templates for different layer types
@@ -21,7 +22,9 @@
             shape: [28, 28, 1],
             batchSize: 32,
             description: 'Input layer for raw data',
-            parameters: 0
+            parameters: 0,
+            inputShape: null,
+            outputShape: [784]
         },
         'hidden': {
             units: 128,
@@ -30,7 +33,9 @@
             kernelInitializer: 'glorotUniform',
             biasInitializer: 'zeros',
             dropoutRate: 0.2,
-            description: 'Dense hidden layer with ReLU activation'
+            description: 'Dense hidden layer with ReLU activation',
+            inputShape: null,
+            outputShape: null
         },
         'output': {
             units: 10,
@@ -38,7 +43,9 @@
             useBias: true,
             kernelInitializer: 'glorotUniform',
             biasInitializer: 'zeros',
-            description: 'Output layer with Softmax activation for classification'
+            description: 'Output layer with Softmax activation for classification',
+            inputShape: null,
+            outputShape: [10]
         },
         'conv': {
             filters: 32,
@@ -49,13 +56,31 @@
             useBias: true,
             kernelInitializer: 'glorotUniform',
             biasInitializer: 'zeros',
-            description: 'Convolutional layer for feature extraction'
+            description: 'Convolutional layer for feature extraction',
+            inputShape: null,
+            outputShape: null
         },
         'pool': {
             poolSize: [2, 2],
             strides: [2, 2],
             padding: 'valid',
-            description: 'Max pooling layer for spatial downsampling'
+            description: 'Max pooling layer for spatial downsampling',
+            inputShape: null,
+            outputShape: null
+        },
+        'linear': {
+            inputFeatures: 1,
+            outputFeatures: 1,
+            useBias: true,
+            activation: 'linear',
+            learningRate: 0.01,
+            optimizer: 'sgd',
+            lossFunction: 'mse',
+            biasInitializer: 'zeros',
+            kernelInitializer: 'glorotUniform',
+            description: 'Linear regression layer for numerical prediction',
+            inputShape: [1],
+            outputShape: [1]
         }
     };