数字人前端渲染方案探索

随着大型AI模型的崛起，AI时代已经到来，传统的GUI交互界面已经有了更好的替代方案。一方面，越来越多的产品开始使用数字人与用户进行自然语言交互，另一方面，大型模型能够理解和生成自然语言文本，包括对话、文章、问题回答等。

为了应对这种交互方式的变化，我们的技术部门决定启动数字人专项，探索浏览器中新的交互形式。这旨在改变传统的人机交互方式，为用户提供更加丰富的体验，同时也为在线教育的创新和发展带来了新机遇。

在当今数字化时代，教育领域采用数字人技术和AI语言大模型技术可能是一个有益的方向，有望推动行业的进步，以满足不断增长的个性化需求。数字人技术代表了一项引领革命性变革的技术，它将人工智能与自然语言处理相结合，为教育行业提供了前所未有的机会。

首先，教育界一直在追求更好的个性化学习体验，以满足不同学生的需求。数字人技术提供了强大的工具，能够模拟教师的角色，根据学生的学习进度和需求提供个性化的辅导和反馈。这可以显著提高学生的学习效率，帮助他们更好地掌握知识。

此外，教育领域急需AI语言大模型技术。这些大模型能够理解和生成自然语言文本，可用于创建智能教育工具，如智能教科书和自动化的作文评分系统。这些技术能够提供实时反馈，有助于学生提高写作和语言技能。

最后，让我们将注意力转向数字人技术和AI语言大模型技术如何协同工作。本文将二者结合，创建一个高度智能化的口语教师，具有企业形象。想象一下，学生可以与数字人互动，提出问题，而数字人将以自然语言回答。同时，AI语言大模型技术可以为学生提供定制的教育内容和资源，以满足其需求。

在构建虚拟形象时，我们选择了Live2D技术，结合GPT、TTS和语音识别技术，下面是我们对这些技术的详细考虑和比较。

考虑到企业IP是2D的卡通形象，以及Live2D技术具有相对较低的成本的同时确保了可扩展性和可负担性，我们最终选择了Live2D技术，同时还要整合GPT、TTS和语音识别技术，以创造一个高度智能化的卡通口语教师。

• GPT：GPT模型将帮助卡通口语教师更好地理解学生的提问和需求，并能够提供有深度的回答。它可以增强口语教师的语言理解和生成能力，使其更具智能性。

• TTS：TTS技术用于将文本转化为自然语音，这将赋予卡通口语教师真实的语音。学生将能够与口语教师进行自然对话，提高了学习的沟通和交互性。

• 语音识别：语音识别技术使卡通口语教师能够理解学生的口语输入，并根据其口音和语言习惯做出响应。这提供了更自然的交流方式，使学习更具实用性。

1.整体架构

2.Live2D

要实现在浏览器中渲染Live2D可以分为以下几步：

    1. 准备Live2D模型文件

可以从Live2D官网下载一些免费模型，也可以在米画师、bilibili工坊等渠道寻找专业的模型制作师来制作（模型文件至关重要， 模型制作者的水平对Live2D的）。

获得模型后将模型文件放置到静态资源目录。

    2. 导入Live2D Core

    3. 加载模型资源管理事件

这一步可以使用官方提供的framework+demo，它提供了用于显示和操纵模型的各种功能，它与Live2D Core一起用于加载模型。

接着调用初始化函数就可以在浏览器渲染出Live2D形象了

4. 模型做出动作

Live2D模型的动作可以分为四种

• 呼吸动作

呼吸动作是自动触发的，就像呼吸一样，每时每刻都在触发，它可以使模型的身体上下起伏，身体摇晃等，就像真人的呼吸一样，使形象更加自然

对于呼吸动作，官方的demo中已经给出了默认实现方式，如果想要修改呼吸动作的幅度或者想要增加或删除其中的某个参数也可以去修改呼吸函数

• 眨眼动作

眨眼动作眨眼动作与呼吸动作类似，但是用来控制眨眼的，毕竟眨眼不能像呼吸一样每时每刻都在进行，而是不定时的进行一次

• 幅度较小的动作

幅度较小的动作是指张嘴、点头、摇头等可以调整参数实现的动作

