方案架构
四层架构
| API 端点 | 接收问题 → 搜索文章 → 加载知识库 → 调用AI → 返回答案 |
| 知识库 | Markdown 文件（core.md），覆盖网站全部内容：文章、课程、项目、VIP权益、联系方式 |
| 前端 UI | 悬浮按钮 + 居中弹窗 + 消息气泡 + 打字动画 |
| AI 模型 | DeepSeek V4 Flash（通过 OpenAI Compatible API 接入） |
实施步骤
第一步：后端 API（api/ai-chat.php）
核心逻辑如下：
- 安全问题接收 — JSON POST { question: "..." }
- 搜索公开文章 — MySQL LIKE 匹配 title 和 content，只搜 access_type='public'
- 加载知识库 — file_get_contents('knowledge/core.md')，将网站全部业务内容注入上下文
- 调用 AI — stream_context_create → file_get_contents → DeepSeek API
- 返回答案 — JSON { reply: "...", links: [...] }
⚡ 关键发现：知识库应该放在 User Message 中，而非 System Prompt
实际测试发现，部分模型对长篇 System Prompt 的遵循度不高。把知识库以"根据以下信息回答客户问题…"的形式放入 User Message，模型的遵从度大幅提升。
第二步：建立知识库（knowledge/core.md）
知识库是一个 Markdown 文件，需覆盖以下内容：
| 板块 | 内容 |
|---|---|
| 网站定位 | 使命、核心模式、目标客户 |
| 页面索引 | 所有重要页面链接 |
| 项目/课程/文章 | 完整列表，含标题、简介、链接、价格（如有） |
| VIP 权益 | 7项权益 + 价格 + 支付方式 |
| 合作模式 | OPC返佣、共创计划 |
| 安全规则 | 不可透露的敏感信息清单 |
维护：每次新增文章/课程/项目需同步更新知识库，保证 AI 始终掌握最新信息。
第三步：前端聊天 UI
三个文件协同工作：
🎨
ai-chat.css
悬浮按钮样式、居中弹窗、消息气泡、打字动画、移动端适配
⚙️
ai-chat.js
弹窗开关、消息渲染、fetch API 调用、错误处理
🔗
集成
header.php 加载 CSS、footer.php 加载 JS + 图标 HTML
关键踩坑经验
1. 知识库该放哪里？
我们测试了 deepseek-v4-flash、deepseek-v4-pro、hermes-agent 三个模型。结论：知识库放入 User Message 比 System Prompt 更可靠。System Prompt 中长篇的业务描述常被模型忽略，而 User Message 以"根据以下信息回答"开头，模型遵从度显著提高。
2. API Key 安全
API Key 必须写在 PHP 文件中作为常量（define），而不能出现在任何前端 JS/HTML 源代码中。这样即使客户 F12 查看源码也无法获取 Key。
3. 搜索策略
简单但有效的三层搜索：① 整句 LIKE 匹配 → ② 无结果时提取关键词逐词 OR 匹配 → ③ 仍无结果返回默认引导链接。不需要复杂的向量数据库。
4. 图标位置对齐
多个悬浮图标通过 top: calc(50% + Npx) 错开位置。新增的 AI 图标需要加 !important 避免被父级规则覆盖。
5. 模型测试对比
| 模型 | 结果 | 建议 |
|---|---|---|
| deepseek-v4-flash | ✅ 可用，响应快，中文流畅 | 推荐 |
| deepseek-v4-pro | ⚠️ 忽略知识库 | 不推荐 |
| hermes-agent | ❌ 指令遵循差 | 不推荐 |
扩展方向
- 多轮对话记忆 — 目前只保存最近对话，可扩展为持久化历史记录
- 向量搜索 — 当文章量增长到数百篇时，MySQL LIKE 效率会降低，可引入 embedding + 向量搜索
- 人工接管 — AI 无法回答时自动转接人工客服
- 多语言 — 扩展英语、日语等多语言支持
评论区
0 条评论 · 评论需审核通过后显示
发表评论