File size: 2,874 Bytes
5df70ef d612f64 5df70ef ce35403 5df70ef ce35403 5df70ef ce35403 5df70ef ce35403 5df70ef | 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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | const stages = [
{ tag: "01", title: "Catalog", body: "milestones.ts holds title, year, bridge copy, and math." },
{ tag: "02", title: "Timeline", body: "Each node is a button. Dashed edges carry the why-the-next-step text." },
{ tag: "03", title: "Inspect", body: "Click opens a looping architecture diagram, bottleneck, and formula." },
{ tag: "04", title: "Block probe", body: "Schematic cells select an inspect chip so a layer maps to one explanation." },
];
const path = [
"patches",
"ViT",
"projector",
"LLM tokens",
"SDPA",
"logits",
];
export function EngineeringDesign() {
return (
<section className="mx-auto mt-14 max-w-xl rounded-md border border-cyan-300/20 bg-[#081018] p-4">
<div className="mb-4 flex items-end justify-between gap-3 border-b border-dashed border-cyan-300/25 pb-3">
<div>
<p className="font-mono text-[10px] tracking-[0.28em] text-cyan-200/80 uppercase">
Dwg 01 · explorer
</p>
<h2 className="mt-1 text-sm font-semibold text-slate-100">
How this explorer is wired
</h2>
</div>
<p className="font-mono text-[10px] text-slate-500">Not a model diagram</p>
</div>
<p className="mb-4 text-[12px] leading-relaxed text-slate-400">
This strip is a map of the page itself: catalog → timeline → inspect
overlay. The looping figures live in the inspect view, not here.
</p>
<ol className="grid gap-2 sm:grid-cols-2">
{stages.map((stage) => (
<li
key={stage.tag}
className="rounded border border-white/10 bg-black/30 px-3 py-2"
>
<p className="font-mono text-[10px] text-cyan-200">
{stage.tag} {stage.title}
</p>
<p className="mt-1 text-[12px] leading-snug text-slate-400">
{stage.body}
</p>
</li>
))}
</ol>
<div className="mt-4 overflow-x-auto border border-dashed border-white/15 px-3 py-3">
<p className="mb-2 font-mono text-[10px] tracking-[0.2em] text-slate-500 uppercase">
VLM signal path (top layer)
</p>
<div className="flex min-w-[32rem] items-center gap-1">
{path.map((step, i) => (
<div key={step} className="flex items-center gap-1">
<span className="rounded-sm border border-cyan-300/35 bg-cyan-400/5 px-2 py-1 font-mono text-[10px] text-cyan-100">
{step}
</span>
{i < path.length - 1 ? (
<span className="font-mono text-[10px] text-slate-500">→</span>
) : null}
</div>
))}
</div>
<p className="mt-2 font-mono text-[11px] text-slate-500">
z = LLM([W · ViT(image); text])
</p>
</div>
</section>
);
}
|