Spaces:
Running
Running
Download index.html from ProKope-AI/README: direct link, hf CLI and curl.
- Browser
- Download file 55 kB
-
https://huggingface.co/spaces/ProKope-AI/README/resolve/main/index.html
- Command line
-
hf download hf://spaces/ProKope-AI/README/index.html
-
curl -L -o index.html https://huggingface.co/spaces/ProKope-AI/README/resolve/main/index.html
55 kB
| <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 ; | |
| gap: 8px ; | |
| } | |
| .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 ; | |
| } | |
| } | |
| @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 & 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"><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 & 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 (<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);"><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)"><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 & 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> | |