Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Pomilon Intelligence - Research Hub</title> | |
| <link rel="stylesheet" href="static/css/style.css"> | |
| <style> | |
| /* --- Navigation (Moved from inline) --- */ | |
| .home-nav { | |
| position: fixed; | |
| width: 100%; | |
| top: 0; | |
| z-index: 100; | |
| padding: 1.5rem 3rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| mix-blend-mode: exclusion; | |
| transition: padding 0.3s; | |
| } | |
| .nav-brand-link { | |
| color: white; | |
| font-weight: 700; | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| text-decoration: none; | |
| } | |
| .nav-brand-img { | |
| height: 50px; | |
| width: auto; | |
| filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.3)); | |
| transition: height 0.3s; | |
| } | |
| .nav-link-item { | |
| color: white; | |
| text-decoration: none; | |
| font-size: 0.9rem; | |
| margin-left: 2rem; | |
| opacity: 0.8; | |
| transition: opacity 0.2s; | |
| } | |
| .nav-link-item:hover { | |
| opacity: 1; | |
| } | |
| /* --- Hero Split Section --- */ | |
| .hero-container { | |
| height: 100vh; | |
| width: 100%; | |
| display: flex; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .split { | |
| flex: 1; | |
| position: relative; | |
| transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: default; | |
| /* Changed from pointer since inference is disabled */ | |
| border-right: 1px solid rgba(255, 255, 255, 0.05); | |
| z-index: 10; | |
| } | |
| .split:hover { | |
| flex: 1.5; | |
| } | |
| /* CRSM Specifics */ | |
| .split-crsm { | |
| background: radial-gradient(circle at 50% 120%, #05151a 0%, #000 100%); | |
| border-right: 1px solid rgba(0, 240, 255, 0.1); | |
| } | |
| .split-crsm::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: repeating-linear-gradient(transparent 0, transparent 2px, rgba(0, 240, 255, 0.03) 3px); | |
| background-size: 100% 4px; | |
| pointer-events: none; | |
| } | |
| .split-crsm:hover { | |
| background: radial-gradient(circle at 50% 120%, #00222b 0%, #000 100%); | |
| } | |
| .split-crsm h2 { | |
| color: #00f0ff; | |
| font-family: var(--font-mono); | |
| letter-spacing: -2px; | |
| } | |
| /* Aetheris Specifics */ | |
| .split-aetheris { | |
| background: radial-gradient(circle at 50% 120%, #1a1020 0%, #000 100%); | |
| cursor: pointer; | |
| } | |
| .split-aetheris::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.02), transparent 60%); | |
| pointer-events: none; | |
| } | |
| .split-aetheris:hover { | |
| background: radial-gradient(circle at 50% 120%, #2a1a35 0%, #000 100%); | |
| } | |
| .split-aetheris h2 { | |
| color: #e6e6fa; | |
| font-family: var(--font-display); | |
| font-weight: 400; | |
| } | |
| /* Shared Elements */ | |
| .logo-img { | |
| width: 140px; | |
| height: auto; | |
| transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); | |
| filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.6)); | |
| margin-bottom: 2rem; | |
| } | |
| .split:hover .logo-img { | |
| transform: scale(1.15) translateY(-15px); | |
| } | |
| .split-content { | |
| text-align: center; | |
| z-index: 20; | |
| transform: translateY(20px); | |
| transition: transform 0.5s ease; | |
| padding: 0 1rem; | |
| } | |
| .split:hover .split-content { | |
| transform: translateY(0); | |
| } | |
| .split h2 { | |
| font-size: 4rem; | |
| margin: 0; | |
| transition: letter-spacing 0.5s; | |
| } | |
| .split:hover h2 { | |
| letter-spacing: 2px; | |
| } | |
| .desc { | |
| opacity: 0.6; | |
| margin-top: 1rem; | |
| font-size: 0.9rem; | |
| max-width: 320px; | |
| line-height: 1.6; | |
| transition: opacity 0.3s; | |
| } | |
| .split:hover .desc { | |
| opacity: 1; | |
| color: #fff; | |
| } | |
| /* Center Badge */ | |
| .center-badge { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| z-index: 50; | |
| background: #000; | |
| border: 1px solid #333; | |
| padding: 0.8rem 1.5rem; | |
| text-transform: uppercase; | |
| font-size: 0.75rem; | |
| letter-spacing: 3px; | |
| pointer-events: none; | |
| box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); | |
| white-space: nowrap; | |
| } | |
| /* Scroll Indicator */ | |
| .scroll-hint { | |
| position: absolute; | |
| bottom: 40px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| z-index: 50; | |
| color: rgba(255, 255, 255, 0.4); | |
| font-size: 0.8rem; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| animation: bounce 2s infinite; | |
| pointer-events: none; | |
| } | |
| @keyframes bounce { | |
| 0%, | |
| 20%, | |
| 50%, | |
| 80%, | |
| 100% { | |
| transform: translateX(-50%) translateY(0); | |
| } | |
| 40% { | |
| transform: translateX(-50%) translateY(-10px); | |
| } | |
| 60% { | |
| transform: translateX(-50%) translateY(-5px); | |
| } | |
| } | |
| /* --- Info Section (Below Fold) --- */ | |
| .info-section { | |
| background: #050505; | |
| padding: 6rem 2rem; | |
| position: relative; | |
| z-index: 20; | |
| border-top: 1px solid #222; | |
| } | |
| .info-container { | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| } | |
| .section-header { | |
| text-align: center; | |
| margin-bottom: 5rem; | |
| } | |
| .section-title { | |
| font-size: 2.5rem; | |
| background: linear-gradient(to right, #fff, #666); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| margin-bottom: 1rem; | |
| } | |
| /* Telemetry Grid */ | |
| .telemetry-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 6rem; | |
| } | |
| .telemetry-card { | |
| background: rgba(255, 255, 255, 0.02); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| padding: 2rem; | |
| border-radius: 8px; | |
| } | |
| .t-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1.5rem; | |
| padding-bottom: 1rem; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .t-title { | |
| font-family: var(--font-mono); | |
| font-size: 0.9rem; | |
| color: #888; | |
| text-transform: uppercase; | |
| } | |
| .t-live { | |
| color: #00ff88; | |
| font-size: 0.7rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .t-live::before { | |
| content: ''; | |
| width: 6px; | |
| height: 6px; | |
| background: #00ff88; | |
| border-radius: 50%; | |
| } | |
| .t-offline { | |
| color: #555; | |
| font-size: 0.7rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .t-offline::before { | |
| content: ''; | |
| width: 6px; | |
| height: 6px; | |
| background: #555; | |
| border-radius: 50%; | |
| } | |
| .stat-row { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 0.8rem; | |
| font-family: var(--font-mono); | |
| font-size: 0.85rem; | |
| } | |
| .stat-label { | |
| color: #666; | |
| } | |
| .stat-val { | |
| color: #ddd; | |
| } | |
| .crsm-val { | |
| color: #00f0ff; | |
| letter-spacing: 1px; | |
| } | |
| .aetheris-val { | |
| color: #e6e6fa; | |
| } | |
| /* Comparison Table */ | |
| .comparison-table-wrapper { | |
| width: 100%; | |
| overflow-x: auto; | |
| } | |
| .comparison-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| color: #aaa; | |
| min-width: 600px; | |
| /* Ensure it doesn't break on super small screens */ | |
| } | |
| .comparison-table th { | |
| text-align: left; | |
| padding: 1rem; | |
| border-bottom: 1px solid #333; | |
| color: #fff; | |
| font-size: 0.9rem; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .comparison-table td { | |
| padding: 1.5rem 1rem; | |
| border-bottom: 1px solid #222; | |
| font-size: 0.95rem; | |
| } | |
| .col-feature { | |
| width: 30%; | |
| color: #666; | |
| font-family: var(--font-mono); | |
| } | |
| .col-crsm { | |
| width: 35%; | |
| color: #00f0ff; | |
| letter-spacing: 1px; | |
| } | |
| .col-aetheris { | |
| width: 35%; | |
| color: #b19cd9; | |
| } | |
| /* --- Mobile Responsiveness --- */ | |
| @media (max-width: 768px) { | |
| .home-nav { | |
| padding: 1rem; | |
| } | |
| .nav-brand-img { | |
| height: 35px; | |
| } | |
| .nav-link-item { | |
| margin-left: 1rem; | |
| font-size: 0.8rem; | |
| } | |
| .hero-container { | |
| flex-direction: column; | |
| height: auto; | |
| min-height: 100vh; | |
| } | |
| .split { | |
| width: 100%; | |
| height: 50vh; | |
| /* Split vertically */ | |
| border-right: none; | |
| display: flex; | |
| /* Enforce flex */ | |
| flex-direction: column; | |
| /* Stack content */ | |
| justify-content: center; | |
| /* Center vertical */ | |
| align-items: center; | |
| /* Center horizontal */ | |
| } | |
| .split:hover { | |
| flex: 1; | |
| /* Disable flex grow on mobile for stability */ | |
| } | |
| .split-crsm { | |
| border-bottom: 1px solid rgba(0, 240, 255, 0.1); | |
| } | |
| .split h2 { | |
| font-size: 2.5rem; | |
| } | |
| .logo-img { | |
| width: 100px; | |
| margin-bottom: 1rem; | |
| } | |
| .desc { | |
| font-size: 0.8rem; | |
| max-width: 90%; | |
| opacity: 1; | |
| /* Always visible on mobile */ | |
| } | |
| .center-badge { | |
| font-size: 0.6rem; | |
| padding: 0.5rem 1rem; | |
| } | |
| .info-section { | |
| padding: 4rem 1rem; | |
| } | |
| .section-title { | |
| font-size: 1.8rem; | |
| } | |
| .telemetry-grid { | |
| grid-template-columns: 1fr; | |
| gap: 1.5rem; | |
| } | |
| .comparison-table th, | |
| .comparison-table td { | |
| padding: 1rem 0.5rem; | |
| font-size: 0.85rem; | |
| } | |
| } | |
| </style> | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Transparent Floating Nav for Home --> | |
| <nav class="home-nav"> | |
| <a href="index.html" class="nav-brand-link"> | |
| <img src="static/assets/pomilon_logo.png" alt="Pomilon Intelligence Lab" class="nav-brand-img"> | |
| </a> | |
| <div class="nav-links"> | |
| <a href="about.html" class="nav-link-item">MANIFESTO</a> | |
| <a href="https://github.com/Pomilon" target="_blank" class="nav-link-item">GITHUB</a> | |
| </div> | |
| </nav> | |
| <main> | |
| <!-- Section 1: The Choice (Hero) --> | |
| <div class="hero-container"> | |
| <div class="center-badge">Select Architecture</div> | |
| <!-- Left: CRSM (Public) --> | |
| <div class="split split-crsm" onclick="window.location.href='/chat/crsm'"> | |
| <div class="split-content"> | |
| <img src="/static/assets/CRSM_logo.png" alt="CRSM" class="logo-img"> | |
| <h2>CRSM</h2> | |
| <div class="desc"> | |
| <strong>Continuous Reasoning State Model</strong><br> | |
| Non-transformer architecture optimized for deep causal analysis and logical precision. | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right: Aetheris --> | |
| <a href="aetheris_chat.html" class="split split-aetheris" style="text-decoration: none;"> | |
| <div class="split-content"> | |
| <img src="static/assets/Aetheris_logo.png" alt="Aetheris" class="logo-img"> | |
| <h2>Aetheris</h2> | |
| <div class="desc"> | |
| <strong>Hybrid Mamba-MoE</strong><br> | |
| Sparse mixture-of-experts model designed for fluid creativity and abstract association. | |
| </div> | |
| </div> | |
| </a> | |
| <div class="scroll-hint">Scroll for Telemetry</div> | |
| </div> | |
| <!-- Section 2: Technical Breakdown --> | |
| <div class="info-section"> | |
| <div class="info-container"> | |
| <div class="section-header"> | |
| <h3 class="section-title">The Dual Singularity</h3> | |
| <p style="color: #888; max-width: 600px; margin: 0 auto;">Two distinct paths to general intelligence. One built on rigid state-space logic, the other on fluid sparse expertise.</p> | |
| </div> | |
| <!-- Live Telemetry --> | |
| <div class="telemetry-grid"> | |
| <!-- CRSM Stats (Public) --> | |
| <div class="telemetry-card" style="border-left: 3px solid #00f0ff;"> | |
| <div class="t-header"> | |
| <span class="t-title">CRSM / KERNEL_01</span> | |
| <span class="t-live">ONLINE</span> | |
| </div> | |
| <div class="stat-row"><span class="stat-label">Architecture</span><span | |
| class="crsm-val">Recurrent State Space</span></div> | |
| <div class="stat-row"><span class="stat-label">Reasoning Depth</span><span class="stat-val">Deep | |
| (Recursive)</span></div> | |
| <div class="stat-row"><span class="stat-label">Context Window</span><span | |
| class="stat-val">Infinite (Rolling)</span></div> | |
| <div class="stat-row"><span class="stat-label">System Load</span><span | |
| class="stat-val">0% (STANDBY)</span></div> | |
| </div> | |
| <!-- Aetheris Stats --> | |
| <div class="telemetry-card" style="border-left: 3px solid #b19cd9;"> | |
| <div class="t-header"> | |
| <span class="t-title">Aetheris / CLUSTER_A</span> | |
| <span class="t-live">ONLINE</span> | |
| </div> | |
| <div class="stat-row"><span class="stat-label">Architecture</span><span | |
| class="aetheris-val">Hybrid Mamba-MoE</span></div> | |
| <div class="stat-row"><span class="stat-label">Total Params</span><span | |
| class="stat-val">294M</span></div> | |
| <div class="stat-row"><span class="stat-label">Active Params</span><span class="stat-val">167M | |
| (Sparse)</span></div> | |
| <div class="stat-row"><span class="stat-label">Temperature</span><span | |
| class="stat-val">0.85</span></div> | |
| </div> | |
| </div> | |
| <!-- Comparison Matrix --> | |
| <div class="section-header" style="margin-bottom: 3rem;"> | |
| <h3 class="section-title" style="font-size: 1.8rem;">Architecture Matrix</h3> | |
| </div> | |
| <div class="comparison-table-wrapper"> | |
| <table class="comparison-table"> | |
| <thead> | |
| <tr> | |
| <th class="col-feature">Vector</th> | |
| <th class="col-crsm">CRSM</th> | |
| <th class="col-aetheris">Aetheris</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td class="col-feature">Primary Driver</td> | |
| <td>Internal Latent State</td> | |
| <td>Sparse Expert Routing</td> | |
| </tr> | |
| <tr> | |
| <td class="col-feature">Inference Style</td> | |
| <td>Deliberative & Linear</td> | |
| <td>Associative & Parallel</td> | |
| </tr> | |
| <tr> | |
| <td class="col-feature">Best Use Case</td> | |
| <td>Code, Logic, Math</td> | |
| <td>Storytelling, Roleplay</td> | |
| </tr> | |
| <tr> | |
| <td class="col-feature">Memory</td> | |
| <td>Compressed State</td> | |
| <td>Selective Attention</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div | |
| style="text-align: center; margin-top: 5rem; color: #444; font-size: 0.8rem; font-family: var(--font-mono);"> | |
| // POMILON INTELLIGENCE LABS © 2025 // EXPERIMENTAL BUILD | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script src="static/js/app.js"></script> | |
| </body> | |
| </html> |