import React, { useMemo, useState } from “react”;
// Interactive diagram of languages & layers powering ChatGPT-like systems
// Single-file React component. Uses Tailwind for styling. No external libs needed.
const nodesData = [
{
id: “ui”,
title: “User Interfaces”,
subtitle: “Web & Apps”,
languages: [“TypeScript”, “JavaScript”, “HTML/CSS”],
x: 80,
y: 40,
w: 820,
h: 70,
details:
“Browsers and mobile apps render the chat UI, stream tokens, and handle inputs like voice, images, and files.”,
},
{
id: “edge”,
title: “API Gateway / Edge”,
subtitle: “Routing & Auth”,
languages: [“Go”, “Rust”, “TypeScript”],
x: 80,
y: 130,
w: 820,
h: 65,
details:
“Terminates TLS, authenticates users, rate‑limits traffic, and routes requests to regional backends.”,
},
{
id: “orchestration”,
title: “Orchestration & Business Logic”,
subtitle: “Sessions, tools, formats”,
languages: [“Go”, “Rust”, “Python”],
x: 80,
y: 215,
w: 390,
h: 75,
details:
“Prepares prompts, picks models and tools, manages conversation state, and coordinates multi‑step tasks.”,
},
{
id: “safety”,
title: “Safety, AuthZ & Abuse Mitigation”,
subtitle: “Policies & filters”,
languages: [“Go”, “Rust”, “Python”],
x: 510,
y: 215,
w: 390,
h: 75,
details:
“Applies policy checks before/after model calls, redacts sensitive data, and enforces rate/usage limits.”,
},
{
id: “serving”,
title: “Model Serving Layer”,
subtitle: “Batching, streaming”,
languages: [“Python”, “C++”, “CUDA”],
x: 80,
y: 310,
w: 820,
h: 85,
details:
“Runs model workers, batches requests for throughput, streams tokens back, and monitors GPU health.”,
},
{
id: “inference”,
title: “Inference Runtime”,
subtitle: “PyTorch / custom”,
languages: [“Python”],
x: 80,
y: 415,
w: 390,
h: 80,
details:
“Defines the forward pass, caching, and sampling (e.g., temperature, top‑p) for text generation.”,
},
{
id: “kernels”,
title: “Kernels & Tensor Ops”,
subtitle: “cuBLAS / cuDNN”,
languages: [“C++”, “CUDA”],
x: 510,
y: 415,
w: 390,
h: 80,
details:
“Low‑level GPU math: matrix multiplies, attention, fused ops. Heavily optimized for speed.”,
},
{
id: “vector”,
title: “Vector & Cache Stores”,
subtitle: “Context & speed”,
languages: [“C++/Rust backends”, “Python clients”],
x: 80,
y: 515,
w: 255,
h: 70,
details:
“Caches logits/kv tensors or retrieves embeddings for RAG to add relevant context to prompts.”,
},
{
id: “tools”,
title: “External Tools / APIs”,
subtitle: “Browsing, code, data”,
languages: [“Varies”, “Python”, “HTTP”],
x: 360,
y: 515,
w: 255,
h: 70,
details:
“The model can call external services (search, math, databases) mid‑conversation to augment answers.”,
},
{
id: “telemetry”,
title: “Telemetry & Observability”,
subtitle: “Metrics & tracing”,
languages: [“Go”, “Rust”, “TypeScript”],
x: 645,
y: 515,
w: 255,
h: 70,
details:
“Collects logs, metrics, and traces to keep latency low and reliability high across regions.”,
},
{
id: “training”,
title: “Training (Offline)”,
subtitle: “Data ➜ Weights”,
languages: [“Python”, “C++”, “CUDA”],
x: 10,
y: 215,
w: 55,
h: 180,
details:
“Large‑scale pretraining and finetuning produce model weights that serving nodes load at runtime.”,
},
];
const edges = [
[“ui”, “edge”],
[“edge”, “orchestration”],
[“edge”, “safety”],
[“orchestration”, “serving”],
[“safety”, “serving”],
[“serving”, “inference”],
[“serving”, “kernels”],
[“inference”, “vector”],
[“inference”, “tools”],
[“kernels”, “telemetry”],
[“serving”, “telemetry”],
];
function Arrow({ from, to, getBox }) {
const a = getBox(from);
const b = getBox(to);
const x1 = a.x + a.w / 2;
const y1 = a.y + a.h;
const x2 = b.x + b.w / 2;
const y2 = b.y;
return (
);
}
function useFilteredNodes(query) {
return useMemo(() => {
if (!query) return nodesData;
const q = query.toLowerCase();
return nodesData.filter((n) =>
[n.title, n.subtitle, n.details, …(n.languages || [])]
.join(” “)
.toLowerCase()
.includes(q)
);
}, [query]);
}
export default function GPTStackMap() {
const [selectedId, setSelectedId] = useState(“serving”);
const [hoverId, setHoverId] = useState(null);
const [query, setQuery] = useState(“”);
const nodes = useFilteredNodes(query);
const nodeIndex = Object.fromEntries(nodes.map((n, i) => [n.id, i]));
const visibleEdges = edges.filter(([a, b]) => nodeIndex[a] !== undefined && nodeIndex[b] !== undefined);
const getBox = (id) => nodes.find((n) => n.id === id) || nodesData.find((n) => n.id === id);
const selected = nodes.find((n) => n.id === selectedId) || nodesData.find((n) => n.id === selectedId);
return (
);
}