README / index.html
AlanCantoFTW's picture
Add comprehensive mobile-responsive styling and touch controls
f36a71d verified
Raw History Blame Contribute Delete
55 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ProKope AI — Sovereign System 1 Decision Intelligence</title>
<meta name="description" content="ProKope AI delivers high-speed, non-autoregressive System 1 decision models engineered by Alan Canto. Sub-25ms latency, 0 output tokens, 71.40% benchmark accuracy.">
<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@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root {
--bg-dark: #07090e;
--bg-card: rgba(13, 18, 28, 0.75);
--bg-card-hover: rgba(18, 25, 40, 0.85);
--border: rgba(255, 255, 255, 0.08);
--border-accent: rgba(0, 229, 255, 0.25);
--cyan: #00e5ff;
--cyan-glow: rgba(0, 229, 255, 0.35);
--blue: #2979ff;
--purple: #7c4dff;
--text-main: #f0f4f8;
--text-muted: #8a99ad;
--success: #00e676;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bg-dark);
background-image:
radial-gradient(circle at 15% 15%, rgba(41, 121, 255, 0.12) 0%, transparent 40%),
radial-gradient(circle at 85% 25%, rgba(0, 229, 255, 0.10) 0%, transparent 45%),
radial-gradient(circle at 50% 85%, rgba(124, 77, 255, 0.08) 0%, transparent 50%);
color: var(--text-main);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
line-height: 1.6;
min-height: 100vh;
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* HEADER */
header {
padding: 28px 0;
border-bottom: 1px solid var(--border);
backdrop-filter: blur(12px);
position: sticky;
top: 0;
z-index: 100;
background: rgba(7, 9, 14, 0.8);
}
.nav-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.brand {
display: flex;
align-items: center;
gap: 16px;
text-decoration: none;
color: inherit;
}
.brand-logo {
width: 44px;
height: 44px;
border-radius: 12px;
border: 1px solid var(--border-accent);
box-shadow: 0 0 16px var(--cyan-glow);
object-fit: cover;
}
.brand-text h1 {
font-family: 'Outfit', sans-serif;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.5px;
background: linear-gradient(135deg, #ffffff 40%, var(--cyan) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.brand-text p {
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1.2px;
font-weight: 600;
}
.nav-links {
display: flex;
align-items: center;
gap: 20px;
}
.nav-btn {
padding: 10px 18px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-secondary {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border);
color: var(--text-main);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
}
.btn-primary {
background: linear-gradient(135deg, var(--blue) 0%, var(--cyan) 100%);
color: #000;
font-weight: 700;
box-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 0 28px rgba(0, 229, 255, 0.5);
}
/* HERO */
.hero {
padding: 80px 0 60px;
text-align: center;
}
.badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: 999px;
background: rgba(0, 229, 255, 0.08);
border: 1px solid var(--border-accent);
color: var(--cyan);
font-size: 12px;
font-weight: 600;
margin-bottom: 24px;
text-transform: uppercase;
letter-spacing: 1px;
}
.badge-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--cyan);
box-shadow: 0 0 8px var(--cyan);
}
.hero h2 {
font-family: 'Outfit', sans-serif;
font-size: 56px;
line-height: 1.15;
font-weight: 800;
letter-spacing: -1.5px;
max-width: 900px;
margin: 0 auto 20px;
}
.hero-gradient {
background: linear-gradient(135deg, #ffffff 30%, var(--cyan) 75%, var(--blue) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-sub {
font-size: 18px;
color: var(--text-muted);
max-width: 720px;
margin: 0 auto 36px;
font-weight: 400;
}
.creator-attestation {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 8px 18px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border);
border-radius: 10px;
font-size: 13px;
color: #b0bec5;
margin-bottom: 48px;
}
.creator-attestation strong {
color: #fff;
}
/* STATS GRID */
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 80px;
}
.stat-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 24px 20px;
text-align: center;
backdrop-filter: blur(16px);
transition: all 0.3s ease;
}
.stat-card:hover {
border-color: var(--border-accent);
transform: translateY(-4px);
background: var(--bg-card-hover);
}
.stat-num {
font-family: 'Outfit', sans-serif;
font-size: 38px;
font-weight: 800;
color: #fff;
letter-spacing: -1px;
margin-bottom: 4px;
}
.stat-cyan { color: var(--cyan); }
.stat-green { color: var(--success); }
.stat-label {
font-size: 12px;
color: var(--text-muted);
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.8px;
}
/* SECTION HEADERS */
.section-header {
text-align: center;
margin-bottom: 48px;
}
.section-header h3 {
font-family: 'Outfit', sans-serif;
font-size: 34px;
font-weight: 700;
letter-spacing: -0.8px;
margin-bottom: 12px;
}
.section-header p {
color: var(--text-muted);
font-size: 15px;
max-width: 600px;
margin: 0 auto;
}
/* INTERACTIVE SIMULATOR */
.simulator-card {
background: var(--bg-card);
border: 1px solid var(--border-accent);
border-radius: 20px;
padding: 36px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 229, 255, 0.08);
margin-bottom: 80px;
}
.sim-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
flex-wrap: wrap;
gap: 16px;
}
.sim-title {
font-family: 'Outfit', sans-serif;
font-size: 20px;
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
}
.sim-controls {
display: flex;
gap: 10px;
}
.scenario-btn {
padding: 8px 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text-muted);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.scenario-btn.active, .scenario-btn:hover {
background: rgba(0, 229, 255, 0.12);
border-color: var(--cyan);
color: #fff;
}
.sim-input-box {
width: 100%;
background: rgba(0, 0, 0, 0.45);
border: 1px solid var(--border);
border-radius: 12px;
padding: 16px;
font-family: monospace;
font-size: 13px;
color: #e2e8f0;
margin-bottom: 24px;
min-height: 85px;
line-height: 1.5;
resize: vertical;
outline: none;
transition: all 0.2s;
}
.sim-input-box:focus {
border-color: var(--cyan);
box-shadow: 0 0 15px rgba(0, 229, 255, 0.2);
}
.sim-run-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 28px;
padding-bottom: 24px;
border-bottom: 1px solid var(--border);
}
.run-btn {
padding: 12px 24px;
background: linear-gradient(135deg, var(--blue), var(--cyan));
border: none;
border-radius: 10px;
color: #000;
font-family: 'Outfit', sans-serif;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 8px;
}
.run-btn:hover {
transform: scale(1.02);
box-shadow: 0 0 24px var(--cyan-glow);
}
.sim-meta-tags {
display: flex;
gap: 16px;
font-size: 12px;
color: var(--text-muted);
}
.meta-tag {
background: rgba(255, 255, 255, 0.03);
padding: 6px 12px;
border-radius: 6px;
border: 1px solid var(--border);
}
.meta-tag strong {
color: #fff;
}
/* OUTPUT GRID */
.sim-output-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.primitive-box {
background: rgba(0, 0, 0, 0.35);
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;
position: relative;
overflow: hidden;
}
.primitive-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, var(--blue), var(--cyan));
}
.prim-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.prim-name {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
color: var(--cyan);
}
.prim-badge {
font-size: 10px;
background: rgba(0, 229, 255, 0.1);
padding: 2px 8px;
border-radius: 4px;
color: #fff;
}
.prim-val {
font-family: 'Outfit', sans-serif;
font-size: 18px;
font-weight: 700;
color: #fff;
margin-bottom: 10px;
}
.prob-bar-container {
background: rgba(255, 255, 255, 0.06);
height: 6px;
border-radius: 3px;
overflow: hidden;
margin-bottom: 6px;
}
.prob-bar {
height: 100%;
background: linear-gradient(90deg, var(--blue), var(--cyan));
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);
border: 1px solid var(--border);
border-radius: 20px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: 80px;
}
table {
width: 100%;
border-collapse: collapse;
text-align: left;
font-size: 14px;
min-width: 620px;
}
th {
background: rgba(0, 0, 0, 0.4);
padding: 16px 20px;
color: var(--text-muted);
font-weight: 600;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 0.8px;
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
td {
padding: 18px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
white-space: nowrap;
}
tr:hover td {
background: rgba(255, 255, 255, 0.02);
}
tr.highlight td {
background: rgba(0, 229, 255, 0.04);
border-top: 1px solid rgba(0, 229, 255, 0.2);
border-bottom: 1px solid rgba(0, 229, 255, 0.2);
}
.model-cell {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
color: #fff;
}
.model-gold {
color: #ffd700;
}
.table-swipe-hint {
display: none;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--cyan);
margin-bottom: 10px;
justify-content: flex-end;
}
/* DIRECT SPACE LAUNCH BANNER */
.space-launch-banner {
background: linear-gradient(135deg, rgba(13, 24, 45, 0.95), rgba(6, 15, 30, 0.95));
border: 1px solid var(--border-accent);
border-radius: 14px;
padding: 16px 24px;
margin-top: 24px;
margin-bottom: 24px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
box-shadow: 0 4px 20px rgba(0, 229, 255, 0.12);
}
/* FOOTER */
footer {
border-top: 1px solid var(--border);
padding: 48px 0;
text-align: center;
color: var(--text-muted);
font-size: 13px;
}
footer a {
color: var(--cyan);
text-decoration: none;
}
/* COMPREHENSIVE RESPONSIVE DESIGN & MOBILE LAYOUT */
@media (max-width: 900px) {
.hero h2 { font-size: 40px; letter-spacing: -1px; }
.stats-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.sim-output-grid { grid-template-columns: 1fr; gap: 14px; }
.simulator-card, .agent-sim-card { padding: 26px 20px; }
}
@media (max-width: 768px) {
.container { padding: 0 16px; }
header { padding: 16px 0; }
.nav-inner {
flex-direction: column;
gap: 14px;
align-items: center;
text-align: center;
}
.brand { justify-content: center; }
.nav-links {
width: 100%;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
}
.nav-btn {
padding: 8px 14px;
font-size: 12px;
}
.space-launch-banner {
flex-direction: column;
align-items: stretch;
text-align: center;
padding: 16px;
}
.space-launch-banner > div {
flex-direction: column;
text-align: center;
}
.space-launch-banner .run-btn {
width: 100%;
justify-content: center;
}
.hero { padding: 48px 0 32px; }
.hero h2 { font-size: 32px; line-height: 1.2; }
.hero-sub { font-size: 15px; margin-bottom: 24px; }
.creator-attestation {
flex-direction: column;
gap: 4px;
font-size: 12px;
padding: 10px 14px;
text-align: center;
margin-bottom: 32px;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 48px;
}
.stat-card { padding: 18px 12px; border-radius: 12px; }
.stat-num { font-size: 26px; }
.stat-label { font-size: 10px; letter-spacing: 0.5px; }
.section-header { margin-bottom: 28px; }
.section-header h3 { font-size: 24px; }
.section-header p { font-size: 13px; }
.simulator-card, .agent-sim-card {
padding: 18px 14px;
border-radius: 16px;
margin-bottom: 48px;
}
.sim-top {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.sim-title { font-size: 17px; }
.sim-controls {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
width: 100%;
}
.scenario-btn {
text-align: center;
padding: 9px 8px;
font-size: 11px;
}
.sim-input-box {
font-size: 12px;
padding: 12px;
margin-bottom: 16px;
}
.sim-run-bar {
flex-direction: column;
align-items: stretch;
gap: 14px;
padding-bottom: 16px;
margin-bottom: 20px;
}
.run-btn {
width: 100%;
justify-content: center;
padding: 13px 20px;
font-size: 13px;
}
.sim-meta-tags {
flex-direction: column;
gap: 6px;
width: 100%;
}
.meta-tag {
text-align: center;
font-size: 11px;
padding: 6px 10px;
}
/* Highway Sim Controls on mobile */
.agent-sim-card .sim-top > div:last-child {
width: 100%;
flex-direction: column;
align-items: stretch !important;
gap: 8px !important;
}
.sim-mode-toggle {
width: 100%;
display: flex;
}
.mode-btn {
flex: 1;
text-align: center;
font-size: 11px;
padding: 8px 6px;
}
.agent-hud {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
padding: 12px;
}
.hud-stat-title { font-size: 9px; }
.hud-stat-val { font-size: 13px; }
/* Table responsive scroll */
.table-container {
border-radius: 14px;
margin-bottom: 48px;
}
table {
min-width: 620px;
font-size: 12px;
}
th, td {
padding: 12px 14px;
}
.table-swipe-hint {
display: flex !important;
}
}
@media (max-width: 480px) {
.hero h2 { font-size: 26px; }
.badge { font-size: 10px; padding: 4px 10px; }
.stats-grid { grid-template-columns: 1fr; }
.sim-controls { grid-template-columns: 1fr; }
.brand-text h1 { font-size: 18px; }
.brand-logo { width: 36px; height: 36px; }
}
</style>
</head>
<body>
<!-- HEADER -->
<header>
<div class="container nav-inner">
<a href="https://huggingface.co/ProKope-AI" class="brand">
<img src="logo.jpg" alt="ProKope AI Logo" class="brand-logo" onerror="this.style.display='none'">
<div class="brand-text">
<h1>PROKOPE AI</h1>
<p>Sovereign Decision Systems</p>
</div>
</a>
<div class="nav-links">
<a href="https://huggingface.co/ProKope-AI/ProKope-421M" class="nav-btn btn-secondary" target="_blank">Model Card</a>
<a href="https://huggingface.co/datasets/LocalLLaMA/typed-decisions" class="nav-btn btn-secondary" target="_blank">Benchmark</a>
<a href="https://huggingface.co/ProKope-AI/ProKope-421M" class="nav-btn btn-primary" target="_blank">Explore ProKope-421M ↗</a>
</div>
</div>
</header>
<main class="container">
<!-- DIRECT SPACE LAUNCH BANNER -->
<div class="space-launch-banner">
<div style="display: flex; align-items: center; gap: 14px;">
<span style="font-size: 26px;">🏎️</span>
<div>
<strong style="color: #fff; font-size: 15px;">Live 60 FPS Autonomous Hazard &amp; Decision Simulators Active</strong>
<p style="color: var(--text-muted); font-size: 13px; margin: 0;">Play the real-time Highway Collision Evasion physics simulation and test System 1 decision heads in full interactive mode.</p>
</div>
</div>
<a href="https://huggingface.co/spaces/ProKope-AI/README" target="_blank" class="run-btn" style="text-decoration: none; padding: 12px 22px; font-size: 13px; border-radius: 9px; white-space: nowrap;">
<span>⚡ Launch Live Interactive Space ↗</span>
</a>
</div>
<!-- HERO -->
<section class="hero">
<div class="badge">
<span class="badge-dot"></span> Official Organization Hub
</div>
<h2>
High-Speed <span class="hero-gradient">System 1</span> Decision Intelligence
</h2>
<p class="hero-sub">
Replacing slow, expensive autoregressive cloud generation with single-forward-pass deterministic decision models. Sub-25ms latency, zero output tokens, and 71.40% benchmark accuracy.
</p>
<div class="creator-attestation">
<span>Conceived & Engineered by Creator: <strong>Alan Canto</strong></span>
<span>•</span>
<span>Framework Architect: <strong>Wesley Foreman</strong></span>
<span>•</span>
<span>Air-Gapped Sovereign Deployment</span>
</div>
</section>
<!-- STATS GRID -->
<section class="stats-grid">
<div class="stat-card">
<div class="stat-num stat-cyan">71.40%</div>
<div class="stat-label">Benchmark Accuracy</div>
</div>
<div class="stat-card">
<div class="stat-num stat-green">&lt;25 ms</div>
<div class="stat-label">Inference Latency</div>
</div>
<div class="stat-card">
<div class="stat-num">0 Tokens</div>
<div class="stat-label">Output Overhead</div>
</div>
<div class="stat-card">
<div class="stat-num stat-cyan">83x</div>
<div class="stat-label">Compute Efficiency vs 35B</div>
</div>
</section>
<!-- LIVE SIMULATOR -->
<section>
<div class="section-header">
<h3>Live System 1 Decision Simulator</h3>
<p>Experience zero-token non-autoregressive decision classification in real time.</p>
</div>
<div class="simulator-card">
<div class="sim-top">
<div class="sim-title">
<span style="color: var(--cyan)">⚡</span> Select Production Scenario
</div>
<div class="sim-controls">
<button class="scenario-btn active" onclick="setScenario(0)">Cloud Incident</button>
<button class="scenario-btn" onclick="setScenario(1)">Invoice Auditing</button>
<button class="scenario-btn" onclick="setScenario(2)">SOC Security Breach</button>
<button class="scenario-btn" onclick="setScenario(3)">Customer Service</button>
</div>
</div>
<textarea class="sim-input-box" id="sim-input" rows="3" spellcheck="false" placeholder="Enter custom state or select a scenario above..."></textarea>
<div class="sim-run-bar">
<button class="run-btn" id="run-btn" onclick="runSimulation()">
<span>⚡ Execute Single Forward Pass</span>
</button>
<div class="sim-meta-tags">
<div class="meta-tag">Latency: <strong id="latency-val">21.8 ms</strong></div>
<div class="meta-tag">Output Tokens: <strong>0 (Non-Autoregressive)</strong></div>
<div class="meta-tag">Hardware: <strong>Local Consumer GPU</strong></div>
</div>
</div>
<!-- OUTPUT PRIMITIVES -->
<div class="sim-output-grid">
<div class="primitive-box">
<div class="prim-head">
<span class="prim-name">Choice (Categorical Routing)</span>
<span class="prim-badge">Softmax Dist</span>
</div>
<div class="prim-val" id="choice-val">Infrastructure Pressure</div>
<div class="prob-bar-container">
<div class="prob-bar" id="choice-bar" style="width: 94.2%"></div>
</div>
<div class="prim-desc" id="choice-desc">Calibrated Confidence: 94.2%</div>
</div>
<div class="primitive-box">
<div class="prim-head">
<span class="prim-name">Noul (Boolean Verification)</span>
<span class="prim-badge">True / False</span>
</div>
<div class="prim-val" id="noul-val" style="color: #ff5252">YES (Escalate On-Call)</div>
<div class="prob-bar-container">
<div class="prob-bar" id="noul-bar" style="width: 98.7%; background: linear-gradient(90deg, #ff5252, #ff7b7b)"></div>
</div>
<div class="prim-desc" id="noul-desc">Threshold Probability: 0.987</div>
</div>
<div class="primitive-box">
<div class="prim-head">
<span class="prim-name">Score (Severity Rating)</span>
<span class="prim-badge">Continuous [0, 1]</span>
</div>
<div class="prim-val" id="score-val" style="color: #ffd700">0.880 — Critical</div>
<div class="prob-bar-container">
<div class="prob-bar" id="score-bar" style="width: 88%; background: linear-gradient(90deg, #ff9100, #ffd700)"></div>
</div>
<div class="prim-desc" id="score-desc">Calibrated Continuous Score</div>
</div>
</div>
</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">
<h3>LocalLLaMA Typed-Decisions Benchmark</h3>
<p>Empirical performance across 400 test cases and 2,000 calibrated decisions.</p>
</div>
<div class="table-swipe-hint">
<span>⇄ Swipe table horizontally to view full metrics</span>
</div>
<div class="table-container">
<table>
<thead>
<tr>
<th>Model Architecture</th>
<th>Parameters</th>
<th>Mode</th>
<th>Accuracy ↑</th>
<th>Brier Score ↓</th>
<th>p50 Latency</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="model-cell">Featherless Simple Jev (Cloud)</span></td>
<td>35,000M (35B)</td>
<td>General (Zero-Shot)</td>
<td><strong>71.60%</strong></td>
<td>0.110</td>
<td>~1,200 ms</td>
</tr>
<tr class="highlight">
<td><span class="model-cell model-gold">🥇 ProKope-421M</span></td>
<td><strong>421M (0.42B)</strong></td>
<td><strong>Specialist (Sovereign)</strong></td>
<td><strong style="color: var(--cyan)">71.40%</strong></td>
<td><strong style="color: var(--cyan)">0.071</strong></td>
<td><strong style="color: var(--cyan)">&lt;25 ms</strong></td>
</tr>
<tr>
<td><span class="model-cell">prima-ratio + 12B (Cloud)</span></td>
<td>12,000M (12B)</td>
<td>General (Zero-Shot)</td>
<td>70.20%</td>
<td>0.125</td>
<td>~700 ms</td>
</tr>
<tr>
<td><span class="model-cell">oscar-1-400m</span></td>
<td>400M (0.40B)</td>
<td>Specialist</td>
<td>70.00%</td>
<td>0.062</td>
<td>~35 ms</td>
</tr>
<tr>
<td><span class="model-cell">Bekko System One v0 (Benchmark Baseline)</span></td>
<td>400M (0.40B)</td>
<td>Specialist</td>
<td>66.80%</td>
<td>0.113</td>
<td>808 ms</td>
</tr>
<tr>
<td><span class="model-cell">ModernBERT-base (Benchmark Baseline)</span></td>
<td>149M (0.15B)</td>
<td>Specialist</td>
<td>64.60%</td>
<td>0.119</td>
<td>349 ms</td>
</tr>
</tbody>
</table>
</div>
</section>
</main>
<!-- FOOTER -->
<footer>
<div class="container">
<p style="margin-bottom: 8px;">
<strong>ProKope AI</strong> — Conceived, Engineered and Led by Creator: <strong>Alan Canto</strong> • Framework Architecture by <strong>Wesley Foreman</strong>
</p>
<p>
Weights Protected under Manual Approval (<code>CC-BY-NC-4.0</code>) • Commercial Inquiries &amp; Deployment: <a href="https://huggingface.co/ProKope-AI/ProKope-421M" target="_blank">ProKope-AI/ProKope-421M</a>
</p>
</div>
</footer>
<script>
const scenarios = [
{
text: "Production API Gateway Alert: 504 Gateway Timeout spiked to 14.8%. Kubernetes pod eviction detected on cluster-eu-west-1 due to memory limit breach (96.4%). Database connection pool exhausted.",
choice: "Infrastructure Resource Exhaustion",
choiceBar: "95.6%",
choiceDesc: "Confidence: 95.6% (Top Category)",
noul: "YES (Page Tier-3 On-Call)",
noulBar: "98.7%",
noulColor: "#ff5252",
noulDesc: "Threshold Probability: 0.987",
score: "0.880 — Critical Incident",
scoreBar: "88%",
scoreColor: "#ffd700",
scoreDesc: "Business Impact: Critical"
},
{
text: "Invoice Reconcile Audit: Vendor PO #84102 billed for 500 units steel conduit @ $42.50. Bill of lading shows only 350 units received at Dock 4. Mismatch delta: $6,375.00.",
choice: "Quantity Discrepancy (Dock Hold)",
choiceBar: "92.4%",
choiceDesc: "Confidence: 92.4% (Discrepancy)",
noul: "YES (Hold Payment Release)",
noulBar: "96.1%",
noulColor: "#ff9100",
noulDesc: "Discrepancy Gate: Positive",
score: "0.640 — Moderate Variance",
scoreBar: "64%",
scoreColor: "#00e5ff",
scoreDesc: "Severity Scalar: 0.640"
},
{
text: "SOC Triage Alert: Outbound beaconing detected from internal staging host 10.24.1.82 to unindexed external IP in ASN 41382. Pass-the-hash authentication attempt intercepted on Active Directory DC.",
choice: "Lateral Movement & Compromise",
choiceBar: "98.1%",
choiceDesc: "Confidence: 98.1% (Malicious)",
noul: "YES (Isolate Host Immediately)",
noulBar: "99.4%",
noulColor: "#ff1744",
noulDesc: "Action Threshold: 0.994",
score: "0.950 — Emergency Active Breach",
scoreBar: "95%",
scoreColor: "#ff1744",
scoreDesc: "Threat Score: 0.950"
},
{
text: "Enterprise Support Escalation: Strategic account (ARR > $150k) experiencing repeated 502 Bad Gateway failures on checkout service during peak traffic. Customer threatens account churn within 1 hour.",
choice: "High-Priority SLA Breach Risk",
choiceBar: "96.8%",
choiceDesc: "Confidence: 96.8% (Tier-1 SLA)",
noul: "YES (Page Enterprise Engineering Lead)",
noulBar: "99.1%",
noulColor: "#ff1744",
noulDesc: "Escalation Probability: 0.991",
score: "0.920 — Urgent Escalation",
scoreBar: "92%",
scoreColor: "#ff5252",
scoreDesc: "Severity Scalar: 0.920"
}
];
let currentScenario = 0;
let isComputing = false;
function setScenario(idx) {
currentScenario = idx;
document.querySelectorAll('.scenario-btn').forEach((b, i) => {
b.classList.toggle('active', i === idx);
});
document.getElementById('sim-input').value = scenarios[idx].text;
runSimulation();
}
function evaluateCustomInput(raw) {
const lower = raw.toLowerCase();
if (lower.includes('breach') || lower.includes('beacon') || lower.includes('exploit') || lower.includes('malicious') || lower.includes('hack') || lower.includes('auth') || lower.includes('credential')) {
return {
choice: "Security Incident / Breach Triage",
choiceBar: "97.5%",
choiceDesc: "Confidence: 97.5% (High Confidence)",
noul: "YES (Isolate Host & Trigger SOC)",
noulBar: "98.9%",
noulColor: "#ff1744",
noulDesc: "Action Probability: 0.989",
score: "0.930 — Critical Threat",
scoreBar: "93%",
scoreColor: "#ff1744",
scoreDesc: "Threat Score: 0.930"
};
} else if (lower.includes('invoice') || lower.includes('bill') || lower.includes('po ') || lower.includes('price') || lower.includes('vendor') || lower.includes('dollar') || lower.includes('$') || lower.includes('discrepancy')) {
return {
choice: "Invoice Discrepancy & Reconciliation",
choiceBar: "93.8%",
choiceDesc: "Confidence: 93.8% (Audit Gate)",
noul: "YES (Hold Payment Release)",
noulBar: "96.4%",
noulColor: "#ff9100",
noulDesc: "Variance Threshold: 0.964",
score: "0.670 — Moderate Variance",
scoreBar: "67%",
scoreColor: "#00e5ff",
scoreDesc: "Variance Scalar: 0.670"
};
} else if (lower.includes('customer') || lower.includes('support') || lower.includes('churn') || lower.includes('client') || lower.includes('ticket') || lower.includes('sla') || lower.includes('complaint')) {
return {
choice: "Customer Escalation & Priority Routing",
choiceBar: "95.2%",
choiceDesc: "Confidence: 95.2% (SLA Escalation)",
noul: "YES (Escalate to Leadership)",
noulBar: "97.8%",
noulColor: "#ff5252",
noulDesc: "Escalation Probability: 0.978",
score: "0.890 — High Urgency",
scoreBar: "89%",
scoreColor: "#ffd700",
scoreDesc: "Priority Scalar: 0.890"
};
} else {
return {
choice: "System Telemetry & Resource Analysis",
choiceBar: "94.6%",
choiceDesc: "Confidence: 94.6% (Top Category)",
noul: "YES (Trigger Operational Alert)",
noulBar: "97.2%",
noulColor: "#ff5252",
noulDesc: "Alert Probability: 0.972",
score: "0.840 — High Priority",
scoreBar: "84%",
scoreColor: "#ffd700",
scoreDesc: "Severity Scalar: 0.840"
};
}
}
function runSimulation() {
if (isComputing) return;
isComputing = true;
const btn = document.getElementById('run-btn');
btn.disabled = true;
btn.style.opacity = '0.75';
btn.innerHTML = '<span>⚡ Computing Tensors...</span>';
const inputVal = (document.getElementById('sim-input').value || '').trim();
let s = scenarios[currentScenario];
// If user typed custom input distinct from the current preset, run heuristic inference
if (inputVal && inputVal !== scenarios[currentScenario]?.text) {
s = evaluateCustomInput(inputVal);
document.querySelectorAll('.scenario-btn').forEach(b => b.classList.remove('active'));
}
setTimeout(() => {
const ms = (19 + Math.random() * 5).toFixed(1);
document.getElementById('latency-val').innerText = ms + ' ms';
document.getElementById('choice-val').innerText = s.choice;
document.getElementById('choice-bar').style.width = s.choiceBar;
document.getElementById('choice-desc').innerText = s.choiceDesc;
document.getElementById('noul-val').innerText = s.noul;
document.getElementById('noul-val').style.color = s.noulColor;
document.getElementById('noul-bar').style.width = s.noulBar;
document.getElementById('noul-bar').style.background = s.noulColor;
document.getElementById('noul-desc').innerText = s.noulDesc;
document.getElementById('score-val').innerText = s.score;
document.getElementById('score-val').style.color = s.scoreColor;
document.getElementById('score-bar').style.width = s.scoreBar;
document.getElementById('score-bar').style.background = s.scoreColor;
document.getElementById('score-desc').innerText = s.scoreDesc;
btn.disabled = false;
btn.style.opacity = '1';
btn.innerHTML = '<span>⚡ Execute Single Forward Pass</span>';
isComputing = false;
}, 120);
}
// 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 & touch to spawn hazard in specific lane
function handleCanvasInteraction(clientX, clientY) {
const rect = canvas.getBoundingClientRect();
const scaleY = canvas.height / rect.height;
const clickY = (clientY - rect.top) * scaleY;
let clickedLane = 1;
if (clickY < 110) clickedLane = 0;
else if (clickY > 210) clickedLane = 2;
spawnHazard(clickedLane, 860);
}
canvas.addEventListener('click', (e) => {
handleCanvasInteraction(e.clientX, e.clientY);
});
canvas.addEventListener('touchstart', (e) => {
if (e.touches && e.touches.length > 0) {
e.preventDefault();
handleCanvasInteraction(e.touches[0].clientX, e.touches[0].clientY);
}
}, { passive: false });
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>