| <!DOCTYPE html> |
| <html lang="en" data-theme="dark"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Cubic — AI and Cybersecurity Research</title> |
| <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=IBM+Plex+Mono:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&display=swap" rel="stylesheet"> |
| <style> |
| :root{ |
| --bg:#0a0a0b; |
| --panel:#131316; |
| --panel-2:#18181c; |
| --line:#232328; |
| --line-bright:#33333a; |
| --accent:#c9c8c2; |
| --silk:#f2f1ec; |
| --text:#b9b9bd; |
| --muted:#6f6f76; |
| } |
| [data-theme="light"]{ |
| --bg:#f1efe9; |
| --panel:#fbfaf6; |
| --panel-2:#eeece4; |
| --line:#dcd9cf; |
| --line-bright:#b8b4a4; |
| --accent:#3c3c3e; |
| --silk:#17171a; |
| --text:#3c3c3e; |
| --muted:#7a7a76; |
| } |
| *{box-sizing:border-box;} |
| html{scroll-behavior:smooth;} |
| body{ |
| margin:0; |
| font-family:'Source Serif 4',Georgia,serif; |
| color:var(--text); |
| background:var(--bg); |
| transition:background 0.25s ease, color 0.25s ease; |
| } |
| ::selection{background:var(--accent);color:#1a0f08;} |
| a{color:inherit;} |
| |
| .wrap{max-width:960px;margin:0 auto;padding:0 24px 90px;} |
| header{ |
| display:flex; |
| align-items:center; |
| justify-content:space-between; |
| padding:20px 0; |
| border-bottom:1px solid var(--line); |
| margin-bottom:56px; |
| } |
| .brand{display:flex;align-items:center;gap:9px;} |
| .chip{width:22px;height:22px;flex-shrink:0;} |
| .chip rect{fill:none;stroke:var(--accent);stroke-width:1.4;} |
| .chip circle{fill:var(--accent);} |
| .chip line{stroke:var(--accent);stroke-width:1.2;} |
| .brand-name{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:16px;letter-spacing:0.01em;color:var(--silk);} |
| nav{display:flex;align-items:center;gap:16px;} |
| nav a{text-decoration:none;color:var(--muted);font-size:13px;font-weight:500;font-family:'IBM Plex Mono',monospace;border-bottom:1px solid transparent;} |
| nav a:hover{color:var(--silk);border-color:var(--accent);} |
| .theme-row{display:flex;align-items:center;gap:6px;margin-left:6px;} |
| .switch-label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted);} |
| #theme-toggle{ |
| width:32px;height:17px; |
| border:1px solid var(--line-bright); |
| border-radius:3px; |
| background:var(--panel-2); |
| position:relative; |
| cursor:pointer; |
| padding:0; |
| } |
| #theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} |
| #theme-toggle::after{ |
| content:""; |
| position:absolute; |
| top:1px;left:1px; |
| width:13px;height:13px; |
| border-radius:2px; |
| background:var(--accent); |
| transition:transform 0.16s ease; |
| } |
| [data-theme="light"] #theme-toggle::after{transform:translateX(15px);} |
| |
| .eyebrow{ |
| font-family:'IBM Plex Mono',monospace; |
| font-size:11.5px; |
| color:var(--accent); |
| letter-spacing:0.09em; |
| text-transform:uppercase; |
| margin-bottom:16px; |
| } |
| h1{ |
| font-family:'Source Serif 4',Georgia,serif; |
| font-size:38px; |
| line-height:1.22; |
| font-weight:600; |
| color:var(--silk); |
| margin:0 0 16px; |
| max-width:620px; |
| letter-spacing:-0.005em; |
| } |
| .tagline{color:var(--muted);font-size:16px;line-height:1.65;max-width:540px;margin:0 0 44px;} |
| |
| .metrics{ |
| display:grid; |
| grid-template-columns:repeat(5,1fr); |
| border:1px solid var(--line); |
| border-radius:8px; |
| overflow:hidden; |
| margin-bottom:68px; |
| background:linear-gradient(180deg, var(--panel-2), var(--panel)); |
| } |
| .metric{ |
| padding:19px 12px; |
| text-align:center; |
| border-right:1px solid var(--line); |
| } |
| .metric:last-child{border-right:none;} |
| .metric b{ |
| display:block; |
| font-family:'IBM Plex Mono',monospace; |
| font-size:22px; |
| font-weight:600; |
| color:var(--silk); |
| margin-bottom:5px; |
| letter-spacing:-0.01em; |
| } |
| .metric > span{font-size:11px;color:var(--muted);letter-spacing:0.04em;text-transform:uppercase;font-family:'IBM Plex Mono',monospace;} |
| |
| section{margin-bottom:64px;} |
| h2{ |
| font-family:'IBM Plex Mono',monospace; |
| font-size:12px; |
| text-transform:uppercase; |
| letter-spacing:0.09em; |
| color:var(--muted); |
| margin:0 0 20px; |
| display:flex; |
| align-items:center; |
| gap:10px; |
| } |
| h2::after{content:"";flex:1;height:1px;background:var(--line-bright);} |
| |
| .card{ |
| background:linear-gradient(180deg, var(--panel-2), var(--panel)); |
| border:1px solid var(--line); |
| border-radius:8px; |
| padding:18px; |
| } |
| |
| .focus-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;} |
| .focus-item{transition:border-color 0.15s ease;} |
| .focus-item:hover{border-color:var(--line-bright);} |
| .focus-item b{font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--silk);display:block;margin-bottom:7px;} |
| .focus-item p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.55;} |
| |
| .project-card{ |
| cursor:pointer; |
| transition:border-color 0.15s ease, transform 0.15s ease; |
| display:block; |
| width:100%; |
| text-align:left; |
| font:inherit; |
| color:inherit; |
| } |
| .project-card:hover,.project-card:focus-visible{ |
| border-color:var(--line-bright); |
| transform:translateY(-1px); |
| } |
| .project-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} |
| .project-card h3{font-family:'IBM Plex Mono',monospace;font-size:16px;color:var(--silk);margin:0 0 14px;font-weight:600;} |
| .project-meta{ |
| display:grid; |
| grid-template-columns:repeat(4,1fr); |
| gap:12px; |
| margin-bottom:14px; |
| padding-bottom:14px; |
| border-bottom:1px solid var(--line); |
| } |
| .project-meta div{font-size:12px;} |
| .project-meta b{display:block;color:var(--silk);font-family:'IBM Plex Mono',monospace;font-size:12.5px;margin-bottom:3px;} |
| .project-meta span{color:var(--muted);} |
| .project-card p.hint{font-size:12px;color:var(--muted);margin:0;font-family:'IBM Plex Mono',monospace;} |
| |
| .calc-panel{padding:0;overflow:hidden;} |
| .calc-tabs{display:flex;border-bottom:1px solid var(--line);background:var(--panel);} |
| .calc-tab{ |
| background:none; |
| border:none; |
| border-right:1px solid var(--line); |
| color:var(--muted); |
| font-family:'IBM Plex Mono',monospace; |
| font-size:12px; |
| letter-spacing:0.02em; |
| padding:12px 16px; |
| cursor:pointer; |
| transition:color 0.12s ease, background 0.12s ease; |
| } |
| .calc-tab:hover{color:var(--silk);} |
| .calc-tab.active{color:var(--silk);background:var(--panel-2);box-shadow:inset 0 -2px 0 var(--accent);} |
| .calc-tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;} |
| |
| .calc-body{padding:20px;} |
| .calc-pane{display:none;} |
| .calc-pane.active{display:block;} |
| .calc-desc{font-size:13px;color:var(--muted);margin:0 0 16px;line-height:1.55;} |
| .calc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px;} |
| .calc-row label{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text);} |
| .calc-row input,.calc-row select{ |
| width:180px; |
| background:var(--panel); |
| border:1px solid var(--line); |
| color:var(--text); |
| border-radius:6px; |
| padding:8px 10px; |
| font-size:13px; |
| font-family:'IBM Plex Mono',monospace; |
| outline:none; |
| transition:border-color 0.15s ease; |
| } |
| .calc-row input:focus,.calc-row select:focus{border-color:var(--line-bright);} |
| .calc-result{ |
| margin-top:16px; |
| padding:13px 14px; |
| background:var(--panel); |
| border:1px solid var(--line-bright); |
| border-radius:6px; |
| font-size:13.5px; |
| color:var(--muted); |
| font-family:'IBM Plex Mono',monospace; |
| } |
| .calc-result b{color:var(--silk);font-size:15px;} |
| |
| @media (max-width:720px){ |
| .calc-row{flex-direction:column;align-items:flex-start;} |
| .calc-row input,.calc-row select{width:100%;} |
| } |
| |
| .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;} |
| .team-card{text-align:center;} |
| .avatar{ |
| width:34px;height:34px; |
| margin:0 auto 10px; |
| border:1px solid var(--accent); |
| border-radius:50%; |
| position:relative; |
| } |
| .avatar::before{ |
| content:""; |
| position:absolute; |
| inset:6px; |
| border-radius:50%; |
| background:var(--accent); |
| opacity:0.4; |
| } |
| .team-card b{display:block;font-family:'IBM Plex Mono',monospace;font-size:13.5px;color:var(--silk);margin-bottom:4px;} |
| .team-card span{font-size:11.5px;color:var(--muted);font-family:'IBM Plex Mono',monospace;} |
| |
| .features{display:grid;grid-template-columns:repeat(2,1fr);gap:9px 22px;font-size:13.5px;margin:0;padding:0;} |
| .features li{list-style:none;padding-left:16px;position:relative;color:var(--muted);} |
| .features li::before{content:"—";position:absolute;left:0;color:var(--accent);} |
| |
| footer{ |
| display:flex; |
| align-items:center; |
| justify-content:space-between; |
| padding-top:22px; |
| border-top:1px solid var(--line-bright); |
| font-size:12px; |
| color:var(--muted); |
| font-family:'IBM Plex Mono',monospace; |
| } |
| footer .flinks a{text-decoration:none;color:var(--text);margin-left:14px;} |
| footer .flinks a:hover{color:var(--accent);} |
| |
| @media (max-width:720px){ |
| .metrics{grid-template-columns:repeat(2,1fr);} |
| .metric{border-bottom:1px solid var(--line-bright);} |
| .focus-grid,.team-grid{grid-template-columns:1fr;} |
| .project-meta{grid-template-columns:repeat(2,1fr);} |
| h1{font-size:28px;} |
| } |
| @media print{ |
| #theme-toggle,.theme-row{display:none;} |
| body{background:#fff;color:#000;} |
| } |
| </style> |
| </head> |
| <body> |
|
|
| <div class="wrap"> |
| <header> |
| <div class="brand"> |
| <svg class="chip" viewBox="0 0 24 24"> |
| <rect x="6" y="6" width="12" height="12" rx="1.5"/> |
| <line x1="9" y1="2" x2="9" y2="6"/><line x1="15" y1="2" x2="15" y2="6"/> |
| <line x1="9" y1="18" x2="9" y2="22"/><line x1="15" y1="18" x2="15" y2="22"/> |
| <line x1="2" y1="9" x2="6" y2="9"/><line x1="2" y1="15" x2="6" y2="15"/> |
| <line x1="18" y1="9" x2="22" y2="9"/><line x1="18" y1="15" x2="22" y2="15"/> |
| <circle cx="12" cy="12" r="1.6"/> |
| </svg> |
| <span class="brand-name">CUBIC</span> |
| </div> |
| <nav> |
| <a href="https://github.com/Cubic-Labs" target="_blank" rel="noopener">GitHub</a> |
| <a href="https://huggingface.co/Cubic" target="_blank" rel="noopener">HuggingFace</a> |
| <div class="theme-row"> |
| <span class="switch-label">0</span> |
| <button id="theme-toggle" type="button" aria-label="Toggle light and dark theme" aria-pressed="false"></button> |
| <span class="switch-label">1</span> |
| </div> |
| </nav> |
| </header> |
|
|
| <div class="eyebrow">AI · Cybersecurity Research</div> |
| <h1>Accessible AI systems that run on consumer hardware.</h1> |
| <p class="tagline">CPU-first training, open-source research, and practical deployment — no data center required.</p> |
|
|
| <div class="metrics"> |
| <div class="metric"><b>27</b><span>Models</span></div> |
| <div class="metric"><b>1</b><span>Research paper</span></div> |
| <div class="metric"><b>3</b><span>Team members</span></div> |
| <div class="metric"><b>$0.004</b><span>Min training cost</span></div> |
| <div class="metric"><b>100%</b><span>Open source</span></div> |
| </div> |
|
|
| <section> |
| <h2>Research Focus</h2> |
| <div class="focus-grid"> |
| <div class="card focus-item"> |
| <b>AI Development</b> |
| <p>CPU-first architectures and open-source models.</p> |
| </div> |
| <div class="card focus-item"> |
| <b>Cybersecurity</b> |
| <p>AI-powered security tools and threat detection.</p> |
| </div> |
| </div> |
| </section> |
|
|
| <section> |
| <h2>Projects</h2> |
| <div class="card project-card" data-url="https://huggingface.co/Cubic" tabindex="0" role="button" aria-label="Open AXL project on HuggingFace"> |
| <h3>AXL — CPU-First Code Generation</h3> |
| <div class="project-meta"> |
| <div><b>27</b><span>models, 566K–318M params</span></div> |
| <div><b>$0.004</b><span>training cost / model</span></div> |
| <div><b>Multi-scale</b><span>byte-level transformer</span></div> |
| <div><b>Apache 2.0</b><span>license</span></div> |
| </div> |
| <p class="hint">> click for the full AXL detail page</p> |
| </div> |
| </section> |
|
|
| <section> |
| <h2>Interactive Tools</h2> |
| <div class="calc-panel card"> |
| <div class="calc-tabs" role="tablist" aria-label="Calculator selector"> |
| <button type="button" class="calc-tab active" data-calc="memory-usage" role="tab" aria-selected="true">Memory Usage</button> |
| <button type="button" class="calc-tab" data-calc="inference-speed" role="tab" aria-selected="false">Inference Speed</button> |
| </div> |
|
|
| <div class="calc-body"> |
|
|
| <div class="calc-pane active" data-pane="memory-usage"> |
| <p class="calc-desc">Total estimated RAM: weights at your chosen quantization plus KV-cache overhead.</p> |
| <div class="calc-row"> |
| <label for="mu-params">Parameters</label> |
| <input type="number" id="mu-params" min="1" step="1" value="318000000"> |
| </div> |
| <div class="calc-row"> |
| <label for="mu-quant">Quantization</label> |
| <select id="mu-quant"> |
| <option value="4">Q4 (4-bit)</option> |
| <option value="8" selected>Q8 (8-bit)</option> |
| <option value="16">F16 (16-bit)</option> |
| </select> |
| </div> |
| <div class="calc-row"> |
| <label for="mu-context">Context (tokens)</label> |
| <input type="number" id="mu-context" min="0" step="1" value="4096"> |
| </div> |
| <div class="calc-result" id="mu-result">Estimated RAM: <b>—</b></div> |
| </div> |
|
|
| <div class="calc-pane" data-pane="inference-speed"> |
| <p class="calc-desc">Estimated CPU tokens/sec by parameter count (byte-level transformer, single-thread baseline).</p> |
| <div class="calc-row"> |
| <label for="is-params">Model size (params)</label> |
| <select id="is-params"> |
| <option value="566000">566K (smallest AXL)</option> |
| <option value="8000000">8M</option> |
| <option value="60000000">60M</option> |
| <option value="150000000">150M</option> |
| <option value="318000000" selected>318M (largest AXL)</option> |
| </select> |
| </div> |
| <div class="calc-row"> |
| <label for="is-threads">CPU threads</label> |
| <input type="number" id="is-threads" min="1" max="64" step="1" value="4"> |
| </div> |
| <div class="calc-result" id="is-result">Estimated: <b>— tok/s</b></div> |
| </div> |
|
|
| </div> |
| </div> |
| </section> |
|
|
| <section> |
| <h2>Team</h2> |
| <div class="team-grid"> |
| <div class="card team-card"><div class="avatar"></div><b>Kennedy</b><span>CEO & Head of AI Research</span></div> |
| <div class="card team-card"><div class="avatar"></div><b>Jasser</b><span>CTO & Head of Cybersecurity</span></div> |
| <div class="card team-card"><div class="avatar"></div><b>Taem</b><span>Head of Marketing/Sales/Technical Assist</span></div> |
| </div> |
| </section> |
|
|
| <section> |
| <h2>Key Features</h2> |
| <ul class="features"> |
| <li>Dark/Light theme toggle</li> |
| <li>Two live calculators (memory & speed)</li> |
| <li>Print-friendly CSS</li> |
| <li>Responsive design</li> |
| </ul> |
| </section> |
|
|
| <footer> |
| <span>CPU-first AI for everyone.</span> |
| <span class="flinks"> |
| <a href="https://github.com/Cubic-Labs" target="_blank" rel="noopener">GitHub</a> |
| <a href="https://huggingface.co/Cubic" target="_blank" rel="noopener">HuggingFace</a> |
| </span> |
| </footer> |
| </div> |
|
|
| <script> |
| (function(){ |
| 'use strict'; |
| |
| var root = document.documentElement; |
| |
| |
| var THEME_KEY = 'cubic-theme'; |
| var toggle = document.getElementById('theme-toggle'); |
| |
| function applyTheme(mode){ |
| root.setAttribute('data-theme', mode); |
| toggle.setAttribute('aria-pressed', mode === 'light' ? 'true' : 'false'); |
| } |
| |
| var storedTheme = null; |
| try { storedTheme = window.localStorage.getItem(THEME_KEY); } catch (e) { storedTheme = null; } |
| if (storedTheme === 'light' || storedTheme === 'dark') { |
| applyTheme(storedTheme); |
| } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) { |
| applyTheme('light'); |
| } |
| |
| toggle.addEventListener('click', function(){ |
| var next = root.getAttribute('data-theme') === 'light' ? 'dark' : 'light'; |
| applyTheme(next); |
| try { window.localStorage.setItem(THEME_KEY, next); } catch (e) { } |
| }); |
| |
| |
| var projectCard = document.querySelector('.project-card'); |
| function openProject(){ |
| window.open(projectCard.dataset.url || 'https://huggingface.co/Cubic', '_blank', 'noopener'); |
| } |
| projectCard.addEventListener('click', openProject); |
| projectCard.addEventListener('keydown', function(e){ |
| if (e.key === 'Enter' || e.key === ' ') { |
| e.preventDefault(); |
| openProject(); |
| } |
| }); |
| |
| |
| var calcTabs = Array.prototype.slice.call(document.querySelectorAll('.calc-tab')); |
| var calcPanes = Array.prototype.slice.call(document.querySelectorAll('.calc-pane')); |
| |
| calcTabs.forEach(function(tab){ |
| tab.addEventListener('click', function(){ |
| var target = tab.dataset.calc; |
| calcTabs.forEach(function(t){ |
| t.classList.toggle('active', t === tab); |
| t.setAttribute('aria-selected', t === tab ? 'true' : 'false'); |
| }); |
| calcPanes.forEach(function(p){ |
| p.classList.toggle('active', p.dataset.pane === target); |
| }); |
| }); |
| }); |
| |
| function fmtBytes(bytes){ |
| if (bytes < 1024) return bytes.toFixed(0) + ' B'; |
| var units = ['KB','MB','GB','TB']; |
| var val = bytes; |
| var i = -1; |
| do { val /= 1024; i++; } while (val >= 1024 && i < units.length - 1); |
| return val.toFixed(2) + ' ' + units[i]; |
| } |
| |
| |
| var muParams = document.getElementById('mu-params'); |
| var muQuant = document.getElementById('mu-quant'); |
| var muContext = document.getElementById('mu-context'); |
| var muResult = document.getElementById('mu-result'); |
| function calcMemoryUsage(){ |
| var params = parseFloat(muParams.value) || 0; |
| var bitsPerParam = parseFloat(muQuant.value) || 8; |
| var context = parseFloat(muContext.value) || 0; |
| var weightBytes = params * (bitsPerParam / 8); |
| var kvBytes = 2 * 12 * context * 768 * 2; |
| var total = weightBytes + kvBytes; |
| muResult.innerHTML = 'Estimated RAM: <b>' + fmtBytes(total) + '</b>'; |
| } |
| [muParams, muQuant, muContext].forEach(function(el){ el.addEventListener('input', calcMemoryUsage); el.addEventListener('change', calcMemoryUsage); }); |
| |
| |
| var isParams = document.getElementById('is-params'); |
| var isThreads = document.getElementById('is-threads'); |
| var isResult = document.getElementById('is-result'); |
| function calcInferenceSpeed(){ |
| var params = parseFloat(isParams.value) || 1; |
| var threads = Math.max(1, parseFloat(isThreads.value) || 1); |
| var base = 40 / Math.sqrt(params / 1e6); |
| var estimate = base * Math.pow(threads, 0.7); |
| isResult.innerHTML = 'Estimated: <b>' + estimate.toFixed(1) + ' tok/s</b>'; |
| } |
| isParams.addEventListener('change', calcInferenceSpeed); |
| isThreads.addEventListener('input', calcInferenceSpeed); |
| |
| |
| calcMemoryUsage(); |
| calcInferenceSpeed(); |
| |
| })(); |
| </script> |
| </body> |
| </html> |
