| 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> |
| ); |
| } |
|
|
