index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#f7f8f4">
  <meta name="description" content="OpenSAE builds open research infrastructure for studying neural network features, their effects on behavior, and how to test explanations.">
  <title>OpenSAE — From features to testable explanations</title>
  <style>
    :root, header, main, footer {
      --paper: #f7f8f4;
      --white: #fff;
      --ink: #162825;
      --muted: #52615b;
      --green: #17684e;
      --darkgreen: #124736;
      --mist: #e8f0e8;
      --line: #dce3da;
      --shadow: 0 8px 24px rgba(22, 48, 36, 0.05);
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.5; }
    a { color: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    a:focus-visible, button:focus-visible { outline: 3px solid #8dc7ac; outline-offset: 4px; }
    .container { width: min(1040px, calc(100% - 48px)); margin: 0 auto; }
    .topbar { position: relative; z-index: 3; padding: 12px 0; border-bottom: 1px solid rgba(34, 65, 50, 0.09); background: var(--paper); }
    .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    .brand { display: inline-flex; align-items: center; line-height: 0; text-decoration: none; }
    .logo { display: block; height: 40px; width: auto; mix-blend-mode: multiply; }
    .main-nav { display: flex; align-items: center; gap: 22px; }
    .main-nav a { text-decoration: none; font-weight: 600; color: #30483d; font-size: 16px; transition: color .2s; }
    .main-nav a:hover { color: var(--green); }
    .nav-github { padding: 10px 17px; border: 1px solid #b7c9bd; border-radius: 100px; }
    .hero { padding: 28px 0 32px; background: var(--paper); }
    .hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(220px, .62fr); align-items: center; gap: 28px; }
    .hero-copy { position: relative; z-index: 1; }
    .eyebrow { display: inline-block; margin: 0 0 8px; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--green); }
    h1, h2, h3, p { margin-top: 0; }
    h1 { max-width: 640px; margin: 0; font-size: clamp(36px, 4vw, 56px); line-height: 1.02; letter-spacing: -.055em; font-weight: 770; }
    .highlight { color: var(--green); }
    .lede { max-width: 520px; margin: 12px 0 16px; font-size: 21px; line-height: 1.4; color: var(--muted); letter-spacing: -.02em; }
    .actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
    .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; font-size: 16px; font-weight: 700; border-radius: 10px; padding: 8px 16px; transition: transform .24s, background .24s, border-color .24s, box-shadow .24s; }
    .btn:hover { transform: translateY(-2px); }
    .btn-primary { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
    .btn-primary:hover { background: var(--green); border-color: var(--green); box-shadow: 0 8px 22px rgba(23, 104, 78, .13); }
    .btn-secondary { border: 1px solid #c6d2c7; background: rgba(255,255,255,.7); }
    .btn-secondary:hover { background: white; border-color: #819c8c; }
    .arrow { display: inline-block; transition: transform .24s; font-size: 20px; line-height: 1; }
    .btn:hover .arrow, .text-link:hover .arrow { transform: translate(3px, -2px); }
    .hero-art { min-width: 0; position: relative; aspect-ratio: 1.15 / 1; max-height: 280px; background: var(--mist); border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
    .hero-art::before { content:""; position:absolute; inset:-20%; background:radial-gradient(ellipse at 54% 40%,rgba(255,255,255,.87),transparent 46%); pointer-events:none; }
    .hero-art svg { display: block; width: 94%; max-width: 520px; height:auto; position: relative; }
    .hero-art .ring { transform-origin: 270px 270px; animation: turn 48s linear infinite; }
    .hero-art .reverse-ring { transform-origin: 270px 270px; animation: turn 71s linear infinite reverse; }
    .hero-art .focus { animation: glow 4.8s ease-in-out infinite; transform-origin: 270px 270px; }
    .hero-art .signal { animation: signal 6s ease-in-out infinite; }
    .hero-art .signal.delay-1 { animation-delay: -2s; }
    .hero-art .signal.delay-2 { animation-delay: -4s; }
    .hero-art .path-line { stroke-dasharray: none; }
    @keyframes turn { to { transform: rotate(360deg); } }
    @keyframes glow { 0%,100% { transform:scale(1); opacity:.95 } 50% { transform:scale(1.055); opacity:1 } }
    @keyframes signal { 0%,100% { opacity:.35; r:7 } 50% { opacity:1; r:10 } }
    .rule { border-top: 1px solid var(--line); }
    .flagship { padding: 36px 0; background: var(--paper); }
    .section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: center; }
    h2 { font-size: clamp(30px, 3vw, 40px); line-height: 1.08; letter-spacing: -.045em; font-weight: 740; margin: 0 0 10px; }
    .section-text { font-size: 18px; max-width: 480px; color: var(--muted); line-height: 1.45; margin-bottom: 14px; }
    .text-link { display: inline-flex; gap: 12px; align-items: center; font-weight: 700; font-size: 18px; color: var(--green); text-decoration: none; }
    .work-card { padding: 8px 22px 16px; background: white; border: 1px solid #e4e9e1; border-radius: 16px; box-shadow: var(--shadow); }
    .step { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
    .step + .step { border-top: 1px solid var(--line); }
    .step-num { width: 32px; height: 32px; display:flex; align-items:center; justify-content:center; background:#e9f1e9; border-radius:10px; color: var(--green); font-weight: 760; font-size: 15px; }
    .step-label { font-size: 18px; font-weight: 710; letter-spacing: -.03em; }
    .numbers { display: flex; gap: 0; padding-top: 12px; margin-top: 8px; border-top:1px solid var(--line); }
    .stat { flex: 1; }
    .stat + .stat { border-left: 1px solid var(--line); padding-left: 24px; margin-left: 24px; }
    .stat strong { display: block; font-size: 32px; font-weight: 750; letter-spacing: -.05em; line-height: 1.1; }
    .stat span { display: block; color: var(--muted); font-size: 14px; line-height:1.35; padding-top: 2px; }
    .research { background: #e8efe8; padding: 32px 0 36px; }
    .section-head { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom: 16px; }
    .section-head h2 { max-width: 660px; margin: 0; }
    .research-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:19px; }
    .research-card { position:relative; display:flex; flex-direction:column; min-height:0; padding:18px 18px 14px; background:#f8faf6; border:1px solid #d5e1d6; border-radius:14px; text-decoration:none; transition:transform .25s, box-shadow .25s, border-color .25s; }
    .research-card:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(18,71,54,.08); border-color:#aac5b0; }
    .research-symbol { display:block; width:36px; height:36px; margin-bottom: 12px; }
    .research-card h3 { font-size:22px; letter-spacing:-.04em; margin:0 0 6px; line-height:1.15; }
    .research-card p { color:var(--muted); font-size:16px; line-height:1.4; max-width:none; margin-bottom:12px; }
    .research-card .card-arrow { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:18px; border-top:1px solid #dce5db; font-weight:700; font-size:17px; color:var(--green); }
    .research-card .card-arrow span:last-child { font-size:22px; }
    .closing { padding:32px 0; background: var(--paper); }
    .closing-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }
    .closing h2 { max-width:650px; margin:0; }
    .closing-actions { display:flex; align-items:center; gap:19px; flex-wrap:wrap; }
    footer { border-top:1px solid var(--line); padding:16px 0; background: var(--paper); }
    .footer-inner { display:flex; justify-content:space-between; align-items:center; gap:25px; color:#50665a; font-size:16px; }
    .footer-links { display:flex; flex-wrap:wrap; gap:23px; }
    .footer-links a { text-decoration:none; }
    .footer-links a:hover { color:var(--green); }
    @media (max-width:1100px) {
      .container { width: min(1040px, calc(100% - 40px)); }
      .hero-grid { grid-template-columns:minmax(0,1fr) minmax(180px,.55fr); gap:20px; }
      .hero { padding:24px 0 28px; }
      h1 { font-size: clamp(34px, 4.6vw, 48px); }
      .research-card { padding:16px; }
      .research-card h3 { font-size:20px; }
    }
    /* A Hugging Face organization card is much narrower than a standalone Space. */
    @media (max-width:780px) {
      .container { width:calc(100% - 32px); }
      .topbar { padding:10px 0; }
      .logo { height:36px; }
      .main-nav { gap:10px; }
      .main-nav a { font-size:15px; }
      .main-nav .nav-work, .main-nav .nav-research { display:none; }
      .hero { padding:20px 0 22px; }
      .hero-grid { display:flex; flex-direction:column; align-items:stretch; gap:16px; }
      h1 { max-width:none; font-size:clamp(32px, 7vw, 42px); letter-spacing:-.045em; }
      .lede { font-size:21px; margin:10px 0 14px; }
      .hero-art { aspect-ratio: 2.4/1; max-height:150px; border-radius:14px; }
      .hero-art svg { width:180px; max-width:46%; height:auto; }
      .flagship { padding:24px 0; }
      .section-grid { grid-template-columns:1fr; gap:16px; }
      h2 { font-size:clamp(28px, 6vw, 36px); }
      .section-text { font-size:17px; }
      .research { padding:24px 0 28px; }
      .research-grid { grid-template-columns:1fr; gap:10px; }
      .research-card { padding:16px; }
      .research-symbol { margin-bottom:8px; }
      .research-card p { margin-bottom:10px; }
      .section-head { margin-bottom:12px; }
      .closing { padding:24px 0; }
      .closing-inner { flex-direction:column; align-items:start; }
    }
    @media (max-width:430px) {
      .container { width:calc(100% - 28px); }
      .logo { height:32px; }
      .nav-github { padding:8px 12px; }
      .hero { padding:16px 0 18px; }
      h1 { font-size:clamp(30px, 9vw, 38px); }
      .eyebrow { font-size:13px; margin-bottom:6px; }
      .lede { font-size:21px; }
      .actions { align-items:stretch; }
      .btn { padding:8px 14px; font-size:15px; }
      .hero-art { aspect-ratio:2.6/1; max-height:120px; }
      .hero-art svg { width:140px; height:auto; }
      .work-card { padding:6px 16px 12px; }
      .step-label { font-size:17px; }
      .stat strong { font-size:28px; }
      .stat span { font-size:13px; }
      .stat + .stat { margin-left:12px; padding-left:12px; }
      .research-card h3 { font-size:20px; }
      .closing-actions { gap:10px; }
      .footer-inner { display:block; }
      .footer-links { margin-top:8px; }
    }
    @media(prefers-reduced-motion:reduce) {
      html { scroll-behavior:auto; }
      *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
    }
  </style>
</head>
<body>
  <header class="topbar">
    <div class="container topbar-inner">
      <a class="brand" href="#top" aria-label="OpenSAE homepage">
        <img class="logo" src="https://huggingface.co/spaces/OpenSAE/README/resolve/main/assets/opensae_banner.png" alt="OpenSAE" width="2244" height="701">
      </a>
      <nav class="main-nav" aria-label="Main navigation">
        <a class="nav-work" href="#saebase">SAEBase</a>
        <a class="nav-research" href="#research">Research</a>
        <a class="nav-github" href="https://github.com/OpenSAE" target="_blank" rel="noopener noreferrer">GitHub <span aria-hidden="true">↗</span></a>
      </nav>
    </div>
  </header>

  <main id="top">
    <section class="hero" aria-labelledby="main-heading">
      <div class="container hero-grid">
        <div class="hero-copy">
          <p class="eyebrow">Open research in mechanistic interpretability</p>
          <h1 id="main-heading">From features<br>to <span class="highlight">testable</span><br>explanations.</h1>
          <p class="lede">Research tools for understanding how model features influence behavior.</p>
          <div class="actions">
            <a class="btn btn-primary" href="https://huggingface.co/spaces/OpenSAE/SAEBase" target="_blank" rel="noopener noreferrer">Explore SAEBase <span class="arrow" aria-hidden="true">↗</span></a>
            <a class="btn btn-secondary" href="#research">Our research <span class="arrow" aria-hidden="true">↘</span></a>
          </div>
        </div>
        <div class="hero-art" aria-label="Animated illustration of six connected features around a shared representation" role="img">
          <svg viewBox="0 0 540 540" aria-hidden="true">
            <circle cx="270" cy="270" r="191" fill="none" stroke="#cbd9cd" stroke-width="1.7" />
            <circle cx="270" cy="270" r="151" fill="none" stroke="#d9e3d9" stroke-width="1.8" />
            <g class="ring">
              <circle cx="270" cy="270" r="215" fill="none" stroke="#cadbcf" stroke-width="2" stroke-dasharray="4 14" />
              <circle cx="270" cy="55" r="5" fill="#b1cdb9" />
              <circle cx="270" cy="485" r="5" fill="#b1cdb9" />
            </g>
            <g class="reverse-ring">
              <circle cx="270" cy="270" r="180" fill="none" stroke="#c2d7c6" stroke-width="2" stroke-dasharray="1 22" />
            </g>
            <path class="path-line" d="M270 116 L402 193 L402 347 L270 424 L138 347 L138 193 Z" fill="none" stroke="#366d56" stroke-width="3.2" stroke-linejoin="round" />
            <path d="M270 270 L270 116 M270 270 L402 193 M270 270 L402 347 M270 270 L270 424 M270 270 L138 347 M270 270 L138 193" fill="none" stroke="#77ac8d" stroke-width="3" opacity=".81" />
            <circle cx="270" cy="270" r="70" fill="#c1ddca" opacity=".54" />
            <circle cx="270" cy="270" r="45" fill="#f6fbf6" stroke="#42775d" stroke-width="3" />
            <g class="focus"><circle cx="270" cy="270" r="20" fill="#17684e" /><circle cx="270" cy="270" r="8" fill="#f7fff6" /></g>
            <circle class="signal" cx="270" cy="116" r="8" fill="#17684e" stroke="#f7fff6" stroke-width="3" />
            <circle class="signal delay-1" cx="402" cy="193" r="8" fill="#17684e" stroke="#f7fff6" stroke-width="3" />
            <circle class="signal delay-2" cx="402" cy="347" r="8" fill="#17684e" stroke="#f7fff6" stroke-width="3" />
            <circle class="signal" cx="270" cy="424" r="8" fill="#17684e" stroke="#f7fff6" stroke-width="3" />
            <circle class="signal delay-1" cx="138" cy="347" r="8" fill="#17684e" stroke="#f7fff6" stroke-width="3" />
            <circle class="signal delay-2" cx="138" cy="193" r="8" fill="#17684e" stroke="#f7fff6" stroke-width="3" />
          </svg>
        </div>
      </div>
    </section>

    <section class="flagship rule" id="saebase" aria-labelledby="saebase-heading">
      <div class="container section-grid">
        <div>
          <p class="eyebrow">SAEBase</p>
          <h2 id="saebase-heading">One place to study what features do.</h2>
          <p class="section-text">Capture activations, intervene on features, and evaluate the results in a reproducible workflow.</p>
          <a class="text-link" href="https://huggingface.co/spaces/OpenSAE/SAEBase" target="_blank" rel="noopener noreferrer">Open the research lab <span class="arrow" aria-hidden="true">↗</span></a>
        </div>
        <div class="work-card">
          <div class="step"><span class="step-num">1</span><span class="step-label">Capture</span></div>
          <div class="step"><span class="step-num">2</span><span class="step-label">Intervene</span></div>
          <div class="step"><span class="step-num">3</span><span class="step-label">Evaluate</span></div>
          <div class="numbers">
            <div class="stat"><strong>18</strong><span>Model–SAE configurations</span></div>
            <div class="stat"><strong>48</strong><span>Evaluated layer sites</span></div>
          </div>
        </div>
      </div>
    </section>

    <section class="research" id="research" aria-labelledby="research-heading">
      <div class="container">
        <div class="section-head"><h2 id="research-heading">The questions<br>we work on.</h2></div>
        <div class="research-grid">
          <a class="research-card" href="https://github.com/OpenSAE/SAE-Behavioral-Compositionality" target="_blank" rel="noopener noreferrer">
            <svg class="research-symbol" viewBox="0 0 64 64" aria-hidden="true"><path d="M11 30h15m12 0h15M32 10v15m0 14v15" fill="none" stroke="#17684e" stroke-width="3" stroke-linecap="round"/><circle cx="32" cy="32" r="8" fill="#17684e"/><circle cx="11" cy="30" r="5" fill="#93bda3"/><circle cx="53" cy="30" r="5" fill="#93bda3"/></svg>
            <h3>SAR</h3>
            <p>How do features work together to shape behavior?</p>
            <span class="card-arrow"><span>Explore research</span><span aria-hidden="true">↗</span></span>
          </a>
          <a class="research-card" href="https://github.com/OpenSAE/Redistribution-Sensitivity-Score" target="_blank" rel="noopener noreferrer">
            <svg class="research-symbol" viewBox="0 0 64 64" aria-hidden="true"><path d="M8 14h18l12 17h18M8 50h18l12-17h18" fill="none" stroke="#17684e" stroke-width="3" stroke-linecap="round"/><circle cx="8" cy="14" r="5" fill="#17684e"/><circle cx="8" cy="50" r="5" fill="#17684e"/><circle cx="56" cy="31" r="5" fill="#93bda3"/></svg>
            <h3>RSS</h3>
            <p>What changes inside a model when the prompt changes?</p>
            <span class="card-arrow"><span>Explore research</span><span aria-hidden="true">↗</span></span>
          </a>
          <a class="research-card" href="https://github.com/OpenSAE/SAE-Input-Localization" target="_blank" rel="noopener noreferrer">
            <svg class="research-symbol" viewBox="0 0 64 64" aria-hidden="true"><path d="M11 51L32 11l21 40" fill="none" stroke="#17684e" stroke-width="3" stroke-linejoin="round"/><circle cx="11" cy="51" r="5" fill="#93bda3"/><circle cx="53" cy="51" r="5" fill="#93bda3"/><circle cx="32" cy="11" r="6" fill="#17684e"/></svg>
            <h3>Input Localization</h3>
            <p>Which inputs are responsible for feature activations?</p>
            <span class="card-arrow"><span>Explore research</span><span aria-hidden="true">↗</span></span>
          </a>
        </div>
      </div>
    </section>

    <section class="closing" aria-labelledby="closing-heading">
      <div class="container closing-inner">
        <div>
          <p class="eyebrow">Open science</p>
          <h2 id="closing-heading">Research should be easy to examine. And easier to build on.</h2>
        </div>
        <div class="closing-actions">
          <a class="btn btn-primary" href="https://github.com/OpenSAE" target="_blank" rel="noopener noreferrer">Explore the code <span class="arrow" aria-hidden="true">↗</span></a>
          <a class="text-link" href="https://huggingface.co/datasets/OpenSAE/SAEBase-Evaluation" target="_blank" rel="noopener noreferrer">Evaluation data <span class="arrow" aria-hidden="true">↗</span></a>
        </div>
      </div>
    </section>
  </main>

  <footer>
    <div class="container footer-inner">
      <div class="footer-links"><a href="https://github.com/OpenSAE" target="_blank" rel="noopener noreferrer">GitHub</a><a href="https://huggingface.co/spaces/OpenSAE/SAEBase" target="_blank" rel="noopener noreferrer">SAEBase</a><a href="mailto:hma232@wisc.edu">Contact</a></div>
    </div>
  </footer>
</body>
</html>