Added neural network playground code from GitHub

.github/workflows/pages.yml

@@ -0,0 +1,23 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: ["main"]
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./
+          publish_branch: gh-pages
+          force_orphan: true 

.gitignore

@@ -0,0 +1,40 @@
+# macOS files
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Thumbnails
+._*
+
+# Node modules and dependency directories
+node_modules/
+jspm_packages/
+
+# Environment files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# IDE files
+.idea/
+.vscode/
+*.sublime-project
+*.sublime-workspace
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+logs
+*.log
+
+# Distribution directories
+dist/
+build/
+
+# Python cache files
+__pycache__/
+*.py[cod]
+*$py.class 

README.md

@@ -1,10 +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

@@ -0,0 +1,1225 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    --primary-color: #3498db;
+    --secondary-color: #2ecc71;
+    --accent-color: #9b59b6;
+    --warning-color: #e74c3c;
+    --info-color: #f39c12;
+    --background-color: #f8f9fa;
+    --card-background: #ffffff;
+    --text-color: #2c3e50;
+    --border-color: #e0e0e0;
+    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
+    --border-radius: 8px;
+    --transition-speed: 0.3s;
+    
+    /* New node color variables */
+    --input-node-color-1: #3498db;
+    --input-node-color-2: #1abc9c;
+    --hidden-node-color-1: #9b59b6;
+    --hidden-node-color-2: #8e44ad;
+    --output-node-color-1: #2ecc71;
+    --output-node-color-2: #27ae60;
+    --conv-node-color-1: #f39c12;
+    --conv-node-color-2: #e67e22;
+    --pool-node-color-1: #e74c3c;
+    --pool-node-color-2: #c0392b;
+    --node-glow: 0 0 15px rgba(255, 255, 255, 0.8);
+}
+
+body {
+    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
+    line-height: 1.6;
+    color: var(--text-color);
+    background-color: var(--background-color);
+    padding-bottom: 2rem;
+}
+
+header {
+    background: linear-gradient(135deg, #3498db, #9b59b6);
+    color: white;
+    text-align: center;
+    padding: 1.5rem 2rem;
+    box-shadow: var(--shadow-md);
+    position: relative;
+}
+
+header::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+    opacity: 0.1;
+}
+
+header h1 {
+    position: relative;
+    z-index: 1;
+    font-weight: 800;
+    letter-spacing: -0.5px;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 0 1rem;
+    display: grid;
+    grid-template-columns: 1fr 2.5fr 1fr;
+    gap: 1.5rem;
+}
+
+.tools-panel, .properties-panel {
+    background: var(--card-background);
+    border-radius: var(--border-radius);
+    padding: 1.5rem;
+    box-shadow: var(--shadow-sm);
+    height: 85vh;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+}
+
+.canvas-container {
+    grid-column: 2;
+    position: relative;
+    overflow: hidden;
+}
+
+.network-canvas {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    background: var(--background-color);
+    border-radius: var(--border-radius);
+    border: 1px solid var(--border-color);
+}
+
+.node-types {
+    margin-top: 1.5rem;
+}
+
+.node-item {
+    padding: 0.8rem 1rem;
+    border-radius: var(--border-radius);
+    background: var(--background-color);
+    cursor: grab;
+    transition: all var(--transition-speed) ease;
+    margin-bottom: 0.8rem;
+    position: relative;
+    display: flex;
+    align-items: center;
+    border: 1px solid var(--border-color);
+}
+
+.node-item:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+.node-item[data-type="input"] {
+    background: linear-gradient(135deg, var(--input-node-color-1), var(--input-node-color-2));
+    border-color: var(--input-node-color-1);
+    color: white;
+}
+
+.node-item[data-type="hidden"] {
+    background: linear-gradient(135deg, var(--hidden-node-color-1), var(--hidden-node-color-2));
+    border-color: var(--hidden-node-color-1);
+    color: white;
+}
+
+.node-item[data-type="output"] {
+    background: linear-gradient(135deg, var(--output-node-color-1), var(--output-node-color-2));
+    border-color: var(--output-node-color-1);
+    color: white;
+}
+
+.node-item[data-type="conv"] {
+    background: linear-gradient(135deg, var(--conv-node-color-1), var(--conv-node-color-2));
+    border-color: var(--conv-node-color-1);
+    color: white;
+}
+
+.node-item[data-type="pool"] {
+    background: linear-gradient(135deg, var(--pool-node-color-1), var(--pool-node-color-2));
+    border-color: var(--pool-node-color-1);
+    color: white;
+}
+
+.node-icon {
+    width: 24px;
+    height: 24px;
+    margin-right: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.8);
+}
+
+.node-icon svg {
+    width: 16px;
+    height: 16px;
+}
+
+.node {
+    padding: 1rem;
+    border-radius: 8px;
+    text-align: center;
+    font-size: 0.95rem;
+    color: white;
+    box-shadow: var(--shadow-md);
+    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+    position: relative;
+    overflow: hidden;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.node::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
+    z-index: 0;
+}
+
+.node::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%);
+    transform: rotate(45deg);
+    animation: shimmer 3s infinite;
+    z-index: 1;
+    pointer-events: none;
+}
+
+@keyframes shimmer {
+    0% { transform: translateX(-100%) rotate(45deg); }
+    100% { transform: translateX(100%) rotate(45deg); }
+}
+
+.node:hover {
+    transform: translateY(-2px) scale(1.05);
+    box-shadow: var(--shadow-lg), 0 0 20px rgba(255, 255, 255, 0.2);
+}
+
+.input-node {
+    background: linear-gradient(135deg, var(--input-node-color-1), var(--input-node-color-2));
+    border: 2px solid var(--input-node-color-1);
+    color: white;
+}
+
+.hidden-node {
+    background: linear-gradient(135deg, var(--hidden-node-color-1), var(--hidden-node-color-2));
+    border: 2px solid var(--hidden-node-color-1);
+    color: white;
+}
+
+.output-node {
+    background: linear-gradient(135deg, var(--output-node-color-1), var(--output-node-color-2));
+    border: 2px solid var(--output-node-color-1);
+    color: white;
+}
+
+.conv-node {
+    background: linear-gradient(135deg, var(--conv-node-color-1), var(--conv-node-color-2));
+    border: 2px solid var(--conv-node-color-1);
+    color: white;
+}
+
+.pool-node {
+    background: linear-gradient(135deg, var(--pool-node-color-1), var(--pool-node-color-2));
+    border: 2px solid var(--pool-node-color-1);
+    color: white;
+}
+
+.controls {
+    margin-top: 2rem;
+}
+
+button {
+    display: block;
+    width: 100%;
+    padding: 0.9rem;
+    margin-bottom: 0.75rem;
+    background: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    position: relative;
+    overflow: hidden;
+    box-shadow: var(--shadow-md);
+}
+
+button::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
+    z-index: 0;
+}
+
+button:hover {
+    background: linear-gradient(135deg, var(--primary-color), #3a5ca9);
+    box-shadow: var(--shadow-lg);
+    transform: translateY(-2px);
+}
+
+button:active {
+    transform: translateY(1px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+h2 {
+    margin-bottom: 1.25rem;
+    color: var(--secondary-color);
+    font-size: 1.25rem;
+    font-weight: 700;
+    position: relative;
+    padding-bottom: 0.75rem;
+}
+
+h2::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 40px;
+    height: 3px;
+    background: var(--primary-color);
+    border-radius: 2px;
+}
+
+#node-properties {
+    padding: 1rem;
+    background-color: #f8f9fa;
+    border-radius: 8px;
+    min-height: 180px;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
+    line-height: 1.7;
+}
+
+#node-properties strong {
+    color: var(--primary-color);
+}
+
+.tooltip {
+    position: absolute;
+    background: rgba(44, 62, 80, 0.95);
+    color: white;
+    padding: 12px 16px;
+    border-radius: 8px;
+    font-size: 0.9rem;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.2s, transform 0.2s;
+    z-index: 1000;
+    max-width: 300px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    transform: translateY(10px);
+    backdrop-filter: blur(2px);
+}
+
+.tooltip.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.tooltip-content {
+    line-height: 1.6;
+}
+
+footer {
+    text-align: center;
+    padding: 1.5rem;
+    background: linear-gradient(135deg, var(--secondary-color), #34495e);
+    color: white;
+    font-size: 0.9rem;
+    position: relative;
+    overflow: hidden;
+}
+
+footer::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect fill="none" width="100" height="100"/><circle fill="rgba(255,255,255,0.05)" cx="25" cy="25" r="5"/><circle fill="rgba(255,255,255,0.05)" cx="75" cy="25" r="5"/><circle fill="rgba(255,255,255,0.05)" cx="25" cy="75" r="5"/><circle fill="rgba(255,255,255,0.05)" cx="75" cy="75" r="5"/></svg>');
+    opacity: 0.4;
+    z-index: 0;
+}
+
+footer p {
+    position: relative;
+    z-index: 1;
+}
+
+/* Styles for nodes on the canvas */
+.canvas-node {
+    position: absolute;
+    width: 180px;
+    padding: 0.8rem;
+    border-radius: var(--border-radius);
+    color: white;
+    box-shadow: var(--shadow-md);
+    z-index: 10;
+    transition: all 0.3s ease;
+    cursor: move;
+    background-size: 300% 300%;
+    animation: gradientShift 8s ease infinite;
+}
+
+@keyframes gradientShift {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+.canvas-node.dragging {
+    cursor: grabbing;
+    box-shadow: var(--shadow-lg), 0 0 25px rgba(255, 255, 255, 0.3);
+    transform: scale(1.05);
+    z-index: 100;
+}
+
+.canvas-node[data-type="input"] {
+    background: linear-gradient(135deg, var(--input-node-color-1), var(--input-node-color-2), var(--input-node-color-1));
+    border: 2px solid var(--input-node-color-1);
+}
+
+.canvas-node[data-type="hidden"] {
+    background: linear-gradient(135deg, var(--hidden-node-color-1), var(--hidden-node-color-2), var(--hidden-node-color-1));
+    border: 2px solid var(--hidden-node-color-1);
+}
+
+.canvas-node[data-type="output"] {
+    background: linear-gradient(135deg, var(--output-node-color-1), var(--output-node-color-2), var(--output-node-color-1));
+    border: 2px solid var(--output-node-color-1);
+}
+
+.canvas-node[data-type="conv"] {
+    background: linear-gradient(135deg, var(--conv-node-color-1), var(--conv-node-color-2), var(--conv-node-color-1));
+    border: 2px solid var(--conv-node-color-1);
+}
+
+.canvas-node[data-type="pool"] {
+    background: linear-gradient(135deg, var(--pool-node-color-1), var(--pool-node-color-2), var(--pool-node-color-1));
+    border: 2px solid var(--pool-node-color-1);
+}
+
+.canvas-node .node-title {
+    font-weight: 600;
+    font-size: 0.9rem;
+    margin-bottom: 0.5rem;
+    color: white;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+    position: relative;
+    z-index: 2;
+}
+
+.canvas-node .node-id {
+    position: absolute;
+    top: 8px;
+    right: 10px;
+    font-size: 0.7rem;
+    color: white;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+    padding: 0 5px;
+    z-index: 2;
+}
+
+.canvas-node .node-dimensions {
+    font-size: 0.8rem;
+    color: rgba(255, 255, 255, 0.9);
+    margin-bottom: 0.5rem;
+    position: relative;
+    z-index: 2;
+}
+
+.canvas-node::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
+    z-index: 1;
+    border-radius: var(--border-radius);
+    pointer-events: none;
+}
+
+.connection {
+    position: absolute;
+    height: 3px;
+    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
+    transform-origin: 0 0;
+    pointer-events: none;
+    z-index: 5;
+    box-shadow: 0 0 8px rgba(52, 152, 219, 0.5);
+}
+
+.connection::after {
+    content: '';
+    position: absolute;
+    right: -5px;
+    top: -5px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--accent-color);
+    box-shadow: 0 0 8px rgba(155, 89, 182, 0.8);
+}
+
+.temp-connection {
+    background: linear-gradient(90deg, rgba(52, 152, 219, 0.5), rgba(155, 89, 182, 0.5));
+    box-shadow: 0 0 12px rgba(52, 152, 219, 0.3);
+    transition: none;
+}
+
+.temp-connection::after {
+    background: rgba(155, 89, 182, 0.7);
+    box-shadow: 0 0 12px rgba(155, 89, 182, 0.5);
+}
+
+.connected-node {
+    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.2), var(--shadow-sm);
+}
+
+.canvas-tooltip {
+    position: absolute;
+    background: white;
+    border-radius: var(--border-radius);
+    padding: 1rem;
+    box-shadow: var(--shadow-md);
+    z-index: 1000;
+    max-width: 300px;
+    display: none;
+    pointer-events: none;
+    border: 1px solid var(--border-color);
+}
+
+.tooltip-header {
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid #eee;
+}
+
+.tooltip-content {
+    font-size: 0.9rem;
+}
+
+.tooltip-row {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.3rem;
+}
+
+.tooltip-label {
+    color: #666;
+}
+
+.tooltip-value {
+    font-weight: 500;
+}
+
+.control-group {
+    margin-bottom: 1.5rem;
+}
+
+.sample-data {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    margin-bottom: 1rem;
+}
+
+.sample-item {
+    width: 50px;
+    height: 50px;
+    border-radius: var(--border-radius);
+    border: 1px solid var(--border-color);
+    overflow: hidden;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.sample-item:hover {
+    transform: scale(1.1);
+    box-shadow: var(--shadow-sm);
+}
+
+.sample-item img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.button-group {
+    display: flex;
+    gap: 0.8rem;
+    margin-bottom: 1.5rem;
+}
+
+.btn {
+    padding: 0.7rem 1.2rem;
+    border-radius: var(--border-radius);
+    border: none;
+    cursor: pointer;
+    font-weight: 500;
+    transition: all var(--transition-speed) ease;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.btn:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-sm);
+}
+
+.btn:active {
+    transform: translateY(0);
+}
+
+.btn-primary {
+    background: var(--primary-color);
+    color: white;
+}
+
+.btn-primary:hover {
+    background: #2980b9;
+}
+
+.btn-secondary {
+    background: var(--secondary-color);
+    color: white;
+}
+
+.btn-secondary:hover {
+    background: #27ae60;
+}
+
+.btn-danger {
+    background: var(--warning-color);
+    color: white;
+}
+
+.btn-danger:hover {
+    background: #c0392b;
+}
+
+.btn-sm {
+    padding: 0.4rem 0.8rem;
+    font-size: 0.9rem;
+}
+
+.btn-icon {
+    margin-right: 0.5rem;
+}
+
+.network-settings {
+    margin-bottom: 1.5rem;
+}
+
+.setting-group {
+    margin-bottom: 1rem;
+}
+
+.setting-label {
+    font-size: 0.9rem;
+    color: #666;
+    margin-bottom: 0.3rem;
+    display: block;
+}
+
+.range-slider {
+    width: 100%;
+    -webkit-appearance: none;
+    height: 6px;
+    border-radius: 5px;
+    background: #ddd;
+    outline: none;
+}
+
+.range-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: var(--primary-color);
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.range-slider::-webkit-slider-thumb:hover {
+    background: #2980b9;
+    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
+}
+
+.range-value {
+    font-size: 0.9rem;
+    color: var(--primary-color);
+    font-weight: 600;
+    text-align: right;
+    margin-top: 0.3rem;
+}
+
+select {
+    width: 100%;
+    padding: 0.5rem;
+    border-radius: var(--border-radius);
+    border: 1px solid var(--border-color);
+    background: white;
+    font-size: 0.9rem;
+    color: var(--text-color);
+    cursor: pointer;
+}
+
+.props-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.props-section {
+    margin-bottom: 1.5rem;
+}
+
+.props-heading {
+    font-size: 1rem;
+    font-weight: 600;
+    margin-bottom: 0.8rem;
+    color: var(--primary-color);
+    display: flex;
+    align-items: center;
+}
+
+.props-heading i {
+    margin-right: 0.5rem;
+}
+
+.props-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 0;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.props-key {
+    color: #666;
+    font-size: 0.9rem;
+}
+
+.props-value {
+    font-weight: 500;
+    font-size: 0.9rem;
+}
+
+.activation-function {
+    background: #f8f9fa;
+    border-radius: var(--border-radius);
+    padding: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.layer-weights {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 1.5rem;
+    background: #f8f9fa;
+    border-radius: var(--border-radius);
+    padding: 1rem;
+}
+
+.weights-img {
+    max-width: 100%;
+    border-radius: var(--border-radius);
+}
+
+.training-progress {
+    margin-bottom: 1.5rem;
+}
+
+.progress-bar-container {
+    width: 100%;
+    height: 10px;
+    background: #f0f0f0;
+    border-radius: 5px;
+    overflow: hidden;
+    margin-bottom: 0.5rem;
+}
+
+.progress-bar {
+    height: 100%;
+    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
+    border-radius: 5px;
+    transition: width 0.3s ease;
+    width: 0%;
+}
+
+.metrics {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 0.5rem;
+}
+
+.metric {
+    text-align: center;
+    flex: 1;
+}
+
+.metric-value {
+    font-weight: 600;
+    font-size: 1.1rem;
+    color: var(--primary-color);
+}
+
+.metric-label {
+    font-size: 0.8rem;
+    color: #666;
+}
+
+.node-controls {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 0.5rem;
+}
+
+.node-edit-btn, .node-delete-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 3px;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+    margin-left: 0.3rem;
+}
+
+.node-edit-btn:hover {
+    background: #e0e0e0;
+}
+
+.node-delete-btn:hover {
+    background: #ffcdd2;
+}
+
+.icon {
+    font-style: normal;
+    font-size: 16px;
+}
+
+/* Modal styles */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    align-items: center;
+    justify-content: center;
+}
+
+.modal-content {
+    background-color: white;
+    padding: 2rem;
+    border-radius: var(--border-radius);
+    width: 90%;
+    max-width: 700px;
+    max-height: 90vh;
+    overflow-y: auto;
+    position: relative;
+    animation: modalFadeIn 0.3s;
+}
+
+.close-modal {
+    position: absolute;
+    right: 1.5rem;
+    top: 1.5rem;
+    font-size: 1.5rem;
+    color: #aaa;
+    cursor: pointer;
+    transition: color 0.2s ease;
+}
+
+.close-modal:hover {
+    color: var(--text-color);
+}
+
+.modal-title {
+    font-size: 1.5rem;
+    margin-bottom: 1.5rem;
+    color: var(--primary-color);
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.modal-section {
+    margin-bottom: 2rem;
+}
+
+.modal-section-title {
+    font-size: 1.2rem;
+    margin-bottom: 1rem;
+    color: var(--text-color);
+}
+
+.modal-text {
+    line-height: 1.7;
+    margin-bottom: 1rem;
+}
+
+.modal-list {
+    list-style: none;
+    margin: 1rem 0;
+}
+
+.modal-list li {
+    padding: 0.5rem 0;
+    border-bottom: 1px solid #f0f0f0;
+    display: flex;
+    align-items: flex-start;
+}
+
+.modal-list li::before {
+    content: '•';
+    color: var(--primary-color);
+    font-weight: bold;
+    margin-right: 0.5rem;
+}
+
+/* Footer styles */
+.footer {
+    text-align: center;
+    margin-top: 3rem;
+    padding: 1.5rem;
+    background: white;
+    box-shadow: var(--shadow-sm);
+}
+
+.footer-links {
+    display: flex;
+    justify-content: center;
+    gap: 1.5rem;
+    margin-bottom: 1rem;
+}
+
+.footer-link {
+    color: var(--primary-color);
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+
+.footer-link:hover {
+    color: #2980b9;
+    text-decoration: underline;
+}
+
+.footer-text {
+    color: #666;
+    font-size: 0.9rem;
+}
+
+/* Animation keyframes */
+@keyframes pulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.5);
+    }
+    70% {
+        box-shadow: 0 0 0 5px rgba(46, 204, 113, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
+    }
+}
+
+@keyframes modalFadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Layer editor modal styles */
+.layer-editor-modal .modal-content {
+    max-width: 550px;
+}
+
+.layer-form {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+}
+
+.form-group {
+    margin-bottom: 1rem;
+}
+
+.form-group label {
+    display: block;
+    font-size: 0.9rem;
+    color: #666;
+    margin-bottom: 0.3rem;
+}
+
+.form-group input, .form-group select {
+    width: 100%;
+    padding: 0.5rem;
+    border-radius: var(--border-radius);
+    border: 1px solid var(--border-color);
+}
+
+.form-group input:focus, .form-group select:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
+}
+
+.form-grid-full {
+    grid-column: 1 / -1;
+}
+
+.parameters-preview {
+    grid-column: 1 / -1;
+    background: #f8f9fa;
+    border-radius: var(--border-radius);
+    padding: 1rem;
+    margin-top: 1rem;
+}
+
+.parameters-title {
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    color: var(--text-color);
+    font-size: 0.9rem;
+}
+
+.parameters-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    gap: 0.5rem;
+}
+
+.parameter-item {
+    background: white;
+    border-radius: var(--border-radius);
+    padding: 0.7rem;
+    box-shadow: var(--shadow-sm);
+    text-align: center;
+}
+
+.parameter-value {
+    font-weight: 600;
+    color: var(--primary-color);
+    font-size: 1rem;
+    margin-bottom: 0.2rem;
+}
+
+.parameter-label {
+    font-size: 0.8rem;
+    color: #666;
+}
+
+/* Responsive styles */
+@media screen and (max-width: 1200px) {
+    .container {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto;
+    }
+    
+    .tools-panel, .canvas-container, .props-panel {
+        grid-column: 1;
+        height: auto;
+    }
+    
+    .tools-panel {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 1rem;
+        height: auto;
+    }
+    
+    .network-canvas {
+        height: 60vh;
+    }
+    
+    .canvas-node {
+        width: 160px;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .tools-panel {
+        grid-template-columns: 1fr;
+    }
+    
+    .canvas-node {
+        width: 140px;
+        padding: 0.6rem;
+    }
+    
+    .header-title {
+        font-size: 2rem;
+    }
+    
+    .button-group {
+        flex-wrap: wrap;
+    }
+    
+    .btn {
+        flex: 1;
+        min-width: 120px;
+    }
+    
+    .props-row {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    
+    .props-value {
+        margin-top: 0.3rem;
+    }
+}
+
+/* Highlights and animations */
+.highlight-pulse {
+    animation: highlightPulse 1.5s ease-in-out;
+}
+
+@keyframes highlightPulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.5);
+    }
+    50% {
+        box-shadow: 0 0 0 12px rgba(52, 152, 219, 0.3);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0);
+    }
+}
+
+.node-port {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: white;
+    border: 2px solid #aaa;
+    position: absolute;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    z-index: 20;
+    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
+}
+
+.port-in {
+    top: 50%;
+    left: -7px;
+    transform: translateY(-50%);
+}
+
+.port-out {
+    top: 50%;
+    right: -7px;
+    transform: translateY(-50%);
+}
+
+.port-in:hover, .port-out:hover, .port-hover {
+    background: rgba(255, 255, 255, 0.9);
+    border-color: white;
+    transform: translateY(-50%) scale(1.3);
+    box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
+}
+
+.active-port {
+    background: rgba(255, 255, 255, 0.9);
+    border-color: white;
+    box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
+    animation: portPulse 1.5s infinite;
+}
+
+@keyframes portPulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
+    }
+    70% {
+        box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
+    }
+}
+
+.valid-target {
+    background: var(--secondary-color);
+    border-color: white;
+    animation: validPulse 1.5s infinite;
+}
+
+@keyframes validPulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
+    }
+    70% {
+        box-shadow: 0 0 0 8px rgba(46, 204, 113, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
+    }
+}
+
+.invalid-target {
+    background: var(--warning-color);
+    border-color: white;
+    cursor: not-allowed;
+    animation: invalidPulse 1.5s infinite;
+}
+
+@keyframes invalidPulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
+    }
+    70% {
+        box-shadow: 0 0 0 8px rgba(231, 76, 60, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
+    }
+} 

