项目简介

大家好！今天给大家带来一个非常有趣的开源项目——历史知识学习平台。这是一个基于具身智能体虚拟人的历史实时教育系统，通过集成魔珐星云数字人SDK和豆包大模型API，打造了一个高度拟真的虚拟历史老师，让历史学习变得生动有趣！

新用户注册可以填写魔珐星云的邀请码：J3DAJ8U6VP，可免费获取1000积分，体验数字人2000分钟！

项目体验：https://modelscope.cn/studios/xiaoxiaofeng910/history_teacher/summary

github地址：https://github.com/hack-feng/xingyun-history-teacher

效果展示

首页界面

首页展示了项目的核心功能和特色，点击"进入历史课堂"即可开始学习。

主学习界面

主界面采用三栏布局：

• 左侧：历史学科导航（中国古代史、中国近代史、世界历史）
• 中间：虚拟数字人老师 + 实时字幕 + 互动问答
• 右侧：历史知识面板 + 学习进度追踪

配置界面

为了方便开源使用，项目特别设计了页面配置功能，用户无需修改代码，直接在页面上配置API密钥即可！

核心功能

1. 具身智能体虚拟教师

通过魔珐星云SDK，我们实现了高度拟真的虚拟历史老师：

// 初始化魔珐星云SDK
liteSDK = new XmovAvatar({
    containerId: '#avatar-active',
    appId: config.appId,
    appSecret: config.appSecret,
    gatewayServer: config.gatewayServer,
    // ... 更多配置
});

虚拟老师支持：

• 表情反馈
• 动作展示
• 字幕同步显示

2. 大模型智能问答

集成豆包大模型API，实现智能问答功能：

如果需要修改使用其它的模型，修改这里即可，或者直接添加一个新的调用方法。

async function callDoubaoAPI(prompt) {
    const response = await fetch(config.apiUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${config.apiKey}`
        },
        body: JSON.stringify({
            model: config.model,
            stream: true,
            messages: [{ content: prompt, role: 'user' }]
        })
    });
    // 流式处理响应...
}

3. 专业历史教学

系统以历史学科教学为核心，强调历史的意义和价值：使用教学性语言：“同学们，我们要认识到…”、“这段历史告诉我们…”，重点阐述：“为什么学历史”、“这段历史对我们有什么启发”，培养历史思维能力和人文素养。

4. 学习进度追踪

• 可视化学习数据展示
• 已学习知识点自动标记
• 智能推荐学习内容

技术栈

技术	说明
前端	HTML5 + CSS3 + JavaScript (ES6+)
后端	Node.js + Express
数字人	魔珐星云Xingyun3D SDK
大模型	豆包大模型API (火山引擎)
Markdown	marked.js
数据存储	LocalStorage

快速开始

配置信息详细图文讲解：https://xiaoxiaofeng.com/article/1140

1. 获取API密钥

魔珐星云配置

1. 访问 魔珐星云官网
2. 注册账号（填写邀请码 J3DAJ8U6VP 得1000积分！）
3. 创建应用，获取 App ID 和 App Secret
4. 记录网关地址

豆包大模型配置

1. 访问 火山引擎官网
2. 注册并登录账号
3. 开通方舟（Ark）服务
4. 创建模型接入点，获取 API Key 和模型 ID

2. 克隆项目

git clone https://github.com/hack-feng/xingyun-history-teacher.git
cd xingyun-history-teacher

3. 安装依赖

npm install

4. 启动服务器

npm start

5. 访问应用

在浏览器打开：http://localhost:3000

首次打开会自动弹出配置窗口，填入你的API密钥即可，或者直接配置config.js也可以。

项目亮点

1. 开箱即用的配置体验

为了方便开源分享，我们特别设计了页面配置功能：

// config.js - 支持localStorage读取
function getConfig(key, defaultValue) {
    try {
        const stored = localStorage.getItem(key);
        return stored !== null && stored !== "" ? stored : defaultValue;
    } catch (e) {
        return defaultValue;
    }
}

用户无需修改代码，直接在页面配置，配置信息保存在浏览器localStorage中！

2. 流式响应 + 实时讲解

实现了流式调用大模型，同时逐句进行数字人讲解：

// 智能分割文本，逐句讲解
function splitTextIntoSentences(text) {
    const sentences = text.match(/[^。！？!?]+[。！？!?]?/g) || [];
    return sentences.filter(s => s.trim());
}

3. 学习进度持久化

学习进度保存在localStorage中，刷新页面不丢失：

function saveProgress() {
    localStorage.setItem('historyLearningProgress', JSON.stringify(learningProgress));
}

写在最后

这个项目展示了如何将数字人技术与大模型API结合，打造一个沉浸式的历史学习平台。

希望这个项目能够给大家带来启发，也欢迎大家一起贡献代码，让这个项目变得更好！

如果觉得内容还不错，欢迎点赞、收藏、转发支持一下～

我会持续分享更多技术干货与成长心得。

保持热爱，奔赴山海。我们下篇文章见～ 🚀

—— 笑小枫

---

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