| 这个作业要求在哪里 | https://edu.cnblogs.com/campus/gdgy/SoftwareEngineering24/homework/15658 |
| 团队成员学号-姓名 | 3124004524 尹航 |
| 这个作业属于哪个课程 | https://edu.cnblogs.com/campus/gdgy/SoftwareEngineering24/?page=2 |
| 这个作业的目标 | 继续完善项目，介绍项目的特色功能 |
一、项目亮点
纯前端零依赖：HTML+CSS+JS 原生实现，无需 Node、Python、服务器
界面简洁美观：气泡聊天样式，带阴影、圆角、滚动条美化
功能完整可用：输入提问、按钮发送、回车发送、自动滚动到底部
直接对接千帆 API：调用百度官方大模型，回答准确稳定
一键部署运行：保存为 HTML 文件，双击浏览器打开就能用
二、准备工作
你只需要准备一个百度千帆 API Key：
打开 百度智能云千帆平台
登录 → 创建应用 → 获取你的 API Key
复制备用，后面直接填入代码即可
🤖 千帆大模型聊天机器人
输入你想询问的内容...
发送
五、代码核心逻辑讲解
HTML 结构（页面骨架）
.title：页面标题，展示机器人名称
.chat-box：聊天内容展示区，支持滚动
.input-box：输入框 + 发送按钮，用于用户提问
CSS 样式（界面美化）
清除默认样式，统一布局
聊天气泡：用户消息右对齐蓝色，AI 左对齐灰色
圆角、阴影、hover 效果，提升体验
自适应布局，手机端也能正常使用
JS 核心功能（交互 + AI 调用）
getAIReply()异步请求千帆接口，发送用户问题，接收并返回 AI 回复。
sendMessage()获取输入内容 → 展示用户消息 → 清空输入框 → 请求 AI 回复。
addMessage()动态创建消息气泡，插入页面，并自动滚动到底部。
回车键发送监听键盘事件，按 Enter 快速发送，更符合使用习惯。
六、常见问题解决
显示 “调用出错”
API Key 填写错误、过期或权限不足
网络无法访问千帆接口
接口地址或请求格式不匹配
跨域报错（前端常见）
浏览器安全策略限制，前端直接调用第三方接口会出现跨域。解决方案：使用后端代理、CORS 配置或平台提供的合法跨域域名。
界面乱码
保存 HTML 文件时，编码选择 UTF-8 即可解决。
七、可扩展功能（进阶优化）
增加 localStorage 保存聊天记录，刷新不丢失
添加 “清空对话” 按钮
加入 AI 思考中 Loading 动画
支持 markdown 格式回复
切换不同千帆模型（ERNIE-Speed、ERNIE-4.0 等）