如何设计一款有温度的AI产品?(二)

接上文,如何设计一款有温度的AI产品?(一)

四、技术实现

1. APP端实现

笔者调研了原生及跨端方案,加之控制成本的原因,选择了跨端Flutter的实现。

1)首页开发

如何设计一款有温度的AI产品?(二)

笔者采用了慕客作为协作的UI标注平台,分析布局后,应采用的布局方式:

  • Scaffold 页面
  • Body使用整张图片铺满,以宽作为平铺依据
  • 不规则位置头像采用 Stack 布局,预设最多30个位置,随机展示
  • 底部BottomBar,采用定位方式,弧度背景为图片,添加按钮采用 ElevatedButton

具体代码细节如下(系列文章完结后,会把源码开源出来,留言评论的我提前发下)

如何设计一款有温度的AI产品?(二)

如何设计一款有温度的AI产品?(二)

如何设计一款有温度的AI产品?(二)

2)收集智能体页面

如何设计一款有温度的AI产品?(二)

还是先分析布局,半弹窗页面,底部能发送文字,整体为对话信息页面。

  • 半弹窗采用 showModalBottomSheet 底部弹出给一定的透明度
  • 对话部分采用Column 滚动容器实现
  • 语音模块采用端本身的原生TTS组件

关键代码细节如下:

如何设计一款有温度的AI产品?(二)

如何设计一款有温度的AI产品?(二)

如何设计一款有温度的AI产品?(二)

如何设计一款有温度的AI产品?(二)

如何设计一款有温度的AI产品?(二)

3)实时交流页面

如何设计一款有温度的AI产品?(二)

这块才是踩坑的开始,原来使用D-ID的时候,Demo是纯前端的方案,当时以为都是标准WebRTC,而且Flutter本身也有支持WebRTC的标准组件,就没太考虑端的兼容性问题。

实现后发现,不同的Android版本及IOS版本对原生WebRTC的支持都存在或多或少的兼容问题,最后决定更换对话为H5页面,采用端 H5方式解决兼容问题,关键代码如下:

如何设计一款有温度的AI产品?(二)

如何设计一款有温度的AI产品?(二)

如何设计一款有温度的AI产品?(二)

如何设计一款有温度的AI产品?(二)

如何设计一款有温度的AI产品?(二)

如何设计一款有温度的AI产品?(二)

如何设计一款有温度的AI产品?(二)

其他零散页面,难度不大,就不着重说明了,下面是服务端的实现细节。

2. 服务端实现

笔者对JAVA,Go,Rust相对熟悉,但由于需要对接不同的模型及第三方sdk都是python的,Python服务端语言成本较低,小规模下优点更多。

  • 语音TTS模块,采用了ElevenLab,声音克隆能力对比讯飞、微软TTS、火山引擎语音包后,效果较佳
  • 对话交流模块,采用了GPT4,多轮对话及角色扮演对比,GLM3/文心一言/通义千问,效果较佳
  • 整体流程,首先APP端语音转文字,通过Websocket传到后台,用GPT4 Assistant回复,得到的文字,在通过ElevenLab 转为语音,最后调用D-ID用声音驱动图片的口型(已经预感到整理流程会很冗长)

关键代码逻辑如下(关注下,后续开源出来):

如何设计一款有温度的AI产品?(二)

如何设计一款有温度的AI产品?(二)

如何设计一款有温度的AI产品?(二)

如何设计一款有温度的AI产品?(二)

如何设计一款有温度的AI产品?(二)

如何设计一款有温度的AI产品?(二)

如何设计一款有温度的AI产品?(二)

如何设计一款有温度的AI产品?(二)

如何设计一款有温度的AI产品?(二)

至此,Demo版的开发完成了,下一步开始我们的内部吐槽环节。

五、Demo版内测

无比成就感的开发完APP端,H5端,服务端,开始和身边朋友进行内测:

假朋友A:男哥,说完话,咋1分钟才能响应

假朋友B: 1

假朋友C: 1

….

我:哎呀,我要先把语音转文字,文字给到GPT,GPT给我回复,我还要调接口生成语音,在通过语音驱动图片说话

假朋友D:啊,然后那,为什么这么慢呀

假朋友E: 1

假朋友F: 1

假朋友N:哎呦,辣鸡呀,这BUG太多了,男哥你不行呀,果然产品是不能参与研发的

我:。。。

于是开始了各种bug的修复,各种优化。

如何设计一款有温度的AI产品?(二)

如何设计一款有温度的AI产品?(二)

最后将每次的沟通响应缩短到30秒,汗!也是很慢,所以现在有俩条路,一是继续优化,或是自己训练模型,或是使用metahuman超写实模型,二是从产品角度改变思路。

六、产品改进调研

通过声音驱动口型的不同技术调研:

SadTalker:https://github.com/OpenTalker/SadTalker

西安交通大学、腾讯人工智能实验室、蚂蚁集团共同发布的一个模型,让头像能够说话,使用WebUI Colab白嫖后,发现还是比较慢的,如果图片质量不高,效果也会更差。

Wav2Lip:https://github.com/ajay-sainy/Wav2Lip-GFPGAN

Colab部署后,对视频文件支持较好,同时GFPGAN还可以修复不协调的口型,但是图片支持一般,需要自己改造,同时项目比较老实,也3080,4080需要自己升级改造,并行逻辑也需要增强(在B站看到有人改造后效果还可以,但是也不能完全达到实时,一个500*500,1分钟左右的视频,大概在20-30秒的延迟)。

VideoReTalking:https://github.com/OpenTalker/video-retalking

个人感觉,更像是SadTalker的升级版,对固定身位的图像视频支持比较好,但是图片说话,需要改造,同时对分辨率要求较高,最后还是延迟的问题,1分钟视频,4080最好成绩13秒。

最后,发现只要是和真人相关的图像效果都不是很好,因此改变了下调研思路,从有戏建模的角度来衡量是否能够完成我要求。

MetaHuman:是虚幻引擎发布的超写实的数字人类,整个身体和空间都可以进行驱动,咋一看找到了福音,不能重蹈D-ID的覆辙,一部iPhone 12(或更新型号)以及一台台式电脑就能化身为完整的面部捕捉和动画解决方案,我父亲去世的时候,也没留下太多的视频和声音,把面部的表情和身体特征从视频和声音中提取出来,还是比较麻烦的一件事,其他人要得重新来一遍,对于还在世的人比较友好,可以作为一个备选方案,如:将一个人的照片,3D补齐后,优化细节,导入MetaHuman的模型中。

NVIDIA Omniverse Audio2Face:https://www.nvidia.cn/omniverse/apps/audio2face/

官网很牛的介绍:使用生成式 AI 可以即时从一个音频来源创建面部表情动画。这不就是我心心念念的吗,看了看上手难度,有点打鼓呀,又联系了下企业本地版的价格,好的,我错了。

服务端的主流方案能够搜索的,还有国内外论坛求助的,主流大概这些,大概花了1周的时间,是时候改变下思路了。

文章系列完成后,会把相关的原先,设计,源码,数据库等一同开源出来。

未完待续。


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部