---
title: history_teacher
canonical_url: "https://www.modelscope.cn/studios/xiaoxiaofeng910/history_teacher"
md_url: "https://www.modelscope.cn/studios/xiaoxiaofeng910/history_teacher.md"
repository: xiaoxiaofeng910/history_teacher
chinese_name: "历史共学舱"
last_updated: 2026-06-05
sdk_type: static
sdk_version: 5.49.1
downloads: 0
stars: 0
---

# history_teacher

> history_teacher - xiaoxiaofeng910 在 ModelScope 创建的在线 Demo。基于具身智能体虚拟人的历史实时教育系统，实现沉浸式历史科目教学

xiaoxiaofeng910/history_teacher 是 ModelScope 魔搭社区上的在线可交互 Demo（创空间），基于 static 5.49.1 构建，中文名为「历史共学舱」。

- **Repository**: xiaoxiaofeng910/history_teacher
- **SDK**: static
- **SDK version**: 5.49.1
- **Downloads**: 0
- **Stars**: 0
- **Last updated**: 2026-06-05

Source: https://www.modelscope.cn/studios/xiaoxiaofeng910/history_teacher

---

# 历史知识学习平台

基于具身智能体虚拟人的历史实时教育系统，实现沉浸式历史科目教学

## 🎁 重要福利

**魔珐星云新用户专属福利：**
- 注册时填写邀请码：**J3DAJ8U6VP**
- 即可免费获得 **1000积分**！
- 积分可用于数字人调用，免费体验！

## 项目简介

历史知识学习平台是一个创新的在线历史教育系统，专为中小学生设计。系统采用先进的具身智能体技术，打造高度拟真的虚拟历史教师，实现真正的实时互动教学。通过集成**魔珐星云数字人SDK**和**豆包大模型API**，系统提供沉浸式的历史学习体验，虚拟教师能够实时讲解历史知识、回答学生问题、追踪学习进度，让历史教育变得更加生动、高效和个性化。

平台以历史科目教学为核心，强调历史的意义和价值，帮助学生理解历史事件背后的深层原因和影响，培养历史思维能力和人文素养。

## ✨ 核心功能

### 历史实时教育
- **具身智能体虚拟教师**：高度拟真的虚拟历史老师，支持实时语音交互和表情反馈，营造沉浸式学习环境
- **实时教学互动**：虚拟教师能够实时讲解历史知识，根据学生反馈调整教学节奏和内容
- **沉浸式学习体验**：通过虚拟人的语音、表情和动作，让学生仿佛置身于真实的历史课堂

### 历史科目教学
- **专业历史讲解**：虚拟教师以历史老师的身份讲解，重点阐述历史的意义和价值，帮助学生理解历史事件背后的深层原因和影响
- **历史意义强调**：讲解时突出"为什么学历史"、"这段历史对我们有什么启发"、"我们应该从历史中学到什么"等核心问题
- **教学性语言**：使用"同学们，我们要认识到"、"这段历史告诉我们"、"从历史意义来看"、"这对我们今天的启示是"等教学性语言
- **深入浅出教学**：让学生真正理解历史的内涵和意义，而不仅仅是记住历史事实

### 智能学习系统
- **智能数字人讲解**：集成魔珐星云SDK，提供逼真的数字人讲解服务
- **流式语音输出**：支持流式调用speak方法，实现流畅的语音讲解
- **逐句讲解**：智能分割文本，逐句进行讲解，字幕同步显示
- **智能问答**：集成豆包大模型API，支持用户提问并获取智能回答
- **多维度历史知识**：涵盖中国古代史、中国近代史、世界历史三大维度
- **实时字幕显示**：虚拟人说话时自动显示字幕，方便学生跟随学习
- **互动式学习**：学生可点击历史主题或输入问题，获得针对性讲解

### 页面配置功能（开源友好）
- **无需修改代码**：用户可直接在页面配置API密钥
- **本地存储**：配置信息保存在浏览器localStorage中
- **一键清除**：支持清除所有配置信息
- **配置引导**：提供如何获取配置的帮助文档

### 学习进度追踪
- **可视化学习数据**：实时显示学习进度和掌握程度
- **智能分析薄弱环节**：根据学习情况推荐需要加强的知识点
- **持续优化学习效果**：个性化学习路径，实现因材施教

## 🚀 快速开始

### 第一步：获取API密钥

