第3次软工作业

| 作业所属课程 | https://edu.cnblogs.com/campus/gdgy/SoftwareEngineering24
| 作业要求 | https://edu.cnblogs.com/campus/gdgy/SoftwareEngineering24/homework/15655
| 作业目标 | 开发一个基于智能体或者多智能体的软件
| 团队成员学号-名字 | 3124004524-尹航

一、项目亮点
纯前端零依赖：HTML+CSS+JS 原生实现，无需 Node、Python、服务器
界面简洁美观：气泡聊天样式，带阴影、圆角、滚动条美化
功能完整可用：输入提问、按钮发送、回车发送、自动滚动到底部
直接对接千帆 API：调用百度官方大模型，回答准确稳定
一键部署运行：保存为 HTML 文件，双击浏览器打开就能用
二、准备工作
你只需要准备一个百度千帆 API Key：
打开 百度智能云千帆平台
登录 → 创建应用 → 获取你的 API Key
复制备用，后面直接填入代码即可

完整代码

🤖 千帆大模型聊天机器人

发送

五、代码核心逻辑讲解

1. HTML 结构（页面骨架）
   .title：页面标题，展示机器人名称
   .chat-box：聊天内容展示区，支持滚动
   .input-box：输入框 + 发送按钮，用于用户提问
2. CSS 样式（界面美化）
   清除默认样式，统一布局
   聊天气泡：用户消息右对齐蓝色，AI 左对齐灰色
   圆角、阴影、hover 效果，提升体验
   自适应布局，手机端也能正常使用
3. JS 核心功能（交互 + AI 调用）
   getAIReply()异步请求千帆接口，发送用户问题，接收并返回 AI 回复。
   sendMessage()获取输入内容 → 展示用户消息 → 清空输入框 → 请求 AI 回复。
   addMessage()动态创建消息气泡，插入页面，并自动滚动到底部。
   回车键发送监听键盘事件，按 Enter 快速发送，更符合使用习惯。
   六、常见问题解决
4. 显示 “调用出错”
   API Key 填写错误、过期或权限不足
   网络无法访问千帆接口
   接口地址或请求格式不匹配
5. 跨域报错（前端常见）
   浏览器安全策略限制，前端直接调用第三方接口会出现跨域。解决方案：使用后端代理、CORS 配置或平台提供的合法跨域域名。
6. 界面乱码
   保存 HTML 文件时，编码选择 UTF-8 即可解决。
   七、可扩展功能（进阶优化）
   增加 localStorage 保存聊天记录，刷新不丢失
   添加 “清空对话” 按钮
   加入 AI 思考中 Loading 动画
   支持 markdown 格式回复
   切换不同千帆模型（ERNIE-Speed、ERNIE-4.0 等）