wuyang
469 lines
13 KiB
Plaintext
469 lines
13 KiB
Plaintext
---
|
||
import BaseLayout from "@/layouts/BaseLayout.astro";
|
||
import { chapters, statusLabel } from "@/data/chapters";
|
||
|
||
const totalPapers = chapters.reduce((sum, chapter) => sum + chapter.papers, 0);
|
||
const averageProgress = Math.round(chapters.reduce((sum, chapter) => sum + chapter.progress, 0) / chapters.length);
|
||
|
||
const stages = [
|
||
{ label: "A · 起点", items: ["00", "01"] },
|
||
{ label: "B · 核心架构", items: ["02", "03", "04", "05"] },
|
||
{ label: "C · 规模化", items: ["06", "07", "08", "09"] },
|
||
{ label: "D · 行为与能力", items: ["10", "11", "12", "13"] },
|
||
{ label: "E · 落地与判断", items: ["14", "15"] },
|
||
];
|
||
---
|
||
|
||
<BaseLayout
|
||
title="完整学习地图"
|
||
description="LLM Atlas 的 16 个专题、先修依赖、关键问题、论文规模、完成状态与四条推荐学习路径。"
|
||
section="roadmap"
|
||
>
|
||
<header class="page-hero">
|
||
<div class="page-hero-inner">
|
||
<div>
|
||
<p class="eyebrow"><span>CURRICULUM / 00</span> LEARNING GRAPH</p>
|
||
<h1>先知道自己在哪里，<br />再决定往哪里深入</h1>
|
||
<p class="lead">
|
||
16 个专题不是一条必须顺序走完的直线。它们组成有依赖的图：
|
||
Transformer 是共同地基，MoE/长上下文/训练系统相互牵引，后训练再通向推理与 Agent。
|
||
</p>
|
||
</div>
|
||
<dl class="page-facts">
|
||
<div><dt>MODULES</dt><dd>16 个专题</dd></div>
|
||
<div><dt>PAPER SLOTS</dt><dd>{totalPapers} 篇核心论文位</dd></div>
|
||
<div><dt>PATHS</dt><dd>4 条推荐路径</dd></div>
|
||
<div><dt>PROGRESS</dt><dd>首版平均 {averageProgress}%</dd></div>
|
||
<div><dt>DEPTH</dt><dd>L0 直觉 → L3 工程</dd></div>
|
||
</dl>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="section" id="graph">
|
||
<div class="section-heading">
|
||
<div>
|
||
<p class="eyebrow"><span>01</span> DEPENDENCY GRAPH</p>
|
||
<h2>从左到右，是知识依赖，不是历史年份</h2>
|
||
</div>
|
||
<p class="section-lead">
|
||
一篇论文可能跨多个专题。例如 DeepSeek-V3 同时属于 MoE、训练系统、低精度和后训练；
|
||
K3 则是几乎全部主线的汇流点。
|
||
</p>
|
||
</div>
|
||
|
||
<div class="learning-graph" role="img" aria-label="LLM Atlas 专题依赖图">
|
||
{stages.map((stage, stageIndex) => (
|
||
<div class="graph-stage">
|
||
<span>{stage.label}</span>
|
||
<div>
|
||
{stage.items.map((number) => {
|
||
const chapter = chapters.find((item) => item.number === number)!;
|
||
return (
|
||
<a href={`#chapter-${number}`} class:list={{ hot: ["02", "03", "06", "07", "11"].includes(number) }}>
|
||
<b>{number}</b>
|
||
<p>{chapter.title}</p>
|
||
</a>
|
||
);
|
||
})}
|
||
</div>
|
||
{stageIndex < stages.length - 1 && <i aria-hidden="true">→</i>}
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div class="graph-legend">
|
||
<div><i class="base"></i><span>普通节点：专题章节</span></div>
|
||
<div><i class="hot"></i><span>关键枢纽：被多条路径依赖</span></div>
|
||
<div><b>→</b><span>建议先修方向</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="paths">
|
||
<div class="section-heading">
|
||
<div>
|
||
<p class="eyebrow"><span>02</span> FOUR ROUTES</p>
|
||
<h2>四条路径，四种不同的“读懂”</h2>
|
||
</div>
|
||
<p class="section-lead">路线可以交叉。每条路线的终点不是记住术语，而是具备一项可验证的阅读或设计能力。</p>
|
||
</div>
|
||
|
||
<div class="route-grid">
|
||
<article>
|
||
<span>ROUTE A · BEGINNER</span>
|
||
<h3>从零建立架构直觉</h3>
|
||
<p>01 → 02 → 03 → 04 → 10</p>
|
||
<ol>
|
||
<li>解释 next-token objective</li>
|
||
<li>手算一次 self-attention</li>
|
||
<li>画出 decoder block</li>
|
||
<li>区分 pretrain 与 post-train</li>
|
||
</ol>
|
||
</article>
|
||
<article>
|
||
<span>ROUTE B · K3 REVERSE</span>
|
||
<h3>从 47 页 K3 报告反向拆组件</h3>
|
||
<p>K3 架构 → 07/06/03 → 05/04 → 11/12 → 08/14/15</p>
|
||
<ol>
|
||
<li>沿 32 张问题账解释三维信息流</li>
|
||
<li>用 8 个实验比较 KDA、MLA、AttnRes 与 LatentMoE</li>
|
||
<li>分清 2.78T / 104.2B、2.5× 与 1M 的证据口径</li>
|
||
<li>读懂九专家 MOPD、AgentENV、混合缓存与评测协议</li>
|
||
</ol>
|
||
</article>
|
||
<article>
|
||
<span>ROUTE C · DEEPSEEK</span>
|
||
<h3>沿论文看算法—系统协同</h3>
|
||
<p>04 → 06 → 07 → 09 → 11 → 12</p>
|
||
<ol>
|
||
<li>推导 MLA 缓存压缩</li>
|
||
<li>理解 FP8 scaling</li>
|
||
<li>区分 PPO 与 GRPO</li>
|
||
<li>对照 V4 与 K3 长上下文</li>
|
||
</ol>
|
||
</article>
|
||
<article>
|
||
<span>ROUTE D · SYSTEMS</span>
|
||
<h3>跟一个 Token 穿过真实集群</h3>
|
||
<p>02 → 04 → 08 → 09 → 14 → 15</p>
|
||
<ol>
|
||
<li>做显存与 FLOPs 账本</li>
|
||
<li>选择并行切分</li>
|
||
<li>理解 KV Cache 与调度</li>
|
||
<li>设计评测 harness</li>
|
||
</ol>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="modules">
|
||
<div class="section-heading">
|
||
<div>
|
||
<p class="eyebrow"><span>03</span> ALL MODULES</p>
|
||
<h2>每个专题都有问题、先修、论文和完成标准</h2>
|
||
</div>
|
||
<p class="section-lead">
|
||
“研究中”表示资料已建立但正文未完成；“首版可读”表示已有连贯解释，不代表内容已经停止迭代。
|
||
</p>
|
||
</div>
|
||
|
||
<div class="module-list">
|
||
{chapters.map((chapter) => (
|
||
<article id={`chapter-${chapter.number}`} class="module-row">
|
||
<div class="module-index">
|
||
<b>{chapter.number}</b>
|
||
<span>{chapter.kicker}</span>
|
||
</div>
|
||
<div class="module-main">
|
||
<div class="module-heading">
|
||
<h3>{chapter.title}</h3>
|
||
<span class={`status ${chapter.status}`}>{statusLabel[chapter.status]}</span>
|
||
</div>
|
||
<p class="question">{chapter.question}</p>
|
||
<p>{chapter.summary}</p>
|
||
<div class="module-tags">
|
||
{chapter.highlights.map((item) => <span>{item}</span>)}
|
||
</div>
|
||
</div>
|
||
<aside>
|
||
<div><span>PREREQUISITES</span><b>{chapter.prerequisites.length ? chapter.prerequisites.join(" · ") : "无"}</b></div>
|
||
<div><span>CORE PAPERS</span><b>{chapter.papers}</b></div>
|
||
<div><span>PROGRESS</span><b>{chapter.progress}%</b></div>
|
||
<div class="progress-track"><span style={`width:${chapter.progress}%`}></span></div>
|
||
</aside>
|
||
</article>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section compact" id="standard">
|
||
<div class="section-heading">
|
||
<div>
|
||
<p class="eyebrow"><span>04</span> DEFINITION OF DONE</p>
|
||
<h2>什么时候一个专题才算真正完成</h2>
|
||
</div>
|
||
<p class="section-lead">完成不是“字数够长”。每个专题必须通过结构、事实、来源、教学、对照和可访问性六道闸门。</p>
|
||
</div>
|
||
<div class="feature-grid">
|
||
<article class="feature-card"><span class="card-number">01</span><h3>问题链</h3><p>旧方法为何失败、新方法改变什么、怎样通向下一篇论文。</p></article>
|
||
<article class="feature-card"><span class="card-number">02</span><h3>一手证据</h3><p>8–20 篇核心论文，数字与结论链接到原始来源。</p></article>
|
||
<article class="feature-card"><span class="card-number">03</span><h3>视觉推导</h3><p>至少两张可缩放图和一个交互实验或逐步动画。</p></article>
|
||
<article class="feature-card"><span class="card-number">04</span><h3>贯穿对照</h3><p>明确回答这项技术在 K3 与 DeepSeek 中怎样出现。</p></article>
|
||
</div>
|
||
</section>
|
||
|
||
<style>
|
||
.learning-graph {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||
max-width: 1200px;
|
||
border-top: 1px solid var(--line);
|
||
border-left: 1px solid var(--line);
|
||
}
|
||
|
||
.graph-stage {
|
||
position: relative;
|
||
min-height: 440px;
|
||
padding: 22px;
|
||
border-right: 1px solid var(--line);
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.graph-stage > span {
|
||
color: var(--muted);
|
||
font: 0.62rem/1 var(--mono);
|
||
letter-spacing: 0.1em;
|
||
}
|
||
|
||
.graph-stage > div {
|
||
display: grid;
|
||
gap: 12px;
|
||
margin-top: 27px;
|
||
}
|
||
|
||
.graph-stage a {
|
||
min-height: 74px;
|
||
padding: 13px;
|
||
border: 1px solid var(--line);
|
||
background: var(--paper-raised);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.graph-stage a.hot {
|
||
border-color: rgba(173, 100, 69, 0.5);
|
||
background: var(--copper-pale);
|
||
}
|
||
|
||
.graph-stage a b {
|
||
color: var(--copper);
|
||
font: 0.62rem/1 var(--mono);
|
||
}
|
||
|
||
.graph-stage a p {
|
||
margin-top: 9px;
|
||
font-size: 0.75rem;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.graph-stage > i {
|
||
position: absolute;
|
||
z-index: 2;
|
||
top: 50%;
|
||
right: -12px;
|
||
display: grid;
|
||
place-items: center;
|
||
width: 24px;
|
||
height: 24px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 50%;
|
||
background: var(--paper);
|
||
color: var(--muted);
|
||
font-style: normal;
|
||
}
|
||
|
||
.graph-legend {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 24px;
|
||
margin-top: 18px;
|
||
}
|
||
|
||
.graph-legend div {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
color: var(--muted);
|
||
font-size: 0.7rem;
|
||
}
|
||
|
||
.graph-legend i {
|
||
width: 14px;
|
||
height: 14px;
|
||
border: 1px solid var(--line-strong);
|
||
background: var(--paper-raised);
|
||
}
|
||
|
||
.graph-legend i.hot {
|
||
border-color: var(--copper);
|
||
background: var(--copper-pale);
|
||
}
|
||
|
||
.route-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
max-width: 1100px;
|
||
border-top: 1px solid var(--line);
|
||
border-left: 1px solid var(--line);
|
||
}
|
||
|
||
.route-grid article {
|
||
min-height: 330px;
|
||
padding: 30px;
|
||
border-right: 1px solid var(--line);
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.route-grid article > span,
|
||
.module-index span,
|
||
.module-row aside span {
|
||
color: var(--copper);
|
||
font: 0.62rem/1 var(--mono);
|
||
letter-spacing: 0.1em;
|
||
}
|
||
|
||
.route-grid h3 {
|
||
margin: 30px 0 15px;
|
||
font-size: 1.4rem;
|
||
}
|
||
|
||
.route-grid article > p {
|
||
color: var(--muted);
|
||
font: 0.7rem/1.6 var(--mono);
|
||
}
|
||
|
||
.route-grid ol {
|
||
display: grid;
|
||
gap: 10px;
|
||
margin: 25px 0 0;
|
||
padding-left: 1.2rem;
|
||
color: var(--muted);
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.module-list {
|
||
max-width: 1150px;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
|
||
.module-row {
|
||
display: grid;
|
||
grid-template-columns: 120px minmax(0, 1fr) 180px;
|
||
gap: 32px;
|
||
padding: 34px 8px;
|
||
border-bottom: 1px solid var(--line);
|
||
scroll-margin-top: 96px;
|
||
}
|
||
|
||
.module-index b {
|
||
display: block;
|
||
margin-bottom: 18px;
|
||
color: var(--copper);
|
||
font: 700 1.1rem/1 var(--mono);
|
||
}
|
||
|
||
.module-index span {
|
||
color: var(--muted-light);
|
||
font-size: 0.55rem;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.module-heading {
|
||
display: flex;
|
||
align-items: start;
|
||
justify-content: space-between;
|
||
gap: 20px;
|
||
}
|
||
|
||
.module-heading h3 {
|
||
font-size: 1.4rem;
|
||
}
|
||
|
||
.module-main > p {
|
||
max-width: 700px;
|
||
margin-top: 12px;
|
||
color: var(--muted);
|
||
font-size: 0.8rem;
|
||
line-height: 1.72;
|
||
}
|
||
|
||
.module-main > p.question {
|
||
color: var(--ink);
|
||
font-family: var(--serif);
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.module-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 7px;
|
||
margin-top: 18px;
|
||
}
|
||
|
||
.module-tags span {
|
||
padding: 5px 8px;
|
||
border: 1px solid var(--line);
|
||
color: var(--muted);
|
||
font-size: 0.64rem;
|
||
}
|
||
|
||
.module-row aside {
|
||
display: grid;
|
||
gap: 14px;
|
||
align-content: start;
|
||
padding-left: 22px;
|
||
border-left: 1px solid var(--line);
|
||
}
|
||
|
||
.module-row aside div:not(.progress-track) {
|
||
display: grid;
|
||
gap: 6px;
|
||
}
|
||
|
||
.module-row aside span {
|
||
color: var(--muted-light);
|
||
font-size: 0.54rem;
|
||
}
|
||
|
||
.module-row aside b {
|
||
font-size: 0.76rem;
|
||
font-weight: 550;
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.learning-graph {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.graph-stage {
|
||
min-height: auto;
|
||
}
|
||
|
||
.graph-stage > div {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
.graph-stage > i {
|
||
top: auto;
|
||
right: 50%;
|
||
bottom: -12px;
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
.module-row {
|
||
grid-template-columns: 70px 1fr;
|
||
}
|
||
|
||
.module-row aside {
|
||
grid-column: 2;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
padding: 20px 0 0;
|
||
border-top: 1px solid var(--line);
|
||
border-left: 0;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 650px) {
|
||
.route-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.module-row {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.module-row aside {
|
||
grid-column: auto;
|
||
}
|
||
}
|
||
</style>
|
||
</BaseLayout>
|