项目简介大家好今天给大家带来一个非常有趣的开源项目——历史知识学习平台。这是一个基于具身智能体虚拟人的历史实时教育系统通过集成魔珐星云数字人SDK和豆包大模型API打造了一个高度拟真的虚拟历史老师让历史学习变得生动有趣新用户注册可以填写魔珐星云的邀请码J3DAJ8U6VP可免费获取1000积分体验数字人2000分钟项目体验https://modelscope.cn/studios/xiaoxiaofeng910/history_teacher/summarygitee地址https://gitee.com/hack-feng/xingyun-history-teacher效果展示首页界面首页展示了项目的核心功能和特色点击进入历史课堂即可开始学习。主学习界面主界面采用三栏布局左侧历史学科导航中国古代史、中国近代史、世界历史中间虚拟数字人老师 实时字幕 互动问答右侧历史知识面板 学习进度追踪配置界面为了方便开源使用项目特别设计了页面配置功能用户无需修改代码直接在页面上配置API密钥即可核心功能1. 具身智能体虚拟教师通过魔珐星云SDK我们实现了高度拟真的虚拟历史老师// 初始化魔珐星云SDKliteSDKnewXmovAvatar({containerId:#avatar-active,appId:config.appId,appSecret:config.appSecret,gatewayServer:config.gatewayServer,// ... 更多配置});虚拟老师支持表情反馈动作展示字幕同步显示2. 大模型智能问答集成豆包大模型API实现智能问答功能如果需要修改使用其它的模型修改这里即可或者直接添加一个新的调用方法。asyncfunctioncallDoubaoAPI(prompt){constresponseawaitfetch(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 (火山引擎)Markdownmarked.js数据存储LocalStorage快速开始配置信息详细图文讲解https://xiaoxiaofeng.com/article/11401. 获取API密钥魔珐星云配置访问 魔珐星云官网注册账号填写邀请码J3DAJ8U6VP得1000积分创建应用获取 App ID 和 App Secret记录网关地址豆包大模型配置访问 火山引擎官网注册并登录账号开通方舟Ark服务创建模型接入点获取 API Key 和模型 ID2. 克隆项目gitclone https://github.com/hack-feng/xingyun-history-teacher.gitcdxingyun-history-teacher3. 安装依赖npminstall4. 启动服务器npmstart5. 访问应用在浏览器打开http://localhost:3000首次打开会自动弹出配置窗口填入你的API密钥即可或者直接配置config.js也可以。项目亮点1. 开箱即用的配置体验为了方便开源分享我们特别设计了页面配置功能// config.js - 支持localStorage读取functiongetConfig(key,defaultValue){try{conststoredlocalStorage.getItem(key);returnstored!nullstored!?stored:defaultValue;}catch(e){returndefaultValue;}}用户无需修改代码直接在页面配置配置信息保存在浏览器localStorage中2. 流式响应 实时讲解实现了流式调用大模型同时逐句进行数字人讲解// 智能分割文本逐句讲解functionsplitTextIntoSentences(text){constsentencestext.match(/[^。!?][。!?]?/g)||[];returnsentences.filter(ss.trim());}3. 学习进度持久化学习进度保存在localStorage中刷新页面不丢失functionsaveProgress(){localStorage.setItem(historyLearningProgress,JSON.stringify(learningProgress));}写在最后这个项目展示了如何将数字人技术与大模型API结合打造一个沉浸式的历史学习平台。希望这个项目能够给大家带来启发也欢迎大家一起贡献代码让这个项目变得更好如果觉得内容还不错欢迎点赞、收藏、转发支持一下我会持续分享更多技术干货与成长心得。保持热爱奔赴山海。我们下篇文章见—— 笑小枫如果觉得这个项目对你有帮助欢迎给个Star ⭐️