index.html

@@ -1,19 +1,170 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Neural Network Playground</title>
+    <link rel="stylesheet" href="css/styles.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
+</head>
+<body>
+    <header>
+        <h1>Neural Network Playground</h1>
+        <p class="header-subtitle">Interactive visualization of neural network architectures and concepts</p>
+    </header>
+    
+    <main>
+        <div class="container">
+            <div class="tools-panel">
+                <h2>Network Components</h2>
+                
+                <p class="hint-text">Drag components to the canvas to build your neural network</p>
+                
+                <div class="node-types">
+                    <div class="node-item" draggable="true" data-type="input">
+                        <div class="node input-node">Input Layer</div>
+                    </div>
+                    <div class="node-item" draggable="true" data-type="hidden">
+                        <div class="node hidden-node">Hidden Layer</div>
+                    </div>
+                    <div class="node-item" draggable="true" data-type="output">
+                        <div class="node output-node">Output Layer</div>
+                    </div>
+                    <div class="node-item" draggable="true" data-type="conv">
+                        <div class="node conv-node">Convolutional</div>
+                    </div>
+                    <div class="node-item" draggable="true" data-type="pool">
+                        <div class="node pool-node">Pooling</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">
+                    <button id="run-network">Run Network</button>
+                    <button id="clear-canvas">Clear Canvas</button>
+                </div>
+                
+                <h3 class="section-title">Network Settings</h3>
+                <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>
+                    </div>
+                    <div class="setting-group">
+                        <label for="activation">Activation:</label>
+                        <select id="activation">
+                            <option value="relu">ReLU</option>
+                            <option value="sigmoid">Sigmoid</option>
+                            <option value="tanh">Tanh</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="canvas-container">
+                <div id="network-canvas" class="network-canvas">
+                    <div class="canvas-hint">
+                        <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.
+                    </div>
+                </div>
+            </div>
+            
+            <div class="properties-panel">
+                <h2>Layer Properties</h2>
+                <div id="node-properties">
+                    <p>Hover over a node to see its properties</p>
+                </div>
+                
+                <h3 class="section-title">Activation Function</h3>
+                <div class="activation-graph">
+                    <svg class="activation-curve" viewBox="0 0 100 100" preserveAspectRatio="none">
+                        <!-- Will be populated by JavaScript -->
+                    </svg>
+                </div>
+                
+                <h3 class="section-title">Layer Weights</h3>
+                <div id="weight-visualization"></div>
+                
+                <h3 class="section-title">Training Progress</h3>
+                <div class="training-progress">
+                    <div class="progress-bar-container">
+                        <div class="progress-bar" style="width: 0%"></div>
+                    </div>
+                    <div class="metrics">
+                        <div class="metric">
+                            <span class="metric-label">Loss:</span>
+                            <span class="metric-value" id="loss-value">-</span>
+                        </div>
+                        <div class="metric">
+                            <span class="metric-label">Accuracy:</span>
+                            <span class="metric-value" id="accuracy-value">-</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    
+    <div class="tooltip" id="node-tooltip">
+        <div class="tooltip-content"></div>
+    </div>
+    
+    <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>
+        </div>
+    </footer>
+    
+    <div class="modal" id="about-modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3>About Neural Network Playground</h3>
+                <button class="close-modal">&times;</button>
+            </div>
+            <div class="modal-body">
+                <p>This playground allows you to experiment with neural networks visually. Build networks by dragging and dropping layer components, connecting them, and running simulations.</p>
+                <p>Learn about different layer types, activation functions, and see how data flows through the network.</p>
+                <h4>Key Concepts:</h4>
+                <ul>
+                    <li><strong>Input Layer:</strong> Receives raw data (like images) and passes it to the network</li>
+                    <li><strong>Hidden Layers:</strong> Extract and process features from the data</li>
+                    <li><strong>Output Layer:</strong> Provides the final prediction or classification</li>
+                    <li><strong>Convolutional Layer:</strong> Specialized for image processing, detects spatial patterns</li>
+                    <li><strong>Pooling Layer:</strong> Reduces dimensions while preserving important features</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Layer Editor Modal -->
+    <div id="layer-editor-modal" class="modal layer-editor-modal">
+        <div class="modal-content">
+            <span class="close-modal">&times;</span>
+            <h2 class="modal-title">Edit Layer</h2>
+            <form class="layer-form">
+                <!-- Form fields will be dynamically generated based on layer type -->
+            </form>
+        </div>
+    </div>
+    <!-- End Layer Editor Modal -->
+    
+    <script src="js/main.js"></script>
+    <script src="js/neural-network.js"></script>
+    <script src="js/drag-drop.js"></script>
+</body>
+</html> 

