Upload 22 files

css/drag-drop-fix.css

@@ -0,0 +1,138 @@
+/* Enhanced dragging styles for the neural network playground */
+
+/* Ensure canvas nodes have proper cursor styles */
+.canvas-node {
+    cursor: grab !important;
+    /* Ensure proper z-indexing */
+    z-index: 10;
+    /* Smooth transitions for dragging effects */
+    transition: box-shadow 0.2s ease, transform 0.2s ease, z-index 0s;
+}
+
+/* Active dragging state */
+.canvas-node.dragging {
+    cursor: grabbing !important;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
+    /* Add a slight scale effect */
+    transform: scale(1.05) !important;
+    /* Make sure dragged node is on top */
+    z-index: 1000 !important;
+    /* Don't transition position while dragging */
+    transition: box-shadow 0.2s ease, transform 0.2s ease, z-index 0s !important;
+}
+
+/* Improve the connection lines */
+.connection {
+    z-index: 5;
+    height: 3px;
+    /* Add glow effect */
+    box-shadow: 0 0 8px rgba(52, 152, 219, 0.5);
+}
+
+/* Make node controls more visible on hover */
+.node-controls {
+    opacity: 0.6;
+    transition: opacity 0.2s ease;
+}
+
+.canvas-node:hover .node-controls {
+    opacity: 1;
+}
+
+/* Ensure node ports are visible and properly clickable */
+.node-port {
+    cursor: crosshair;
+    z-index: 20;
+    width: 14px;
+    height: 14px;
+}
+
+/* Make the body grab cursor apply while dragging in case cursor leaves the element */
+body.node-dragging {
+    cursor: grabbing !important;
+}
+
+/* Styles for the fixed drag-drop functionality */
+
+/* Improve node dragging */
+.node-dragging {
+    cursor: grabbing !important;
+}
+
+.canvas-node {
+    position: absolute;
+    z-index: 10;
+    transition: box-shadow 0.2s ease-in-out;
+}
+
+.canvas-node.dragging {
+    cursor: grabbing;
+    z-index: 1000 !important;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+}
+
+/* Connection styles */
+.connection {
+    position: absolute;
+    height: 2px;
+    background-color: #3498db;
+    transform-origin: left center;
+    pointer-events: none;
+    z-index: 5;
+}
+
+.connection:after {
+    content: '';
+    position: absolute;
+    right: -5px;
+    top: -3px;
+    width: 8px;
+    height: 8px;
+    background-color: #3498db;
+    border-radius: 50%;
+}
+
+.temp-connection {
+    background-color: #95a5a6;
+    opacity: 0.7;
+    z-index: 4;
+}
+
+.temp-connection:after {
+    background-color: #95a5a6;
+}
+
+/* Improved port styles */
+.node-port {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    background-color: #3498db;
+    border-radius: 50%;
+    z-index: 20;
+    border: 2px solid white;
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    transition: transform 0.2s ease, background-color 0.2s ease;
+}
+
+.node-port:hover {
+    transform: scale(1.2);
+    background-color: #2980b9;
+}
+
+.port-in {
+    left: -6px;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.port-out {
+    right: -6px;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.port-in:hover, .port-out:hover {
+    transform: translateY(-50%) scale(1.2);
+} 

css/layer-editor.css

@@ -0,0 +1,202 @@
+/* Layer Editor Styles for Neural Network Playground */
+
+/* Modal styling */
+#layer-editor-modal {
+    display: none;
+    position: fixed;
+    z-index: 9999;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.5);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+#layer-editor-modal.active {
+    opacity: 1;
+}
+
+#layer-editor-modal .modal-content {
+    background-color: #fff;
+    margin: 10% auto;
+    padding: 25px;
+    border-radius: 8px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+    width: 80%;
+    max-width: 600px;
+    position: relative;
+    transform: translateY(-20px);
+    transition: transform 0.3s ease;
+    overflow: hidden; /* Prevent content from causing layout shifts */
+}
+
+#layer-editor-modal.active .modal-content {
+    transform: translateY(0);
+}
+
+/* Make the modal more obvious for debugging */
+#layer-editor-modal[data-visible="true"] {
+    /* Remove the debug border */
+    /* border: 3px solid red; */
+}
+
+.modal-title {
+    color: #2c3e50;
+    margin-top: 0;
+    margin-bottom: 20px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #eee;
+}
+
+/* Top close button */
+.close-modal {
+    position: absolute;
+    right: 20px;
+    top: 15px;
+    font-size: 24px;
+    font-weight: bold;
+    cursor: pointer;
+    color: #aaa;
+    transition: color 0.2s ease;
+    z-index: 10; /* Ensure it's above other content */
+}
+
+.close-modal:hover {
+    color: #333;
+}
+
+/* Form styling */
+.layer-form {
+    margin-bottom: 20px;
+    overflow: auto; /* Allow scrolling if form gets too long */
+    max-height: 60vh; /* Limit height to avoid modal being too tall */
+}
+
+.form-field {
+    margin-bottom: 15px;
+}
+
+.form-field label {
+    display: block;
+    font-weight: 600;
+    margin-bottom: 5px;
+    color: #2c3e50;
+}
+
+.form-field input,
+.form-field select {
+    width: 100%;
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 14px;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.form-field input:focus,
+.form-field select:focus {
+    border-color: #3498db;
+    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
+    outline: none;
+}
+
+.help-text {
+    display: block;
+    margin-top: 5px;
+    color: #7f8c8d;
+    font-size: 12px;
+}
+
+/* Button styling */
+.modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    padding-top: 15px;
+    border-top: 1px solid #eee;
+    background-color: #fff; /* Ensure background is solid */
+    position: relative; /* Establish a stacking context */
+    z-index: 5; /* Higher than the form */
+}
+
+.modal-footer button {
+    padding: 8px 16px;
+    margin-left: 10px;
+    border: none;
+    border-radius: 4px;
+    font-weight: 600;
+    cursor: pointer;
+    /* Remove transition to prevent flickering */
+    /* transition: background-color 0.2s ease; */
+    position: relative; /* Establish a stacking context */
+    z-index: 2; /* Higher than surrounding elements */
+    text-rendering: optimizeLegibility; /* Improve text rendering */
+    -webkit-font-smoothing: antialiased;
+}
+
+.save-layer-btn {
+    background-color: #3498db;
+    color: white;
+    /* Fix position and prevent movement */
+    transform: translateZ(0); /* Force GPU acceleration */
+}
+
+.save-layer-btn:hover {
+    background-color: #2980b9;
+}
+
+/* Override for close button in footer */
+.modal-footer .close-modal {
+    position: static;
+    background-color: #e0e0e0;
+    color: #333;
+    font-size: 14px;
+    transform: translateZ(0); /* Force GPU acceleration */
+}
+
+.modal-footer .close-modal:hover {
+    background-color: #ccc;
+}
+
+/* For number inputs */
+input[type="number"] {
+    -moz-appearance: textfield;
+}
+
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+/* Error state */
+.form-field.error input,
+.form-field.error select {
+    border-color: #e74c3c;
+}
+
+.error-message {
+    color: #e74c3c;
+    font-size: 12px;
+    margin-top: 5px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    #layer-editor-modal .modal-content {
+        width: 90%;
+        margin: 15% auto;
+        padding: 15px;
+    }
+    
+    .modal-footer {
+        flex-direction: column;
+    }
+    
+    .modal-footer button {
+        margin-left: 0;
+        margin-top: 10px;
+    }
+} 

css/styles.css

@@ -876,27 +876,43 @@ select {
 }
 
 .node-controls {
+    position: absolute;
+    top: 4px;
+    right: 4px;
     display: flex;
     justify-content: flex-end;
-    margin-top: 0.5rem;
+    z-index: 2;
 }
 
 .node-edit-btn, .node-delete-btn {
-    background: none;
-    border: none;
+    background: rgba(255, 255, 255, 0.7);
+    border: 1px solid rgba(0, 0, 0, 0.1);
     cursor: pointer;
-    padding: 3px;
+    padding: 2px 4px;
     border-radius: 4px;
     transition: all 0.2s ease;
     margin-left: 0.3rem;
+    font-size: 14px;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
 }
 
 .node-edit-btn:hover {
     background: #e0e0e0;
 }
 
+.node-delete-btn {
+    color: #b71c1c;
+    font-weight: bold;
+}
+
 .node-delete-btn:hover {
     background: #ffcdd2;
+    color: #d50000;
 }
 
 .icon {
@@ -1051,6 +1067,41 @@ select {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
+    margin-bottom: 20px;
+}
+
+/* Modal footer styling */
+.modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 20px;
+    padding-top: 15px;
+    border-top: 1px solid var(--border-color);
+}
+
+.modal-footer button {
+    padding: 8px 16px;
+    border-radius: var(--border-radius);
+    border: none;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.modal-footer .save-layer-btn {
+    background-color: var(--primary-color);
+    color: white;
+}
+
+.modal-footer .close-modal {
+    background-color: #f1f1f1;
+    color: #333;
+    position: static;
+    font-size: 14px;
+}
+
+.modal-footer .close-modal:hover {
+    background-color: #e0e0e0;
 }
 
 .form-group {
@@ -1330,4 +1381,661 @@ select {
     stroke-dasharray: 5, 5;
     stroke-width: 2;
     fill: none;
+}
+
+/* Tab Navigation */
+.tabs-container {
+    margin-top: 20px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+.tab-nav {
+    display: flex;
+    gap: 10px;
+    background-color: #f5f5f7;
+    padding: 10px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.tab-button {
+    padding: 10px 20px;
+    background-color: transparent;
+    border: none;
+    border-radius: 6px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #555;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.tab-button:hover {
+    background-color: rgba(0,0,0,0.05);
+}
+
+.tab-button.active {
+    background-color: #3498db;
+    color: white;
+}
+
+.tab-content {
+    display: none;
+    width: 100%;
+}
+
+.tab-content.active {
+    display: block;
+}
+
+/* Backpropagation Tab Styles */
+.backprop-container {
+    display: grid;
+    grid-template-columns: 280px 1fr 280px;
+    gap: 20px;
+    margin: 20px auto;
+    max-width: 1600px;
+}
+
+.backprop-info-panel {
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    padding: 20px;
+}
+
+.intro-text {
+    line-height: 1.6;
+    margin-bottom: 20px;
+    color: #555;
+}
+
+.backprop-steps {
+    margin-bottom: 20px;
+}
+
+.backprop-steps ol {
+    padding-left: 25px;
+}
+
+.backprop-steps li {
+    margin-bottom: 15px;
+}
+
+.backprop-steps strong {
+    color: #333;
+    display: block;
+    margin-bottom: 5px;
+}
+
+.backprop-steps p {
+    color: #666;
+    margin: 0;
+    font-size: 14px;
+}
+
+.backprop-controls {
+    margin-top: 30px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.backprop-controls button {
+    padding: 10px 15px;
+    border: none;
+    border-radius: 6px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+#start-animation {
+    background-color: #2ecc71;
+    color: white;
+}
+
+#pause-animation {
+    background-color: #f39c12;
+    color: white;
+}
+
+#reset-animation {
+    background-color: #e74c3c;
+    color: white;
+}
+
+.backprop-controls button:hover {
+    opacity: 0.9;
+    transform: translateY(-2px);
+}
+
+.speed-control {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-top: 10px;
+}
+
+.speed-control label {
+    font-size: 14px;
+    color: #666;
+}
+
+.speed-control input {
+    flex: 1;
+}
+
+.backprop-visualization {
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.animation-container {
+    position: relative;
+    min-height: 400px;
+    background-color: #f8f9fa;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+#backprop-canvas {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.animation-overlay {
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+    right: 20px;
+    background-color: rgba(255, 255, 255, 0.9);
+    padding: 15px;
+    border-radius: 6px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+#current-step-info h4 {
+    margin: 0 0 10px 0;
+    color: #333;
+}
+
+#step-name {
+    color: #3498db;
+    font-weight: 600;
+}
+
+#step-description {
+    margin: 0;
+    color: #555;
+    font-size: 14px;
+}
+
+.formula-section {
+    padding: 15px;
+    background-color: #f8f9fa;
+    border-radius: 8px;
+}
+
+.formula-display {
+    margin: 15px 0;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.formula {
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    background-color: #fff;
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.formula-title {
+    font-size: 14px;
+    color: #666;
+    margin-bottom: 5px;
+}
+
+.formula-math {
+    font-family: 'Times New Roman', serif;
+    font-size: 20px;
+    color: #333;
+    padding: 5px 0;
+}
+
+.formula-explanation {
+    font-size: 14px;
+    color: #666;
+    line-height: 1.5;
+}
+
+.backprop-details-panel {
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    padding: 20px;
+}
+
+.animation-legend {
+    margin: 15px 0 25px;
+}
+
+.legend-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.color-box {
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
+    margin-right: 10px;
+}
+
+.forward-color {
+    background-color: #3498db;
+}
+
+.error-color {
+    background-color: #e74c3c;
+}
+
+.backward-color {
+    background-color: #9b59b6;
+}
+
+.update-color {
+    background-color: #2ecc71;
+}
+
+.variable-display {
+    margin-top: 20px;
+}
+
+.variable-display h4 {
+    margin-bottom: 15px;
+    color: #333;
+}
+
+#variables-container {
+    background-color: #f8f9fa;
+    padding: 15px;
+    border-radius: 6px;
+    font-family: 'Courier New', monospace;
+    font-size: 14px;
+    min-height: 150px;
+}
+
+/* Responsive styles for backpropagation tab */
+@media (max-width: 1200px) {
+    .backprop-container {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto auto auto;
+    }
+    
+    .animation-container {
+        min-height: 300px;
+    }
+}
+
+/* Forward Propagation Tab Styles */
+.forward-container {
+    display: grid;
+    grid-template-columns: 280px 1fr 280px;
+    gap: 20px;
+    margin: 20px auto;
+    max-width: 1600px;
+}
+
+.forward-info-panel {
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    padding: 20px;
+}
+
+.forward-steps {
+    margin-bottom: 20px;
+}
+
+.forward-steps ol {
+    padding-left: 25px;
+}
+
+.forward-steps li {
+    margin-bottom: 15px;
+}
+
+.forward-steps strong {
+    color: #333;
+    display: block;
+    margin-bottom: 5px;
+}
+
+.forward-steps p {
+    color: #666;
+    margin: 0;
+    font-size: 14px;
+}
+
+.forward-controls {
+    margin-top: 30px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.forward-controls button {
+    padding: 10px 15px;
+    border: none;
+    border-radius: 6px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+#start-forward-animation {
+    background-color: #2ecc71;
+    color: white;
+}
+
+#pause-forward-animation {
+    background-color: #f39c12;
+    color: white;
+}
+
+#reset-forward-animation {
+    background-color: #e74c3c;
+    color: white;
+}
+
+.data-input-control {
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.data-input-control label {
+    font-size: 14px;
+    color: #666;
+}
+
+.data-input-control select {
+    padding: 8px;
+    border-radius: 6px;
+    border: 1px solid #ddd;
+}
+
+.forward-visualization {
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.computation-section {
+    background-color: #f8f9fa;
+    border-radius: 8px;
+    padding: 15px;
+}
+
+.computation-display {
+    background-color: white;
+    border-radius: 6px;
+    padding: 10px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    margin: 15px 0;
+}
+
+#computation-values {
+    font-family: 'Courier New', monospace;
+    background-color: #f8f9fa;
+    border-radius: 6px;
+    padding: 10px;
+    max-height: 150px;
+    overflow-y: auto;
+    font-size: 14px;
+}
+
+.forward-details-panel {
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    padding: 20px;
+}
+
+.network-architecture {
+    margin-bottom: 20px;
+}
+
+.architecture-info {
+    background-color: #f8f9fa;
+    border-radius: 6px;
+    padding: 12px;
+    margin-top: 10px;
+}
+
+.architecture-info p {
+    margin: 5px 0;
+    font-size: 14px;
+}
+
+.activation-functions {
+    margin-top: 20px;
+}
+
+.function-item {
+    background-color: #f8f9fa;
+    border-radius: 6px;
+    padding: 10px;
+    margin-top: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.function-name {
+    font-weight: 500;
+    font-size: 14px;
+}
+
+.function-formula {
+    font-family: 'Times New Roman', serif;
+    font-size: 16px;
+}
+
+/* Background Animation Tab Styles */
+.background-animation-container {
+    display: grid;
+    grid-template-columns: 280px 1fr 280px;
+    gap: 20px;
+    margin: 20px auto;
+    max-width: 1600px;
+}
+
+.background-info-panel {
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    padding: 20px;
+}
+
+.visualization-controls {
+    margin-top: 20px;
+}
+
+.control-group {
+    margin-bottom: 20px;
+}
+
+.control-item {
+    margin: 15px 0;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.control-item label {
+    font-size: 14px;
+    color: #666;
+}
+
+.control-item input[type="range"] {
+    width: 100%;
+}
+
+.control-item select {
+    padding: 8px;
+    border-radius: 6px;
+    border: 1px solid #ddd;
+}
+
+.animation-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+.animation-buttons button {
+    padding: 10px 15px;
+    border: none;
+    border-radius: 6px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+#start-background-animation {
+    background-color: #2ecc71;
+    color: white;
+}
+
+#pause-background-animation {
+    background-color: #f39c12;
+    color: white;
+}
+
+#reset-background-animation {
+    background-color: #e74c3c;
+    color: white;
+}
+
+.background-visualization {
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    padding: 20px;
+    position: relative;
+    min-height: 500px;
+}
+
+#background-canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
+    background-color: #f8f9fa;
+}
+
+.background-details-panel {
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    padding: 20px;
+}
+
+.background-details-panel p {
+    margin-bottom: 15px;
+    color: #555;
+    font-size: 14px;
+    line-height: 1.6;
+}
+
+.stats-panel {
+    margin-top: 20px;
+    background-color: #f8f9fa;
+    border-radius: 8px;
+    padding: 15px;
+}
+
+.stats-panel h4 {
+    margin-bottom: 10px;
+    color: #333;
+}
+
+#stats-container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+    text-align: center;
+}
+
+.stat-item {
+    background-color: white;
+    border-radius: 6px;
+    padding: 10px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.stat-label {
+    font-size: 12px;
+    color: #666;
+    margin-bottom: 5px;
+}
+
+.stat-value {
+    font-size: 16px;
+    font-weight: 600;
+    color: #3498db;
+}
+
+/* Neuron animations */
+@keyframes neuronPulse {
+    0% { transform: scale(1); opacity: 0.7; }
+    50% { transform: scale(1.2); opacity: 1; }
+    100% { transform: scale(1); opacity: 0.7; }
+}
+
+@keyframes connectionPulse {
+    0% { opacity: 0.2; }
+    50% { opacity: 0.8; }
+    100% { opacity: 0.2; }
+}
+
+/* Responsive styles for new tabs */
+@media (max-width: 1200px) {
+    .forward-container,
+    .background-animation-container {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto auto auto;
+    }
+    
+    .background-visualization {
+        min-height: 400px;
+    }
+    
+    #stats-container {
+        grid-template-columns: 1fr;
+    }
 } 

index.html

@@ -5,6 +5,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="stylesheet" href="css/drag-drop-fix.css">
+    <link rel="stylesheet" href="css/layer-editor.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">
@@ -14,105 +16,408 @@
     <header>
         <h1>Neural Network Playground</h1>
         <p class="header-subtitle">Interactive visualization of neural network architectures and concepts</p>
+        
+        <!-- Tab Navigation -->
+        <div class="tabs-container">
+            <div class="tab-nav">
+                <button class="tab-button active" data-tab="network-design">Network Design</button>
+                <button class="tab-button" data-tab="backpropagation">Backpropagation</button>
+                <button class="tab-button" data-tab="forward-propagation">Forward Propagation</button>
+                <button class="tab-button" data-tab="background-animation">Neural Background</button>
+            </div>
+        </div>
     </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>
+        <!-- Network Design Tab -->
+        <div class="tab-content active" id="network-design-tab">
+            <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 class="node-item" draggable="true" data-type="linear">
+                            <div class="node linear-node">Linear Regression</div>
+                        </div>
+                    </div>
+                    
+                    <h3 class="section-title">Sample Data</h3>
+                    <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="node-types">
-                    <div class="node-item" draggable="true" data-type="input">
-                        <div class="node input-node">Input Layer</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 class="node-item" draggable="true" data-type="hidden">
-                        <div class="node hidden-node">Hidden Layer</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>
-                    <div class="node-item" draggable="true" data-type="output">
-                        <div class="node output-node">Output Layer</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>
-                    <div class="node-item" draggable="true" data-type="conv">
-                        <div class="node conv-node">Convolutional</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 class="node-item" draggable="true" data-type="pool">
-                        <div class="node pool-node">Pooling</div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Backpropagation Tab -->
+        <div class="tab-content" id="backpropagation-tab">
+            <div class="container backprop-container">
+                <div class="backprop-info-panel">
+                    <h2>Backpropagation Explained</h2>
+                    <p class="intro-text">
+                        Backpropagation is the key algorithm that allows neural networks to learn from data. It works by 
+                        calculating how much each weight in the network contributes to the overall error and adjusting 
+                        the weights to minimize this error.
+                    </p>
+                    
+                    <div class="backprop-steps">
+                        <h3>The Steps of Backpropagation:</h3>
+                        <ol>
+                            <li>
+                                <strong>Forward Pass</strong>
+                                <p>Input data flows through the network to produce a prediction.</p>
+                            </li>
+                            <li>
+                                <strong>Calculate Error</strong>
+                                <p>Compare the prediction with the expected output to compute the error.</p>
+                            </li>
+                            <li>
+                                <strong>Backward Pass</strong>
+                                <p>Propagate the error backward through the network.</p>
+                            </li>
+                            <li>
+                                <strong>Update Weights</strong>
+                                <p>Adjust each weight based on its contribution to the error.</p>
+                            </li>
+                        </ol>
                     </div>
-                    <div class="node-item" draggable="true" data-type="linear">
-                        <div class="node linear-node">Linear Regression</div>
+                    
+                    <div class="backprop-controls">
+                        <button id="start-animation">Start Animation</button>
+                        <button id="pause-animation">Pause</button>
+                        <button id="reset-animation">Reset</button>
+                        <div class="speed-control">
+                            <label for="animation-speed">Speed:</label>
+                            <input type="range" id="animation-speed" min="1" max="10" value="5">
+                        </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 class="backprop-visualization">
+                    <div class="animation-container">
+                        <canvas id="backprop-canvas"></canvas>
+                        <div class="animation-overlay">
+                            <div id="current-step-info">
+                                <h4>Step: <span id="step-name">Forward Pass</span></h4>
+                                <p id="step-description">Data is flowing through the network...</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="formula-section">
+                        <h3>Mathematical Insight</h3>
+                        <div class="formula-display">
+                            <div class="formula">
+                                <span class="formula-title">Gradient Descent Update:</span>
+                                <span class="formula-math">w = w - η ∇L(w)</span>
+                            </div>
+                            <div class="formula">
+                                <span class="formula-title">Chain Rule:</span>
+                                <span class="formula-math">∂L/∂w = (∂L/∂y) × (∂y/∂w)</span>
+                            </div>
+                        </div>
+                        <p class="formula-explanation">
+                            The gradient (∇L) shows the direction of steepest increase in error. 
+                            By moving in the opposite direction, we minimize the error.
+                            The learning rate (η) controls the step size.
+                        </p>
+                    </div>
                 </div>
                 
-                <div class="controls">
-                    <button id="run-network">Run Network</button>
-                    <button id="clear-canvas">Clear Canvas</button>
+                <div class="backprop-details-panel">
+                    <h3>Understanding the Animation</h3>
+                    <div class="animation-legend">
+                        <div class="legend-item">
+                            <div class="color-box forward-color"></div>
+                            <span>Forward Signal Flow</span>
+                        </div>
+                        <div class="legend-item">
+                            <div class="color-box error-color"></div>
+                            <span>Error Calculation</span>
+                        </div>
+                        <div class="legend-item">
+                            <div class="color-box backward-color"></div>
+                            <span>Backward Error Propagation</span>
+                        </div>
+                        <div class="legend-item">
+                            <div class="color-box update-color"></div>
+                            <span>Weight Updates</span>
+                        </div>
+                    </div>
+                    
+                    <div class="variable-display">
+                        <h4>Current Variables</h4>
+                        <div id="variables-container">
+                            <!-- Will be populated by JavaScript -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Forward Propagation Tab -->
+        <div class="tab-content" id="forward-propagation-tab">
+            <div class="container forward-container">
+                <div class="forward-info-panel">
+                    <h2>Forward Propagation Explained</h2>
+                    <p class="intro-text">
+                        Forward propagation is the process by which input data flows through a neural network to generate predictions.
+                        This is how neural networks make inferences after they've been trained.
+                    </p>
+                    
+                    <div class="forward-steps">
+                        <h3>How Forward Propagation Works:</h3>
+                        <ol>
+                            <li>
+                                <strong>Input Layer</strong>
+                                <p>The network receives data through its input neurons.</p>
+                            </li>
+                            <li>
+                                <strong>Hidden Layer Computation</strong>
+                                <p>Each hidden neuron computes a weighted sum of inputs and applies an activation function.</p>
+                            </li>
+                            <li>
+                                <strong>Output Generation</strong>
+                                <p>The final layer produces the network's prediction or classification.</p>
+                            </li>
+                        </ol>
+                    </div>
+                    
+                    <div class="forward-controls">
+                        <button id="start-forward-animation">Start Animation</button>
+                        <button id="pause-forward-animation">Pause</button>
+                        <button id="reset-forward-animation">Reset</button>
+                        <div class="data-input-control">
+                            <label for="input-selector">Sample Input:</label>
+                            <select id="input-selector">
+                                <option value="sample1">Sample 1 [0.8, 0.2, 0.5]</option>
+                                <option value="sample2">Sample 2 [0.1, 0.9, 0.3]</option>
+                                <option value="sample3">Sample 3 [0.5, 0.5, 0.5]</option>
+                            </select>
+                        </div>
+                    </div>
                 </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 class="forward-visualization">
+                    <div class="animation-container">
+                        <canvas id="forward-canvas"></canvas>
+                        <div class="animation-overlay">
+                            <div id="forward-step-info">
+                                <h4>Current Layer: <span id="current-layer">Input</span></h4>
+                                <p id="forward-description">Data enters the network through the input layer.</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="computation-section">
+                        <h3>Computations in Detail</h3>
+                        <div class="computation-display">
+                            <div id="computation-formula" class="formula-math">
+                                z = w₁x₁ + w₂x₂ + ... + wₙxₙ + b
+                            </div>
+                            <div id="activation-formula" class="formula-math">
+                                a = σ(z)
+                            </div>
+                        </div>
+                        <div id="computation-values">
+                            <!-- Will be populated by JavaScript -->
+                        </div>
                     </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 class="forward-details-panel">
+                    <h3>Network Details</h3>
+                    <div class="network-architecture">
+                        <h4>Architecture</h4>
+                        <div class="architecture-info">
+                            <p>Input layer: 3 neurons</p>
+                            <p>Hidden layer: 4 neurons (ReLU activation)</p>
+                            <p>Output layer: 2 neurons (Sigmoid activation)</p>
+                        </div>
+                    </div>
+                    
+                    <div class="activation-functions">
+                        <h4>Activation Functions</h4>
+                        <div class="function-item">
+                            <div class="function-name">ReLU:</div>
+                            <div class="function-formula">f(x) = max(0, x)</div>
+                        </div>
+                        <div class="function-item">
+                            <div class="function-name">Sigmoid:</div>
+                            <div class="function-formula">f(x) = 1 / (1 + e<sup>-x</sup>)</div>
+                        </div>
                     </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>
+        
+        <!-- Background Animation Tab -->
+        <div class="tab-content" id="background-animation-tab">
+            <div class="container background-animation-container">
+                <div class="background-info-panel">
+                    <h2>Neural Network Visualization</h2>
+                    <p class="intro-text">
+                        This visualization represents neurons firing in a neural network. Watch as activation patterns
+                        form and spread across the network, simulating how information flows through neural pathways.
+                    </p>
+                    
+                    <div class="visualization-controls">
+                        <div class="control-group">
+                            <h3>Visualization Controls</h3>
+                            
+                            <div class="control-item">
+                                <label for="neuron-count">Neuron Count:</label>
+                                <input type="range" id="neuron-count" min="50" max="300" value="150">
+                                <span id="neuron-count-value">150</span>
+                            </div>
+                            
+                            <div class="control-item">
+                                <label for="connection-distance">Connection Distance:</label>
+                                <input type="range" id="connection-distance" min="50" max="200" value="100">
+                                <span id="connection-distance-value">100</span>
+                            </div>
+                            
+                            <div class="control-item">
+                                <label for="firing-speed">Firing Speed:</label>
+                                <input type="range" id="firing-speed" min="1" max="10" value="5">
+                                <span id="firing-speed-value">5</span>
+                            </div>
+                            
+                            <div class="control-item">
+                                <label for="firing-color">Firing Color:</label>
+                                <select id="firing-color">
+                                    <option value="blue">Blue</option>
+                                    <option value="purple">Purple</option>
+                                    <option value="rainbow">Rainbow</option>
+                                    <option value="green">Green</option>
+                                </select>
+                            </div>
+                        </div>
+                        
+                        <div class="animation-buttons">
+                            <button id="start-background-animation">Start Animation</button>
+                            <button id="pause-background-animation">Pause</button>
+                            <button id="reset-background-animation">Reset</button>
+                        </div>
+                    </div>
                 </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 class="background-visualization">
+                    <canvas id="background-canvas"></canvas>
                 </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 class="background-details-panel">
+                    <h3>About This Visualization</h3>
+                    <p>
+                        This animation represents a simplified view of neural activity. Each dot represents a neuron,
+                        and the lines represent connections between neurons. When a neuron "fires," it activates
+                        connected neurons based on the strength of their connections.
+                    </p>
+                    <p>
+                        In real neural networks, neurons only fire when their activation exceeds a threshold,
+                        and the pattern of connections is learned during training.
+                    </p>
+                    
+                    <div class="stats-panel">
+                        <h4>Statistics</h4>
+                        <div id="stats-container">
+                            <div class="stat-item">
+                                <div class="stat-label">Active Neurons:</div>
+                                <div id="active-neurons-count" class="stat-value">0</div>
+                            </div>
+                            <div class="stat-item">
+                                <div class="stat-label">Connections:</div>
+                                <div id="connections-count" class="stat-value">0</div>
+                            </div>
+                            <div class="stat-item">
+                                <div class="stat-label">Firing Rate:</div>
+                                <div id="firing-rate" class="stat-value">0 Hz</div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -155,19 +460,34 @@
     </div>
     
     <!-- Layer Editor Modal -->
-    <div id="layer-editor-modal" class="modal layer-editor-modal">
+    <div id="layer-editor-modal" class="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 class="modal-footer">
+                <button type="button" class="save-layer-btn">Save Changes</button>
+                <button type="button" class="close-modal">Cancel</button>
+            </div>
         </div>
     </div>
     <!-- End Layer Editor Modal -->
     
-    <script src="js/main.js"></script>
+    <!-- Scripts - Note the order is important! -->
+    <script src="js/drag-drop-cleanup.js"></script>
+    <script src="js/complete-drag-fix.js"></script>
     <script src="js/neural-network.js"></script>
-    <script src="js/drag-drop.js"></script>
+    <script src="js/layer-editor.js"></script>
+    <script src="js/main.js"></script>
+    <script src="js/tab-manager.js"></script>
+    <script src="js/check-drag-drop.js"></script>
+    <script src="js/backpropagation.js"></script>
+    <script src="js/forward-propagation.js"></script>
+    <script src="js/background-animation.js"></script>
+    <script src="js/animation-diagnostics.js"></script>
+    <script src="js/animation-fixes.js"></script>
+    <script src="js/debug-utils.js"></script>
 </body>
 </html> 

js/animation-diagnostics.js

@@ -0,0 +1,133 @@
+// Animation Diagnostics Script
+document.addEventListener('DOMContentLoaded', () => {
+    console.log('🔍 Animation Diagnostics Started');
+    
+    // Check if canvas elements exist
+    const canvases = {
+        'backprop-canvas': document.getElementById('backprop-canvas'),
+        'forward-canvas': document.getElementById('forward-canvas'),
+        'background-canvas': document.getElementById('background-canvas')
+    };
+    
+    // Log results
+    console.log('Canvas Elements Check:');
+    Object.entries(canvases).forEach(([id, element]) => {
+        console.log(`- Canvas #${id}: ${element ? '✅ Found' : '❌ Not Found'}`);
+        
+        if (element) {
+            // Check if canvas has dimensions
+            console.log(`  - Dimensions: ${element.width}x${element.height}`);
+            
+            // Try to get context
+            try {
+                const ctx = element.getContext('2d');
+                console.log(`  - Context: ${ctx ? '✅ Available' : '❌ Not Available'}`);
+                
+                // Test drawing something to ensure canvas works
+                if (ctx) {
+                    ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
+                    ctx.fillRect(10, 10, 50, 50);
+                    console.log(`  - Drawing test: ✅ Completed`);
+                }
+            } catch (error) {
+                console.error(`  - Context Error: ${error.message}`);
+            }
+        }
+    });
+    
+    // Check if animation control buttons exist
+    const buttons = {
+        'Backpropagation': {
+            'start-animation': document.getElementById('start-animation'),
+            'pause-animation': document.getElementById('pause-animation'),
+            'reset-animation': document.getElementById('reset-animation')
+        },
+        'Forward Propagation': {
+            'start-forward-animation': document.getElementById('start-forward-animation'),
+            'pause-forward-animation': document.getElementById('pause-forward-animation'),
+            'reset-forward-animation': document.getElementById('reset-forward-animation')
+        },
+        'Background Animation': {
+            'start-background-animation': document.getElementById('start-background-animation'),
+            'pause-background-animation': document.getElementById('pause-background-animation'),
+            'reset-background-animation': document.getElementById('reset-background-animation')
+        }
+    };
+    
+    // Log results
+    console.log('\nAnimation Controls Check:');
+    Object.entries(buttons).forEach(([section, controls]) => {
+        console.log(`- ${section} Controls:`);
+        Object.entries(controls).forEach(([id, element]) => {
+            console.log(`  - Button #${id}: ${element ? '✅ Found' : '❌ Not Found'}`);
+        });
+    });
+    
+    // Check if animation scripts were loaded
+    const scripts = {
+        'backpropagation.js': window.hasOwnProperty('backpropInitialized'),
+        'forward-propagation.js': window.hasOwnProperty('forwardPropInitialized'),
+        'background-animation.js': window.hasOwnProperty('backgroundAnimationInitialized')
+    };
+    
+    console.log('\nScript Initialization Check:');
+    Object.entries(scripts).forEach(([script, initialized]) => {
+        console.log(`- ${script}: ${initialized ? '✅ Initialized' : '❌ Not Initialized'}`);
+    });
+    
+    // Add script initialization flags to each animation script
+    console.log('\nAdding script initialization checks...');
+    
+    // Since we can't directly modify the original scripts, we'll add these flags now
+    if (!window.hasOwnProperty('backpropInitialized')) {
+        window.backpropInitialized = false;
+        console.log('- Added backprop initialization check');
+    }
+    
+    if (!window.hasOwnProperty('forwardPropInitialized')) {
+        window.forwardPropInitialized = false;
+        console.log('- Added forward-prop initialization check');
+    }
+    
+    if (!window.hasOwnProperty('backgroundAnimationInitialized')) {
+        window.backgroundAnimationInitialized = false;
+        console.log('- Added background animation initialization check');
+    }
+    
+    // Check tab switching
+    console.log('\nAdding tab switch handler...');
+    document.addEventListener('tabSwitch', (e) => {
+        console.log(`Tab switched to: ${e.detail.tab}`);
+        
+        // Force redraw of canvas when tab is switched
+        const canvasId = `${e.detail.tab === 'backpropagation' ? 'backprop' : 
+                           e.detail.tab === 'forward-propagation' ? 'forward' : 
+                           e.detail.tab === 'background-animation' ? 'background' : ''}-canvas`;
+        
+        const canvas = document.getElementById(canvasId);
+        if (canvas) {
+            console.log(`Forcing redraw of ${canvasId}`);
+            const ctx = canvas.getContext('2d');
+            const width = canvas.width;
+            const height = canvas.height;
+            
+            // Clear canvas and draw a test pattern
+            ctx.clearRect(0, 0, width, height);
+            ctx.fillStyle = 'rgba(0, 128, 255, 0.2)';
+            ctx.fillRect(0, 0, width, height);
+            
+            // Draw text to show it's the diagnostic render
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+            ctx.font = '14px Arial';
+            ctx.textAlign = 'center';
+            ctx.fillText('Diagnostic Render - Animation Should Appear Here', width/2, height/2);
+            
+            // Draw a boundary to show canvas size
+            ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)';
+            ctx.lineWidth = 2;
+            ctx.strokeRect(0, 0, width, height);
+        }
+    });
+    
+    console.log('🔍 Animation Diagnostics Initialized');
+}); 

