| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <meta name="description" content="Visual reference library for AI orchestration patterns including supervisor workers, planners, evaluators, routing, fallback and human approval."> |
| <title>Orchestration Patterns</title> |
| <style> |
| :root{ |
| --bg:#07101f;--panel:#0d1930;--panel2:#101f3c;--line:#243b61; |
| --text:#f4f7ff;--muted:#9eb1cd;--cyan:#4edaff;--blue:#6e8fff; |
| --violet:#9e7cff;--green:#5ce0a5;--amber:#ffd273;--red:#ff8998; |
| } |
| *{box-sizing:border-box} |
| body{ |
| margin:0;background: |
| radial-gradient(circle at 12% -5%,rgba(78,218,255,.13),transparent 30%), |
| radial-gradient(circle at 91% 0,rgba(158,124,255,.13),transparent 27%), |
| var(--bg); |
| color:var(--text);font:15px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; |
| } |
| .wrap{max-width:1180px;margin:auto;padding:0 22px} |
| .hero{text-align:center;padding:66px 0 32px} |
| .badge{display:inline-block;border:1px solid var(--line);background:#0b1930;color:var(--cyan);border-radius:999px;padding:7px 12px;font-size:11px;font-weight:850;letter-spacing:.1em;text-transform:uppercase} |
| h1{font-size:clamp(44px,7vw,76px);line-height:1;margin:20px 0 14px;letter-spacing:-.055em} |
| .grad{background:linear-gradient(90deg,var(--cyan),#d7e1ff,var(--violet));background-clip:text;-webkit-background-clip:text;color:transparent} |
| .hero p{max-width:790px;margin:auto;color:var(--muted);font-size:18px} |
| .filters{display:grid;grid-template-columns:1.5fr 1fr;gap:10px;position:sticky;top:0;z-index:30;padding:12px 0;background:rgba(7,16,31,.9);backdrop-filter:blur(15px)} |
| input,select{ |
| width:100%;background:#0a1830;color:var(--text);border:1px solid var(--line);border-radius:11px;padding:11px 12px;outline:none |
| } |
| .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;padding:24px 0 48px} |
| .card{ |
| border:1px solid var(--line);background:linear-gradient(150deg,#101f3c,#09162b); |
| border-radius:18px;padding:18px;box-shadow:0 18px 45px rgba(0,0,0,.23) |
| } |
| .top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start} |
| .num{font-size:11px;color:var(--cyan);font-weight:850;letter-spacing:.08em;text-transform:uppercase} |
| .name{font-size:21px;font-weight:900;letter-spacing:-.025em;margin:2px 0} |
| .cat{font-size:10px;padding:5px 8px;border:1px solid #2e4975;background:#12233f;color:#bdd0ea;border-radius:999px} |
| .desc{color:var(--muted);font-size:13px;margin:9px 0 13px} |
| .diagram{ |
| min-height:172px;border:1px solid #1d3358;border-radius:14px;background: |
| linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px), |
| linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px), |
| #07152a;background-size:24px 24px;padding:13px;display:flex;align-items:center;justify-content:center |
| } |
| .flow{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;max-width:100%} |
| .node{font-size:11px;font-weight:800;padding:8px 9px;border:1px solid #345486;border-radius:9px;background:#102543;white-space:nowrap} |
| .node.core{border-color:#56b8ff;background:#123459} |
| .node.verify{border-color:#7d6fff;background:#261d49} |
| .node.human{border-color:#c79b4f;background:#372b17} |
| .arrow{color:var(--cyan);font-weight:900} |
| .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px} |
| .tag{font-size:10px;border:1px solid #263f67;background:#0d1d36;color:#bad0ea;padding:5px 7px;border-radius:999px} |
| .footerrow{display:flex;justify-content:space-between;align-items:center;margin-top:13px;color:var(--muted);font-size:11px} |
| .empty{display:none;text-align:center;color:var(--muted);padding:50px;border:1px dashed var(--line);border-radius:16px} |
| .info{margin-bottom:55px;padding:18px;border:1px solid var(--line);border-radius:16px;background:#0b1930;color:var(--muted)} |
| 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:800px){.grid{grid-template-columns:1fr}.filters{grid-template-columns:1fr}} |
| </style> |
| </head> |
| <body> |
| <header class="hero"> |
| <div class="wrap"> |
| <span class="badge">AI Architecture · Visual Reference</span> |
| <h1>Orchestration <span class="grad">Patterns</span></h1> |
| <p>Explore reusable patterns for agent coordination, routing, verification, recovery and human control.</p> |
| </div> |
| </header> |
|
|
| <main class="wrap"> |
| <div class="filters"> |
| <input id="search" placeholder="Search patterns, use cases or concepts…" aria-label="Search"> |
| <select id="category" aria-label="Category"><option value="all">All categories</option></select> |
| </div> |
|
|
| <section id="grid" class="grid"></section> |
| <div id="empty" class="empty">No orchestration pattern matches the current filters.</div> |
|
|
| <div class="info"> |
| <strong style="color:#f4f7ff">How to use this library.</strong> |
| Patterns are not mutually exclusive. Production AI systems often combine several of them—for example dynamic routing, supervisor delegation, evaluation, retries and human approval inside one workflow. |
| </div> |
| </main> |
|
|
| <footer> |
| <div class="wrap"> |
| <strong>Orchestration Patterns</strong> — an independent educational Hugging Face Space.<br> |
| Collaboration and partnerships: <strong>agenten@magenta.de</strong> |
| </div> |
| </footer> |
|
|
| <script> |
| const patterns = [ |
| { |
| name:"Supervisor → Workers",category:"Multi-Agent", |
| description:"A central supervisor delegates work to specialist agents and aggregates their results.", |
| nodes:["Supervisor","Researcher","Developer","Reviewer"],layout:"branch", |
| tags:["delegation","multi-agent","control"] |
| }, |
| { |
| name:"Sequential Workflow",category:"Workflow", |
| description:"Tasks execute in a fixed order, making the workflow predictable and easy to audit.", |
| nodes:["Input","Research","Analyze","Generate","Output"],layout:"line", |
| tags:["deterministic","handoffs","pipeline"] |
| }, |
| { |
| name:"Parallel Execution",category:"Workflow", |
| description:"Independent agents work simultaneously before their outputs are synthesized.", |
| nodes:["Input","Agent A","Agent B","Agent C","Synthesis"],layout:"branch", |
| tags:["parallel","latency","specialists"] |
| }, |
| { |
| name:"Planner → Executors",category:"Agentic", |
| description:"A planner decomposes a goal into subtasks that are executed by specialist agents.", |
| nodes:["Goal","Planner","Executor A","Executor B","Result"],layout:"branch", |
| tags:["planning","long-horizon","delegation"] |
| }, |
| { |
| name:"Evaluator Loop",category:"Reliability", |
| description:"Generated output is evaluated and retried or revised until it passes a quality check.", |
| nodes:["Generate","Evaluate","Retry","Output"],layout:"loop", |
| tags:["evaluation","retry","quality"] |
| }, |
| { |
| name:"Generator → Critic",category:"Reliability", |
| description:"One agent generates, another critiques, and a revision step improves the result.", |
| nodes:["Generator","Critic","Revision","Verifier"],layout:"line", |
| tags:["critique","revision","verification"] |
| }, |
| { |
| name:"Human Approval",category:"Control", |
| description:"Execution pauses at a defined control point until a human approves the proposed action.", |
| nodes:["Agent","Risk Check","Human Approval","Execute"],layout:"line", |
| tags:["human-in-the-loop","governance","safety"],human:true |
| }, |
| { |
| name:"Retry + Fallback",category:"Reliability", |
| description:"A failed model, tool or provider is retried before traffic falls back to an alternative path.", |
| nodes:["Primary","Failure Check","Retry","Fallback","Output"],layout:"line", |
| tags:["resilience","failover","recovery"] |
| }, |
| { |
| name:"Dynamic Model Routing",category:"Routing", |
| description:"Requests are routed to model classes according to task, cost, latency or capability.", |
| nodes:["Request","Router","Fast","Reasoning","Specialist"],layout:"branch", |
| tags:["model routing","cost","latency"] |
| }, |
| { |
| name:"Event-Driven Orchestration",category:"Automation", |
| description:"Events such as webhooks, alerts or new data trigger agents, tools or workflows.", |
| nodes:["Event","Trigger","Orchestrator","Agent / Tool","Action"],layout:"line", |
| tags:["automation","events","webhooks"] |
| }, |
| { |
| name:"Human Escalation",category:"Control", |
| description:"Low-confidence cases are escalated from AI execution to human review.", |
| nodes:["Agent","Confidence","Human Review","Decision"],layout:"line", |
| tags:["uncertainty","review","escalation"],human:true |
| }, |
| { |
| name:"Verification Chain",category:"Reliability", |
| description:"Outputs move through multiple validation layers before they are accepted.", |
| nodes:["Agent Output","Rule Check","Verifier","Final Output"],layout:"line", |
| tags:["validation","verifier","safety"] |
| } |
| ]; |
| |
| const $=id=>document.getElementById(id); |
| const category=$("category"); |
| [...new Set(patterns.map(p=>p.category))].sort().forEach(c=>{ |
| const o=document.createElement("option");o.value=c;o.textContent=c;category.appendChild(o); |
| }); |
| |
| function diagram(p){ |
| if(p.layout==="branch"){ |
| return `<div class="flow"> |
| <span class="node core">${p.nodes[0]}</span><span class="arrow">→</span> |
| ${p.nodes.slice(1,-1).map(n=>`<span class="node">${n}</span>`).join("")} |
| <span class="arrow">→</span><span class="node verify">${p.nodes[p.nodes.length-1]}</span> |
| </div>`; |
| } |
| if(p.layout==="loop"){ |
| return `<div class="flow"> |
| <span class="node core">${p.nodes[0]}</span><span class="arrow">→</span> |
| <span class="node verify">${p.nodes[1]}</span><span class="arrow">↺</span> |
| <span class="node">${p.nodes[2]}</span><span class="arrow">→</span> |
| <span class="node">${p.nodes[3]}</span> |
| </div>`; |
| } |
| return `<div class="flow">${p.nodes.map((n,i)=>` |
| <span class="node ${p.human&&n.includes("Human")?"human":i===0?"core":n.includes("Verifier")?"verify":""}">${n}</span> |
| ${i<p.nodes.length-1?'<span class="arrow">→</span>':''}`).join("")}</div>`; |
| } |
| |
| function render(){ |
| const q=$("search").value.toLowerCase().trim(),cat=category.value; |
| const data=patterns.filter(p=>{ |
| const hay=[p.name,p.category,p.description,...p.tags,...p.nodes].join(" ").toLowerCase(); |
| return (!q||hay.includes(q))&&(cat==="all"||p.category===cat); |
| }); |
| $("grid").innerHTML=data.map((p,i)=>` |
| <article class="card"> |
| <div class="top"> |
| <div><div class="num">Pattern ${String(i+1).padStart(2,"0")}</div><div class="name">${p.name}</div></div> |
| <span class="cat">${p.category}</span> |
| </div> |
| <div class="desc">${p.description}</div> |
| <div class="diagram">${diagram(p)}</div> |
| <div class="tags">${p.tags.map(t=>`<span class="tag">${t}</span>`).join("")}</div> |
| <div class="footerrow"><span>Reusable architecture pattern</span><span>${p.nodes.length} stages</span></div> |
| </article>`).join(""); |
| $("empty").style.display=data.length?"none":"block"; |
| } |
| $("search").addEventListener("input",render); |
| category.addEventListener("change",render); |
| render(); |
| </script> |
| </body> |
| </html> |
|
|
