wuyang/llm-atlas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: launch LLM Atlas research course

Browse Source
This commit is contained in:
wuyang
2026-07-28 21:55:19 +08:00
commit 7d5c5e4c54
33 changed files with 13285 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/roadmap/index.astro
+468
View File
@@ -0,0 +1,468 @@
---
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", "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>从 K3 反向拆组件</h3>
<p>K3 → 07 → 06 → 03 → 11 → 08/14</p>
<ol>
<li>解释三维信息流</li>
<li>比较 KDA 与 MLA</li>
<li>解释 2.8T / 104B</li>
<li>读懂 1M Agentic RL 系统</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>