01
拆字 · Tokenizer
模拟文本切分，亲手看看一句话会变成几个 Token，还有三个猜谜小游戏。
进入 →
真实功能
模拟演示
纯前端 · 免安装
像拆积木一样，看懂大模型
本实验室用可点击、可观察、可实验的交互方式，带你一步步理解 LLM 是怎么把文字切成 Token、怎么记住上下文、怎么听懂指令、怎么查资料再回答的。 全部逻辑在你的浏览器里运行，不调用任何外部大模型。
🔑 本实验要掌握的十个概念
🧭 四大闯关模块
02
记忆 · Context Window
用 20 项水果清单做实验，观察上下文窗口满了之后 AI 什么时候“失忆”。
进入 →03
沟通 · Prompt
对比普通提示词与结构化提示词，看清 System 与 User 两个角色各干什么。
进入 →04
查资料 · RAG
建立内置知识库，模拟检索增强生成，比较“有资料”和“没资料”的区别。
进入 →⚠️ 关于“真实 / 模拟”的说明
- 真实功能 文本切分算法、Token 计数、知识库检索、学习进度保存（localStorage）等，都是浏览器里真实运行的代码。
- 模拟演示 “AI 生成的回答”用预先写好的模板模拟；“向量相似度”用关键词打分代替；“失忆”用队列滑动模拟。这样无需联网、无需 API Key 也能演示原理。
① 拆字 · 认识 Token 与 Tokenizer
大模型看不懂“字”，它只认 Token。Tokenizer（分词器）负责把一句话切成一小块一小块的 Token。动手试试吧！
✂️ Tokenizer 模拟器 真实算法
规则（模拟真实分词器的思路）：中文一个字 = 1 个 Token；英文一个单词 = 1 个 Token；数字连成一段 = 1 个 Token；标点符号单独 = 1 个 Token；空格不计数。
🎮 三个猜谜小游戏 得分：0
学完切分，来猜一猜，检验你的“Token 直觉”。
游戏 1 · 猜 Token 数
……
游戏 2 · 谁更长？
A：……
B：……
猜一猜：哪一句的 Token 数更多？
游戏 3 · 真假判断
……
💡 关卡小结
Tokenizer 把文本切成 Token，Token 是模型处理的最小单位。中文按字、英文按词、标点也占一个 Token。理解 Token 是理解 Context / Context Window 和 计费 的基础——后面关卡会用到。
② 记忆 · Context 与 Context Window
模型有个“上下文窗口（Context Window）”，只能装下有限的内容。装满了，最早的内容就会被“挤出去”，于是模型就“失忆”了。用水果清单来验证一下。
🍎 水果清单实验 模拟演示
下面有 20 种水果。每喂给“AI”一种水果，它会占据一部分上下文窗口。你可以拖动滑块调整窗口大小。
已加入 0 / 20
点“喂给 AI”开始实验……
🧠 AI 当前记住的内容（窗口内）
Token 占用：0 / 24
窗口还是空的
🗑️ 已经“失忆”的内容（被挤出窗口）
暂时没有遗忘
🔍 考考 AI：它还记不记得？
选择“第 N 种水果”，问 AI 它是什么。如果已经滑出窗口，AI 会诚实地说“不记得”。
等待提问……
💡 关卡小结
上下文窗口越大，模型能“记住”的越多，但计算成本也越高。当信息超出窗口，旧信息被丢弃——这就是模型会“失忆”的原因，也是 RAG（检索增强生成）存在的意义：把需要的资料临时塞进窗口。
③ 沟通 · Prompt、System 与 User
同样一个任务，提示词写得好不好，结果天差地别。结构化提示词会把“身份设定（System）”和“具体问题（User）”分开，这就是 Prompt Engineering。
🎚️ 选择场景
😐 普通提示词 模拟输出
User
……
模型回答：
……
😃 结构化提示词 模拟输出
System
……
User
……
模型回答：
……
💡 System 与 User 的分工
- System 设定模型的“人设、规则、边界、回答格式”，类似给员工发一份岗位说明书。
- User 提出具体问题或任务，是真正要模型去完成的那件事。
- Prompt Engineering 就是反复调整这两个角色里的措辞，让回答更准确、更稳定。
④ 查资料 · RAG 检索增强生成
模型的知识有“截止日期”，也可能“一本正经地胡说”。RAG 的做法是：先到知识库检索相关资料，再把资料和问题一起交给模型，让回答“有据可依”。
🔎 RAG 实验台 真实检索 模拟生成
输入一个问题，分别看看“不查资料”和“查资料”时 AI 会怎么回答。
问题→
切分/向量化(模拟)→
知识库检索→
拼接提示词→
生成回答
📄 检索结果与回答
请先输入问题，点击“检索并回答”。
⚖️ 有无资料的对比
🚫 不查资料（仅靠模型内部知识）
✅ 查资料（RAG 检索增强）
💡 关卡小结
RAG = 检索（Retrieval）+ 增强（Augmented）+ 生成（Generation）。它的价值是：让回答基于最新、可靠的外部资料，减少幻觉，还能给出资料来源。没有相关资料时，负责任的回答是“我不知道”，而不是编造。
🗺️ 概念地图
一张图看懂十个概念之间的关系。点击任意节点查看详细解释。
选择一个概念
点击左侧地图中的任意节点，这里会显示它的解释与相关概念。
图例
实线箭头 表示“流向 / 组成 / 影响”的关系，箭头指向“被影响/被组成”的一方。例如 Tokenizer → Token 表示“分词器切分出 Token”。
🎓 结课作品 · 查资料小助手
一个迷你 RAG 助手：输入问题 → 检索知识库 → 展示资料来源 → 生成带出处的模拟回答。检索不到相关资料时会明确提示，绝不编造。
🤖 开始提问 真实检索 模拟生成
知识库包含本课程十个概念 + 若干扩展词条，也支持你自己添加资料（保存在 localStorage）。
等待你的提问……
➕ 添加自定义资料 保存到 localStorage
📚 我的资料库
还没有自定义资料
💡 结课说明
本作品是一个纯前端、无需联网的演示：知识库与检索都在浏览器里真实运行，而“生成的回答”是按检索结果套用模板模拟的。它还原了 RAG 的核心流程，并严格遵守“没有资料就不编造”的原则。