js/animation-fixes.js

@@ -0,0 +1,269 @@
+// Animation Fixes Script - Patches common animation issues
+(function() {
+    console.log('Animation Fixes Script Loaded');
+    
+    // Wait for DOM content to be loaded
+    document.addEventListener('DOMContentLoaded', function() {
+        console.log('Applying animation fixes');
+        
+        // 1. Fix for missing canvas elements
+        const expectedCanvases = [
+            { id: 'backprop-canvas', container: '.animation-container', tab: 'backpropagation-tab' },
+            { id: 'forward-canvas', container: '.forward-visualization', tab: 'forward-propagation-tab' },
+            { id: 'background-canvas', container: '.background-visualization', tab: 'background-animation-tab' }
+        ];
+        
+        expectedCanvases.forEach(canvasInfo => {
+            const canvas = document.getElementById(canvasInfo.id);
+            const container = document.querySelector(`#${canvasInfo.tab} ${canvasInfo.container}`);
+            
+            if (!canvas && container) {
+                console.log(`Creating missing canvas: ${canvasInfo.id}`);
+                const newCanvas = document.createElement('canvas');
+                newCanvas.id = canvasInfo.id;
+                newCanvas.className = 'animation-canvas';
+                newCanvas.width = container.clientWidth || 800;
+                newCanvas.height = container.clientHeight || 400;
+                
+                container.prepend(newCanvas);
+                
+                // Try drawing something to show the canvas is working
+                const ctx = newCanvas.getContext('2d');
+                if (ctx) {
+                    ctx.fillStyle = 'rgba(200, 200, 255, 0.3)';
+                    ctx.fillRect(0, 0, newCanvas.width, newCanvas.height);
+                    ctx.fillStyle = '#333';
+                    ctx.font = '16px Arial';
+                    ctx.textAlign = 'center';
+                    ctx.fillText(`Canvas ${canvasInfo.id} initialized`, newCanvas.width/2, newCanvas.height/2);
+                }
+            }
+        });
+        
+        // 2. Fix for animation scripts not running
+        // Capture tab change events and force canvas initialization
+        document.addEventListener('tabSwitch', function(e) {
+            const tabId = e.detail.tab;
+            console.log(`Tab switch detected to: ${tabId}`);
+            
+            setTimeout(() => {
+                // Force canvas initialization after tab switch
+                switch(tabId) {
+                    case 'backpropagation':
+                        initBackpropCanvas();
+                        break;
+                    case 'forward-propagation':
+                        initForwardCanvas();
+                        break;
+                    case 'background-animation':
+                        initBackgroundCanvas();
+                        break;
+                }
+            }, 100);
+        });
+        
+        // Helper functions to initialize canvases if the main scripts fail
+        function initBackpropCanvas() {
+            const canvas = document.getElementById('backprop-canvas');
+            if (!canvas) return;
+            
+            if (typeof window.initBackpropCanvas === 'function') {
+                window.initBackpropCanvas();
+            } else {
+                const ctx = canvas.getContext('2d');
+                if (ctx) {
+                    drawPlaceholderNetwork(ctx, canvas.width, canvas.height, 'Backpropagation');
+                }
+            }
+        }
+        
+        function initForwardCanvas() {
+            const canvas = document.getElementById('forward-canvas');
+            if (!canvas) return;
+            
+            if (typeof window.initForwardPropCanvas === 'function') {
+                window.initForwardPropCanvas();
+            } else {
+                const ctx = canvas.getContext('2d');
+                if (ctx) {
+                    drawPlaceholderNetwork(ctx, canvas.width, canvas.height, 'Forward Propagation');
+                }
+            }
+        }
+        
+        function initBackgroundCanvas() {
+            const canvas = document.getElementById('background-canvas');
+            if (!canvas) return;
+            
+            if (typeof window.initBackgroundCanvas === 'function') {
+                window.initBackgroundCanvas();
+            } else {
+                const ctx = canvas.getContext('2d');
+                if (ctx) {
+                    drawPlaceholderNeurons(ctx, canvas.width, canvas.height);
+                }
+            }
+        }
+        
+        // Helper drawing functions
+        function drawPlaceholderNetwork(ctx, width, height, title) {
+            // Clear canvas
+            ctx.clearRect(0, 0, width, height);
+            
+            // Draw background
+            ctx.fillStyle = '#f8f9fa';
+            ctx.fillRect(0, 0, width, height);
+            
+            // Define network layout
+            const layers = [3, 4, 2]; // Input, hidden, output layers
+            const neuronRadius = 20;
+            const layerSpacing = width / (layers.length + 1);
+            
+            // Function to calculate neuron positions
+            function getNeuronPosition(layerIndex, neuronIndex, totalNeurons) {
+                const x = layerSpacing * (layerIndex + 1);
+                const layerHeight = totalNeurons * (neuronRadius * 2 + 10);
+                const startY = (height - layerHeight) / 2 + neuronRadius;
+                const y = startY + neuronIndex * (neuronRadius * 2 + 10);
+                return { x, y };
+            }
+            
+            // Draw connections first (so they appear behind neurons)
+            ctx.strokeStyle = '#aaa';
+            ctx.lineWidth = 1;
+            
+            // For each layer except the last
+            for (let layerIndex = 0; layerIndex < layers.length - 1; layerIndex++) {
+                const sourceLayer = layers[layerIndex];
+                const targetLayer = layers[layerIndex + 1];
+                
+                // Connect each neuron in source layer to each neuron in target layer
+                for (let sourceNeuron = 0; sourceNeuron < sourceLayer; sourceNeuron++) {
+                    const source = getNeuronPosition(layerIndex, sourceNeuron, sourceLayer);
+                    
+                    for (let targetNeuron = 0; targetNeuron < targetLayer; targetNeuron++) {
+                        const target = getNeuronPosition(layerIndex + 1, targetNeuron, targetLayer);
+                        
+                        // Draw connection
+                        ctx.beginPath();
+                        ctx.moveTo(source.x, source.y);
+                        ctx.lineTo(target.x, target.y);
+                        ctx.stroke();
+                    }
+                }
+            }
+            
+            // Draw neurons
+            const layerColors = ['#6495ED', '#7B68EE', '#9370DB']; // Different color for each layer
+            
+            for (let layerIndex = 0; layerIndex < layers.length; layerIndex++) {
+                const neuronsInLayer = layers[layerIndex];
+                
+                for (let neuronIndex = 0; neuronIndex < neuronsInLayer; neuronIndex++) {
+                    const { x, y } = getNeuronPosition(layerIndex, neuronIndex, neuronsInLayer);
+                    
+                    // Draw neuron circle
+                    ctx.beginPath();
+                    ctx.arc(x, y, neuronRadius, 0, Math.PI * 2);
+                    ctx.fillStyle = layerColors[layerIndex];
+                    ctx.fill();
+                    ctx.strokeStyle = '#fff';
+                    ctx.lineWidth = 2;
+                    ctx.stroke();
+                }
+            }
+            
+            // Add title
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+            ctx.font = 'bold 20px Arial';
+            ctx.textAlign = 'center';
+            ctx.fillText(title + ' Animation', width/2, 40);
+            
+            // Add message
+            ctx.font = '16px Arial';
+            ctx.fillText('Animation placeholder - Check console for errors', width/2, height - 30);
+        }
+        
+        function drawPlaceholderNeurons(ctx, width, height) {
+            // Clear canvas
+            ctx.clearRect(0, 0, width, height);
+            
+            // Draw background
+            ctx.fillStyle = '#f8f9fa';
+            ctx.fillRect(0, 0, width, height);
+            
+            // Create random neurons
+            const neurons = [];
+            const neuronCount = 50;
+            
+            for (let i = 0; i < neuronCount; i++) {
+                neurons.push({
+                    x: Math.random() * width,
+                    y: Math.random() * height,
+                    radius: 3 + Math.random() * 5,
+                    color: Math.random() > 0.8 ? '#6495ED' : '#aaaaaa'
+                });
+            }
+            
+            // Draw connections
+            ctx.strokeStyle = 'rgba(170, 170, 170, 0.3)';
+            ctx.lineWidth = 1;
+            
+            for (let i = 0; i < neurons.length; i++) {
+                const source = neurons[i];
+                
+                // Connect to nearby neurons
+                for (let j = i + 1; j < neurons.length; j++) {
+                    const target = neurons[j];
+                    const distance = Math.sqrt(
+                        Math.pow(target.x - source.x, 2) + 
+                        Math.pow(target.y - source.y, 2)
+                    );
+                    
+                    // Only connect neurons that are close enough
+                    if (distance < 100) {
+                        ctx.beginPath();
+                        ctx.moveTo(source.x, source.y);
+                        ctx.lineTo(target.x, target.y);
+                        ctx.stroke();
+                    }
+                }
+            }
+            
+            // Draw neurons
+            neurons.forEach(neuron => {
+                ctx.beginPath();
+                ctx.arc(neuron.x, neuron.y, neuron.radius, 0, Math.PI * 2);
+                ctx.fillStyle = neuron.color;
+                ctx.fill();
+            });
+            
+            // Add title
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+            ctx.font = 'bold 20px Arial';
+            ctx.textAlign = 'center';
+            ctx.fillText('Neural Background Animation', width/2, 40);
+            
+            // Add message
+            ctx.font = '16px Arial';
+            ctx.fillText('Animation placeholder - Check console for errors', width/2, height - 30);
+        }
+        
+        // Initial setup - activate the currently selected tab
+        const activeTabButton = document.querySelector('.tab-button.active');
+        if (activeTabButton) {
+            const tabId = activeTabButton.getAttribute('data-tab');
+            console.log(`Initial active tab: ${tabId}`);
+            
+            // If the tab manager is loaded, use its function
+            if (window.activateTab) {
+                window.activateTab(tabId);
+            } else {
+                // Fallback - directly trigger the tab switch event
+                document.dispatchEvent(new CustomEvent('tabSwitch', {
+                    detail: { tab: tabId }
+                }));
+            }
+        }
+    });
+})(); 

js/background-animation.js

@@ -0,0 +1,552 @@
+// Neural Network Background Animation
+document.addEventListener('DOMContentLoaded', () => {
+    // Set initialization flag
+    window.backgroundAnimationInitialized = true;
+    console.log('Background animation script initialized');
+
+    // Canvas initialization function
+    function initializeCanvas() {
+        console.log('Initializing background animation canvas');
+        const canvas = document.getElementById('background-canvas');
+        if (!canvas) {
+            console.error('Background animation canvas not found!');
+            return;
+        }
+        
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+            console.error('Could not get 2D context for background animation canvas');
+            return;
+        }
+        
+        // Set canvas dimensions
+        const container = canvas.parentElement;
+        if (container) {
+            canvas.width = container.clientWidth || 800;
+            canvas.height = container.clientHeight || 400;
+        } else {
+            canvas.width = 800;
+            canvas.height = 400;
+        }
+        
+        // Clear canvas
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        
+        // Reset animation state and redraw
+        resetAnimation();
+        updateCanvas(); // Initial draw
+    }
+    
+    // Register the canvas initialization function with tab manager
+    if (typeof window !== 'undefined') {
+        window.initBackgroundCanvas = initializeCanvas;
+    }
+    
+    // Canvas and context
+    const canvas = document.getElementById('background-canvas');
+    const ctx = canvas.getContext('2d');
+    
+    // Control elements
+    const startButton = document.getElementById('start-background-animation');
+    const pauseButton = document.getElementById('pause-background-animation');
+    const resetButton = document.getElementById('reset-background-animation');
+    
+    // Slider controls
+    const neuronCountSlider = document.getElementById('neuron-count');
+    const neuronCountValue = document.getElementById('neuron-count-value');
+    const connectionDistanceSlider = document.getElementById('connection-distance');
+    const connectionDistanceValue = document.getElementById('connection-distance-value');
+    const firingSpeedSlider = document.getElementById('firing-speed');
+    const firingSpeedValue = document.getElementById('firing-speed-value');
+    const firingColorSelect = document.getElementById('firing-color');
+    
+    // Stats display elements
+    const activeNeuronsCount = document.getElementById('active-neurons-count');
+    const connectionsCount = document.getElementById('connections-count');
+    const firingRateElement = document.getElementById('firing-rate');
+    
+    // Animation state
+    let animationState = {
+        running: false,
+        neurons: [],
+        connections: [],
+        config: {
+            neuronCount: 150,
+            connectionDistance: 100,
+            firingSpeed: 5,
+            firingColor: 'blue'
+        },
+        stats: {
+            activeNeurons: 0,
+            connectionCount: 0,
+            firingRate: 0,
+            firingHistory: []
+        },
+        animationFrameId: null,
+        lastTimestamp: 0
+    };
+    
+    // Neuron class
+    class Neuron {
+        constructor(x, y) {
+            this.x = x;
+            this.y = y;
+            this.radius = 3 + Math.random() * 2; // 3-5 pixels
+            this.connections = [];
+            this.firing = false;
+            this.fireProgress = 0; // 0-1 for animation progress
+            this.lastFireTime = 0;
+            this.refractionPeriod = 500 + Math.random() * 1500; // 0.5-2 seconds
+            this.activated = false;
+            this.activationLevel = 0; // 0-1
+            this.threshold = 0.4 + Math.random() * 0.3; // 0.4-0.7
+            this.speedMultiplier = 0.8 + Math.random() * 0.4; // 0.8-1.2x speed
+            this.activationDecay = 0.02; // How fast activation decreases
+        }
+        
+        // Add a connection to another neuron
+        addConnection(neuron, strength) {
+            this.connections.push({
+                target: neuron,
+                strength: strength,
+                active: false,
+                progress: 0
+            });
+        }
+        
+        // Update neuron state
+        update(deltaTime, speed) {
+            // Scale the time increment based on speed (0-10)
+            const timeIncrement = deltaTime * (speed / 5);
+            
+            // Update activation level (decay over time)
+            if (this.activationLevel > 0 && !this.firing) {
+                this.activationLevel = Math.max(0, this.activationLevel - this.activationDecay * (timeIncrement / 16));
+            }
+            
+            // Check if neuron should fire
+            const currentTime = Date.now();
+            if (!this.firing && this.activationLevel >= this.threshold && 
+                (currentTime - this.lastFireTime > this.refractionPeriod)) {
+                this.firing = true;
+                this.fireProgress = 0;
+                this.lastFireTime = currentTime;
+                animationState.stats.firingHistory.push(currentTime);
+            }
+            
+            // Update firing animation
+            if (this.firing) {
+                this.fireProgress += 0.05 * this.speedMultiplier * (timeIncrement / 16);
+                
+                // Activate connections when fireProgress reaches 1
+                if (this.fireProgress >= 1) {
+                    this.firing = false;
+                    this.activationLevel = 0; // Reset activation after firing
+                    
+                    // Activate outgoing connections
+                    this.connections.forEach(conn => {
+                        if (Math.random() < conn.strength) {
+                            conn.active = true;
+                            conn.progress = 0;
+                        }
+                    });
+                }
+            }
+            
+            // Update connection animations
+            this.connections.forEach(conn => {
+                if (conn.active) {
+                    conn.progress += 0.04 * this.speedMultiplier * (timeIncrement / 16);
+                    
+                    // Activate target neuron when signal reaches the end
+                    if (conn.progress >= 1) {
+                        conn.active = false;
+                        conn.target.activationLevel += conn.strength;
+                    }
+                }
+            });
+        }
+        
+        // Draw the neuron
+        draw(ctx, colorScheme) {
+            // Draw connections
+            this.connections.forEach(conn => {
+                const { target, active, progress, strength } = conn;
+                
+                // Set line style based on connection state
+                if (active) {
+                    // Active connection (signal traveling)
+                    const lineWidth = 1 + strength * 1.5;
+                    
+                    // Calculate position along the line based on progress
+                    const signalX = this.x + (target.x - this.x) * progress;
+                    const signalY = this.y + (target.y - this.y) * progress;
+                    
+                    // Draw the inactive part of the connection
+                    ctx.beginPath();
+                    ctx.moveTo(this.x, this.y);
+                    ctx.lineTo(target.x, target.y);
+                    ctx.strokeStyle = `rgba(200, 200, 200, ${strength * 0.3})`;
+                    ctx.lineWidth = 0.5;
+                    ctx.stroke();
+                    
+                    // Draw the active signal
+                    ctx.beginPath();
+                    ctx.arc(signalX, signalY, lineWidth + 1, 0, Math.PI * 2);
+                    
+                    // Use the appropriate color based on the selected scheme
+                    if (colorScheme === 'rainbow') {
+                        const hue = (Date.now() / 20) % 360;
+                        ctx.fillStyle = `hsl(${hue}, 80%, 60%)`;
+                    } else {
+                        switch (colorScheme) {
+                            case 'blue':
+                                ctx.fillStyle = `rgba(52, 152, 219, ${0.7 + progress * 0.3})`;
+                                break;
+                            case 'purple':
+                                ctx.fillStyle = `rgba(155, 89, 182, ${0.7 + progress * 0.3})`;
+                                break;
+                            case 'green':
+                                ctx.fillStyle = `rgba(46, 204, 113, ${0.7 + progress * 0.3})`;
+                                break;
+                            default:
+                                ctx.fillStyle = `rgba(52, 152, 219, ${0.7 + progress * 0.3})`;
+                        }
+                    }
+                    ctx.fill();
+                    
+                } else if (this.firing || this.activationLevel > 0.2) {
+                    // Connection from an active neuron
+                    ctx.beginPath();
+                    ctx.moveTo(this.x, this.y);
+                    ctx.lineTo(target.x, target.y);
+                    ctx.strokeStyle = `rgba(200, 200, 200, ${strength * 0.5})`;
+                    ctx.lineWidth = 0.5;
+                    ctx.stroke();
+                } else {
+                    // Inactive connection
+                    ctx.beginPath();
+                    ctx.moveTo(this.x, this.y);
+                    ctx.lineTo(target.x, target.y);
+                    ctx.strokeStyle = `rgba(200, 200, 200, ${strength * 0.2})`;
+                    ctx.lineWidth = 0.2;
+                    ctx.stroke();
+                }
+            });
+            
+            // Draw the neuron body
+            ctx.beginPath();
+            ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+            
+            // Color based on firing/activation state
+            if (this.firing) {
+                // Use the selected color scheme for firing neurons
+                if (colorScheme === 'rainbow') {
+                    const hue = (Date.now() / 20) % 360;
+                    ctx.fillStyle = `hsl(${hue}, 80%, 60%)`;
+                } else {
+                    switch (colorScheme) {
+                        case 'blue':
+                            ctx.fillStyle = `rgba(52, 152, 219, ${0.7 + this.fireProgress * 0.3})`;
+                            break;
+                        case 'purple':
+                            ctx.fillStyle = `rgba(155, 89, 182, ${0.7 + this.fireProgress * 0.3})`;
+                            break;
+                        case 'green':
+                            ctx.fillStyle = `rgba(46, 204, 113, ${0.7 + this.fireProgress * 0.3})`;
+                            break;
+                        default:
+                            ctx.fillStyle = `rgba(52, 152, 219, ${0.7 + this.fireProgress * 0.3})`;
+                    }
+                }
+                
+                // Add glow effect for firing neurons
+                ctx.shadowColor = ctx.fillStyle;
+                ctx.shadowBlur = 10;
+            } else if (this.activationLevel > 0) {
+                // Partially activated
+                ctx.fillStyle = `rgba(127, 140, 141, ${0.3 + this.activationLevel * 0.7})`;
+                ctx.shadowBlur = 0;
+            } else {
+                // Inactive
+                ctx.fillStyle = 'rgba(127, 140, 141, 0.2)';
+                ctx.shadowBlur = 0;
+            }
+            
+            ctx.fill();
+            ctx.shadowBlur = 0; // Reset shadow blur
+        }
+    }
+    
+    // Initialize the network
+    function initNetwork() {
+        // Clear existing state
+        animationState.neurons = [];
+        animationState.connections = [];
+        animationState.stats.activeNeurons = 0;
+        animationState.stats.connectionCount = 0;
+        animationState.stats.firingHistory = [];
+        
+        const { neuronCount, connectionDistance } = animationState.config;
+        
+        // Create neurons with random positions
+        for (let i = 0; i < neuronCount; i++) {
+            const x = Math.random() * canvas.width;
+            const y = Math.random() * canvas.height;
+            animationState.neurons.push(new Neuron(x, y));
+        }
+        
+        // Create connections between nearby neurons
+        let connectionCount = 0;
+        
+        animationState.neurons.forEach(neuron => {
+            animationState.neurons.forEach(target => {
+                if (neuron !== target) {
+                    // Calculate distance between neurons
+                    const dx = neuron.x - target.x;
+                    const dy = neuron.y - target.y;
+                    const distance = Math.sqrt(dx * dx + dy * dy);
+                    
+                    // Connect if within range (with random chance based on distance)
+                    if (distance < connectionDistance) {
+                        const probability = 1 - (distance / connectionDistance);
+                        if (Math.random() < probability * 0.3) {
+                            // Connection strength decreases with distance
+                            const strength = 0.2 + (1 - distance / connectionDistance) * 0.6;
+                            neuron.addConnection(target, strength);
+                            connectionCount++;
+                        }
+                    }
+                }
+            });
+        });
+        
+        animationState.stats.connectionCount = connectionCount;
+        
+        // Randomly activate a few neurons to start
+        for (let i = 0; i < 3; i++) {
+            const randomIndex = Math.floor(Math.random() * animationState.neurons.length);
+            animationState.neurons[randomIndex].firing = true;
+            animationState.neurons[randomIndex].lastFireTime = Date.now();
+        }
+        
+        // Update stats display
+        updateStatsDisplay();
+    }
+    
+    // Canvas resize functionality
+    function resizeCanvas() {
+        const container = canvas.parentElement;
+        canvas.width = container.clientWidth;
+        canvas.height = container.clientHeight;
+        
+        // Reinitialize the network when the canvas is resized
+        if (animationState.neurons.length > 0) {
+            initNetwork();
+        }
+    }
+    
+    // Update stats display
+    function updateStatsDisplay() {
+        if (!activeNeuronsCount || !connectionsCount || !firingRateElement) return;
+        
+        // Count active neurons
+        const activeCount = animationState.neurons.filter(n => n.firing || n.activationLevel > 0.2).length;
+        animationState.stats.activeNeurons = activeCount;
+        
+        // Calculate firing rate (fires per second)
+        const now = Date.now();
+        const recentFirings = animationState.stats.firingHistory.filter(time => now - time < 1000).length;
+        animationState.stats.firingRate = recentFirings;
+        
+        // Clean up old firing history
+        animationState.stats.firingHistory = animationState.stats.firingHistory.filter(time => now - time < 1000);
+        
+        // Update display
+        activeNeuronsCount.textContent = activeCount;
+        connectionsCount.textContent = animationState.stats.connectionCount;
+        firingRateElement.textContent = `${recentFirings} Hz`;
+    }
+    
+    // Animation loop
+    function animate(timestamp) {
+        if (!animationState.running) return;
+        
+        // Calculate delta time
+        const deltaTime = timestamp - (animationState.lastTimestamp || timestamp);
+        animationState.lastTimestamp = timestamp;
+        
+        // Clear canvas
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        
+        // Update and draw neurons
+        animationState.neurons.forEach(neuron => {
+            neuron.update(deltaTime, animationState.config.firingSpeed);
+            neuron.draw(ctx, animationState.config.firingColor);
+        });
+        
+        // Randomly activate neurons occasionally
+        if (Math.random() < 0.01 * (animationState.config.firingSpeed / 5)) {
+            const randomIndex = Math.floor(Math.random() * animationState.neurons.length);
+            const randomNeuron = animationState.neurons[randomIndex];
+            
+            if (!randomNeuron.firing && Date.now() - randomNeuron.lastFireTime > randomNeuron.refractionPeriod) {
+                randomNeuron.activationLevel = randomNeuron.threshold;
+            }
+        }
+        
+        // Update stats periodically (every ~500ms)
+        if (timestamp % 500 < 20) {
+            updateStatsDisplay();
+        }
+        
+        // Continue animation
+        animationState.animationFrameId = requestAnimationFrame(animate);
+    }
+    
+    // Start animation
+    function startAnimation() {
+        if (!animationState.running) {
+            animationState.running = true;
+            animationState.lastTimestamp = 0;
+            animationState.animationFrameId = requestAnimationFrame(animate);
+            
+            startButton.disabled = true;
+            pauseButton.disabled = false;
+            resetButton.disabled = false;
+        }
+    }
+    
+    // Pause animation
+    function pauseAnimation() {
+        if (animationState.running) {
+            animationState.running = false;
+            if (animationState.animationFrameId) {
+                cancelAnimationFrame(animationState.animationFrameId);
+            }
+            
+            startButton.disabled = false;
+            pauseButton.disabled = true;
+            resetButton.disabled = false;
+        }
+    }
+    
+    // Reset animation
+    function resetAnimation() {
+        pauseAnimation();
+        initNetwork();
+        
+        startButton.disabled = false;
+        pauseButton.disabled = true;
+        resetButton.disabled = false;
+    }
+    
+    // Initialize the visualization
+    function initVisualization() {
+        if (!canvas) return;
+        
+        resizeCanvas();
+        window.addEventListener('resize', resizeCanvas);
+        
+        // Set up initial configuration from sliders if they exist
+        if (neuronCountSlider) {
+            animationState.config.neuronCount = parseInt(neuronCountSlider.value, 10);
+            neuronCountValue.textContent = animationState.config.neuronCount;
+        }
+        
+        if (connectionDistanceSlider) {
+            animationState.config.connectionDistance = parseInt(connectionDistanceSlider.value, 10);
+            connectionDistanceValue.textContent = animationState.config.connectionDistance;
+        }
+        
+        if (firingSpeedSlider) {
+            animationState.config.firingSpeed = parseInt(firingSpeedSlider.value, 10);
+            firingSpeedValue.textContent = animationState.config.firingSpeed;
+        }
+        
+        if (firingColorSelect) {
+            animationState.config.firingColor = firingColorSelect.value;
+        }
+        
+        // Initialize the network
+        initNetwork();
+        
+        // Set button states
+        startButton.disabled = false;
+        pauseButton.disabled = true;
+        resetButton.disabled = true;
+    }
+    
+    // Handle configuration changes
+    function setupControlListeners() {
+        if (neuronCountSlider) {
+            neuronCountSlider.addEventListener('input', () => {
+                animationState.config.neuronCount = parseInt(neuronCountSlider.value, 10);
+                neuronCountValue.textContent = animationState.config.neuronCount;
+            });
+            
+            neuronCountSlider.addEventListener('change', () => {
+                // Only reinitialize network when slider interaction ends
+                resetAnimation();
+            });
+        }
+        
+        if (connectionDistanceSlider) {
+            connectionDistanceSlider.addEventListener('input', () => {
+                animationState.config.connectionDistance = parseInt(connectionDistanceSlider.value, 10);
+                connectionDistanceValue.textContent = animationState.config.connectionDistance;
+            });
+            
+            connectionDistanceSlider.addEventListener('change', () => {
+                resetAnimation();
+            });
+        }
+        
+        if (firingSpeedSlider) {
+            firingSpeedSlider.addEventListener('input', () => {
+                animationState.config.firingSpeed = parseInt(firingSpeedSlider.value, 10);
+                firingSpeedValue.textContent = animationState.config.firingSpeed;
+            });
+        }
+        
+        if (firingColorSelect) {
+            firingColorSelect.addEventListener('change', () => {
+                animationState.config.firingColor = firingColorSelect.value;
+            });
+        }
+        
+        // Button event listeners
+        if (startButton) {
+            startButton.addEventListener('click', startAnimation);
+        }
+        
+        if (pauseButton) {
+            pauseButton.addEventListener('click', pauseAnimation);
+        }
+        
+        if (resetButton) {
+            resetButton.addEventListener('click', resetAnimation);
+        }
+        
+        // Tab switching event from the main tab controller
+        document.addEventListener('tabSwitch', (e) => {
+            if (e.detail.tab === 'background-animation') {
+                // Restart animation when switching to this tab
+                if (animationState.neurons.length === 0) {
+                    initNetwork();
+                }
+                
+                if (!animationState.running) {
+                    startAnimation();
+                }
+            } else if (animationState.running) {
+                // Pause animation when switching away from this tab
+                pauseAnimation();
+            }
+        });
+    }
+    
+    // Initialize everything
+    initVisualization();
+    setupControlListeners();
+}); 

js/backpropagation.js

