index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Explore Super Intelligence capabilities including reasoning, coding, agents, world models, autonomy, reliability and verification.">
<title>Capability Explorer</title>
<style>
:root{
  --bg:#06111f;--panel:#0c1930;--line:#28425f;--text:#f4f8ff;
  --muted:#9eb4c9;--cyan:#4fdcff;--violet:#a58aff;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:
    radial-gradient(circle at 14% -7%,rgba(79,220,255,.14),transparent 31%),
    radial-gradient(circle at 90% 0,rgba(165,138,255,.12),transparent 28%),
    var(--bg);
  color:var(--text);
  font:15px/1.55 Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.wrap{max-width:1180px;margin:auto;padding:0 22px}
.hero{text-align:center;padding:64px 0 28px}
.kicker{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:7px 12px;background:#0a1830;color:var(--cyan);font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.1em}
h1{font-size:clamp(44px,8vw,76px);line-height:1;margin:18px 0 13px;letter-spacing:-.055em}
.grad{background:linear-gradient(90deg,var(--cyan),#dce8ff,var(--violet));background-clip:text;-webkit-background-clip:text;color:transparent}
.hero p{max-width:820px;margin:auto;color:var(--muted);font-size:18px}

.controls{
  display:grid;grid-template-columns:1.5fr 1fr;gap:10px;padding:18px 0;
}
input,select{
  width:100%;background:#08172b;color:var(--text);border:1px solid var(--line);
  border-radius:11px;padding:11px 12px;outline:none
}

.layout{display:grid;grid-template-columns:1.05fr .95fr;gap:15px;padding-bottom:50px}
.panel{border:1px solid var(--line);border-radius:18px;padding:18px;background:linear-gradient(150deg,#10213d,#09172b);box-shadow:0 18px 44px rgba(0,0,0,.22)}
.ey{font-size:10px;color:var(--cyan);font-weight:850;text-transform:uppercase;letter-spacing:.08em}
h2{margin:3px 0 7px;font-size:25px;letter-spacing:-.03em}
.desc{color:var(--muted);font-size:13px}

.capgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:14px}
.capbtn{
  text-align:left;border:1px solid #274562;background:#0a1a31;color:#dbe7f2;
  border-radius:12px;padding:11px;cursor:pointer
}
.capbtn b{display:block;font-size:12px}.capbtn span{font-size:10px;color:var(--muted)}
.capbtn.active{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(79,220,255,.08)}

.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
.tag{border:1px solid #2e4b69;background:#0a1c34;color:#c7d8e7;border-radius:999px;padding:5px 7px;font-size:10px}

.methods{margin-top:15px;border-top:1px solid var(--line);padding-top:12px}
.method{padding:9px 0;border-bottom:1px solid #1e344e}
.method b{font-size:11px;display:block}.method span{font-size:10px;color:var(--muted)}

.metric{margin:12px 0}
.mt{display:flex;justify-content:space-between;font-size:11px;font-weight:800}
.bar{height:7px;background:#172943;border-radius:99px;overflow:hidden;margin-top:5px}
.fill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--violet))}

.siBox{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.siBox p{color:var(--muted);font-size:11px;margin:5px 0 0}

.empty{display:none;color:var(--muted);padding:22px 0}
.note{margin-top:14px;color:var(--muted);font-size:11px}
footer{border-top:1px solid var(--line);padding:28px 0 44px;color:var(--muted);font-size:13px}
footer strong{color:var(--text)}
@media(max-width:900px){.layout{grid-template-columns:1fr}.controls{grid-template-columns:1fr}}
@media(max-width:560px){.capgrid{grid-template-columns:1fr}}
</style>
</head>
<body>

<header class="hero">
<div class="wrap">
  <span class="kicker">Super Intelligence · Capability Evaluation</span>
  <h1>Capability <span class="grad">Explorer</span></h1>
  <p>Explore the capability dimensions behind advanced AI, AGI and Super Intelligence.</p>
</div>
</header>

<main class="wrap">
  <section class="controls">
    <input id="search" placeholder="Search capability, method or dependency…" aria-label="Search capabilities">
    <select id="category">
      <option value="all">All capability categories</option>
    </select>
  </section>

  <section class="layout">
    <div class="panel">
      <div class="ey">Capability map</div>
      <h2>Choose a capability</h2>
      <div class="desc">A multidimensional view of advanced AI capability.</div>
      <div class="capgrid" id="capgrid"></div>
      <div class="empty" id="empty">No capability matches the current filter.</div>
    </div>

    <aside class="panel">
      <div class="ey" id="detailCategory"></div>
      <h2 id="detailName"></h2>
      <div class="desc" id="detailDesc"></div>

      <div class="tags" id="dependencies"></div>

      <div class="methods">
        <div class="ey">Typical evaluation methods</div>
        <div id="methods"></div>
      </div>

      <div class="methods">
        <div class="ey">Conceptual profile</div>
        <div id="metrics"></div>
      </div>

      <div class="siBox">
        <div class="ey">Relevance to Super Intelligence</div>
        <p id="relevance"></p>
      </div>

      <div class="note">Profiles are conceptual and educational. They do not score or rank commercial models.</div>
    </aside>
  </section>
</main>

<footer>
<div class="wrap">
  <strong>Capability Explorer</strong> — an independent Hugging Face Space.<br>
  Collaboration and partnerships: <strong>agenten@magenta.de</strong>
</div>
</footer>

<script>
const caps = [
{
  name:"Reasoning",category:"Cognition",
  desc:"Multi-step problem solving, decomposition, search, verification and self-correction.",
  deps:["Models","Post-Training","Test-Time Compute","Verification"],
  methods:["Math and logic tasks","Scientific reasoning","Multi-step problem solving","Verifier-backed tasks"],
  metrics:{CurrentMaturity:88,Generalization:72,LongHorizon:62,Verifiability:82},
  relevance:"A Super Intelligence system would need robust reasoning across unfamiliar domains, not only high benchmark performance."
},
{
  name:"Coding",category:"Cognition",
  desc:"Code generation, debugging, repository understanding, testing and software-engineering execution.",
  deps:["Tool Use","Execution","Tests","Agents"],
  methods:["Unit tests","Repository-level tasks","Bug fixing","Long-horizon coding benchmarks"],
  metrics:{CurrentMaturity:90,Generalization:75,LongHorizon:70,Verifiability:96},
  relevance:"Coding is valuable because many outputs can be checked automatically, making it a strong domain for verifiable advanced reasoning."
},
{
  name:"Science",category:"Cognition",
  desc:"Scientific understanding, hypothesis generation, modeling, simulation and experimental reasoning.",
  deps:["Reasoning","Tools","Retrieval","Verification"],
  methods:["Scientific QA","Hypothesis evaluation","Experiment design","Simulation-backed tasks"],
  metrics:{CurrentMaturity:70,Generalization:74,LongHorizon:58,Verifiability:78},
  relevance:"Broad scientific discovery would be one of the clearest signs of capability beyond routine AI assistance."
},
{
  name:"Tool Use",category:"Action",
  desc:"Selecting and using browsers, code, APIs, databases and external software.",
  deps:["Agents","Planning","Permissions","Observability"],
  methods:["Tool-call accuracy","Task completion","Argument validity","Recovery after tool errors"],
  metrics:{CurrentMaturity:84,Generalization:76,LongHorizon:72,Verifiability:92},
  relevance:"Super Intelligence would likely need reliable interaction with external systems rather than remaining a passive text generator."
},
{
  name:"Planning",category:"Action",
  desc:"Decomposing goals, sequencing actions, managing dependencies and replanning after change.",
  deps:["Reasoning","Memory","Agents","World Models"],
  methods:["Multi-stage tasks","Plan consistency","Replanning tests","Resource-constrained tasks"],
  metrics:{CurrentMaturity:67,Generalization:70,LongHorizon:80,Verifiability:70},
  relevance:"Long-horizon planning is essential for systems that must act reliably over time."
},
{
  name:"Memory",category:"Systems",
  desc:"Maintaining and retrieving useful state across tasks, sessions and environments.",
  deps:["Agents","Retrieval","State","Data Governance"],
  methods:["Recall tasks","Long-session consistency","State tracking","Memory update tests"],
  metrics:{CurrentMaturity:72,Generalization:68,LongHorizon:88,Verifiability:78},
  relevance:"Persistent intelligence requires selective memory: knowing what to store, retrieve, update and forget."
},
{
  name:"Agents",category:"Systems",
  desc:"Stateful AI systems that plan, use tools and act across multiple steps.",
  deps:["Models","Memory","Tools","Orchestration","Evaluation"],
  methods:["Task success","Step efficiency","Recovery","Tool accuracy","Human intervention rate"],
  metrics:{CurrentMaturity:78,Generalization:72,LongHorizon:82,Verifiability:82},
  relevance:"Agents are one of the main system layers connecting intelligence with action and autonomy."
},
{
  name:"Multimodal Understanding",category:"Perception",
  desc:"Unified interpretation of text, image, audio, video, spatial and sensor information.",
  deps:["Models","Data","Alignment","Inference"],
  methods:["Cross-modal QA","Video understanding","Audio-visual reasoning","Spatial tasks"],
  metrics:{CurrentMaturity:86,Generalization:78,LongHorizon:56,Verifiability:72},
  relevance:"Super Intelligence is unlikely to be text-only; broader perception can support richer world understanding."
},
{
  name:"World Modeling",category:"Perception",
  desc:"Representing environments, dynamics and possible future states for prediction and planning.",
  deps:["Multimodal AI","Sensors","Simulation","Agents"],
  methods:["Future-state prediction","Simulation accuracy","Planning improvement","Spatial consistency"],
  metrics:{CurrentMaturity:58,Generalization:70,LongHorizon:78,Verifiability:68},
  relevance:"World models may provide the predictive structure required for advanced planning, robotics and Physical AI."
},
{
  name:"Autonomy",category:"Action",
  desc:"Operating with reduced human intervention over increasingly long and complex tasks.",
  deps:["Agents","Planning","Memory","Permissions","Control"],
  methods:["Task duration","Human intervention rate","Recovery rate","Resource use","Failure containment"],
  metrics:{CurrentMaturity:60,Generalization:64,LongHorizon:94,Verifiability:66},
  relevance:"Autonomy amplifies both utility and risk. Super Intelligence would require reliable autonomy rather than mere independence."
},
{
  name:"Verification",category:"Reliability",
  desc:"Checking outputs and actions through tests, tools, critics, independent models or humans.",
  deps:["Evaluation","Tools","Observability","Human Review"],
  methods:["Verifier accuracy","Test pass rate","Cross-check agreement","False acceptance rate"],
  metrics:{CurrentMaturity:79,Generalization:82,LongHorizon:76,Verifiability:100},
  relevance:"Verification is a core control layer for increasingly capable systems."
},
{
  name:"Reliability",category:"Reliability",
  desc:"Consistency, robustness, calibration, recovery and predictable behavior across conditions.",
  deps:["Evaluation","Verification","Observability","Fallbacks"],
  methods:["Repeated trials","Distribution shift","Calibration","Failure recovery","Stress testing"],
  metrics:{CurrentMaturity:65,Generalization:76,LongHorizon:90,Verifiability:82},
  relevance:"Superhuman capability without reliable behavior would not be sufficient for dependable Super Intelligence systems."
},
{
  name:"Adaptation",category:"Generality",
  desc:"Handling new tasks, domains, tools and environments with limited additional training.",
  deps:["Reasoning","Memory","Learning","World Models"],
  methods:["Few-shot transfer","Novel tasks","New-tool use","Environment adaptation"],
  metrics:{CurrentMaturity:62,Generalization:94,LongHorizon:72,Verifiability:74},
  relevance:"Adaptation distinguishes broad intelligence from fixed competence on familiar distributions."
},
{
  name:"Cross-Domain Transfer",category:"Generality",
  desc:"Applying knowledge and skills learned in one domain to substantially different domains.",
  deps:["Reasoning","Representation Learning","Adaptation","Memory"],
  methods:["Cross-domain benchmarks","Unseen-domain tasks","Transfer efficiency","Compositional generalization"],
  metrics:{CurrentMaturity:57,Generalization:100,LongHorizon:72,Verifiability:70},
  relevance:"Broad transfer is one of the most important candidate signals of AGI and future Super Intelligence."
}
];

const grid=document.getElementById("capgrid");
const category=document.getElementById("category");
const categories=[...new Set(caps.map(c=>c.category))].sort();
categories.forEach(c=>{
  const o=document.createElement("option");o.value=c;o.textContent=c;category.appendChild(o);
});

let selected=caps[0].name;

function renderGrid(){
  const q=document.getElementById("search").value.toLowerCase().trim();
  const cat=category.value;
  const data=caps.filter(c=>{
    const text=[c.name,c.category,c.desc,...c.deps,...c.methods].join(" ").toLowerCase();
    return (!q||text.includes(q)) && (cat==="all"||c.category===cat);
  });

  grid.innerHTML=data.map(c=>`
    <button class="capbtn ${c.name===selected?'active':''}" data-name="${c.name}">
      <b>${c.name}</b><span>${c.category}</span>
    </button>
  `).join("");

  document.getElementById("empty").style.display=data.length?"none":"block";

  document.querySelectorAll(".capbtn").forEach(b=>{
    b.addEventListener("click",()=>{selected=b.dataset.name;renderGrid();renderDetail();});
  });

  if(data.length && !data.some(c=>c.name===selected)){
    selected=data[0].name;
    renderDetail();
  }
}

function renderDetail(){
  const c=caps.find(x=>x.name===selected) || caps[0];
  document.getElementById("detailCategory").textContent=c.category;
  document.getElementById("detailName").textContent=c.name;
  document.getElementById("detailDesc").textContent=c.desc;
  document.getElementById("dependencies").innerHTML=c.deps.map(x=>`<span class="tag">${x}</span>`).join("");
  document.getElementById("methods").innerHTML=c.methods.map((x,i)=>`
    <div class="method"><b>${i+1}. ${x}</b><span>Use as one signal within a broader capability evaluation.</span></div>
  `).join("");
  const labels={
    CurrentMaturity:"Current maturity",
    Generalization:"Generality relevance",
    LongHorizon:"Long-horizon importance",
    Verifiability:"Verifiability"
  };
  document.getElementById("metrics").innerHTML=Object.entries(c.metrics).map(([k,v])=>`
    <div class="metric">
      <div class="mt"><span>${labels[k]}</span><span>${v}</span></div>
      <div class="bar"><div class="fill" style="width:${v}%"></div></div>
    </div>
  `).join("");
  document.getElementById("relevance").textContent=c.relevance;
}

document.getElementById("search").addEventListener("input",renderGrid);
category.addEventListener("change",renderGrid);
renderGrid();
renderDetail();
</script>
</body>
</html>