天天看點

低代碼完成人臉變妝小應用

本文内容根據演講嘉賓視訊及PPT整理而成。

講師簡介:王觯程(紫英),阿裡雲開放平台技術專家,目前從事阿裡雲開放 API 相關工具和産品的研發工作,主要負責阿裡雲邏輯編排,在阿裡集團負責編排規範推進,以及相關基礎設施和中台建設,在系統內建和企業內建領域有深入研究。

目錄

一、需求介紹

二、方案設計

三、上手實操

主要通過阿裡雲的一些已有的能力快速完成一個人臉變裝的應用,也通過此次視訊,為大家帶來一些雲産品的實踐。疫情期間新冠病毒爆發導緻大家都不能出門,很多開發者也開發了一些有意思的應有,比如:統計疫情資料、微信的“我要戴口罩”小程式,通過人臉照片傳上去,自動加上一個口罩的照片。像其他一些常見的應用,美圖秀秀等通過人臉識别加入各種各樣的裝飾的眼睛、貓耳朵、帽子等裝飾,這就稱之為人臉變裝的一個功能。

需求背景:

低代碼完成人臉變妝小應用

假如剛好有這麼一個機會,老闆詢問能不能一個小時完成這個人臉變妝的小程式呢?如果按照傳統的方法,一下就感覺比較難以實作了,還是非常具有挑戰的。

需求的實作:

低代碼完成人臉變妝小應用

比如選擇一個自己的照片,然後選擇好自己喜歡的貼紙,傳入之後呢,會自動把貼紙貼到适當的位置。通過選取一個美女的照片,選擇一個喜歡的“眼鏡”,貼完之後就會把“眼鏡”放到美女眼睛的這個位置。當再次選擇一個“貓耳朵”貼紙的時候,就會把“貓耳朵”貼至頭發的這個位置。

如果需要設計這樣一個小程式,先來分析下實作這個小程式的需求。既然是完成一個人臉變妝貼紙的這樣一個功能,總結下來需要這樣幾個步驟。

需求分析:

低代碼完成人臉變妝小應用

1、需要通過在手機端選擇圖檔的,是以要提供選擇圖檔的這樣一個功能。像部分同學有調用過開放平台提供的API的都應該有相關的了解,在使用API的時候會有選擇相冊或者選擇檔案的這種功能,使用者隻要點選這個按鈕之後,就會觸發系統選擇相冊或者檔案的一個界面。在小程式裡要識别圖檔來将貼紙貼至哪裡,小程式端很難實作AI的這種能力,是以實作AI識别人臉的時候是要借助服務端的能力。

2、通過上傳照片至服務端,服務端接收到這個圖檔之後呢根據人臉識别相關的一些特征,識别五官的位置在哪裡才能判斷貼紙需要貼到的位置。

3、根據識别五官的位置來計算下貼紙的位置,避免貼紙貼錯地方。

4、當得知貼紙需要放在哪裡之後,需要将兩張圖檔進行合成。

5、通過合成後的圖檔,服務端傳回合成後的位址,通過小程式的某個界面來将合成後的圖檔展示出來。

腦海裡的架構:

低代碼完成人臉變妝小應用

①小程式端:根據需求設計稿完成小程式端的界面顯示等開發,段落2

②Web服務:服務端處理接口調用的過程,Web機群為了考慮高可用,穩定性之類的優化問題,需要多機的部署來形成Web Cluster,通過SLB對小程式端提供接口服務用來做負載均衡。

③在識别中需要用到AI的能力,如果從頭開始做的話需要準備很多很多的資料集用來訓練AI的識别精準度,為了友善快速完成AI的訓練,可以通過GPU的執行個體快速來完成。通過部署相關的AI架構,可能還會用到NAS等大型檔案存儲來存儲這些資料集,把資料集放置在NAS之後,GPU通過讀取NAS上的資料集完成整個訓練的過程來得到一個AI模型,通過這個模型就可以進行使用者圖檔的識别。

傳統架構

優勢:掌控程度高

劣勢(三高):

硬體成本高:Web Cluster、GPU Cluster

維護成本高:部署、運維、排錯、日志、監控、穩定性等等

開發成本高:模型訓練和調優,多角色合作(前端、開發、算法)

如何精簡架構,在一個小時内完成這樣一個小程式呢?

低代碼完成人臉變妝小應用

盡可能利用已有服務和平台,從小程式端來說,一般主界面還是需要自己來進行設計,在滿足需求達到功能的情況下,可以友善的使用一些已有的SDK,通過Serverless化将小程式端的服務進行精簡架構,服務端的訓練叢集主要是提供一個人臉的檢測功能。

總的來說,在1個小時内完成這樣的一個小程式的架構主要從兩個要點來深入:

低代碼完成人臉變妝小應用

1、使用Serverless相關技術簡化部署架構,盡可能的減少服務的運維、硬體成本等問題,快速的把應用跑起來。

Serverless的優勢:

Serverless是無需最終使用者管理的基礎設施上托管應用的新方式。

低代碼完成人臉變妝小應用

2、低代碼的使用,在有限的時間内可以通過可視化的方式快速的建構需要的應用并快速上線。

需求抽象:主要分為兩個部分

1、通用的上傳服務:上傳 圖檔的一個過程,是一個通用化的服務,一些現有的平台就可以實作功能。

2、自定義服務端邏輯:通過識别人臉特征進行計算貼圖位置,然後在自定合成圖檔,最終傳回新圖檔位址。