@@ -0,0 +1,563 @@
+// Backpropagation Animation and Tab Functionality
+document.addEventListener('DOMContentLoaded', () => {
+    // Set initialization flag
+    window.backpropInitialized = true;
+    console.log('Backpropagation script initialized');
+    
+    // Canvas initialization function
+    function initializeCanvas() {
+        console.log('Initializing backpropagation canvas');
+        const canvas = document.getElementById('backprop-canvas');
+        if (!canvas) {
+            console.error('Backpropagation canvas not found!');
+            return;
+        }
+        
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+            console.error('Could not get 2D context for backpropagation canvas');
+            return;
+        }
+        
+        // Set canvas dimensions
+        const container = canvas.parentElement;
+        if (container) {
+            canvas.width = container.clientWidth || 800;
+            canvas.height = container.clientHeight || 400;
+        } else {
+            canvas.width = 800;
+            canvas.height = 400;
+        }
+        
+        // Clear canvas
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        
+        // Reset animation state and redraw
+        resetAnimation();
+        drawNetwork();
+    }
+    
+    // Register the canvas initialization function with tab manager
+    if (typeof window !== 'undefined') {
+        window.initBackpropCanvas = initializeCanvas;
+    }
+    
+    // Tab functionality
+    const tabButtons = document.querySelectorAll('.tab-button');
+    const tabContents = document.querySelectorAll('.tab-content');
+    
+    tabButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            // Remove active class from all tabs
+            tabButtons.forEach(btn => btn.classList.remove('active'));
+            tabContents.forEach(content => content.classList.remove('active'));
+            
+            // Add active class to clicked tab
+            button.classList.add('active');
+            const tabId = button.getAttribute('data-tab');
+            document.getElementById(`${tabId}-tab`).classList.add('active');
+            
+            // If switching to backpropagation tab, reset the animation
+            if (tabId === 'backpropagation') {
+                resetAnimation();
+            }
+        });
+    });
+    
+    // Backpropagation Animation Setup
+    const canvas = document.getElementById('backprop-canvas');
+    const ctx = canvas.getContext('2d');
+    
+    // Animation control buttons
+    const startButton = document.getElementById('start-animation');
+    const pauseButton = document.getElementById('pause-animation');
+    const resetButton = document.getElementById('reset-animation');
+    const speedControl = document.getElementById('animation-speed');
+    
+    // Animation state
+    let animationState = {
+        running: false,
+        currentStep: 0,
+        speed: 5,
+        animationFrameId: null,
+        network: null,
+        lastTimestamp: 0
+    };
+    
+    // Sample neural network for demonstration
+    class NeuralNetwork {
+        constructor() {
+            // Simple network with input, hidden and output layers
+            this.layers = [
+                { type: 'input', neurons: 3, activation: 'none' },
+                { type: 'hidden', neurons: 4, activation: 'relu' },
+                { type: 'output', neurons: 2, activation: 'sigmoid' }
+            ];
+            
+            // Initialize weights with random values
+            this.weights = [
+                this.generateRandomWeights(3, 4),  // Input to Hidden
+                this.generateRandomWeights(4, 2)   // Hidden to Output
+            ];
+            
+            // Initialize biases
+            this.biases = [
+                Array(4).fill(0).map(() => Math.random() * 0.2 - 0.1),  // Hidden layer biases
+                Array(2).fill(0).map(() => Math.random() * 0.2 - 0.1)   // Output layer biases
+            ];
+            
+            // For animation purposes
+            this.activations = [
+                Array(3).fill(0),  // Input activations
+                Array(4).fill(0),  // Hidden layer activations
+                Array(2).fill(0)   // Output activations
+            ];
+            
+            this.gradients = [
+                Array(3 * 4).fill(0),  // Input to Hidden gradients
+                Array(4 * 2).fill(0)   // Hidden to Output gradients
+            ];
+            
+            // Expected output for the sample
+            this.expectedOutput = [1, 0];
+            
+            // Sample input
+            this.sampleInput = [0.8, 0.2, 0.5];
+            
+            // Error
+            this.error = 0;
+        }
+        
+        generateRandomWeights(inputSize, outputSize) {
+            const weights = [];
+            for (let i = 0; i < inputSize * outputSize; i++) {
+                weights.push(Math.random() * 0.4 - 0.2);  // Random weights between -0.2 and 0.2
+            }
+            return weights;
+        }
+        
+        // Activation functions
+        relu(x) {
+            return Math.max(0, x);
+        }
+        
+        sigmoid(x) {
+            return 1 / (1 + Math.exp(-x));
+        }
+        
+        // Forward pass
+        forwardPass() {
+            // Set input layer activations to sample input
+            this.activations[0] = [...this.sampleInput];
+            
+            // Calculate hidden layer activations
+            for (let i = 0; i < this.layers[1].neurons; i++) {
+                let sum = this.biases[0][i];
+                for (let j = 0; j < this.layers[0].neurons; j++) {
+                    const weightIdx = j * this.layers[1].neurons + i;
+                    sum += this.activations[0][j] * this.weights[0][weightIdx];
+                }
+                this.activations[1][i] = this.relu(sum);
+            }
+            
+            // Calculate output layer activations
+            for (let i = 0; i < this.layers[2].neurons; i++) {
+                let sum = this.biases[1][i];
+                for (let j = 0; j < this.layers[1].neurons; j++) {
+                    const weightIdx = j * this.layers[2].neurons + i;
+                    sum += this.activations[1][j] * this.weights[1][weightIdx];
+                }
+                this.activations[2][i] = this.sigmoid(sum);
+            }
+            
+            // Calculate error (mean squared error)
+            this.error = 0;
+            for (let i = 0; i < this.layers[2].neurons; i++) {
+                const diff = this.activations[2][i] - this.expectedOutput[i];
+                this.error += diff * diff;
+            }
+            this.error /= this.layers[2].neurons;
+            
+            return this.activations[2]; // Return output
+        }
+        
+        // Calculate gradients (backward pass)
+        calculateGradients() {
+            // Output layer gradients
+            const outputDeltas = [];
+            for (let i = 0; i < this.layers[2].neurons; i++) {
+                const output = this.activations[2][i];
+                const target = this.expectedOutput[i];
+                // Derivative of loss with respect to output * derivative of sigmoid
+                outputDeltas.push((output - target) * output * (1 - output));
+            }
+            
+            // Hidden to Output gradients
+            for (let i = 0; i < this.layers[1].neurons; i++) {
+                for (let j = 0; j < this.layers[2].neurons; j++) {
+                    const weightIdx = i * this.layers[2].neurons + j;
+                    this.gradients[1][weightIdx] = this.activations[1][i] * outputDeltas[j];
+                }
+            }
+            
+            // Hidden layer deltas
+            const hiddenDeltas = Array(this.layers[1].neurons).fill(0);
+            for (let i = 0; i < this.layers[1].neurons; i++) {
+                let sum = 0;
+                for (let j = 0; j < this.layers[2].neurons; j++) {
+                    const weightIdx = i * this.layers[2].neurons + j;
+                    sum += this.weights[1][weightIdx] * outputDeltas[j];
+                }
+                // ReLU derivative is 1 if x > 0, otherwise 0
+                hiddenDeltas[i] = sum * (this.activations[1][i] > 0 ? 1 : 0);
+            }
+            
+            // Input to Hidden gradients
+            for (let i = 0; i < this.layers[0].neurons; i++) {
+                for (let j = 0; j < this.layers[1].neurons; j++) {
+                    const weightIdx = i * this.layers[1].neurons + j;
+                    this.gradients[0][weightIdx] = this.activations[0][i] * hiddenDeltas[j];
+                }
+            }
+            
+            return this.gradients;
+        }
+        
+        // Update weights based on gradients
+        updateWeights(learningRate = 0.1) {
+            // Update weights using calculated gradients
+            for (let layerIdx = 0; layerIdx < this.weights.length; layerIdx++) {
+                for (let i = 0; i < this.weights[layerIdx].length; i++) {
+                    this.weights[layerIdx][i] -= learningRate * this.gradients[layerIdx][i];
+                }
+            }
+            
+            // Update biases (not shown in animation for simplicity)
+            // In a real implementation, we would update biases too
+        }
+    }
+    
+    // Canvas resize functionality
+    function resizeCanvas() {
+        const container = canvas.parentElement;
+        canvas.width = container.clientWidth;
+        canvas.height = container.clientHeight;
+        
+        // Redraw if already animating
+        if (animationState.network) {
+            drawNetwork(animationState.network);
+        }
+    }
+    
+    // Initialize animation
+    function initAnimation() {
+        if (!canvas) return;
+        
+        resizeCanvas();
+        window.addEventListener('resize', resizeCanvas);
+        
+        // Create neural network
+        animationState.network = new NeuralNetwork();
+        
+        // Draw initial state
+        drawNetwork(animationState.network);
+        
+        // Update variables display
+        updateVariablesDisplay(animationState.network);
+        
+        // Set button states
+        startButton.disabled = false;
+        pauseButton.disabled = true;
+        resetButton.disabled = true;
+    }
+    
+    // Draw the neural network
+    function drawNetwork(network) {
+        if (!ctx) return;
+        
+        // Clear canvas
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        
+        const padding = 50;
+        const width = canvas.width - padding * 2;
+        const height = canvas.height - padding * 2;
+        
+        // Calculate neuron positions
+        const layers = network.layers;
+        const layerPositions = [];
+        
+        for (let i = 0; i < layers.length; i++) {
+            const layerNeurons = [];
+            const x = padding + (width / (layers.length - 1)) * i;
+            
+            for (let j = 0; j < layers[i].neurons; j++) {
+                const y = padding + (height / (layers[i].neurons + 1)) * (j + 1);
+                layerNeurons.push({ x, y });
+            }
+            
+            layerPositions.push(layerNeurons);
+        }
+        
+        // Draw connections
+        for (let layerIdx = 0; layerIdx < layers.length - 1; layerIdx++) {
+            for (let i = 0; i < layers[layerIdx].neurons; i++) {
+                for (let j = 0; j < layers[layerIdx + 1].neurons; j++) {
+                    const weightIdx = i * layers[layerIdx + 1].neurons + j;
+                    const weight = network.weights[layerIdx][weightIdx];
+                    
+                    // Map weight to opacity for visualization
+                    const normalizedWeight = Math.min(Math.abs(weight) * 5, 1);
+                    
+                    // Set connection style based on the animation step
+                    let connectionColor = '#ccc';
+                    
+                    if (animationState.currentStep === 1) {
+                        // Forward pass: blue
+                        connectionColor = `rgba(52, 152, 219, ${normalizedWeight})`;
+                    } else if (animationState.currentStep === 2) {
+                        // Error calculation: red
+                        if (layerIdx === network.weights.length - 1) {
+                            connectionColor = `rgba(231, 76, 60, ${normalizedWeight})`;
+                        } else {
+                            connectionColor = `rgba(52, 152, 219, ${normalizedWeight})`;
+                        }
+                    } else if (animationState.currentStep === 3) {
+                        // Backward pass: purple
+                        connectionColor = `rgba(155, 89, 182, ${normalizedWeight})`;
+                    } else if (animationState.currentStep === 4) {
+                        // Weight update: green
+                        const gradientNormalized = Math.min(Math.abs(network.gradients[layerIdx][weightIdx]) * 20, 1);
+                        connectionColor = `rgba(46, 204, 113, ${gradientNormalized})`;
+                    } else {
+                        // Default state: gray with weight intensity
+                        connectionColor = `rgba(150, 150, 150, ${normalizedWeight})`;
+                    }
+                    
+                    // Draw the connection
+                    ctx.beginPath();
+                    ctx.moveTo(layerPositions[layerIdx][i].x, layerPositions[layerIdx][i].y);
+                    ctx.lineTo(layerPositions[layerIdx + 1][j].x, layerPositions[layerIdx + 1][j].y);
+                    ctx.strokeStyle = connectionColor;
+                    ctx.lineWidth = 2;
+                    ctx.stroke();
+                }
+            }
+        }
+        
+        // Draw neurons
+        for (let layerIdx = 0; layerIdx < layers.length; layerIdx++) {
+            for (let i = 0; i < layers[layerIdx].neurons; i++) {
+                const { x, y } = layerPositions[layerIdx][i];
+                
+                // Set neuron style based on activation value
+                const activation = network.activations[layerIdx][i];
+                const activationColor = `rgba(52, 152, 219, ${Math.min(Math.max(activation, 0.2), 0.9)})`;
+                
+                // Draw neuron
+                ctx.beginPath();
+                ctx.arc(x, y, 20, 0, Math.PI * 2);
+                ctx.fillStyle = activationColor;
+                ctx.fill();
+                ctx.strokeStyle = '#2980b9';
+                ctx.lineWidth = 2;
+                ctx.stroke();
+                
+                // Draw neuron value
+                ctx.fillStyle = '#fff';
+                ctx.font = '12px Arial';
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'middle';
+                ctx.fillText(activation.toFixed(2), x, y);
+                
+                // Draw layer labels
+                if (i === 0) {
+                    ctx.fillStyle = '#333';
+                    ctx.font = '14px Arial';
+                    ctx.textAlign = 'center';
+                    ctx.fillText(layers[layerIdx].type.toUpperCase(), x, y - 40);
+                }
+            }
+        }
+    }
+    
+    // Update the variables display
+    function updateVariablesDisplay(network) {
+        const variablesContainer = document.getElementById('variables-container');
+        if (!variablesContainer) return;
+        
+        let html = '';
+        
+        // Different display based on animation step
+        switch (animationState.currentStep) {
+            case 1: // Forward Pass
+                html += `<div class="variable">Input: [${network.activations[0].map(v => v.toFixed(2)).join(', ')}]</div>`;
+                html += `<div class="variable">Hidden: [${network.activations[1].map(v => v.toFixed(2)).join(', ')}]</div>`;
+                html += `<div class="variable">Output: [${network.activations[2].map(v => v.toFixed(2)).join(', ')}]</div>`;
+                break;
+            case 2: // Error Calculation
+                html += `<div class="variable">Prediction: [${network.activations[2].map(v => v.toFixed(2)).join(', ')}]</div>`;
+                html += `<div class="variable">Target: [${network.expectedOutput.join(', ')}]</div>`;
+                html += `<div class="variable">Error: ${network.error.toFixed(4)}</div>`;
+                break;
+            case 3: // Backward Pass
+                html += `<div class="variable">Output Deltas:</div>`;
+                for (let i = 0; i < network.layers[2].neurons; i++) {
+                    const output = network.activations[2][i];
+                    const target = network.expectedOutput[i];
+                    const delta = (output - target) * output * (1 - output);
+                    html += `<div class="variable">  δ${i}: ${delta.toFixed(4)}</div>`;
+                }
+                break;
+            case 4: // Weight Updates
+                html += `<div class="variable">Selected Gradients:</div>`;
+                // Show just a few example gradients to avoid clutter
+                for (let layerIdx = 0; layerIdx < network.gradients.length; layerIdx++) {
+                    const layerName = layerIdx === 0 ? 'Input→Hidden' : 'Hidden→Output';
+                    html += `<div class="variable">${layerName}:</div>`;
+                    
+                    // Show first few gradients as examples
+                    for (let i = 0; i < Math.min(3, network.gradients[layerIdx].length); i++) {
+                        html += `<div class="variable">  ∇w${i}: ${network.gradients[layerIdx][i].toFixed(4)}</div>`;
+                    }
+                }
+                break;
+            default:
+                html += `<div class="variable">Click "Start Animation" to begin</div>`;
+        }
+        
+        variablesContainer.innerHTML = html;
+    }
+    
+    // Animation steps
+    const animationSteps = [
+        {
+            name: 'Starting',
+            description: 'Neural network in initial state. Click "Start Animation" to begin.'
+        },
+        {
+            name: 'Forward Pass',
+            description: 'Input data flows through the network to produce a prediction. Each neuron computes a weighted sum of its inputs, then applies an activation function.'
+        },
+        {
+            name: 'Error Calculation',
+            description: 'The network compares its prediction with the expected output to compute the error. This error measures how far off the prediction is.'
+        },
+        {
+            name: 'Backward Pass',
+            description: 'The error is propagated backward through the network, assigning responsibility to each weight for the prediction error.'
+        },
+        {
+            name: 'Weight Updates',
+            description: 'Weights are adjusted in proportion to their contribution to the error. Weights that contributed more to the error are adjusted more significantly.'
+        }
+    ];
+    
+    // Update step information display
+    function updateStepInfo(stepIndex) {
+        const stepName = document.getElementById('step-name');
+        const stepDescription = document.getElementById('step-description');
+        
+        if (stepName && stepDescription && animationSteps[stepIndex]) {
+            stepName.textContent = animationSteps[stepIndex].name;
+            stepDescription.textContent = animationSteps[stepIndex].description;
+        }
+    }
+    
+    // Animation loop
+    function animate(timestamp) {
+        if (!animationState.running) return;
+        
+        // Calculate delta time for animation speed
+        const deltaTime = timestamp - animationState.lastTimestamp;
+        const interval = 3000 / animationState.speed; // Base interval divided by speed
+        
+        if (deltaTime > interval || animationState.lastTimestamp === 0) {
+            animationState.lastTimestamp = timestamp;
+            
+            // Progress through animation steps
+            if (animationState.currentStep === 0) {
+                // Initial state to forward pass
+                animationState.currentStep = 1;
+                animationState.network.forwardPass();
+            } else if (animationState.currentStep === 1) {
+                // Forward pass to error calculation
+                animationState.currentStep = 2;
+            } else if (animationState.currentStep === 2) {
+                // Error calculation to backward pass
+                animationState.currentStep = 3;
+                animationState.network.calculateGradients();
+            } else if (animationState.currentStep === 3) {
+                // Backward pass to weight updates
+                animationState.currentStep = 4;
+            } else if (animationState.currentStep === 4) {
+                // Weight updates to new forward pass
+                animationState.network.updateWeights(0.1);
+                animationState.currentStep = 1;
+                animationState.network.forwardPass();
+            }
+            
+            // Update visuals
+            drawNetwork(animationState.network);
+            updateVariablesDisplay(animationState.network);
+            updateStepInfo(animationState.currentStep);
+        }
+        
+        // Continue animation
+        animationState.animationFrameId = requestAnimationFrame(animate);
+    }
+    
+    // Start animation
+    function startAnimation() {
+        if (!animationState.running) {
+            animationState.running = true;
+            animationState.lastTimestamp = 0;
+            animationState.animationFrameId = requestAnimationFrame(animate);
+            
+            startButton.disabled = true;
+            pauseButton.disabled = false;
+            resetButton.disabled = false;
+        }
+    }
+    
+    // Pause animation
+    function pauseAnimation() {
+        if (animationState.running) {
+            animationState.running = false;
+            if (animationState.animationFrameId) {
+                cancelAnimationFrame(animationState.animationFrameId);
+            }
+            
+            startButton.disabled = false;
+            pauseButton.disabled = true;
+            resetButton.disabled = false;
+        }
+    }
+    
+    // Reset animation
+    function resetAnimation() {
+        pauseAnimation();
+        
+        animationState.currentStep = 0;
+        animationState.network = new NeuralNetwork();
+        
+        drawNetwork(animationState.network);
+        updateVariablesDisplay(animationState.network);
+        updateStepInfo(animationState.currentStep);
+        
+        startButton.disabled = false;
+        pauseButton.disabled = true;
+        resetButton.disabled = true;
+    }
+    
+    // Control event listeners
+    startButton.addEventListener('click', startAnimation);
+    pauseButton.addEventListener('click', pauseAnimation);
+    resetButton.addEventListener('click', resetAnimation);
+    
+    speedControl.addEventListener('input', () => {
+        animationState.speed = parseInt(speedControl.value, 10);
+    });
+    
+    // Initialize the animation
+    initAnimation();
+}); 

js/check-drag-drop.js

@@ -0,0 +1,17 @@
+// Check and initialize drag-drop functionality
+document.addEventListener('DOMContentLoaded', function() {
+    // Check if the initializeDragAndDrop function exists
+    if (typeof initializeDragAndDrop === 'function') {
+        console.log('Drag and Drop initialization found!');
+        
+        // Delay initialization to ensure everything is loaded
+        setTimeout(() => {
+            console.log('Initializing Drag and Drop functionality...');
+            // Call the initialization function
+            initializeDragAndDrop();
+        }, 500);
+    } else {
+        console.error('ERROR: Drag and Drop initialization function not found!');
+        console.log('Make sure drag-drop.js is correctly loaded before other scripts.');
+    }
+}); 

js/complete-drag-fix.js