#### 1. 魔珐星云SDK
1. 访问 [魔珐星云官网](https://www.xingyun3d.com)
2. 注册账号（**填写邀请码 J3DAJ8U6VP 得1000积分！**）
3. 进入控制台，创建应用
4. 获取 App ID、App Secret
5. 记录网关地址（gatewayServer）

#### 2. 豆包大模型API
1. 访问 [火山引擎官网](https://www.volcengine.com)
2. 注册账号并登录
3. 开通方舟（Ark）服务
4. 创建模型接入点
5. 获取 API Key、模型 ID（model）

### 第二步：启动项目

#### 方式一：使用页面配置（推荐）

1. 克隆项目到本地
```bash
git clone [你的项目地址]
cd history_teacher
```

2. 安装依赖
```bash
npm install
```

3. 启动服务器
```bash
npm start
```

4. 浏览器访问
```
http://localhost:3000
```

5. 页面配置
   - 首次打开会自动弹出配置窗口
   - 或点击左上角"⚙️ 配置"按钮
   - 填入你的API密钥
   - 点击"保存配置"即可

#### 方式二：修改config.js（不推荐）

如果需要在代码中预置配置，可编辑 `config.js` 文件：

```javascript
const xingyunConfig = {
    appId: "你的appId",
    appSecret: "你的appSecret",
    gatewayServer: "https://nebula-agent.xingyun3d.com/user/v1/ttsa/session"
};

const doubaoConfig = {
    apiKey: "你的apiKey",
    apiUrl: "https://ark.cn-beijing.volces.com/api/v3/chat/completions",
    model: "你的模型ID"
};
```

> **注意**：为了安全起见，推荐使用页面配置方式，不要将API密钥提交到代码仓库。

### 第三步：开始使用

1. **进入首页**：打开 http://localhost:3000，点击"进入历史课堂"
2. **配置密钥**：在弹出的配置窗口中填入API密钥（参考第一步）
3. **等待初始化**：虚拟历史老师会自动初始化（约10-30秒）
4. **开始学习**：点击右侧历史知识面板中的主题开始学习

## 📖 使用说明

### 基本操作

1. **配置API密钥**
   - 点击左上角"⚙️ 配置"按钮
   - 填入魔珐星云和豆包的API信息
   - 点击"📖 如何获取配置？"查看详细教程
   - 点击"保存配置"

2. **选择历史时期**
   - 点击左侧导航栏切换历史维度
   - 🏺 中国古代史：夏商周到明清
   - 📖 中国近代史：鸦片战争到新中国成立
   - 🌍 世界历史：古希腊罗马到现代世界

3. **学习历史主题**
   - 点击右侧知识面板中的历史主题
   - 虚拟老师会自动讲解该主题
   - 字幕同步显示讲解内容

4. **停止讲解**
   - 讲解过程中点击"⏹️ 停止讲解"按钮
   - 虚拟老师会立即停止

### 互动问答

1. **输入问题**
   - 在底部问答输入框中输入历史问题
   - 例如："秦始皇统一六国的历史意义是什么？"

2. **提交问题**
   - 点击"🎤 提问"按钮
   - 或直接按 Enter 键

3. **获取解答**
   - 虚拟老师会调用大模型生成详细解答
   - 解答会以Markdown格式显示在右侧
   - 虚拟老师会语音讲解解答内容

### 学习进度

- 右侧面板显示当前学习进度
- 已学习的主题会自动标记
- 系统会记录你的学习数据

## 🎬 功能演示

### 演示1：主题讲解

1. 点击"中国古代史" → "秦朝"
2. 虚拟老师会讲解秦朝的历史背景、主要内容、历史意义和影响
3. 讲解重点突出秦朝统一的历史意义和对后世的启示
4. 字幕实时显示讲解内容
5. 右侧内容区域显示详细的文字说明

### 演示2：互动问答

1. 在输入框中输入："秦始皇统一六国的原因是什么？"
2. 点击"提问"按钮
3. 虚拟老师会调用大模型生成详细解答并进行讲解
4. 解答内容会重点分析统一的历史意义和对我们的启示
5. 解答内容会以Markdown格式显示在右侧内容区域

### 演示3：页面配置

1. 点击左上角"⚙️ 配置"按钮
2. 查看"📖 如何获取配置？"帮助文档
3. 填入魔珐星云和豆包的API信息
4. 点击"保存配置"
5. 页面自动刷新应用新配置

## 🛠️ 技术栈

- **前端技术**：HTML5, CSS3, JavaScript (ES6+)
- **后端服务**：Node.js + Express
- **数字人SDK**：魔珐星云Xingyun3D SDK (xmovAvatar@latest.js)
- **大模型API**：豆包大模型API (Volces)
- **Markdown渲染**：marked.js
- **流式处理**：Fetch API with ReadableStream
- **数据持久化**：LocalStorage

## 📁 项目结构

```
历史知识学习平台/
├── index.html          # 主页面文件
├── home.html           # 首页文件
├── server.js           # Node.js服务器文件
├── config.js           # SDK和API配置文件（支持LocalStorage）
├── style.css           # 样式文件
├── package.json        # 项目依赖配置
└── README.md           # 项目说明文档
```

## 💻 环境运行要求

### 必需环境

- **Node.js**：版本 20.0 或更高
- **npm**：版本 6.0 或更高（随Node.js一起安装）
- **现代浏览器**：
  - Chrome 90+
  - Firefox 88+
  - Safari 14+
  - Edge 90+

### 网络要求

- 需要稳定的互联网连接（用于加载SDK和调用API）
- 建议使用有线网络或稳定的Wi-Fi

### 硬件要求

- **处理器**：双核CPU或更高
- **内存**：4GB RAM或更高
- **存储**：至少500MB可用空间
- **显示器**：推荐1920x1080或更高分辨率

## ❓ 常见问题

### Q1: 页面加载后一直显示"正在初始化历史老师..."？

**A:** 检查以下几点：
- 确认已在页面配置了正确的API密钥
- 检查网络连接是否正常
- 打开浏览器控制台（F12）查看是否有错误信息

### Q2: 点击主题后没有讲解？

**A:** 检查以下几点：
- 确认虚拟老师已经初始化完成（不再显示"正在准备中..."）
- 检查豆包API的apiKey是否正确配置
- 查看浏览器控制台是否有错误信息

### Q3: 配置信息安全吗？

**A:** 配置信息保存在浏览器的LocalStorage中，仅在你的本地浏览器使用，不会上传到任何服务器，非常安全！

### Q4: 如何清除配置？

**A:** 点击配置弹窗左下角的"🗑️ 清除配置"按钮即可清除所有配置。

### Q5: 字幕不显示？

**A:** 字幕功能需要SDK触发事件，确保：
- SDK已正确初始化
- 虚拟人正在说话状态
- 检查浏览器控制台是否有SDK事件日志

### Q6: 如何停止服务器？

**A:** 在运行服务器的终端窗口中按 `Ctrl + C` 即可停止服务器。

### Q7: 可以直接打开index.html文件吗？

**A:** 不可以。由于浏览器安全限制，必须通过HTTP服务器访问。请使用 `npm start` 启动服务器后访问 http://localhost:3000

### Q8: 学习进度会丢失吗？

**A:** 学习进度保存在浏览器的LocalStorage中，只要不清除浏览器缓存，学习进度会一直保留。

## ⚠️ 注意事项

1. **API密钥安全**：请妥善保管API密钥，不要提交到版本控制系统
2. **本地服务器**：必须通过HTTP服务器访问，不能直接打开HTML文件
3. **网络连接**：系统需要连接互联网才能加载SDK和调用API
4. **浏览器兼容性**：建议使用最新版本的Chrome浏览器以获得最佳体验
5. **首次加载**：首次加载SDK可能需要较长时间（10-30秒），请耐心等待
6. **学习进度**：学习进度保存在本地浏览器中，清除浏览器缓存会丢失学习记录
7. **配置方式**：推荐使用页面配置，不要硬编码API密钥

## 🌟 项目亮点

### 教育创新
- **具身智能体技术**：首次将具身智能体技术应用于历史教育，打造高度拟真的虚拟教师
- **历史实时教育**：实现真正的实时互动教学，虚拟教师能够根据学生反馈调整教学内容
- **历史科目教学专业化**：以历史学科教学为核心，强调历史的意义和价值，培养历史思维能力

### 技术创新
- **SDK与大模型深度结合**：首次将魔珐星云SDK与豆包大模型深度结合，实现流式响应+实时讲解+字幕同步
- **智能教学系统**：基于学习进度和认知水平，智能推荐教学内容，实现个性化学习路径
- **沉浸式体验**：左右分屏布局，左侧数字人讲解，右侧内容展示，视觉沉浸感强
- **开源友好设计**：支持页面配置，LocalStorage存储，方便开源分享

### 学习体验
- **互动性强**：支持多轮对话，学生可随时提问，获得针对性的解答
- **内容丰富**：涵盖中国古代史、中国近代史、世界历史三大维度
- **学习追踪**：可视化学习数据，智能分析薄弱环节，持续优化学习效果
- **24小时在线**：数字人替代传统教学方式，提供全天候在线辅导

## 📚 教育价值

### 历史思维培养
- **历史意义理解**：帮助学生理解历史事件背后的深层原因和影响
- **历史价值认知**：培养学生从历史中汲取智慧的能力
- **历史教训总结**：引导学生从历史中学习，避免重蹈覆辙

### 学习能力提升
- **自主学习能力**：通过互动问答，培养学生主动思考和提问的能力
- **知识整合能力**：通过多维度历史知识学习，提升知识整合能力
- **批判性思维**：通过历史事件分析，培养批判性思维能力

### 学习体验优化
- **个性化学习**：根据学习进度和认知水平，提供个性化学习内容
- **沉浸式学习**：通过虚拟人互动，营造沉浸式学习环境
- **即时反馈**：实时回答学生问题，提供即时学习反馈

## 🤝 贡献

欢迎提交Issue和Pull Request！

## 📄 许可证

本项目采用 MIT 许可证。

---

**如果觉得这个项目对你有帮助，欢迎给个Star ⭐️！**

> 🎁 再次提醒：魔珐星云新用户注册邀请码 **J3DAJ8U6VP**，免费1000积分等你来拿！