Hugging Face's logo

Spaces:
CubicLabs
/
README
Runtime error

App Files Community
README / index.html
Restrictated's picture
Restrictated
Update index.html
89d0c64 verified
Raw
History Blame Contribute Delete
19.8 kB
<!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">&gt; 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 &amp; Head of AI Research</span></div>
 <div class="card team-card"><div class="avatar"></div><b>Jasser</b><span>CTO &amp; 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 &amp; 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;
 /* ---------- theme toggle ---------- */
 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) { /* storage unavailable, theme still applies for session */ }
 });
 /* ---------- project card open (click + keyboard) ---------- */
 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();
 }
 });
 /* ---------- calculator tabs ---------- */
 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];
 }
 /* Memory Usage — weights at quantization + KV-cache overhead (assumes 12 layers / 768 dim default arch) */
 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; /* approximate default arch */
 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); });
 /* Inference Speed — heuristic tok/s from param count + thread count on CPU */
 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);
 /* run once on load so panes aren't showing placeholder dashes */
 calcMemoryUsage();
 calcInferenceSpeed();
})();
</script>
</body>
</html>