作为一个主打数字人的问答平台，一个合理美观的界面是十分有必要的，本项目的第一版界面长成这样：
可以说是十分的丑陋了，对于输出的内容直接通过文本转语音输出，也没有可视化的历史对话记录功能，人物形象也只有一个头，大晚上调试的时候甚至有些吓人。在之后重新设计界面的时候，我就着重规定了几个方向。首先是聊天对话栏一定要有，虽然数字人能够直接将大模型的输出内容说出来，但是一个记录聊天对话记录的可视化窗口也是十分必要的，在以后做多模态内容的输入输出时也是需要这样一个窗口的，
对于数字人的神经辐射场建模，首先背景是要有的，原模型nerf自带的抠图功能并不完善，加上背景能显得自然的多。除了背景之外，还需要至少上半身的人物建模。由于我找的复刻模型只能对唇形和表情进行控制，所以上半身是通过添加循环播放的视频覆盖上去的，至少在视觉效果上起到了更加自然的作用。
当然对话记录的功能还需要结合数据库的操作，在每次加载界面的时候都从数据库中获取历史对话记录，并显示。以下我展示一下前端的部分代码，主要包含的就是对话记录的显示逻辑：
<div class="right">
<div class="right_main">
<div class="container">
<div class="content">
<div v-for="(item, index) in msg_list" :key="index">
<div class="item item-center"><span>[[item.timetext]]</span></div>
<div class="item item-left" v-if="item.type == 'fay'">
<div class="avatar"><img src="{{ url_for('static',filename='women.png') }}" />
</div>
<div class="bubble bubble-left">[[item.content]]
</div>
</div>
<div class="item item-right" v-else>
<!--msg_list是在后端对应的变量，[[item.content]]只是占位符-->
<div class="bubble bubble-right" >[[item.content]]<div v-if="loading && index === msg_list.length - 1" class="spinner"></div></div>
<div class="avatar"><img src="{{ url_for('static',filename='from.jpg') }}" />
</div>
</div>
</div>
<div>
</div>
</div>
<div class="input-area">
<textarea v-model="send_msg" name="text" id="textarea" placeholder="发送些内容给Fay..."></textarea>
<div class="button-area">
<button id="send-btn" @click="send()">Fay</button>
</div>
</div>
</div>
当然其中后端也有很多和数据库的交互逻辑值得分析的，这些就留到之后的文章中再进行分享了。
在大语言模型方面，由于当时还没有接触到langchain，又不想自己从头微调大语言模型，本项目使用阿里云通义大模型设计的通义星尘模型，人为添加知识库强化并规范语言模型输出范围，以此满足不同垂直领域的细化需求。通义星尘在使用上就像是一个可视化的langchian编辑器，可以通过可视化的方式设计知识库，提示模板等，但是实际使用下来还是有很多问题，提示模板并不总是有效，当然很有可能和它本身的大语言模型内核是通义的一个开源免费模型有关。
虚拟数字人赋能平台通过网络通信实现前后端之间的数据传输和交互，项目的 MVC 模型如图所示。前端负责将输入数据发送到后端，并展示接收到的后端返回的数据。为提高用户的体验感，前端需要不断地更新数字人的界面和交互体验。后端接收前端的请求，进行处理和分析，然后生成相应的响应并返回给前端。为提高虚拟数字人的准确性和逼真度，后端需要不断地优化数字人的数据处理和逻辑控制。
以上架构可以说是一种十分经典的web端开发的架构了，然而融合如此之多的生成式模型也不是一件易事了，由于很多模型只能部署在本地运行，没有方面的api调用形式，光是环境的配置就足够麻烦了。最终的界面样式就如下图所示：
本篇文章就分享到这里了，在之后的文章中，我将继续介绍此项目加入langchain后的功能完善以及在数字人建模方面的更多思路，感谢阅读。
