Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <meta name="description" content="Explore the architecture of a Super Intelligence Agent: reasoning, planning, memory, tools, orchestration, verification and control."> | |
| <title>SI Agent Explorer</title> | |
| <style> | |
| :root{ | |
| --bg:#f5fbff;--panel:#ffffff;--line:#cfe0ec;--text:#102033;--muted:#647b90; | |
| --cyan:#00b8e6;--blue:#2f6fff;--violet:#7259ff;--soft:#eef7ff; | |
| } | |
| *{box-sizing:border-box} | |
| body{ | |
| margin:0; | |
| background: | |
| radial-gradient(circle at 15% 0,rgba(0,184,230,.15),transparent 28%), | |
| radial-gradient(circle at 88% 0,rgba(114,89,255,.12),transparent 24%), | |
| 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:62px 0 28px} | |
| .kicker{display:inline-block;border:1px solid #b9dbe8;border-radius:999px;padding:7px 12px;background:rgba(255,255,255,.75);color:#1686a8;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.1em} | |
| h1{font-size:clamp(44px,8vw,76px);line-height:1;margin:18px 0 12px;letter-spacing:-.055em} | |
| .grad{background:linear-gradient(90deg,var(--cyan),var(--blue),var(--violet));background-clip:text;-webkit-background-clip:text;color:transparent} | |
| .hero p{max-width:820px;margin:auto;color:var(--muted);font-size:18px} | |
| .layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:15px;padding-bottom:50px} | |
| .panel{border:1px solid var(--line);border-radius:18px;padding:18px;background:rgba(255,255,255,.88);box-shadow:0 18px 44px rgba(38,76,112,.08)} | |
| .ey{font-size:10px;color:#1686a8;font-weight:900;text-transform:uppercase;letter-spacing:.08em} | |
| h2{margin:3px 0 7px;font-size:24px;letter-spacing:-.03em} | |
| .desc{color:var(--muted);font-size:13px} | |
| .layers{display:grid;gap:8px;margin-top:14px} | |
| .layerbtn{ | |
| width:100%;text-align:left;border:1px solid #cfe0ec;background:#f8fcff;color:var(--text); | |
| border-radius:12px;padding:11px;cursor:pointer | |
| } | |
| .layerbtn b{display:block;font-size:12px}.layerbtn span{font-size:10px;color:var(--muted)} | |
| .layerbtn.active{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,184,230,.10);background:#f1fbff} | |
| .diagram{ | |
| display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap; | |
| border:1px solid #d4e5ef;background:#f9fcff;border-radius:14px;padding:15px;margin:15px 0 | |
| } | |
| .node{border:1px solid #bcd7e6;background:#fff;border-radius:9px;padding:8px 10px;font-size:10px;font-weight:900} | |
| .node.focus{border-color:var(--violet);background:#f3f0ff} | |
| .arrow{font-weight:900;color:var(--cyan)} | |
| .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:9px} | |
| .card{border:1px solid #d5e4ed;background:#fbfdff;border-radius:12px;padding:11px} | |
| .card b{display:block;font-size:11px}.card span{font-size:10px;color:var(--muted)} | |
| .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px} | |
| .tag{border:1px solid #cfe0ec;background:#f5fbff;border-radius:999px;padding:5px 7px;font-size:10px;color:#4c667c} | |
| .metric{margin:11px 0} | |
| .mt{display:flex;justify-content:space-between;font-size:11px;font-weight:800} | |
| .bar{height:7px;background:#e6eef4;border-radius:99px;overflow:hidden;margin-top:5px} | |
| .fill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--blue),var(--violet))} | |
| .note{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);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}} | |
| @media(max-width:560px){.cards{grid-template-columns:1fr}} | |
| </style> | |
| </head> | |
| <body> | |
| <header class="hero"> | |
| <div class="wrap"> | |
| <span class="kicker">Super Intelligence Agent</span> | |
| <h1>SI Agent <span class="grad">Explorer</span></h1> | |
| <p>Explore the reasoning, memory, tools, orchestration, verification and control layers behind advanced agentic AI.</p> | |
| </div> | |
| </header> | |
| <main class="wrap"> | |
| <section class="layout"> | |
| <aside class="panel"> | |
| <div class="ey">Architecture</div> | |
| <h2>Choose a layer</h2> | |
| <div class="desc">Inspect one component of the SI Agent stack.</div> | |
| <div class="layers" id="layers"></div> | |
| </aside> | |
| <section class="panel"> | |
| <div class="ey" id="category"></div> | |
| <h2 id="name"></h2> | |
| <div class="desc" id="desc"></div> | |
| <div class="diagram" id="diagram"></div> | |
| <div class="cards" id="cards"></div> | |
| <div class="ey" style="margin-top:16px">Dependencies</div> | |
| <div class="tags" id="deps"></div> | |
| <div class="ey" style="margin-top:16px">Conceptual profile</div> | |
| <div id="metrics"></div> | |
| <div class="note" id="failure"></div> | |
| </section> | |
| </section> | |
| </main> | |
| <footer> | |
| <div class="wrap"> | |
| <strong>SI Agent Explorer</strong> — an independent Hugging Face Space.<br> | |
| Collaboration and partnerships: <strong>agenten@magenta.de</strong> | |
| </div> | |
| </footer> | |
| <script> | |
| const layers = [ | |
| { | |
| name:"Reasoning",cat:"Cognition", | |
| desc:"The problem-solving layer that decomposes goals, searches solution paths and handles uncertainty.", | |
| flow:["Goal","Decompose","Reason","Check","Decide"], | |
| cards:[ | |
| ["Key functions","Multi-step reasoning, search, decomposition and self-correction."], | |
| ["Evaluation","Accuracy, consistency, uncertainty and verifier agreement."], | |
| ["Long-horizon role","Reduces local mistakes before they propagate downstream."], | |
| ["Control relevance","Supports explicit decision checkpoints before action."] | |
| ], | |
| deps:["Models","Post-Training","Test-Time Compute","Verification"], | |
| metrics:{Maturity:88,LongHorizonImportance:92,Verifiability:80,RiskIfWeak:90}, | |
| failure:"Typical failure mode: the agent reaches an incorrect conclusion and builds later actions on top of it." | |
| }, | |
| { | |
| name:"Planning",cat:"Execution", | |
| desc:"The layer that converts objectives into ordered actions, dependencies and replanning decisions.", | |
| flow:["Objective","Tasks","Dependencies","Plan","Replan"], | |
| cards:[ | |
| ["Key functions","Task decomposition, ordering, scheduling and resource allocation."], | |
| ["Evaluation","Plan validity, efficiency, replanning quality and completion rate."], | |
| ["Long-horizon role","Maintains structure across extended workflows."], | |
| ["Control relevance","Makes intended actions inspectable before execution."] | |
| ], | |
| deps:["Reasoning","Memory","State","World Models"], | |
| metrics:{Maturity:70,LongHorizonImportance:100,Verifiability:74,RiskIfWeak:94}, | |
| failure:"Typical failure mode: the agent starts with a plausible plan that becomes incomplete or inconsistent as conditions change." | |
| }, | |
| { | |
| name:"Memory",cat:"State", | |
| desc:"Persistent and working state used to retain task context, experiences and structured knowledge.", | |
| flow:["Observe","Store","Retrieve","Update","Forget"], | |
| cards:[ | |
| ["Key functions","Working, episodic, semantic and procedural memory."], | |
| ["Evaluation","Recall quality, freshness, relevance and state consistency."], | |
| ["Long-horizon role","Prevents loss of goals, decisions and prior observations."], | |
| ["Control relevance","Memory provenance and expiration reduce stale-state errors."] | |
| ], | |
| deps:["State Store","Retrieval","Provenance","Data Governance"], | |
| metrics:{Maturity:72,LongHorizonImportance:98,Verifiability:77,RiskIfWeak:88}, | |
| failure:"Typical failure mode: stale, missing or contradictory memory causes the agent to repeat work or act on outdated assumptions." | |
| }, | |
| { | |
| name:"Tool Use",cat:"Action", | |
| desc:"The interface layer that connects the SI Agent to browsers, APIs, code, databases and external systems.", | |
| flow:["Need","Select Tool","Call","Observe","Validate"], | |
| cards:[ | |
| ["Key functions","Tool discovery, argument generation, execution and result parsing."], | |
| ["Evaluation","Tool-call accuracy, argument validity and task success."], | |
| ["Long-horizon role","Turns internal reasoning into external progress."], | |
| ["Control relevance","Tool permissions determine the agent's real-world authority."] | |
| ], | |
| deps:["Tool Registry","Interoperability","Permissions","Observability"], | |
| metrics:{Maturity:85,LongHorizonImportance:93,Verifiability:94,RiskIfWeak:86}, | |
| failure:"Typical failure mode: the correct tool is selected but called with wrong arguments or used in the wrong context." | |
| }, | |
| { | |
| name:"Orchestration",cat:"Coordination", | |
| desc:"Coordinates models, tools, specialized agents, memory and verification across the workflow.", | |
| flow:["Task","Route","Coordinate","Merge","Continue"], | |
| cards:[ | |
| ["Key functions","Routing, delegation, scheduling, fallback and multi-agent coordination."], | |
| ["Evaluation","Routing quality, coordination overhead and completion efficiency."], | |
| ["Long-horizon role","Keeps complex systems modular and manageable."], | |
| ["Control relevance","Provides a central point for policy, routing and escalation."] | |
| ], | |
| deps:["Model Routing","Interoperability","Agents","Evaluation"], | |
| metrics:{Maturity:78,LongHorizonImportance:95,Verifiability:83,RiskIfWeak:88}, | |
| failure:"Typical failure mode: work is duplicated, routed to the wrong component or lost between specialized agents." | |
| }, | |
| { | |
| name:"Verification",cat:"Reliability", | |
| desc:"Checks outputs, actions and intermediate results before they are trusted or propagated.", | |
| flow:["Output","Check","Compare","Approve","Continue"], | |
| cards:[ | |
| ["Key functions","Tests, critics, external validation and independent checking."], | |
| ["Evaluation","False acceptance rate, test coverage and verifier accuracy."], | |
| ["Long-horizon role","Stops small errors from compounding over many steps."], | |
| ["Control relevance","Creates explicit gates before high-impact actions."] | |
| ], | |
| deps:["Tests","Critics","External Tools","Human Review"], | |
| metrics:{Maturity:80,LongHorizonImportance:100,Verifiability:100,RiskIfWeak:100}, | |
| failure:"Typical failure mode: an incorrect result is accepted as correct and contaminates the rest of the workflow." | |
| }, | |
| { | |
| name:"Observability",cat:"Operations", | |
| desc:"Makes agent execution inspectable through traces, logs, tool calls, state transitions and costs.", | |
| flow:["Action","Trace","Measure","Inspect","Improve"], | |
| cards:[ | |
| ["Key functions","Tracing, logging, cost tracking, failure analysis and auditability."], | |
| ["Evaluation","Trace completeness, debugging speed and incident visibility."], | |
| ["Long-horizon role","Reveals where extended workflows drift or fail."], | |
| ["Control relevance","Makes autonomous actions auditable."] | |
| ], | |
| deps:["Tracing","Logs","Metrics","Audit"], | |
| metrics:{Maturity:82,LongHorizonImportance:90,Verifiability:96,RiskIfWeak:78}, | |
| failure:"Typical failure mode: the system fails, but there is insufficient evidence to understand why." | |
| }, | |
| { | |
| name:"Permissions",cat:"Control", | |
| desc:"Defines which resources and actions the agent is authorized to access or execute.", | |
| flow:["Identity","Policy","Check","Approve","Execute"], | |
| cards:[ | |
| ["Key functions","Least privilege, scoped credentials, approvals and revocation."], | |
| ["Evaluation","Permission compliance, escalation quality and violation rate."], | |
| ["Long-horizon role","Prevents accumulated authority from becoming uncontrolled."], | |
| ["Control relevance","Sets hard boundaries around autonomy."] | |
| ], | |
| deps:["Identity","Authentication","Authorization","Audit Logs"], | |
| metrics:{Maturity:84,LongHorizonImportance:96,Verifiability:98,RiskIfWeak:100}, | |
| failure:"Typical failure mode: the agent gains or exercises authority beyond what the task actually requires." | |
| }, | |
| { | |
| name:"Reliability",cat:"System Quality", | |
| desc:"The system-level ability to behave consistently, recover from failure and handle uncertainty.", | |
| flow:["Run","Detect","Recover","Verify","Resume"], | |
| cards:[ | |
| ["Key functions","Calibration, recovery, fault tolerance and graceful degradation."], | |
| ["Evaluation","Success rate, recovery rate, variance and reproducibility."], | |
| ["Long-horizon role","Determines whether advanced autonomy is dependable."], | |
| ["Control relevance","Unreliable systems require tighter human oversight."] | |
| ], | |
| deps:["Evaluation","Verification","Observability","Fallbacks"], | |
| metrics:{Maturity:66,LongHorizonImportance:100,Verifiability:86,RiskIfWeak:100}, | |
| failure:"Typical failure mode: the agent occasionally performs well but cannot reproduce success under changing conditions." | |
| } | |
| ]; | |
| const container=document.getElementById("layers"); | |
| let selected=0; | |
| function buildButtons(){ | |
| container.innerHTML=layers.map((x,i)=>` | |
| <button class="layerbtn ${i===selected?'active':''}" data-i="${i}"> | |
| <b>${x.name}</b><span>${x.cat}</span> | |
| </button>`).join(""); | |
| document.querySelectorAll(".layerbtn").forEach(b=>b.onclick=()=>{ | |
| selected=Number(b.dataset.i);buildButtons();render(); | |
| }); | |
| } | |
| function render(){ | |
| const x=layers[selected]; | |
| category.textContent=x.cat; | |
| name.textContent=x.name; | |
| desc.textContent=x.desc; | |
| diagram.innerHTML=x.flow.map((v,i)=>`<span class="node ${i===x.flow.length-1?'focus':''}">${v}</span>${i<x.flow.length-1?'<span class="arrow">→</span>':''}`).join(""); | |
| cards.innerHTML=x.cards.map(v=>`<div class="card"><b>${v[0]}</b><span>${v[1]}</span></div>`).join(""); | |
| deps.innerHTML=x.deps.map(v=>`<span class="tag">${v}</span>`).join(""); | |
| const labels={Maturity:"Current maturity",LongHorizonImportance:"Long-horizon importance",Verifiability:"Verifiability",RiskIfWeak:"Risk if weak"}; | |
| metrics.innerHTML=Object.entries(x.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(""); | |
| failure.textContent=x.failure; | |
| } | |
| buildButtons();render(); | |
| </script> | |
| </body> | |
| </html> | |