如何設(shè)計一款有溫度的AI產(chǎn)品？在這篇文章里，作者接著就技術(shù)實現(xiàn)部分做了梳理和分享，一起來看看本文的思路。

接上文，如何設(shè)計一款有溫度的AI產(chǎn)品？（一）

四、技術(shù)實現(xiàn)

1. APP端實現(xiàn)

筆者調(diào)研了原生及跨端方案，加之控制成本的原因，選擇了跨端Flutter的實現(xiàn)。

1）首頁開發(fā)

筆者采用了慕客作為協(xié)作的UI標注平臺，分析布局后，應(yīng)采用的布局方式：

• Scaffold 頁面
• Body使用整張圖片鋪滿，以寬作為平鋪依據(jù)
• 不規(guī)則位置頭像采用 Stack 布局，預(yù)設(shè)最多30個位置，隨機展示
• 底部BottomBar，采用定位方式，弧度背景為圖片，添加按鈕采用 ElevatedButton

具體代碼細節(jié)如下（系列文章完結(jié)后，會把源碼開源出來，留言評論的我提前發(fā)下）

2）收集智能體頁面

還是先分析布局，半彈窗頁面，底部能發(fā)送文字，整體為對話信息頁面。

• 半彈窗采用 showModalBottomSheet 底部彈出給一定的透明度
• 對話部分采用Column + 滾動容器實現(xiàn)
• 語音模塊采用端本身的原生TTS組件

關(guān)鍵代碼細節(jié)如下：

3）實時交流頁面

這塊才是踩坑的開始，原來使用D-ID的時候，Demo是純前端的方案，當時以為都是標準WebRTC，而且Flutter本身也有支持WebRTC的標準組件，就沒太考慮端的兼容性問題。

做交互设计10年，我为何转岗到产品经理？

真正转岗之后，我发现很多工作还是超出了自己的想象。产品经理的工作确实比较杂。理论上，产品经理的工作包括了产品的方方面面，从市场研究、用户调研、数据分析...

查看详情 >

實現(xiàn)后發(fā)現(xiàn)，不同的Android版本及IOS版本對原生WebRTC的支持都存在或多或少的兼容問題，最后決定更換對話為H5頁面，采用端+H5方式解決兼容問題，關(guān)鍵代碼如下：

其他零散頁面，難度不大，就不著重說明了，下面是服務(wù)端的實現(xiàn)細節(jié)。

2. 服務(wù)端實現(xiàn)

筆者對JAVA，Go，Rust相對熟悉，但由于需要對接不同的模型及第三方sdk都是python的，Python服務(wù)端語言成本較低，小規(guī)模下優(yōu)點更多。

• 語音TTS模塊，采用了ElevenLab，聲音克隆能力對比訊飛、微軟TTS、火山引擎語音包后，效果較佳
• 對話交流模塊，采用了GPT4，多輪對話及角色扮演對比，GLM3/文心一言/通義千問，效果較佳
• 整體流程，首先APP端語音轉(zhuǎn)文字，通過Websocket傳到后臺，用GPT4 Assistant回復(fù)，得到的文字，在通過ElevenLab 轉(zhuǎn)為語音，最后調(diào)用D-ID用聲音驅(qū)動圖片的口型（已經(jīng)預(yù)感到整理流程會很冗長）

關(guān)鍵代碼邏輯如下（關(guān)注下，后續(xù)開源出來）：

至此，Demo版的開發(fā)完成了，下一步開始我們的內(nèi)部吐槽環(huán)節(jié)。

五、Demo版內(nèi)測

無比成就感的開發(fā)完APP端，H5端，服務(wù)端，開始和身邊朋友進行內(nèi)測：

假朋友A：男哥，說完話，咋1分鐘才能響應(yīng)

假朋友B：+1

假朋友C：+1

….

我：哎呀，我要先把語音轉(zhuǎn)文字，文字給到GPT，GPT給我回復(fù)，我還要調(diào)接口生成語音，在通過語音驅(qū)動圖片說話

假朋友D：啊，然后那，為什么這么慢呀

假朋友E：+1

假朋友F：+1

假朋友N：哎呦，辣雞呀，這BUG太多了，男哥你不行呀，果然產(chǎn)品是不能參與研發(fā)的

我：。。。

于是開始了各種bug的修復(fù)，各種優(yōu)化。

最后將每次的溝通響應(yīng)縮短到30秒，汗！也是很慢，所以現(xiàn)在有倆條路，一是繼續(xù)優(yōu)化，或是自己訓練模型，或是使用metahuman超寫實模型，二是從產(chǎn)品角度改變思路。

六、產(chǎn)品改進調(diào)研

通過聲音驅(qū)動口型的不同技術(shù)調(diào)研：

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

西安交通大學、騰訊人工智能實驗室、螞蟻集團共同發(fā)布的一個模型，讓頭像能夠說話，使用WebUI Colab白嫖后，發(fā)現(xiàn)還是比較慢的，如果圖片質(zhì)量不高，效果也會更差。

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

Colab部署后，對視頻文件支持較好，同時GFPGAN還可以修復(fù)不協(xié)調(diào)的口型，但是圖片支持一般，需要自己改造，同時項目比較老實，也3080,4080需要自己升級改造，并行邏輯也需要增強（在B站看到有人改造后效果還可以，但是也不能完全達到實時，一個500*500，1分鐘左右的視頻，大概在20-30秒的延遲）。

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

個人感覺，更像是SadTalker的升級版，對固定身位的圖像視頻支持比較好，但是圖片說話，需要改造，同時對分辨率要求較高，最后還是延遲的問題，1分鐘視頻，4080最好成績13秒。

最后，發(fā)現(xiàn)只要是和真人相關(guān)的圖像效果都不是很好，因此改變了下調(diào)研思路，從有戲建模的角度來衡量是否能夠完成我要求。

MetaHuman：是虛幻引擎發(fā)布的超寫實的數(shù)字人類，整個身體和空間都可以進行驅(qū)動，咋一看找到了福音，不能重蹈D-ID的覆轍，一部iPhone 12（或更新型號）以及一臺臺式電腦就能化身為完整的面部捕捉和動畫解決方案，我父親去世的時候，也沒留下太多的視頻和聲音，把面部的表情和身體特征從視頻和聲音中提取出來，還是比較麻煩的一件事，其他人要得重新來一遍，對于還在世的人比較友好，可以作為一個備選方案，如：將一個人的照片，3D補齊后，優(yōu)化細節(jié)，導入MetaHuman的模型中。

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

官網(wǎng)很牛的介紹：使用生成式 AI 可以即時從一個音頻來源創(chuàng)建面部表情動畫。這不就是我心心念念的嗎，看了看上手難度，有點打鼓呀，又聯(lián)系了下企業(yè)本地版的價格，好的，我錯了。

服務(wù)端的主流方案能夠搜索的，還有國內(nèi)外論壇求助的，主流大概這些，大概花了1周的時間，是時候改變下思路了。

文章系列完成后，會把相關(guān)的原先，設(shè)計，源碼，數(shù)據(jù)庫等一同開源出來。

未完待續(xù)。