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 end-to-end AI traces across models, retrieval, tools, agents, verification, cost and latency."> | |
| <title>AI Trace Explorer</title> | |
| <style> | |
| :root{ | |
| --bg:#f6fbff;--panel:#fff;--line:#d2e3ee;--text:#102033;--muted:#667b90; | |
| --cyan:#00b7e4;--blue:#3477ff;--violet:#735cff; | |
| } | |
| *{box-sizing:border-box} | |
| body{ | |
| margin:0; | |
| background: | |
| radial-gradient(circle at 14% 0,rgba(0,183,228,.14),transparent 28%), | |
| radial-gradient(circle at 88% 0,rgba(115,92,255,.10),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 #bddce8;border-radius:999px;padding:7px 12px;background:#ffffffdc;color:#1687a8;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} | |
| .controls{display:flex;gap:8px;flex-wrap:wrap;padding:18px 0 22px} | |
| .controls button{ | |
| border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--text); | |
| padding:9px 12px;cursor:pointer;font-size:11px;font-weight:800 | |
| } | |
| .controls button.on{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,183,228,.1);background:#f2fbff} | |
| .layout{display:grid;grid-template-columns:1.16fr .84fr;gap:15px;padding-bottom:50px} | |
| .panel{border:1px solid var(--line);border-radius:18px;background:#ffffffef;padding:18px;box-shadow:0 18px 44px rgba(38,76,112,.08)} | |
| .ey{font-size:10px;color:#1687a8;font-weight:900;text-transform:uppercase;letter-spacing:.08em} | |
| h2{margin:3px 0 7px;font-size:25px;letter-spacing:-.03em} | |
| .desc{color:var(--muted);font-size:13px} | |
| .timeline{margin:16px 0;padding:14px;border:1px solid #d6e6ef;border-radius:14px;background:#f9fcff} | |
| .row{display:grid;grid-template-columns:68px 1fr 64px;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid #edf2f6} | |
| .row:last-child{border-bottom:0} | |
| .time{font-size:10px;color:#6c8396} | |
| .span{border:1px solid #c9dfeb;border-radius:9px;background:#fff;padding:8px 10px;font-size:10px;font-weight:800} | |
| .duration{text-align:right;font-size:10px;color:#6c8396} | |
| .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:9px} | |
| .card{border:1px solid #d5e4ed;border-radius:12px;background:#fbfdff;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:8px} | |
| .tag{border:1px solid #cfe0eb;border-radius:999px;background:#f6fbff;padding:5px 7px;font-size:10px;color:#50697d} | |
| .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))} | |
| .alert{margin-top:14px;padding:12px;border:1px solid #e3d9f6;border-radius:12px;background:#fbf8ff} | |
| .alert b{display:block;font-size:11px}.alert span{font-size:10px;color:var(--muted)} | |
| .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}.row{grid-template-columns:54px 1fr 48px}} | |
| </style> | |
| </head> | |
| <body> | |
| <header class="hero"> | |
| <div class="wrap"> | |
| <span class="kicker">AI Tracing · Correlation · Debugging</span> | |
| <h1>AI Trace <span class="grad">Explorer</span></h1> | |
| <p>Explore end-to-end execution paths across models, retrieval, tools, agents, verification and infrastructure.</p> | |
| </div> | |
| </header> | |
| <main class="wrap"> | |
| <section class="controls" id="controls"></section> | |
| <section class="layout"> | |
| <div class="panel"> | |
| <div class="ey" id="category"></div> | |
| <h2 id="name"></h2> | |
| <div class="desc" id="desc"></div> | |
| <div class="timeline" id="timeline"></div> | |
| <div class="cards" id="cards"></div> | |
| <div class="ey" style="margin-top:16px">Important fields</div> | |
| <div class="tags" id="fields"></div> | |
| </div> | |
| <aside class="panel"> | |
| <div class="ey">Trace profile</div> | |
| <h2 style="font-size:21px">Operational value</h2> | |
| <div class="desc">Conceptual importance for debugging and production operations.</div> | |
| <div id="metrics"></div> | |
| <div class="alert"> | |
| <b>Primary observability risk</b> | |
| <span id="risk"></span> | |
| </div> | |
| <div class="note">Illustrative trace timings and values only; not benchmark data.</div> | |
| </aside> | |
| </section> | |
| </main> | |
| <footer> | |
| <div class="wrap"> | |
| <strong>AI Trace Explorer</strong> — an independent Hugging Face Space.<br> | |
| Collaboration and partnerships: <strong>agenten@magenta.de</strong> | |
| </div> | |
| </footer> | |
| <script> | |
| const traces=[ | |
| { | |
| n:"LLM Trace",cat:"Model", | |
| d:"A direct model call with prompt, response, latency, token and cost telemetry.", | |
| spans:[ | |
| ["0ms","Request received","5ms"], | |
| ["5ms","Prompt assembly","9ms"], | |
| ["14ms","Model inference","820ms"], | |
| ["834ms","Output parsing","12ms"], | |
| ["846ms","Response returned","4ms"] | |
| ], | |
| cards:[ | |
| ["Best for","Prompt regressions, model comparison and latency analysis."], | |
| ["Key question","Which model and prompt produced this output?"], | |
| ["Useful correlation","Model version + prompt version + trace ID."], | |
| ["Typical extension","Attach evaluation and verifier results."] | |
| ], | |
| fields:["trace_id","model","provider","prompt_version","tokens","latency","cost"], | |
| m:{DebugValue:90,CorrelationValue:88,CostVisibility:92,Complexity:42}, | |
| risk:"The model output is logged, but the prompt version or exact runtime parameters are missing." | |
| }, | |
| { | |
| n:"RAG Trace",cat:"Retrieval", | |
| d:"Tracks retrieval, reranking, selected context and generation in a knowledge-grounded workflow.", | |
| spans:[ | |
| ["0ms","User query","4ms"], | |
| ["4ms","Retriever","95ms"], | |
| ["99ms","Reranker","41ms"], | |
| ["140ms","Context assembly","18ms"], | |
| ["158ms","Model generation","690ms"], | |
| ["848ms","Answer returned","5ms"] | |
| ], | |
| cards:[ | |
| ["Best for","Separating retrieval failures from generation failures."], | |
| ["Key question","Did the model receive the right context?"], | |
| ["Useful correlation","Query + retrieved chunks + scores + output."], | |
| ["Typical extension","Attach source attribution and faithfulness eval."] | |
| ], | |
| fields:["query","documents","scores","reranker","selected_chunks","model","quality"], | |
| m:{DebugValue:98,CorrelationValue:94,CostVisibility:78,Complexity:62}, | |
| risk:"Only the final answer is visible, so poor retrieval cannot be distinguished from poor generation." | |
| }, | |
| { | |
| n:"Agent Trace",cat:"Agent", | |
| d:"Tracks a multi-step agent from goal and planning through tool use, memory and verification.", | |
| spans:[ | |
| ["0ms","Goal received","5ms"], | |
| ["5ms","Plan created","110ms"], | |
| ["115ms","Tool selected","35ms"], | |
| ["150ms","Tool executed","420ms"], | |
| ["570ms","Memory updated","38ms"], | |
| ["608ms","Verifier","140ms"], | |
| ["748ms","Replan / finish","62ms"] | |
| ], | |
| cards:[ | |
| ["Best for","Long-horizon debugging and action reconstruction."], | |
| ["Key question","Why did the agent choose this sequence of actions?"], | |
| ["Useful correlation","Goal + plan + steps + tools + memory."], | |
| ["Typical extension","Detect goal drift and repeated actions."] | |
| ], | |
| fields:["goal_id","plan_id","step_id","tool","memory","verification","replan"], | |
| m:{DebugValue:100,CorrelationValue:100,CostVisibility:90,Complexity:86}, | |
| risk:"Intermediate steps, memory changes or tool actions are missing, making the final failure impossible to explain." | |
| }, | |
| { | |
| n:"Multi-Agent Trace",cat:"Coordination", | |
| d:"Shows delegation and parallel work across multiple specialized agents.", | |
| spans:[ | |
| ["0ms","Supervisor","25ms"], | |
| ["25ms","Research Agent","410ms"], | |
| ["25ms","Coding Agent","515ms"], | |
| ["25ms","Critic Agent","330ms"], | |
| ["540ms","Result merge","75ms"], | |
| ["615ms","Final verifier","120ms"] | |
| ], | |
| cards:[ | |
| ["Best for","Coordination, delegation and parallel execution analysis."], | |
| ["Key question","Which agent contributed to the final result?"], | |
| ["Useful correlation","Agent identity + task contract + message flow."], | |
| ["Typical extension","Track duplicate work and conflicting outputs."] | |
| ], | |
| fields:["agent_id","delegated_task","message","shared_state","merge","latency"], | |
| m:{DebugValue:100,CorrelationValue:100,CostVisibility:93,Complexity:95}, | |
| risk:"Agent-to-agent messages are not correlated, so duplicate or conflicting work cannot be reconstructed." | |
| }, | |
| { | |
| n:"Retry & Fallback",cat:"Resilience", | |
| d:"Shows a failed action, retry attempts and the final fallback route.", | |
| spans:[ | |
| ["0ms","Primary tool call","180ms"], | |
| ["180ms","Tool error","5ms"], | |
| ["185ms","Retry 1","205ms"], | |
| ["390ms","Retry error","5ms"], | |
| ["395ms","Fallback route","45ms"], | |
| ["440ms","Alternate tool","165ms"], | |
| ["605ms","Success","4ms"] | |
| ], | |
| cards:[ | |
| ["Best for","Reliability and recovery analysis."], | |
| ["Key question","Did the system adapt after failure?"], | |
| ["Useful correlation","Failure reason + retry count + fallback route."], | |
| ["Typical extension","Measure repeated-error rate."] | |
| ], | |
| fields:["error","retry_count","retry_reason","fallback","outcome","duration"], | |
| m:{DebugValue:100,CorrelationValue:95,CostVisibility:98,Complexity:70}, | |
| risk:"Retries look like normal calls, hiding repeated failures and unnecessary cost." | |
| }, | |
| { | |
| n:"Verification Trace",cat:"Quality", | |
| d:"Captures generation followed by independent checking and acceptance or rejection.", | |
| spans:[ | |
| ["0ms","Candidate output","520ms"], | |
| ["520ms","Verifier call","160ms"], | |
| ["680ms","Evidence check","75ms"], | |
| ["755ms","Decision","8ms"], | |
| ["763ms","Accept / retry","12ms"] | |
| ], | |
| cards:[ | |
| ["Best for","High-confidence and high-impact workflows."], | |
| ["Key question","Was this result actually checked?"], | |
| ["Useful correlation","Candidate + verifier + evidence + decision."], | |
| ["Typical extension","Link verifier failures to retry behavior."] | |
| ], | |
| fields:["candidate_id","verifier","evidence","result","decision","retry"], | |
| m:{DebugValue:94,CorrelationValue:97,CostVisibility:82,Complexity:66}, | |
| risk:"A final answer appears trustworthy, but there is no record of whether verification ran or what evidence was used." | |
| }, | |
| { | |
| n:"Cost Trace",cat:"Operations", | |
| d:"Attributes spend to individual models, tools, retrieval stages, retries and verification.", | |
| spans:[ | |
| ["0ms","Retrieval $0.002","90ms"], | |
| ["90ms","Model $0.021","690ms"], | |
| ["780ms","Tool $0.004","155ms"], | |
| ["935ms","Verifier $0.009","180ms"], | |
| ["1115ms","Retry $0.011","360ms"] | |
| ], | |
| cards:[ | |
| ["Best for","Cost optimization and budget enforcement."], | |
| ["Key question","Which stage drives total task cost?"], | |
| ["Useful correlation","Cost + span + model/tool + task outcome."], | |
| ["Typical extension","Compare cost against quality."] | |
| ], | |
| fields:["span_cost","model_cost","tool_cost","retry_cost","total_cost","budget"], | |
| m:{DebugValue:76,CorrelationValue:88,CostVisibility:100,Complexity:58}, | |
| risk:"Only total spend is known, so expensive retries or tool paths cannot be optimized." | |
| }, | |
| { | |
| n:"Latency Trace",cat:"Performance", | |
| d:"Breaks total response time into queue, inference, retrieval, tool and verification latency.", | |
| spans:[ | |
| ["0ms","Queue","25ms"], | |
| ["25ms","Retrieval","115ms"], | |
| ["140ms","Model","780ms"], | |
| ["920ms","Tool","240ms"], | |
| ["1160ms","Verification","175ms"] | |
| ], | |
| cards:[ | |
| ["Best for","Performance tuning and bottleneck detection."], | |
| ["Key question","Which span dominates response time?"], | |
| ["Useful correlation","Latency + component + route + provider."], | |
| ["Typical extension","Compare latency against cost and quality."] | |
| ], | |
| fields:["start","end","duration","queue_time","provider","component"], | |
| m:{DebugValue:88,CorrelationValue:86,CostVisibility:70,Complexity:50}, | |
| risk:"Aggregate latency is visible, but the slow component cannot be isolated." | |
| }, | |
| { | |
| n:"Human Approval",cat:"Oversight", | |
| d:"Shows the pause between a proposed high-impact action and the resulting human decision.", | |
| spans:[ | |
| ["0ms","Action proposed","12ms"], | |
| ["12ms","Risk evaluation","35ms"], | |
| ["47ms","Approval requested","8ms"], | |
| ["55ms","Human wait","4200ms"], | |
| ["4255ms","Decision recorded","12ms"], | |
| ["4267ms","Action executed","180ms"] | |
| ], | |
| cards:[ | |
| ["Best for","Governed agent workflows."], | |
| ["Key question","Who authorized this consequential action?"], | |
| ["Useful correlation","Action + risk + approver + decision."], | |
| ["Typical extension","Measure approval wait time."] | |
| ], | |
| fields:["approval_id","action","risk","approver","decision","wait_time"], | |
| m:{DebugValue:82,CorrelationValue:96,CostVisibility:60,Complexity:64}, | |
| risk:"A consequential action executes, but the approval event is not linked to the trace." | |
| } | |
| ]; | |
| let selected=0; | |
| const controls=document.getElementById("controls"); | |
| function buttons(){ | |
| controls.innerHTML=traces.map((x,i)=>`<button class="${i===selected?'on':''}" data-i="${i}">${x.n}</button>`).join(""); | |
| controls.querySelectorAll("button").forEach(b=>b.onclick=()=>{selected=Number(b.dataset.i);buttons();render();}); | |
| } | |
| function render(){ | |
| const x=traces[selected]; | |
| category.textContent=x.cat; | |
| name.textContent=x.n; | |
| desc.textContent=x.d; | |
| timeline.innerHTML=x.spans.map(s=>` | |
| <div class="row"> | |
| <div class="time">${s[0]}</div> | |
| <div class="span">${s[1]}</div> | |
| <div class="duration">${s[2]}</div> | |
| </div>`).join(""); | |
| cards.innerHTML=x.cards.map(v=>`<div class="card"><b>${v[0]}</b><span>${v[1]}</span></div>`).join(""); | |
| fields.innerHTML=x.fields.map(v=>`<span class="tag">${v}</span>`).join(""); | |
| const labels={DebugValue:"Debug value",CorrelationValue:"Correlation value",CostVisibility:"Cost visibility",Complexity:"Implementation complexity"}; | |
| metrics.innerHTML=Object.entries(x.m).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(""); | |
| risk.textContent=x.risk; | |
| } | |
| buttons();render(); | |
| </script> | |
| </body> | |
| </html> | |