Feature: Real-Time Highway Hazard Evasion Canvas Simulator (ProKope <25ms vs Cloud LLM 1.2s lag)

index.html

@@ -455,12 +455,93 @@
       border-radius: 3px;
       transition: width 0.4s ease;
     }
-
     .prim-desc {
       font-size: 11px;
       color: var(--text-muted);
     }
 
+    /* AUTONOMOUS AGENT SIMULATOR */
+    .agent-sim-card {
+      background: var(--bg-card);
+      border: 1px solid var(--border-accent);
+      border-radius: 20px;
+      padding: 32px;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 229, 255, 0.08);
+      margin-bottom: 80px;
+    }
+    .canvas-container {
+      position: relative;
+      width: 100%;
+      background: #06090f;
+      border: 1px solid rgba(0, 229, 255, 0.25);
+      border-radius: 14px;
+      overflow: hidden;
+      margin: 20px 0;
+      box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.85);
+    }
+    #simCanvas {
+      width: 100%;
+      height: auto;
+      display: block;
+      cursor: crosshair;
+    }
+    .sim-mode-toggle {
+      display: inline-flex;
+      background: rgba(0, 0, 0, 0.55);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      padding: 4px;
+      gap: 6px;
+    }
+    .mode-btn {
+      padding: 8px 16px;
+      border-radius: 7px;
+      border: none;
+      font-size: 13px;
+      font-weight: 600;
+      cursor: pointer;
+      color: var(--text-muted);
+      background: transparent;
+      transition: all 0.2s;
+    }
+    .mode-btn.active-prokope {
+      background: linear-gradient(135deg, var(--blue), var(--cyan));
+      color: #000;
+      font-weight: 700;
+      box-shadow: 0 0 15px var(--cyan-glow);
+    }
+    .mode-btn.active-cloud {
+      background: linear-gradient(135deg, #d50000, #ff5252);
+      color: #fff;
+      font-weight: 700;
+      box-shadow: 0 0 15px rgba(255, 23, 68, 0.4);
+    }
+    .agent-hud {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 14px;
+      background: rgba(0, 0, 0, 0.35);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 16px 20px;
+    }
+    .hud-stat-title {
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 0.8px;
+      color: var(--text-muted);
+      margin-bottom: 4px;
+    }
+    .hud-stat-val {
+      font-family: 'Outfit', sans-serif;
+      font-size: 17px;
+      font-weight: 700;
+      color: #fff;
+    }
+    @media (max-width: 768px) {
+      .agent-hud { grid-template-columns: repeat(2, 1fr); }
+    }
+
     /* LEADERBOARD TABLE */
     .table-container {
       background: var(--bg-card);
@@ -669,6 +750,59 @@
       </div>
     </section>
 
+    <!-- REAL-TIME EDGE AGENT SIMULATOR -->
+    <section>
+      <div class="section-header">
+        <div class="badge" style="margin-bottom: 12px;">
+          <span class="badge-dot"></span> Edge Robotics &amp; Closed-Loop Control
+        </div>
+        <h3>Real-Time Highway Hazard Evasion Simulator</h3>
+        <p>Witness why 20ms System 1 decision models can pilot high-speed autonomous agents where cloud LLMs crash.</p>
+      </div>
+
+      <div class="agent-sim-card">
+        <div class="sim-top">
+          <div>
+            <div class="sim-title">
+              <span style="color: var(--cyan)">🏎️</span> Highway Collision Avoidance Vector
+            </div>
+            <p style="font-size: 13px; color: var(--text-muted); margin-top: 4px;">Click any lane on the road to manually spawn hazard roadblocks.</p>
+          </div>
+          <div style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
+            <div class="sim-mode-toggle">
+              <button class="mode-btn active-prokope" id="btn-mode-prokope" onclick="setAgentMode('prokope')">⚡ ProKope-421M (&lt;25ms)</button>
+              <button class="mode-btn" id="btn-mode-cloud" onclick="setAgentMode('cloud')">⏳ Cloud LLM (1.2s Lag)</button>
+            </div>
+            <button class="scenario-btn" onclick="spawnHazardManual()">⚠️ Drop Hazard</button>
+            <button class="scenario-btn" onclick="resetAgentSim()">🔄 Reset</button>
+          </div>
+        </div>
+
+        <div class="canvas-container">
+          <canvas id="simCanvas" width="860" height="320"></canvas>
+        </div>
+
+        <div class="agent-hud">
+          <div>
+            <div class="hud-stat-title">Decision Latency</div>
+            <div class="hud-stat-val" id="hud-latency" style="color: var(--cyan);">&lt;21.4 ms</div>
+          </div>
+          <div>
+            <div class="hud-stat-title">Choice (Maneuver)</div>
+            <div class="hud-stat-val" id="hud-choice">Lane 2 (Cruising)</div>
+          </div>
+          <div>
+            <div class="hud-stat-title">Noul (Collision Hazard)</div>
+            <div class="hud-stat-val" id="hud-noul" style="color: #00e676;">CLEAR (0.021)</div>
+          </div>
+          <div>
+            <div class="hud-stat-title">Score (Throttle / Speed)</div>
+            <div class="hud-stat-val" id="hud-score" style="color: #ffd700;">0.850 (65 MPH)</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
     <!-- BENCHMARK TABLE -->
     <section>
       <div class="section-header">
@@ -935,6 +1069,455 @@
 
     // Initialize with first scenario
     setScenario(0);
+
+    // =========================================================================
+    // REAL-TIME HIGHWAY HAZARD EVASION SIMULATOR (SYSTEM 1 CLOSED-LOOP ENGINE)
+    // =========================================================================
+    const canvas = document.getElementById('simCanvas');
+    const ctx = canvas.getContext('2d');
+
+    let agentMode = 'prokope'; // 'prokope' or 'cloud'
+    let roadOffset = 0;
+    let frameCount = 0;
+    let obstacles = [];
+    let particles = [];
+    let explosions = [];
+    let screenShake = 0;
+    let cloudTimer = 0; // frames delayed
+    let cloudState = 'normal'; // 'normal', 'thinking', 'crashed'
+    let cloudProgress = 0;
+
+    const lanes = [65, 160, 255]; // Y coordinates of lane centers
+
+    const car = {
+      x: 120,
+      y: 160,
+      lane: 1,
+      targetLane: 1,
+      width: 62,
+      height: 32,
+      speed: 65,
+      isCrashed: false
+    };
+
+    function setAgentMode(mode) {
+      agentMode = mode;
+      document.getElementById('btn-mode-prokope').className = mode === 'prokope' ? 'mode-btn active-prokope' : 'mode-btn';
+      document.getElementById('btn-mode-cloud').className = mode === 'cloud' ? 'mode-btn active-cloud' : 'mode-btn';
+      resetAgentSim();
+    }
+
+    function resetAgentSim() {
+      obstacles = [];
+      particles = [];
+      explosions = [];
+      car.lane = 1;
+      car.targetLane = 1;
+      car.y = lanes[1];
+      car.isCrashed = false;
+      cloudTimer = 0;
+      cloudState = 'normal';
+      cloudProgress = 0;
+      updateHud();
+    }
+
+    function spawnHazard(laneIdx, customX = 880) {
+      obstacles.push({
+        x: customX,
+        y: lanes[laneIdx],
+        lane: laneIdx,
+        width: 44,
+        height: 32,
+        passed: false,
+        evaluated: false
+      });
+    }
+
+    function spawnHazardManual() {
+      // Spawn hazard in current lane of the car
+      spawnHazard(car.lane, 860);
+    }
+
+    // Canvas click to spawn hazard in specific lane
+    canvas.addEventListener('click', (e) => {
+      const rect = canvas.getBoundingClientRect();
+      const scaleY = canvas.height / rect.height;
+      const clickY = (e.clientY - rect.top) * scaleY;
+      let clickedLane = 1;
+      if (clickY < 110) clickedLane = 0;
+      else if (clickY > 210) clickedLane = 2;
+      spawnHazard(clickedLane, 860);
+    });
+
+    function updateHud() {
+      const latEl = document.getElementById('hud-latency');
+      const choEl = document.getElementById('hud-choice');
+      const nouEl = document.getElementById('hud-noul');
+      const scoEl = document.getElementById('hud-score');
+
+      if (agentMode === 'prokope') {
+        latEl.style.color = 'var(--cyan)';
+        latEl.innerText = '<21.4 ms';
+        choEl.innerText = `Lane ${car.targetLane + 1} (${car.lane !== car.targetLane ? 'Evasion Vector' : 'Cruising'})`;
+        nouEl.style.color = car.isCrashed ? '#ff1744' : (car.lane !== car.targetLane ? '#ffd700' : '#00e676');
+        nouEl.innerText = car.isCrashed ? 'CRASH (0.999)' : (car.lane !== car.targetLane ? 'HAZARD: EVADING (0.994)' : 'CLEAR (0.012)');
+        scoEl.innerText = `0.850 (${car.speed} MPH)`;
+      } else {
+        if (cloudState === 'thinking') {
+          latEl.style.color = '#ff9100';
+          latEl.innerText = '1,200 ms (Awaiting Tokens...)';
+          choEl.innerText = 'STREAMING JSON...';
+          nouEl.style.color = '#ff9100';
+          nouEl.innerText = 'PROCESSING (Pending)';
+          scoEl.innerText = '0.000 (Stalled)';
+        } else if (cloudState === 'crashed') {
+          latEl.style.color = '#ff1744';
+          latEl.innerText = '1,240 ms (Reaction Failed)';
+          choEl.innerText = '💥 IMPACT CRASH';
+          nouEl.style.color = '#ff1744';
+          nouEl.innerText = 'FATAL BREACH';
+          scoEl.innerText = '0.000 (Impact)';
+        } else {
+          latEl.style.color = '#ff9100';
+          latEl.innerText = '~1,200 ms (Cloud SLA)';
+          choEl.innerText = `Lane ${car.lane + 1} (Cruising)`;
+          nouEl.style.color = '#00e676';
+          nouEl.innerText = 'CLEAR (0.015)';
+          scoEl.innerText = `0.850 (${car.speed} MPH)`;
+        }
+      }
+    }
+
+    function createExplosion(x, y) {
+      screenShake = 16;
+      for (let i = 0; i < 35; i++) {
+        const angle = Math.random() * Math.PI * 2;
+        const spd = 2 + Math.random() * 6;
+        explosions.push({
+          x: x,
+          y: y,
+          vx: Math.cos(angle) * spd,
+          vy: Math.sin(angle) * spd,
+          radius: 2 + Math.random() * 4,
+          life: 1.0,
+          color: Math.random() > 0.4 ? '#ff1744' : '#ff9100'
+        });
+      }
+    }
+
+    function loop() {
+      frameCount++;
+      roadOffset = (roadOffset + 8) % 40;
+
+      // Screen shake damping
+      let offsetX = 0;
+      let offsetY = 0;
+      if (screenShake > 0) {
+        offsetX = (Math.random() - 0.5) * screenShake;
+        offsetY = (Math.random() - 0.5) * screenShake;
+        screenShake *= 0.85;
+        if (screenShake < 0.5) screenShake = 0;
+      }
+
+      ctx.save();
+      ctx.translate(offsetX, offsetY);
+
+      // Clear canvas
+      ctx.fillStyle = '#06090f';
+      ctx.fillRect(-20, -20, canvas.width + 40, canvas.height + 40);
+
+      // Draw road asphalt
+      ctx.fillStyle = '#0b0f19';
+      ctx.fillRect(0, 10, canvas.width, 300);
+
+      // Road outer border lines
+      ctx.strokeStyle = 'rgba(0, 229, 255, 0.4)';
+      ctx.lineWidth = 3;
+      ctx.shadowBlur = 8;
+      ctx.shadowColor = 'var(--cyan)';
+      ctx.beginPath();
+      ctx.moveTo(0, 10);
+      ctx.lineTo(canvas.width, 10);
+      ctx.moveTo(0, 310);
+      ctx.lineTo(canvas.width, 310);
+      ctx.stroke();
+      ctx.shadowBlur = 0;
+
+      // Dashed lane dividers
+      ctx.strokeStyle = 'rgba(255, 255, 255, 0.15)';
+      ctx.lineWidth = 2;
+      ctx.setLineDash([25, 20]);
+      ctx.lineDashOffset = -roadOffset;
+      ctx.beginPath();
+      ctx.moveTo(0, 110);
+      ctx.lineTo(canvas.width, 110);
+      ctx.moveTo(0, 210);
+      ctx.lineTo(canvas.width, 210);
+      ctx.stroke();
+      ctx.setLineDash([]);
+
+      // Auto-spawn obstacles
+      if (frameCount % 130 === 0 && !car.isCrashed) {
+        // Pick a random lane
+        const randLane = Math.floor(Math.random() * 3);
+        spawnHazard(randLane);
+      }
+
+      // Smooth vehicle lane interpolation
+      const targetY = lanes[car.targetLane];
+      if (!car.isCrashed) {
+        car.y += (targetY - car.y) * 0.16;
+        if (Math.abs(car.y - targetY) < 1.5) {
+          car.lane = car.targetLane;
+        }
+      }
+
+      // Exhaust particles
+      if (!car.isCrashed && frameCount % 2 === 0) {
+        particles.push({
+          x: car.x - 28,
+          y: car.y + (Math.random() - 0.5) * 6,
+          vx: -(3 + Math.random() * 2),
+          vy: (Math.random() - 0.5) * 1.5,
+          life: 1.0,
+          color: agentMode === 'prokope' ? 'rgba(0, 229, 255,' : 'rgba(255, 82, 82,'
+        });
+      }
+
+      // Draw & update exhaust particles
+      for (let i = particles.length - 1; i >= 0; i--) {
+        const p = particles[i];
+        p.x += p.vx;
+        p.y += p.vy;
+        p.life -= 0.05;
+        if (p.life <= 0) {
+          particles.splice(i, 1);
+          continue;
+        }
+        ctx.fillStyle = `${p.color} ${p.life})`;
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, 2.5 * p.life, 0, Math.PI * 2);
+        ctx.fill();
+      }
+
+      // Sensor raycast logic
+      const sensorRange = 300;
+      let imminentHazard = null;
+
+      // Move & render obstacles
+      for (let i = obstacles.length - 1; i >= 0; i--) {
+        const obs = obstacles[i];
+        if (!car.isCrashed) {
+          obs.x -= 5.5;
+        }
+
+        // Check if obstacle is inside sensor cone (same lane, ahead of car)
+        if (obs.lane === car.targetLane && obs.x > car.x && obs.x < car.x + sensorRange) {
+          imminentHazard = obs;
+        }
+
+        // Collision check
+        const xDist = Math.abs(obs.x - car.x);
+        const yDist = Math.abs(obs.y - car.y);
+        if (xDist < 45 && yDist < 25 && !car.isCrashed) {
+          car.isCrashed = true;
+          createExplosion(car.x + 20, car.y);
+          if (agentMode === 'cloud') {
+            cloudState = 'crashed';
+          }
+          updateHud();
+          setTimeout(() => {
+            resetAgentSim();
+          }, 2400);
+        }
+
+        // Remove offscreen
+        if (obs.x < -60) {
+          obstacles.splice(i, 1);
+          continue;
+        }
+
+        // Draw Obstacle (Futuristic Cyber-Barrier)
+        ctx.fillStyle = '#ff1744';
+        ctx.shadowColor = 'rgba(255, 23, 68, 0.7)';
+        ctx.shadowBlur = 12;
+        ctx.beginPath();
+        if (ctx.roundRect) {
+          ctx.roundRect(obs.x - obs.width / 2, obs.y - obs.height / 2, obs.width, obs.height, 6);
+        } else {
+          ctx.rect(obs.x - obs.width / 2, obs.y - obs.height / 2, obs.width, obs.height);
+        }
+        ctx.fill();
+
+        // Hazard stripes on barrier
+        ctx.strokeStyle = '#ffffff';
+        ctx.lineWidth = 3;
+        ctx.beginPath();
+        ctx.moveTo(obs.x - 12, obs.y - 10);
+        ctx.lineTo(obs.x - 2, obs.y + 10);
+        ctx.moveTo(obs.x + 2, obs.y - 10);
+        ctx.lineTo(obs.x + 12, obs.y + 10);
+        ctx.stroke();
+        ctx.shadowBlur = 0;
+      }
+
+      // Autonomous Decision Making Engine
+      if (imminentHazard && !imminentHazard.evaluated && !car.isCrashed) {
+        if (agentMode === 'prokope') {
+          // PROKOPE: Sub-25ms Single Forward Pass Decision
+          imminentHazard.evaluated = true;
+          // Find safe lane: check which lane has no nearby obstacles
+          const candidateLanes = [0, 1, 2].filter(l => l !== car.targetLane);
+          // Score lanes by clearance
+          let bestLane = candidateLanes[0];
+          let maxClearance = -1;
+          for (let cand of candidateLanes) {
+            let clearance = 9999;
+            for (let o of obstacles) {
+              if (o.lane === cand && o.x > car.x - 50 && o.x < car.x + 500) {
+                const dist = Math.abs(o.x - car.x);
+                if (dist < clearance) clearance = dist;
+              }
+            }
+            if (clearance > maxClearance) {
+              maxClearance = clearance;
+              bestLane = cand;
+            }
+          }
+
+          // Execute immediate lane swerve
+          car.targetLane = bestLane;
+          updateHud();
+        } else {
+          // CLOUD MODE: Artificial 1.2s Autoregressive Delay
+          if (cloudState === 'normal') {
+            cloudState = 'thinking';
+            cloudProgress = 0;
+            cloudTimer = 55; // ~1.1s lag
+            updateHud();
+          }
+        }
+      }
+
+      // Handle cloud thinking progress
+      if (cloudState === 'thinking') {
+        cloudProgress += 1.8;
+        if (cloudProgress > 100) cloudProgress = 100;
+      }
+
+      // Draw Lidar / Radar Sensor Raycast
+      if (!car.isCrashed) {
+        ctx.save();
+        const beamColor = imminentHazard 
+          ? (agentMode === 'prokope' ? 'rgba(0, 230, 118, 0.25)' : 'rgba(255, 23, 68, 0.35)') 
+          : 'rgba(0, 229, 255, 0.12)';
+        ctx.fillStyle = beamColor;
+        ctx.beginPath();
+        ctx.moveTo(car.x + 30, car.y);
+        ctx.lineTo(car.x + sensorRange, car.y - 25);
+        ctx.lineTo(car.x + sensorRange, car.y + 25);
+        ctx.closePath();
+        ctx.fill();
+
+        // Sensor beam outline
+        ctx.strokeStyle = imminentHazard 
+          ? (agentMode === 'prokope' ? '#00e676' : '#ff1744') 
+          : 'rgba(0, 229, 255, 0.4)';
+        ctx.lineWidth = 1.5;
+        ctx.beginPath();
+        ctx.moveTo(car.x + 30, car.y);
+        ctx.lineTo(car.x + sensorRange, car.y);
+        ctx.stroke();
+        ctx.restore();
+      }
+
+      // Draw Car (Sleek Cyber-Coupe)
+      if (!car.isCrashed) {
+        ctx.save();
+        ctx.shadowColor = agentMode === 'prokope' ? 'rgba(0, 229, 255, 0.6)' : 'rgba(255, 82, 82, 0.6)';
+        ctx.shadowBlur = 14;
+
+        // Main Car Body
+        ctx.fillStyle = agentMode === 'prokope' ? '#00e5ff' : '#ff5252';
+        ctx.beginPath();
+        if (ctx.roundRect) {
+          ctx.roundRect(car.x - car.width / 2, car.y - car.height / 2, car.width, car.height, 8);
+        } else {
+          ctx.rect(car.x - car.width / 2, car.y - car.height / 2, car.width, car.height);
+        }
+        ctx.fill();
+
+        // Cockpit canopy
+        ctx.fillStyle = '#07090e';
+        ctx.beginPath();
+        if (ctx.roundRect) {
+          ctx.roundRect(car.x - 8, car.y - 10, 26, 20, 5);
+        } else {
+          ctx.rect(car.x - 8, car.y - 10, 26, 20);
+        }
+        ctx.fill();
+
+        // Neon headlights
+        ctx.fillStyle = '#ffffff';
+        ctx.fillRect(car.x + car.width / 2 - 4, car.y - 12, 4, 6);
+        ctx.fillRect(car.x + car.width / 2 - 4, car.y + 6, 4, 6);
+
+        ctx.restore();
+
+        // Cloud Thinking Token Balloon
+        if (agentMode === 'cloud' && cloudState === 'thinking') {
+          ctx.save();
+          ctx.fillStyle = 'rgba(13, 18, 28, 0.9)';
+          ctx.strokeStyle = '#ff9100';
+          ctx.lineWidth = 1.5;
+          ctx.beginPath();
+          if (ctx.roundRect) {
+            ctx.roundRect(car.x - 60, car.y - 55, 170, 32, 6);
+          } else {
+            ctx.rect(car.x - 60, car.y - 55, 170, 32);
+          }
+          ctx.fill();
+          ctx.stroke();
+
+          ctx.fillStyle = '#ff9100';
+          ctx.font = '10px monospace';
+          ctx.fillText(`Generating JSON: ${Math.floor(cloudProgress)}%`, car.x - 50, car.y - 35);
+          ctx.restore();
+        }
+      }
+
+      // Explosion Particles
+      for (let i = explosions.length - 1; i >= 0; i--) {
+        const ex = explosions[i];
+        ex.x += ex.vx;
+        ex.y += ex.vy;
+        ex.life -= 0.035;
+        if (ex.life <= 0) {
+          explosions.splice(i, 1);
+          continue;
+        }
+        ctx.fillStyle = ex.color;
+        ctx.beginPath();
+        ctx.arc(ex.x, ex.y, ex.radius * ex.life, 0, Math.PI * 2);
+        ctx.fill();
+      }
+
+      // Crash Banner Overlay
+      if (car.isCrashed && agentMode === 'cloud') {
+        ctx.save();
+        ctx.fillStyle = 'rgba(255, 23, 68, 0.9)';
+        ctx.font = 'bold 15px Outfit, sans-serif';
+        ctx.textAlign = 'center';
+        ctx.fillText('💥 COLLISION: 1,200ms Cloud Latency Lag Failed to Evade!', canvas.width / 2, canvas.height / 2);
+        ctx.restore();
+      }
+
+      ctx.restore();
+      requestAnimationFrame(loop);
+    }
+
+    // Start highway agent simulation loop
+    requestAnimationFrame(loop);
   </script>
 </body>
 </html>