1個小時能完成的架構:

①通過阿裡雲的産品,通過小程式雲Serverless可以直接上傳圖檔到OSS對象存儲服務當中,這種上傳過程通過簽名上傳也是比較安全的。阿裡雲小程式提供詳細文檔,利用小程式雲平台提供的雲服務及API實作檔案存儲,開通服務,建立應用,在小程式代碼中引入對應SDK即可。

低代碼完成人臉變妝小應用
低代碼完成人臉變妝小應用

②阿裡雲邏輯編排是應用開發、服務繼承和運作管理的托管服務,可編排、組合多個API、支援計劃排程的觸發模式和多種雲産品的連結器,簡化日常運維的應用開發工作。通過分析下來已有的API建構自定義邏輯,将需求的邏輯編排至一起來完成。

低代碼完成人臉變妝小應用

低代碼開發可以加速開發的過程,邏輯編排其實也是一個低代碼開發的內建平台,通過可視化編輯的方式可以快速編排一個API供用戶端使用,同時也內建了很多阿裡雲的相關能力,包括之前提到的圖檔合成功能,是以這部分代碼也可以省去,進而減少架構時間。

自定義邏輯實作思路之人臉變妝

低代碼完成人臉變妝小應用

1、實作人臉特定器官:阿裡雲視覺開放平台同時也提供了一個人臉識别的API,可以直接利用OpenAPI中的RecognizeFace來進行人臉的檢測。

2、計算貼紙位置:在發起API調用後會傳回3種核心資料分别是人臉的特征點,人臉的矩形框範圍,傳回兩個瞳孔之間的半徑。

低代碼完成人臉變妝小應用
低代碼完成人臉變妝小應用

傳回的3種資料,進行資料判别,難度增大可以依靠瞳孔的資料進行貼紙位置計算。

低代碼完成人臉變妝小應用

通過API傳回的兩個瞳孔的坐标軸,需要知道瞳孔之間的距離,求出三角形的斜邊就是瞳孔的距離,根據瞳孔的距離對眼睛貼紙進行縮放來比對面容。三角形的夾角,亦可以實作眼睛的傾斜度數進行貼合。

主要的邏輯算法:知道貼紙的圖檔大小寬高等,鏡片間距等參數,求面部特征瞳孔的斜邊大小及夾角,建構與眼鏡的比例,通過比例判别放置位置進行貼合。

3、圖檔合成:通過邏輯編排提供的合成圖檔連接配接器,輕松實作圖檔合成。

低代碼完成人臉變妝小應用

依據AI識别出來的相關參數,貼紙大小、圖檔比例、夾角度數,傳入圖檔連接配接器,進行圖檔合成操作。

1、選擇圖檔:因為本次實操是一個小程式,是以需要提前準備好一個小程式,本次簡單的做了一個支付寶小程式進行示範。

低代碼完成人臉變妝小應用

在小程式界面設定的時候可以直接利用“圖檔選擇API”進行內建,進而簡化代碼量。

2、圖檔上傳/調用:在阿裡雲官網小程式雲Serverless建立一個服務空間,在配置好相關的支付寶小程式的公鑰等配置資訊。(可以通過有關的指導文檔進行建立配置)

低代碼完成人臉變妝小應用

在服務空間建立完成之後就具備雲存儲的一個服務能力了,利用API 代碼進行圖檔的上傳。

低代碼完成人臉變妝小應用

将上傳代碼複制至小程式裡面就可以調用系統的圖檔上傳功能。傳回上傳的圖檔位址就可以發給API進行人臉識别,在傳回後需要一個OSS位址進行連結識别,這用到了OSS對象存儲的能力,可以在OSS對象存儲服務回源能力進行更改,最終在傳完之後回原到小程式雲位址進行圖檔的中專,在OSS下設定一個回源規則,将小程式的域名進行粘貼至回源配置便好。相當于請求上傳圖檔位址的時候就可以回源至小程式可以直接辨識的位址。

低代碼完成人臉變妝小應用

4、自定義服務端邏輯/雲編排:通過邏輯編排将四個主要的過程編排為一個API,進入邏輯編排服務,建立一個工作流,從空白模闆進行設計,設定一個http觸發器,相當于怎麼觸發編排功能的運作,使用post方法,定義請求頭正文,使圖檔位址以參數的方式傳遞給邏輯編排進行下一步的運作。

低代碼完成人臉變妝小應用
低代碼完成人臉變妝小應用

因為使用人臉識别API,是以搜尋人臉識别API,進行調用,過程中需要角色授權,建立一個角色授權代替你的身份去完成調用,建立角色名字進行服務權限政策授權。

低代碼完成人臉變妝小應用

這裡需要給與API傳入url參數,這個參數就是請求參數,可以直接在右側進行選擇。嵌入自定義代碼,寬高等參數的資訊。進行添加合成圖檔的功能,配置相關貼紙URL及背景(請求頭)URL,進行圖檔合成。

低代碼完成人臉變妝小應用

将圖檔合成完之後就需要将合成結果傳回用戶端了,添加響應的傳回資訊。

低代碼完成人臉變妝小應用
低代碼完成人臉變妝小應用

操作完成之後就編排好了,系統會根據你編排的流程傳回一個可調用的API位址,将位址貼進邏輯編排位址代碼就可以使用。

低代碼完成人臉變妝小應用

在通過上傳圖檔後調用API傳回合并後的圖檔位址,根據自己的方法将圖檔展示出來。

繼續閱讀