雲計算

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

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

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

目錄

一、需求介紹
二、方案設計
三、上手實操

一、需求介紹

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

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

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

二、方案設計

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

1、需要通過在手機端選擇圖片的,所以要提供選擇圖片的這樣一個功能。像部分同學有調用過開放平臺提供的API的都應該有相關的瞭解,在使用API的時候會有選擇相冊或者選擇文件的這種功能,用戶只要點擊這個按鈕之後,就會觸發系統選擇相冊或者文件的一個界面。在小程序裡要識別圖片來將貼紙貼至哪裡,小程序端很難實現AI的這種能力,所以實現AI識別人臉的時候是要藉助服務端的能力。

2、通過上傳照片至服務端,服務端接收到這個圖片之後呢根據人臉識別相關的一些特徵,識別五官的位置在哪裡才能判斷貼紙需要貼到的位置。
3、根據識別五官的位置來計算下貼紙的位置,避免貼紙貼錯地方。

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

5、通過合成後的圖片,服務端返回合成後的地址,通過小程序的某個界面來將合成後的圖片展示出來。
腦海裡的架構:
image.png

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

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

③在識別中需要用到AI的能力,如果從頭開始做的話需要準備很多很多的數據集用來訓練AI的識別精準度,為了方便快速完成AI的訓練,可以通過GPU的實例快速來完成。通過部署相關的AI框架,可能還會用到NAS等大型文件存儲來存儲這些數據集,把數據集放置在NAS之後,GPU通過讀取NAS上的數據集完成整個訓練的過程來得到一個AI模型,通過這個模型就可以進行用戶圖片的識別。

傳統架構
優勢:掌控程度高
劣勢(三高):
硬件成本高:Web Cluster、GPU Cluster
維護成本高:部署、運維、排錯、日誌、監控、穩定性等等

開發成本高:模型訓練和調優,多角色合作(前端、開發、算法)
如何精簡架構,在一個小時內完成這樣一個小程序呢?
image.png

儘可能利用已有服務和平臺,從小程序端來說,一般主界面還是需要自己來進行設計,在滿足需求達到功能的情況下,可以方便的使用一些已有的SDK,通過Serverless化將小程序端的服務進行精簡架構,服務端的訓練集群主要是提供一個人臉的檢測功能。
總的來說,在1個小時內完成這樣的一個小程序的架構主要從兩個要點來深入:
image.png

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

Serverless的優勢:
Serverless是無需最終用戶管理的基礎設施上託管應用的新方式。
image.png

2、低代碼的使用,在有限的時間內可以通過可視化的方式快速的構建需要的應用並快速上線。
需求抽象:主要分為兩個部分

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

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

1個小時能完成的架構:
①通過阿里雲的產品,通過小程序雲Serverless可以直接上傳圖片到OSS對象存儲服務當中,這種上傳過程通過簽名上傳也是比較安全的。阿里雲小程序提供詳細文檔,利用小程序雲平臺提供的雲服務及API實現文件存儲,開通服務,創建應用,在小程序代碼中引入對應SDK即可。
image.png

image.png

②阿里雲邏輯編排是應用開發、服務繼承和運行管理的託管服務,可編排、組合多個API、支持計劃調度的觸發模式和多種雲產品的鏈接器,簡化日常運維的應用開發工作。通過分析下來已有的API構建自定義邏輯,將需求的邏輯編排至一起來完成。
image.png

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

自定義邏輯實現思路之人臉變妝
image.png

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

2、計算貼紙位置:在發起API調用後會返回3種核心數據分別是人臉的特徵點,人臉的矩形框範圍,返回兩個瞳孔之間的半徑。
image.png

image.png

返回的3種數據,進行數據判別,難度增大可以依靠瞳孔的數據進行貼紙位置計算。
image.png

通過API返回的兩個瞳孔的座標軸,需要知道瞳孔之間的距離,求出三角形的斜邊就是瞳孔的距離,根據瞳孔的距離對眼睛貼紙進行縮放來匹配面容。三角形的夾角,亦可以實現眼睛的傾斜度數進行貼合。
主要的邏輯算法:知道貼紙的圖片大小寬高等,鏡片間距等參數,求面部特徵瞳孔的斜邊大小及夾角,構建與眼鏡的比例,通過比例判別放置位置進行貼合。

3、圖片合成:通過邏輯編排提供的合成圖片連接器,輕鬆實現圖片合成。
image.png

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

三、上手實操

1、選擇圖片:因為本次實操是一個小程序,所以需要提前準備好一個小程序,本次簡單的做了一個支付寶小程序進行演示。
image.png

在小程序界面設置的時候可以直接利用“圖片選擇API”進行集成,從而簡化代碼量。

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

image.png

在服務空間創建完成之後就具備雲存儲的一個服務能力了,利用API 代碼進行圖片的上傳。
image.png
將上傳代碼複製至小程序裡面就可以調用系統的圖片上傳功能。返回上傳的圖片地址就可以發給API進行人臉識別,在返回後需要一個OSS地址進行鏈接識別,這用到了OSS對象存儲的能力,可以在OSS對象存儲服務回源能力進行更改,最終在傳完之後回原到小程序雲地址進行圖片的中專,在OSS下設置一個回源規則,將小程序的域名進行粘貼至回源配置便好。相當於請求上傳圖片地址的時候就可以回源至小程序可以直接辨別的地址。
image.png

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

image.png

因為使用人臉識別API,所以搜索人臉識別API,進行調用,過程中需要角色授權,創建一個角色授權代替你的身份去完成調用,創建角色名字進行服務權限策略授權。
image.png

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

將圖片合成完之後就需要將合成結果返回客戶端了,添加響應的返回信息。
image.png

image.png

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

在通過上傳圖片後調用API返回合併後的圖片地址,根據自己的方法將圖片展示出來。

Leave a Reply

Your email address will not be published. Required fields are marked *