如何設(shè)計(jì)一款有溫度的AI產(chǎn)品?(二)

2 評論 1727 瀏覽 4 收藏 12 分鐘

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

接上文,如何設(shè)計(jì)一款有溫度的AI產(chǎn)品?(一)

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

1. APP端實(shí)現(xiàn)

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

1)首頁開發(fā)

筆者采用了慕客作為協(xié)作的UI標(biāo)注平臺(tái),分析布局后,應(yīng)采用的布局方式:

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

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

2)收集智能體頁面

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

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

關(guān)鍵代碼細(xì)節(jié)如下:

3)實(shí)時(shí)交流頁面

這塊才是踩坑的開始,原來使用D-ID的時(shí)候,Demo是純前端的方案,當(dāng)時(shí)以為都是標(biāo)準(zhǔn)WebRTC,而且Flutter本身也有支持WebRTC的標(biāo)準(zhǔn)組件,就沒太考慮端的兼容性問題。

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

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

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

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

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

關(guān)鍵代碼邏輯如下(關(guān)注下,后續(xù)開源出來):

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

五、Demo版內(nèi)測

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

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

假朋友B:+1

假朋友C:+1

….

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

假朋友D:啊,然后那,為什么這么慢呀

假朋友E:+1

假朋友F:+1

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

我:。。。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

未完待續(xù)。

本文由 @AI產(chǎn)品李伯男 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自 Unsplash,基于 CC0 協(xié)議。

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評論
評論請登錄
  1. 仔細(xì)看完了第一篇和第二篇,很高興國內(nèi)也有精英在跟我一樣關(guān)注這個(gè)方面的應(yīng)用并嘗試動(dòng)手制作!有時(shí)間可以加個(gè)V好友。主要架構(gòu)上,基本還是去年11月之前主流的一些方案和思路,沒有從技術(shù)角度去研究諸如GTPs商店里有沒有現(xiàn)成的同類模型,或是github里參考一些應(yīng)用,不過作者畢竟是產(chǎn)品經(jīng)理,已經(jīng)是非常難得了(默默嫌棄了一下我這邊的產(chǎn)品小伙……)

    來自浙江 回復(fù)
    1. 可以交流下,v: libonan_com

      來自北京 回復(fù)