低代码完成人脸变妆小应用-阿里云开发者社区

本文内容根据演讲嘉宾视频及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下设置一个回源规则，将小程序的域名进行粘贴至回源配置便好。相当于请求上传图片地址的时候就可以回源至小程序可以直接辨别的地址。