js/drag-drop.js

@@ -0,0 +1,661 @@
+// Initialize drag and drop functionality
+function initializeDragAndDrop() {
+    const nodeItems = document.querySelectorAll('.node-item');
+    const canvas = document.getElementById('network-canvas');
+    let draggedNode = null;
+    let offsetX, offsetY;
+    let isDragging = false;
+    let isConnecting = false;
+    let startNode = null;
+    let connectionLine = null;
+    let nodeCounter = {};
+    
+    // Track layers for proper architecture building
+    let networkLayers = {
+        layers: [],
+        connections: []
+    };
+    
+    // Add event listeners to draggable items
+    nodeItems.forEach(item => {
+        item.addEventListener('dragstart', handleDragStart);
+    });
+    
+    // Canvas events for dropping nodes
+    canvas.addEventListener('dragover', handleDragOver);
+    canvas.addEventListener('drop', handleDrop);
+    
+    // Handle drag start event
+    function handleDragStart(e) {
+        draggedNode = this;
+        e.dataTransfer.setData('text/plain', this.getAttribute('data-type'));
+        
+        // Set a ghost image for drag (optional)
+        const ghost = this.cloneNode(true);
+        ghost.style.opacity = '0.5';
+        document.body.appendChild(ghost);
+        e.dataTransfer.setDragImage(ghost, 0, 0);
+        setTimeout(() => {
+            document.body.removeChild(ghost);
+        }, 0);
+    }
+    
+    // Handle drag over event
+    function handleDragOver(e) {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'copy';
+    }
+    
+    // Handle drop event to create new nodes on the canvas
+    function handleDrop(e) {
+        e.preventDefault();
+        
+        // Hide the canvas hint when nodes are added
+        const canvasHint = document.querySelector('.canvas-hint');
+        if (canvasHint) {
+            canvasHint.style.display = 'none';
+        }
+        
+        const nodeType = e.dataTransfer.getData('text/plain');
+        
+        if (nodeType) {
+            // Generate unique layer ID
+            const layerId = window.neuralNetwork.getNextLayerId(nodeType);
+            
+            // Create a new node on the canvas
+            const canvasNode = document.createElement('div');
+            canvasNode.className = `canvas-node ${nodeType}-node`;
+            canvasNode.setAttribute('data-type', nodeType);
+            canvasNode.setAttribute('data-id', layerId);
+            
+            // Set node position
+            const rect = canvas.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            
+            canvasNode.style.left = `${x}px`;
+            canvasNode.style.top = `${y}px`;
+            
+            // Set node content based on type
+            let nodeName, dimensions, units;
+            
+            switch(nodeType) {
+                case 'input':
+                    nodeName = 'Input Layer';
+                    dimensions = '1 × 28 × 28';
+                    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;
+                    nodeName = `Hidden Layer ${hiddenCount + 1}`;
+                    dimensions = `${units}`;
+                    break;
+                case 'output':
+                    nodeName = 'Output Layer';
+                    dimensions = '10';
+                    break;
+                case 'conv':
+                    const convCount = document.querySelectorAll('.canvas-node[data-type="conv"]').length;
+                    const filters = 32 * (convCount + 1);
+                    nodeName = `Conv2D ${convCount + 1}`;
+                    dimensions = `${filters} × 26 × 26`;
+                    break;
+                case 'pool':
+                    const poolCount = document.querySelectorAll('.canvas-node[data-type="pool"]').length;
+                    nodeName = `MaxPool ${poolCount + 1}`;
+                    dimensions = '32 × 13 × 13';
+                    break;
+                default:
+                    nodeName = 'Neural Node';
+                    dimensions = '64';
+            }
+            
+            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>
+            `;
+            
+            // Store dimensions for hover display
+            canvasNode.setAttribute('data-dimensions', dimensions);
+            canvasNode.setAttribute('data-name', nodeName);
+            
+            // Add to network layers
+            const layerInfo = {
+                id: layerId,
+                type: nodeType,
+                name: nodeName,
+                dimensions: dimensions,
+                position: { x, y }
+            };
+            
+            networkLayers.layers.push(layerInfo);
+            
+            // Add to canvas
+            canvas.appendChild(canvasNode);
+            
+            // Add events for moving nodes on the canvas
+            canvasNode.addEventListener('mousedown', startDrag);
+            
+            // Connection handling
+            const portIn = canvasNode.querySelector('.port-in');
+            const portOut = canvasNode.querySelector('.port-out');
+            
+            portOut.addEventListener('mousedown', (e) => {
+                e.stopPropagation();
+                startConnection(canvasNode, e);
+            });
+            
+            portIn.addEventListener('mouseup', (e) => {
+                e.stopPropagation();
+                endConnection(canvasNode);
+            });
+            
+            // Button event listeners
+            const editBtn = canvasNode.querySelector('.node-edit-btn');
+            if (editBtn) {
+                editBtn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    openLayerEditor(canvasNode);
+                });
+            }
+            
+            const deleteBtn = canvasNode.querySelector('.node-delete-btn');
+            if (deleteBtn) {
+                deleteBtn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    deleteNode(canvasNode);
+                });
+            }
+            
+            // Update node parameters (for sequential model validation)
+            updateLayerConnectivity();
+        }
+    }
+    
+    // Start dragging an existing node on the canvas
+    function startDrag(e) {
+        if (isConnecting) return;
+        
+        // Only start drag if not clicking on buttons or ports
+        if (e.target.closest('.node-controls') || e.target.closest('.node-port')) {
+            return;
+        }
+        
+        isDragging = true;
+        const target = e.target.closest('.canvas-node');
+        const rect = target.getBoundingClientRect();
+        
+        // Calculate offset
+        offsetX = e.clientX - rect.left;
+        offsetY = e.clientY - rect.top;
+        
+        document.addEventListener('mousemove', dragNode);
+        document.addEventListener('mouseup', stopDrag);
+        
+        // Reference to the dragged node
+        draggedNode = target;
+        
+        // Make the dragged node appear on top
+        draggedNode.style.zIndex = "100";
+        
+        // Add dragging class for visual feedback
+        draggedNode.classList.add('dragging');
+        
+        // Prevent default behavior
+        e.preventDefault();
+    }
+    
+    // Drag node on the canvas
+    function dragNode(e) {
+        if (!isDragging) return;
+        
+        const canvasRect = canvas.getBoundingClientRect();
+        let x = e.clientX - canvasRect.left - offsetX;
+        let y = e.clientY - canvasRect.top - offsetY;
+        
+        // Constrain to canvas
+        x = Math.max(0, Math.min(canvasRect.width - draggedNode.offsetWidth, x));
+        y = Math.max(0, Math.min(canvasRect.height - draggedNode.offsetHeight, y));
+        
+        draggedNode.style.left = `${x}px`;
+        draggedNode.style.top = `${y}px`;
+        
+        // Update node position in network layers
+        const nodeId = draggedNode.getAttribute('data-id');
+        const layerIndex = networkLayers.layers.findIndex(layer => layer.id === nodeId);
+        if (layerIndex !== -1) {
+            networkLayers.layers[layerIndex].position = { x, y };
+        }
+        
+        // Update connected lines if any
+        updateConnections();
+    }
+    
+    // Stop dragging
+    function stopDrag() {
+        if (!isDragging) return;
+        
+        isDragging = false;
+        document.removeEventListener('mousemove', dragNode);
+        document.removeEventListener('mouseup', stopDrag);
+        
+        // Reset z-index and remove dragging class
+        if (draggedNode) {
+            draggedNode.style.zIndex = "10";
+            draggedNode.classList.remove('dragging');
+            
+            // Trigger connections update one more time
+            updateConnections();
+        }
+    }
+    
+    // Start creating a connection between nodes
+    function startConnection(node, e) {
+        isConnecting = true;
+        startNode = node;
+        
+        // Create a temporary line
+        connectionLine = document.createElement('div');
+        connectionLine.className = 'connection temp-connection';
+        
+        // Get start position (center of the port)
+        const portOut = node.querySelector('.port-out');
+        const portRect = portOut.getBoundingClientRect();
+        const canvasRect = canvas.getBoundingClientRect();
+        
+        const startX = portRect.left + portRect.width / 2 - canvasRect.left;
+        const startY = portRect.top + portRect.height / 2 - canvasRect.top;
+        
+        // Position the line
+        connectionLine.style.left = `${startX}px`;
+        connectionLine.style.top = `${startY}px`;
+        connectionLine.style.width = '0px';
+        connectionLine.style.transform = 'rotate(0deg)';
+        
+        // Add active class to the starting port
+        portOut.classList.add('active-port');
+        
+        // Highlight valid target ports
+        highlightValidConnectionTargets(node);
+        
+        canvas.appendChild(connectionLine);
+        
+        // Add event listeners for drawing the line
+        document.addEventListener('mousemove', drawConnection);
+        document.addEventListener('mouseup', cancelConnection);
+        
+        e.preventDefault();
+    }
+    
+    // Highlight valid targets for connection
+    function highlightValidConnectionTargets(sourceNode) {
+        const sourceType = sourceNode.getAttribute('data-type');
+        const sourceId = sourceNode.getAttribute('data-id');
+        
+        document.querySelectorAll('.canvas-node').forEach(node => {
+            if (node !== sourceNode) {
+                const nodeType = node.getAttribute('data-type');
+                const nodeId = node.getAttribute('data-id');
+                const isValidTarget = isValidConnection(sourceType, nodeType, sourceId, nodeId);
+                
+                const portIn = node.querySelector('.port-in');
+                if (isValidTarget) {
+                    portIn.classList.add('valid-target');
+                } else {
+                    portIn.classList.add('invalid-target');
+                }
+            }
+        });
+    }
+    
+    // Remove highlights from all ports
+    function removePortHighlights() {
+        document.querySelectorAll('.port-in, .port-out').forEach(port => {
+            port.classList.remove('active-port', 'valid-target', 'invalid-target');
+        });
+    }
+    
+    // Check if a connection between two node types is valid
+    function isValidConnection(sourceType, targetType, sourceId, targetId) {
+        // Basic hierarchy validation
+        if (sourceType === 'output' || targetType === 'input') {
+            return false; // Output can't have outgoing connections, Input can't have incoming
+        }
+        
+        // Prevent cycles
+        const existingConnection = networkLayers.connections.find(
+            conn => conn.target === sourceId && conn.source === targetId
+        );
+        if (existingConnection) {
+            return false;
+        }
+        
+        // Specific connection rules
+        switch(sourceType) {
+            case 'input':
+                return ['hidden', 'conv'].includes(targetType);
+            case 'conv':
+                return ['conv', 'pool', 'hidden'].includes(targetType);
+            case 'pool':
+                return ['conv', 'hidden'].includes(targetType);
+            case 'hidden':
+                return ['hidden', 'output'].includes(targetType);
+            default:
+                return false;
+        }
+    }
+    
+    // Draw the connection line as mouse moves
+    function drawConnection(e) {
+        if (!isConnecting || !connectionLine) return;
+        
+        const canvasRect = canvas.getBoundingClientRect();
+        const portOut = startNode.querySelector('.port-out');
+        const portRect = portOut.getBoundingClientRect();
+        
+        // Calculate start and end points
+        const startX = portRect.left + portRect.width / 2 - canvasRect.left;
+        const startY = portRect.top + portRect.height / 2 - canvasRect.top;
+        const endX = e.clientX - canvasRect.left;
+        const endY = e.clientY - canvasRect.top;
+        
+        // Calculate length and angle
+        const length = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));
+        const angle = Math.atan2(endY - startY, endX - startX) * 180 / Math.PI;
+        
+        // Update line
+        connectionLine.style.width = `${length}px`;
+        connectionLine.style.transform = `rotate(${angle}deg)`;
+        
+        // Highlight the port under cursor
+        document.querySelectorAll('.canvas-node').forEach(node => {
+            if (node !== startNode) {
+                const nodeRect = node.getBoundingClientRect();
+                const portIn = node.querySelector('.port-in');
+                const portInRect = portIn.getBoundingClientRect();
+                
+                // Check if mouse is over the input port
+                if (e.clientX >= portInRect.left && e.clientX <= portInRect.right &&
+                    e.clientY >= portInRect.top && e.clientY <= portInRect.bottom) {
+                    portIn.classList.add('port-hover');
+                } else {
+                    portIn.classList.remove('port-hover');
+                }
+            }
+        });
+    }
+    
+    // Cancel connection creation
+    function cancelConnection(e) {
+        if (!isConnecting) return;
+        
+        // Find if we're over a valid input port
+        let targetNode = null;
+        document.querySelectorAll('.canvas-node').forEach(node => {
+            if (node !== startNode) {
+                const portIn = node.querySelector('.port-in');
+                const portRect = portIn.getBoundingClientRect();
+                
+                if (e.clientX >= portRect.left && e.clientX <= portRect.right &&
+                    e.clientY >= portRect.top && e.clientY <= portRect.bottom) {
+                    
+                    // Check if this would be a valid connection
+                    const sourceType = startNode.getAttribute('data-type');
+                    const targetType = node.getAttribute('data-type');
+                    const sourceId = startNode.getAttribute('data-id');
+                    const targetId = node.getAttribute('data-id');
+                    
+                    if (isValidConnection(sourceType, targetType, sourceId, targetId)) {
+                        targetNode = node;
+                    }
+                }
+            }
+        });
+        
+        // If we found a valid target, create the connection
+        if (targetNode) {
+            endConnection(targetNode);
+        } else {
+            // Otherwise, remove the temporary line
+            if (connectionLine && connectionLine.parentNode) {
+                connectionLine.parentNode.removeChild(connectionLine);
+            }
+        }
+        
+        // Remove all port highlights
+        removePortHighlights();
+        document.querySelectorAll('.port-hover').forEach(port => {
+            port.classList.remove('port-hover');
+        });
+        
+        // Reset variables
+        isConnecting = false;
+        startNode = null;
+        connectionLine = null;
+        
+        // Remove event listeners
+        document.removeEventListener('mousemove', drawConnection);
+        document.removeEventListener('mouseup', cancelConnection);
+    }
+    
+    // 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);
+        }
+        
+        // Remove port highlights
+        removePortHighlights();
+        
+        // Reset variables
+        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');
+            }
+        });
+        
+        // Trigger a custom event that the main script can listen for
+        const event = new CustomEvent('networkUpdated', { detail: networkLayers });
+        document.dispatchEvent(event);
+    }
+    
+    // Delete a node and its connections
+    function deleteNode(node) {
+        if (!node) return;
+        
+        const nodeId = node.getAttribute('data-id');
+        
+        // Remove all connections to/from this node
+        document.querySelectorAll(`.connection[data-source="${nodeId}"], .connection[data-target="${nodeId}"]`).forEach(conn => {
+            conn.parentNode.removeChild(conn);
+        });
+        
+        // Remove from network layers
+        networkLayers.layers = networkLayers.layers.filter(layer => layer.id !== nodeId);
+        networkLayers.connections = networkLayers.connections.filter(conn => 
+            conn.source !== nodeId && conn.target !== nodeId
+        );
+        
+        // Remove the node
+        node.parentNode.removeChild(node);
+        
+        // Update layer connectivity
+        updateLayerConnectivity();
+    }
+    
+    // Open layer editor modal
+    function openLayerEditor(node) {
+        if (!node) return;
+        
+        const nodeId = node.getAttribute('data-id');
+        const nodeType = node.getAttribute('data-type');
+        const nodeName = node.getAttribute('data-name');
+        const dimensions = node.getAttribute('data-dimensions');
+        
+        // Trigger custom event
+        const event = new CustomEvent('openLayerEditor', { 
+            detail: { id: nodeId, type: nodeType, name: nodeName, dimensions: dimensions }
+        });
+        document.dispatchEvent(event);
+    }
+    
+    // Update connections when nodes are moved
+    function updateConnections() {
+        const connections = document.querySelectorAll('.connection');
+        connections.forEach(connection => {
+            const sourceId = connection.getAttribute('data-source');
+            const targetId = connection.getAttribute('data-target');
+            
+            const sourceNode = document.querySelector(`.canvas-node[data-id="${sourceId}"]`);
+            const targetNode = document.querySelector(`.canvas-node[data-id="${targetId}"]`);
+            
+            if (sourceNode && targetNode) {
+                const sourcePort = sourceNode.querySelector('.port-out');
+                const targetPort = targetNode.querySelector('.port-in');
+                
+                if (sourcePort && targetPort) {
+                    const sourceRect = sourcePort.getBoundingClientRect();
+                    const targetRect = targetPort.getBoundingClientRect();
+                    const canvasRect = canvas.getBoundingClientRect();
+                    
+                    const startX = sourceRect.left + sourceRect.width / 2 - canvasRect.left;
+                    const startY = sourceRect.top + sourceRect.height / 2 - canvasRect.top;
+                    const endX = targetRect.left + targetRect.width / 2 - canvasRect.left;
+                    const endY = targetRect.top + targetRect.height / 2 - canvasRect.top;
+                    
+                    const length = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));
+                    const angle = Math.atan2(endY - startY, endX - startX) * 180 / Math.PI;
+                    
+                    connection.style.left = `${startX}px`;
+                    connection.style.top = `${startY}px`;
+                    connection.style.width = `${length}px`;
+                    connection.style.transform = `rotate(${angle}deg)`;
+                }
+            } else {
+                // If either node is missing, remove the connection
+                if (connection.parentNode) {
+                    connection.parentNode.removeChild(connection);
+                    
+                    // Remove from the connections array
+                    const connIndex = networkLayers.connections.findIndex(conn => 
+                        conn.source === sourceId && conn.target === targetId
+                    );
+                    if (connIndex !== -1) {
+                        networkLayers.connections.splice(connIndex, 1);
+                    }
+                }
+            }
+        });
+    }
+    
+    // Get the current network architecture
+    function getNetworkArchitecture() {
+        return networkLayers;
+    }
+    
+    // Clear all nodes from the canvas
+    function clearAllNodes() {
+        // Clear all nodes and connections
+        document.querySelectorAll('.canvas-node, .connection').forEach(el => {
+            el.parentNode.removeChild(el);
+        });
+        
+        // Reset network layers
+        networkLayers = {
+            layers: [],
+            connections: []
+        };
+        
+        // Reset layer counter
+        window.neuralNetwork.resetLayerCounter();
+        
+        // Show the canvas hint
+        const canvasHint = document.querySelector('.canvas-hint');
+        if (canvasHint) {
+            canvasHint.style.display = 'block';
+        }
+        
+        // Trigger network updated event
+        const event = new CustomEvent('networkUpdated', { detail: networkLayers });
+        document.dispatchEvent(event);
+    }
+    
+    // Export functions
+    window.dragDrop = {
+        getNetworkArchitecture,
+        clearAllNodes,
+        updateConnections
+    };
+} 

js/main.js

@@ -0,0 +1,856 @@
+// Initialize the application when the DOM is fully loaded
+document.addEventListener('DOMContentLoaded', () => {
+    console.log('Neural Network Playground Initialized');
+    
+    // Initialize the canvas and tooltip
+    const canvas = document.getElementById('network-canvas');
+    const tooltip = document.createElement('div');
+    tooltip.className = 'canvas-tooltip';
+    tooltip.innerHTML = `
+        <div class="tooltip-header"></div>
+        <div class="tooltip-content"></div>
+    `;
+    document.body.appendChild(tooltip);
+    
+    // Initialize drag and drop functionality
+    initializeDragAndDrop();
+    
+    // Network configuration (from UI controls)
+    let networkConfig = {
+        learningRate: 0.01,
+        activation: 'relu',
+        batchSize: 32,
+        epochs: 10
+    };
+    
+    // Initialize UI controls
+    setupUIControls();
+    
+    // Layer editor modal
+    setupLayerEditor();
+    
+    // Listen for network updates
+    document.addEventListener('networkUpdated', handleNetworkUpdate);
+    
+    // Listen for layer editor events
+    document.addEventListener('openLayerEditor', handleOpenLayerEditor);
+    
+    // Setup UI controls and event listeners
+    function setupUIControls() {
+        // 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);
+            
+            learningRateSlider.addEventListener('input', (e) => {
+                networkConfig.learningRate = parseFloat(e.target.value);
+                learningRateValue.textContent = networkConfig.learningRate.toFixed(3);
+            });
+        }
+        
+        // Activation function dropdown
+        const activationSelect = document.getElementById('activation');
+        if (activationSelect) {
+            activationSelect.value = networkConfig.activation;
+            
+            activationSelect.addEventListener('change', (e) => {
+                networkConfig.activation = e.target.value;
+                updateActivationFunctionGraph(networkConfig.activation);
+            });
+        }
+        
+        // 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);
+            });
+        });
+        
+        // Button event listeners
+        const runButton = document.getElementById('run-network');
+        if (runButton) {
+            runButton.addEventListener('click', runNetwork);
+        }
+        
+        const clearButton = document.getElementById('clear-canvas');
+        if (clearButton) {
+            clearButton.addEventListener('click', clearCanvas);
+        }
+        
+        // Modal handlers
+        setupModals();
+    }
+    
+    // Setup modal handlers
+    function setupModals() {
+        const aboutModal = document.getElementById('about-modal');
+        const aboutLink = document.getElementById('about-link');
+        
+        if (aboutLink && aboutModal) {
+            aboutLink.addEventListener('click', (e) => {
+                e.preventDefault();
+                openModal(aboutModal);
+            });
+            
+            const closeButtons = aboutModal.querySelectorAll('.close-modal');
+            closeButtons.forEach(btn => {
+                btn.addEventListener('click', () => {
+                    closeModal(aboutModal);
+                });
+            });
+            
+            // Close modal when clicking outside
+            aboutModal.addEventListener('click', (e) => {
+                if (e.target === aboutModal) {
+                    closeModal(aboutModal);
+                }
+            });
+        }
+    }
+    
+    // Setup layer editor modal
+    function setupLayerEditor() {
+        const layerEditorModal = document.getElementById('layer-editor-modal');
+        
+        if (layerEditorModal) {
+            const closeButtons = layerEditorModal.querySelectorAll('.close-modal');
+            closeButtons.forEach(btn => {
+                btn.addEventListener('click', () => {
+                    closeModal(layerEditorModal);
+                });
+            });
+            
+            // Close modal when clicking outside
+            layerEditorModal.addEventListener('click', (e) => {
+                if (e.target === layerEditorModal) {
+                    closeModal(layerEditorModal);
+                }
+            });
+            
+            // Save button
+            const saveButton = layerEditorModal.querySelector('.save-layer-btn');
+            if (saveButton) {
+                saveButton.addEventListener('click', saveLayerConfig);
+            }
+        }
+    }
+    
+    // Open modal
+    function openModal(modal) {
+        if (modal) {
+            modal.style.display = 'flex';
+        }
+    }
+    
+    // Close modal
+    function closeModal(modal) {
+        if (modal) {
+            modal.style.display = 'none';
+        }
+    }
+    
+    // Handle network updates
+    function handleNetworkUpdate(e) {
+        const networkLayers = e.detail;
+        console.log('Network updated:', networkLayers);
+        
+        // Update the properties panel
+        updatePropertiesPanel(networkLayers);
+    }
+    
+    // Update properties panel with network information
+    function updatePropertiesPanel(networkLayers) {
+        const propertiesPanel = document.querySelector('.props-panel');
+        if (!propertiesPanel) return;
+        
+        // Find the properties content section
+        const propsContent = propertiesPanel.querySelector('.props-content');
+        if (!propsContent) return;
+        
+        // Basic network stats
+        const layerCount = networkLayers.layers.length;
+        const connectionCount = networkLayers.connections.length;
+        
+        let layerTypeCounts = {};
+        networkLayers.layers.forEach(layer => {
+            layerTypeCounts[layer.type] = (layerTypeCounts[layer.type] || 0) + 1;
+        });
+        
+        // Check network validity
+        const validationResult = window.neuralNetwork.validateNetwork(
+            networkLayers.layers,
+            networkLayers.connections
+        );
+        
+        // Update network architecture section
+        let networkArchitectureHTML = `
+            <div class="props-section">
+                <div class="props-heading">
+                    <i class="icon">🔍</i> Network Architecture
+                </div>
+                <div class="props-row">
+                    <div class="props-key">Total Layers</div>
+                    <div class="props-value">${layerCount}</div>
+                </div>
+                <div class="props-row">
+                    <div class="props-key">Connections</div>
+                    <div class="props-value">${connectionCount}</div>
+                </div>
+        `;
+        
+        // Add layer type counts
+        Object.entries(layerTypeCounts).forEach(([type, count]) => {
+            networkArchitectureHTML += `
+                <div class="props-row">
+                    <div class="props-key">${type.charAt(0).toUpperCase() + type.slice(1)} Layers</div>
+                    <div class="props-value">${count}</div>
+                </div>
+            `;
+        });
+        
+        // Add validation status
+        networkArchitectureHTML += `
+            <div class="props-row">
+                <div class="props-key">Validity</div>
+                <div class="props-value" style="color: ${validationResult.valid ? 'var(--secondary-color)' : 'var(--warning-color)'}">
+                    ${validationResult.valid ? 'Valid' : 'Invalid'}
+                </div>
+            </div>
+        `;
+        
+        // If there are validation errors, show them
+        if (!validationResult.valid && validationResult.errors.length > 0) {
+            networkArchitectureHTML += `
+                <div class="props-row">
+                    <div class="props-key">Errors</div>
+                    <div class="props-value" style="color: var(--warning-color)">
+                        ${validationResult.errors.join('<br>')}
+                    </div>
+                </div>
+            `;
+        }
+        
+        networkArchitectureHTML += `</div>`;
+        
+        // Calculate total parameters if we have layers
+        let totalParameters = 0;
+        let totalFlops = 0;
+        let totalMemory = 0;
+        
+        if (layerCount > 0) {
+            // Calculate model stats
+            const modelStatsHTML = `
+                <div class="props-section">
+                    <div class="props-heading">
+                        <i class="icon">📊</i> Model Statistics
+                    </div>
+                    <div class="props-row">
+                        <div class="props-key">Parameters</div>
+                        <div class="props-value">${formatNumber(totalParameters)}</div>
+                    </div>
+                    <div class="props-row">
+                        <div class="props-key">FLOPs</div>
+                        <div class="props-value">${formatNumber(totalFlops)}</div>
+                    </div>
+                    <div class="props-row">
+                        <div class="props-key">Memory</div>
+                        <div class="props-value">${formatMemorySize(totalMemory)}</div>
+                    </div>
+                </div>
+            `;
+            
+            // Update the properties content
+            propsContent.innerHTML = networkArchitectureHTML + modelStatsHTML;
+        } else {
+            // Just show basic architecture info
+            propsContent.innerHTML = networkArchitectureHTML;
+        }
+    }
+    
+    // Format number with K, M, B suffixes
+    function formatNumber(num) {
+        if (num === 0) return '0';
+        if (!num) return 'N/A';
+        
+        if (num >= 1e9) return (num / 1e9).toFixed(2) + 'B';
+        if (num >= 1e6) return (num / 1e6).toFixed(2) + 'M';
+        if (num >= 1e3) return (num / 1e3).toFixed(2) + 'K';
+        return num.toString();
+    }
+    
+    // Format memory size in bytes to KB, MB, GB
+    function formatMemorySize(bytes) {
+        if (bytes === 0) return '0 Bytes';
+        if (!bytes) return 'N/A';
+        
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    }
+    
+    // Handle opening the layer editor
+    function handleOpenLayerEditor(e) {
+        const layerDetails = e.detail;
+        console.log('Opening layer editor for:', layerDetails);
+        
+        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;
+        
+        // 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');
+        if (modalTitle) {
+            modalTitle.textContent = `Edit ${layerDetails.name}`;
+        }
+        
+        // Get layer config template
+        const layerConfig = window.neuralNetwork.nodeConfigTemplates[layerDetails.type];
+        
+        // Generate form fields based on layer type
+        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) {
+            case 'input':
+                layerForm.innerHTML += `
+                    <div class="form-group">
+                        <label for="input-shape">Input Shape</label>
+                        <input type="text" id="input-shape" value="${layerConfig.shape.join(' × ')}">
+                    </div>
+                    <div class="form-group">
+                        <label for="batch-size">Batch Size</label>
+                        <input type="number" id="batch-size" value="${layerConfig.batchSize}">
+                    </div>
+                `;
+                break;
+                
+            case 'hidden':
+                layerForm.innerHTML += `
+                    <div class="form-group">
+                        <label for="units">Units</label>
+                        <input type="number" id="units" value="${layerConfig.units}">
+                    </div>
+                    <div class="form-group">
+                        <label for="activation">Activation</label>
+                        <select id="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>
+                        </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>
+                    </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}">
+                    </div>
+                `;
+                break;
+                
+            case 'output':
+                layerForm.innerHTML += `
+                    <div class="form-group">
+                        <label for="units">Units</label>
+                        <input type="number" id="units" value="${layerConfig.units}">
+                    </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>
+                        </select>
+                    </div>
+                `;
+                break;
+                
+            case 'conv':
+                layerForm.innerHTML += `
+                    <div class="form-group">
+                        <label for="filters">Filters</label>
+                        <input type="number" id="filters" value="${layerConfig.filters}">
+                    </div>
+                    <div class="form-group">
+                        <label for="kernel-size">Kernel Size</label>
+                        <input type="text" id="kernel-size" value="${layerConfig.kernelSize.join(' × ')}">
+                    </div>
+                    <div class="form-group">
+                        <label for="strides">Strides</label>
+                        <input type="text" id="strides" value="${layerConfig.strides.join(' × ')}">
+                    </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>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label for="activation">Activation</label>
+                        <select id="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>
+                        </select>
+                    </div>
+                `;
+                break;
+                
+            case 'pool':
+                layerForm.innerHTML += `
+                    <div class="form-group">
+                        <label for="pool-size">Pool Size</label>
+                        <input type="text" id="pool-size" value="${layerConfig.poolSize.join(' × ')}">
+                    </div>
+                    <div class="form-group">
+                        <label for="strides">Strides</label>
+                        <input type="text" id="strides" value="${layerConfig.strides.join(' × ')}">
+                    </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>
+                        </select>
+                    </div>
+                `;
+                break;
+        }
+        
+        // Add save button
+        layerForm.innerHTML += `
+            <div class="form-group form-grid-full">
+                <button type="button" class="btn btn-primary save-layer-btn">Save Changes</button>
+            </div>
+        `;
+        
+        // Show the modal
+        openModal(layerEditorModal);
+    }
+    
+    // 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');
+        
+        // Get node on canvas
+        const node = document.querySelector(`.canvas-node[data-id="${layerId}"]`);
+        if (!node) return;
+        
+        // Get form values
+        const name = document.getElementById('layer-name').value;
+        
+        // Update node title
+        const nodeTitle = node.querySelector('.node-title');
+        if (nodeTitle) {
+            nodeTitle.textContent = name;
+        }
+        
+        // Update node data attribute
+        node.setAttribute('data-name', name);
+        
+        // Update dimensions based on layer type
+        let dimensions = '';
+        switch (layerType) {
+            case 'input':
+                const inputShape = document.getElementById('input-shape').value;
+                dimensions = inputShape;
+                break;
+                
+            case 'hidden':
+            case 'output':
+                const units = document.getElementById('units').value;
+                dimensions = units;
+                break;
+                
+            case 'conv':
+                const filters = document.getElementById('filters').value;
+                dimensions = `${filters} × 26 × 26`; // Simplified
+                break;
+                
+            case 'pool':
+                dimensions = '32 × 13 × 13'; // Simplified
+                break;
+        }
+        
+        // Update node dimensions
+        const nodeDimensions = node.querySelector('.node-dimensions');
+        if (nodeDimensions) {
+            nodeDimensions.textContent = dimensions;
+        }
+        
+        // Update node data attribute
+        node.setAttribute('data-dimensions', dimensions);
+        
+        // Update network layers in drag-drop module
+        const networkLayers = window.dragDrop.getNetworkArchitecture();
+        const layerIndex = networkLayers.layers.findIndex(layer => layer.id === layerId);
+        
+        if (layerIndex !== -1) {
+            networkLayers.layers[layerIndex].name = name;
+            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
+    function handleSampleSelection(sampleId) {
+        // Set active sample
+        document.querySelectorAll('.sample-item').forEach(item => {
+            item.classList.remove('active');
+            if (item.getAttribute('data-sample') === sampleId) {
+                item.classList.add('active');
+            }
+        });
+        
+        // Get sample data
+        const sampleData = window.neuralNetwork.sampleData[sampleId];
+        if (!sampleData) return;
+        
+        console.log(`Selected sample: ${sampleData.name}`);
+        
+        // Update properties panel to show sample info
+        const propertiesPanel = document.querySelector('.props-panel');
+        if (!propertiesPanel) return;
+        
+        const propsContent = propertiesPanel.querySelector('.props-content');
+        if (!propsContent) return;
+        
+        propsContent.innerHTML = `
+            <div class="props-section">
+                <div class="props-heading">
+                    <i class="icon">📊</i> ${sampleData.name}
+                </div>
+                <div class="props-row">
+                    <div class="props-key">Input Shape</div>
+                    <div class="props-value">${sampleData.inputShape.join(' × ')}</div>
+                </div>
+                <div class="props-row">
+                    <div class="props-key">Classes</div>
+                    <div class="props-value">${sampleData.numClasses}</div>
+                </div>
+                <div class="props-row">
+                    <div class="props-key">Training Samples</div>
+                    <div class="props-value">${sampleData.trainSamples.toLocaleString()}</div>
+                </div>
+                <div class="props-row">
+                    <div class="props-key">Test Samples</div>
+                    <div class="props-value">${sampleData.testSamples.toLocaleString()}</div>
+                </div>
+                <div class="props-row">
+                    <div class="props-key">Description</div>
+                    <div class="props-value">${sampleData.description}</div>
+                </div>
+            </div>
+            
+            <div class="props-section">
+                <p class="hint-text">Click "Run Network" to train on this dataset</p>
+            </div>
+        `;
+    }
+    
+    // Function to run the neural network simulation
+    function runNetwork() {
+        console.log('Running neural network simulation with config:', networkConfig);
+        
+        // Get the current network architecture
+        const networkLayers = window.dragDrop.getNetworkArchitecture();
+        
+        // Check if we have a valid network
+        if (networkLayers.layers.length === 0) {
+            alert('Please add some nodes to the network first!');
+            return;
+        }
+        
+        // Validate the network
+        const validationResult = window.neuralNetwork.validateNetwork(
+            networkLayers.layers,
+            networkLayers.connections
+        );
+        
+        if (!validationResult.valid) {
+            alert('Network is not valid: ' + validationResult.errors.join('\n'));
+            return;
+        }
+        
+        // Add animation class to all nodes
+        document.querySelectorAll('.canvas-node').forEach(node => {
+            node.classList.add('highlight-pulse');
+        });
+        
+        // Animate connections to show data flow
+        document.querySelectorAll('.connection').forEach((connection, index) => {
+            setTimeout(() => {
+                connection.style.background = 'linear-gradient(90deg, var(--primary-color), var(--accent-color))';
+                
+                // Reset after animation
+                setTimeout(() => {
+                    connection.style.background = '';
+                }, 800);
+            }, 300 * index);
+        });
+        
+        // Simulate training
+        simulateTraining();
+        
+        // Reset animations after completion
+        setTimeout(() => {
+            document.querySelectorAll('.canvas-node').forEach(node => {
+                node.classList.remove('highlight-pulse');
+            });
+        }, 3000);
+    }
+    
+    // Simulate training progress
+    function simulateTraining() {
+        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
+            
+            progressBar.style.width = `${progress}%`;
+            lossValue.textContent = loss.toFixed(4);
+            accuracyValue.textContent = accuracy.toFixed(2);
+            
+            if (progress >= 100) {
+                clearInterval(interval);
+            }
+        }, 300);
+    }
+    
+    // Function to clear all nodes from the canvas
+    function clearCanvas() {
+        if (window.dragDrop && typeof window.dragDrop.clearAllNodes === 'function') {
+            window.dragDrop.clearAllNodes();
+        }
+        
+        // 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');
+        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');
+        
+        // Clear canvas
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        
+        // Set background
+        ctx.fillStyle = '#f8f9fa';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        
+        // 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();
+        
+        switch(activationType) {
+            case 'relu':
+                ctx.moveTo(0, canvas.height / 2);
+                ctx.lineTo(canvas.width / 2, canvas.height / 2);
+                ctx.lineTo(canvas.width, 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);
+                }
+                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
+                );
+                break;
+                
+            default: // Linear
+                ctx.moveTo(0, canvas.height * 0.8);
+                ctx.lineTo(canvas.width, canvas.height * 0.2);
+        }
+        
+        ctx.stroke();
+        
+        // Add label
+        ctx.fillStyle = 'var(--text-color)';
+        ctx.font = '12px Arial';
+        ctx.textAlign = 'center';
+        ctx.fillText(activationType, canvas.width / 2, canvas.height - 10);
+    }
+    
+    // Setup node hover effects for tooltips
+    canvas.addEventListener('mouseover', (e) => {
+        const node = e.target.closest('.canvas-node');
+        if (node) {
+            const rect = node.getBoundingClientRect();
+            const nodeType = node.getAttribute('data-type');
+            const nodeName = node.getAttribute('data-name');
+            const dimensions = node.getAttribute('data-dimensions');
+            
+            // Show tooltip
+            tooltip.style.display = 'block';
+            tooltip.style.left = `${rect.right + 10}px`;
+            tooltip.style.top = `${rect.top}px`;
+            
+            const tooltipHeader = tooltip.querySelector('.tooltip-header');
+            const tooltipContent = tooltip.querySelector('.tooltip-content');
+            
+            if (tooltipHeader && tooltipContent) {
+                tooltipHeader.textContent = nodeName;
+                
+                let content = '';
+                content += `<div class="tooltip-row">
+                    <div class="tooltip-label">Type:</div>
+                    <div class="tooltip-value">${nodeType.charAt(0).toUpperCase() + nodeType.slice(1)}</div>
+                </div>`;
+                
+                content += `<div class="tooltip-row">
+                    <div class="tooltip-label">Dimensions:</div>
+                    <div class="tooltip-value">${dimensions}</div>
+                </div>`;
+                
+                // Get config template
+                const configTemplate = window.neuralNetwork.nodeConfigTemplates[nodeType];
+                
+                if (configTemplate) {
+                    if (configTemplate.activation) {
+                        content += `<div class="tooltip-row">
+                            <div class="tooltip-label">Activation:</div>
+                            <div class="tooltip-value">${configTemplate.activation}</div>
+                        </div>`;
+                    }
+                    
+                    if (configTemplate.description) {
+                        content += `<div class="tooltip-row">
+                            <div class="tooltip-label">Description:</div>
+                            <div class="tooltip-value">${configTemplate.description}</div>
+                        </div>`;
+                    }
+                }
+                
+                tooltipContent.innerHTML = content;
+            }
+        }
+    });
+    
+    canvas.addEventListener('mouseout', (e) => {
+        const node = e.target.closest('.canvas-node');
+        if (node) {
+            tooltip.style.display = 'none';
+        }
+    });
+    
+    // Make sure tooltip follows cursor for nodes that are being dragged
+    canvas.addEventListener('mousemove', (e) => {
+        const node = e.target.closest('.canvas-node');
+        if (node && node.classList.contains('dragging')) {
+            const rect = node.getBoundingClientRect();
+            tooltip.style.left = `${rect.right + 10}px`;
+            tooltip.style.top = `${rect.top}px`;
+        }
+    });
+}); 

js/neural-network.js

@@ -0,0 +1,460 @@
+/**
+ * Neural Network Tools and Utilities
+ * Provides helper functions for managing neural network layers,
+ * calculating parameters, and managing network architecture
+ */
+
+(function() {
+    // Layer counters to track unique IDs for each layer type
+    const layerCounters = {
+        'input': 0,
+        'hidden': 0,
+        'output': 0,
+        'conv': 0,
+        'pool': 0
+    };
+    
+    // Default configuration templates for different layer types
+    const nodeConfigTemplates = {
+        'input': {
+            units: 784,
+            shape: [28, 28, 1],
+            batchSize: 32,
+            description: 'Input layer for raw data',
+            parameters: 0
+        },
+        'hidden': {
+            units: 128,
+            activation: 'relu',
+            useBias: true,
+            kernelInitializer: 'glorotUniform',
+            biasInitializer: 'zeros',
+            dropoutRate: 0.2,
+            description: 'Dense hidden layer with ReLU activation'
+        },
+        'output': {
+            units: 10,
+            activation: 'softmax',
+            useBias: true,
+            kernelInitializer: 'glorotUniform',
+            biasInitializer: 'zeros',
+            description: 'Output layer with Softmax activation for classification'
+        },
+        'conv': {
+            filters: 32,
+            kernelSize: [3, 3],
+            strides: [1, 1],
+            padding: 'valid',
+            activation: 'relu',
+            useBias: true,
+            kernelInitializer: 'glorotUniform',
+            biasInitializer: 'zeros',
+            description: 'Convolutional layer for feature extraction'
+        },
+        'pool': {
+            poolSize: [2, 2],
+            strides: [2, 2],
+            padding: 'valid',
+            description: 'Max pooling layer for spatial downsampling'
+        }
+    };
+    
+    // Mock data structure for sample datasets
+    const sampleData = {
+        'mnist': {
+            name: 'MNIST Handwritten Digits',
+            inputShape: [28, 28, 1],
+            numClasses: 10,
+            trainSamples: 60000,
+            testSamples: 10000,
+            description: 'Dataset of handwritten digits for classification'
+        },
+        'cifar10': {
+            name: 'CIFAR-10',
+            inputShape: [32, 32, 3],
+            numClasses: 10,
+            trainSamples: 50000,
+            testSamples: 10000,
+            description: 'Dataset of common objects like airplanes, cars, birds, etc.'
+        },
+        'fashion': {
+            name: 'Fashion MNIST',
+            inputShape: [28, 28, 1],
+            numClasses: 10,
+            trainSamples: 60000,
+            testSamples: 10000,
+            description: 'Dataset of fashion items like shirts, shoes, bags, etc.'
+        }
+    };
+    
+    /**
+     * Get the next unique ID for a specific layer type
+     * @param {string} layerType - The type of the layer (input, hidden, output, conv, pool)
+     * @returns {string} - A unique ID for the layer
+     */
+    function getNextLayerId(layerType) {
+        layerCounters[layerType]++;
+        return `${layerType}-${layerCounters[layerType]}`;
+    }
+    
+    /**
+     * Reset all layer counters
+     * Used when clearing the canvas
+     */
+    function resetLayerCounter() {
+        for (let key in layerCounters) {
+            layerCounters[key] = 0;
+        }
+    }
+    
+    /**
+     * Create a configuration object for a layer
+     * @param {string} layerType - The type of the layer
+     * @param {Object} customConfig - Custom configuration for the layer
+     * @returns {Object} - Complete layer configuration
+     */
+    function createNodeConfig(layerType, customConfig = {}) {
+        const baseConfig = { ...nodeConfigTemplates[layerType] };
+        
+        // Merge custom config with base config
+        const config = { ...baseConfig, ...customConfig };
+        
+        // Calculate parameters if not provided
+        if (config.parameters === undefined) {
+            config.parameters = calculateParameters(layerType, config);
+        }
+        
+        return config;
+    }
+    
+    /**
+     * Calculate the number of parameters for a layer
+     * @param {string} layerType - The type of the layer
+     * @param {Object} config - Layer configuration
+     * @param {Object} prevLayerConfig - Previous layer configuration (for connections)
+     * @returns {number} - Number of trainable parameters
+     */
+    function calculateParameters(layerType, config, prevLayerConfig = null) {
+        let parameters = 0;
+        
+        switch(layerType) {
+            case 'input':
+                parameters = 0; // Input layer has no trainable parameters
+                break;
+                
+            case 'hidden':
+                if (prevLayerConfig) {
+                    const inputUnits = prevLayerConfig.units || 
+                                      (prevLayerConfig.shape ? 
+                                       prevLayerConfig.shape.reduce((a, b) => a * b, 1) : 
+                                       784);
+                    
+                    // Weight parameters: input_units * output_units
+                    parameters = inputUnits * config.units;
+                    
+                    // Add bias parameters if using bias
+                    if (config.useBias) {
+                        parameters += config.units;
+                    }
+                }
+                break;
+                
+            case 'output':
+                if (prevLayerConfig) {
+                    const inputUnits = prevLayerConfig.units || 128;
+                    
+                    // Weight parameters: input_units * output_units
+                    parameters = inputUnits * config.units;
+                    
+                    // Add bias parameters if using bias
+                    if (config.useBias) {
+                        parameters += config.units;
+                    }
+                }
+                break;
+                
+            case 'conv':
+                if (prevLayerConfig) {
+                    const inputChannels = prevLayerConfig.shape ? 
+                                         prevLayerConfig.shape[2] || 1 : 
+                                         (prevLayerConfig.filters || 1);
+                    
+                    // Weight parameters: kernel_height * kernel_width * input_channels * filters
+                    const kernelSize = Array.isArray(config.kernelSize) ? 
+                                      config.kernelSize[0] * config.kernelSize[1] : 
+                                      config.kernelSize * config.kernelSize;
+                    
+                    parameters = kernelSize * inputChannels * config.filters;
+                    
+                    // Add bias parameters if using bias
+                    if (config.useBias) {
+                        parameters += config.filters;
+                    }
+                }
+                break;
+                
+            case 'pool':
+                parameters = 0; // Pooling layers have no trainable parameters
+                break;
+                
+            default:
+                parameters = 0;
+        }
+        
+        return parameters;
+    }
+    
+    /**
+     * Calculate FLOPs (floating point operations) for a layer
+     * @param {string} layerType - The type of the layer
+     * @param {Object} config - Layer configuration
+     * @param {Object} inputDims - Input dimensions
+     * @returns {number} - Approximate FLOPs for forward pass
+     */
+    function calculateFLOPs(layerType, config, inputDims) {
+        let flops = 0;
+        
+        switch(layerType) {
+            case 'input':
+                flops = 0;
+                break;
+                
+            case 'hidden':
+                // FLOPs = 2 * input_dim * output_dim (multiply-add operations)
+                flops = 2 * inputDims.reduce((a, b) => a * b, 1) * config.units;
+                break;
+                
+            case 'output':
+                // Same as hidden layer
+                flops = 2 * inputDims.reduce((a, b) => a * b, 1) * config.units;
+                break;
+                
+            case 'conv':
+                // Output dimensions after convolution
+                const outputHeight = Math.floor((inputDims[0] - config.kernelSize[0] + 2 * 
+                                               (config.padding === 'same' ? config.kernelSize[0] / 2 : 0)) / 
+                                               config.strides[0] + 1);
+                                               
+                const outputWidth = Math.floor((inputDims[1] - config.kernelSize[1] + 2 * 
+                                              (config.padding === 'same' ? config.kernelSize[1] / 2 : 0)) / 
+                                              config.strides[1] + 1);
+                
+                // FLOPs per output point = 2 * kernel_height * kernel_width * input_channels
+                const flopsPerPoint = 2 * config.kernelSize[0] * config.kernelSize[1] * inputDims[2];
+                
+                // Total FLOPs = output_points * flops_per_point * output_channels
+                flops = outputHeight * outputWidth * flopsPerPoint * config.filters;
+                break;
+                
+            case 'pool':
+                // Output dimensions after pooling
+                const poolOutputHeight = Math.floor((inputDims[0] - config.poolSize[0]) / 
+                                                  config.strides[0] + 1);
+                                                  
+                const poolOutputWidth = Math.floor((inputDims[1] - config.poolSize[1]) / 
+                                                 config.strides[1] + 1);
+                
+                // For max pooling, approximately one comparison per element in the pooling window
+                flops = poolOutputHeight * poolOutputWidth * inputDims[2] * 
+                       config.poolSize[0] * config.poolSize[1];
+                break;
+                
+            default:
+                flops = 0;
+        }
+        
+        return flops;
+    }
+    
+    /**
+     * Calculate memory usage for a layer
+     * @param {string} layerType - The type of the layer
+     * @param {Object} config - Layer configuration
+     * @param {Object} batchSize - Batch size for calculation
+     * @returns {Object} - Memory usage statistics
+     */
+    function calculateMemoryUsage(layerType, config, batchSize = 32) {
+        // Assume 4 bytes per parameter (float32)
+        const bytesPerParam = 4;
+        let outputShape = [];
+        let parameters = 0;
+        let activationMemory = 0;
+        
+        switch(layerType) {
+            case 'input':
+                outputShape = config.shape || [28, 28, 1];
+                parameters = 0;
+                break;
+                
+            case 'hidden':
+                outputShape = [config.units];
+                parameters = config.parameters || 0;
+                break;
+                
+            case 'output':
+                outputShape = [config.units];
+                parameters = config.parameters || 0;
+                break;
+                
+            case 'conv':
+                // This is a simplified calculation, actual dimensions depend on padding and strides
+                const inputShape = config.inputShape || [28, 28, 1];
+                const outputHeight = Math.floor((inputShape[0] - config.kernelSize[0] + 2 * 
+                                               (config.padding === 'same' ? config.kernelSize[0] / 2 : 0)) / 
+                                               config.strides[0] + 1);
+                                               
+                const outputWidth = Math.floor((inputShape[1] - config.kernelSize[1] + 2 * 
+                                              (config.padding === 'same' ? config.kernelSize[1] / 2 : 0)) / 
+                                              config.strides[1] + 1);
+                
+                outputShape = [outputHeight, outputWidth, config.filters];
+                parameters = config.parameters || 0;
+                break;
+                
+            case 'pool':
+                const poolInputShape = config.inputShape || [28, 28, 32];
+                const poolOutputHeight = Math.floor((poolInputShape[0] - config.poolSize[0]) / 
+                                                  config.strides[0] + 1);
+                                                  
+                const poolOutputWidth = Math.floor((poolInputShape[1] - config.poolSize[1]) / 
+                                                 config.strides[1] + 1);
+                
+                outputShape = [poolOutputHeight, poolOutputWidth, poolInputShape[2]];
+                parameters = 0;
+                break;
+                
+            default:
+                outputShape = [0];
+                parameters = 0;
+        }
+        
+        // Calculate memory for the activations (output of this layer)
+        activationMemory = batchSize * outputShape.reduce((a, b) => a * b, 1) * bytesPerParam;
+        
+        // Calculate memory for the parameters
+        const paramMemory = parameters * bytesPerParam;
+        
+        return {
+            parameters: parameters,
+            paramMemory: paramMemory, // in bytes
+            activationMemory: activationMemory, // in bytes
+            totalMemory: paramMemory + activationMemory, // in bytes
+            outputShape: outputShape
+        };
+    }
+    
+    /**
+     * Generate a human-readable description of a layer
+     * @param {string} layerType - The type of the layer
+     * @param {Object} config - Layer configuration
+     * @returns {string} - Description of the layer
+     */
+    function generateLayerDescription(layerType, config) {
+        let description = '';
+        
+        switch(layerType) {
+            case 'input':
+                description = `Input Layer: Shape=${config.shape.join('×')}`;
+                break;
+                
+            case 'hidden':
+                description = `Dense Layer: ${config.units} units, ${config.activation} activation`;
+                if (config.dropoutRate > 0) {
+                    description += `, dropout ${config.dropoutRate}`;
+                }
+                break;
+                
+            case 'output':
+                description = `Output Layer: ${config.units} units, ${config.activation} activation`;
+                break;
+                
+            case 'conv':
+                description = `Conv2D: ${config.filters} filters, ${config.kernelSize.join('×')} kernel, ${config.activation} activation`;
+                break;
+                
+            case 'pool':
+                description = `MaxPooling2D: ${config.poolSize.join('×')} pool size`;
+                break;
+                
+            default:
+                description = 'Unknown layer type';
+        }
+        
+        return description;
+    }
+    
+    /**
+     * Validate a network architecture
+     * @param {Object} layers - Array of layer configurations
+     * @param {Object} connections - Array of connections between layers
+     * @returns {Object} - Validation result with errors if any
+     */
+    function validateNetwork(layers, connections) {
+        const errors = [];
+        
+        // Check if there's exactly one input layer
+        const inputLayers = layers.filter(layer => layer.type === 'input');
+        if (inputLayers.length === 0) {
+            errors.push('Network must have at least one input layer');
+        } else if (inputLayers.length > 1) {
+            errors.push('Network can have only one input layer');
+        }
+        
+        // Check if there's at least one output layer
+        const outputLayers = layers.filter(layer => layer.type === 'output');
+        if (outputLayers.length === 0) {
+            errors.push('Network must have at least one output layer');
+        }
+        
+        // Check for isolated nodes (nodes with no connections)
+        const connectedNodes = new Set();
+        connections.forEach(conn => {
+            connectedNodes.add(conn.source);
+            connectedNodes.add(conn.target);
+        });
+        
+        const isolatedNodes = layers.filter(layer => !connectedNodes.has(layer.id));
+        if (isolatedNodes.length > 0) {
+            isolatedNodes.forEach(node => {
+                if (node.type !== 'input' && node.type !== 'output') {
+                    errors.push(`Layer "${node.name}" (${node.id}) is isolated`);
+                }
+            });
+        }
+        
+        // Check if input layer has incoming connections
+        inputLayers.forEach(layer => {
+            const incomingConnections = connections.filter(conn => conn.target === layer.id);
+            if (incomingConnections.length > 0) {
+                errors.push(`Input layer "${layer.name}" cannot have incoming connections`);
+            }
+        });
+        
+        // Check if output layer has outgoing connections
+        outputLayers.forEach(layer => {
+            const outgoingConnections = connections.filter(conn => conn.source === layer.id);
+            if (outgoingConnections.length > 0) {
+                errors.push(`Output layer "${layer.name}" cannot have outgoing connections`);
+            }
+        });
+        
+        return {
+            valid: errors.length === 0,
+            errors: errors
+        };
+    }
+    
+    // Expose functions to the global scope
+    window.neuralNetwork = {
+        getNextLayerId,
+        resetLayerCounter,
+        createNodeConfig,
+        calculateParameters,
+        calculateFLOPs,
+        calculateMemoryUsage,
+        generateLayerDescription,
+        validateNetwork,
+        nodeConfigTemplates,
+        sampleData
+    };
+})();