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