低代码完成人脸变妆小应用

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,内容安全 1000次 1年
函数计算FC,每月15万CU 3个月
简介: 本实战介绍了如何通过阿里云API场景化平台,以低代码的图形化编排的方式,结合阿里云开放的人脸识别接口,无需了解复杂的应用开发和运维部署知识,快速完成一个真实场景下的人脸变妆小应用并发布上线。

本文内容根据演讲嘉宾视频及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返回合并后的图片地址,根据自己的方法将图片展示出来。

相关实践学习
【文生图】一键部署Stable Diffusion基于函数计算
本实验教你如何在函数计算FC上从零开始部署Stable Diffusion来进行AI绘画创作,开启AIGC盲盒。函数计算提供一定的免费额度供用户使用。本实验答疑钉钉群:29290019867
建立 Serverless 思维
本课程包括: Serverless 应用引擎的概念, 为开发者带来的实际价值, 以及让您了解常见的 Serverless 架构模式
相关文章
|
7月前
|
智能设计 UED
Dooring低代码关于辅助设计的思考和实践
Dooring低代码关于辅助设计的思考和实践
69 0
|
2月前
|
前端开发 数据可视化 Java
要低代码,但不要低能力,低代码产品能否成为企业的增效神器?
在当前经济形势复杂、市场竞争激烈的环境下,许多企业面临IT预算下降和大型项目延后的挑战。然而,企业信息化建设和降本增效的需求依然迫切,因此低代码产品成为了许多管理层的关注焦点。本文详细分析了国内低代码市场的现状,探讨了业务性低代码平台和开发性低代码平台的特点,并介绍了明道云、致远互联、数帆和织信Informat等主流产品,帮助企业在选择低代码工具时做出明智决策。
|
7月前
|
前端开发 JavaScript Serverless
什么是比较好的低代码产品?
本文汇总了几种业界的低代码,如果找到了对应的场景,同时又可以真正解决问题,低代码比原本敲代码要快,会是一个很好的发展空间。
|
7月前
|
敏捷开发 存储 安全
潜力与限制:低代码开发平台优缺点全面分析
低代码开发平台加速企业数字化转型,优点包括快速开发、降低技术门槛、灵活定制和方便维护。然而,也存在复杂功能限制、数据孤岛、供应商依赖和安全合规问题。推荐的低代码平台有Zoho Creator(适合中小企业)、Mendix(创新型企业)、Microsoft Power Apps(大型企业)、OutSystems(高安全合规要求)以及AppSheet和Appian(入门级用户)。在选择时,需综合考虑业务需求、技术因素和风险。
678 0
|
5月前
|
人工智能 数据可视化 BI
超好用的低代码平台:10款可视化工具深度评测
以下是内容摘要,以240个字符以内完成: 了解多款低代码开发平台,如Zoho Creator(提供直观界面、预建模板、工作流定制和多平台支持)、OutSystems(专注高性能、企业安全及多渠道发布)、Mendix(与Microsoft 365集成、丰富的组件和自定义连接器)、Wix Code(无代码Web开发)、Bubble(完全无代码、高度定制化页面)、Knack(快速建库、多角色访问控制)和Caspio(强大的数据库功能和定制报表)。这些平台降低开发门槛,适用于不同业务场景。
234 10
|
SQL 缓存 数据可视化
如何设计一个低代码平台?
如何设计一个低代码平台?
629 0
|
运维 数据可视化 Java
低代码开发平台都有哪些?国内外十几大低代码开发平台——汇总分析
低代码开发平台都有哪些?国内外十几大低代码开发平台——汇总分析
386 0
|
7月前
|
数据可视化 搜索推荐 前端开发
编码如画,以梦驭马——CodeWave低代码平台全侧写
编码如画,以梦驭马——CodeWave低代码平台全侧写
242 0
|
7月前
|
前端开发 JavaScript Java
千帆大模型平台多维度体验总结——平台使用以及接口调用小游戏开发
千帆大模型平台多维度体验总结——平台使用以及接口调用小游戏开发
277 0
|
7月前
|
开发框架 数据可视化 API
【ThingJS | 3D可视化】开发框架,一站式数字孪生
【ThingJS | 3D可视化】开发框架,一站式数字孪生
164 1