shiyue/cc-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update rag for pm pages

Browse Source
This commit is contained in:
shiyue
2026-06-28 23:13:50 +08:00
parent 519e877220
commit 50d79d0d48
6 changed files with 9844 additions and 771 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
public/assets/lucide.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

3173
public/examples/rag-for-pm/index.html Normal file
View File

File diff suppressed because it is too large Load Diff

838
public/rag-for-pm-v2.html
View File

@@ -2,489 +2,546 @@
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>RAG 入门：原理、流程与使用</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RAG 知识库问答入门：AI 产品经理面试版</title>
<style>
:root{
--blue:#0b63f6;
--blue2:#0f8bff;
--cyan:#15c8c2;
--green:#12a57d;
--navy:#061b4e;
--ink:#102047;
--muted:#51627f;
--line:#c8dcff;
--bg:#eef4ff;
--paper:#ffffff;
--ink:#071b4a;
--text:#102754;
--muted:#516381;
--blue:#1769ff;
--blue2:#0a4bd8;
--cyan:#12b9c9;
--green:#0f9f7a;
--orange:#f59e0b;
--red:#e54865;
--line:#c8dafe;
--soft:#f3f8ff;
--glass:rgba(255,255,255,.86);
--shadow:0 20px 46px rgba(16,45,100,.16),0 2px 10px rgba(16,45,100,.08);
--shadow:0 18px 44px rgba(17,55,122,.16),0 2px 10px rgba(17,55,122,.06);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#eef3fb;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC","Microsoft YaHei",Arial,sans-serif}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC","Microsoft YaHei",Arial,sans-serif}
body{display:grid;place-items:center}
h1,h2,h3,h4,p{margin:0}
.deck{position:relative;width:100vw;height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 8% 15%,rgba(11,99,246,.13),transparent 24%),radial-gradient(circle at 90% 80%,rgba(21,200,194,.16),transparent 28%),#edf3fb}
.slide{position:relative;display:none;width:min(100vw,calc(100vh * 16 / 9));aspect-ratio:16/9;max-height:100vh;background:#fff;overflow:hidden;box-shadow:var(--shadow);padding:46px 56px 42px}
.deck{position:relative;width:100vw;height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 8% 10%,rgba(23,105,255,.14),transparent 26%),radial-gradient(circle at 92% 86%,rgba(18,185,201,.14),transparent 26%),#eef4ff}
.slide{position:relative;display:none;width:min(100vw,calc(100vh * 16 / 9));height:min(100vh,calc(100vw * 9 / 16));background:var(--paper);box-shadow:var(--shadow);overflow:hidden}
.slide.active{display:block}
.slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,97,246,.05) 1px,transparent 1px),linear-gradient(rgba(12,97,246,.05) 1px,transparent 1px);background-size:36px 36px;mask-image:radial-gradient(ellipse at 45% 40%,black 18%,transparent 82%);pointer-events:none}
.slide::after{content:"";position:absolute;left:-120px;bottom:-70px;width:580px;height:180px;background:repeating-linear-gradient(155deg,rgba(11,99,246,.11) 0 2px,transparent 2px 12px);transform:skewX(-18deg);opacity:.55;pointer-events:none}
.slide > *{position:relative;z-index:1}
.slide-inner{height:100%;display:flex;flex-direction:column;gap:18px}
.top{height:66px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;border-bottom:2px solid #dbe8ff;padding-bottom:14px}
.chapter{height:56px;min-width:122px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:30px;font-weight:900;letter-spacing:.03em;background:linear-gradient(135deg,#0054e6,#0d82ff);clip-path:polygon(0 0,82% 0,100% 50%,82% 100%,0 100%);box-shadow:0 10px 22px rgba(11,99,246,.24)}
.head h2{font-size:34px;line-height:1.05;font-weight:900;letter-spacing:0;color:#061b4e}
.head p{font-size:15px;color:var(--muted);margin-top:6px}
.brand{display:flex;align-items:center;gap:10px;color:var(--blue);font-weight:900}
.brand-mark{width:44px;height:44px;border:2px solid var(--blue);border-radius:12px;display:grid;place-items:center;background:#fff;font-weight:900}
.content{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
.footer{height:42px;display:flex;align-items:flex-end;justify-content:space-between;color:#7d91b5;font-size:11px;letter-spacing:.14em;text-transform:uppercase;border-top:1px solid #dbe8ff;padding-top:12px}
.page-corner{position:absolute;right:0;bottom:0;width:86px;height:52px;background:linear-gradient(135deg,#0b63f6,#0050ca);clip-path:polygon(38% 0,100% 0,100% 100%,0 100%);color:#fff;font-size:18px;font-weight:900;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 18px 12px;z-index:3}
.kicker{font-size:13px;font-weight:900;letter-spacing:.18em;color:var(--blue);text-transform:uppercase;margin-bottom:8px}
.big-title{font-size:58px;line-height:1.08;font-weight:950;color:#061b4e;letter-spacing:0}
.sub{font-size:20px;line-height:1.55;color:var(--muted);max-width:760px;margin-top:14px}
.slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,105,255,.045) 1px,transparent 1px),linear-gradient(rgba(23,105,255,.045) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(ellipse at 44% 42%,black 10%,transparent 78%);pointer-events:none}
.slide::after{content:"";position:absolute;left:-90px;bottom:-70px;width:500px;height:150px;background:repeating-linear-gradient(155deg,rgba(23,105,255,.12) 0 2px,transparent 2px 11px);transform:skewX(-18deg);opacity:.45;pointer-events:none}
.canvas{position:relative;z-index:1;height:100%;padding:34px 48px 30px;display:flex;flex-direction:column;gap:16px}
.topbar{height:68px;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;border-bottom:2px solid #dbe8ff;padding-bottom:12px}
.sec{width:116px;height:54px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:29px;font-weight:950;background:linear-gradient(135deg,#0457e8,#178cff);clip-path:polygon(0 0,84% 0,100% 50%,84% 100%,0 100%);letter-spacing:.02em}
.title h2{font-size:29px;line-height:1.08;color:var(--ink);font-weight:950;letter-spacing:0}
.title p{margin-top:6px;color:var(--muted);font-size:14px;line-height:1.35}
.mark{display:flex;align-items:center;gap:9px;color:var(--blue);font-weight:950;font-size:13px}
.mark i,.mark .lucide-icon{width:38px;height:38px;border:2px solid var(--blue);border-radius:12px;display:grid;place-items:center;font-style:normal;background:#fff;padding:8px;color:var(--blue)}
.body{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
.foot{height:34px;border-top:1px solid #dbe8ff;padding-top:10px;display:flex;justify-content:space-between;align-items:flex-start;color:#7d90b4;font-size:10px;letter-spacing:.13em;text-transform:uppercase}
.corner{position:absolute;right:0;bottom:0;width:82px;height:50px;background:linear-gradient(135deg,var(--blue),var(--blue2));clip-path:polygon(38% 0,100% 0,100% 100%,0 100%);color:#fff;font-weight:950;font-size:17px;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 16px 11px;z-index:2}
.kicker{color:var(--blue);font-size:13px;font-weight:950;letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px}
.hero{display:grid;grid-template-columns:1.08fr .92fr;gap:28px;align-items:center}
.hero h1{font-size:50px;line-height:1.1;color:var(--ink);font-weight:950;letter-spacing:0}
.hero .lead{margin-top:18px;font-size:20px;line-height:1.55;color:var(--muted);max-width:760px}
.accent{background:linear-gradient(135deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{background:var(--glass);border:1.5px solid var(--line);border-radius:14px;box-shadow:0 12px 26px rgba(38,91,160,.09);padding:18px}
.card h3{font-size:20px;color:#08205d;font-weight:900}
.card h4{font-size:17px;color:#08205d;font-weight:900}
.card p,.card li{font-size:13px;line-height:1.55;color:var(--muted)}
.tag{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 12px;border-radius:999px;background:#eaf3ff;color:var(--blue);font-size:12px;font-weight:900}
.tag.green{background:#e7fbf5;color:var(--green)}
.tag.cyan{background:#e7fbff;color:#0796a5}
.tag.warn{background:#fff4de;color:#d27a00}
.tag.red{background:#fff0f4;color:#d81948}
.icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid #c8dcff;box-shadow:0 8px 18px rgba(11,99,246,.12);color:var(--blue);font-size:23px;font-weight:950;margin-bottom:10px}
.ribbon-row{display:grid;grid-template-columns:175px 1fr;gap:18px;align-items:center;margin:14px 0}
.ribbon{height:78px;display:flex;align-items:center;gap:14px;color:#fff;background:linear-gradient(135deg,var(--blue),#0050d8);clip-path:polygon(0 0,88% 0,100% 50%,88% 100%,0 100%);border-radius:10px 0 0 10px;padding:0 22px;font-size:22px;font-weight:950}
.ribbon.green{background:linear-gradient(135deg,#08a88f,#06c1b8)}
.ribbon.navy{background:linear-gradient(135deg,#12327a,#0b63f6)}
.ribbon-line{min-height:78px;border:1.5px solid var(--line);border-radius:12px;background:rgba(255,255,255,.78);display:grid;grid-template-columns:90px 1fr;align-items:center;padding:14px 22px}
.dot-list{display:grid;gap:7px}
.dot-list span{position:relative;padding-left:16px;color:#1b2b58;font-size:14px;line-height:1.4}
.dot-list span::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.diagram-title{height:34px;display:inline-flex;align-items:center;padding:0 18px;border-radius:10px;background:linear-gradient(135deg,var(--blue),#0053df);color:#fff;font-weight:950;box-shadow:0 10px 18px rgba(11,99,246,.22)}
.stack{display:grid;gap:12px}
.stack-layer{position:relative;border:1.5px solid #a7c8ff;border-radius:20px;background:linear-gradient(180deg,#fff,rgba(237,247,255,.92));box-shadow:0 14px 26px rgba(11,99,246,.12);padding:18px 20px}
.stack-layer::after{content:"";position:absolute;left:42px;right:42px;bottom:-11px;height:18px;border-radius:0 0 22px 22px;background:linear-gradient(90deg,rgba(11,99,246,.18),rgba(21,200,194,.18));z-index:-1}
.stack-items{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.mini{background:#fff;border:1px solid #d7e6ff;border-radius:12px;padding:13px;text-align:center;min-height:92px}
.mini strong{display:block;font-size:16px;color:#08205d;margin-bottom:4px}
.mini span{font-size:12px;line-height:1.35;color:var(--muted)}
.side-notes{display:grid;gap:20px}
.side-note{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center}
.side-note .round{width:52px;height:52px;border-radius:50%;border:2px solid #d7e6ff;background:#fff;display:grid;place-items:center;color:var(--blue);font-weight:950;font-size:20px}
.side-note strong{display:block;color:var(--blue);font-size:16px}
.side-note span{font-size:12px;color:var(--muted)}
.value-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px;border:1px solid #d8e6ff;border-radius:14px;background:rgba(255,255,255,.76);padding:12px 14px}
.value{display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:center;border-right:1px solid #d8e6ff}
.value:last-child{border-right:0}
.value .vicon{width:38px;height:38px;border-radius:10px;background:#eaf3ff;color:var(--blue);display:grid;place-items:center;font-weight:950}
.value strong{display:block;font-size:15px;color:var(--blue)}
.value span{font-size:11px;color:var(--muted)}
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:stretch}
.step{position:relative;min-height:142px;padding:16px;border:1.5px solid #bdd7ff;border-radius:14px;background:#fff;box-shadow:0 10px 22px rgba(11,99,246,.08)}
.step::after{content:"";position:absolute;right:-13px;top:50%;width:14px;height:2px;background:#8db9ff}
.panel{border:1.5px solid var(--line);border-radius:18px;background:rgba(255,255,255,.86);box-shadow:0 12px 30px rgba(20,84,170,.10);padding:18px}
.panel.blue{background:linear-gradient(135deg,#eef6ff,#ffffff);border-color:#9dc2ff}
.panel.dark{background:#061c49;color:#eaf2ff;border-color:#061c49}
.panel.dark p,.panel.dark li{color:#c9dbff}
.panel h3{font-size:19px;color:var(--ink);font-weight:950;margin-bottom:8px}
.panel.dark h3{color:#fff}
.panel p,.panel li{font-size:14px;line-height:1.58;color:var(--muted)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tag{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:26px;padding:0 11px;border-radius:999px;background:#eaf3ff;color:var(--blue);font-size:12px;font-weight:950;margin-bottom:10px}
.tag .lucide-icon{width:14px;height:14px;stroke-width:2.4}
.tag.green{background:#e8fbf4;color:var(--green)}
.tag.orange{background:#fff4df;color:#bd6b00}
.tag.red{background:#fff0f4;color:var(--red)}
.tag.cyan{background:#e7fbff;color:#098fa0}
.mini-list{display:grid;gap:7px}
.mini-list span{position:relative;padding-left:15px;color:var(--text);font-size:14px;line-height:1.45}
.mini-list span::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:stretch}
.step{position:relative;border:1.5px solid #bdd6ff;border-radius:14px;background:#fff;padding:14px;min-height:132px;box-shadow:0 10px 22px rgba(23,105,255,.08)}
.step::after{content:"";position:absolute;right:-11px;top:50%;width:10px;height:2px;background:#83b2ff}
.step:last-child::after{display:none}
.step .num{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;display:grid;place-items:center;font-weight:950;margin-bottom:10px}
.step h3{font-size:18px;color:#08205d;font-weight:950}
.step p{font-size:12px;line-height:1.45;color:var(--muted);margin-top:6px}
.step.hot{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(21,200,194,.12),0 10px 22px rgba(11,99,246,.08)}
.arrow{font-size:24px;color:#75a7ff;font-weight:950;text-align:center}
.num{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;display:grid;place-items:center;font-size:14px;font-weight:950;margin-bottom:9px}
.num .lucide-icon{width:17px;height:17px}
.step h3{font-size:16px;color:var(--ink);font-weight:950}
.step p{margin-top:6px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.wide-flow{display:grid;grid-template-columns:1fr 58px 1fr 58px 1fr;gap:12px;align-items:center}
.arrow{height:48px;border-radius:999px;background:#eaf3ff;color:var(--blue);display:grid;place-items:center;font-size:26px;font-weight:950}
.compare{display:grid;grid-template-columns:1fr 82px 1fr;gap:16px;align-items:center}
.compare .mid{height:82px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;font-size:26px;font-weight:950;box-shadow:0 12px 24px rgba(11,99,246,.24)}
.center-badge{width:150px;height:150px;border-radius:36px;background:linear-gradient(135deg,#0b63f6,#12c8c2);color:#fff;display:grid;place-items:center;text-align:center;font-size:28px;font-weight:950;box-shadow:0 20px 38px rgba(11,99,246,.28);margin:auto}
.limit-grid{display:grid;grid-template-columns:1fr 170px 1fr;gap:18px;align-items:center}
.limit-col{display:grid;gap:14px}
.limit{display:grid;grid-template-columns:50px 1fr;gap:12px;align-items:center;border:1.5px solid #cfe0ff;border-radius:14px;background:#fff;padding:14px}
.limit .n{width:46px;height:46px;border-radius:12px;background:#eaf3ff;color:var(--blue);display:grid;place-items:center;font-weight:950}
.pipeline{display:grid;grid-template-columns:1.1fr 1.2fr 1.1fr;gap:18px;align-items:center}
.pipe-card{border:1.5px solid #cfe0ff;border-radius:18px;background:#fff;padding:18px;min-height:260px}
.bad-list{display:grid;gap:10px;margin-top:14px}
.bad-list span{border:1px dashed #ffb4c4;border-radius:10px;background:#fff7fa;color:#a6193c;padding:10px;font-size:13px}
.filter{display:grid;place-items:center;min-height:280px}
.filter .funnel{width:190px;height:230px;background:linear-gradient(180deg,#e9f3ff,#fff);clip-path:polygon(8% 0,92% 0,62% 48%,62% 100%,38% 100%,38% 48%);border:2px solid #9fc3ff;filter:drop-shadow(0 12px 20px rgba(11,99,246,.16));display:grid;place-items:center;color:var(--blue);font-size:28px;font-weight:950}
.chunks{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:center}
.doc{border:1.5px solid #cfe0ff;border-radius:18px;background:#fff;padding:18px}
.slice{border-left:5px solid var(--blue);border-radius:10px;background:#f6faff;padding:12px;margin-top:10px}
.vector-bars{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;margin-top:16px}
.bar{height:56px;border-radius:7px;background:var(--blue);opacity:.25}
.bar:nth-child(2n){opacity:.45}.bar:nth-child(3n){opacity:.75}.bar:nth-child(5n){opacity:.9}
.rank-list{display:grid;gap:10px}
.rank{display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;border:1.5px solid #cfe0ff;border-radius:12px;background:#fff;padding:12px}
.rank .rnum{width:38px;height:38px;border-radius:10px;background:#eaf3ff;color:var(--blue);display:grid;place-items:center;font-weight:950}
.score{font-size:20px;font-weight:950;color:var(--green)}
.prompt-box{background:#071d48;color:#e7f0ff;border-radius:18px;padding:18px 20px;font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-size:13px;line-height:1.65;box-shadow:0 18px 34px rgba(7,29,72,.24)}
.prompt-box b{color:#7dd3fc}.prompt-box mark{background:rgba(250,204,21,.18);color:#fde68a;padding:1px 4px;border-radius:4px}
.agent-map{display:grid;grid-template-columns:1fr 70px 1fr 70px 1fr;gap:10px;align-items:center}
.agent-card{border:1.5px solid #cfe0ff;border-radius:18px;background:#fff;padding:18px;text-align:center;min-height:190px}
.agent-card .icon{margin:0 auto 12px}
.tool-bus{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:18px;align-items:center}
.bus{height:96px;border-radius:22px;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;display:grid;place-items:center;text-align:center;font-size:26px;font-weight:950;box-shadow:0 16px 30px rgba(11,99,246,.24)}
.tools{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tool{border:1.5px solid #cfe0ff;background:#fff;border-radius:14px;padding:15px;text-align:center;font-weight:900;color:#08205d}
.tool span{display:block;font-size:12px;color:var(--muted);font-weight:500;margin-top:4px}
.cover{padding:58px 70px 52px}
.cover .slide-inner{justify-content:center}
.cover-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center}
.cover-panel{border:1.5px solid #cfe0ff;background:rgba(255,255,255,.82);border-radius:24px;padding:26px;box-shadow:0 14px 30px rgba(11,99,246,.12)}
.cover-visual{position:relative;height:440px}
.orb{position:absolute;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan));box-shadow:0 24px 44px rgba(11,99,246,.24)}
.orb.one{width:205px;height:205px;left:160px;top:64px;display:grid;place-items:center;color:#fff;font-size:54px;font-weight:950}
.ring{position:absolute;border:2px dashed #9ac1ff;border-radius:50%;inset:22px;animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit-card{position:absolute;width:150px;border:1px solid #cfe0ff;border-radius:16px;background:#fff;padding:14px;text-align:center;box-shadow:0 12px 22px rgba(11,99,246,.13)}
.orbit-card.a{left:16px;top:36px}.orbit-card.b{right:18px;top:56px}.orbit-card.c{left:40px;bottom:52px}.orbit-card.d{right:42px;bottom:28px}
.orbit-card strong{display:block;color:var(--blue);font-size:18px}.orbit-card span{font-size:12px;color:var(--muted)}
.nav-controls{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:6px;padding:6px;border:1px solid rgba(16,32,71,.12);border-radius:999px;background:rgba(255,255,255,.74);box-shadow:0 8px 24px rgba(16,32,71,.12);backdrop-filter:blur(10px);opacity:.72;transition:opacity .18s ease,background .18s ease}
.nav-controls:hover,.nav-controls:focus-within{opacity:1;background:rgba(255,255,255,.94)}
.mid{height:82px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;font-size:26px;font-weight:950;box-shadow:0 14px 28px rgba(23,105,255,.22)}
.problem-map{display:grid;grid-template-columns:1fr 170px 1fr;gap:16px;align-items:center}
.limit-stack{display:grid;gap:12px}
.limit{display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:center;border:1.5px solid #cfe0ff;border-radius:14px;background:#fff;padding:13px}
.limit b{font-size:15px;color:var(--ink)}
.limit p{font-size:12.5px;line-height:1.42;color:var(--muted);margin-top:3px}
.badge-center{width:155px;height:155px;border-radius:34px;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;display:grid;place-items:center;text-align:center;font-size:24px;line-height:1.25;font-weight:950;box-shadow:0 18px 34px rgba(23,105,255,.25)}
.ribbon-row{display:grid;grid-template-columns:160px 1fr;gap:16px;align-items:center;margin:11px 0}
.ribbon{height:70px;border-radius:12px 0 0 12px;clip-path:polygon(0 0,88% 0,100% 50%,88% 100%,0 100%);display:flex;align-items:center;padding-left:20px;color:#fff;background:linear-gradient(135deg,var(--blue),#0051d9);font-size:20px;font-weight:950}
.ribbon.green{background:linear-gradient(135deg,#089d86,#12b9c9)}
.ribbon.orange{background:linear-gradient(135deg,#f59e0b,#ef7d00)}
.ribbon-box{min-height:70px;border:1.5px solid var(--line);border-radius:13px;background:#fff;display:grid;grid-template-columns:70px 1fr;align-items:center;gap:16px;padding:13px 18px}
.round-icon{width:54px;height:54px;border-radius:50%;background:#eef6ff;border:1.5px solid #bdd6ff;display:grid;place-items:center;color:var(--blue);font-weight:950;font-size:20px}
.round-icon .lucide-icon{width:25px;height:25px;stroke-width:2.2}
.matrix{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;align-items:center}
.chunk{border-left:5px solid var(--blue);background:#f6faff;border-radius:10px;padding:11px 12px;margin-top:9px}
.chunk h4{font-size:14px;color:var(--ink);margin-bottom:4px}
.chunk p{font-size:12.3px;line-height:1.42;color:var(--muted)}
.vector{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;margin-top:12px}
.bar{height:48px;border-radius:7px;background:var(--blue);opacity:.24}
.bar:nth-child(2n){opacity:.48}.bar:nth-child(3n){opacity:.76}.bar:nth-child(5n){opacity:.92}
.rank-list{display:grid;gap:9px}
.rank{display:grid;grid-template-columns:38px 1fr 52px;gap:10px;align-items:center;border:1.5px solid #cfe0ff;border-radius:12px;background:#fff;padding:10px}
.rank .r{width:34px;height:34px;border-radius:9px;background:#eaf3ff;color:var(--blue);display:grid;place-items:center;font-weight:950}
.rank strong{font-size:14px;color:var(--ink)}
.rank span{font-size:12px;color:var(--muted)}
.score{font-size:18px;font-weight:950;color:var(--green);text-align:right}
.prompt{background:#061c49;color:#e9f2ff;border-radius:16px;padding:16px 18px;font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-size:12.5px;line-height:1.62;box-shadow:0 16px 30px rgba(6,28,73,.22)}
.prompt b{color:#7dd3fc}.prompt mark{background:rgba(250,204,21,.16);color:#fde68a;border-radius:4px;padding:1px 4px}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.metric{border:1.5px solid #cfe0ff;border-radius:14px;background:#fff;padding:14px;min-height:142px}
.metric .big{font-size:28px;line-height:1;color:var(--blue);font-weight:950;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.metric .big .lucide-icon{width:26px;height:26px;stroke-width:2.2}
.metric h3{font-size:16px;color:var(--ink);font-weight:950;margin-bottom:6px}
.metric p{font-size:12.5px;line-height:1.45;color:var(--muted)}
.agent-grid{display:grid;grid-template-columns:1fr 62px 1fr 62px 1fr;gap:10px;align-items:center}
.agent{min-height:176px;border:1.5px solid #cfe0ff;border-radius:16px;background:#fff;text-align:center;padding:16px}
.agent .round-icon{margin:0 auto 11px}
.agent h3{font-size:17px;color:var(--ink);font-weight:950}
.agent p{font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:6px}
.bus-layout{display:grid;grid-template-columns:.95fr 1.2fr 1fr;gap:16px;align-items:center}
.bus{height:110px;border-radius:24px;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;display:grid;place-items:center;text-align:center;font-size:25px;font-weight:950;box-shadow:0 16px 30px rgba(23,105,255,.24)}
.bus span{font-size:13px;font-weight:700;margin-top:5px;opacity:.92}
.tool-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tool{border:1.5px solid #cfe0ff;border-radius:13px;background:#fff;padding:12px;text-align:center;color:var(--ink);font-weight:950}
.tool .lucide-icon{width:22px;height:22px;color:var(--blue);display:block;margin:0 auto 6px;stroke-width:2.2}
.tool span{display:block;font-size:11.5px;color:var(--muted);font-weight:500;margin-top:4px}
.answer-template{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.answer-card{border:1.5px solid #bdd6ff;border-radius:15px;background:#fff;padding:13px;min-height:134px;box-shadow:0 10px 22px rgba(23,105,255,.08)}
.answer-card h3{font-size:16px;color:var(--ink);font-weight:950;margin-bottom:7px}
.answer-card p{font-size:12px;line-height:1.42;color:var(--muted)}
.takeaway{margin-top:16px;border:1.5px solid #9dc2ff;border-radius:18px;background:linear-gradient(135deg,#eef6ff,#fff);padding:18px;text-align:center}
.takeaway h3{font-size:27px;color:var(--ink);font-weight:950}
.nav-controls{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:6px;padding:6px;border:1px solid rgba(16,32,71,.12);border-radius:999px;background:rgba(255,255,255,.78);box-shadow:0 8px 24px rgba(16,32,71,.12);backdrop-filter:blur(10px);opacity:.76;transition:opacity .18s ease,background .18s ease}
.nav-controls:hover,.nav-controls:focus-within{opacity:1;background:rgba(255,255,255,.96)}
.nav-btn{width:32px;height:32px;border:0;border-radius:50%;background:#061b4e;color:#fff;font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.nav-btn:disabled{opacity:.32;cursor:not-allowed}
.nav-index{min-width:58px;text-align:center;font-size:13px;font-weight:900;color:var(--muted)}
.nav-index{min-width:60px;text-align:center;font-size:13px;font-weight:950;color:var(--muted)}
.progress{position:fixed;left:0;right:0;bottom:0;height:4px;background:#dbe6f6;z-index:25}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .2s ease}
.notes{display:none}
@media (max-aspect-ratio:16/9){
.slide{width:calc(100vh * 16 / 9);height:100vh}
@media (min-width:901px) and (max-width:1100px){
.canvas{padding:24px 34px 22px;gap:10px}
.hero h1{font-size:38px;line-height:1.08}
.hero .lead{font-size:16px;line-height:1.42;margin-top:10px}
.panel{padding:12px}
.panel h3{font-size:16px;margin-bottom:5px}
.panel p,.panel li{font-size:12px;line-height:1.42}
.grid3{gap:8px}
.tag{min-height:22px;font-size:11px;margin-bottom:6px}
.foot{height:28px;padding-top:8px}
.corner{width:72px;height:42px;font-size:15px;padding:0 14px 9px}
}
@media (max-width:900px){
body{overflow:auto;display:block}
html,body{height:auto;min-height:100%;overflow:auto}
.deck{display:block;height:auto;min-height:100vh;padding:0;background:#fff}
.slide{width:100%;height:auto;aspect-ratio:auto;min-height:100vh;box-shadow:none;padding:28px 22px 34px}
.slide.active{display:block}
.top{height:auto;grid-template-columns:1fr;gap:10px}
.chapter{width:112px}
.head h2{font-size:28px}
.brand{display:none}
.big-title{font-size:40px}
.content{justify-content:flex-start;padding-top:24px}
.cover-grid,.grid2,.grid3,.grid4,.pipeline,.chunks,.tool-bus,.limit-grid,.agent-map{grid-template-columns:1fr}
.flow{grid-template-columns:1fr}
.step::after,.arrow{display:none}
body{display:block;background:#fff}
.deck{display:block;height:auto;min-height:100vh;background:#fff}
.slide{width:100%;height:auto;min-height:100vh;box-shadow:none}
.canvas{padding:26px 20px 34px}
.topbar{height:auto;grid-template-columns:1fr;gap:10px}
.sec{width:110px}
.mark{display:none}
.body{justify-content:flex-start;padding-top:20px}
.hero,.grid2,.grid3,.grid4,.matrix,.problem-map,.bus-layout,.agent-grid,.wide-flow,.compare{grid-template-columns:1fr}
.flow,.metric-grid,.answer-template{grid-template-columns:1fr}
.step::after,.arrow,.mid{display:none}
.ribbon-row{grid-template-columns:1fr}
.ribbon{clip-path:none;border-radius:12px}
.ribbon-line{grid-template-columns:1fr}
.value-strip{grid-template-columns:1fr}
.value{border-right:0;border-bottom:1px solid #d8e6ff;padding-bottom:8px}
.page-corner{display:none}
.ribbon-box{grid-template-columns:1fr}
.corner{display:none}
}
</style>
</head>
<body>
<div class="deck" id="deck">
<section class="slide cover active" data-title="封面">
<div class="slide-inner">
<div class="cover-grid">
<section class="slide active" data-title="封面">
<div class="canvas">
<div class="hero" style="flex:1;min-height:0">
<div>
<div class="kicker">RAG · LLM · Prompt · Agent · MCP</div>
<h1 class="big-title">RAG 入门：让 AI <span class="accent">先查资料</span> 再回答</h1>
<p class="sub">从 LLM 的限制讲起，串起知识库建设、语义检索、排序、提示词工程、Agent 和 MCP。</p>
<div class="value-strip" style="grid-template-columns:repeat(3,1fr);margin-top:28px">
<div class="value"><div class="vicon">01</div><div><strong>先懂限制</strong><span>上下文、幻觉、注意力</span></div></div>
<div class="value"><div class="vicon">02</div><div><strong>再懂流程</strong><span>建库、检索、生成</span></div></div>
<div class="value"><div class="vicon">03</div><div><strong>最后扩展</strong><span>Agent、MCP、工具</span></div></div>
<div class="kicker">AI 产品经理面试入门</div>
<h1>RAG 知识库问答：从 <span class="accent">LLM 缺陷</span> 到 Agent / MCP</h1>
<p class="lead">学完这份 PPT，面试里至少能答清四件事：为什么需要 RAG、RAG 如何工作、怎么评估效果、Agent / MCP 分别解决什么问题。</p>
<div class="grid3" style="margin-top:24px">
<div class="panel"><span class="tag"><i data-lucide="brain"></i>Why</span><h3>LLM 为什么不够用</h3><p>上下文、幻觉、私有知识、长上下文注意力。</p></div>
<div class="panel"><span class="tag green"><i data-lucide="search"></i>How</span><h3>RAG 怎么落地</h3><p>离线建库、在线检索、排序、提示词生成。</p></div>
<div class="panel"><span class="tag cyan"><i data-lucide="git-branch"></i>Extend</span><h3>复杂任务怎么扩展</h3><p>Agent 负责流程，MCP 负责连接工具。</p></div>
</div>
</div>
<div class="cover-panel">
<div class="cover-visual">
<div class="orb one"><div class="ring"></div>RAG</div>
<div class="orbit-card a"><strong>LLM</strong><span>理解和生成</span></div>
<div class="orbit-card b"><strong>知识库</strong><span>资料与来源</span></div>
<div class="orbit-card c"><strong>检索</strong><span>找相关片段</span></div>
<div class="orbit-card d"><strong>提示词</strong><span>约束回答</span></div>
<div class="panel blue">
<div class="wide-flow" style="grid-template-columns:1fr;gap:12px">
<div class="panel"><span class="tag red"><i data-lucide="alert-triangle"></i>问题</span><h3>LLM 会说，但不知道你公司的最新事实</h3><p>在企业知识问答里，答案必须有依据、能追溯、能控权限。</p></div>
<div class="arrow">↓</div>
<div class="panel"><span class="tag green"><i data-lucide="file-search"></i>方案</span><h3>RAG 先找证据，再回答</h3><p>把知识库变成可检索、可引用、可更新的外部记忆。</p></div>
<div class="arrow">↓</div>
<div class="panel"><span class="tag cyan"><i data-lucide="plug"></i>扩展</span><h3>跨系统办事，再上 Workflow / Agent</h3><p>MCP 负责把外部工具和数据规范地接进来。</p></div>
</div>
</div>
</div>
<div class="footer"><span>RAG Primer</span><span class="page"></span></div>
<div class="foot"><span>RAG Knowledge Base QA</span><span class="page"></span></div>
</div>
<div class="page-corner"></div>
<div class="corner"></div>
<div class="notes">开场直接说明：这份 PPT 是为了面试入门。主线不是技术炫技，而是产品经理需要讲得清的系统逻辑。</div>
</section>
<section class="slide" data-title="目录">
<div class="slide-inner">
<div class="top"><div class="chapter">01</div><div class="head"><h2>学习路径</h2><p>由浅入深：先理解问题，再理解方案，最后理解扩展能力。</p></div><div class="brand"><div class="brand-mark">AI</div><span>RAG 入门</span></div></div>
<div class="content">
<section class="slide" data-title="学习路线">
<div class="canvas">
<div class="topbar"><div class="sec">01</div><div class="title"><h2>学习路线：从“模型会说话”到“系统能办事”</h2><p>每一段都对应面试里常见的追问。</p></div><div class="mark"><i data-lucide="route"></i>Interview Map</div></div>
<div class="body">
<div class="flow">
<div class="step hot"><div class="num">1</div><h3>基础概念</h3><p>RAG 是什么；LLM 是什么；两者分别负责什么。</p></div>
<div class="step"><div class="num">2</div><h3>LLM 限制</h3><p>上下文有限、会幻觉、长内容专注度下降、顺序不稳定。</p></div>
<div class="step"><div class="num">3</div><h3>离线建库</h3><p>资料准备、清洗、切片、元数据、向量化入库。</p></div>
<div class="step"><div class="num">4</div><h3>在线问答</h3><p>用户提问、语义检索、候选排序、拼上下文、生成答案。</p></div>
<div class="step"><div class="num">5</div><h3>能力扩展</h3><p>提示词工程、多个 LLM 分工、Agent 编排、MCP 连接工具。</p></div>
</div>
<div class="value-strip">
<div class="value"><div class="vicon">懂</div><div><strong>概念</strong><span>知道每个词在干什么</span></div></div>
<div class="value"><div class="vicon">看</div><div><strong>流程</strong><span>知道一次问答怎么跑</span></div></div>
<div class="value"><div class="vicon">抓</div><div><strong>关键</strong><span>切片、排序、提示词</span></div></div>
<div class="value"><div class="vicon">扩</div><div><strong>边界</strong><span>Agent 和工具调用</span></div></div>
<div class="step"><div class="num">1</div><h3>LLM 是什么</h3><p>理解它擅长语言生成，但不是事实系统。</p></div>
<div class="step"><div class="num">2</div><h3>LLM 的缺陷</h3><p>上下文有限、幻觉、私有知识缺失、注意力漂移。</p></div>
<div class="step"><div class="num">3</div><h3>RAG 的方案</h3><p>先检索知识库，再把资料交给 LLM 生成。</p></div>
<div class="step"><div class="num">4</div><h3>知识库流程</h3><p>资料准备、切片、向量化、检索、排序、引用。</p></div>
<div class="step"><div class="num">5</div><h3>Agent / MCP</h3><p>复杂任务要规划和工具连接，不只是问答。</p></div>
</div>
<div class="takeaway"><h3>面试答题顺序：先讲业务问题，再讲系统链路，最后讲指标和风险。</h3></div>
</div>
<div class="footer"><span>Roadmap</span><span class="page"></span></div>
<div class="foot"><span>Learning Path</span><span class="page"></span></div>
</div>
<div class="page-corner"></div>
</section>
<section class="slide" data-title="RAG解释">
<div class="slide-inner">
<div class="top"><div class="chapter">02</div><div class="head"><h2>RAG 是什么</h2><p>RAG = Retrieval-Augmented Generation，检索增强生成。</p></div><div class="brand"><div class="brand-mark">R</div><span>先查再答</span></div></div>
<div class="content">
<div class="pipeline">
<div class="pipe-card"><span class="tag">Retrieval</span><div class="icon">查</div><h3>检索</h3><p>先从知识库中找到和问题相关的资料片段。</p></div>
<div class="filter"><div class="funnel">RAG<br><span style="font-size:14px">筛选相关资料</span></div></div>
<div class="pipe-card"><span class="tag green">Generation</span><div class="icon">答</div><h3>生成</h3><p>LLM 只基于筛出来的资料组织自然语言答案。</p></div>
</div>
<div class="value-strip">
<div class="value"><div class="vicon">≠</div><div><strong>不是训练模型</strong><span>知识不写进模型参数</span></div></div>
<div class="value"><div class="vicon">≠</div><div><strong>不是全量塞资料</strong><span>只取相关片段</span></div></div>
<div class="value"><div class="vicon">=</div><div><strong>动态查资料</strong><span>每次提问实时检索</span></div></div>
<div class="value"><div class="vicon">✓</div><div><strong>降低幻觉</strong><span>让答案有依据</span></div></div>
</div>
</div>
<div class="footer"><span>RAG = Retrieval + Augmented + Generation</span><span class="page"></span></div>
</div>
<div class="page-corner"></div>
<div class="corner"></div>
<div class="notes">这页不要展开细节，只把学习路径建立起来。后面每页都服务这条路线。</div>
</section>
<section class="slide" data-title="LLM 是什么">
<div class="slide-inner">
<div class="top"><div class="chapter">03</div><div class="head"><h2>LLM 是什么</h2><p>大语言模型擅长理解上下文和生成表达，但不是企业事实库。</p></div><div class="brand"><div class="brand-mark">LLM</div><span>语言引擎</span></div></div>
<div class="content">
<div class="canvas">
<div class="topbar"><div class="sec">02</div><div class="title"><h2>LLM 是语言引擎，不是企业事实库</h2><p>面试里先把边界说清，后面引出 RAG 才自然。</p></div><div class="mark"><i data-lucide="brain"></i>Language Model</div></div>
<div class="body">
<div class="compare">
<div class="card" style="min-height:300px"><span class="tag">能力</span><div class="icon">AI</div><h3>理解与表达</h3><div class="dot-list" style="margin-top:14px"><span>读懂问题意图</span><span>总结、改写、解释、翻译</span><span>把零散资料组织成答案</span></div></div>
<div class="panel"><span class="tag">它擅长</span><h3>理解语义，组织表达</h3><div class="mini-list"><span>把用户问题转成可处理的意图</span><span>总结、改写、解释、翻译、生成结构化答案</span><span>根据给定上下文做推理和表达</span></div></div>
<div class="mid">≠</div>
<div class="card" style="min-height:300px"><span class="tag red">边界</span><div class="icon">DB</div><h3>企业事实系统</h3><div class="dot-list" style="margin-top:14px"><span>不会天然知道内部文档</span><span>不知道最新政策和数据</span><span>不能保证每句话都有来源</span></div></div>
</div>
<div class="value-strip">
<div class="value"><div class="vicon">读</div><div><strong>读懂上下文</strong><span>理解语义，不是简单关键词</span></div></div>
<div class="value"><div class="vicon">写</div><div><strong>生成答案</strong><span>组织语言和结构</span></div></div>
<div class="value"><div class="vicon">缺</div><div><strong>缺事实来源</strong><span>私有知识需要外部供给</span></div></div>
<div class="value"><div class="vicon">接</div><div><strong>接 RAG</strong><span>把资料交给 LLM 使用</span></div></div>
<div class="panel"><span class="tag red">它不是</span><h3>可靠的事实来源</h3><div class="mini-list"><span>不知道你的内部文档和实时制度</span><span>不能天然保证每句话有出处</span><span>拿不到资料时仍可能生成看似合理的答案</span></div></div>
</div>
<div class="takeaway"><h3>产品理解：LLM 负责“读懂和表达”，事实依据必须由外部知识或工具提供。</h3></div>
</div>
<div class="footer"><span>LLM handles language, not source-of-truth</span><span class="page"></span></div>
<div class="foot"><span>LLM Boundary</span><span class="page"></span></div>
</div>
<div class="page-corner"></div>
<div class="corner"></div>
<div class="notes">这一页是基础定义。讲成“语言引擎”比讲大量算法细节更适合面试入门。</div>
</section>
<section class="slide" data-title="LLM 的限制">
<div class="slide-inner">
<div class="top"><div class="chapter">04</div><div class="head"><h2>LLM 的对话限制</h2><p>正因为有这些限制，不能把所有知识一次性丢给 LLM。</p></div><div class="brand"><div class="brand-mark">!</div><span>为什么需要 RAG</span></div></div>
<div class="content">
<div class="limit-grid">
<div class="limit-col">
<div class="limit"><div class="n">01</div><div><h4>上下文有限</h4><p>输入窗口有限；资料过多会变慢、变贵、变乱。</p></div></div>
<div class="limit"><div class="n">02</div><div><h4>会有幻觉</h4><p>资料不足或指令不清时，会编出看似合理的内容。</p></div></div>
<section class="slide" data-title="LLM 缺陷">
<div class="canvas">
<div class="topbar"><div class="sec">03</div><div class="title"><h2>为什么 LLM 不适合直接回答复杂企业知识问题</h2><p>在企业知识问答场景里，裸用模型通常不利于新鲜度、权限、成本和可追溯。</p></div><div class="mark"><i data-lucide="alert-triangle"></i>Limitations</div></div>
<div class="body">
<div class="problem-map">
<div class="limit-stack">
<div class="limit"><div class="num">1</div><div><b>上下文窗口有限</b><p>输入再长也有上限；越长越贵、越慢、越容易混乱。</p></div></div>
<div class="limit"><div class="num">2</div><div><b>事实会过期或缺失</b><p>内部知识、最新政策、业务数据通常不在模型参数里。</p></div></div>
</div>
<div class="center-badge">不能<br>全量塞<br>资料</div>
<div class="limit-col">
<div class="limit"><div class="n">03</div><div><h4>专注度下降</h4><p>长资料和噪声会稀释重点，关键信息被忽略。</p></div></div>
<div class="limit"><div class="n">04</div><div><h4>顺序不稳定</h4><p>内容位置、相似片段、前后冲突都会影响答案。</p></div></div>
<div class="badge-center">裸用<br>通常<br>不稳</div>
<div class="limit-stack">
<div class="limit"><div class="num">3</div><div><b>幻觉风险</b><p>资料不足、冲突或提示不清时，可能编造细节。</p></div></div>
<div class="limit"><div class="num">4</div><div><b>长上下文利用不均</b><p>重点可能被噪声稀释，中间信息尤其容易被忽略。</p></div></div>
</div>
</div>
<div class="value-strip">
<div class="value"><div class="vicon">少</div><div><strong>少量</strong><span>只给必要资料</span></div></div>
<div class="value"><div class="vicon">准</div><div><strong>准确</strong><span>优先高相关来源</span></div></div>
<div class="value"><div class="vicon">新</div><div><strong>新鲜</strong><span>版本和时间可控</span></div></div>
<div class="value"><div class="vicon">规</div><div><strong>规则</strong><span>提示词约束回答边界</span></div></div>
</div>
<div class="takeaway"><h3>结论：企业问答要先筛出“小而准”的上下文，再交给 LLM。</h3></div>
</div>
<div class="footer"><span>Context · Hallucination · Attention · Order</span><span class="page"></span></div>
<div class="foot"><span>Context · Hallucination · Freshness · Attention</span><span class="page"></span></div>
</div>
<div class="page-corner"></div>
<div class="corner"></div>
<div class="notes">这一页是引出 RAG 的关键。不能只说“LLM 有幻觉”，要把上下文、私有知识、注意力顺序一起讲出来。</div>
</section>
<section class="slide" data-title="为什么需要 RAG">
<div class="slide-inner">
<div class="top"><div class="chapter">05</div><div class="head"><h2>从限制到方案</h2><p>RAG 的核心不是让模型记住全部知识，而是让模型按需查资料。</p></div><div class="brand"><div class="brand-mark">→</div><span>方案转化</span></div></div>
<div class="content">
<div class="pipeline">
<div class="pipe-card"><span class="tag red">错误做法</span><h3 style="margin-top:16px">全部塞给 LLM</h3><div class="bad-list"><span>长文档堆叠，重点被稀释</span><span>过期资料混入，结果不可信</span><span>无权限内容可能泄露</span><span>成本高，速度慢</span></div></div>
<div class="filter"><div class="funnel">检索<br>过滤<br>排序</div></div>
<div class="pipe-card"><span class="tag green">RAG 做法</span><h3 style="margin-top:16px">只给相关资料</h3><div class="bad-list"><span style="border-color:#8fe0cf;background:#f1fffb;color:#0b8066">按问题查资料</span><span style="border-color:#8fe0cf;background:#f1fffb;color:#0b8066">按相关性排序</span><span style="border-color:#8fe0cf;background:#f1fffb;color:#0b8066">拼成小上下文</span><span style="border-color:#8fe0cf;background:#f1fffb;color:#0b8066">让 LLM 基于依据回答</span></div></div>
<section class="slide" data-title="为什么不能全量塞资料">
<div class="canvas">
<div class="topbar"><div class="sec">04</div><div class="title"><h2>为什么不把所有知识一次性给 LLM</h2><p>RAG 不是任何场景都必须上；文档多、更新快、要权限和引用时才更有价值。</p></div><div class="mark"><i data-lucide="search"></i>Need Retrieval</div></div>
<div class="body">
<div class="grid4">
<div class="metric"><div class="big"><i data-lucide="clock"></i>慢</div><h3>响应变慢</h3><p>长上下文会拉高推理时间，用户体验变差。</p></div>
<div class="metric"><div class="big"><i data-lucide="dollar-sign"></i>贵</div><h3>成本变高</h3><p>每次都读大量文档，token 成本不可控。</p></div>
<div class="metric"><div class="big"><i data-lucide="shuffle"></i>乱</div><h3>答案变乱</h3><p>无关资料越多，模型越难抓住真正依据。</p></div>
<div class="metric"><div class="big"><i data-lucide="shield"></i>险</div><h3>权限风险</h3><p>不该给用户看的资料可能进入上下文。</p></div>
</div>
<div class="wide-flow" style="margin-top:20px">
<div class="panel"><span class="tag red">不适合的做法</span><h3>全量塞文档</h3><p>资料多、权限复杂时，把知识管理问题转移给模型，效果不可控。</p></div>
<div class="arrow">→</div>
<div class="panel blue"><span class="tag green">RAG 思路</span><h3>先筛资料</h3><p>先用检索和排序选出少量相关资料。</p></div>
<div class="arrow">→</div>
<div class="panel"><span class="tag cyan">生成答案</span><h3>基于证据回答</h3><p>让 LLM 在受控上下文里生成。</p></div>
</div>
<div class="takeaway"><h3>长上下文适合“资料少、位置已知、可以整包读完”；RAG 适合“资料多、常更新、答案位置不确定、要权限和引用”。两者经常组合：先检索，再把少量证据放进上下文。</h3></div>
</div>
<div class="footer"><span>RAG turns big documents into precise context</span><span class="page"></span></div>
<div class="foot"><span>Why Retrieval Before Generation</span><span class="page"></span></div>
</div>
<div class="page-corner"></div>
<div class="corner"></div>
<div class="notes">这一页回答面试常见追问：既然大模型能读长文本，为什么还要 RAG。</div>
</section>
<section class="slide" data-title="后台建库">
<div class="slide-inner">
<div class="top"><div class="chapter">06</div><div class="head"><h2>后台建库：把资料整理成可检索系统</h2><p>RAG 不是只有一个问答框，前期知识库整理决定最终效果。</p></div><div class="brand"><div class="brand-mark">KB</div><span>离线流程</span></div></div>
<div class="content">
<div class="ribbon-row">
<div class="ribbon">资料层</div>
<div class="ribbon-line"><div class="icon">文</div><div class="dot-list"><span>产品手册、FAQ、制度、接口文档、案例、流程说明</span><span>确认来源、版本、时间、权限和适用范围</span></div></div>
<section class="slide" data-title="知识库问答是什么">
<div class="canvas">
<div class="topbar"><div class="sec">05</div><div class="title"><h2>知识库问答产品，本质是“带证据的回答系统”</h2><p>RAG 不是一个模型功能，而是一条产品链路。</p></div><div class="mark"><i data-lucide="file-check"></i>Product View</div></div>
<div class="body">
<div class="wide-flow">
<div class="panel"><span class="tag">用户问题</span><h3>“这个退款能不能批？”</h3><p>用户通常用口语表达，不会精确匹配文档标题。</p></div>
<div class="arrow">→</div>
<div class="panel blue"><span class="tag green">知识库证据</span><h3>政策、流程、版本、权限</h3><p>系统先找到可用资料，并保留来源。</p></div>
<div class="arrow">→</div>
<div class="panel"><span class="tag cyan">LLM 答案</span><h3>结论 + 理由 + 来源</h3><p>回答不只是顺口，还要能追溯和复核。</p></div>
</div>
<div class="ribbon-row">
<div class="ribbon green">处理层</div>
<div class="ribbon-line"><div class="icon">洗</div><div class="dot-list"><span>清洗重复、过期、广告、目录噪声和格式错误</span><span>长文档拆成能独立表达意思的小片段</span></div></div>
</div>
<div class="ribbon-row">
<div class="ribbon navy">索引层</div>
<div class="ribbon-line"><div class="icon">库</div><div class="dot-list"><span>每个切片转成语义向量，写入向量库</span><span>同时保留元数据，用于过滤、排序和引用来源</span></div></div>
</div>
<div class="value-strip">
<div class="value"><div class="vicon">质</div><div><strong>资料质量</strong><span>决定检索上限</span></div></div>
<div class="value"><div class="vicon">粒</div><div><strong>切片粒度</strong><span>决定召回精度</span></div></div>
<div class="value"><div class="vicon">源</div><div><strong>元数据</strong><span>决定过滤和引用</span></div></div>
<div class="value"><div class="vicon">库</div><div><strong>向量库</strong><span>支持语义检索</span></div></div>
<div class="grid4" style="margin-top:18px">
<div class="metric"><div class="big"><i data-lucide="target"></i>准</div><h3>准确</h3><p>答案来自可信资料。</p></div>
<div class="metric"><div class="big"><i data-lucide="refresh-cw"></i>新</div><h3>及时</h3><p>多数知识更新可先更新知识库，不必依赖重训模型。</p></div>
<div class="metric"><div class="big"><i data-lucide="link"></i>源</div><h3>可追溯</h3><p>能展示引用来源。</p></div>
<div class="metric"><div class="big"><i data-lucide="lock"></i>权</div><h3>可控权限</h3><p>检索前先过滤用户权限。</p></div>
</div>
</div>
<div class="footer"><span>Prepare · Clean · Chunk · Embed · Index</span><span class="page"></span></div>
<div class="foot"><span>Knowledge Base QA</span><span class="page"></span></div>
</div>
<div class="page-corner"></div>
<div class="corner"></div>
<div class="notes">这一页把 RAG 落到产品形态。面试时要强调“带证据”，不是“聊天更聪明”。</div>
</section>
<section class="slide" data-title="切片和向量库">
<div class="slide-inner">
<div class="top"><div class="chapter">07</div><div class="head"><h2>切片 + 向量化</h2><p>把长文档拆成小卡片，再给每张卡片标上“语义坐标”。</p></div><div class="brand"><div class="brand-mark">V</div><span>语义检索</span></div></div>
<div class="content">
<div class="chunks">
<div class="doc">
<span class="tag">原始资料：退款政策</span>
<div class="slice"><h4>切片 A：退费条件</h4><p>购买后 7 天内，且未使用核心服务，可以申请全额退款。</p></div>
<div class="slice"><h4>切片 B：不可退场景</h4><p>已开具发票、已交付定制服务、超过合同期限，不支持自动退款。</p></div>
<div class="slice"><h4>切片 C：审批路径</h4><p>超过 5 万元的退款申请，需要客户成功经理和财务双审批。</p></div>
</div>
<div class="doc">
<span class="tag green">向量化结果</span>
<h3 style="margin-top:14px">语义相近，距离更近</h3>
<p style="font-size:13px;line-height:1.65;color:var(--muted);margin-top:10px">用户问“买了 3 天没用能退吗”，即使没有出现“退费条件”这几个字，也能找到切片 A。</p>
<div class="vector-bars"><i class="bar"></i><i class="bar"></i><i class="bar"></i><i class="bar"></i><i class="bar"></i><i class="bar"></i><i class="bar"></i><i class="bar"></i><i class="bar"></i><i class="bar"></i><i class="bar"></i><i class="bar"></i></div>
</div>
</div>
</div>
<div class="footer"><span>Chunking + Embedding</span><span class="page"></span></div>
</div>
<div class="page-corner"></div>
</section>
<section class="slide" data-title="用户提问时怎么查">
<div class="slide-inner">
<div class="top"><div class="chapter">08</div><div class="head"><h2>用户提问时怎么查</h2><p>召回只是先捞候选，排序 / 重排决定哪些资料真正进入上下文。</p></div><div class="brand"><div class="brand-mark">S</div><span>在线检索</span></div></div>
<div class="content">
<div class="flow">
<div class="step"><div class="num">1</div><h3>问题改写</h3><p>把口语问题改成适合检索的查询。</p></div>
<div class="step"><div class="num">2</div><h3>问题向量化</h3><p>用户问题也转成语义向量。</p></div>
<div class="step"><div class="num">3</div><h3>召回候选</h3><p>从向量库找语义距离近的片段。</p></div>
<div class="step hot"><div class="num">4</div><h3>排序 / 重排</h3><p>按相关性、时效、权限、来源可信度重新排序。</p></div>
<div class="step"><div class="num">5</div><h3>拼上下文</h3><p>只把最有用的几段交给 LLM。</p></div>
</div>
<div class="grid2" style="margin-top:18px">
<div class="card"><h3>排序后的候选资料</h3><div class="rank-list" style="margin-top:12px"><div class="rank"><div class="rnum">1</div><div><h4>退款政策 v2026Q2</h4><p>最相关，版本最新</p></div><div class="score">96</div></div><div class="rank"><div class="rnum">2</div><div><h4>大客户审批流程</h4><p>金额超过 5 万时使用</p></div><div class="score">78</div></div></div></div>
<div class="card"><h3>排序看什么</h3><div class="dot-list" style="margin-top:12px"><span>相关性：是否真的回答这个问题</span><span>时效性：新版本优先，过期资料降权</span><span>权限：用户不能看的资料先过滤</span><span>可信度：制度、合同、权威来源优先</span></div></div>
</div>
</div>
<div class="footer"><span>Retrieve · Rerank · Context Assembly</span><span class="page"></span></div>
</div>
<div class="page-corner"></div>
</section>
<section class="slide" data-title="提示词工程">
<div class="slide-inner">
<div class="top"><div class="chapter">09</div><div class="head"><h2>提示词工程：规定资料怎么用</h2><p>RAG 找资料，系统提示词规定 LLM 的角色、边界、格式和兜底方式。</p></div><div class="brand"><div class="brand-mark">P</div><span>生成约束</span></div></div>
<div class="content">
<section class="slide" data-title="RAG 总架构">
<div class="canvas">
<div class="topbar"><div class="sec">06</div><div class="title"><h2>RAG = 离线建索引 + 在线检索生成</h2><p>把这句话讲清楚，基本就进入 RAG 的门了。</p></div><div class="mark"><i data-lucide="git-branch"></i>Architecture</div></div>
<div class="body">
<div class="grid2">
<div class="prompt-box">
<div class="panel blue">
<span class="tag">离线：让资料可被找到</span>
<div class="flow" style="grid-template-columns:repeat(3,1fr);margin-top:8px">
<div class="step"><div class="num"><i data-lucide="filter"></i></div><h3>清洗</h3><p>去重、去噪、统一格式。</p></div>
<div class="step"><div class="num"><i data-lucide="scissors"></i></div><h3>切片</h3><p>长文档拆成小知识块。</p></div>
<div class="step"><div class="num"><i data-lucide="database"></i></div><h3>建索引</h3><p>建立向量、关键词或混合索引，并保存元数据。</p></div>
</div>
</div>
<div class="panel">
<span class="tag green">在线：让回答有依据</span>
<div class="flow" style="grid-template-columns:repeat(3,1fr);margin-top:8px">
<div class="step"><div class="num"><i data-lucide="search"></i></div><h3>检索</h3><p>按问题找候选片段。</p></div>
<div class="step"><div class="num"><i data-lucide="sliders"></i></div><h3>排序</h3><p>筛出最相关、最可信资料。</p></div>
<div class="step"><div class="num"><i data-lucide="message-square"></i></div><h3>生成</h3><p>LLM 基于上下文回答。</p></div>
</div>
</div>
</div>
<div class="takeaway"><h3>RAG 的关键不是“有没有向量库”，而是资料能否被正确检索、正确排序、正确使用。</h3></div>
</div>
<div class="foot"><span>Offline Indexing + Online Retrieval</span><span class="page"></span></div>
</div>
<div class="corner"></div>
<div class="notes">这一页建立总架构。面试时可以先用离线和在线两段讲，再展开细节。</div>
</section>
<section class="slide" data-title="离线建库流程">
<div class="canvas">
<div class="topbar"><div class="sec">07</div><div class="title"><h2>离线建库：资料准备比模型选择更先决定上限</h2><p>这部分是 AI 产品经理最容易忽略，但最该会讲的。</p></div><div class="mark"><i data-lucide="database"></i>Indexing</div></div>
<div class="body">
<div class="ribbon-row"><div class="ribbon">资料盘点</div><div class="ribbon-box"><div class="round-icon"><i data-lucide="file-text"></i></div><div class="mini-list"><span>确定业务范围：客服 FAQ、产品手册、制度、合同、接口文档</span><span>标清来源、负责人、更新时间、适用对象</span></div></div></div>
<div class="ribbon-row"><div class="ribbon green">清洗治理</div><div class="ribbon-box"><div class="round-icon"><i data-lucide="filter"></i></div><div class="mini-list"><span>删除重复、过期、目录噪声、网页导航、无效表格</span><span>统一标题、层级、术语，避免同义词混乱</span></div></div></div>
<div class="ribbon-row"><div class="ribbon orange">索引入库</div><div class="ribbon-box"><div class="round-icon"><i data-lucide="database"></i></div><div class="mini-list"><span>切片、向量化、保存元数据，写入向量库或混合检索索引</span><span>准备评测问题集，后续用来验证召回和答案质量</span></div></div></div>
</div>
<div class="foot"><span>Source Governance · Chunking · Embedding</span><span class="page"></span></div>
</div>
<div class="corner"></div>
<div class="notes">这一页讲产品工作：资料范围、治理、版本、权限、评测集。不要只讲技术名词。</div>
</section>
<section class="slide" data-title="切片与元数据">
<div class="canvas">
<div class="topbar"><div class="sec">08</div><div class="title"><h2>切片不是随便截断，而是让知识块能独立回答问题</h2><p>切片粒度、重叠、元数据，会直接影响召回质量。</p></div><div class="mark"><i data-lucide="scissors"></i>Data Design</div></div>
<div class="body">
<div class="matrix">
<div class="panel">
<span class="tag">示例：退款政策文档</span>
<div class="chunk"><h4>切片 A：退款条件</h4><p>购买后 7 天内，且未使用核心服务，可以申请全额退款。</p></div>
<div class="chunk"><h4>切片 B：不可退场景</h4><p>已开票、已交付定制服务、超过合同期限，不支持自动退款。</p></div>
<div class="chunk"><h4>切片 C：审批路径</h4><p>超过 5 万元的退款，需要客户成功经理和财务双审批。</p></div>
</div>
<div class="panel blue">
<span class="tag green">产品要关注</span>
<div class="mini-list"><span>太大：噪声多，模型抓不住重点</span><span>太小：语义断裂，缺少必要上下文</span><span>需要重叠：避免关键信息跨片丢失</span><span>元数据：来源、版本、时间、权限、业务线</span></div>
<div class="vector"><i class="bar"></i><i class="bar"></i><i class="bar"></i><i class="bar"></i><i class="bar"></i><i class="bar"></i><i class="bar"></i><i class="bar"></i><i class="bar"></i><i class="bar"></i><i class="bar"></i><i class="bar"></i></div>
</div>
</div>
</div>
<div class="foot"><span>Chunk Size · Overlap · Metadata</span><span class="page"></span></div>
</div>
<div class="corner"></div>
<div class="notes">讲切片时一定用例子。听众能理解“为什么切片决定检索效果”。</div>
</section>
<section class="slide" data-title="在线检索流程">
<div class="canvas">
<div class="topbar"><div class="sec">09</div><div class="title"><h2>在线检索：先召回候选，再排序决定给 LLM 什么</h2><p>召回解决“找得到”，排序解决“排得对”。</p></div><div class="mark"><i data-lucide="search"></i>Retrieval</div></div>
<div class="body">
<div class="flow">
<div class="step"><div class="num"><i data-lucide="user"></i></div><h3>理解问题</h3><p>识别意图，必要时改写查询。</p></div>
<div class="step"><div class="num"><i data-lucide="search"></i></div><h3>召回候选</h3><p>向量检索、关键词检索或混合检索。</p></div>
<div class="step"><div class="num"><i data-lucide="shield"></i></div><h3>过滤</h3><p>按权限、业务线、版本、时间过滤；强权限可在索引或检索阶段提前做。</p></div>
<div class="step"><div class="num"><i data-lucide="sliders"></i></div><h3>重排</h3><p>把最相关、最新、可信的片段排前面。</p></div>
<div class="step"><div class="num"><i data-lucide="package"></i></div><h3>拼上下文</h3><p>控制长度，去重，保留来源。</p></div>
</div>
<div class="grid2" style="margin-top:16px">
<div class="panel"><h3>候选排序示例</h3><div class="rank-list"><div class="rank"><div class="r">1</div><div><strong>退款政策 v2026Q2</strong><br><span>直接回答，版本最新</span></div><div class="score">96</div></div><div class="rank"><div class="r">2</div><div><strong>大客户审批流程</strong><br><span>金额超过 5 万时补充</span></div><div class="score">82</div></div><div class="rank"><div class="r">3</div><div><strong>历史退款 FAQ</strong><br><span>相关但版本较旧</span></div><div class="score">41</div></div></div></div>
<div class="panel blue"><h3>面试里要讲出的点</h3><div class="mini-list"><span>向量检索适合语义相近，但不一定精确</span><span>关键词适合编号、术语、代码、合同条款</span><span>搜索负责找资料，RAG 负责“找资料 + 选证据 + 组织回答”</span><span>权限过滤最好发生在进入上下文之前</span></div></div>
</div>
</div>
<div class="foot"><span>Query Rewrite · Hybrid Search · Rerank · Top-K</span><span class="page"></span></div>
</div>
<div class="corner"></div>
<div class="notes">这一页把“排序”讲清楚。很多人只知道向量库，但不知道召回和重排的区别。</div>
</section>
<section class="slide" data-title="生成与提示词">
<div class="canvas">
<div class="topbar"><div class="sec">10</div><div class="title"><h2>生成阶段：Prompt 规定 LLM 如何使用资料</h2><p>检索负责找证据，提示词负责使用规则。</p></div><div class="mark"><i data-lucide="terminal"></i>Prompt</div></div>
<div class="body">
<div class="grid2">
<div class="prompt">
<b>SYSTEM</b><br>
你是客服助手。只能基于 CONTEXT 回答；资料不足时说“不确定”，不要编造。<br><br>
你是客服知识库助手。只能基于 CONTEXT 回答；资料不足时说“不确定”，不要编造。输出必须包含：结论、依据、来源。<br><br>
<b>CONTEXT</b><br>
<mark>[退款政策 v2026Q2]</mark> 购买后 7 天内且未使用核心服务，可全额退款。<br><br>
<b>USER</b><br>
客户买了 3 天，还没使用，可以退吗？
</div>
<div class="stack">
<div class="stack-layer"><div class="diagram-title">提示词工程</div><div class="stack-items"><div class="mini"><strong>角色</strong><span>你是谁</span></div><div class="mini"><strong>边界</strong><span>只能基于资料</span></div><div class="mini"><strong>格式</strong><span>结论、理由、来源</span></div></div></div>
<div class="stack-layer"><div class="diagram-title" style="background:linear-gradient(135deg,#0aa58f,#14c8bf)">安全兜底</div><div class="stack-items"><div class="mini"><strong>不知道</strong><span>就说不确定</span></div><div class="mini"><strong>冲突</strong><span>说明版本差异</span></div><div class="mini"><strong>权限</strong><span>不泄露资料</span></div></div></div>
<div class="panel blue">
<span class="tag green">系统提示词要约束什么</span>
<div class="grid2" style="margin-top:8px">
<div class="panel"><h3>角色</h3><p>你是谁，服务什么场景。</p></div>
<div class="panel"><h3>边界</h3><p>只能基于资料，不够就说不确定。</p></div>
<div class="panel"><h3>格式</h3><p>结论、理由、来源、下一步。</p></div>
<div class="panel"><h3>安全</h3><p>权限控制主要在数据层/检索层做，Prompt 是最后一层约束。</p></div>
</div>
</div>
</div>
<div class="takeaway"><h3>RAG 的答案质量 = 检索质量 × 上下文组织 × 提示词约束；权限安全不能只靠 Prompt。</h3></div>
</div>
<div class="footer"><span>System Prompt + Context + User Question</span><span class="page"></span></div>
<div class="foot"><span>Prompt Engineering for RAG</span><span class="page"></span></div>
</div>
<div class="page-corner"></div>
<div class="corner"></div>
<div class="notes">提示词工程不要讲玄学，要讲规则：角色、边界、格式、兜底、安全。</div>
</section>
<section class="slide" data-title="如何评估 RAG">
<div class="canvas">
<div class="topbar"><div class="sec">11</div><div class="title"><h2>面试必问：RAG 做得好不好，看哪些指标</h2><p>AI PM 不能只说“效果不错”，要能拆成检索、答案、体验、治理。</p></div><div class="mark"><i data-lucide="bar-chart-3"></i>Evaluation</div></div>
<div class="body">
<div class="metric-grid">
<div class="metric"><div class="big"><i data-lucide="search"></i>检索</div><h3>正确资料是否进候选</h3><p>离线看 Hit@K、Recall、问题集覆盖；先确认资料找没找到。</p></div>
<div class="metric"><div class="big"><i data-lucide="sliders"></i>重排</div><h3>正确资料是否排前面</h3><p>看相关性、时效、权限、来源可信度，避免过期资料进入上下文。</p></div>
<div class="metric"><div class="big"><i data-lucide="check-circle"></i>答案</div><h3>是否基于证据</h3><p>看 groundedness / faithfulness、引用命中率、拒答是否稳妥。</p></div>
<div class="metric"><div class="big"><i data-lucide="activity"></i>在线</div><h3>能不能上线</h3><p>看延迟、成本、失败率、满意度、人工转接率和线上反馈。</p></div>
</div>
<div class="takeaway"><h3>排查顺序：先离线看检索/重排，再看答案是否忠于证据，最后看线上体验和成本。</h3></div>
</div>
<div class="foot"><span>Retrieval Metrics · Groundedness · Latency · Cost</span><span class="page"></span></div>
</div>
<div class="corner"></div>
<div class="notes">这页是面试价值最高的页之一。要能把“效果不好”定位到链路中的某一段。</div>
</section>
<section class="slide" data-title="常见失败场景">
<div class="canvas">
<div class="topbar"><div class="sec">12</div><div class="title"><h2>RAG 失败时，通常不是“模型太差”这么简单</h2><p>面试里能讲出失败归因，比只讲流程更像做过产品。</p></div><div class="mark"><i data-lucide="bug"></i>Failure Modes</div></div>
<div class="body">
<div class="grid3">
<div class="panel"><span class="tag red">资料问题</span><h3>知识库本身不可信</h3><p>文档过期、重复、格式混乱、缺少负责人，导致检索出来的证据就错。</p></div>
<div class="panel"><span class="tag orange">检索问题</span><h3>找不到或找偏</h3><p>切片粒度不合适、同义词没处理、只用向量导致编号/条款匹配差。</p></div>
<div class="panel"><span class="tag">生成问题</span><h3>模型没有按证据答</h3><p>上下文太长、提示词边界弱、冲突资料没处理，都会导致幻觉。</p></div>
</div>
<div class="grid3" style="margin-top:14px">
<div class="panel blue"><h3>治理动作</h3><p>建立资料负责人、版本规则、过期提醒和灰度发布。</p></div>
<div class="panel blue"><h3>技术动作</h3><p>混合检索、重排、查询改写、权限过滤、上下文去重。</p></div>
<div class="panel blue"><h3>产品动作</h3><p>展示来源、允许反馈、低置信度转人工、持续评测。</p></div>
</div>
</div>
<div class="foot"><span>Failure Analysis</span><span class="page"></span></div>
</div>
<div class="corner"></div>
<div class="notes">这页帮助面试时回答“如果效果不好怎么办”。</div>
</section>
<section class="slide" data-title="Agent">
<div class="slide-inner">
<div class="top"><div class="chapter">10</div><div class="head"><h2>复杂任务需要 Agent</h2><p>当任务不只是“答一句话”，就需要规划、检索、执行、校验等分工。</p></div><div class="brand"><div class="brand-mark">A</div><span>任务编排</span></div></div>
<div class="content">
<div class="agent-map">
<div class="agent-card"><div class="icon">规</div><h3>规划者</h3><p>拆步骤，决定先查什么、再调用什么工具。</p></div>
<div class="canvas">
<div class="topbar"><div class="sec">13</div><div class="title"><h2>什么时候从 RAG 走到 Agent</h2><p>不要为了显得高级而上 Agent；先判断任务是否真的需要动态决策。</p></div><div class="mark"><i data-lucide="cpu"></i>Agent</div></div>
<div class="body">
<div class="agent-grid">
<div class="agent"><div class="round-icon"><i data-lucide="route"></i></div><h3>规划</h3><p>判断任务目标，拆成检索、调用工具、确认结果等步骤。</p></div>
<div class="arrow">→</div>
<div class="agent-card"><div class="icon">查</div><h3>检索者</h3><p>使用 RAG 找依据，必要时多轮检索。</p></div>
<div class="agent"><div class="round-icon"><i data-lucide="search"></i></div><h3>检索</h3><p>用 RAG 查政策、流程、历史案例，给后续动作提供依据。</p></div>
<div class="arrow">→</div>
<div class="agent-card"><div class="icon">执</div><h3>执行者</h3><p>查订单、建工单、读数据库、调用接口。</p></div>
<div class="agent"><div class="round-icon"><i data-lucide="send"></i></div><h3>执行</h3><p>调用工具查订单、建工单、写系统、发送通知，并检查结果。</p></div>
</div>
<div class="value-strip">
<div class="value"><div class="vicon">R</div><div><strong>RAG</strong><span>提供知识入口</span></div></div>
<div class="value"><div class="vicon">P</div><div><strong>Prompt</strong><span>规定回答规则</span></div></div>
<div class="value"><div class="vicon">A</div><div><strong>Agent</strong><span>负责任务编排</span></div></div>
<div class="value"><div class="vicon">T</div><div><strong>Tools</strong><span>执行外部动作</span></div></div>
<div class="grid2" style="margin-top:16px">
<div class="panel"><span class="tag">不需要 Agent</span><h3>单轮问答或固定流程</h3><p>路径确定、风险高、规则清晰时，workflow + RAG 往往更稳。</p></div>
<div class="panel blue"><span class="tag green">需要 Agent</span><h3>多步骤动态任务</h3><p>需要规划、试错、跨系统调用，并根据中间结果决定下一步。</p></div>
</div>
</div>
<div class="footer"><span>Agent = Plan + Retrieve + Act + Check</span><span class="page"></span></div>
<div class="foot"><span>RAG Gives Knowledge · Agent Orchestrates Tasks</span><span class="page"></span></div>
</div>
<div class="page-corner"></div>
<div class="corner"></div>
<div class="notes">不要把 Agent 讲神。它是围绕目标进行计划、工具调用和反馈循环的系统。</div>
</section>
<section class="slide" data-title="MCP">
<div class="slide-inner">
<div class="top"><div class="chapter">11</div><div class="head"><h2>MCP：让 Agent 连接工具</h2><p>MCP 可以理解为模型/Agent 调用外部系统的一套统一连接方式。</p></div><div class="brand"><div class="brand-mark">M</div><span>工具连接</span></div></div>
<div class="content">
<div class="tool-bus">
<div class="card"><span class="tag">Agent</span><h3 style="margin-top:14px">会规划任务</h3><p style="margin-top:10px">但真正查数据、改状态、发通知，需要连接业务系统。</p></div>
<div class="bus">MCP<br><span style="font-size:14px;font-weight:700">统一工具接口 / 上下文供给 / 动作执行</span></div>
<div class="tools">
<div class="tool">CRM<span>客户资料</span></div>
<div class="tool">工单<span>创建 / 查询</span></div>
<div class="tool">数据库<span>读数据</span></div>
<div class="tool">文件<span>读文档</span></div>
<div class="tool">搜索<span>查外部信息</span></div>
<div class="tool">消息<span>发送通知</span></div>
<div class="canvas">
<div class="topbar"><div class="sec">14</div><div class="title"><h2>MCP：AI 应用连接外部能力的标准协议</h2><p>这是前沿加分项。面试里记住一句：MCP 让 AI 应用用统一方式连接工具、数据和提示模板。</p></div><div class="mark"><i data-lucide="plug"></i>Protocol</div></div>
<div class="body">
<div class="bus-layout">
<div class="panel"><span class="tag">Host / Client</span><h3>AI 应用侧</h3><p>Host 承载用户和模型；Client 负责按 MCP 协议连接 Server。</p></div>
<div class="bus">MCP<br><span>连接 tools · resources · prompts</span></div>
<div class="tool-grid">
<div class="tool"><i data-lucide="user"></i>CRM<span>客户资料</span></div>
<div class="tool"><i data-lucide="clipboard"></i>工单系统<span>创建 / 查询</span></div>
<div class="tool"><i data-lucide="database"></i>数据库<span>实时数据</span></div>
<div class="tool"><i data-lucide="folder"></i>文件系统<span>内部文档</span></div>
<div class="tool"><i data-lucide="search"></i>搜索<span>外部信息</span></div>
<div class="tool"><i data-lucide="message-square"></i>消息<span>通知和审批</span></div>
</div>
</div>
<div class="value-strip">
<div class="value"><div class="vicon">知</div><div><strong>RAG</strong><span>查知识</span></div></div>
<div class="value"><div class="vicon">编</div><div><strong>Agent</strong><span>编排任务</span></div></div>
<div class="value"><div class="vicon">接</div><div><strong>MCP</strong><span>连接工具</span></div></div>
<div class="value"><div class="vicon">做</div><div><strong>业务系统</strong><span>完成动作</span></div></div>
</div>
<div class="takeaway"><h3>关系一句话：RAG 提供知识证据，Workflow / Agent 决定步骤，MCP 负责统一连接外部工具和数据。</h3></div>
</div>
<div class="footer"><span>Model Context Protocol</span><span class="page"></span></div>
<div class="foot"><span>Model Context Protocol · Host · Client · Server</span><span class="page"></span></div>
</div>
<div class="page-corner"></div>
<div class="corner"></div>
<div class="notes">MCP 不要讲太深。入门层面只要讲清它解决“模型和工具怎么标准连接”。</div>
</section>
<section class="slide" data-title="总结">
<div class="slide-inner">
<div class="top"><div class="chapter">12</div><div class="head"><h2>入门之后，要抓住这条主线</h2><p>LLM 有限制，所以需要 RAG；RAG 把资料找准，再交给 LLM 生成。</p></div><div class="brand"><div class="brand-mark">✓</div><span>核心链路</span></div></div>
<div class="content">
<div class="flow">
<div class="step"><div class="num">1</div><h3>LLM</h3><p>负责理解和表达，但不是企业知识库。</p></div>
<div class="step"><div class="num">2</div><h3>限制</h3><p>上下文、幻觉、专注度、顺序带来风险。</p></div>
<div class="step"><div class="num">3</div><h3>RAG</h3><p>后台建库；前台检索；排序后拼上下文。</p></div>
<div class="step"><div class="num">4</div><h3>Prompt</h3><p>规定角色、边界、格式、兜底和安全。</p></div>
<div class="step"><div class="num">5</div><h3>Agent + MCP</h3><p>复杂任务用 Agent 编排，用 MCP 连接工具。</p></div>
</div>
<div class="stack-layer" style="margin-top:24px;text-align:center">
<div class="diagram-title">一句话总结</div>
<h3 style="font-size:30px;margin-top:18px;color:#061b4e">RAG 不是替代 LLM，而是给 LLM 配一套“会查资料的工作台”。</h3>
<section class="slide" data-title="面试答题模板">
<div class="canvas">
<div class="topbar"><div class="sec">15</div><div class="title"><h2>面试题：让你设计一个企业知识库问答，怎么答</h2><p>按这个结构答，既有产品视角，也能覆盖技术链路。</p></div><div class="mark"><i data-lucide="list-checks"></i>Template</div></div>
<div class="body">
<div class="answer-template">
<div class="answer-card"><div class="num">0</div><h3>先判断问题类型</h3><p>长上下文解决“读得下”，RAG 解决“找得到”，微调更适合风格/格式/任务适配，Agent 解决“做得到”；MCP 是连接协议。</p></div>
<div class="answer-card"><div class="num">1</div><h3>定场景</h3><p>用户是谁？问什么问题？需要结论、解释、引用，还是要执行动作？</p></div>
<div class="answer-card"><div class="num">2</div><h3>治理资料</h3><p>资料从哪里来，谁负责，版本和权限怎么管，是否有评测问题集？</p></div>
<div class="answer-card"><div class="num">3</div><h3>设计检索</h3><p>切片、元数据、向量检索、关键词检索、混合检索、重排和 Top-K。</p></div>
<div class="answer-card"><div class="num">4</div><h3>约束生成</h3><p>系统提示词规定只能基于资料回答，输出来源，不确定就兜底。</p></div>
<div class="answer-card"><div class="num">5</div><h3>评估迭代</h3><p>看召回、排序、groundedness、引用、延迟、成本、权限和用户反馈。</p></div>
</div>
<div class="takeaway"><h3>一句话收束：企业 AI 问答要先分清“读得下 / 找得到 / 说得稳 / 做得到”，再决定长上下文、RAG、微调、Agent 分别怎么用。</h3></div>
</div>
<div class="footer"><span>End</span><span class="page"></span></div>
<div class="foot"><span>Interview Answer Template</span><span class="page"></span></div>
</div>
<div class="page-corner"></div>
<div class="corner"></div>
<div class="notes">这页是最终背诵模板。面试时可以直接按 1 到 5 展开。</div>
</section>
</div>
<div class="progress"><span id="progress"></span></div>
<div class="nav-controls" aria-label="翻页导航">
<button class="nav-btn" id="prevBtn" type="button" aria-label="上一页">‹</button>
<span class="nav-index" id="navIndex">1 / 13</span>
<span class="nav-index" id="navIndex">1 / 16</span>
<button class="nav-btn" id="nextBtn" type="button" aria-label="下一页">›</button>
</div>
<script src="https://unpkg.com/lucide@1.21.0/dist/umd/lucide.min.js"></script>
<script>
(function(){
const slides = Array.from(document.querySelectorAll('.slide'));
@@ -493,10 +550,20 @@ h1,h2,h3,h4,p{margin:0}
const nextBtn = document.getElementById('nextBtn');
const navIndex = document.getElementById('navIndex');
let idx = 0;
function hydrateIcons(){
if(window.lucide){
window.lucide.createIcons({
attrs: {
class: ['lucide-icon'],
'stroke-width': 2.2
}
});
}
}
function render(){
slides.forEach((s,i)=>s.classList.toggle('active',i===idx));
slides.forEach((slide,i)=>slide.classList.toggle('active',i===idx));
document.querySelectorAll('.page').forEach(el=>{el.textContent=(idx+1)+' / '+slides.length});
document.querySelectorAll('.page-corner').forEach(el=>{el.textContent=String(idx+1).padStart(2,'0')});
document.querySelectorAll('.corner').forEach(el=>{el.textContent=String(idx+1).padStart(2,'0')});
navIndex.textContent = (idx+1)+' / '+slides.length;
prevBtn.disabled = idx === 0;
nextBtn.disabled = idx === slides.length - 1;
@@ -505,20 +572,21 @@ h1,h2,h3,h4,p{margin:0}
}
function go(n){idx=Math.max(0,Math.min(slides.length-1,n));render()}
function fromHash(){
const m = location.hash.match(/#\/(\d+)/);
if(m) idx = Math.max(0,Math.min(slides.length-1,Number(m[1])-1));
const match = location.hash.match(/#\/(\d+)/);
if(match) idx = Math.max(0,Math.min(slides.length-1,Number(match[1])-1));
render();
}
window.addEventListener('hashchange',fromHash);
prevBtn.addEventListener('click',()=>go(idx-1));
nextBtn.addEventListener('click',()=>go(idx+1));
document.addEventListener('keydown',e=>{
if(['ArrowRight','PageDown',' '].includes(e.key)){e.preventDefault();go(idx+1)}
if(['ArrowLeft','PageUp'].includes(e.key)){e.preventDefault();go(idx-1)}
if(e.key==='Home'){e.preventDefault();go(0)}
if(e.key==='End'){e.preventDefault();go(slides.length-1)}
if(e.key==='f'||e.key==='F'){document.documentElement.requestFullscreen?.()}
document.addEventListener('keydown',event=>{
if(['ArrowRight','PageDown',' '].includes(event.key)){event.preventDefault();go(idx+1)}
if(['ArrowLeft','PageUp'].includes(event.key)){event.preventDefault();go(idx-1)}
if(event.key==='Home'){event.preventDefault();go(0)}
if(event.key==='End'){event.preventDefault();go(slides.length-1)}
if(event.key==='f'||event.key==='F'){document.documentElement.requestFullscreen?.()}
});
hydrateIcons();
fromHash();
})();
</script>

3173
public/rag-for-pm-v3.html Normal file
View File

File diff suppressed because it is too large Load Diff

3417
public/rag-for-pm.html
View File

File diff suppressed because it is too large Load Diff