@@ -0,0 +1,1356 @@
+// Complete drag and drop fix for neural network playground
+// This handles both initial node creation and moving existing nodes
+
+(function() {
+    console.log('Loading complete drag and drop fix...');
+    
+    document.addEventListener('DOMContentLoaded', function() {
+        // Wait a bit to ensure other scripts have loaded
+        setTimeout(initializeCompleteDragFix, 1000);
+    });
+    
+    function initializeCompleteDragFix() {
+        console.log('Initializing complete drag and drop fix');
+        
+        // Get necessary elements
+        const canvas = document.getElementById('network-canvas');
+        const nodeItems = document.querySelectorAll('.node-item');
+        
+        if (!canvas) {
+            console.error('Canvas element not found!');
+            return;
+        }
+        
+        // Track state for moving existing nodes
+        let activeNode = null;
+        let offsetX = 0;
+        let offsetY = 0;
+        let isDragging = false;
+        
+        // Track node counts for naming
+        const nodeCounter = {};
+        
+        // Anti-duplication system for new nodes
+        const recentlyCreated = {
+            nodeIds: new Set(),
+            timestamp: 0
+        };
+        
+        // Network model structure (reused from original code)
+        let networkLayers = {
+            layers: [],
+            connections: []
+        };
+        
+        // Helper function for formatting numbers
+        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();
+        }
+        
+        // Add debug button for Conv2D parameters
+        addConv2DFixButton();
+        
+        // 1. DRAGGING NEW NODES FROM PANEL TO CANVAS
+        
+        // Setup draggable items
+        nodeItems.forEach(item => {
+            // Override existing dragstart handler for reliability
+            item.addEventListener('dragstart', function(e) {
+                const nodeType = this.getAttribute('data-type');
+                console.log(`Starting drag for new ${nodeType} node`);
+                
+                // Ensure data is properly set for transfer
+                e.dataTransfer.setData('text/plain', nodeType);
+                e.dataTransfer.effectAllowed = 'copy';
+                
+                // Create ghost image
+                const ghost = this.cloneNode(true);
+                ghost.style.opacity = '0.5';
+                document.body.appendChild(ghost);
+                e.dataTransfer.setDragImage(ghost, 0, 0);
+                
+                // Remove ghost image after dragstart completes
+                setTimeout(() => {
+                    document.body.removeChild(ghost);
+                }, 0);
+            });
+        });
+        
+        // Add canvas event handlers for dropping new nodes
+        function handleDragOver(e) {
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'copy';
+        }
+        
+        // Remove old handlers first to prevent duplicates
+        canvas.removeEventListener('dragover', handleDragOver);
+        canvas.addEventListener('dragover', handleDragOver);
+        
+        // Create drop handler for new nodes
+        function handleDrop(e) {
+            e.preventDefault();
+            console.log('Drop event triggered');
+            
+            // Debounce: prevent multiple drops in quick succession
+            const now = Date.now();
+            if (now - recentlyCreated.timestamp < 500) {
+                console.log('Debouncing drop event');
+                return;
+            }
+            recentlyCreated.timestamp = now;
+            
+            // Get node type from dataTransfer
+            const nodeType = e.dataTransfer.getData('text/plain');
+            if (!nodeType) {
+                console.error('No node type found in drop data');
+                return;
+            }
+            
+            console.log(`Creating new ${nodeType} node`);
+            
+            // Calculate position for new node
+            const canvasRect = canvas.getBoundingClientRect();
+            const x = e.clientX - canvasRect.left - 75;
+            const y = e.clientY - canvasRect.top - 30;
+            
+            // Ensure position is within canvas
+            const posX = Math.max(0, Math.min(canvasRect.width - 150, x));
+            const posY = Math.max(0, Math.min(canvasRect.height - 100, y));
+            
+            // Generate unique ID
+            const layerId = `${nodeType}-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
+            
+            // Create the new node
+            createNode(nodeType, layerId, posX, posY);
+        }
+        
+        // Remove old handler first to prevent duplicates
+        canvas.removeEventListener('drop', handleDrop);
+        canvas.addEventListener('drop', handleDrop);
+        
+        // Function to create a new node
+        function createNode(nodeType, layerId, posX, posY) {
+            // Increment counter for this node type
+            nodeCounter[nodeType] = (nodeCounter[nodeType] || 0) + 1;
+            
+            // Get default configuration from neural network module or use our own defaults
+            let nodeConfig;
+            if (window.neuralNetwork && window.neuralNetwork.createNodeConfig) {
+                nodeConfig = window.neuralNetwork.createNodeConfig(nodeType);
+            } else {
+                // Fallback default configs if neural network module is not available
+                nodeConfig = {};
+                switch (nodeType) {
+                    case 'input':
+                        nodeConfig = {
+                            shape: [28, 28, 1],
+                            outputShape: [28, 28, 1],
+                            parameters: 0
+                        };
+                        break;
+                        
+                    case 'hidden':
+                        nodeConfig = {
+                            units: 128,
+                            activation: 'relu',
+                            outputShape: [128],
+                            parameters: 0
+                        };
+                        break;
+                        
+                    case 'output':
+                        nodeConfig = {
+                            units: 10,
+                            activation: 'softmax',
+                            outputShape: [10],
+                            parameters: 0
+                        };
+                        break;
+                        
+                    case 'conv':
+                        nodeConfig = {
+                            filters: 32,
+                            kernelSize: [3, 3],
+                            strides: [1, 1],
+                            padding: 'same',
+                            activation: 'relu',
+                            outputShape: ['?', '?', 32],
+                            parameters: 0
+                        };
+                        break;
+                        
+                    case 'pool':
+                        nodeConfig = {
+                            poolSize: [2, 2],
+                            strides: [2, 2],
+                            padding: 'valid',
+                            poolType: 'max',
+                            outputShape: ['?', '?', '?'],
+                            parameters: 0
+                        };
+                        break;
+                        
+                    case 'linear':
+                        nodeConfig = {
+                            units: 64,
+                            activation: 'relu',
+                            useBias: true,
+                            outputShape: [64],
+                            parameters: 0
+                        };
+                        break;
+                }
+            }
+            
+            // Ensure Conv2D has properly formatted array values
+            if (nodeType === 'conv') {
+                if (!nodeConfig.kernelSize || typeof nodeConfig.kernelSize === 'string') {
+                    nodeConfig.kernelSize = [3, 3];
+                }
+                if (!nodeConfig.strides || typeof nodeConfig.strides === 'string') {
+                    nodeConfig.strides = [1, 1];
+                }
+                if (!nodeConfig.filters || isNaN(nodeConfig.filters)) {
+                    nodeConfig.filters = 32;
+                }
+                nodeConfig.padding = nodeConfig.padding || 'same';
+                nodeConfig.activation = nodeConfig.activation || 'relu';
+            }
+            
+            // Create node element
+            const canvasNode = document.createElement('div');
+            canvasNode.className = `canvas-node ${nodeType}-node`;
+            canvasNode.setAttribute('data-type', nodeType);
+            canvasNode.setAttribute('data-id', layerId);
+            canvasNode.style.position = 'absolute';
+            canvasNode.style.left = `${posX}px`;
+            canvasNode.style.top = `${posY}px`;
+            
+            // Set up node content (input/output shape, parameters)
+            let nodeName, inputShape, outputShape, parameters;
+            
+            switch(nodeType) {
+                case 'input':
+                    nodeName = 'Input Layer';
+                    inputShape = 'N/A';
+                    outputShape = '[' + nodeConfig.shape.join(' × ') + ']';
+                    parameters = nodeConfig.parameters;
+                    break;
+                case 'hidden':
+                    nodeConfig.units = nodeCounter[nodeType] === 1 ? 128 : 64;
+                    nodeName = `Hidden Layer ${nodeCounter[nodeType]}`;
+                    inputShape = 'Connect input';
+                    outputShape = `[${nodeConfig.units}]`;
+                    parameters = 'Connect input to calculate';
+                    break;
+                case 'output':
+                    nodeName = 'Output Layer';
+                    inputShape = 'Connect input';
+                    outputShape = `[${nodeConfig.units}]`;
+                    parameters = 'Connect input to calculate';
+                    break;
+                case 'conv':
+                    nodeConfig.filters = 32 * nodeCounter[nodeType];
+                    nodeName = `Conv2D ${nodeCounter[nodeType]}`;
+                    inputShape = 'Connect input';
+                    outputShape = 'Depends on input';
+                    parameters = `Kernel: ${nodeConfig.kernelSize.join('×')}\nStride: ${nodeConfig.strides.join('×')}\nPadding: ${nodeConfig.padding}`;
+                    break;
+                case 'pool':
+                    nodeName = `Pooling ${nodeCounter[nodeType]}`;
+                    inputShape = 'Connect input';
+                    outputShape = 'Depends on input';
+                    parameters = `Pool size: ${nodeConfig.poolSize.join('×')}\nStride: ${nodeConfig.strides.join('×')}\nPadding: ${nodeConfig.padding}`;
+                    break;
+                default:
+                    nodeName = 'Unknown Layer';
+                    inputShape = 'N/A';
+                    outputShape = 'N/A';
+                    parameters = 'N/A';
+            }
+            
+            // Create node content
+            const nodeContent = document.createElement('div');
+            nodeContent.className = 'node-content';
+            
+            // Add shape information
+            const shapeInfo = document.createElement('div');
+            shapeInfo.className = 'shape-info';
+            shapeInfo.innerHTML = `
+                <div class="shape-row"><span class="shape-label">Input:</span> <span class="input-shape">${inputShape}</span></div>
+                <div class="shape-row"><span class="shape-label">Output:</span> <span class="output-shape">${outputShape}</span></div>
+            `;
+            
+            // Add parameters section
+            const paramsSection = document.createElement('div');
+            paramsSection.className = 'params-section';
+            paramsSection.innerHTML = `
+                <div class="params-details">${parameters}</div>
+                <div class="node-parameters">Params: ${nodeConfig.parameters !== undefined ? formatNumber(nodeConfig.parameters) : '?'}</div>
+            `;
+            
+            // Assemble content
+            nodeContent.appendChild(shapeInfo);
+            nodeContent.appendChild(paramsSection);
+            
+            // Add dimensions section
+            const dimensionsSection = document.createElement('div');
+            dimensionsSection.className = 'node-dimensions';
+            
+            // Set dimensions text based on node type
+            let dimensionsText = '';
+            switch(nodeType) {
+                case 'input':
+                    dimensionsText = nodeConfig.shape.join(' × ');
+                    break;
+                case 'hidden':
+                case 'output':
+                    dimensionsText = nodeConfig.units.toString();
+                    break;
+                case 'conv':
+                    if (nodeConfig.inputShape && nodeConfig.outputShape) {
+                        dimensionsText = `${nodeConfig.inputShape.join('×')} → ${nodeConfig.outputShape.join('×')}`;
+                    } else {
+                        dimensionsText = `? → ${nodeConfig.filters} filters`;
+                    }
+                    break;
+                case 'pool':
+                    if (nodeConfig.inputShape && nodeConfig.outputShape) {
+                        dimensionsText = `${nodeConfig.inputShape.join('×')} → ${nodeConfig.outputShape.join('×')}`;
+                    } else {
+                        dimensionsText = `? → ?`;
+                    }
+                    break;
+            }
+            dimensionsSection.textContent = dimensionsText;
+            
+            // Create node title
+            const nodeTitle = document.createElement('div');
+            nodeTitle.className = 'node-title';
+            nodeTitle.textContent = nodeName;
+            
+            // Add node controls (edit and delete buttons)
+            const nodeControls = document.createElement('div');
+            nodeControls.className = 'node-controls';
+            
+            const editButton = document.createElement('button');
+            editButton.className = 'node-edit-btn';
+            editButton.innerHTML = '✎';
+            editButton.title = 'Edit Layer';
+            
+            const deleteButton = document.createElement('button');
+            deleteButton.className = 'node-delete-btn';
+            deleteButton.innerHTML = '×';
+            deleteButton.title = 'Delete Layer';
+            
+            nodeControls.appendChild(editButton);
+            nodeControls.appendChild(deleteButton);
+            
+            // Add connection ports
+            const portIn = document.createElement('div');
+            portIn.className = 'node-port port-in';
+            
+            const portOut = document.createElement('div');
+            portOut.className = 'node-port port-out';
+            
+            // Assemble the node
+            canvasNode.appendChild(nodeTitle);
+            canvasNode.appendChild(nodeControls);
+            canvasNode.appendChild(dimensionsSection);
+            canvasNode.appendChild(nodeContent);
+            canvasNode.appendChild(portIn);
+            canvasNode.appendChild(portOut);
+            
+            // Store metadata
+            canvasNode.setAttribute('data-name', nodeName);
+            canvasNode.setAttribute('data-dimensions', dimensionsText);
+            canvasNode.layerConfig = nodeConfig;
+            
+            // Add node to canvas
+            canvas.appendChild(canvasNode);
+            
+            // Add to network model
+            networkLayers.layers.push({
+                id: layerId,
+                type: nodeType,
+                name: nodeName,
+                position: { x: posX, y: posY },
+                dimensions: dimensionsText,
+                config: nodeConfig,
+                parameters: nodeConfig.parameters || 0
+            });
+            
+            // Set up event handlers (edit, delete, connections)
+            setupNodeEventHandlers(canvasNode);
+            
+            // Hide canvas hint
+            const canvasHint = document.querySelector('.canvas-hint');
+            if (canvasHint) {
+                canvasHint.style.display = 'none';
+            }
+            
+            // Notify model update
+            document.dispatchEvent(new CustomEvent('networkUpdated', {
+                detail: networkLayers
+            }));
+            
+            console.log(`Node created: ${nodeType} (${layerId})`);
+            return canvasNode;
+        }
+        
+        // 2. MOVING EXISTING NODES ON CANVAS
+        
+        // Setup event handlers for node actions
+        function setupNodeEventHandlers(node) {
+            // Setup direct mouse handlers for dragging
+            node.addEventListener('mousedown', function(e) {
+                // Skip if clicking on controls or ports
+                if (e.target.closest('.node-controls') || e.target.closest('.node-port')) {
+                    return;
+                }
+                
+                console.log(`Mouse down on node: ${node.getAttribute('data-id')}`);
+                
+                // Initialize drag
+                activeNode = node;
+                const rect = node.getBoundingClientRect();
+                offsetX = e.clientX - rect.left;
+                offsetY = e.clientY - rect.top;
+                isDragging = true;
+                
+                // Visual indication
+                node.classList.add('dragging');
+                document.body.classList.add('node-dragging');
+                node.style.zIndex = '1000';
+                
+                e.preventDefault();
+            });
+            
+            // Edit button click
+            const editButton = node.querySelector('.node-edit-btn');
+            if (editButton) {
+                editButton.addEventListener('click', function(e) {
+                    e.stopPropagation();
+                    openLayerEditor(node);
+                });
+            }
+            
+            // Delete button click
+            const deleteButton = node.querySelector('.node-delete-btn');
+            if (deleteButton) {
+                deleteButton.addEventListener('click', function(e) {
+                    e.stopPropagation();
+                    deleteNode(node);
+                });
+            }
+            
+            // Double-click to edit
+            node.addEventListener('dblclick', function() {
+                openLayerEditor(node);
+            });
+            
+            // Right-click to delete
+            node.addEventListener('contextmenu', function(e) {
+                e.preventDefault();
+                deleteNode(node);
+            });
+            
+            // Connection port events
+            const portOut = node.querySelector('.port-out');
+            if (portOut) {
+                portOut.addEventListener('mousedown', function(e) {
+                    e.stopPropagation();
+                    // Use our own connection handler instead of relying on window.startConnection
+                    startConnectionHandler(node, e);
+                });
+            }
+        }
+        
+        // Global mouse handlers for dragging
+        document.addEventListener('mousemove', function(e) {
+            if (!isDragging || !activeNode) return;
+            
+            // Log occasionally for debugging
+            if (Math.random() < 0.05) {
+                console.log('Node is being dragged...');
+            }
+            
+            const canvasRect = canvas.getBoundingClientRect();
+            let x = e.clientX - canvasRect.left - offsetX;
+            let y = e.clientY - canvasRect.top - offsetY;
+            
+            // Keep within canvas
+            const nodeWidth = activeNode.offsetWidth || 180;
+            const nodeHeight = activeNode.offsetHeight || 120;
+            
+            x = Math.max(0, Math.min(canvasRect.width - nodeWidth, x));
+            y = Math.max(0, Math.min(canvasRect.height - nodeHeight, y));
+            
+            // Move node
+            activeNode.style.left = `${x}px`;
+            activeNode.style.top = `${y}px`;
+            
+            // Update model
+            const nodeId = activeNode.getAttribute('data-id');
+            const layerIndex = networkLayers.layers.findIndex(layer => layer.id === nodeId);
+            if (layerIndex !== -1) {
+                networkLayers.layers[layerIndex].position = { x, y };
+            }
+            
+            // Update connections
+            updateConnections(nodeId);
+        });
+        
+        document.addEventListener('mouseup', function() {
+            if (!isDragging || !activeNode) return;
+            
+            console.log('Node drag complete');
+            
+            // Visual cleanup
+            activeNode.classList.remove('dragging');
+            document.body.classList.remove('node-dragging');
+            activeNode.style.zIndex = '10';
+            
+            // Final connection update
+            updateConnections();
+            
+            // Cleanup
+            isDragging = false;
+            activeNode = null;
+            
+            // Notify model update
+            document.dispatchEvent(new CustomEvent('networkUpdated', {
+                detail: networkLayers
+            }));
+        });
+        
+        // Add handlers to existing nodes (for page refresh cases)
+        document.querySelectorAll('.canvas-node').forEach(setupNodeEventHandlers);
+        
+        // 3. SUPPORTING FUNCTIONS
+        
+        // Delete a node
+        function deleteNode(node) {
+            if (!node) return;
+            
+            const nodeId = node.getAttribute('data-id');
+            console.log(`Deleting node: ${nodeId}`);
+            
+            // Remove connections
+            const connections = document.querySelectorAll(`.connection[data-source="${nodeId}"], .connection[data-target="${nodeId}"]`);
+            connections.forEach(conn => {
+                if (conn.parentNode) {
+                    conn.parentNode.removeChild(conn);
+                }
+            });
+            
+            // Update model
+            networkLayers.connections = networkLayers.connections.filter(conn => 
+                conn.source !== nodeId && conn.target !== nodeId
+            );
+            
+            const layerIndex = networkLayers.layers.findIndex(layer => layer.id === nodeId);
+            if (layerIndex !== -1) {
+                networkLayers.layers.splice(layerIndex, 1);
+            }
+            
+            // Remove from DOM
+            if (node.parentNode) {
+                node.parentNode.removeChild(node);
+            }
+            
+            // Show hint if no nodes left
+            if (document.querySelectorAll('.canvas-node').length === 0) {
+                const canvasHint = document.querySelector('.canvas-hint');
+                if (canvasHint) {
+                    canvasHint.style.display = 'block';
+                }
+            }
+            
+            // Notify model update
+            document.dispatchEvent(new CustomEvent('networkUpdated', {
+                detail: networkLayers
+            }));
+        }
+        
+        // Open layer editor
+        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');
+            
+            console.log(`Opening editor for node: ${nodeId}`);
+            
+            // Trigger editor event
+            document.dispatchEvent(new CustomEvent('openLayerEditor', { 
+                detail: { 
+                    id: nodeId, 
+                    type: nodeType, 
+                    name: nodeName, 
+                    dimensions: dimensions,
+                    node: node
+                }
+            }));
+        }
+        
+        // Update connections
+        function updateConnections(specificNodeId = null) {
+            // Get connections to update
+            let connections;
+            if (specificNodeId) {
+                connections = document.querySelectorAll(`.connection[data-source="${specificNodeId}"], .connection[data-target="${specificNodeId}"]`);
+            } else {
+                connections = document.querySelectorAll('.connection:not(.temp-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 canvasRect = canvas.getBoundingClientRect();
+                        const sourceRect = sourcePort.getBoundingClientRect();
+                        const targetRect = targetPort.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 {
+                    // Remove orphaned connection
+                    if (connection.parentNode) {
+                        connection.parentNode.removeChild(connection);
+                    }
+                }
+            });
+        }
+        
+        // 5. CONNECTION HANDLING
+        
+        // Connection state tracking
+        let tempConnection = null;
+        let connectionSource = null;
+        
+        // Start creating a connection
+        function startConnectionHandler(sourceNode, event) {
+            console.log('Starting connection from node:', sourceNode.getAttribute('data-id'));
+            
+            // Cancel any existing connection attempt
+            if (tempConnection && tempConnection.parentNode) {
+                tempConnection.parentNode.removeChild(tempConnection);
+            }
+            
+            // Create a temporary connection element
+            tempConnection = document.createElement('div');
+            tempConnection.className = 'connection temp-connection';
+            canvas.appendChild(tempConnection);
+            
+            // Store the source node
+            connectionSource = sourceNode;
+            
+            // Get initial positions
+            const sourceId = sourceNode.getAttribute('data-id');
+            const sourcePort = sourceNode.querySelector('.port-out');
+            const canvasRect = canvas.getBoundingClientRect();
+            const sourceRect = sourcePort.getBoundingClientRect();
+            const startX = sourceRect.left + sourceRect.width / 2 - canvasRect.left;
+            const startY = sourceRect.top + sourceRect.height / 2 - canvasRect.top;
+            
+            // Set initial position
+            tempConnection.style.left = `${startX}px`;
+            tempConnection.style.top = `${startY}px`;
+            tempConnection.setAttribute('data-source', sourceId);
+            
+            // Add event listeners for moving and completing the connection
+            document.addEventListener('mousemove', moveConnectionHandler);
+            document.addEventListener('mouseup', endConnectionHandler);
+            
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        
+        // Update the temporary connection during drag
+        function moveConnectionHandler(event) {
+            if (!tempConnection || !connectionSource) return;
+            
+            const canvasRect = canvas.getBoundingClientRect();
+            const sourcePort = connectionSource.querySelector('.port-out');
+            const sourceRect = sourcePort.getBoundingClientRect();
+            
+            const startX = sourceRect.left + sourceRect.width / 2 - canvasRect.left;
+            const startY = sourceRect.top + sourceRect.height / 2 - canvasRect.top;
+            const endX = event.clientX - canvasRect.left;
+            const endY = event.clientY - 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;
+            
+            tempConnection.style.left = `${startX}px`;
+            tempConnection.style.top = `${startY}px`;
+            tempConnection.style.width = `${length}px`;
+            tempConnection.style.transform = `rotate(${angle}deg)`;
+        }
+        
+        // Complete or cancel the connection
+        function endConnectionHandler(event) {
+            // Remove the event listeners
+            document.removeEventListener('mousemove', moveConnectionHandler);
+            document.removeEventListener('mouseup', endConnectionHandler);
+            
+            if (!tempConnection || !connectionSource) return;
+            
+            // Check if we're over a valid target (port-in)
+            const targetPort = document.elementFromPoint(event.clientX, event.clientY);
+            let targetNode = null;
+            
+            if (targetPort && targetPort.classList.contains('port-in')) {
+                targetNode = targetPort.closest('.canvas-node');
+            }
+            
+            if (targetNode) {
+                const sourceId = connectionSource.getAttribute('data-id');
+                const targetId = targetNode.getAttribute('data-id');
+                
+                // Prevent self-connections
+                if (sourceId === targetId) {
+                    console.log('Cannot connect a node to itself');
+                    if (tempConnection.parentNode) {
+                        tempConnection.parentNode.removeChild(tempConnection);
+                    }
+                    tempConnection = null;
+                    connectionSource = null;
+                    return;
+                }
+                
+                // Check if connection already exists
+                const existingConnection = document.querySelector(`.connection[data-source="${sourceId}"][data-target="${targetId}"]`);
+                if (existingConnection) {
+                    console.log('Connection already exists');
+                    if (tempConnection.parentNode) {
+                        tempConnection.parentNode.removeChild(tempConnection);
+                    }
+                    tempConnection = null;
+                    connectionSource = null;
+                    return;
+                }
+                
+                console.log(`Creating connection: ${sourceId} → ${targetId}`);
+                
+                // Create the permanent connection
+                tempConnection.classList.remove('temp-connection');
+                tempConnection.setAttribute('data-target', targetId);
+                
+                // Add to network model
+                networkLayers.connections.push({
+                    source: sourceId,
+                    target: targetId
+                });
+                
+                // Update connection display
+                updateConnections();
+                
+                // Update parameters based on the new connection
+                updateParametersAfterConnection(sourceId, targetId);
+                
+                // Notify model update
+                document.dispatchEvent(new CustomEvent('networkUpdated', {
+                    detail: networkLayers
+                }));
+            } else {
+                // No valid target, remove the temp connection
+                if (tempConnection.parentNode) {
+                    tempConnection.parentNode.removeChild(tempConnection);
+                }
+            }
+            
+            // Reset state
+            tempConnection = null;
+            connectionSource = null;
+        }
+        
+        // Update parameters after a connection is made
+        function updateParametersAfterConnection(sourceId, targetId) {
+            const sourceNode = document.querySelector(`.canvas-node[data-id="${sourceId}"]`);
+            const targetNode = document.querySelector(`.canvas-node[data-id="${targetId}"]`);
+            
+            if (!sourceNode || !targetNode) return;
+            
+            const sourceType = sourceNode.getAttribute('data-type');
+            const targetType = targetNode.getAttribute('data-type');
+            
+            const sourceConfig = sourceNode.layerConfig || {};
+            const targetConfig = targetNode.layerConfig || {};
+            
+            console.log(`Updating parameters: ${sourceType} → ${targetType}`);
+            
+            // Check if target has a manual output shape (user set)
+            const hasManualOutputShape = targetConfig.outputShape && 
+                Array.isArray(targetConfig.outputShape) && 
+                targetConfig.outputShape.length > 0 &&
+                targetConfig.outputShape.some(dim => dim !== '?' && dim !== '');
+            
+            console.log(`Target has manual output shape: ${hasManualOutputShape}`, targetConfig.outputShape);
+            
+            // Set input shape of target based on output shape of source
+            if (sourceConfig.outputShape) {
+                targetConfig.inputShape = [...sourceConfig.outputShape];
+                
+                // Update the display
+                const inputShapeDisplay = targetNode.querySelector('.input-shape');
+                if (inputShapeDisplay) {
+                    inputShapeDisplay.textContent = `[${sourceConfig.outputShape.join(' × ')}]`;
+                }
+            }
+            
+            // If target has a manual output shape, don't recalculate the output shape
+            if (hasManualOutputShape) {
+                console.log('Preserving manual output shape:', targetConfig.outputShape);
+            } else {
+                // Calculate output shape and parameters based on node type
+                if (window.neuralNetwork && window.neuralNetwork.calculateOutputShape) {
+                    // Use neural network module if available
+                    const outputShape = window.neuralNetwork.calculateOutputShape(targetConfig, targetType);
+                    const parameters = window.neuralNetwork.calculateParameters(targetConfig, targetType);
+                    
+                    if (outputShape) {
+                        targetConfig.outputShape = outputShape;
+                        
+                        // Update output shape display
+                        const outputShapeDisplay = targetNode.querySelector('.output-shape');
+                        if (outputShapeDisplay) {
+                            outputShapeDisplay.textContent = `[${outputShape.join(' × ')}]`;
+                        }
+                    }
+                    
+                    if (parameters !== undefined) {
+                        targetConfig.parameters = parameters;
+                        
+                        // Update parameters display
+                        const paramsDisplay = targetNode.querySelector('.node-parameters');
+                        if (paramsDisplay) {
+                            paramsDisplay.textContent = `Params: ${formatNumber(parameters)}`;
+                        }
+                    }
+                } else {
+                    // Fallback calculations if neural network module is not available
+                    let outputShape, parameters;
+                    
+                    switch (targetType) {
+                        case 'hidden':
+                            outputShape = [targetConfig.units || 64];
+                            if (sourceConfig.outputShape) {
+                                const inputSize = sourceConfig.outputShape.reduce((a, b) => a * b, 1);
+                                parameters = inputSize * targetConfig.units + targetConfig.units; // weights + biases
+                            }
+                            break;
+                            
+                        case 'output':
+                            outputShape = [targetConfig.units || 10];
+                            if (sourceConfig.outputShape) {
+                                const inputSize = sourceConfig.outputShape.reduce((a, b) => a * b, 1);
+                                parameters = inputSize * targetConfig.units + targetConfig.units; // weights + biases
+                            }
+                            break;
+                            
+                        case 'conv':
+                            if (sourceConfig.outputShape && sourceConfig.outputShape.length >= 3) {
+                                // Very explicit type conversion - ensure all values are numbers
+                                const height = Math.max(1, parseInt(sourceConfig.outputShape[0]) || 1);  // Ensure at least 1
+                                const width = Math.max(1, parseInt(sourceConfig.outputShape[1]) || 1);   // Ensure at least 1
+                                const channels = Math.max(1, parseInt(sourceConfig.outputShape[2]) || 1); // Ensure at least 1
+                                
+                                console.log(`Conv2D CONNECTION INPUT SHAPE: [${height}, ${width}, ${channels}]`, 
+                                    {original: sourceConfig.outputShape, parsed: [height, width, channels]});
+                                
+                                // Ensure filters is a positive number
+                                const filters = Math.max(1, parseInt(targetConfig.filters) || 32);
+                                
+                                // Explicit processing of kernelSize with safety checks
+                                let kernelSize = [3, 3]; // Default fallback
+                                if (targetConfig.kernelSize) {
+                                    if (typeof targetConfig.kernelSize === 'string') {
+                                        kernelSize = targetConfig.kernelSize.split(',')
+                                            .map(v => Math.max(1, parseInt(v.trim()) || 1)); // Ensure at least 1
+                                    } else if (Array.isArray(targetConfig.kernelSize)) {
+                                        kernelSize = targetConfig.kernelSize
+                                            .map(v => Math.max(1, parseInt(v) || 1)); // Ensure at least 1
+                                    }
+                                }
+                                
+                                // Explicit processing of strides with safety checks
+                                let strides = [1, 1]; // Default fallback
+                                if (targetConfig.strides) {
+                                    if (typeof targetConfig.strides === 'string') {
+                                        strides = targetConfig.strides.split(',')
+                                            .map(v => Math.max(1, parseInt(v.trim()) || 1)); // Ensure at least 1
+                                    } else if (Array.isArray(targetConfig.strides)) {
+                                        strides = targetConfig.strides
+                                            .map(v => Math.max(1, parseInt(v) || 1)); // Ensure at least 1
+                                    }
+                                }
+                                
+                                // Ensure we have at least 2 elements for kernelSize and strides and all values are at least 1
+                                kernelSize = kernelSize.length >= 2 ? 
+                                    [Math.max(1, kernelSize[0]), Math.max(1, kernelSize[1])] : 
+                                    [Math.max(1, kernelSize[0] || 3), Math.max(1, kernelSize[0] || 3)];
+                                    
+                                strides = strides.length >= 2 ? 
+                                    [Math.max(1, strides[0]), Math.max(1, strides[1])] : 
+                                    [Math.max(1, strides[0] || 1), Math.max(1, strides[0] || 1)];
+                                
+                                console.log(`Conv2D CONNECTION CONFIG:`, {
+                                    filters: filters,
+                                    kernelSize: kernelSize,
+                                    strides: strides
+                                });
+                                
+                                // Store cleaned values back in config
+                                targetConfig.filters = filters;
+                                targetConfig.kernelSize = kernelSize;
+                                targetConfig.strides = strides;
+                                
+                                const padding = targetConfig.padding || 'same';
+                                
+                                // Calculate output dimensions based on padding
+                                let outHeight, outWidth;
+                                if (padding === 'same') {
+                                    outHeight = Math.ceil(height / strides[0]);
+                                    outWidth = Math.ceil(width / strides[1]);
+                                } else { // 'valid' padding
+                                    outHeight = Math.ceil((height - kernelSize[0] + 1) / strides[0]);
+                                    outWidth = Math.ceil((width - kernelSize[1] + 1) / strides[1]);
+                                }
+                                
+                                // Ensure output dimensions are at least 1
+                                outHeight = Math.max(1, outHeight);
+                                outWidth = Math.max(1, outWidth);
+                                
+                                // Final output shape with proper validation
+                                outputShape = [outHeight, outWidth, filters];
+                                
+                                // Calculate parameters step by step to avoid any overflow or multiplication errors
+                                const kh = Number(kernelSize[0]);
+                                const kw = Number(kernelSize[1]);
+                                const c = Number(channels);
+                                const f = Number(filters);
+                                
+                                // Check for any zeros or negative values that would make the calculation invalid
+                                if (kh <= 0 || kw <= 0 || c <= 0 || f <= 0) {
+                                    console.error(`Invalid Conv2D connection parameter values: kh=${kh}, kw=${kw}, c=${c}, f=${f}`);
+                                    parameters = 0;
+                                } else {
+                                    // Calculate with explicit steps to avoid any overflow
+                                    const kernelParams = kh * kw * c * f;
+                                    const biasParams = f;
+                                    parameters = kernelParams + biasParams;
+                                    
+                                    console.log(`Conv2D CONNECTION CALCULATION STEPS:
+                                      Kernel height (kh) = ${kh}
+                                      Kernel width (kw) = ${kw}
+                                      Input channels (c) = ${c}
+                                      Filters (f) = ${f}
+                                      Kernel params = ${kh} × ${kw} × ${c} × ${f} = ${kernelParams}
+                                      Bias params = ${biasParams}
+                                      Total params = ${kernelParams} + ${biasParams} = ${parameters}
+                                    `);
+                                }
+                                
+                                console.log(`Conv2D connection output shape: ${outHeight}×${outWidth}×${filters}`);
+                            } else {
+                                console.log('Cannot calculate Conv2D connection parameters - invalid input shape:', sourceConfig.outputShape);
+                                const filters = parseInt(targetConfig.filters) || 32;
+                                outputShape = ['?', '?', filters];
+                                parameters = 0;  // Set to 0 instead of '?' to avoid display issues
+                            }
+                            break;
+                            
+                        case 'pool':
+                            if (sourceConfig.outputShape && sourceConfig.outputShape.length >= 3) {
+                                const [height, width, channels] = sourceConfig.outputShape;
+                                const poolSize = targetConfig.poolSize || [2, 2];
+                                const stride = targetConfig.strides || poolSize;
+                                const padding = targetConfig.padding || 'valid';
+                                
+                                // Calculate output dimensions
+                                let outHeight, outWidth;
+                                if (padding === 'same') {
+                                    outHeight = Math.ceil(height / stride[0]);
+                                    outWidth = Math.ceil(width / stride[1]);
+                                } else { // 'valid' padding
+                                    outHeight = Math.ceil((height - poolSize[0] + 1) / stride[0]);
+                                    outWidth = Math.ceil((width - poolSize[1] + 1) / stride[1]);
+                                }
+                                
+                                outputShape = [outHeight, outWidth, channels];
+                                parameters = 0; // Pooling layers have no parameters
+                            }
+                            break;
+                    }
+                    
+                    // Update target config and display only for automatically calculated shapes
+                    if (outputShape) {
+                        targetConfig.outputShape = outputShape;
+                        
+                        // Update output shape display
+                        const outputShapeDisplay = targetNode.querySelector('.output-shape');
+                        if (outputShapeDisplay) {
+                            outputShapeDisplay.textContent = `[${outputShape.join(' × ')}]`;
+                        }
+                    }
+                    
+                    if (parameters !== undefined) {
+                        targetConfig.parameters = parameters;
+                        
+                        // Update parameters display
+                        const paramsDisplay = targetNode.querySelector('.node-parameters');
+                        if (paramsDisplay) {
+                            paramsDisplay.textContent = `Params: ${formatNumber(parameters)}`;
+                        }
+                    }
+                }
+            }
+            
+            // Store updated config back to the node
+            targetNode.layerConfig = targetConfig;
+            
+            // Update model
+            const layerIndex = networkLayers.layers.findIndex(layer => layer.id === targetId);
+            if (layerIndex !== -1) {
+                networkLayers.layers[layerIndex].config = targetConfig;
+                if (targetConfig.parameters) {
+                    networkLayers.layers[layerIndex].parameters = targetConfig.parameters;
+                }
+            }
+            
+            // Force re-render the node to show updated info
+            const dimensions = targetNode.querySelector('.node-dimensions');
+            if (dimensions && targetConfig.outputShape) {
+                let dimensionsText = '';
+                if (targetType === 'hidden' || targetType === 'output') {
+                    dimensionsText = targetConfig.units || '';
+                } else if (targetType === 'conv' || targetType === 'pool') {
+                    dimensionsText = targetConfig.outputShape.join('×');
+                }
+                dimensions.textContent = dimensionsText;
+            }
+        }
+        
+        // 4. EXPORT GLOBAL FUNCTIONS
+        
+        // Expose functions to window for compatibility
+        window.dragDrop = {
+            getNetworkArchitecture: function() {
+                return networkLayers;
+            },
+            clearAllNodes: function() {
+                // Clear all nodes
+                document.querySelectorAll('.canvas-node, .connection').forEach(el => {
+                    if (el.parentNode) {
+                        el.parentNode.removeChild(el);
+                    }
+                });
+                
+                // Reset model
+                networkLayers = {
+                    layers: [],
+                    connections: []
+                };
+                
+                // Reset counters
+                for (let key in nodeCounter) {
+                    nodeCounter[key] = 0;
+                }
+                
+                // Show hint
+                const canvasHint = document.querySelector('.canvas-hint');
+                if (canvasHint) {
+                    canvasHint.style.display = 'block';
+                }
+                
+                // Reset layer counter in neural network module
+                if (window.neuralNetwork && window.neuralNetwork.resetLayerCounter) {
+                    window.neuralNetwork.resetLayerCounter();
+                }
+                
+                // Notify update
+                document.dispatchEvent(new CustomEvent('networkUpdated', {
+                    detail: networkLayers
+                }));
+            },
+            updateConnections: updateConnections,
+            
+            // Force update all node parameters in the network
+            forceUpdateNetworkParameters: function() {
+                console.log('Force updating all network parameters');
+                
+                // Get all root nodes (nodes with no incoming connections)
+                const rootNodes = [];
+                const allNodeIds = networkLayers.layers.map(layer => layer.id);
+                const targetNodeIds = networkLayers.connections.map(conn => conn.target);
+                
+                allNodeIds.forEach(nodeId => {
+                    if (!targetNodeIds.includes(nodeId)) {
+                        rootNodes.push(nodeId);
+                    }
+                });
+                
+                console.log('Root nodes for parameter propagation:', rootNodes);
+                
+                // Start update from root nodes
+                rootNodes.forEach(nodeId => {
+                    updateDownstreamNodes(nodeId);
+                });
+                
+                // Recursive function to update downstream nodes
+                function updateDownstreamNodes(nodeId) {
+                    console.log(`Updating downstream from node: ${nodeId}`);
+                    
+                    // Find all connections from this node
+                    const outgoingConnections = networkLayers.connections.filter(conn => conn.source === nodeId);
+                    
+                    // If no outgoing connections, we're done with this branch
+                    if (outgoingConnections.length === 0) {
+                        console.log(`Node ${nodeId} has no outgoing connections`);
+                        return;
+                    }
+                    
+                    // Get source node and its config
+                    const sourceNode = document.querySelector(`.canvas-node[data-id="${nodeId}"]`);
+                    if (!sourceNode || !sourceNode.layerConfig) {
+                        console.warn(`Source node ${nodeId} not found or has no config`);
+                        return;
+                    }
+                    
+                    const sourceConfig = sourceNode.layerConfig;
+                    const sourceType = sourceNode.getAttribute('data-type');
+                    
+                    // Double check source outputShape is valid
+                    if (!sourceConfig.outputShape || !Array.isArray(sourceConfig.outputShape)) {
+                        console.warn(`Source node ${nodeId} (${sourceType}) has invalid output shape:`, sourceConfig.outputShape);
+                        // Try to fix based on node type
+                        if (sourceType === 'input' && Array.isArray(sourceConfig.shape)) {
+                            sourceConfig.outputShape = [...sourceConfig.shape];
+                            console.log(`Fixed input node output shape to:`, sourceConfig.outputShape);
+                        }
+                    }
+                    
+                    console.log(`Source node ${nodeId} (${sourceType}) output shape:`, sourceConfig.outputShape);
+                    
+                    // For each outgoing connection, update the target node
+                    outgoingConnections.forEach(conn => {
+                        const targetId = conn.target;
+                        const targetNode = document.querySelector(`.canvas-node[data-id="${targetId}"]`);
+                        
+                        if (!targetNode) {
+                            console.warn(`Target node ${targetId} not found`);
+                            return;
+                        }
+                        
+                        // Update target node
+                        const targetType = targetNode.getAttribute('data-type');
+                        const targetConfig = targetNode.layerConfig || {};
+                        
+                        console.log(`Updating connection: ${sourceType}(${nodeId}) → ${targetType}(${targetId})`);
+                        
+                        // Check if target has manually set output shape
+                        const hasManualOutputShape = targetConfig.outputShape && 
+                            Array.isArray(targetConfig.outputShape) && 
+                            targetConfig.outputShape.length > 0 &&
+                            targetConfig.outputShape.some(dim => dim !== '?' && dim !== '');
+                            
+                        console.log(`Target node ${targetId} has manual output shape: ${hasManualOutputShape}`, 
+                            targetConfig.outputShape);
+                        
+                        // Set input shape of target based on output shape of source
+                        if (sourceConfig.outputShape) {
+                            // Make a deep copy to avoid reference issues
+                            targetConfig.inputShape = JSON.parse(JSON.stringify(sourceConfig.outputShape));
+                            console.log(`Set target node ${targetId} input shape to:`, targetConfig.inputShape);
+                            
+                            // Update the input shape display
+                            const inputShapeDisplay = targetNode.querySelector('.input-shape');
+                            if (inputShapeDisplay) {
+                                inputShapeDisplay.textContent = `[${sourceConfig.outputShape.join(' × ')}]`;
+                            }
+                            
+                            // Only update output shape if not manually set
+                            if (!hasManualOutputShape) {
+                                // Special handling for Conv2D
+                                if (targetType === 'conv') {
+                                    console.log(`Special handling for Conv2D target node ${targetId}`);
+                                    
+                                    // Force update the parameters
+                                    if (window.updateParametersAfterConnection) {
+                                        try {
+                                            window.updateParametersAfterConnection(nodeId, targetId);
+                                            console.log(`Updated Conv2D node ${targetId} parameters through connection handler`);
+                                        } catch (error) {
+                                            console.error(`Error updating Conv2D parameters:`, error);
+                                        }
+                                    } else {
+                                        console.warn('updateParametersAfterConnection not available');
+                                    }
+                                } else {
+                                    // Use standard update for other node types
+                                    if (window.updateParametersAfterConnection) {
+                                        window.updateParametersAfterConnection(nodeId, targetId);
+                                    } else {
+                                        // Otherwise, manually update the target node
+                                        updateNodeDisplay(targetNode, targetConfig);
+                                    }
+                                }
+                            } else {
+                                console.log(`Preserving manual output shape for node ${targetId}:`, targetConfig.outputShape);
+                                
+                                // Still update parameters even if output shape is manual
+                                if (window.neuralNetwork && window.neuralNetwork.calculateParameters) {
+                                    try {
+                                        const parameters = window.neuralNetwork.calculateParameters(targetConfig, targetType);
+                                        if (parameters !== undefined) {
+                                            targetConfig.parameters = parameters;
+                                            
+                                            // Update parameters display
+                                            const paramsDisplay = targetNode.querySelector('.node-parameters');
+                                            if (paramsDisplay) {
+                                                paramsDisplay.textContent = `Params: ${formatNumber(parameters)}`;
+                                            }
+                                        }
+                                    } catch (error) {
+                                        console.error(`Error calculating parameters with manual shape:`, error);
+                                    }
+                                }
+                            }
+                            
+                            // Store updated config back to the node
+                            targetNode.layerConfig = targetConfig;
+                            
+                            // Continue propagation down the network
+                            updateDownstreamNodes(targetId);
+                        } else {
+                            console.warn(`Source node ${nodeId} has no output shape, cannot update target ${targetId}`);
+                        }
+                    });
+                }
+                
+                // Update node's display without trigger events that would cause loops
+                function updateNodeDisplay(node, config) {
+                    if (!node) return;
+                    
+                    const nodeType = node.getAttribute('data-type');
+                    node.layerConfig = config;
+                    
+                    // Update input shape display
+                    const inputShapeDisplay = node.querySelector('.input-shape');
+                    if (inputShapeDisplay && config.inputShape) {
+                        inputShapeDisplay.textContent = `[${config.inputShape.join(' × ')}]`;
+                    }
+                    
+                    // Other updates would depend on neural network module
+                    // This is just a basic update without recalculating everything
+                }
+                
+                // Update all connections visually
+                updateConnections();
+                
+                // Notify that network has been updated
+                document.dispatchEvent(new CustomEvent('networkUpdated', {
+                    detail: networkLayers
+                }));
+                
+                console.log('Finished force updating network parameters');
+            }
+        };
+        
+        // Add global connection handlers for compatibility with existing code
+        window.startConnection = startConnectionHandler;
+        window.updateParametersAfterConnection = updateParametersAfterConnection;
+        
+        // Debugging help
+        console.log('Complete drag and drop fix initialized');
+        
+        // Add a button to manually fix Conv2D parameters
+        function addConv2DFixButton() {
+            // Check if button already exists
+            if (document.getElementById('fix-conv2d-button')) {
+                return;
+            }
+            
+            // Create the button
+            const fixButton = document.createElement('button');
+            fixButton.id = 'fix-conv2d-button';
+            fixButton.textContent = 'Fix Conv2D Params';
+            fixButton.title = 'Manually recalculate parameters for Conv2D nodes';
+            
+            // Style the button
+            Object.assign(fixButton.style, {
+                position: 'absolute',
+                right: '10px',
+                top: '10px',
+                zIndex: '9999',
+                padding: '5px 10px',
+                backgroundColor: '#4285f4',
+                color: 'white',
+                border: 'none',
+                borderRadius: '4px',
+                cursor: 'pointer',
+                fontSize: '12px',
+                fontWeight: 'bold',
+                boxShadow: '0 2px 5px rgba(0,0,0,0.2)'
+            });
+            
+            // Add hover effect
+            fixButton.onmouseover = function() {
+                this.style.backgroundColor = '#3367d6';
+            };
+            fixButton.onmouseout = function() {
+                this.style.backgroundColor = '#4285f4';
+            };
+            
+            // Add click handler
+            fixButton.addEventListener('click', function() {
+                console.log('Manually fixing Conv2D parameters...');
+                
+                // Check if our helper function exists
+                if (window.forceRecalculateConv2DParameters) {
+                    window.forceRecalculateConv2DParameters();
+                    fixButton.textContent = 'Conv2D Fixed!';
+                    setTimeout(() => {
+                        fixButton.textContent = 'Fix Conv2D Params';
+                    }, 2000);
+                } else {
+                    console.error('Conv2D helper function not found');
+                    alert('Conv2D helper function not found! Please refresh the page and try again.');
+                }
+            });
+            
+            // Add to body
+            document.body.appendChild(fixButton);
+            console.log('Added Conv2D fix button');
+        }
+    }
+})(); 

js/debug-utils.js

@@ -0,0 +1,14 @@
+// Debug utilities for Neural Network Playground
+(function() {
+    // Debug utilities are disabled to prevent notifications
+    
+    // Function to display debug information (not called by default)
+    function showDebugInfo() {
+        // Debug functionality is disabled
+    }
+    
+    // Create a temporary visual overlay showing node IDs (not called by default)
+    function createDebugOverlay() {
+        // Debug overlay is disabled
+    }
+})(); 

js/drag-drop-cleanup.js

@@ -0,0 +1,61 @@
+// Drag and drop cleanup script
+(function() {
+    // Silent cleanup script - no console logs
+    
+    // Monitor and clean up any accidental global drag variables
+    setInterval(function() {
+        // Check for accidental global draggedNode variable
+        if (window.draggedNode !== undefined) {
+            delete window.draggedNode;
+        }
+        
+        // Check if a drag operation was left hanging (older browsers/edge cases)
+        if (document.querySelectorAll('.temp-connection').length > 0 && 
+            !document.querySelector('.node-port.active-port')) {
+            document.querySelectorAll('.temp-connection').forEach(el => {
+                if (el.parentNode) {
+                    el.parentNode.removeChild(el);
+                }
+            });
+        }
+        
+        // Remove any port highlighting if no active connection is in progress
+        const activePorts = document.querySelectorAll('.active-port, .valid-target, .invalid-target, .port-hover');
+        if (activePorts.length > 0 && document.querySelectorAll('.temp-connection').length === 0) {
+            activePorts.forEach(port => {
+                port.classList.remove('active-port', 'valid-target', 'invalid-target', 'port-hover');
+            });
+        }
+        
+        // Clean up any stray dragging classes that might be stuck
+        if (!document.querySelector('.dragging')) {
+            document.body.classList.remove('node-dragging');
+        }
+    }, 5000); // Check every 5 seconds
+    
+    // Add listener to clean up on page events
+    ['mouseup', 'dragend'].forEach(eventName => {
+        document.addEventListener(eventName, function() {
+            // Delay cleanup to allow normal handlers to run first
+            setTimeout(function() {
+                if (window.draggedNode !== undefined) {
+                    delete window.draggedNode;
+                }
+            }, 100);
+        });
+    });
+    
+    // Perform initial cleanup when the script loads
+    document.addEventListener('DOMContentLoaded', function() {
+        // Remove any dragging classes that might be present from a previous session
+        document.querySelectorAll('.dragging').forEach(node => {
+            node.classList.remove('dragging');
+        });
+        document.body.classList.remove('node-dragging');
+        
+        // Reset any z-index values that might be stuck
+        document.querySelectorAll('.canvas-node').forEach(node => {
+            node.style.zIndex = '10';
+        });
+    });
+})(); 

js/drag-drop-debug.js

@@ -0,0 +1,90 @@
+// Drag and drop debugging script
+(function() {
+    console.log('Drag and Drop Debug Tool Loaded');
+    
+    document.addEventListener('DOMContentLoaded', function() {
+        console.log('DOM Content Loaded - Attaching Debug Handlers');
+        setTimeout(setupDebugHandlers, 1000); // Give time for other scripts to initialize
+    });
+    
+    function setupDebugHandlers() {
+        console.log('Setting up drag-drop debug handlers');
+        
+        // Debug canvas events
+        const canvas = document.getElementById('network-canvas');
+        if (!canvas) {
+            console.error('ERROR: Canvas element not found!');
+            return;
+        }
+        
+        // Debug existing nodes
+        const existingNodes = document.querySelectorAll('.canvas-node');
+        console.log(`Found ${existingNodes.length} existing nodes on the canvas`);
+        
+        existingNodes.forEach((node, index) => {
+            const nodeId = node.getAttribute('data-id') || `unknown-${index}`;
+            const nodeType = node.getAttribute('data-type') || 'unknown';
+            console.log(`Node #${index}: ${nodeType} (${nodeId})`);
+            
+            // Add debug mousedown listener
+            node.addEventListener('mousedown', function(e) {
+                console.log(`[DEBUG] Mousedown on node: ${nodeId}`);
+                console.log(`Target element: ${e.target.className}`);
+                console.log(`Target has controls? ${!!e.target.closest('.node-controls')}`);
+                console.log(`Target has port? ${!!e.target.closest('.node-port')}`);
+            });
+        });
+        
+        // Monitor mouse events over the canvas
+        canvas.addEventListener('mousemove', function(e) {
+            // Only log occasionally to avoid flooding console
+            if (Math.random() < 0.01) { // Log approximately 1% of moves
+                const rect = canvas.getBoundingClientRect();
+                const x = e.clientX - rect.left;
+                const y = e.clientY - rect.top;
+                console.log(`[DEBUG] Mouse at (${Math.round(x)}, ${Math.round(y)})`);
+                
+                // Check for drag states
+                const dragInProgress = document.querySelector('.canvas-node.dragging');
+                if (dragInProgress) {
+                    console.log(`[DEBUG] Dragging node: ${dragInProgress.getAttribute('data-id')}`);
+                }
+            }
+        });
+        
+        // Monitor startDrag and dragNode functions if they exist
+        if (window.startDrag) {
+            const originalStartDrag = window.startDrag;
+            window.startDrag = function(e) {
+                console.log('[DEBUG] startDrag called', e.target);
+                return originalStartDrag.apply(this, arguments);
+            };
+        }
+        
+        if (window.dragNode) {
+            const originalDragNode = window.dragNode;
+            window.dragNode = function(e) {
+                // Log only occasionally
+                if (Math.random() < 0.05) {
+                    console.log('[DEBUG] dragNode called');
+                }
+                return originalDragNode.apply(this, arguments);
+            };
+        }
+        
+        // Check for global variables that might be interfering
+        setInterval(function() {
+            console.log('Checking global drag variables:');
+            console.log('window.draggedNode:', window.draggedNode !== undefined);
+            console.log('window.isDragging:', window.isDragging !== undefined);
+            
+            // Count nodes with dragging class
+            const draggingNodes = document.querySelectorAll('.canvas-node.dragging');
+            if (draggingNodes.length > 0) {
+                console.log(`[WARNING] Found ${draggingNodes.length} nodes with dragging class, but no active drag`);
+            }
+        }, 5000);
+        
+        console.log('Debug handlers setup complete');
+    }
+})(); 

