Spaces:

CubicLabs
/

README

Runtime error

File size: 19,802 Bytes

<!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>