12.知识库问答（RAG）

这是AI开发工程师的核心技能，你现在做的东西已经从”玩具”变成”工具”了。

---

什么是 RAG？（先理解概念）

RAG = 检索增强生成

简单说：

• 普通AI：靠记忆回答（可能胡说）
• RAG：先查资料，再回答（准确、专业）

应用场景：

• 上传公司手册 → AI客服准确回答产品问题
• 上传论文 → AI帮你总结核心观点
• 上传病历 → AI辅助诊断

---

今天任务：做一个”文档问答助手”（30分钟）

效果：

• 一个文本框，粘贴一段文字（比如产品介绍、文章）
• 一个输入框，问关于这段文字的问题
• AI只根据你给的文档回答，不会胡说

---

第 1 步：新建文件

Trae 里按 Ctrl + N 新建文件

第 2 步：发需求给 AI

按 Ctrl + L，完整复制下面这段话：

plain

我已经成功接入了Kimi API（模型kimi-k2.6，temperature:1）。
现在我想做一个"文档问答助手"，实现RAG（检索增强生成）的效果：

界面布局：
1. 顶部标题"📚 文档问答助手"
2. 左侧（或上方）：一个大文本框，提示"粘贴文档内容 here..."，可以输入多行文字
3. 右侧（或下方）：一个输入框，提示"问一个关于文档的问题..."
4. 一个发送按钮
5. 一个"清空"按钮

功能逻辑：
1. 用户在文档区域粘贴一段文字（比如产品介绍、文章段落）
2. 用户在问题框输入问题
3. 点击发送后，调用Kimi API，把"文档内容+用户问题"一起传给AI
4. 系统提示词设定："你是一个文档问答助手。请严格根据用户提供的文档内容回答问题。如果文档里没有相关信息，请诚实地说'根据文档内容，我无法找到相关信息'。不要编造答案。"
5. 显示AI的回答

技术要求：
- 用HTML/CSS/JS实现
- API Key用变量存储
- 模型kimi-k2.6，temperature:1
- 保留对话历史（可以连续追问）
- 风格保持粉色系、圆角、现代感
- 适配手机和电脑
- 每行代码加中文注释
- 给我完整代码，直接能运行

第 3 步：填 API Key

代码生成后，找到 API Key 变量，填上你的 Key。

第 4 步：保存

按 Ctrl + S

• 文件名：doc-qa.html
• 保存到 my-website 文件夹

第 5 步：测试

1. 双击打开
2. 在文档框粘贴一段文字，比如：”这款奶茶采用新西兰进口奶源，茶底是福建大红袍，甜度可选三分糖、五分糖、七分糖。一杯售价18元，第二杯半价。”
3. 在问题框输入：”这款奶茶多少钱？”
4. 看AI是否回答”18元”
5. 再问：”热量多少？”（文档没提，看AI是否说不知道）

---

第 6 步：加到作品集

测试成功后，上传 GitHub，改 index.html 加一个新卡片：

• 标题：📚 文档问答助手
• 简介：RAG检索增强生成，上传文档后AI只根据文档内容回答，不会胡说
• 标签：AI应用

---

完成后你就理解了

表格

概念	你做了什么
RAG	把文档传给AI，让AI基于文档回答
知识库	文档区域就是简单的知识库
幻觉控制	设定提示词让AI不编造答案

现在做两件事（10分钟）

1. 加到主页

把 doc-qa.html 加到作品集主页里，变成7个卡片。

在 Trae 里打开 index.html，按 Ctrl + L 说：

“在作品卡片里再加一个：文档问答助手，简介’RAG检索增强生成，上传文档后AI只根据文档内容回答，不会胡说’，链接到doc-qa.html”

点应用，保存。

2. 上传 GitHub

把 doc-qa.html 和新的 index.html 一起上传，等1分钟刷新线上版本。

---

完成后选下一步

表格

选项	做什么
A. 继续做AI工作流（Agent）	让AI自动执行多步骤任务（查资料→写总结→发邮件）
B. 学后端基础	用Python做服务器，保护API Key，做数据库
C. 先休息	今天到此为止