js/drag-drop.js

@@ -10,6 +10,15 @@ function initializeDragAndDrop() {
     let connectionLine = null;
     let nodeCounter = {};
     
+    // Anti-duplication system
+    const recentlyCreated = {
+        nodeIds: new Set(),
+        dragStartTime: 0,
+        isDropHandled: false,
+        inProgress: false,
+        timestamp: 0
+    };
+    
     // Track layers for proper architecture building
     let networkLayers = {
         layers: [],
@@ -27,250 +36,436 @@ function initializeDragAndDrop() {
         return num.toString();
     }
     
-    // Add event listeners to draggable items
+    // Add event listeners to draggable items with extra safety
     nodeItems.forEach(item => {
-        item.addEventListener('dragstart', handleDragStart);
+        // Clean dragstart handler with precise lifecycle
+        item.addEventListener('dragstart', function(e) {
+            // Clean up previous state
+            recentlyCreated.isDropHandled = false;
+            recentlyCreated.inProgress = true;
+            recentlyCreated.dragStartTime = Date.now();
+            
+            const nodeType = this.getAttribute('data-type');
+            
+            // Persist data in multiple ways to ensure transfer
+            e.dataTransfer.setData('text/plain', nodeType);
+            e.dataTransfer.setData('application/x-neural-node-type', nodeType);
+            
+            // Extra backup properties
+            try {
+                e.dataTransfer.nodeType = nodeType;
+                e.dataTransfer._neural_type = nodeType;
+            } catch (err) {
+                // Some browsers restrict properties on dataTransfer
+            }
+            
+            draggedNode = this;
+            
+            // Set ghost image
+            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);
+            
+            // Event cleanup handler
+            const dragEndHandler = function() {
+                setTimeout(() => {
+                    recentlyCreated.inProgress = false;
+                    draggedNode = null;
+                }, 100);
+                // Remove this one-time handler
+                item.removeEventListener('dragend', dragEndHandler);
+            };
+            
+            // Add one-time dragend handler
+            item.addEventListener('dragend', dragEndHandler);
+        });
     });
     
-    // 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
+    // Safe dragover handler
     function handleDragOver(e) {
         e.preventDefault();
         e.dataTransfer.dropEffect = 'copy';
     }
     
-    // Handle drop event to create new nodes on the canvas
-    function handleDrop(e) {
+    // Canvas events
+    canvas.addEventListener('dragover', handleDragOver);
+    
+    // One-time drop handler for each operation
+    canvas.addEventListener('drop', function dropHandler(e) {
         e.preventDefault();
         
-        // Hide the canvas hint when nodes are added
+        // Multi-layer protection against duplicate drops
+        if (recentlyCreated.isDropHandled) {
+            return; // Already handled this drop
+        }
+        
+        const now = Date.now();
+        
+        // Debounce protection
+        if (now - recentlyCreated.timestamp < 500) {
+            return;
+        }
+        
+        // Set state to prevent multiple processing
+        recentlyCreated.isDropHandled = true;
+        recentlyCreated.timestamp = now;
+        
+        // Safety check for drag operation
+        if (!recentlyCreated.inProgress || !draggedNode || !draggedNode.classList.contains('node-item')) {
+            return;
+        }
+        
+        // Try multiple ways to get the node type
+        let nodeType = null;
+        try {
+            // Try standard method first
+            nodeType = e.dataTransfer.getData('text/plain');
+            
+            // Try backup methods if needed
+            if (!nodeType) {
+                nodeType = e.dataTransfer.getData('application/x-neural-node-type');
+            }
+            if (!nodeType && e.dataTransfer.nodeType) {
+                nodeType = e.dataTransfer.nodeType;
+            }
+            if (!nodeType && e.dataTransfer._neural_type) {
+                nodeType = e.dataTransfer._neural_type;
+            }
+            if (!nodeType && draggedNode) {
+                nodeType = draggedNode.getAttribute('data-type');
+            }
+        } catch (err) {
+            // Error handling for dataTransfer access
+        }
+        
+        if (!nodeType) {
+            return;
+        }
+        
+        // Calculate position relative to canvas
+        const canvasRect = canvas.getBoundingClientRect();
+        const x = e.clientX - canvasRect.left - 75;
+        const y = e.clientY - canvasRect.top - 30;
+        
+        // Ensure position is within canvas bounds
+        const posX = Math.max(0, Math.min(canvasRect.width - 150, x));
+        const posY = Math.max(0, Math.min(canvasRect.height - 100, y));
+        
+        // Generate a unique ID for the node that includes a timestamp to avoid collision
+        const layerId = `${nodeType}-${Date.now()}-${Math.floor(Math.random() * 10000)}`;
+        
+        // Skip if this node ID was recently created (extremely unlikely due to timestamp)
+        if (recentlyCreated.nodeIds.has(layerId)) {
+            return;
+        }
+        recentlyCreated.nodeIds.add(layerId);
+        
+        // Limit the size of the recently created set
+        if (recentlyCreated.nodeIds.size > 10) {
+            const iterator = recentlyCreated.nodeIds.values();
+            recentlyCreated.nodeIds.delete(iterator.next().value);
+        }
+        
+        // Increment counter for this node type
+        nodeCounter[nodeType] = (nodeCounter[nodeType] || 0) + 1;
+        
+        // Generate a unique ID for the node
+        const layerId = `${nodeType}-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
+        
+        // Create the node element
+        const canvasNode = document.createElement('div');
+        canvasNode.className = `canvas-node ${nodeType}-node`;
+        canvasNode.setAttribute('data-type', nodeType);
+        canvasNode.setAttribute('data-id', layerId);
+        canvasNode.style.position = 'absolute';
+        canvasNode.style.left = `${posX}px`;
+        canvasNode.style.top = `${posY}px`;
+        
+        // Get default config for this node type
+        const nodeConfig = window.neuralNetwork.createNodeConfig(nodeType);
+        
+        // Create node content with input and output shape information
+        let nodeName, inputShape, outputShape, parameters;
+        
+        switch(nodeType) {
+            case 'input':
+                nodeName = 'Input Layer';
+                inputShape = 'N/A';
+                outputShape = '[' + nodeConfig.shape.join(' × ') + ']';
+                parameters = nodeConfig.parameters;
+                break;
+            case 'hidden':
+                const hiddenCount = document.querySelectorAll('.canvas-node[data-type="hidden"]').length;
+                nodeConfig.units = hiddenCount === 0 ? 128 : 64;
+                nodeName = `Hidden Layer ${hiddenCount + 1}`;
+                // Input shape will be updated when connections are made
+                inputShape = 'Connect input';
+                outputShape = `[${nodeConfig.units}]`;
+                parameters = 'Connect input to calculate';
+                break;
+            case 'output':
+                nodeName = 'Output Layer';
+                inputShape = 'Connect input';
+                outputShape = `[${nodeConfig.units}]`;
+                parameters = 'Connect input to calculate';
+                break;
+            case 'conv':
+                const convCount = document.querySelectorAll('.canvas-node[data-type="conv"]').length;
+                nodeConfig.filters = 32 * (convCount + 1);
+                nodeName = `Conv2D ${convCount + 1}`;
+                inputShape = 'Connect input';
+                outputShape = 'Depends on input';
+                // Create parameter string
+                parameters = `Kernel: ${nodeConfig.kernelSize.join('×')}\nStride: ${nodeConfig.strides.join('×')}\nPadding: ${nodeConfig.padding}`;
+                break;
+            case 'pool':
+                const poolCount = document.querySelectorAll('.canvas-node[data-type="pool"]').length;
+                nodeName = `Pooling ${poolCount + 1}`;
+                inputShape = 'Connect input';
+                outputShape = 'Depends on input';
+                parameters = `Pool size: ${nodeConfig.poolSize.join('×')}\nStride: ${nodeConfig.strides.join('×')}\nPadding: ${nodeConfig.padding}`;
+                break;
+            default:
+                nodeName = 'Unknown Layer';
+                inputShape = 'N/A';
+                outputShape = 'N/A';
+                parameters = 'N/A';
+        }
+        
+        // Create node content
+        const nodeContent = document.createElement('div');
+        nodeContent.className = 'node-content';
+        
+        // Add shape information in a structured way
+        const shapeInfo = document.createElement('div');
+        shapeInfo.className = 'shape-info';
+        shapeInfo.innerHTML = `
+            <div class="shape-row"><span class="shape-label">Input:</span> <span class="input-shape">${inputShape}</span></div>
+            <div class="shape-row"><span class="shape-label">Output:</span> <span class="output-shape">${outputShape}</span></div>
+        `;
+        
+        // Add parameters section
+        const paramsSection = document.createElement('div');
+        paramsSection.className = 'params-section';
+        paramsSection.innerHTML = `
+            <div class="params-details">${parameters}</div>
+            <div class="node-parameters">Params: ${nodeConfig.parameters !== undefined ? formatNumber(nodeConfig.parameters) : '?'}</div>
+        `;
+        
+        // Assemble content
+        nodeContent.appendChild(shapeInfo);
+        nodeContent.appendChild(paramsSection);
+        
+        // Add dimensions section to show shapes compactly
+        const dimensionsSection = document.createElement('div');
+        dimensionsSection.className = 'node-dimensions';
+        
+        // Set dimensions text based on node type
+        let dimensionsText = '';
+        switch(nodeType) {
+            case 'input':
+                dimensionsText = nodeConfig.shape.join(' × ');
+                break;
+            case 'hidden':
+            case 'output':
+                dimensionsText = nodeConfig.units.toString();
+                break;
+            case 'conv':
+                if (nodeConfig.inputShape && nodeConfig.outputShape) {
+                    dimensionsText = `${nodeConfig.inputShape.join('×')} → ${nodeConfig.outputShape.join('×')}`;
+                } else {
+                    dimensionsText = `? → ${nodeConfig.filters} filters`;
+                }
+                break;
+            case 'pool':
+                if (nodeConfig.inputShape && nodeConfig.outputShape) {
+                    dimensionsText = `${nodeConfig.inputShape.join('×')} → ${nodeConfig.outputShape.join('×')}`;
+                } else {
+                    dimensionsText = `? → ?`;
+                }
+                break;
+            case 'linear':
+                dimensionsText = `${nodeConfig.inputFeatures} → ${nodeConfig.outputFeatures}`;
+                break;
+        }
+        dimensionsSection.textContent = dimensionsText;
+        
+        // Add node title for clearer identification
+        const nodeTitle = document.createElement('div');
+        nodeTitle.className = 'node-title';
+        nodeTitle.textContent = nodeName;
+
+        // Add node controls (edit and delete buttons)
+        const nodeControls = document.createElement('div');
+        nodeControls.className = 'node-controls';
+        
+        const editButton = document.createElement('button');
+        editButton.className = 'node-edit-btn';
+        editButton.innerHTML = '✎';
+        editButton.title = 'Edit Layer';
+        
+        const deleteButton = document.createElement('button');
+        deleteButton.className = 'node-delete-btn';
+        deleteButton.innerHTML = '×';
+        deleteButton.title = 'Delete Layer';
+        
+        nodeControls.appendChild(editButton);
+        nodeControls.appendChild(deleteButton);
+        
+        // Add connection ports
+        const portIn = document.createElement('div');
+        portIn.className = 'node-port port-in';
+        
+        const portOut = document.createElement('div');
+        portOut.className = 'node-port port-out';
+        
+        // Assemble the node with the new structure
+        canvasNode.appendChild(nodeTitle);
+        canvasNode.appendChild(nodeControls);
+        canvasNode.appendChild(dimensionsSection);
+        canvasNode.appendChild(nodeContent);
+        canvasNode.appendChild(portIn);
+        canvasNode.appendChild(portOut);
+        
+        // Store node data attributes for easier access
+        canvasNode.setAttribute('data-name', nodeName);
+        canvasNode.setAttribute('data-dimensions', dimensionsText);
+        
+        // Add node to the canvas
+        canvas.appendChild(canvasNode);
+        
+        // Store node configuration
+        canvasNode.layerConfig = nodeConfig;
+        
+        // Add event listeners for node manipulation
+        canvasNode.addEventListener('mousedown', startDrag);
+        
+        // Update port event listeners for the new class names
+        portIn.addEventListener('mousedown', (e) => {
+            e.stopPropagation();
+        });
+        
+        portOut.addEventListener('mousedown', (e) => {
+            e.stopPropagation();
+            startConnection(canvasNode, e);
+        });
+        
+        // Double-click to edit node properties
+        canvasNode.addEventListener('dblclick', () => {
+            openLayerEditor(canvasNode);
+        });
+        
+        // Right-click to delete
+        canvasNode.addEventListener('contextmenu', (e) => {
+            e.preventDefault();
+            deleteNode(canvasNode);
+        });
+        
+        // Add click event for edit button
+        editButton.addEventListener('click', (e) => {
+            e.stopPropagation();
+            openLayerEditor(canvasNode);
+        });
+        
+        // Add click event for delete button
+        deleteButton.addEventListener('click', (e) => {
+            e.stopPropagation();
+            deleteNode(canvasNode);
+        });
+        
+        // Add to network layers for architecture building
+        networkLayers.layers.push({
+            id: layerId,
+            type: nodeType,
+            name: nodeName,
+            position: { x: posX, y: posY },
+            dimensions: dimensionsText,
+            config: nodeConfig,
+            parameters: nodeConfig.parameters || 0
+        });
+        
+        // Notify about network changes
+        document.dispatchEvent(new CustomEvent('networkUpdated', {
+            detail: networkLayers
+        }));
+        
+        updateConnections();
+        
+        // Hide the canvas hint after adding a node
         const canvasHint = document.querySelector('.canvas-hint');
         if (canvasHint) {
             canvasHint.style.display = 'none';
         }
         
-        const nodeType = e.dataTransfer.getData('text/plain');
+        // Reset states and references
+        draggedNode = null;
+        recentlyCreated.inProgress = false;
         
-        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`;
-            
-            // Get default config for this node type
-            const nodeConfig = window.neuralNetwork.createNodeConfig(nodeType);
-            
-            // Create node content with input and output shape information
-            let nodeName, inputShape, outputShape, parameters;
-            
-            switch(nodeType) {
-                case 'input':
-                    nodeName = 'Input Layer';
-                    inputShape = 'N/A';
-                    outputShape = '[' + nodeConfig.shape.join(' × ') + ']';
-                    parameters = nodeConfig.parameters;
-                    break;
-                case 'hidden':
-                    const hiddenCount = document.querySelectorAll('.canvas-node[data-type="hidden"]').length;
-                    nodeConfig.units = hiddenCount === 0 ? 128 : 64;
-                    nodeName = `Hidden Layer ${hiddenCount + 1}`;
-                    // Input shape will be updated when connections are made
-                    inputShape = 'Connect input';
-                    outputShape = `[${nodeConfig.units}]`;
-                    parameters = 'Connect input to calculate';
-                    break;
-                case 'output':
-                    nodeName = 'Output Layer';
-                    inputShape = 'Connect input';
-                    outputShape = `[${nodeConfig.units}]`;
-                    parameters = 'Connect input to calculate';
-                    break;
-                case 'conv':
-                    const convCount = document.querySelectorAll('.canvas-node[data-type="conv"]').length;
-                    nodeConfig.filters = 32 * (convCount + 1);
-                    nodeName = `Conv2D ${convCount + 1}`;
-                    inputShape = 'Connect input';
-                    outputShape = 'Depends on input';
-                    // Create parameter string
-                    parameters = `Kernel: ${nodeConfig.kernelSize.join('×')}\nStride: ${nodeConfig.strides.join('×')}\nPadding: ${nodeConfig.padding}`;
-                    break;
-                case 'pool':
-                    const poolCount = document.querySelectorAll('.canvas-node[data-type="pool"]').length;
-                    nodeName = `Pooling ${poolCount + 1}`;
-                    inputShape = 'Connect input';
-                    outputShape = 'Depends on input';
-                    parameters = `Pool size: ${nodeConfig.poolSize.join('×')}\nStride: ${nodeConfig.strides.join('×')}\nPadding: ${nodeConfig.padding}`;
-                    break;
-                default:
-                    nodeName = 'Unknown Layer';
-                    inputShape = 'N/A';
-                    outputShape = 'N/A';
-                    parameters = 'N/A';
+        // Force cleanup any stray global variables after a short delay
+        setTimeout(() => {
+            if (window.draggedNode) {
+                delete window.draggedNode;
             }
-            
-            // Create node content
-            const nodeContent = document.createElement('div');
-            nodeContent.className = 'node-content';
-            
-            // Add shape information in a structured way
-            const shapeInfo = document.createElement('div');
-            shapeInfo.className = 'shape-info';
-            shapeInfo.innerHTML = `
-                <div class="shape-row"><span class="shape-label">Input:</span> <span class="input-shape">${inputShape}</span></div>
-                <div class="shape-row"><span class="shape-label">Output:</span> <span class="output-shape">${outputShape}</span></div>
-            `;
-            
-            // Add parameters section
-            const paramsSection = document.createElement('div');
-            paramsSection.className = 'params-section';
-            paramsSection.innerHTML = `
-                <div class="params-details">${parameters}</div>
-                <div class="node-parameters">Params: ${nodeConfig.parameters !== undefined ? formatNumber(nodeConfig.parameters) : '?'}</div>
-            `;
-            
-            // Assemble content
-            nodeContent.appendChild(shapeInfo);
-            nodeContent.appendChild(paramsSection);
-            
-            // Add dimensions section to show shapes compactly
-            const dimensionsSection = document.createElement('div');
-            dimensionsSection.className = 'node-dimensions';
-            
-            // Set dimensions text based on node type
-            let dimensionsText = '';
-            switch(nodeType) {
-                case 'input':
-                    dimensionsText = nodeConfig.shape.join(' × ');
-                    break;
-                case 'hidden':
-                case 'output':
-                    dimensionsText = nodeConfig.units.toString();
-                    break;
-                case 'conv':
-                    if (nodeConfig.inputShape && nodeConfig.outputShape) {
-                        dimensionsText = `${nodeConfig.inputShape.join('×')} → ${nodeConfig.outputShape.join('×')}`;
-                    } else {
-                        dimensionsText = `? → ${nodeConfig.filters} filters`;
-                    }
-                    break;
-                case 'pool':
-                    if (nodeConfig.inputShape && nodeConfig.outputShape) {
-                        dimensionsText = `${nodeConfig.inputShape.join('×')} → ${nodeConfig.outputShape.join('×')}`;
-                    } else {
-                        dimensionsText = `? → ?`;
-                    }
-                    break;
-                case 'linear':
-                    dimensionsText = `${nodeConfig.inputFeatures} → ${nodeConfig.outputFeatures}`;
-                    break;
+            recentlyCreated.isDropHandled = false;
+        }, 100);
+    }
+    
+    // Delete a node and its associated connections
+    function deleteNode(node) {
+        if (!node) return;
+        
+        const nodeId = node.getAttribute('data-id');
+        
+        // Remove all connections to/from this node
+        const connections = document.querySelectorAll(`.connection[data-source="${nodeId}"], .connection[data-target="${nodeId}"]`);
+        
+        connections.forEach(connection => {
+            if (connection.parentNode) {
+                connection.parentNode.removeChild(connection);
+            }
+        });
+        
+        // Remove from networkLayers.connections
+        networkLayers.connections = networkLayers.connections.filter(conn => 
+            conn.source !== nodeId && conn.target !== nodeId
+        );
+        
+        // Remove from networkLayers.layers
+        const layerIndex = networkLayers.layers.findIndex(layer => layer.id === nodeId);
+        if (layerIndex !== -1) {
+            networkLayers.layers.splice(layerIndex, 1);
+        }
+        
+        // Remove the node from the DOM
+        if (node.parentNode) {
+            node.parentNode.removeChild(node);
+        }
+        
+        // Show the canvas hint if no nodes left
+        if (document.querySelectorAll('.canvas-node').length === 0) {
+            const canvasHint = document.querySelector('.canvas-hint');
+            if (canvasHint) {
+                canvasHint.style.display = 'block';
             }
-            dimensionsSection.textContent = dimensionsText;
-            
-            // Add node title for clearer identification
-            const nodeTitle = document.createElement('div');
-            nodeTitle.className = 'node-title';
-            nodeTitle.textContent = nodeName;
-            
-            // Add connection ports
-            const portIn = document.createElement('div');
-            portIn.className = 'node-port port-in';
-            
-            const portOut = document.createElement('div');
-            portOut.className = 'node-port port-out';
-            
-            // Assemble the node with the new structure
-            canvasNode.appendChild(nodeTitle);
-            canvasNode.appendChild(dimensionsSection);
-            canvasNode.appendChild(nodeContent);
-            canvasNode.appendChild(portIn);
-            canvasNode.appendChild(portOut);
-            
-            // Store node data attributes for easier access
-            canvasNode.setAttribute('data-name', nodeName);
-            canvasNode.setAttribute('data-dimensions', dimensionsText);
-            
-            // Add node to the canvas
-            canvas.appendChild(canvasNode);
-            
-            // Store node configuration
-            canvasNode.layerConfig = nodeConfig;
-            
-            // Add event listeners for node manipulation
-            canvasNode.addEventListener('mousedown', startDrag);
-            
-            // Update port event listeners for the new class names
-            portIn.addEventListener('mousedown', (e) => {
-                e.stopPropagation();
-            });
-            
-            portOut.addEventListener('mousedown', (e) => {
-                e.stopPropagation();
-                startConnection(canvasNode, e);
-            });
-            
-            // Double-click to edit node properties
-            canvasNode.addEventListener('dblclick', () => {
-                openLayerEditor(canvasNode);
-            });
-            
-            // Right-click to delete
-            canvasNode.addEventListener('contextmenu', (e) => {
-                e.preventDefault();
-                deleteNode(canvasNode);
-            });
-            
-            // Add to network layers for architecture building
-            networkLayers.layers.push({
-                id: layerId,
-                type: nodeType,
-                name: nodeName,
-                position: { x, y },
-                dimensions: dimensionsText,
-                config: nodeConfig,
-                parameters: nodeConfig.parameters || 0
-            });
-            
-            // Notify about network changes
-            document.dispatchEvent(new CustomEvent('networkUpdated', {
-                detail: networkLayers
-            }));
-            
-            updateConnections();
         }
+        
+        // Update connections to remove orphaned ones
+        updateConnections();
+        
+        // Notify about network changes
+        document.dispatchEvent(new CustomEvent('networkUpdated', {
+            detail: networkLayers
+        }));
     }
     
     // Start dragging an existing node on the canvas
     function startDrag(e) {
+        console.log('[DEBUG] startDrag called', e.target);
+        
         if (isConnecting) return;
         
         // Only start drag if not clicking on buttons or ports
@@ -279,13 +474,20 @@ function initializeDragAndDrop() {
         }
         
         isDragging = true;
+        // Make sure we get the canvas-node, even if we clicked on a child element
         const target = e.target.closest('.canvas-node');
+        if (!target) {
+            console.error('[ERROR] No canvas-node found in startDrag');
+            return;
+        }
+        
         const rect = target.getBoundingClientRect();
         
         // Calculate offset
         offsetX = e.clientX - rect.left;
         offsetY = e.clientY - rect.top;
         
+        // Add event listeners to document, not the element
         document.addEventListener('mousemove', dragNode);
         document.addEventListener('mouseup', stopDrag);
         
@@ -298,13 +500,21 @@ function initializeDragAndDrop() {
         // Add dragging class for visual feedback
         draggedNode.classList.add('dragging');
         
+        // Add dragging class to body for consistent cursor
+        document.body.classList.add('node-dragging');
+        
         // Prevent default behavior
         e.preventDefault();
+        
+        console.log(`[DEBUG] Started dragging node: ${target.getAttribute('data-id')}`);
     }
     
     // Drag node on the canvas
     function dragNode(e) {
-        if (!isDragging) return;
+        if (!isDragging || !draggedNode) {
+            console.log('[WARN] dragNode called but not in dragging state');
+            return;
+        }
         
         const canvasRect = canvas.getBoundingClientRect();
         let x = e.clientX - canvasRect.left - offsetX;
@@ -331,25 +541,39 @@ function initializeDragAndDrop() {
             networkLayers.layers[layerIndex].position = { x, y };
         }
         
-        // Update connected lines if any
+        // Force update all connections immediately to make them responsive
         updateConnections();
     }
     
     // Stop dragging
-    function stopDrag() {
-        if (!isDragging) return;
+    function stopDrag(e) {
+        if (!isDragging) {
+            return;
+        }
         
-        isDragging = false;
+        console.log('[DEBUG] stopDrag called');
+        
+        // Always clean up event listeners
         document.removeEventListener('mousemove', dragNode);
         document.removeEventListener('mouseup', stopDrag);
         
-        // Reset z-index and remove dragging class
+        isDragging = false;
+        
+        // Remove dragging class from body
+        document.body.classList.remove('node-dragging');
+        
+        // Reset z-index and remove dragging class if node exists
         if (draggedNode) {
             draggedNode.style.zIndex = "10";
             draggedNode.classList.remove('dragging');
             
             // Trigger connections update one more time
             updateConnections();
+            
+            // Clear the reference
+            const nodeId = draggedNode.getAttribute('data-id');
+            console.log(`[DEBUG] Stopped dragging node: ${nodeId}`);
+            draggedNode = null;
         }
     }
     
@@ -363,7 +587,7 @@ function initializeDragAndDrop() {
         connectionLine.className = 'connection temp-connection';
         
         // Get start position (center of the port)
-        const portOut = node.querySelector('.port-out');
+        const portOut = node.querySelector('.node-port.port-out');
         const portRect = portOut.getBoundingClientRect();
         const canvasRect = canvas.getBoundingClientRect();
         
@@ -402,11 +626,13 @@ function initializeDragAndDrop() {
                 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');
+                const portIn = node.querySelector('.node-port.port-in');
+                if (portIn) {
+                    if (isValidTarget) {
+                        portIn.classList.add('valid-target');
+                    } else {
+                        portIn.classList.add('invalid-target');
+                    }
                 }
             }
         });
@@ -414,7 +640,7 @@ function initializeDragAndDrop() {
     
     // Remove highlights from all ports
     function removePortHighlights() {
-        document.querySelectorAll('.port-in, .port-out').forEach(port => {
+        document.querySelectorAll('.node-port.port-in, .node-port.port-out').forEach(port => {
             port.classList.remove('active-port', 'valid-target', 'invalid-target');
         });
     }
@@ -454,7 +680,7 @@ function initializeDragAndDrop() {
         if (!isConnecting || !connectionLine) return;
         
         const canvasRect = canvas.getBoundingClientRect();
-        const portOut = startNode.querySelector('.port-out');
+        const portOut = startNode.querySelector('.node-port.port-out');
         const portRect = portOut.getBoundingClientRect();
         
         // Calculate start and end points
@@ -474,16 +700,17 @@ function initializeDragAndDrop() {
         // 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');
+                const portIn = node.querySelector('.node-port.port-in');
+                if (portIn) {
+                    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');
+                    }
                 }
             }
         });
@@ -497,20 +724,22 @@ function initializeDragAndDrop() {
         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');
+                const portIn = node.querySelector('.node-port.port-in');
+                if (portIn) {
+                    const portRect = portIn.getBoundingClientRect();
                     
-                    if (isValidConnection(sourceType, targetType, sourceId, targetId)) {
-                        targetNode = node;
+                    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;
+                        }
                     }
                 }
             }
@@ -528,7 +757,7 @@ function initializeDragAndDrop() {
         
         // Remove all port highlights
         removePortHighlights();
-        document.querySelectorAll('.port-hover').forEach(port => {
+        document.querySelectorAll('.node-port').forEach(port => {
             port.classList.remove('port-hover');
         });
         
@@ -553,26 +782,499 @@ function initializeDragAndDrop() {
         
         // Check if this is a valid connection
         if (isValidConnection(sourceType, targetType, sourceId, targetId)) {
-            // Create a permanent SVG connection
-            const canvas = document.getElementById('network-canvas');
-            const svgContainer = document.querySelector('#network-canvas .svg-container') || createSVGContainer();
+            // Remove the temporary line
+            if (connectionLine && connectionLine.parentNode) {
+                connectionLine.parentNode.removeChild(connectionLine);
+            }
             
-            // Get positions for source and target nodes
-            const sourceRect = startNode.getBoundingClientRect();
-            const targetRect = targetNode.getBoundingClientRect();
-            const canvasRect = canvas.getBoundingClientRect();
+            // Create a permanent connection line
+            const connection = document.createElement('div');
+            connection.className = 'connection';
+            connection.setAttribute('data-source', sourceId);
+            connection.setAttribute('data-target', targetId);
             
-            // Calculate port positions
-            const sourcePort = startNode.querySelector('.output-port');
-            const targetPort = targetNode.querySelector('.input-port');
+            // Add to canvas
+            canvas.appendChild(connection);
+            
+            // Position the connection
+            const sourcePort = startNode.querySelector('.node-port.port-out');
+            const targetPort = targetNode.querySelector('.node-port.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)`;
+            }
+            
+            // Update network layers
+            const sourceLayerIndex = networkLayers.layers.findIndex(layer => layer.id === sourceId);
+            const targetLayerIndex = networkLayers.layers.findIndex(layer => layer.id === targetId);
+            
+            if (sourceLayerIndex !== -1 && targetLayerIndex !== -1) {
+                networkLayers.connections.push({
+                    source: sourceId,
+                    target: targetId
+                });
+                
+                // Initialize connections array if it doesn't exist
+                if (!networkLayers.layers[sourceLayerIndex].connections) {
+                    networkLayers.layers[sourceLayerIndex].connections = [];
+                }
+                if (!networkLayers.layers[targetLayerIndex].connections) {
+                    networkLayers.layers[targetLayerIndex].connections = [];
+                }
+                
+                // Add connection to layers
+                networkLayers.layers[sourceLayerIndex].connections.push(targetId);
+                networkLayers.layers[targetLayerIndex].connections.push(sourceId);
+                
+                // Update target node using the source node's configuration
+                const sourceConfig = networkLayers.layers[sourceLayerIndex].config;
+                
+                if (sourceConfig && sourceConfig.outputShape) {
+                    // Update target node with source's output shape
+                    if (!targetNode.layerConfig) {
+                        targetNode.layerConfig = {};
+                    }
+                    
+                    // Set input shape of target to output shape of source
+                    targetNode.layerConfig.inputShape = [...sourceConfig.outputShape];
+                    
+                    // Update parameters using our helper function
+                    updateNodeParameters(targetNode, targetType, sourceConfig);
+                    
+                    // Recursively update downstream nodes
+                    updateDownstreamNodes(targetId);
+                    
+                    // Force update all parameters in the network for complete synchronization
+                    forceUpdateNetworkParameters();
+                }
+            }
+            
+            // Notify about network changes
+            document.dispatchEvent(new CustomEvent('networkUpdated', {
+                detail: networkLayers
+            }));
+        }
+        
+        // Reset variables
+        isConnecting = false;
+        startNode = null;
+        connectionLine = null;
+        
+        // Remove event listeners
+        document.removeEventListener('mousemove', drawConnection);
+        document.removeEventListener('mouseup', cancelConnection);
+    }
+    
+    // Update connections when nodes are moved
+    function updateConnections(specificNodeId = null) {
+        console.log(`[DEBUG] updateConnections called ${specificNodeId ? 'for node: ' + specificNodeId : 'for all connections'}`);
+        
+        // Get all connections or just those related to the specified node
+        let connections;
+        if (specificNodeId) {
+            connections = document.querySelectorAll(`.connection[data-source="${specificNodeId}"], .connection[data-target="${specificNodeId}"]`);
+        } else {
+            connections = document.querySelectorAll('.connection:not(.temp-connection)');
+        }
+        
+        console.log(`[DEBUG] Updating ${connections.length} connections`);
+        
+        connections.forEach(connection => {
+            const sourceId = connection.getAttribute('data-source');
+            const targetId = connection.getAttribute('data-target');
             
-            const sourcePortRect = sourcePort.getBoundingClientRect();
-            const targetPortRect = targetPort.getBoundingClientRect();
+            const sourceNode = document.querySelector(`.canvas-node[data-id="${sourceId}"]`);
+            const targetNode = document.querySelector(`.canvas-node[data-id="${targetId}"]`);
             
-            const startX = sourcePortRect.left + (sourcePortRect.width / 2) - canvasRect.left;
-            const startY = sourcePortRect.top + (sourcePortRect.height / 2) - canvasRect.top;
-            const endX = targetPortRect.left + (targetPortRect.width / 2) - canvasRect.left;
-            const endY = targetPortRect.top + (targetPortRect.height / 2) - canvasRect.top;
+            if (sourceNode && targetNode) {
+                const sourcePort = sourceNode.querySelector('.node-port.port-out');
+                const targetPort = targetNode.querySelector('.node-port.port-in');
+                
+                if (sourcePort && targetPort) {
+                    const canvasRect = canvas.getBoundingClientRect();
+                    const sourceRect = sourcePort.getBoundingClientRect();
+                    const targetRect = targetPort.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) {
+                    console.log(`[DEBUG] Removing orphaned connection between ${sourceId} and ${targetId}`);
+                    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);
+                    }
+                }
+            }
+        });
+    }
+    
+    // Helper function to update a node's parameters and display
+    function updateNodeParameters(node, nodeType, sourceConfig) {
+        if (!node || !nodeType || !sourceConfig) return;
+        
+        const nodeId = node.getAttribute('data-id');
+        
+        // Ensure node's layerConfig exists
+        if (!node.layerConfig) {
+            node.layerConfig = {};
+        }
+        
+        // Ensure input shape is set in the layer config
+        if (sourceConfig.outputShape) {
+            node.layerConfig.inputShape = [...sourceConfig.outputShape];
             
-            // Create the connection
-            const pathId = `connection-${sourceId}-${targetId}`
+            // For specific layer types, calculate output shape based on input shape
+            switch(nodeType) {
+                case 'hidden':
+                    node.layerConfig.outputShape = [node.layerConfig.units];
+                    break;
+                case 'output':
+                    node.layerConfig.outputShape = [node.layerConfig.units];
+                    break;
+                case 'conv':
+                    // Call neural network module to calculate output shape
+                    if (window.neuralNetwork && window.neuralNetwork.calculateOutputShape) {
+                        node.layerConfig.outputShape = window.neuralNetwork.calculateOutputShape(
+                            'conv',
+                            node.layerConfig.inputShape,
+                            node.layerConfig
+                        );
+                    }
+                    break;
+                case 'pool':
+                    // Call neural network module to calculate output shape
+                    if (window.neuralNetwork && window.neuralNetwork.calculateOutputShape) {
+                        node.layerConfig.outputShape = window.neuralNetwork.calculateOutputShape(
+                            'pool',
+                            node.layerConfig.inputShape,
+                            node.layerConfig
+                        );
+                    }
+                    break;
+            }
+        }
+        
+        // Calculate parameters using the neural network module
+        let newParams = 0;
+        
+        if (window.neuralNetwork && window.neuralNetwork.calculateParameters) {
+            newParams = window.neuralNetwork.calculateParameters(
+                nodeType,
+                node.layerConfig,
+                sourceConfig
+            );
+        } else {
+            // Fallback parameter calculation if neuralNetwork module is not available
+            switch(nodeType) {
+                case 'hidden':
+                    if (node.layerConfig.inputShape && node.layerConfig.units) {
+                        // Parameters = (input_size * units) + units (weights + biases)
+                        const inputSize = node.layerConfig.inputShape[0];
+                        newParams = (inputSize * node.layerConfig.units) + node.layerConfig.units;
+                    }
+                    break;
+                case 'output':
+                    if (node.layerConfig.inputShape && node.layerConfig.units) {
+                        // Parameters = (input_size * units) + units (weights + biases)
+                        const inputSize = node.layerConfig.inputShape[0];
+                        newParams = (inputSize * node.layerConfig.units) + node.layerConfig.units;
+                    }
+                    break;
+                case 'conv':
+                    if (node.layerConfig.inputShape && node.layerConfig.filters && node.layerConfig.kernelSize) {
+                        // Parameters = (kernel_height * kernel_width * input_channels * filters) + filters
+                        const inputChannels = node.layerConfig.inputShape.length > 2 ? node.layerConfig.inputShape[2] : 1;
+                        newParams = (node.layerConfig.kernelSize[0] * node.layerConfig.kernelSize[1] * 
+                                     inputChannels * node.layerConfig.filters) + node.layerConfig.filters;
+                    }
+                    break;
+                case 'pool':
+                    // Pooling layers don't have trainable parameters
+                    newParams = 0;
+                    break;
+            }
+        }
+        
+        // Update parameter count in both the node object and network model
+        if (newParams !== undefined) {
+            // Update the node object
+            node.layerConfig.parameters = newParams;
+            
+            // Update the network model
+            const layerIndex = networkLayers.layers.findIndex(layer => layer.id === nodeId);
+            if (layerIndex !== -1) {
+                networkLayers.layers[layerIndex].parameters = newParams;
+                if (networkLayers.layers[layerIndex].config) {
+                    networkLayers.layers[layerIndex].config.parameters = newParams;
+                    
+                    // Also update output shape in model
+                    if (node.layerConfig.outputShape) {
+                        networkLayers.layers[layerIndex].config.outputShape = [...node.layerConfig.outputShape];
+                    }
+                }
+            }
+            
+            // Force update the display
+            const paramsDisplay = node.querySelector('.node-parameters');
+            if (paramsDisplay) {
+                paramsDisplay.textContent = `Params: ${formatNumber(newParams)}`;
+            }
+        }
+        
+        // Update input shape display
+        if (node.layerConfig.inputShape) {
+            const inputShapeDisplay = node.querySelector('.input-shape');
+            if (inputShapeDisplay) {
+                inputShapeDisplay.textContent = `[${node.layerConfig.inputShape.join(' × ')}]`;
+            }
+        }
+        
+        // Update output shape display
+        if (node.layerConfig.outputShape) {
+            const outputShapeDisplay = node.querySelector('.output-shape');
+            if (outputShapeDisplay) {
+                outputShapeDisplay.textContent = `[${node.layerConfig.outputShape.join(' × ')}]`;
+            }
+        }
+        
+        // Update the dimensions display
+        updateNodeDimensions(node);
+        
+        // Force a rerender of this node to ensure all changes are displayed
+        setTimeout(() => {
+            // Minimal DOM update to force re-rendering
+            const originalDisplay = node.style.display;
+            node.style.display = 'none';
+            // Force reflow
+            void node.offsetHeight;
+            node.style.display = originalDisplay;
+        }, 10);
+    }
+    
+    // Update node dimensions display
+    function updateNodeDimensions(node) {
+        if (!node || !node.layerConfig) return;
+        
+        const nodeType = node.getAttribute('data-type');
+        const dimensionsSection = node.querySelector('.node-dimensions');
+        if (!dimensionsSection) return;
+        
+        let dimensionsText = '';
+        
+        // Generate appropriate dimensions text based on node type
+        switch (nodeType) {
+            case 'input':
+                if (node.layerConfig.shape) {
+                    dimensionsText = node.layerConfig.shape.join(' × ');
+                }
+                break;
+            case 'hidden':
+            case 'output':
+                dimensionsText = node.layerConfig.units ? node.layerConfig.units.toString() : '?';
+                break;
+            case 'conv':
+                if (node.layerConfig.inputShape && node.layerConfig.outputShape) {
+                    dimensionsText = `${node.layerConfig.inputShape.join('×')} → ${node.layerConfig.outputShape.join('×')}`;
+                } else if (node.layerConfig.filters) {
+                    dimensionsText = `? → ${node.layerConfig.filters} filters`;
+                }
+                break;
+            case 'pool':
+                if (node.layerConfig.inputShape && node.layerConfig.outputShape) {
+                    dimensionsText = `${node.layerConfig.inputShape.join('×')} → ${node.layerConfig.outputShape.join('×')}`;
+                } else {
+                    dimensionsText = `? → ?`;
+                }
+                break;
+            case 'linear':
+                if (node.layerConfig.inputFeatures && node.layerConfig.outputFeatures) {
+                    dimensionsText = `${node.layerConfig.inputFeatures} → ${node.layerConfig.outputFeatures}`;
+                }
+                break;
+        }
+        
+        if (dimensionsText) {
+            dimensionsSection.textContent = dimensionsText;
+            node.setAttribute('data-dimensions', dimensionsText);
+        }
+    }
+    
+    // Recursively update nodes downstream from the given node ID
+    function updateDownstreamNodes(nodeId) {
+        // Get all connections that start from this node
+        const outgoingConnections = networkLayers.connections.filter(conn => conn.source === nodeId);
+        
+        outgoingConnections.forEach(conn => {
+            const targetId = conn.target;
+            const targetNode = document.querySelector(`.canvas-node[data-id="${targetId}"]`);
+            const sourceNode = document.querySelector(`.canvas-node[data-id="${nodeId}"]`);
+            
+            if (targetNode && sourceNode) {
+                const targetType = targetNode.getAttribute('data-type');
+                const sourceType = sourceNode.getAttribute('data-type');
+                
+                // Skip if source or target type is invalid
+                if (!targetType || !sourceType) return;
+                
+                // Find the indices in the layers array
+                const sourceIndex = networkLayers.layers.findIndex(layer => layer.id === nodeId);
+                const targetIndex = networkLayers.layers.findIndex(layer => layer.id === targetId);
+                
+                if (sourceIndex !== -1 && targetIndex !== -1) {
+                    const sourceConfig = networkLayers.layers[sourceIndex].config;
+                    
+                    // Update the target node with the source's output shape
+                    if (sourceConfig && sourceConfig.outputShape) {
+                        // Set input shape of target
+                        if (!targetNode.layerConfig) {
+                            targetNode.layerConfig = {};
+                        }
+                        
+                        targetNode.layerConfig.inputShape = [...sourceConfig.outputShape];
+                        networkLayers.layers[targetIndex].config.inputShape = [...sourceConfig.outputShape];
+                        
+                        // Update parameters
+                        updateNodeParameters(targetNode, targetType, sourceConfig);
+                        
+                        // Continue updating downstream
+                        updateDownstreamNodes(targetId);
+                    }
+                }
+            }
+        });
+    }
+    
+    // Force update all network connections and parameters
+    function forceUpdateNetworkParameters() {
+        // First, identify root nodes (nodes with no incoming connections)
+        const targetIds = new Set(networkLayers.connections.map(conn => conn.target));
+        const rootNodeIds = networkLayers.layers
+            .filter(layer => !targetIds.has(layer.id))
+            .map(layer => layer.id);
+        
+        // Update from each root node
+        rootNodeIds.forEach(nodeId => {
+            updateDownstreamNodes(nodeId);
+        });
+        
+        // After updating all parameters, notify about the network changes
+        document.dispatchEvent(new CustomEvent('networkUpdated', {
+            detail: networkLayers
+        }));
+    }
+    
+    // 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);
+    }
+    
+    // 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 with the node object
+        const event = new CustomEvent('openLayerEditor', { 
+            detail: { 
+                id: nodeId, 
+                type: nodeType, 
+                name: nodeName, 
+                dimensions: dimensions,
+                node: node  // Pass the node object
+            }
+        });
+        document.dispatchEvent(event);
+    }
+    
+    // Create SVG container for connections
+    function createSVGContainer() {
+        const svgContainer = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svgContainer.classList.add('svg-container');
+        svgContainer.style.position = 'absolute';
+        svgContainer.style.top = '0';
+        svgContainer.style.left = '0';
+        svgContainer.style.width = '100%';
+        svgContainer.style.height = '100%';
+        svgContainer.style.pointerEvents = 'none';
+        svgContainer.style.zIndex = '5';
+        canvas.appendChild(svgContainer);
+        return svgContainer;
+    }
+    
+    // Export functions
+    window.dragDrop = {
+        getNetworkArchitecture,
+        clearAllNodes,
+        updateConnections
+    };
+    
+    // Expose the drag functions to the window for debugging
+    window.startDrag = startDrag;
+    window.dragNode = dragNode;
+    window.stopDrag = stopDrag;
+    window.deleteNode = deleteNode;
+}

js/drag-fix.js

@@ -0,0 +1,153 @@
+// Direct drag fix for neural network playground
+// This uses a direct implementation to bypass any issues with the existing drag code
+
+(function() {
+    console.log('Loading direct drag fix...');
+    
+    // Wait for DOM to be ready
+    document.addEventListener('DOMContentLoaded', function() {
+        // Wait a bit longer to make sure other scripts have initialized
+        setTimeout(initializeDragFix, 1000);
+    });
+    
+    function initializeDragFix() {
+        console.log('Initializing direct drag fix');
+        
+        // Track drag state
+        let activeNode = null;
+        let offsetX = 0;
+        let offsetY = 0;
+        let isDragging = false;
+        
+        // Get the canvas
+        const canvas = document.getElementById('network-canvas');
+        if (!canvas) {
+            console.error('Cannot find canvas element');
+            return;
+        }
+        
+        // Function to add drag handlers to a node
+        function addDragHandlers(node) {
+            console.log(`Adding direct drag handlers to node: ${node.getAttribute('data-id') || 'unknown'}`);
+            
+            // Use mousedown event to initiate drag
+            node.addEventListener('mousedown', function(e) {
+                // Only handle direct clicks on the node or its title/content, not on controls or ports
+                if (e.target.closest('.node-controls') || e.target.closest('.node-port')) {
+                    return;
+                }
+                
+                console.log('Direct mousedown on node', e.target);
+                
+                // Initialize drag
+                activeNode = node;
+                const rect = node.getBoundingClientRect();
+                offsetX = e.clientX - rect.left;
+                offsetY = e.clientY - rect.top;
+                isDragging = true;
+                
+                // Add visual indication
+                node.classList.add('dragging');
+                document.body.classList.add('node-dragging');
+                node.style.zIndex = '1000';
+                
+                // Prevent text selection and other default behaviors
+                e.preventDefault();
+            });
+        }
+        
+        // Global mouse handlers for drag
+        document.addEventListener('mousemove', function(e) {
+            if (!isDragging || !activeNode) return;
+            
+            // Log occasionally to avoid flooding console
+            if (Math.random() < 0.05) {
+                console.log('%c✓ DRAGGING IS WORKING!', 'background: #4CAF50; color: white; padding: 2px 5px; border-radius: 3px;');
+            }
+            
+            const canvasRect = canvas.getBoundingClientRect();
+            let x = e.clientX - canvasRect.left - offsetX;
+            let y = e.clientY - canvasRect.top - offsetY;
+            
+            // Ensure node stays within canvas
+            const nodeWidth = activeNode.offsetWidth || 180;
+            const nodeHeight = activeNode.offsetHeight || 120;
+            
+            x = Math.max(0, Math.min(canvasRect.width - nodeWidth, x));
+            y = Math.max(0, Math.min(canvasRect.height - nodeHeight, y));
+            
+            // Move the node
+            activeNode.style.left = `${x}px`;
+            activeNode.style.top = `${y}px`;
+            
+            // Update connections if function exists
+            if (window.dragDrop && typeof window.dragDrop.updateConnections === 'function') {
+                const nodeId = activeNode.getAttribute('data-id');
+                window.dragDrop.updateConnections(nodeId);
+            }
+            
+            // Update data model if function exists
+            if (window.updateNodePositionInModel) {
+                window.updateNodePositionInModel(activeNode, x, y);
+            }
+        });
+        
+        document.addEventListener('mouseup', function() {
+            if (!isDragging || !activeNode) return;
+            
+            console.log('Direct mouseup - ending drag');
+            
+            // Remove visual indication
+            activeNode.classList.remove('dragging');
+            document.body.classList.remove('node-dragging');
+            activeNode.style.zIndex = '10';
+            
+            // Clean up
+            isDragging = false;
+            activeNode = null;
+            
+            // Update all connections
+            if (window.dragDrop && typeof window.dragDrop.updateConnections === 'function') {
+                window.dragDrop.updateConnections();
+            }
+            
+            // Dispatch event to notify other components
+            const event = new CustomEvent('nodeDragEnd');
+            document.dispatchEvent(event);
+        });
+        
+        // MutationObserver to add drag handlers to new nodes
+        const observer = new MutationObserver(function(mutations) {
+            mutations.forEach(function(mutation) {
+                if (mutation.type === 'childList') {
+                    mutation.addedNodes.forEach(function(node) {
+                        if (node.nodeType === 1 && node.classList.contains('canvas-node')) {
+                            addDragHandlers(node);
+                        }
+                    });
+                }
+            });
+        });
+        
+        // Start observing the canvas for added nodes
+        observer.observe(canvas, { childList: true });
+        
+        // Add handlers to existing nodes
+        document.querySelectorAll('.canvas-node').forEach(addDragHandlers);
+        
+        // Expose a helper function to update node positions in the model
+        window.updateNodePositionInModel = function(node, x, y) {
+            if (!window.dragDrop || !window.dragDrop.getNetworkArchitecture) return;
+            
+            const nodeId = node.getAttribute('data-id');
+            const networkLayers = window.dragDrop.getNetworkArchitecture();
+            
+            const layerIndex = networkLayers.layers.findIndex(layer => layer.id === nodeId);
+            if (layerIndex !== -1) {
+                networkLayers.layers[layerIndex].position = { x, y };
+            }
+        };
+        
+        console.log('Direct drag fix initialized');
+    }
+})(); 

js/forward-propagation.js

@@ -0,0 +1,713 @@
+// Forward Propagation Animation
+document.addEventListener('DOMContentLoaded', () => {
+    // Set initialization flag
+    window.forwardPropInitialized = true;
+    console.log('Forward propagation script initialized');
+    
+    // Canvas initialization function
+    function initializeCanvas() {
+        console.log('Initializing forward propagation canvas');
+        const canvas = document.getElementById('forward-canvas');
+        if (!canvas) {
+            console.error('Forward propagation canvas not found!');
+            return;
+        }
+        
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+            console.error('Could not get 2D context for forward propagation canvas');
+            return;
+        }
+        
+        // Set canvas dimensions
+        const container = canvas.parentElement;
+        if (container) {
+            canvas.width = container.clientWidth || 800;
+            canvas.height = container.clientHeight || 400;
+        } else {
+            canvas.width = 800;
+            canvas.height = 400;
+        }
+        
+        // Clear canvas
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        
+        // Reset animation state and redraw
+        resetAnimation();
+        drawNetwork();
+    }
+    
+    // Register the canvas initialization function with tab manager
+    if (typeof window !== 'undefined') {
+        window.initForwardPropCanvas = initializeCanvas;
+    }
+    
+    // Canvas and context
+    const canvas = document.getElementById('forward-canvas');
+    const ctx = canvas.getContext('2d');
+    
+    // Control elements
+    const startButton = document.getElementById('start-forward-animation');
+    const pauseButton = document.getElementById('pause-forward-animation');
+    const resetButton = document.getElementById('reset-forward-animation');
+    const inputSelector = document.getElementById('input-selector');
+    
+    // Display elements
+    const currentLayerText = document.getElementById('current-layer');
+    const forwardDescription = document.getElementById('forward-description');
+    const computationValues = document.getElementById('computation-values');
+    
+    // Animation state
+    let animationState = {
+        running: false,
+        currentLayer: 0, // 0: input, 1: hidden, 2: output
+        currentNeuron: -1, // -1 means all neurons in the layer are being processed
+        network: null,
+        animationFrameId: null,
+        lastTimestamp: 0,
+        speed: 3, // Speed of animation
+        highlightedConnections: []
+    };
+    
+    // Neuron states
+    const INACTIVE = 0;
+    const COMPUTING = 1;
+    const ACTIVATED = 2;
+    
+    // Neural network class for visualization
+    class ForwardNetwork {
+        constructor() {
+            // Architecture: 3 input neurons, 4 hidden neurons with ReLU, 2 output neurons with sigmoid
+            this.layers = [
+                { neurons: 3, activation: 'none', name: 'Input' },
+                { neurons: 4, activation: 'relu', name: 'Hidden' },
+                { neurons: 2, activation: 'sigmoid', name: 'Output' }
+            ];
+            
+            // Generate random weights and biases
+            this.weights = [
+                this.generateRandomWeights(3, 4), // Input to Hidden
+                this.generateRandomWeights(4, 2)  // Hidden to Output
+            ];
+            
+            this.biases = [
+                Array(4).fill(0).map(() => Math.random() * 0.4 - 0.2), // Hidden layer biases
+                Array(2).fill(0).map(() => Math.random() * 0.4 - 0.2)  // Output layer biases
+            ];
+            
+            // Neuron values - inputs, weighted sums (z), and activations (a)
+            this.inputs = [
+                [0.8, 0.2, 0.5], // Default input values
+                Array(4).fill(0), // Hidden layer
+                Array(2).fill(0)  // Output layer
+            ];
+            
+            this.weightedSums = [
+                Array(3).fill(0), // Input layer doesn't have weighted sums
+                Array(4).fill(0), // Hidden layer weighted sums
+                Array(2).fill(0)  // Output layer weighted sums
+            ];
+            
+            this.activations = [
+                Array(3).fill(0), // Input layer activations are just the inputs
+                Array(4).fill(0), // Hidden layer activations
+                Array(2).fill(0)  // Output layer activations
+            ];
+            
+            // Neuron states for animation
+            this.neuronStates = [
+                Array(3).fill(INACTIVE), // Input layer neuron states
+                Array(4).fill(INACTIVE), // Hidden layer neuron states
+                Array(2).fill(INACTIVE)  // Output layer neuron states
+            ];
+            
+            // Computation details for display
+            this.currentComputation = {
+                layer: 0,
+                neuron: 0,
+                inputs: [],
+                weights: [],
+                weightedSum: 0,
+                bias: 0,
+                activation: 0
+            };
+        }
+        
+        // Generate random weights
+        generateRandomWeights(inputSize, outputSize) {
+            const weights = [];
+            for (let i = 0; i < inputSize * outputSize; i++) {
+                weights.push(Math.random() * 0.4 - 0.2); // Random between -0.2 and 0.2
+            }
+            return weights;
+        }
+        
+        // ReLU activation function
+        relu(x) {
+            return Math.max(0, x);
+        }
+        
+        // Sigmoid activation function
+        sigmoid(x) {
+            return 1 / (1 + Math.exp(-x));
+        }
+        
+        // Set input values
+        setInputs(inputs) {
+            this.inputs[0] = [...inputs];
+            this.activations[0] = [...inputs]; // For input layer, activations = inputs
+            
+            // Reset all neuron states and other layers' values
+            for (let layer = 0; layer < this.layers.length; layer++) {
+                this.neuronStates[layer] = Array(this.layers[layer].neurons).fill(INACTIVE);
+                
+                if (layer > 0) {
+                    this.inputs[layer] = Array(this.layers[layer].neurons).fill(0);
+                    this.weightedSums[layer] = Array(this.layers[layer].neurons).fill(0);
+                    this.activations[layer] = Array(this.layers[layer].neurons).fill(0);
+                }
+            }
+        }
+        
+        // Compute a single neuron
+        computeNeuron(layer, neuron) {
+            if (layer === 0) {
+                // Input layer neurons are already set directly
+                this.neuronStates[layer][neuron] = ACTIVATED;
+                return;
+            }
+            
+            // Get inputs from previous layer
+            const prevLayerActivations = this.activations[layer - 1];
+            
+            // Compute weighted sum
+            let weightedSum = this.biases[layer - 1][neuron];
+            const weights = [];
+            const inputs = [];
+            
+            for (let i = 0; i < this.layers[layer - 1].neurons; i++) {
+                const weightIdx = i * this.layers[layer].neurons + neuron;
+                const weight = this.weights[layer - 1][weightIdx];
+                const input = prevLayerActivations[i];
+                
+                weights.push(weight);
+                inputs.push(input);
+                weightedSum += weight * input;
+            }
+            
+            // Store weighted sum
+            this.weightedSums[layer][neuron] = weightedSum;
+            
+            // Apply activation function
+            let activation;
+            if (this.layers[layer].activation === 'relu') {
+                activation = this.relu(weightedSum);
+            } else if (this.layers[layer].activation === 'sigmoid') {
+                activation = this.sigmoid(weightedSum);
+            } else {
+                activation = weightedSum; // Linear/no activation
+            }
+            
+            // Store activation
+            this.activations[layer][neuron] = activation;
+            
+            // Store computation details for display
+            this.currentComputation = {
+                layer,
+                neuron,
+                inputs,
+                weights,
+                weightedSum,
+                bias: this.biases[layer - 1][neuron],
+                activation
+            };
+            
+            // Update neuron state
+            this.neuronStates[layer][neuron] = ACTIVATED;
+        }
+        
+        // Reset the network
+        reset() {
+            // Reset all neuron states
+            for (let layer = 0; layer < this.layers.length; layer++) {
+                this.neuronStates[layer] = Array(this.layers[layer].neurons).fill(INACTIVE);
+                
+                if (layer > 0) {
+                    this.weightedSums[layer] = Array(this.layers[layer].neurons).fill(0);
+                    this.activations[layer] = Array(this.layers[layer].neurons).fill(0);
+                }
+            }
+            
+            // Set input layer activations to inputs
+            this.activations[0] = [...this.inputs[0]];
+        }
+    }
+    
+    // Canvas resize functionality
+    function resizeCanvas() {
+        const container = canvas.parentElement;
+        canvas.width = container.clientWidth;
+        canvas.height = container.clientHeight;
+        
+        // Redraw if already animating
+        if (animationState.network) {
+            drawNetwork(animationState.network);
+        }
+    }
+    
+    // Initialize the visualization
+    function initVisualization() {
+        if (!canvas) return;
+        
+        resizeCanvas();
+        window.addEventListener('resize', resizeCanvas);
+        
+        // Create neural network
+        animationState.network = new ForwardNetwork();
+        
+        // Set initial inputs
+        if (inputSelector) {
+            const selectedInput = inputSelector.value;
+            switch(selectedInput) {
+                case 'sample1':
+                    animationState.network.setInputs([0.8, 0.2, 0.5]);
+                    break;
+                case 'sample2':
+                    animationState.network.setInputs([0.1, 0.9, 0.3]);
+                    break;
+                case 'sample3':
+                    animationState.network.setInputs([0.5, 0.5, 0.5]);
+                    break;
+                default:
+                    animationState.network.setInputs([0.8, 0.2, 0.5]);
+            }
+        }
+        
+        // Initialize neuron states for input layer
+        animationState.network.neuronStates[0] = Array(animationState.network.layers[0].neurons).fill(ACTIVATED);
+        
+        // Draw initial state
+        drawNetwork(animationState.network);
+        
+        // Update computation display
+        updateComputationDisplay(animationState.network);
+        
+        // Set button states
+        startButton.disabled = false;
+        pauseButton.disabled = true;
+        resetButton.disabled = true;
+    }
+    
+    // Draw the network
+    function drawNetwork(network) {
+        if (!ctx) return;
+        
+        // Clear canvas
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        
+        const padding = 50;
+        const width = canvas.width - padding * 2;
+        const height = canvas.height - padding * 2;
+        
+        // Calculate neuron positions
+        const layers = network.layers;
+        const layerPositions = [];
+        
+        for (let i = 0; i < layers.length; i++) {
+            const layerNeurons = [];
+            const x = padding + (width / (layers.length - 1)) * i;
+            
+            for (let j = 0; j < layers[i].neurons; j++) {
+                const y = padding + (height / (layers[i].neurons + 1)) * (j + 1);
+                layerNeurons.push({ x, y });
+            }
+            
+            layerPositions.push(layerNeurons);
+        }
+        
+        // Draw connections
+        for (let layerIdx = 0; layerIdx < layers.length - 1; layerIdx++) {
+            for (let i = 0; i < layers[layerIdx].neurons; i++) {
+                for (let j = 0; j < layers[layerIdx + 1].neurons; j++) {
+                    const weightIdx = i * layers[layerIdx + 1].neurons + j;
+                    const weight = network.weights[layerIdx][weightIdx];
+                    
+                    // Normalize weight for visualization
+                    const normalizedWeight = Math.min(Math.abs(weight) * 5, 1);
+                    
+                    // Check if this connection is highlighted
+                    const isHighlighted = animationState.highlightedConnections.some(
+                        conn => conn.layer === layerIdx && conn.from === i && conn.to === j
+                    );
+                    
+                    // Set connection color based on state
+                    let connectionColor;
+                    if (isHighlighted) {
+                        connectionColor = `rgba(46, 204, 113, ${normalizedWeight + 0.2})`;
+                        ctx.lineWidth = 3;
+                    } else if (network.neuronStates[layerIdx][i] === ACTIVATED && 
+                              network.neuronStates[layerIdx + 1][j] === ACTIVATED) {
+                        connectionColor = `rgba(52, 152, 219, ${normalizedWeight})`;
+                        ctx.lineWidth = 2;
+                    } else if (network.neuronStates[layerIdx][i] === ACTIVATED) {
+                        connectionColor = `rgba(52, 152, 219, ${normalizedWeight * 0.5})`;
+                        ctx.lineWidth = 1.5;
+                    } else {
+                        connectionColor = `rgba(200, 200, 200, ${normalizedWeight * 0.3})`;
+                        ctx.lineWidth = 1;
+                    }
+                    
+                    // Draw the connection
+                    ctx.beginPath();
+                    ctx.moveTo(layerPositions[layerIdx][i].x, layerPositions[layerIdx][i].y);
+                    ctx.lineTo(layerPositions[layerIdx + 1][j].x, layerPositions[layerIdx + 1][j].y);
+                    ctx.strokeStyle = connectionColor;
+                    ctx.stroke();
+                }
+            }
+        }
+        
+        // Draw neurons
+        for (let layerIdx = 0; layerIdx < layers.length; layerIdx++) {
+            for (let i = 0; i < layers[layerIdx].neurons; i++) {
+                const { x, y } = layerPositions[layerIdx][i];
+                
+                // Get neuron activation and state
+                const activation = network.activations[layerIdx][i];
+                const neuronState = network.neuronStates[layerIdx][i];
+                
+                // Set neuron color based on state and activation
+                let neuronColor;
+                if (neuronState === COMPUTING) {
+                    neuronColor = 'rgba(241, 196, 15, 0.9)'; // Yellow for computing
+                } else if (neuronState === ACTIVATED) {
+                    neuronColor = `rgba(52, 152, 219, ${Math.min(Math.max(activation, 0.3), 0.9)})`;
+                } else {
+                    neuronColor = 'rgba(200, 200, 200, 0.5)'; // Grey for inactive
+                }
+                
+                // Draw neuron
+                ctx.beginPath();
+                ctx.arc(x, y, 20, 0, Math.PI * 2);
+                ctx.fillStyle = neuronColor;
+                ctx.fill();
+                ctx.strokeStyle = '#2980b9';
+                ctx.lineWidth = 2;
+                ctx.stroke();
+                
+                // Draw neuron value
+                ctx.fillStyle = '#fff';
+                ctx.font = '12px Arial';
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'middle';
+                
+                if (layerIdx === 0 || neuronState === ACTIVATED) {
+                    // Show activation for activated neurons
+                    ctx.fillText(activation.toFixed(2), x, y);
+                } else {
+                    // Show ? for inactive neurons
+                    ctx.fillText('?', x, y);
+                }
+                
+                // Draw layer labels
+                if (i === 0) {
+                    ctx.fillStyle = '#333';
+                    ctx.font = '14px Arial';
+                    ctx.textAlign = 'center';
+                    ctx.fillText(layers[layerIdx].name, x, y - 40);
+                    
+                    // Highlight current layer being processed
+                    if (layerIdx === animationState.currentLayer) {
+                        ctx.beginPath();
+                        ctx.arc(x, y - 40, 5, 0, Math.PI * 2);
+                        ctx.fillStyle = '#e74c3c';
+                        ctx.fill();
+                    }
+                }
+            }
+        }
+    }
+    
+    // Update computation display
+    function updateComputationDisplay(network) {
+        if (!computationValues) return;
+        
+        const currentLayer = animationState.currentLayer;
+        const currentNeuron = animationState.currentNeuron;
+        
+        // Update current layer text
+        if (currentLayerText) {
+            currentLayerText.textContent = network.layers[currentLayer].name;
+        }
+        
+        // Update description
+        if (forwardDescription) {
+            if (currentLayer === 0) {
+                forwardDescription.textContent = "Input values are passed directly to the first layer.";
+            } else if (currentNeuron === -1) {
+                forwardDescription.textContent = `All neurons in the ${network.layers[currentLayer].name} layer compute their activations.`;
+            } else {
+                const activationType = network.layers[currentLayer].activation;
+                forwardDescription.textContent = `Computing neuron ${currentNeuron + 1} in the ${network.layers[currentLayer].name} layer using ${activationType.toUpperCase()} activation.`;
+            }
+        }
+        
+        // Update computation values
+        if (currentLayer === 0 || currentNeuron === -1) {
+            // Show layer summary
+            let html = '';
+            
+            if (currentLayer === 0) {
+                html += '<div class="computation-group">Input Layer Values:</div>';
+                for (let i = 0; i < network.layers[0].neurons; i++) {
+                    html += `<div>Input ${i + 1}: ${network.activations[0][i].toFixed(4)}</div>`;
+                }
+            } else {
+                html += `<div class="computation-group">${network.layers[currentLayer].name} Layer Summary:</div>`;
+                for (let i = 0; i < network.layers[currentLayer].neurons; i++) {
+                    const z = network.weightedSums[currentLayer][i];
+                    const a = network.activations[currentLayer][i];
+                    html += `<div>Neuron ${i + 1}: z = ${z.toFixed(4)}, a = ${a.toFixed(4)}</div>`;
+                }
+            }
+            
+            computationValues.innerHTML = html;
+        } else {
+            // Show specific neuron computation
+            const comp = network.currentComputation;
+            let html = `<div class="computation-group">Computation for ${network.layers[comp.layer].name} Layer, Neuron ${comp.neuron + 1}:</div>`;
+            
+            // Weighted sum calculation
+            html += '<div class="computation-row">Weighted Sum (z) = bias';
+            for (let i = 0; i < comp.inputs.length; i++) {
+                html += ` + (${comp.weights[i].toFixed(3)} × ${comp.inputs[i].toFixed(3)})`;
+            }
+            html += `</div>`;
+            html += `<div>z = ${comp.bias.toFixed(3)}`;
+            for (let i = 0; i < comp.inputs.length; i++) {
+                const product = comp.weights[i] * comp.inputs[i];
+                html += ` + ${product.toFixed(3)}`;
+            }
+            html += ` = ${comp.weightedSum.toFixed(4)}</div>`;
+            
+            // Activation calculation
+            const activationType = network.layers[comp.layer].activation;
+            html += `<div class="computation-row">Activation (a) = ${activationType}(z)</div>`;
+            
+            if (activationType === 'relu') {
+                html += `<div>a = max(0, ${comp.weightedSum.toFixed(4)}) = ${comp.activation.toFixed(4)}</div>`;
+            } else if (activationType === 'sigmoid') {
+                html += `<div>a = 1 / (1 + e<sup>-${comp.weightedSum.toFixed(4)}</sup>) = ${comp.activation.toFixed(4)}</div>`;
+            }
+            
+            computationValues.innerHTML = html;
+        }
+    }
+    
+    // Animation loop
+    function animate(timestamp) {
+        if (!animationState.running) return;
+        
+        // Calculate delta time based on speed
+        const deltaTime = timestamp - animationState.lastTimestamp;
+        const interval = 2000 / animationState.speed; // Base interval divided by speed
+        
+        if (deltaTime > interval || animationState.lastTimestamp === 0) {
+            animationState.lastTimestamp = timestamp;
+            
+            const network = animationState.network;
+            const currentLayer = animationState.currentLayer;
+            const currentNeuron = animationState.currentNeuron;
+            
+            // Clear highlighted connections
+            animationState.highlightedConnections = [];
+            
+            if (currentLayer === 0) {
+                // Move to first neuron of hidden layer
+                animationState.currentLayer = 1;
+                animationState.currentNeuron = 0;
+                
+                // Set hidden layer neuron state to computing
+                network.neuronStates[1][0] = COMPUTING;
+                
+                // Highlight connections from input to this neuron
+                for (let i = 0; i < network.layers[0].neurons; i++) {
+                    animationState.highlightedConnections.push({
+                        layer: 0,
+                        from: i,
+                        to: 0
+                    });
+                }
+            } else {
+                if (currentNeuron < network.layers[currentLayer].neurons - 1) {
+                    // Compute current neuron
+                    network.computeNeuron(currentLayer, currentNeuron);
+                    
+                    // Move to next neuron in this layer
+                    animationState.currentNeuron = currentNeuron + 1;
+                    
+                    // Set next neuron state to computing
+                    network.neuronStates[currentLayer][currentNeuron + 1] = COMPUTING;
+                    
+                    // Highlight connections from previous layer to next neuron
+                    for (let i = 0; i < network.layers[currentLayer - 1].neurons; i++) {
+                        animationState.highlightedConnections.push({
+                            layer: currentLayer - 1,
+                            from: i,
+                            to: currentNeuron + 1
+                        });
+                    }
+                } else {
+                    // Compute last neuron in current layer
+                    network.computeNeuron(currentLayer, currentNeuron);
+                    
+                    // Check if we've reached the output layer
+                    if (currentLayer < network.layers.length - 1) {
+                        // Move to first neuron of next layer
+                        animationState.currentLayer = currentLayer + 1;
+                        animationState.currentNeuron = 0;
+                        
+                        // Set next layer's first neuron state to computing
+                        network.neuronStates[currentLayer + 1][0] = COMPUTING;
+                        
+                        // Highlight connections from current layer to next layer's first neuron
+                        for (let i = 0; i < network.layers[currentLayer].neurons; i++) {
+                            animationState.highlightedConnections.push({
+                                layer: currentLayer,
+                                from: i,
+                                to: 0
+                            });
+                        }
+                    } else {
+                        // We've finished the entire forward pass
+                        // Pause animation and show the complete result
+                        pauseAnimation();
+                        
+                        // Set current layer to output layer with no specific neuron
+                        animationState.currentLayer = currentLayer;
+                        animationState.currentNeuron = -1;
+                    }
+                }
+            }
+            
+            // Update visualization
+            drawNetwork(network);
+            updateComputationDisplay(network);
+        }
+        
+        // Continue animation
+        animationState.animationFrameId = requestAnimationFrame(animate);
+    }
+    
+    // Start animation
+    function startAnimation() {
+        if (!animationState.running) {
+            animationState.running = true;
+            animationState.lastTimestamp = 0;
+            animationState.animationFrameId = requestAnimationFrame(animate);
+            
+            startButton.disabled = true;
+            pauseButton.disabled = false;
+            resetButton.disabled = false;
+        }
+    }
+    
+    // Pause animation
+    function pauseAnimation() {
+        if (animationState.running) {
+            animationState.running = false;
+            if (animationState.animationFrameId) {
+                cancelAnimationFrame(animationState.animationFrameId);
+            }
+            
+            startButton.disabled = false;
+            pauseButton.disabled = true;
+            resetButton.disabled = false;
+        }
+    }
+    
+    // Reset animation
+    function resetAnimation() {
+        pauseAnimation();
+        
+        // Reset network state
+        animationState.network.reset();
+        
+        // Reset animation state
+        animationState.currentLayer = 0;
+        animationState.currentNeuron = -1;
+        animationState.highlightedConnections = [];
+        
+        // Mark input layer neurons as activated
+        for (let i = 0; i < animationState.network.layers[0].neurons; i++) {
+            animationState.network.neuronStates[0][i] = ACTIVATED;
+        }
+        
+        // Update visualization
+        drawNetwork(animationState.network);
+        updateComputationDisplay(animationState.network);
+        
+        startButton.disabled = false;
+        pauseButton.disabled = true;
+        resetButton.disabled = false;
+    }
+    
+    // Handle input selection change
+    function handleInputChange() {
+        if (!inputSelector || !animationState.network) return;
+        
+        const selectedInput = inputSelector.value;
+        let newInputs;
+        
+        switch(selectedInput) {
+            case 'sample1':
+                newInputs = [0.8, 0.2, 0.5];
+                break;
+            case 'sample2':
+                newInputs = [0.1, 0.9, 0.3];
+                break;
+            case 'sample3':
+                newInputs = [0.5, 0.5, 0.5];
+                break;
+            default:
+                newInputs = [0.8, 0.2, 0.5];
+        }
+        
+        // Set new inputs and reset
+        animationState.network.setInputs(newInputs);
+        resetAnimation();
+    }
+    
+    // Set up event listeners
+    function setupEventListeners() {
+        if (startButton) {
+            startButton.addEventListener('click', startAnimation);
+        }
+        
+        if (pauseButton) {
+            pauseButton.addEventListener('click', pauseAnimation);
+        }
+        
+        if (resetButton) {
+            resetButton.addEventListener('click', resetAnimation);
+        }
+        
+        if (inputSelector) {
+            inputSelector.addEventListener('change', handleInputChange);
+        }
+        
+        // Tab switching event from the main tab controller
+        document.addEventListener('tabSwitch', (e) => {
+            if (e.detail.tab === 'forward-propagation') {
+                // Initialize or reset when switching to this tab
+                resetAnimation();
+            }
+        });
+    }
+    
+    // Initialize the visualization
+    initVisualization();
+    
+    // Set up event listeners
+    setupEventListeners();
+}); 

js/layer-editor.js

@@ -0,0 +1,912 @@
+/**
+ * Layer Editor for Neural Network Playground
+ * Handles editing of layer parameters through a modal interface
+ */
+
+(function() {
+    console.log('Loading layer editor...');
+    
+    // Run immediately, don't wait for DOMContentLoaded
+    initializeLayerEditor();
+    
+    function initializeLayerEditor() {
+        // Get modal elements
+        const modal = document.getElementById('layer-editor-modal');
+        const form = modal.querySelector('.layer-form');
+        const saveButton = modal.querySelector('.save-layer-btn');
+        const closeButtons = modal.querySelectorAll('.close-modal');
+        const modalTitle = modal.querySelector('.modal-title');
+        
+        if (!modal || !form) {
+            console.error('Layer editor modal elements not found!');
+            return;
+        }
+        
+        // Current node being edited
+        let currentNode = null;
+        let currentConfig = null;
+        
+        // DEBUG: Log when script is loaded
+        console.log('Layer editor initialized, waiting for openLayerEditor events', modal);
+        
+        // Listen for clicks on edit buttons directly
+        document.addEventListener('click', function(e) {
+            // Check if click was on an edit button
+            if (e.target.classList.contains('node-edit-btn')) {
+                e.preventDefault();
+                e.stopPropagation();
+                
+                // Find the node
+                const node = e.target.closest('.canvas-node');
+                if (!node) {
+                    console.error('Could not find node for edit button');
+                    return;
+                }
+                
+                // Get node info
+                const nodeId = node.getAttribute('data-id');
+                const nodeType = node.getAttribute('data-type');
+                const nodeName = node.getAttribute('data-name') || node.querySelector('.node-title').textContent;
+                
+                console.log('Edit button clicked for node', nodeId, nodeType);
+                
+                // Store reference to current node and its config
+                currentNode = node;
+                currentConfig = node.layerConfig || {};
+                
+                // Update modal title
+                modalTitle.textContent = `Edit ${nodeName || 'Layer'}`;
+                
+                // Generate form based on node type
+                generateFormFields(form, nodeType, currentConfig);
+                
+                // Show modal with debuggable visible class
+                modal.style.display = 'block';
+                modal.setAttribute('data-visible', 'true');
+                
+                // Force reflow to ensure display takes effect
+                void modal.offsetWidth;
+                
+                // Add active class for transition
+                modal.classList.add('active');
+            }
+        });
+        
+        // Also listen for the openLayerEditor event (fallback)
+        document.addEventListener('openLayerEditor', function(e) {
+            const detail = e.detail;
+            
+            if (!detail || !detail.node) {
+                console.error('Invalid layer editor data', detail);
+                return;
+            }
+            
+            console.log('openLayerEditor event received:', detail);
+            
+            // Store reference to current node and its config
+            currentNode = detail.node;
+            currentConfig = currentNode.layerConfig || {};
+            
+            // Update modal title
+            modalTitle.textContent = `Edit ${detail.name || 'Layer'}`;
+            
+            // Generate form based on node type
+            generateFormFields(form, detail.type, currentConfig);
+            
+            // Show modal
+            modal.style.display = 'block';
+            modal.setAttribute('data-visible', 'true');
+            
+            // Force reflow to ensure display takes effect
+            void modal.offsetWidth;
+            
+            // Add active class for transition
+            modal.classList.add('active');
+            
+            console.log('Opened layer editor for', detail.id, detail.type);
+        });
+        
+        // Close modal when clicking close button or outside the modal
+        closeButtons.forEach(button => {
+            button.addEventListener('click', function() {
+                modal.classList.remove('active');
+                setTimeout(() => {
+                    modal.style.display = 'none';
+                    modal.removeAttribute('data-visible');
+                }, 300); // Match transition duration from CSS
+            });
+        });
+        
+        window.addEventListener('click', function(e) {
+            if (e.target === modal) {
+                modal.classList.remove('active');
+                setTimeout(() => {
+                    modal.style.display = 'none';
+                    modal.removeAttribute('data-visible');
+                }, 300);
+            }
+        });
+        
+        // Handle form submission
+        saveButton.addEventListener('click', function() {
+            if (!currentNode || !currentConfig) {
+                console.error('No node selected for editing');
+                modal.classList.remove('active');
+                setTimeout(() => {
+                    modal.style.display = 'none';
+                    modal.removeAttribute('data-visible');
+                }, 300);
+                return;
+            }
+            
+            // Get updated values from form
+            const formData = new FormData(form);
+            const updatedConfig = { ...currentConfig };
+            
+            // Update config based on node type
+            const nodeType = currentNode.getAttribute('data-type');
+            
+            // Process form data
+            for (let [key, value] of formData.entries()) {
+                // Handle arrays (from comma-separated values)
+                if (key.endsWith('[]') && typeof value === 'string') {
+                    const arrayKey = key.slice(0, -2);
+                    // Parse array values more carefully - ensuring we get numbers
+                    const values = value.split(',')
+                        .map(v => {
+                            const parsed = parseFloat(v.trim());
+                            return isNaN(parsed) ? 0 : parsed; // Convert NaN to 0
+                        });
+                    updatedConfig[arrayKey] = values;
+                    console.log(`Parsed array for ${arrayKey}:`, values);
+                } 
+                // Convert numeric values - more aggressively ensure integers for specific fields
+                else if (key === 'filters' || key === 'units') {
+                    updatedConfig[key] = parseInt(value) || (key === 'filters' ? 32 : key === 'units' ? 64 : 0);
+                    console.log(`Parsed ${key} as integer:`, updatedConfig[key]);
+                }
+                // Other numeric values
+                else if (!isNaN(value) && value !== '') {
+                    updatedConfig[key] = parseFloat(value);
+                } 
+                // Everything else as-is
+                else {
+                    updatedConfig[key] = value;
+                }
+            }
+            
+            console.log('Updated config:', updatedConfig);
+            
+            // Update node with new config
+            updateNodeWithConfig(currentNode, nodeType, updatedConfig);
+            
+            // Close modal
+            modal.classList.remove('active');
+            setTimeout(() => {
+                modal.style.display = 'none';
+                modal.removeAttribute('data-visible');
+            }, 300);
+            
+            // Clear references
+            currentNode = null;
+            currentConfig = null;
+        });
+        
+        console.log('Layer editor initialized and listeners attached');
+    }
+    
+    /**
+     * Generate form fields based on node type
+     */
+    function generateFormFields(form, nodeType, config) {
+        // Clear existing form
+        form.innerHTML = '';
+        
+        console.log('Generating form fields for', nodeType, 'with config', config);
+        
+        // Add output shape field to all node types
+        const currentOutputShape = (config.outputShape || []).join(',');
+        
+        switch (nodeType) {
+            case 'input':
+                addFormField(form, 'Shape', 'shape[]', (config.shape || [28, 28, 1]).join(','), 'The input dimensions (e.g., 28,28,1 for MNIST images)');
+                addFormField(form, 'Output Shape', 'outputShape[]', currentOutputShape, 'Manual override for output shape (normally matches input shape)');
+                break;
+                
+            case 'hidden':
+                addFormField(form, 'Units', 'units', config.units || 128, 'Number of neurons in this layer');
+                addFormField(form, 'Activation', 'activation', config.activation || 'relu', 'Activation function', 'select', {
+                    options: ['relu', 'sigmoid', 'tanh', 'leaky_relu', 'linear']
+                });
+                addFormField(form, 'Output Shape', 'outputShape[]', currentOutputShape, 'Manual override for output shape (normally [units])');
+                break;
+                
+            case 'output':
+                addFormField(form, 'Units', 'units', config.units || 10, 'Number of output neurons (e.g., 10 for MNIST)');
+                addFormField(form, 'Activation', 'activation', config.activation || 'softmax', 'Activation function', 'select', {
+                    options: ['softmax', 'sigmoid', 'linear']
+                });
+                addFormField(form, 'Output Shape', 'outputShape[]', currentOutputShape, 'Manual override for output shape (normally [units])');
+                break;
+                
+            case 'conv':
+                addFormField(form, 'Filters', 'filters', config.filters || 32, 'Number of filters (output channels)');
+                addFormField(form, 'Kernel Size', 'kernelSize[]', (config.kernelSize || [3, 3]).join(','), 'Size of the convolution kernel (e.g., 3,3)');
+                addFormField(form, 'Strides', 'strides[]', (config.strides || [1, 1]).join(','), 'Stride of the convolution (e.g., 1,1)');
+                addFormField(form, 'Padding', 'padding', config.padding || 'same', 'Padding method', 'select', {
+                    options: ['same', 'valid']
+                });
+                addFormField(form, 'Activation', 'activation', config.activation || 'relu', 'Activation function', 'select', {
+                    options: ['relu', 'sigmoid', 'tanh', 'leaky_relu', 'linear']
+                });
+                addFormField(form, 'Output Shape', 'outputShape[]', currentOutputShape, 'Manual override for calculated output shape');
+                break;
+                
+            case 'pool':
+                addFormField(form, 'Pool Size', 'poolSize[]', (config.poolSize || [2, 2]).join(','), 'Size of the pooling window (e.g., 2,2)');
+                addFormField(form, 'Strides', 'strides[]', (config.strides || [2, 2]).join(','), 'Stride of the pooling operation (e.g., 2,2)');
+                addFormField(form, 'Padding', 'padding', config.padding || 'valid', 'Padding method', 'select', {
+                    options: ['same', 'valid']
+                });
+                addFormField(form, 'Pool Type', 'poolType', config.poolType || 'max', 'Type of pooling', 'select', {
+                    options: ['max', 'average']
+                });
+                addFormField(form, 'Output Shape', 'outputShape[]', currentOutputShape, 'Manual override for calculated output shape');
+                break;
+            
+            case 'lstm':
+                addFormField(form, 'Units', 'units', config.units || 64, 'Number of LSTM units');
+                addFormField(form, 'Return Sequences', 'returnSequences', config.returnSequences !== false ? 'true' : 'false', 'Return the full sequence or just the final state', 'select', {
+                    options: ['true', 'false']
+                });
+                addFormField(form, 'Activation', 'activation', config.activation || 'tanh', 'Activation function', 'select', {
+                    options: ['tanh', 'relu', 'sigmoid']
+                });
+                addFormField(form, 'Recurrent Activation', 'recurrentActivation', config.recurrentActivation || 'sigmoid', 'Recurrent activation function', 'select', {
+                    options: ['sigmoid', 'tanh', 'relu']
+                });
+                addFormField(form, 'Use Bias', 'useBias', config.useBias !== false ? 'true' : 'false', 'Include bias terms', 'select', {
+                    options: ['true', 'false']
+                });
+                addFormField(form, 'Output Shape', 'outputShape[]', currentOutputShape, 'Manual override for calculated output shape');
+                break;
+            
+            case 'rnn':
+                addFormField(form, 'Units', 'units', config.units || 32, 'Number of RNN units');
+                addFormField(form, 'Return Sequences', 'returnSequences', config.returnSequences !== false ? 'true' : 'false', 'Return the full sequence or just the final state', 'select', {
+                    options: ['true', 'false']
+                });
+                addFormField(form, 'Activation', 'activation', config.activation || 'tanh', 'Activation function', 'select', {
+                    options: ['tanh', 'relu', 'sigmoid']
+                });
+                addFormField(form, 'Use Bias', 'useBias', config.useBias !== false ? 'true' : 'false', 'Include bias terms', 'select', {
+                    options: ['true', 'false']
+                });
+                addFormField(form, 'Output Shape', 'outputShape[]', currentOutputShape, 'Manual override for calculated output shape');
+                break;
+            
+            case 'gru':
+                addFormField(form, 'Units', 'units', config.units || 48, 'Number of GRU units');
+                addFormField(form, 'Return Sequences', 'returnSequences', config.returnSequences !== false ? 'true' : 'false', 'Return the full sequence or just the final state', 'select', {
+                    options: ['true', 'false']
+                });
+                addFormField(form, 'Activation', 'activation', config.activation || 'tanh', 'Activation function', 'select', {
+                    options: ['tanh', 'relu', 'sigmoid']
+                });
+                addFormField(form, 'Recurrent Activation', 'recurrentActivation', config.recurrentActivation || 'sigmoid', 'Recurrent activation function', 'select', {
+                    options: ['sigmoid', 'tanh', 'relu']
+                });
+                addFormField(form, 'Use Bias', 'useBias', config.useBias !== false ? 'true' : 'false', 'Include bias terms', 'select', {
+                    options: ['true', 'false']
+                });
+                addFormField(form, 'Output Shape', 'outputShape[]', currentOutputShape, 'Manual override for calculated output shape');
+                break;
+            
+            default:
+                form.innerHTML = '<p>No editable parameters for this layer type.</p>';
+        }
+    }
+    
+    /**
+     * Add a form field to the form
+     */
+    function addFormField(form, label, name, value, helpText, type = 'text', options = {}) {
+        const fieldContainer = document.createElement('div');
+        fieldContainer.className = 'form-field';
+        
+        const labelElem = document.createElement('label');
+        labelElem.textContent = label;
+        labelElem.setAttribute('for', name);
+        
+        let inputElem;
+        
+        if (type === 'select') {
+            inputElem = document.createElement('select');
+            inputElem.name = name;
+            inputElem.id = name;
+            
+            if (options.options) {
+                options.options.forEach(option => {
+                    const optionElem = document.createElement('option');
+                    optionElem.value = option;
+                    optionElem.textContent = option;
+                    
+                    if (option === value) {
+                        optionElem.selected = true;
+                    }
+                    
+                    inputElem.appendChild(optionElem);
+                });
+            }
+        } else {
+            inputElem = document.createElement('input');
+            inputElem.type = type;
+            inputElem.name = name;
+            inputElem.id = name;
+            inputElem.value = value;
+            
+            if (options.min !== undefined) inputElem.min = options.min;
+            if (options.max !== undefined) inputElem.max = options.max;
+            if (options.step !== undefined) inputElem.step = options.step;
+        }
+        
+        const helpElem = document.createElement('small');
+        helpElem.className = 'help-text';
+        helpElem.textContent = helpText;
+        
+        fieldContainer.appendChild(labelElem);
+        fieldContainer.appendChild(inputElem);
+        fieldContainer.appendChild(helpElem);
+        
+        form.appendChild(fieldContainer);
+    }
+    
+    /**
+     * Update node with new configuration
+     */
+    function updateNodeWithConfig(node, nodeType, config) {
+        if (!node) {
+            console.error('Cannot update node: Node is null');
+            return;
+        }
+        
+        console.log(`Starting to update node ${node.getAttribute('data-id')} of type ${nodeType}`, config);
+        
+        // Store updated config on the node
+        node.layerConfig = { ...config }; // Create a copy to avoid reference issues
+        
+        // Get node elements
+        const nodeId = node.getAttribute('data-id');
+        const inputShapeDisplay = node.querySelector('.input-shape');
+        const outputShapeDisplay = node.querySelector('.output-shape');
+        const paramsDisplay = node.querySelector('.node-parameters');
+        const dimensionsDisplay = node.querySelector('.node-dimensions');
+        const paramsDetailsDisplay = node.querySelector('.params-details');
+        
+        // Debug check
+        if (!inputShapeDisplay || !outputShapeDisplay || !paramsDisplay) {
+            console.warn('Some node displays not found:', {
+                inputShapeDisplay,
+                outputShapeDisplay,
+                paramsDisplay
+            });
+        }
+        
+        // Handle manual output shape override first
+        let manualOutputShape = null;
+        if (config.outputShape && Array.isArray(config.outputShape) && config.outputShape.length > 0 
+            && config.outputShape.some(dim => dim !== '?' && dim !== '')) {
+            // User has provided a manual output shape
+            manualOutputShape = [...config.outputShape];
+            console.log('Manual output shape provided:', manualOutputShape);
+        }
+        
+        // Update output shape and parameters
+        let outputShape = manualOutputShape || config.outputShape;
+        let parameters = config.parameters;
+        let inputShape = config.inputShape;
+        
+        console.log('Before calculating: outputShape =', outputShape, 'parameters =', parameters);
+        
+        // Get connections to find input shape if not present
+        if (!inputShape && window.dragDrop && window.dragDrop.getNetworkArchitecture) {
+            const networkLayers = window.dragDrop.getNetworkArchitecture();
+            const connections = networkLayers.connections || [];
+            const targetsThisNode = connections.filter(conn => conn.target === nodeId);
+            
+            if (targetsThisNode.length > 0) {
+                // Find the source node's output shape
+                const sourceId = targetsThisNode[0].source;
+                const sourceLayer = networkLayers.layers.find(layer => layer.id === sourceId);
+                if (sourceLayer && sourceLayer.config && sourceLayer.config.outputShape) {
+                    inputShape = [...sourceLayer.config.outputShape];
+                    config.inputShape = inputShape;
+                    console.log('Found input shape from connections:', inputShape);
+                }
+            }
+        }
+        
+        // Try to calculate new output shape and parameters only if manual output shape is not provided
+        if (!manualOutputShape && window.neuralNetwork) {
+            console.log('Using neural network module to calculate shapes and parameters');
+            if (window.neuralNetwork.calculateOutputShape) {
+                try {
+                    const newOutputShape = window.neuralNetwork.calculateOutputShape(config, nodeType);
+                    if (newOutputShape) {
+                        outputShape = newOutputShape;
+                        config.outputShape = newOutputShape;
+                        console.log('Calculated output shape:', outputShape);
+                    }
+                } catch (error) {
+                    console.error('Error calculating output shape:', error);
+                }
+            }
+            
+            if (window.neuralNetwork.calculateParameters) {
+                try {
+                    const newParameters = window.neuralNetwork.calculateParameters(config, nodeType);
+                    if (newParameters !== undefined) {
+                        parameters = newParameters;
+                        config.parameters = newParameters;
+                        console.log('Calculated parameters:', parameters);
+                    }
+                } catch (error) {
+                    console.error('Error calculating parameters:', error);
+                }
+            }
+        } else if (!manualOutputShape) {
+            // Perform basic calculations based on node type only if manual shape isn't provided
+            console.log('Falling back to basic parameter calculations');
+            
+            switch (nodeType) {
+                case 'input':
+                    if (!manualOutputShape) {
+                        outputShape = config.shape;
+                    }
+                    parameters = 0;
+                    break;
+                    
+                case 'hidden':
+                    const units = parseInt(config.units) || 128;
+                    if (!manualOutputShape) {
+                        outputShape = [units];
+                    }
+                    if (inputShape) {
+                        const inputSize = inputShape.reduce((a, b) => a * b, 1);
+                        parameters = inputSize * units + units; // weights + biases
+                        console.log(`Hidden layer params: ${inputSize} inputs × ${units} units + ${units} biases = ${parameters}`);
+                    } else {
+                        console.log('No input shape available for hidden layer parameter calculation');
+                        parameters = units; // Just biases if we don't know input size
+                    }
+                    break;
+                    
+                case 'output':
+                    const outUnits = parseInt(config.units) || 10;
+                    if (!manualOutputShape) {
+                        outputShape = [outUnits];
+                    }
+                    if (inputShape) {
+                        const inputSize = inputShape.reduce((a, b) => a * b, 1);
+                        parameters = inputSize * outUnits + outUnits; // weights + biases
+                        console.log(`Output layer params: ${inputSize} inputs × ${outUnits} units + ${outUnits} biases = ${parameters}`);
+                    } else {
+                        console.log('No input shape available for output layer parameter calculation');
+                        parameters = outUnits; // Just biases if we don't know input size
+                    }
+                    break;
+                    
+                case 'conv':
+                    if (inputShape && inputShape.length >= 3 && !manualOutputShape) {
+                        // Very explicit type conversion - ensure all values are numbers
+                        const height = Math.max(1, parseInt(inputShape[0]) || 1);  // Ensure at least 1
+                        const width = Math.max(1, parseInt(inputShape[1]) || 1);   // Ensure at least 1
+                        const channels = Math.max(1, parseInt(inputShape[2]) || 1); // Ensure at least 1
+                        
+                        console.log(`Conv2D INPUT SHAPE debug: [${height}, ${width}, ${channels}]`, 
+                            {original: inputShape, parsed: [height, width, channels]});
+                        
+                        // Ensure filters is a positive number
+                        const filters = Math.max(1, parseInt(config.filters) || 32);
+                        
+                        // Explicit processing of kernelSize with safety checks
+                        let kernelSize = [3, 3]; // Default fallback
+                        if (config.kernelSize) {
+                            if (typeof config.kernelSize === 'string') {
+                                kernelSize = config.kernelSize.split(',')
+                                    .map(v => Math.max(1, parseInt(v.trim()) || 1)); // Ensure at least 1
+                            } else if (Array.isArray(config.kernelSize)) {
+                                kernelSize = config.kernelSize
+                                    .map(v => Math.max(1, parseInt(v) || 1)); // Ensure at least 1
+                            }
+                        }
+                        
+                        // Explicit processing of strides with safety checks
+                        let strides = [1, 1]; // Default fallback
+                        if (config.strides) {
+                            if (typeof config.strides === 'string') {
+                                strides = config.strides.split(',')
+                                    .map(v => Math.max(1, parseInt(v.trim()) || 1)); // Ensure at least 1
+                            } else if (Array.isArray(config.strides)) {
+                                strides = config.strides
+                                    .map(v => Math.max(1, parseInt(v) || 1)); // Ensure at least 1
+                            }
+                        }
+                        
+                        // Ensure we have at least 2 elements for kernelSize and strides and all values are at least 1
+                        kernelSize = kernelSize.length >= 2 ? 
+                            [Math.max(1, kernelSize[0]), Math.max(1, kernelSize[1])] : 
+                            [Math.max(1, kernelSize[0] || 3), Math.max(1, kernelSize[0] || 3)];
+                            
+                        strides = strides.length >= 2 ? 
+                            [Math.max(1, strides[0]), Math.max(1, strides[1])] : 
+                            [Math.max(1, strides[0] || 1), Math.max(1, strides[0] || 1)];
+                        
+                        console.log(`Conv2D CONFIG debug:`, {
+                            filters: filters,
+                            kernelSize: kernelSize,
+                            strides: strides
+                        });
+                        
+                        // Store cleaned values back in config
+                        config.filters = filters;
+                        config.kernelSize = kernelSize;
+                        config.strides = strides;
+                        
+                        const padding = config.padding || 'same';
+                        
+                        // Calculate output dimensions based on padding
+                        let outHeight, outWidth;
+                        if (padding === 'same') {
+                            outHeight = Math.ceil(height / strides[0]);
+                            outWidth = Math.ceil(width / strides[1]);
+                        } else { // 'valid' padding
+                            outHeight = Math.ceil((height - kernelSize[0] + 1) / strides[0]);
+                            outWidth = Math.ceil((width - kernelSize[1] + 1) / strides[1]);
+                        }
+                        
+                        // Ensure output dimensions are at least 1
+                        outHeight = Math.max(1, outHeight);
+                        outWidth = Math.max(1, outWidth);
+                        
+                        // Final output shape
+                        outputShape = [outHeight, outWidth, filters];
+                        
+                        // Calculate parameters step by step to avoid any overflow or multiplication errors
+                        const kh = Number(kernelSize[0]);
+                        const kw = Number(kernelSize[1]);
+                        const c = Number(channels);
+                        const f = Number(filters);
+                        
+                        // Check for any zeros or negative values that would make the calculation invalid
+                        if (kh <= 0 || kw <= 0 || c <= 0 || f <= 0) {
+                            console.error(`Invalid Conv2D parameter values: kh=${kh}, kw=${kw}, c=${c}, f=${f}`);
+                            parameters = 0;
+                        } else {
+                            // Calculate with explicit steps to avoid any overflow
+                            const kernelParams = kh * kw * c * f;
+                            const biasParams = f;
+                            parameters = kernelParams + biasParams;
+                            
+                            console.log(`Conv2D CALCULATION STEPS:
+                              Kernel height (kh) = ${kh}
+                              Kernel width (kw) = ${kw}
+                              Input channels (c) = ${c}
+                              Filters (f) = ${f}
+                              Kernel params = ${kh} × ${kw} × ${c} × ${f} = ${kernelParams}
+                              Bias params = ${biasParams}
+                              Total params = ${kernelParams} + ${biasParams} = ${parameters}
+                            `);
+                        }
+                        
+                        console.log(`Conv2D output shape: ${outHeight}×${outWidth}×${filters}`);
+                    } else {
+                        console.log('Cannot calculate Conv2D parameters - invalid input shape or manual shape provided:', inputShape);
+                        if (!manualOutputShape) {
+                            const filters = parseInt(config.filters) || 32;
+                            outputShape = ['?', '?', filters];
+                        }
+                        parameters = 0;  // Set to 0 instead of '?' to avoid display issues
+                    }
+                    break;
+                    
+                case 'pool':
+                    if (inputShape && inputShape.length >= 3 && !manualOutputShape) {
+                        const [height, width, channels] = inputShape;
+                        const poolSize = config.poolSize || [2, 2];
+                        const stride = config.strides || poolSize;
+                        const padding = config.padding || 'valid';
+                        
+                        // Calculate output dimensions
+                        let outHeight, outWidth;
+                        if (padding === 'same') {
+                            outHeight = Math.ceil(height / stride[0]);
+                            outWidth = Math.ceil(width / stride[1]);
+                        } else { // 'valid' padding
+                            outHeight = Math.ceil((height - poolSize[0] + 1) / stride[0]);
+                            outWidth = Math.ceil((width - poolSize[1] + 1) / stride[1]);
+                        }
+                        
+                        outputShape = [outHeight, outWidth, channels];
+                        parameters = 0; // Pooling layers have no parameters
+                        console.log('Pooling layer has 0 parameters');
+                    } else {
+                        console.log('Cannot calculate pooling output shape without proper input shape or manual shape provided');
+                        if (!manualOutputShape) {
+                            outputShape = ['?', '?', '?'];
+                        }
+                        parameters = 0;
+                    }
+                    break;
+                    
+                case 'linear':
+                    const linearUnits = parseInt(config.units) || 1;
+                    if (!manualOutputShape) {
+                        outputShape = [linearUnits];
+                    }
+                    if (inputShape) {
+                        const inputSize = inputShape.reduce((a, b) => a * b, 1);
+                        const useBias = config.useBias !== 'false';
+                        parameters = inputSize * linearUnits + (useBias ? linearUnits : 0);
+                        console.log(`Linear layer params: ${inputSize} inputs × ${linearUnits} units + ${useBias ? linearUnits : 0} biases = ${parameters}`);
+                    } else {
+                        console.log('No input shape available for linear layer parameter calculation');
+                        parameters = linearUnits; // Just biases if we don't know input size
+                    }
+                    break;
+            }
+        }
+        
+        // Make sure we have the output shape in the config
+        if (outputShape) {
+            config.outputShape = outputShape;
+        }
+        
+        // Updated detailed parameter description
+        let paramsDetails = '';
+        switch (nodeType) {
+            case 'hidden':
+                paramsDetails = `Units: ${config.units}<br>Activation: ${config.activation || 'relu'}`;
+                break;
+            case 'output':
+                paramsDetails = `Units: ${config.units}<br>Activation: ${config.activation || 'softmax'}`;
+                break;
+            case 'conv':
+                paramsDetails = `Filters: ${config.filters}<br>Kernel: ${(config.kernelSize || [3, 3]).join('×')}<br>Strides: ${(config.strides || [1, 1]).join('×')}<br>Padding: ${config.padding || 'same'}`;
+                break;
+            case 'pool':
+                paramsDetails = `Pool size: ${(config.poolSize || [2, 2]).join('×')}<br>Strides: ${(config.strides || [2, 2]).join('×')}<br>Padding: ${config.padding || 'valid'}<br>Type: ${config.poolType || 'max'}`;
+                break;
+            case 'input':
+                paramsDetails = `Shape: ${(config.shape || [28, 28, 1]).join('×')}`;
+                break;
+            case 'linear':
+                paramsDetails = `Units: ${config.units}<br>Use Bias: ${config.useBias !== 'false' ? 'Yes' : 'No'}`;
+                break;
+        }
+        
+        // Update displays
+        if (outputShape && outputShapeDisplay) {
+            outputShapeDisplay.textContent = `[${Array.isArray(outputShape) ? outputShape.join(' × ') : outputShape}]`;
+            // Highlight the output shape to show it's been updated
+            const originalBackground = outputShapeDisplay.style.backgroundColor;
+            outputShapeDisplay.style.backgroundColor = '#f0f9ff';
+            setTimeout(() => {
+                outputShapeDisplay.style.backgroundColor = originalBackground;
+            }, 500);
+            console.log('Updated output shape display with', outputShape);
+        }
+        
+        if (inputShape && inputShapeDisplay) {
+            inputShapeDisplay.textContent = `[${Array.isArray(inputShape) ? inputShape.join(' × ') : inputShape}]`;
+            console.log('Updated input shape display');
+        } else if (inputShapeDisplay && nodeType !== 'input') {
+            inputShapeDisplay.textContent = 'Connect input';
+        }
+        
+        // Ensure parameters is always a number for display
+        if (parameters !== undefined) {
+            if (typeof parameters === 'string') {
+                if (parameters === '?') {
+                    parameters = 0;
+                } else {
+                    // Try to parse it as a number
+                    parameters = parseInt(parameters) || 0;
+                }
+            }
+            
+            // Debug log with type information
+            console.log(`Parameter display value: ${parameters} (${typeof parameters})`);
+            
+            if (paramsDisplay) {
+                // Special display for Conv2D
+                if (nodeType === 'conv') {
+                    // Store the numeric value in the model
+                    config.parameters = parameters;
+                    
+                    // Format for display
+                    const displayValue = formatNumber(parameters);
+                    paramsDisplay.textContent = `Params: ${displayValue}`;
+                    console.log(`Updated Conv2D parameters display: ${displayValue}`);
+                    
+                    // Change background color briefly to indicate update
+                    const originalColor = paramsDisplay.style.backgroundColor;
+                    paramsDisplay.style.backgroundColor = '#f0f9ff';
+                    setTimeout(() => {
+                        paramsDisplay.style.backgroundColor = originalColor;
+                    }, 500);
+                } else {
+                    // Regular update for other node types
+                    paramsDisplay.textContent = `Params: ${formatNumber(parameters)}`;
+                }
+                console.log('Updated parameters display');
+            }
+        }
+        
+        if (paramsDetailsDisplay) {
+            paramsDetailsDisplay.innerHTML = paramsDetails;
+            console.log('Updated parameter details display');
+        }
+        
+        if (dimensionsDisplay && outputShape) {
+            let dimensionsText = '';
+            if (nodeType === 'hidden' || nodeType === 'output' || nodeType === 'linear') {
+                dimensionsText = config.units || '';
+            } else if (nodeType === 'conv' || nodeType === 'pool') {
+                if (Array.isArray(outputShape)) {
+                    dimensionsText = outputShape.join('×');
+                } else {
+                    dimensionsText = outputShape;
+                }
+            } else if (nodeType === 'input') {
+                if (Array.isArray(config.shape)) {
+                    dimensionsText = config.shape.join('×');
+                } else {
+                    dimensionsText = config.shape || '';
+                }
+            }
+            dimensionsDisplay.textContent = dimensionsText;
+            console.log('Updated dimensions display');
+        }
+        
+        // Update the model to ensure propagation of changes
+        if (window.dragDrop) {
+            if (window.dragDrop.getNetworkArchitecture) {
+                const networkLayers = window.dragDrop.getNetworkArchitecture();
+                const layerIndex = networkLayers.layers.findIndex(layer => layer.id === nodeId);
+                
+                if (layerIndex !== -1) {
+                    networkLayers.layers[layerIndex].config = { ...config };
+                    if (parameters !== undefined) {
+                        networkLayers.layers[layerIndex].parameters = parameters;
+                    }
+                    
+                    // Update connections to propagate parameter changes to connected nodes
+                    if (window.dragDrop.updateConnections) {
+                        window.dragDrop.updateConnections();
+                    }
+                    
+                    // Update downstream nodes to propagate parameter changes through the network
+                    if (window.dragDrop.forceUpdateNetworkParameters) {
+                        console.log('Forcing network parameter update');
+                        
+                        // Add a small delay to ensure the current node update is complete
+                        setTimeout(() => {
+                            window.dragDrop.forceUpdateNetworkParameters();
+                            
+                            // Another update after a short delay for deeper propagation
+                            setTimeout(() => {
+                                window.dragDrop.updateConnections();
+                                console.log('Final connection update completed');
+                            }, 100);
+                        }, 50);
+                    }
+                    
+                    // Notify about the network update
+                    document.dispatchEvent(new CustomEvent('networkUpdated', {
+                        detail: networkLayers
+                    }));
+                    console.log('Dispatched networkUpdated event with updated model');
+                } else {
+                    console.warn(`Node ${nodeId} not found in network model layers`);
+                }
+            }
+            
+            // Force re-rendering of all connections
+            if (window.dragDrop.updateConnections) {
+                setTimeout(() => {
+                    window.dragDrop.updateConnections();
+                    console.log('Updated all connections after parameter change');
+                }, 50);
+            }
+        }
+        
+        console.log(`Completed update of node ${nodeId} with config:`, config);
+    }
+    
+    /**
+     * Format large numbers for display
+     */
+    function formatNumber(num) {
+        // Safety check for invalid values
+        if (num === null || num === undefined) return 'N/A';
+        if (num === 0) return '0';
+        
+        // Try to convert strings to numbers
+        if (typeof num === 'string') {
+            if (num === '?' || num.toLowerCase() === 'n/a') return 'N/A';
+            num = parseFloat(num);
+        }
+        
+        // Handle NaN
+        if (isNaN(num)) return 'N/A';
+        
+        // Format based on size
+        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';
+        
+        // Handle smaller numbers with decimal places
+        if (num < 1e3 && num % 1 !== 0) {
+            return num.toFixed(2);
+        }
+        
+        return num.toString();
+    }
+    
+    /**
+     * Helper function to manually recalculate Conv2D parameters
+     * This can be called from the console for debugging
+     */
+    function forceRecalculateConv2DParameters(nodeId) {
+        // If no ID provided, try to find all Conv2D nodes
+        if (!nodeId) {
+            const conv2dNodes = document.querySelectorAll('.canvas-node[data-type="conv"]');
+            if (conv2dNodes.length === 0) {
+                console.log('No Conv2D nodes found to update');
+                return;
+            }
+            
+            console.log(`Found ${conv2dNodes.length} Conv2D nodes to update`);
+            
+            // Update each Conv2D node
+            conv2dNodes.forEach(node => {
+                const id = node.getAttribute('data-id');
+                console.log(`Updating Conv2D node ${id}`);
+                forceRecalculateConv2DParameters(id);
+            });
+            return;
+        }
+        
+        // Find the specific node
+        const node = document.querySelector(`.canvas-node[data-id="${nodeId}"]`);
+        if (!node) {
+            console.error(`Node with ID ${nodeId} not found`);
+            return;
+        }
+        
+        // Check if it's a Conv2D node
+        const nodeType = node.getAttribute('data-type');
+        if (nodeType !== 'conv') {
+            console.error(`Node ${nodeId} is not a Conv2D node (type: ${nodeType})`);
+            return;
+        }
+        
+        // Get the current config
+        const config = node.layerConfig || {};
+        
+        // Force the update
+        console.log(`Forcing parameter recalculation for Conv2D node ${nodeId}`);
+        updateNodeWithConfig(node, 'conv', config);
+        
+        // If dragDrop is available, force a network update
+        if (window.dragDrop && window.dragDrop.forceUpdateNetworkParameters) {
+            setTimeout(() => {
+                window.dragDrop.forceUpdateNetworkParameters();
+            }, 100);
+        }
+    }
+    
+    // Expose helper function to window for debugging
+    window.forceRecalculateConv2DParameters = forceRecalculateConv2DParameters;
+})(); 

js/main.js

@@ -35,6 +35,66 @@ document.addEventListener('DOMContentLoaded', () => {
     // Listen for layer editor events
     document.addEventListener('openLayerEditor', handleOpenLayerEditor);
     
+    // Tab switching functionality
+    const tabButtons = document.querySelectorAll('.tab-button');
+    const tabContents = document.querySelectorAll('.tab-content');
+    
+    tabButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            // Get the tab data attribute
+            const tabId = button.getAttribute('data-tab');
+            
+            // Remove active class from all buttons and contents
+            tabButtons.forEach(btn => btn.classList.remove('active'));
+            tabContents.forEach(content => content.classList.remove('active'));
+            
+            // Add active class to the clicked button
+            button.classList.add('active');
+            
+            // Add active class to the corresponding content
+            const tabContent = document.getElementById(`${tabId}-tab`);
+            if (tabContent) {
+                tabContent.classList.add('active');
+                
+                // Dispatch a custom event to notify tab-specific scripts
+                document.dispatchEvent(new CustomEvent('tabSwitch', {
+                    detail: { tab: tabId }
+                }));
+            }
+        });
+    });
+    
+    // Modal functionality
+    const aboutLink = document.getElementById('about-link');
+    const guideLink = document.getElementById('guide-link');
+    const aboutModal = document.getElementById('about-modal');
+    const closeModalButtons = document.querySelectorAll('.close-modal');
+    
+    if (aboutLink && aboutModal) {
+        aboutLink.addEventListener('click', (e) => {
+            e.preventDefault();
+            aboutModal.style.display = 'flex';
+        });
+    }
+    
+    if (closeModalButtons) {
+        closeModalButtons.forEach(button => {
+            button.addEventListener('click', () => {
+                const modal = button.closest('.modal');
+                if (modal) {
+                    modal.style.display = 'none';
+                }
+            });
+        });
+    }
+    
+    // Close modals when clicking outside content
+    window.addEventListener('click', (e) => {
+        if (e.target.classList.contains('modal')) {
+            e.target.style.display = 'none';
+        }
+    });
+    
     // Setup UI controls and event listeners
     function setupUIControls() {
         // Learning rate slider
@@ -138,7 +198,22 @@ document.addEventListener('DOMContentLoaded', () => {
             // Save button
             const saveButton = layerEditorModal.querySelector('.save-layer-btn');
             if (saveButton) {
-                saveButton.addEventListener('click', saveLayerConfig);
+                saveButton.addEventListener('click', () => {
+                    // Get node reference from modal data attributes
+                    const nodeRef = layerEditorModal.getAttribute('data-node-reference');
+                    const nodeType = layerEditorModal.getAttribute('data-node-type');
+                    const nodeId = layerEditorModal.getAttribute('data-node-id');
+                    
+                    // Get actual DOM node using the ID
+                    const node = document.querySelector(`.canvas-node[data-id="${nodeId}"]`);
+                    
+                    if (node) {
+                        saveLayerConfig(node, nodeType, nodeId);
+                    }
+                    
+                    // Close the modal after saving
+                    closeModal(layerEditorModal);
+                });
             }
         }
     }
@@ -300,8 +375,14 @@ document.addEventListener('DOMContentLoaded', () => {
     // Handle opening the layer editor
     function handleOpenLayerEditor(e) {
         const node = e.detail.node;
-        const nodeType = node.getAttribute('data-type');
-        const layerId = node.getAttribute('data-id');
+        const nodeType = e.detail.type;
+        const layerId = e.detail.id;
+        
+        // Store information in the modal for later use
+        const layerEditorModal = document.getElementById('layer-editor-modal');
+        layerEditorModal.setAttribute('data-node-reference', layerId);
+        layerEditorModal.setAttribute('data-node-type', nodeType);
+        layerEditorModal.setAttribute('data-node-id', layerId);
         
         // Get current configuration
         const layerConfig = node.layerConfig || window.neuralNetwork.createNodeConfig(nodeType);
@@ -319,6 +400,9 @@ document.addEventListener('DOMContentLoaded', () => {
         // Clear previous form fields
         layerForm.innerHTML = '';
         
+        // Show modal
+        openModal(layerEditorModal);
+        
         // Create form fields based on layer type
         switch (nodeType) {
             case 'input':
@@ -698,34 +782,36 @@ document.addEventListener('DOMContentLoaded', () => {
             }
         }
         
-        // Add save and cancel buttons
-        layerForm.innerHTML += `
-            <div class="form-buttons">
-                <button type="button" id="save-layer-config" class="btn-primary">Save Changes</button>
-                <button type="button" id="cancel-layer-edit" class="btn-secondary">Cancel</button>
-            </div>
-        `;
-        
         // Open the modal
         const modal = document.getElementById('layer-editor-modal');
         if (modal) {
             openModal(modal);
             
-            // Add event listeners for buttons
-            const saveButton = document.getElementById('save-layer-config');
+            // Add event listeners for the buttons in the modal footer
+            const saveButton = modal.querySelector('.modal-footer .save-layer-btn');
             if (saveButton) {
-                saveButton.addEventListener('click', () => {
+                // Remove any existing event listeners
+                const newSaveButton = saveButton.cloneNode(true);
+                saveButton.parentNode.replaceChild(newSaveButton, saveButton);
+                
+                // Add new event listener
+                newSaveButton.addEventListener('click', () => {
                     saveLayerConfig(node, nodeType, layerId);
                     closeModal(modal);
                 });
             }
             
-            const cancelButton = document.getElementById('cancel-layer-edit');
-            if (cancelButton) {
-                cancelButton.addEventListener('click', () => {
+            const cancelButtons = modal.querySelectorAll('.modal-footer .close-modal');
+            cancelButtons.forEach(cancelButton => {
+                // Remove any existing event listeners
+                const newCancelButton = cancelButton.cloneNode(true);
+                cancelButton.parentNode.replaceChild(newCancelButton, cancelButton);
+                
+                // Add new event listener
+                newCancelButton.addEventListener('click', () => {
                     closeModal(modal);
                 });
-            }
+            });
         }
     }
     
@@ -976,12 +1062,50 @@ document.addEventListener('DOMContentLoaded', () => {
             networkLayers.layers[layerIndex].parameters = layerConfig.parameters;
         }
         
+        // Find all connections from this node and update target nodes
+        const connections = document.querySelectorAll(`.connection[data-source="${layerId}"]`);
+        connections.forEach(connection => {
+            const targetId = connection.getAttribute('data-target');
+            const targetNode = document.querySelector(`.canvas-node[data-id="${targetId}"]`);
+            
+            if (targetNode && targetNode.layerConfig) {
+                // Update target node's input shape based on this node's output shape
+                if (layerConfig.outputShape) {
+                    targetNode.layerConfig.inputShape = layerConfig.outputShape;
+                    
+                    // Recalculate parameters
+                    const targetType = targetNode.getAttribute('data-type');
+                    const newParams = window.neuralNetwork.calculateParameters(
+                        targetType,
+                        targetNode.layerConfig,
+                        layerConfig
+                    );
+                    
+                    if (newParams) {
+                        targetNode.layerConfig.parameters = newParams;
+                        
+                        // Update parameter display
+                        const paramsDisplay = targetNode.querySelector('.node-parameters');
+                        if (paramsDisplay) {
+                            paramsDisplay.textContent = `Params: ${formatNumber(newParams)}`;
+                        }
+                        
+                        // Update input shape display
+                        const inputShapeDisplay = targetNode.querySelector('.input-shape');
+                        if (inputShapeDisplay) {
+                            inputShapeDisplay.textContent = `[${targetNode.layerConfig.inputShape.join(' × ')}]`;
+                        }
+                    }
+                }
+            }
+        });
+        
         // Trigger network updated event
         const event = new CustomEvent('networkUpdated', { detail: networkLayers });
         document.dispatchEvent(event);
         
-        // Update connected nodes to propagate shape changes
-        updateNodeConnections(node, layerId);
+        // Update all connections to reflect the new shapes and positions
+        window.dragDrop.updateConnections();
     }
     
     // Helper function to update connections between nodes when shapes change

js/tab-manager.js

@@ -0,0 +1,283 @@
+// Tab Manager - Handles tab switching and ensures animations are properly initialized
+document.addEventListener('DOMContentLoaded', () => {
+    console.log('Tab Manager Initialized');
+    
+    const tabButtons = document.querySelectorAll('.tab-button');
+    const tabContents = document.querySelectorAll('.tab-content');
+    
+    // Current active tab
+    let currentTab = 'network-design'; // Default tab
+    
+    // Function to activate a tab
+    function activateTab(tabId) {
+        console.log(`Activating tab: ${tabId}`);
+        currentTab = tabId;
+        
+        // Remove active class from all buttons and contents
+        tabButtons.forEach(btn => btn.classList.remove('active'));
+        tabContents.forEach(content => content.classList.remove('active'));
+        
+        // Add active class to the requested tab button
+        const button = document.querySelector(`.tab-button[data-tab="${tabId}"]`);
+        if (button) {
+            button.classList.add('active');
+        }
+        
+        // Add active class to the corresponding content
+        const tabContent = document.getElementById(`${tabId}-tab`);
+        if (tabContent) {
+            tabContent.classList.add('active');
+        }
+        
+        // Dispatch a custom event to notify tab-specific scripts
+        document.dispatchEvent(new CustomEvent('tabSwitch', {
+            detail: { tab: tabId }
+        }));
+        
+        // Initialize canvas for the appropriate tab
+        initializeTabContent(tabId);
+    }
+    
+    // Function to initialize tab content, especially canvases
+    function initializeTabContent(tabId) {
+        let canvas, ctx;
+        
+        switch(tabId) {
+            case 'backpropagation':
+                canvas = document.getElementById('backprop-canvas');
+                if (canvas && typeof window.initBackpropCanvas === 'function') {
+                    console.log('Initializing backpropagation canvas');
+                    window.initBackpropCanvas();
+                } else {
+                    console.warn('Could not initialize backpropagation canvas');
+                }
+                break;
+                
+            case 'forward-propagation':
+                canvas = document.getElementById('forward-canvas');
+                if (canvas && typeof window.initForwardPropCanvas === 'function') {
+                    console.log('Initializing forward propagation canvas');
+                    window.initForwardPropCanvas();
+                } else {
+                    console.warn('Could not initialize forward propagation canvas');
+                    
+                    // Fallback - directly draw on canvas if found
+                    if (canvas) {
+                        ctx = canvas.getContext('2d');
+                        if (ctx) {
+                            // Set canvas size to match container
+                            const container = canvas.parentElement;
+                            if (container) {
+                                canvas.width = container.clientWidth;
+                                canvas.height = container.clientHeight;
+                            } else {
+                                canvas.width = 800;
+                                canvas.height = 400;
+                            }
+                            
+                            // Draw a placeholder network
+                            drawPlaceholderNetwork(ctx, canvas.width, canvas.height);
+                        }
+                    }
+                }
+                break;
+                
+            case 'background-animation':
+                canvas = document.getElementById('background-canvas');
+                if (canvas && typeof window.initBackgroundCanvas === 'function') {
+                    console.log('Initializing background animation canvas');
+                    window.initBackgroundCanvas();
+                } else {
+                    console.warn('Could not initialize background animation canvas');
+                    
+                    // Fallback - directly draw on canvas if found
+                    if (canvas) {
+                        ctx = canvas.getContext('2d');
+                        if (ctx) {
+                            // Set canvas size to match container
+                            const container = canvas.parentElement;
+                            if (container) {
+                                canvas.width = container.clientWidth;
+                                canvas.height = container.clientHeight;
+                            } else {
+                                canvas.width = 800;
+                                canvas.height = 400;
+                            }
+                            
+                            // Draw a placeholder animation
+                            drawPlaceholderNeurons(ctx, canvas.width, canvas.height);
+                        }
+                    }
+                }
+                break;
+        }
+    }
+    
+    // Helper function to draw a placeholder neural network
+    function drawPlaceholderNetwork(ctx, width, height) {
+        // Clear canvas
+        ctx.clearRect(0, 0, width, height);
+        
+        // Draw background
+        ctx.fillStyle = '#f8f9fa';
+        ctx.fillRect(0, 0, width, height);
+        
+        // Define network layout
+        const layers = [3, 4, 2]; // Input, hidden, output layers
+        const neuronRadius = 20;
+        const layerSpacing = width / (layers.length + 1);
+        
+        // Function to calculate neuron positions
+        function getNeuronPosition(layerIndex, neuronIndex, totalNeurons) {
+            const x = layerSpacing * (layerIndex + 1);
+            const layerHeight = totalNeurons * (neuronRadius * 2 + 10);
+            const startY = (height - layerHeight) / 2 + neuronRadius;
+            const y = startY + neuronIndex * (neuronRadius * 2 + 10);
+            return { x, y };
+        }
+        
+        // Draw connections first (so they appear behind neurons)
+        ctx.strokeStyle = '#aaa';
+        ctx.lineWidth = 1;
+        
+        // For each layer except the last
+        for (let layerIndex = 0; layerIndex < layers.length - 1; layerIndex++) {
+            const sourceLayer = layers[layerIndex];
+            const targetLayer = layers[layerIndex + 1];
+            
+            // Connect each neuron in source layer to each neuron in target layer
+            for (let sourceNeuron = 0; sourceNeuron < sourceLayer; sourceNeuron++) {
+                const source = getNeuronPosition(layerIndex, sourceNeuron, sourceLayer);
+                
+                for (let targetNeuron = 0; targetNeuron < targetLayer; targetNeuron++) {
+                    const target = getNeuronPosition(layerIndex + 1, targetNeuron, targetLayer);
+                    
+                    // Draw connection
+                    ctx.beginPath();
+                    ctx.moveTo(source.x, source.y);
+                    ctx.lineTo(target.x, target.y);
+                    ctx.stroke();
+                }
+            }
+        }
+        
+        // Draw neurons
+        const layerColors = ['#6495ED', '#7B68EE', '#9370DB']; // Different color for each layer
+        
+        for (let layerIndex = 0; layerIndex < layers.length; layerIndex++) {
+            const neuronsInLayer = layers[layerIndex];
+            
+            for (let neuronIndex = 0; neuronIndex < neuronsInLayer; neuronIndex++) {
+                const { x, y } = getNeuronPosition(layerIndex, neuronIndex, neuronsInLayer);
+                
+                // Draw neuron circle
+                ctx.beginPath();
+                ctx.arc(x, y, neuronRadius, 0, Math.PI * 2);
+                ctx.fillStyle = layerColors[layerIndex];
+                ctx.fill();
+                ctx.strokeStyle = '#fff';
+                ctx.lineWidth = 2;
+                ctx.stroke();
+            }
+        }
+        
+        // Add text to explain placeholder
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+        ctx.font = '18px Arial';
+        ctx.textAlign = 'center';
+        ctx.fillText('Animation Placeholder - Check Console for Errors', width/2, height - 30);
+    }
+    
+    // Helper function to draw placeholder neurons for background animation
+    function drawPlaceholderNeurons(ctx, width, height) {
+        // Clear canvas
+        ctx.clearRect(0, 0, width, height);
+        
+        // Draw background
+        ctx.fillStyle = '#f8f9fa';
+        ctx.fillRect(0, 0, width, height);
+        
+        // Create random neurons
+        const neurons = [];
+        const neuronCount = 50;
+        
+        for (let i = 0; i < neuronCount; i++) {
+            neurons.push({
+                x: Math.random() * width,
+                y: Math.random() * height,
+                radius: 3 + Math.random() * 5,
+                color: Math.random() > 0.8 ? '#6495ED' : '#aaaaaa'
+            });
+        }
+        
+        // Draw connections
+        ctx.strokeStyle = 'rgba(170, 170, 170, 0.3)';
+        ctx.lineWidth = 1;
+        
+        for (let i = 0; i < neurons.length; i++) {
+            const source = neurons[i];
+            
+            // Connect to nearby neurons
+            for (let j = i + 1; j < neurons.length; j++) {
+                const target = neurons[j];
+                const distance = Math.sqrt(
+                    Math.pow(target.x - source.x, 2) + 
+                    Math.pow(target.y - source.y, 2)
+                );
+                
+                // Only connect neurons that are close enough
+                if (distance < 100) {
+                    ctx.beginPath();
+                    ctx.moveTo(source.x, source.y);
+                    ctx.lineTo(target.x, target.y);
+                    ctx.stroke();
+                }
+            }
+        }
+        
+        // Draw neurons
+        neurons.forEach(neuron => {
+            ctx.beginPath();
+            ctx.arc(neuron.x, neuron.y, neuron.radius, 0, Math.PI * 2);
+            ctx.fillStyle = neuron.color;
+            ctx.fill();
+        });
+        
+        // Add text to explain placeholder
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+        ctx.font = '18px Arial';
+        ctx.textAlign = 'center';
+        ctx.fillText('Animation Placeholder - Check Console for Errors', width/2, height - 30);
+    }
+    
+    // Add event listeners to tab buttons
+    tabButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            const tabId = button.getAttribute('data-tab');
+            activateTab(tabId);
+        });
+    });
+    
+    // Export the activateTab function to window for access from other scripts
+    window.activateTab = activateTab;
+    
+    // Register initialization functions that each animation script should call
+    window.initBackpropCanvas = null;
+    window.initForwardPropCanvas = null;
+    window.initBackgroundCanvas = null;
+    
+    // Monitor tab visibility for better animation performance
+    document.addEventListener('visibilitychange', () => {
+        if (document.visibilityState === 'visible') {
+            console.log('Page is now visible, refreshing current tab:', currentTab);
+            // Re-initialize the current tab when the page becomes visible again
+            initializeTabContent(currentTab);
+        }
+    });
+    
+    // Check window resizing for canvas sizing
+    window.addEventListener('resize', () => {
+        console.log('Window resized, refreshing current tab:', currentTab);
+        initializeTabContent(currentTab);
+    });
+});