File size: 3,737 Bytes
005833b dc29f08 6d09a0b 005833b 6d09a0b 005833b | 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 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | "use client";
const STEPS = [
{
number: "01",
title: "Query Enters the System",
description: "A natural language question arrives. The Adaptive Router analyzes complexity, entity count, and multi-hop indicators to classify the query.",
detail: "Complexity score: 0.0–1.0 | Types: bridge, comparison, factoid",
color: "#FF6B00",
},
{
number: "02",
title: "3-Pipeline Activation",
description: "All 3 pipelines execute simultaneously: LLM-Only (no retrieval), Baseline RAG (vector search → LLM), and GraphRAG (entity extraction → graph traversal → LLM).",
detail: "Schema-bounded extraction ensures valid entities | GSQL multi-hop traversal",
color: "#0072CE",
},
{
number: "03",
title: "Graph Traversal & Evidence",
description: "TigerGraph traces entity→relation→entity paths through the knowledge graph, collecting structured evidence that the LLM can follow.",
detail: "2-hop traversal | Reasoning paths | Dual-level keywords",
color: "#5db8a6",
},
{
number: "04",
title: "LLM Generation & Evaluation",
description: "Any of 12 LLM providers (Gemini, GPT-4, Llama, etc.) generates answers. Evaluated with F1, Exact Match, LLM-as-a-Judge (PASS/FAIL), and BERTScore in real-time.",
detail: "Cost tracking | Token counting | Latency measurement",
color: "#cc785c",
},
];
export function HowItWorks() {
return (
<section className="section" style={{ background: "var(--color-surface-soft)" }}>
<div className="container">
<div className="text-center mb-16">
<div className="caption-uppercase mb-3" style={{ color: "var(--color-tiger-orange)" }}>
How It Works
</div>
<h2 className="display-lg mb-4">From query to answer<br />in four steps</h2>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
{STEPS.map((step, i) => (
<div key={i} className="card card-hover" style={{ position: "relative", overflow: "hidden" }}>
{/* Step Number */}
<div style={{
position: "absolute", top: "-12px", right: "-8px",
fontFamily: "var(--font-serif)",
fontSize: "6rem",
fontWeight: 700,
color: step.color,
opacity: 0.06,
lineHeight: 1,
}}>
{step.number}
</div>
<div className="flex gap-4">
<div style={{
width: "48px", height: "48px", borderRadius: "12px",
background: `${step.color}12`,
display: "flex", alignItems: "center", justifyContent: "center",
fontFamily: "var(--font-mono)",
fontWeight: 700, fontSize: "0.875rem",
color: step.color,
flexShrink: 0,
}}>
{step.number}
</div>
<div>
<h3 className="title-md mb-2">{step.title}</h3>
<p className="body-sm mb-3" style={{ color: "var(--color-muted)" }}>
{step.description}
</p>
<div style={{
padding: "8px 12px",
background: "var(--color-surface-soft)",
borderRadius: "8px",
fontFamily: "var(--font-mono)",
fontSize: "0.75rem",
color: "var(--color-muted)",
}}>
{step.detail}
</div>
</div>
</div>
</div>
))}
</div>
</div>
</section>
);
}
|