Update src/App.jsx

src/App.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { 
   Activity, 
   Settings, 
@@ -15,7 +15,9 @@ import {
   Maximize,
   Search,
   ZoomIn,
-  ZoomOut
+  ZoomOut,
+  Clock,
+  AlertTriangle
 } from 'lucide-react';
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 
@@ -135,46 +137,109 @@ const App = () => {
   const [isTraining, setIsTraining] = useState(false);
   const [trainingData, setTrainingData] = useState([]);
   const [learningRate, setLearningRate] = useState(0.001);
+  const [maxEpochs, setMaxEpochs] = useState(150);
+  const [simAlert, setSimAlert] = useState(null);
+  
   const [isDraggingNode, setIsDraggingNode] = useState(null);
   const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
   const [connectingFrom, setConnectingFrom] = useState(null);
   
   const canvasRef = useRef(null);
 
-  // --- SIMULATION ENGINE ---
-  const runTrainingStep = (epoch) => {
-    const hasInput = nodes.some(n => n.type === 'INPUT');
-    const hasOutput = nodes.some(n => n.type === 'OUTPUT');
-    if (!hasInput || !hasOutput) return null;
+  // --- ACCURATE SIMULATION ENGINE ---
 
-    let capacity = 0;
-    let vanishingGradientRisk = 1.0;
+  const findPath = (startType, endType) => {
+    const startNodes = nodes.filter(n => n.type === startType);
+    const endNodes = nodes.filter(n => n.type === endType);
     
-    nodes.forEach(n => {
-      if (n.type === 'EMBED') capacity += (n.config.dim || 512) * 0.1;
-      if (n.type === 'ATTN') capacity += (n.config.heads * n.config.headDim) * 0.5;
-      if (n.type === 'FFN') capacity += (n.config.mult * 512) * 0.3;
-      if (n.type === 'LSTM') {
-        capacity += (n.config.hidden || 512) * 0.4;
-        vanishingGradientRisk *= 0.85;
+    for (const start of startNodes) {
+      let visited = new Set();
+      let queue = [[start.id, []]];
+
+      while (queue.length > 0) {
+        const [currId, path] = queue.shift();
+        if (visited.has(currId)) continue;
+        visited.add(currId);
+
+        const currNode = nodes.find(n => n.id === currId);
+        const currentPath = [...path, currNode];
+
+        if (currNode.type === endType) return currentPath;
+
+        const nextConnections = connections.filter(c => c.from === currId);
+        for (const conn of nextConnections) {
+          queue.push([conn.to, currentPath]);
+        }
       }
-      if (n.type === 'NORM') vanishingGradientRisk = Math.min(1.0, vanishingGradientRisk + 0.2);
-      if (n.type === 'RESIDUAL') vanishingGradientRisk = Math.min(1.0, vanishingGradientRisk + 0.3);
+    }
+    return null;
+  };
+
+  const runTrainingStep = (epoch) => {
+    // 1. Trace the graph to find the active computation path
+    const activePath = findPath('INPUT', 'OUTPUT');
+
+    if (!activePath) {
+      setSimAlert("Broken Computation Path: Input cannot reach Output.");
+      return null;
+    }
+
+    setSimAlert(null);
+
+    // 2. Calculate Architectural Metrics
+    let depth = activePath.length;
+    let totalCapacity = 0;
+    let vanishingGradientRisk = 1.0;
+    let bottleneck = Infinity;
+
+    activePath.forEach(node => {
+      const type = node.type;
+      const cfg = node.config;
+
+      // Capacity based on hidden dimensions (Parameter scaling)
+      if (cfg.dim) totalCapacity += cfg.dim;
+      if (cfg.hidden) totalCapacity += cfg.hidden;
+      if (cfg.heads) totalCapacity += (cfg.heads * cfg.headDim);
+
+      // Bottleneck detection (Information Theory)
+      if (cfg.dim) bottleneck = Math.min(bottleneck, cfg.dim);
+
+      // Gradient stability factors
+      if (type === 'LSTM') vanishingGradientRisk *= 0.95; // LSTM helps but still RNN
+      if (type === 'ATTN' || type === 'MAMBA') vanishingGradientRisk *= 0.99; // Very stable
+      if (type === 'NORM') vanishingGradientRisk = Math.min(1.0, vanishingGradientRisk * 1.5);
+      if (type === 'RESIDUAL') vanishingGradientRisk = Math.min(1.0, vanishingGradientRisk * 1.8);
     });
 
-    const trainability = Math.max(0.1, (capacity / 500) * vanishingGradientRisk);
-    const noise = (Math.random() - 0.5) * 0.05;
-    const lrFactor = learningRate > 0.01 ? (0.5 + Math.random()) : 1.0;
+    // 3. Realistic Training Physics
+    // A. Learning Rate Explosion
+    if (learningRate > 0.04 && Math.random() > 0.95) {
+      setSimAlert("Gradient Explosion: Learning rate too high!");
+      return { epoch, loss: (Math.random() * 10 + 5).toFixed(4), accuracy: "0.0000" };
+    }
+
+    // B. Vanishing Gradients
+    // Probability of effective training decreases with depth unless stabilized
+    const effectiveLearningPower = learningRate * Math.pow(vanishingGradientRisk, depth / 2);
+
+    // C. Capacity vs Complexity
+    // If bottleneck < 128, the model "underfits" (cannot reach low loss)
+    const floorLoss = bottleneck < 128 ? 1.5 : 0.05;
+
+    // D. The Loss Function (Log-Space Convergence)
+    const prevLoss = trainingData.length > 0 ? parseFloat(trainingData[trainingData.length-1].loss) : 8.0;
+    
+    // Convergence speed depends on architecture efficiency
+    const delta = (prevLoss - floorLoss) * effectiveLearningPower * 5;
+    const noise = (Math.random() - 0.5) * (0.02 / (epoch + 1));
     
-    const baseLoss = 8.0;
-    const decay = 0.05 * trainability * (1 / lrFactor);
-    const loss = baseLoss * Math.exp(-decay * epoch) + (0.2 / (epoch + 1)) + noise;
-    const acc = Math.min(0.99, 1 - (loss / baseLoss) + (Math.random() * 0.02));
+    const newLoss = Math.max(floorLoss, prevLoss - delta + noise);
+    const newAcc = Math.min(0.99, 1 - (newLoss / 8) + (Math.random() * 0.01));
 
     return {
       epoch,
-      loss: Math.max(0, loss).toFixed(4),
-      accuracy: Math.max(0, acc).toFixed(4)
+      loss: newLoss.toFixed(4),
+      accuracy: newAcc.toFixed(4)
     };
   };
 
@@ -184,14 +249,21 @@ const App = () => {
       interval = setInterval(() => {
         setTrainingData(prev => {
           const nextEpoch = prev.length;
-          if (nextEpoch > 150) { setIsTraining(false); return prev; }
+          if (nextEpoch >= maxEpochs) { 
+            setIsTraining(false); 
+            return prev; 
+          }
           const step = runTrainingStep(nextEpoch);
+          if (!step) {
+            setIsTraining(false);
+            return prev;
+          }
           return [...prev, step];
         });
-      }, 150);
+      }, 100);
     }
     return () => clearInterval(interval);
-  }, [isTraining, nodes, connections, learningRate]);
+  }, [isTraining, nodes, connections, learningRate, maxEpochs, trainingData]);
 
   // --- INTERACTION HANDLERS ---
   const handleWheel = (e) => {
@@ -205,7 +277,6 @@ const App = () => {
     const newNode = {
       id: `n${Date.now()}`,
       type,
-      // Place node relative to current view center and zoom
       x: (-viewOffset.x + 100) / zoom,
       y: (-viewOffset.y + 100) / zoom,
       config: { ...BLOCK_TYPES[type].config }
@@ -236,7 +307,6 @@ const App = () => {
     if (connectingFrom) return;
     setIsDraggingNode(id);
     const node = nodes.find(n => n.id === id);
-    // Dragging logic needs to account for zoom
     setDragOffset({ x: e.clientX / zoom - node.x, y: e.clientY / zoom - node.y });
     setSelectedNodeId(id);
   };
@@ -287,21 +357,24 @@ const App = () => {
   const gridSize = 24 * zoom;
   const gridOffsetX = viewOffset.x % gridSize;
   const gridOffsetY = viewOffset.y % gridSize;
+  
+  const currentEpoch = trainingData.length;
+  const trainingProgress = (currentEpoch / maxEpochs) * 100;
 
   return (
     <div className="flex flex-col h-screen w-screen bg-slate-950 text-slate-100 overflow-hidden font-sans">
       {/* Header */}
       <header className="h-16 border-b border-slate-800 flex items-center justify-between px-6 bg-slate-900/50 backdrop-blur-md z-20">
         <div className="flex items-center gap-3">
-          <div className="p-2 bg-indigo-500 rounded-lg">
+          <div className="p-2 bg-indigo-500 rounded-lg shadow-[0_0_15px_rgba(99,102,241,0.4)]">
             <Layers size={20} className="text-white" />
           </div>
-          <h1 className="text-lg font-bold tracking-tight">Arch-Sim <span className="text-slate-500 font-normal">v1.2</span></h1>
+          <h1 className="text-lg font-bold tracking-tight">Arch-Sim <span className="text-slate-500 font-normal">v2.0 Accurate</span></h1>
         </div>
         
         <div className="flex items-center gap-4">
           <div className="flex items-center bg-slate-800 rounded-full px-4 py-1.5 gap-3 border border-slate-700">
-            <span className="text-xs text-slate-400 uppercase font-semibold">LR</span>
+            <span className="text-[10px] text-slate-400 uppercase font-bold tracking-wider">LR</span>
             <input 
               type="range" 
               min="0.0001" 
@@ -309,9 +382,24 @@ const App = () => {
               step="0.0001" 
               value={learningRate} 
               onChange={(e) => setLearningRate(parseFloat(e.target.value))}
-              className="w-24 accent-indigo-500"
+              className="w-20 accent-indigo-500"
+            />
+            <span className="text-[11px] font-mono text-indigo-300 w-10">{learningRate}</span>
+          </div>
+
+          <div className="flex items-center bg-slate-800 rounded-full px-4 py-1.5 gap-3 border border-slate-700">
+            <Clock size={12} className="text-slate-400" />
+            <span className="text-[10px] text-slate-400 uppercase font-bold tracking-wider whitespace-nowrap">Max Epochs</span>
+            <input 
+              type="range" 
+              min="50" 
+              max="1000" 
+              step="50" 
+              value={maxEpochs} 
+              onChange={(e) => setMaxEpochs(parseInt(e.target.value))}
+              className="w-20 accent-indigo-500"
             />
-            <span className="text-xs font-mono w-12">{learningRate}</span>
+            <span className="text-[11px] font-mono text-indigo-300 w-8">{maxEpochs}</span>
           </div>
           
           <button 
@@ -322,11 +410,11 @@ const App = () => {
                 setIsTraining(true);
               }
             }}
-            className={`flex items-center gap-2 px-5 py-2 rounded-lg font-medium transition-all ${
-              isTraining ? 'bg-red-500 hover:bg-red-600' : 'bg-emerald-500 hover:bg-emerald-600'
+            className={`flex items-center gap-2 px-5 py-2 rounded-lg font-medium transition-all shadow-lg ${
+              isTraining ? 'bg-red-500 hover:bg-red-600 shadow-red-500/20' : 'bg-emerald-500 hover:bg-emerald-600 shadow-emerald-500/20'
             }`}
           >
-            {isTraining ? <><Square size={16} fill="currentColor" /> Stop</> : <><Play size={16} fill="currentColor" /> Start Training</>}
+            {isTraining ? <><Square size={14} fill="currentColor" /> Stop</> : <><Play size={14} fill="currentColor" /> Train</>}
           </button>
         </div>
       </header>
@@ -335,7 +423,7 @@ const App = () => {
         {/* Sidebar: Blocks Palette */}
         <aside className="w-64 border-r border-slate-800 bg-slate-900/30 p-4 flex flex-col gap-6 overflow-y-auto z-10">
           <div>
-            <h3 className="text-xs font-bold text-slate-500 uppercase tracking-widest mb-4">Components</h3>
+            <h3 className="text-xs font-bold text-slate-500 uppercase tracking-widest mb-4">Architecture Blocks</h3>
             <div className="grid grid-cols-1 gap-2">
               {Object.entries(BLOCK_TYPES).map(([key, type]) => (
                 <button
@@ -377,6 +465,14 @@ const App = () => {
             }}
           />
 
+          {/* Alert Message */}
+          {simAlert && (
+            <div className="absolute top-6 left-1/2 -translate-x-1/2 bg-red-500/90 text-white px-4 py-2 rounded-full flex items-center gap-2 text-sm font-bold shadow-2xl z-50 animate-bounce">
+              <AlertTriangle size={16} />
+              {simAlert}
+            </div>
+          )}
+
           {/* Viewport Transform Container */}
           <div 
             className="absolute inset-0 pointer-events-none"
@@ -408,7 +504,7 @@ const App = () => {
                     <path
                       d={`M ${x1} ${y1} C ${x1 + dx} ${y1}, ${x2 - dx} ${y2}, ${x2} ${y2}`}
                       stroke="transparent"
-                      strokeWidth={20 / zoom} // Adjust hit area based on zoom
+                      strokeWidth={20 / zoom}
                       fill="none"
                       onClick={(e) => { e.stopPropagation(); deleteConnection(conn.id); }}
                     />
@@ -436,13 +532,13 @@ const App = () => {
                   key={node.id}
                   style={{ left: node.x, top: node.y }}
                   onMouseDown={(e) => handleNodeMouseDown(e, node.id)}
-                  className={`absolute w-40 p-4 rounded-xl border-2 transition-shadow cursor-move select-none pointer-events-auto ${
-                    isSelected ? 'border-indigo-500 bg-slate-800 shadow-[0_0_25px_rgba(99,102,241,0.2)]' : 'border-slate-800 bg-slate-900/90'
+                  className={`absolute w-40 p-4 rounded-xl border-2 transition-all cursor-move select-none pointer-events-auto ${
+                    isSelected ? 'border-indigo-500 bg-slate-800 shadow-[0_0_35px_rgba(99,102,241,0.3)]' : 'border-slate-800 bg-slate-900/90'
                   }`}
                 >
                   <div className="flex justify-between items-start mb-2">
                     <div className={`w-8 h-8 rounded-lg ${type.color} flex items-center justify-center shadow-lg mb-2`}>
-                       <Cpu size={14} />
+                        <Cpu size={14} />
                     </div>
                     {isSelected && (
                       <button onClick={(e) => { e.stopPropagation(); deleteNode(node.id); }} className="text-slate-500 hover:text-red-400">
@@ -454,16 +550,14 @@ const App = () => {
                   <h4 className="text-xs font-bold uppercase tracking-wide truncate">{type.label}</h4>
                   <div className="text-[10px] text-slate-500 mb-4">{node.id}</div>
 
-                  {/* Input Port */}
                   {type.inputs > 0 && (
                     <div 
                       onMouseUp={(e) => endConnection(e, node.id)}
-                      className={`absolute -left-3 top-1/2 -translate-y-1/2 w-6 h-6 rounded-full bg-slate-800 border-2 ${connectingFrom ? 'border-yellow-400 animate-pulse' : 'border-indigo-500'} flex items-center justify-center hover:bg-indigo-500 cursor-pointer z-30`}
+                      className={`absolute -left-3 top-1/2 -translate-y-1/2 w-6 h-6 rounded-full bg-slate-800 border-2 ${connectingFrom ? 'border-yellow-400 animate-pulse scale-125' : 'border-indigo-500'} flex items-center justify-center hover:bg-indigo-500 cursor-pointer z-30 transition-transform`}
                     >
                       <div className="w-1.5 h-1.5 bg-white rounded-full" />
                     </div>
                   )}
-                  {/* Output Port */}
                   {type.outputs > 0 && (
                     <div 
                       onMouseDown={(e) => startConnection(e, node.id)}
@@ -483,7 +577,6 @@ const App = () => {
               <button 
                 onClick={resetView}
                 className="p-3 bg-slate-900 border border-slate-700 rounded-lg hover:bg-slate-800 transition-colors shadow-xl text-slate-400 flex items-center gap-2"
-                title="Reset View"
               >
                 <Maximize size={18} />
                 <span className="text-[10px] font-bold uppercase tracking-widest">{Math.round(zoom * 100)}%</span>
@@ -501,20 +594,30 @@ const App = () => {
                 <ZoomOut size={18} />
               </button>
             </div>
-            <div className="p-3 bg-slate-900/80 border border-slate-700 rounded-lg shadow-xl text-[10px] text-slate-400 flex items-center gap-2">
-              <Search size={14} /> Scroll to zoom, Drag background to pan
-            </div>
           </div>
         </div>
 
         {/* Right Sidebar: Config & Monitoring */}
         <aside className="w-80 border-l border-slate-800 bg-slate-900/50 flex flex-col z-10">
-          <div className="h-1/2 p-6 flex flex-col border-b border-slate-800">
-            <div className="flex items-center gap-2 mb-4 text-slate-400 uppercase text-xs font-bold tracking-widest">
-              <Activity size={14} /> Training Metrics
+          <div className="h-[55%] p-6 flex flex-col border-b border-slate-800 overflow-hidden">
+            <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center gap-2 text-slate-400 uppercase text-xs font-bold tracking-widest">
+                <Activity size={14} /> Training Metrics
+              </div>
+              <div className="text-[10px] font-mono text-slate-500 uppercase">
+                Epoch {currentEpoch}/{maxEpochs}
+              </div>
+            </div>
+
+            {/* Progress Bar */}
+            <div className="w-full h-1.5 bg-slate-800 rounded-full mb-4 overflow-hidden">
+              <div 
+                className="h-full bg-indigo-500 transition-all duration-300 shadow-[0_0_10px_rgba(99,102,241,0.5)]" 
+                style={{ width: `${trainingProgress}%` }}
+              />
             </div>
             
-            <div className="flex-1 bg-slate-900 rounded-xl p-2 border border-slate-800 overflow-hidden">
+            <div className="flex-1 bg-slate-900 rounded-xl p-2 border border-slate-800 overflow-hidden relative">
               {trainingData.length > 0 ? (
                 <ResponsiveContainer width="100%" height="100%">
                   <LineChart data={trainingData}>
@@ -529,8 +632,8 @@ const App = () => {
                   </LineChart>
                 </ResponsiveContainer>
               ) : (
-                <div className="h-full flex flex-col items-center justify-center text-slate-600 italic text-sm text-center">
-                  Simulation idle.
+                <div className="h-full flex flex-col items-center justify-center text-slate-600 italic text-xs text-center p-4">
+                  Simulation idle. Ensure INPUT is linked to OUTPUT and click Train.
                 </div>
               )}
             </div>
@@ -551,9 +654,9 @@ const App = () => {
             </div>
           </div>
 
-          <div className="h-1/2 p-6 overflow-y-auto">
+          <div className="flex-1 p-6 overflow-y-auto">
             <div className="flex items-center gap-2 mb-6 text-slate-400 uppercase text-xs font-bold tracking-widest">
-              <Settings size={14} /> {selectedNode ? 'Block Config' : 'Project Info'}
+              <Settings size={14} /> {selectedNode ? 'Block Parameters' : 'Sim Intelligence'}
             </div>
 
             {selectedNode ? (
@@ -588,9 +691,10 @@ const App = () => {
               </div>
             ) : (
               <div className="space-y-4">
-                <div className="p-4 bg-slate-800/30 rounded-xl border border-slate-700/50 text-xs text-slate-400 space-y-3">
-                  <p><strong className="text-slate-300">Navigation:</strong> Click and drag the background to pan. <span className="text-indigo-400 font-bold">Use mouse wheel to zoom.</span></p>
-                  <p><strong className="text-slate-300">Infinite Grid:</strong> The canvas background scales and repeats automatically as you navigate.</p>
+                <div className="p-4 bg-slate-800/30 rounded-xl border border-slate-700/50 text-xs text-slate-400 space-y-3 leading-relaxed">
+                  <p><strong className="text-slate-200 block mb-1">Graph Dependency:</strong> Training logic now uses a BFS trace. If a node isn't part of the direct path from Data In to Data Out, its parameters won't contribute to capacity.</p>
+                  <p><strong className="text-slate-200 block mb-1">Architecture Physics:</strong> Adding layers increases depth, which increases the risk of Vanishing Gradients unless you add <span className="text-cyan-400">Residual</span> or <span className="text-slate-300">Norm</span> blocks.</p>
+                  <p><strong className="text-slate-200 block mb-1">Convergence:</strong> The loss floor is determined by the "bottleneck" (the smallest hidden dimension in your path).</p>
                 </div>
               </div>
             )}
@@ -600,17 +704,27 @@ const App = () => {
 
       <footer className="h-10 border-t border-slate-800 bg-slate-900/80 px-4 flex items-center justify-between text-[10px] text-slate-500 uppercase tracking-widest font-semibold">
         <div className="flex gap-4">
-          <span>Blocks: {nodes.length}</span>
-          <span>Links: {connections.length}</span>
-          <span>Zoom: {(zoom * 100).toFixed(0)}%</span>
+          <span>Active Nodes: {nodes.length}</span>
+          <span>Valid Path: {findPath('INPUT', 'OUTPUT') ? 'YES' : 'NO'}</span>
+          <span>LR: {learningRate}</span>
         </div>
-        <div>Educational Arch-Sim Environment</div>
+        <div>Scientific Arch-Sim Engine v2.0</div>
       </footer>
 
       <style>{`
         @keyframes dash {
           to { stroke-dashoffset: -12; }
         }
+        input[type="range"]::-webkit-slider-thumb {
+          -webkit-appearance: none;
+          appearance: none;
+          width: 12px;
+          height: 12px;
+          background: #6366f1;
+          border-radius: 50%;
+          cursor: pointer;
+          box-shadow: 0 0 10px rgba(99,102,241,0.5);
+        }
       `}</style>
     </div>
   );