第 12 章
加入 AI 能力：让网页聪明起来
你的主页已经能存数据了。最后一层升级：给它加上一个 AI 智能客服，能自动回复访客的问题。
我们要做什么
在个人主页右下角加一个智能客服小窗口。访客点开它，输入问题，AI 自动回复。就像一个迷你版 ChatGPT 嵌在你的网页里。
你好，这个网站是做什么的？
这是张三的个人主页，展示他的项目和联系方式。
怎么联系他？
你可以发邮件到 zhangsan@email.com 或者在留言板留言。
输入你的问题...
发送
AI 客服是怎么工作的
AI 客服架构
👤
用户
在网页输入问题
→
🖥️
前端
发送到后端 API
→
⚙️
后端
转发给 AI 接口
加上"你是张三的客服"提示
加上"你是张三的客服"提示
→
🤖
AI 模型
生成回复
→
💬
前端
渲染回复
显示在气泡里
显示在气泡里
用什么 AI 接口
你需要一个能调用 AI 的"钥匙"（API Key）。国内最方便的选择：
| 服务 | 门槛 | 价格 | 推荐度 |
|---|---|---|---|
| 腾讯混元大模型 | 腾讯云注册，实名认证 | 有免费额度 | ★★★★★ 跟 WorkBuddy 同一家 |
| DeepSeek API | 注册即用 | 极便宜 | ★★★★☆ 性价比高 |
| OpenAI API | 需要外币卡 | 按量付费 | ★★★☆☆ 能力最强但门槛高 |
推荐用腾讯混元——跟 WorkBuddy 是一个生态，注册流程简单，有免费额度。
让 WorkBuddy 帮你生成全部代码
基于我的个人主页（有后端），添加一个 AI 智能客服功能。
要求：
1. 页面右下角有一个悬浮的客服图标（气泡或机器人图标）
2. 点击后弹出聊天窗口
3. 用户在聊天窗口输入问题，AI 自动回复
4. AI 回复时要扮演"张三的个人助手"角色
技术方案：
- 后端用 Python Flask（已有），新增一个 /api/chat 接口
- /api/chat 调用腾讯混元大模型 API
- 前端用 fetch 发送用户问题，展示 AI 回复
- 聊天记录存在 Session 里
请给我完整的前后端代码，并告诉我怎么申请混元 API Key。⚠️ 安全提醒
API Key 是付费凭证，绝对不能写在前端代码里（浏览器能看到的都是不安全的）。正确做法是：API Key 只放在后端代码里，前端通过后端转发调用 AI。
这一步做完，你的主页就完整了
回顾你从第 1 章到现在的旅程：
- 装了 WorkBuddy，发出了第一条消息
- 用一段提示词做出了个人主页
- 学会了迭代修改
- 加了留言板和深色模式
- 部署到了公网
- 扩展到多页面网站
- 加了后端数据库
- 现在——加上了 AI 智能客服
你从一个完全不懂编程的人，变成了一个能做出带 AI 能力的多页面网站的人。而这中间，你一行代码都没背过。
本章小结
| 要点 | 说明 |
|---|---|
| 智能客服原理 | 前端→后端→AI API→返回回复→气泡展示 |
| 推荐 AI 服务 | 腾讯混元（跟 WorkBuddy 同生态） |
| 安全 | API Key 放后端，不放前端 |
| 旅程回顾 | 从零到带 AI 的完整网站 |