参数是指控制某个部分的数值，在Live2D制作过程中会将一个形象拆分为多个部位，每个部位有一个或多个参数，参数可以在一定范围内调整，修改参数的值可以修改这个部位的位置或形状

可以使用demo中给出的示例方式修改参数值，以修改x轴角度为例

传入参数名和数值就可以修改了，但是这种方式修改并不自然，数值变化太快，会出现闪烁的情况，因此需要将修改过程细分到一段时间内

通过这个函数就可以实现自然的修改参数，进而实现点头、摇头、向右看等动作

此外对于参数调整还可以开发一个用户界面作为开发工具，可视化的调整参数

• expression

expression是指举手、点赞、打招呼等无法通过调整参数实现的动作，Live2D几乎可以做出任何动作，只要在制作模型时制作好，调用方式如下

name可以在模型.model3.json中找到，在FileReferences.Expressions中

当然也可以使用代码获取

• motion

motion与expression类似，唯一的区别是expression在动作过程结束后会退出当前动作恢复到动作前的状态，而expression则会保持动作最后的状态，类似css中animation-fill-mode中none和forwards的区别

3.ChatGPT

 函数式调用

自2023年6月13日开始，ChatGPT开始支持函数式调用，可以传入JSON Schema，以便让GPT固定生成JSON形式的数据，而不是像之前一样需要写到Prompt中，生成JSON不稳定，且难以维护JSON形式，在生成内容、语气、停顿的过程中便利用了这种技术，进而使TTS合成的语音更加自然、更有情感，当然也可以让GPT额外生成一些别的内容

上下文

利用ChatGPT的chat模式并提供上下文可以让GPT记住之前与用户聊天的内容，更好的生成回复，提供方式也很简单，将用户和GPT对话的内容保存起来，在之后的调用中将用户的输入作为user传入，将GPT的回复作为assistant传入

4.TTS

利用ssml技术可以调整语音的角色、语言、语速、音色、停顿等，进而使tts生成的语音更加自然

下面便利用到了ChatGPT生成的音色和停顿，为ssml添加break标签和style

5.口型同步

在浏览器获得音频文件开始播放后需要做口型同步，如果只是随机的调整嘴巴的开合会显得不自然，且音频中会有暂停，在暂停时嘴巴还在动显然是不能接受的，因此需要做口型同步

具体的实现方式是先利用audioContext获取音频音量分片数据，将音频划分为20ms的片段，获取这个片段中的平均音量，然后再开始播放音频，同时开启一个定时器，每隔一段时间获取当前音频播放的时间，然后映射到音量片段，将音量大小作为嘴巴张开的相对值，这样就可以实现口型同步

6.语音识别

现代浏览器已经原生支持了语音识别

当然也可以采用微软的语音识别服务，能够同时识别多种语言，同时在稳定性、准确性上也会有所提升

口语精灵的目标是让口语学习变得更加有趣和互动。通过结合Live2D和最先进的人工智能技术，口语精灵呈现出一个栩栩如生的虚拟助手形象。这个形象有着生动的外貌和多种表情，使用户感到仿佛在与一个真正的人类交谈。

在使用口语精灵时，用户可以选择不同的学习主题，例如英语口语、法语发音等，然后与口语精灵进行对话。口语精灵的回应会根据用户的输入而变化，它可以用不同的语气和表情回应用户，使学习过程更加生动和有趣。

此外，口语精灵还能够做出各种各样的动作，这些动作不仅增添了互动性，还有助于帮助用户理解语音语调、口音等口语学习的关键要点。无论是手势、表情还是身体动作，口语精灵都会根据对话内容进行自然而流畅的表现。

这一全新的交互形式让用户摆脱了传统学习软件的单调性，不再需要面对冷冰冰的界面。口语精灵的存在让口语学习成为一种娱乐和互动的体验，用户可以随时随地与口语精灵交流，提高口语技能的同时，还能享受到与一个友好的虚拟伙伴互动的乐趣。

总之，口语精灵是口语学习的一大创新，它借助Live2D和AI技术，为用户提供了更加有趣和互动的学习体验，使口语学习变得更加生动和愉快。

如果有其他问题或者对本文的项目感兴趣，欢迎留言与我们联系。