File size: 7,029 Bytes
76d2bdd | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>AI Interoperability Map</title>
<meta name="description" content="Explore the layers that connect AI data, models, agents, tools, orchestration and trust systems."><style>
:root{--bg:#f5fbff;--panel:#ffffff;--ink:#10243e;--muted:#60758d;--line:#d9eaf5;--accent:#087fce;--accent2:#00b8c9;--soft:#eaf7ff;--good:#16784b;--warn:#9a6500}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at top left,#fff 0,#eef9ff 32%,#f7fbff 72%);color:var(--ink)}
a{color:var(--accent)}button,select,input{font:inherit}.shell{max-width:1180px;margin:auto;padding:28px 20px 70px}.hero{padding:44px 0 28px}.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-weight:800;font-size:.76rem;color:var(--accent)}h1{font-size:clamp(2.4rem,6vw,5rem);line-height:.96;letter-spacing:-.05em;margin:.22em 0}.sub{max-width:790px;color:#3f5873;font-size:1.13rem;line-height:1.65}.bar{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}.control{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;color:var(--ink);min-width:180px}.btn{border:0;border-radius:14px;padding:12px 16px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:800;cursor:pointer}.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.card{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:0 12px 38px rgba(53,101,139,.08)}.card h3{margin:.2rem 0 .55rem}.tag{display:inline-block;font-size:.75rem;font-weight:800;padding:5px 8px;border-radius:999px;background:var(--soft);color:#17628e;margin:2px 4px 2px 0}.meta{color:var(--muted);font-size:.9rem;line-height:1.55}.section{margin-top:34px}.section h2{font-size:1.8rem;letter-spacing:-.025em}.tablewrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:20px}table{border-collapse:collapse;width:100%;min-width:800px}th,td{text-align:left;padding:13px 14px;border-bottom:1px solid #edf3f7;vertical-align:top}th{font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:#557089;background:#f8fcff}.note{padding:16px 18px;background:#fff;border-left:4px solid var(--accent2);border-radius:10px;line-height:1.6;color:#425c75}.footer{margin-top:42px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
.kpi{font-size:1.8rem;font-weight:900;letter-spacing:-.04em}.hidden{display:none!important}
@media(max-width:650px){.shell{padding:20px 14px 52px}.hero{padding-top:28px}.control{width:100%}.bar{display:grid}.card{border-radius:16px}}
.map{display:grid;gap:12px;position:relative}.node{display:grid;grid-template-columns:190px 1fr 240px;gap:18px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 18px;cursor:pointer;transition:.18s transform,.18s box-shadow}.node:hover,.node.active{transform:translateY(-2px);box-shadow:0 14px 36px rgba(36,109,160,.12);border-color:#9dd9f5}.node strong{font-size:1.08rem}.detail{margin-top:18px;background:linear-gradient(135deg,#fff,#ecf9ff);border:1px solid var(--line);border-radius:22px;padding:24px}.arrow{text-align:center;color:#1aa2c6;font-weight:900;font-size:1.4rem}@media(max-width:760px){.node{grid-template-columns:1fr}}
</style></head><body><main class="shell"><section class="hero"><div class="eyebrow">System architecture</div><h1>Interoperability Map</h1><p class="sub">Interoperability is connective tissue. Explore the layers where data, models, agents, tools and enterprise controls need explicit contracts.</p></section>
<section id="map" class="map"></section><section id="detail" class="detail"><b>Select a layer</b><p class="meta">Click any layer to see why its boundaries matter.</p></section>
<section class="section"><div class="note"><b>Design principle:</b> standardize boundaries, not creativity. Interoperability should allow components to differ internally while remaining predictable at their interfaces.</div></section>
<footer class="footer">Open reference map for AI interoperability · Research & industry collaborations: <a href="mailto:agenten@magenta.de">agenten@magenta.de</a></footer></main>
<script>
const NODES=[["Sensors & data", "Observations, documents, databases, events and multimodal inputs.", "Schemas · metadata · provenance"], ["Models & inference", "Foundation models, specialized models, local and hosted inference.", "Provider interfaces · routing · structured outputs"], ["Agents", "Task-oriented systems using models, memory, planning and policies.", "A2A · capability discovery · task semantics"], ["Tools & services", "External capabilities, APIs, enterprise systems and workflows.", "MCP · OpenAPI · RPC"], ["Orchestration", "Coordination across models, agents, tools and providers.", "Scheduling · routing · delegation · fallback"], ["Trust layer", "Identity, authorization, observability, validation and policy.", "OAuth · traces · schemas · evals"]];const map=document.getElementById('map'), detail=document.getElementById('detail');
const insights=[
"Raw observations become useful across systems only when schemas, identifiers, metadata, units, permissions and provenance survive the handoff.",
"Model portability needs common enough interfaces for messages, streaming, tools and modalities while preserving real capability differences.",
"Independent agents need discovery, task semantics, identity and reliable handoffs. Agent interoperability is broader than function calling.",
"Tools should expose stable, machine-readable capabilities. Existing APIs remain important; AI-native tool protocols can add discovery and standardized invocation.",
"Orchestration decides what acts when. It becomes dramatically easier when underlying components are interoperable rather than hard-wired.",
"Enterprise interoperability is incomplete without identity, authorization, tracing, policy, validation and version-aware failure handling."
];
function esc(s){return String(s).replace(/[&<>"']/g,m=>({'&':'&','<':'<','>':'>','"':'"',"'":'''}[m]));}
NODES.forEach((n,i)=>{if(i){const a=document.createElement('div');a.className='arrow';a.textContent='↓';map.appendChild(a);}const el=document.createElement('div');el.className='node';el.innerHTML=`<strong>${esc(n[0])}</strong><span>${esc(n[1])}</span><span class="meta">${esc(n[2])}</span>`;el.addEventListener('click',()=>{document.querySelectorAll('.node').forEach(x=>x.classList.remove('active'));el.classList.add('active');detail.innerHTML=`<span class="tag">Layer ${i+1}</span><h2>${esc(n[0])}</h2><p>${esc(insights[i])}</p><p class="meta"><b>Relevant interfaces:</b> ${esc(n[2])}</p>`;});map.appendChild(el);});
</script></body></html> |