【AI2+AI】人工智能面部滤镜APP

      

人工智能面部滤镜APP

难度： 中级

课程类型： 教程

学科： 计算机科学

年级水平：

• 6~8年级
• 9~12年级

本教程由Youth Mobile Power提供

教程地址: Facemesh Filter Camera

本教程中，我们使用一种类似但不同的技术 -- 面部标志检测。你面临的挑战是创建一个基于人工智能的滤镜相机。你有两种选择:一种是下面这张动图里可爱的猫，另一种是凶猛的狮子。

1. 项目简介

你用面部滤镜拍过照片吗？ Instagram和Snapchat面部滤镜席卷网络，你知道这些过滤器如何工作吗？你想制作自己的面部滤镜吗？ YR Media的小伙伴们有一篇出色的关于面部识别的互动文章。 在本教程中，我们将使用类似但不同的技术-面部标志检测。你面临的挑战是使用一种名为Facemesh的新AI技术来创建一个滤镜相机。

这个项目中，我们将学习如何使用称为Facemesh的一种新的人工智能技术，它是由谷歌训练的一种可供公众使用的模型。

什么是模型

模型是计算机如何思考的数学表现。它可以被认为是计算机的“大脑”。例如，当看到一张脸时，你的大脑会迅速确定眼睛在哪里。类似地，Facemesh模型会拍摄一张人脸的照片，然后判断眼睛在哪里。人类大脑的决策过程属于认知科学领域；计算机的决策过程属于人工智能领域。

模型非常复杂，涉及到大量的数学运算。你需要理解的过程的数学难度是大学水平，别担心！你无需完全了解整个过程，就可以从这个项目中受益!

2. Facemesh模型

Facemesh模型会给你的脸部拍照，并给出许多不同的面部特征的具体位置，如鼻子、额头、嘴的X和Y坐标。使用这些信息你可以创建面部滤镜；这些滤镜其实本质上是跟随你脸上特定点的图像。

我们使用FaceExtension来访问Facemesh模型，这是App Inventor的一个工具，就像桥梁一样让你能够在app中使用模型。项目完成后你会有自己的滤镜相机！你可以用这个app拍摄有创意的照片并与朋友分享。

重要提示：注意，这个项目不能使用模拟器来测试app，因为模拟器不能运行MIT app Inventor扩展，如FaceExtension。可以使用文末的附件来测试你的移动设备是否具备Facemesh所需的硬件功能。

3. 图形用户界面（GUI）

在启动文件中已经您创建了可用的GUI。请不要重命名组件，因为本教程将参考指南中给定的名字。

TakePhotoButton按钮让用户拍照。它连接到TextToSpeech文本转语音组件，该组件会在拍摄照片时通知用户。 SharePhotoButton按钮允许用户使用设备上安装的任何照片分享app来分享最近拍摄的照片。

FaceExtension是用于跟踪面部关键点的AI技术，它提供创建面部滤镜所需的信息。该扩展组件需要运行Web浏览器，因此我们将其链接为WebViewer组件。由于我们使用Canvas作为查看器，因此需要将Webviewer的可见性关闭。 Canvas组件将显示实时摄像机视图背景以及猫/狮子面部滤镜。

WebViewer组件，Canvas组件和FaceExtension的尺寸必须匹配，以便于面部跟踪。如果修改三个组件中任何一个的高度和宽度值，请确保对所有三个组件进行相同的修改。

最后，Sharing共享组件是一个社交组件，允许通过电话上的另一个app（如Email和Messenger）共享照片文件。

4. Facemesh关键点

Facemesh跟踪的人脸关键点是：

• 前额
• 下巴
• 左脸颊left cheek
• 左眼下部
• 左眼内侧
• 左眼上部
• 左眉
• 左前额
• 左鼻
• 嘴巴上部
• 嘴巴下部
• 鼻子底部
• 右脸颊
• 右眼下部
• 右眼内侧
• 右眼上部
• 右眉
• 右前额
• 右鼻

5. 面点关键点格式

每个关键点返回的是一个列表，列表包括两个元素：该点的x坐标和y坐标。

例如，关键点“forehead前额”是2个元素的列表：

[forehead x-coord, forehead y-coord]（[前额x坐标，前额y坐标]）

如果Facemesh无法跟踪整个脸部，会返回一个空列表导致滤镜无法工作；请确保面部在相机框架内！

6. 选择猫还是狮子（1）

开始做项目吧！现在画布看起来像是空的。 这是因为我们还没有为leftEar，rightEar和whiskers设置Picture图片属性。

首先选择猫或狮子滤镜过滤器。滤镜确定后，查看Media多媒体栏，该栏目里有多张图片。

在组件栏中单击“whiskers”，在组件属性中会看到它的各种的属性。如果选择的是狮子滤镜，请将whiskers的图片属性设置为LION_whiskers.png。 如果选择的是猫滤镜，则将whiskers的图片属性设置为CAT_whiskers.png。

7. 选择猫还是狮子（2）

如果将whiskers的图片属性设置为LION_whiskers.png，则应该在组件设计窗口看到以下更改。

对leftEar和rightEar图片重复此过程，为选择的动物滤镜选择图片。

狮子：

• 将leftEar的Picture属性设置为LION_leftEar.png，将rightEar的Picture属性设置为LION_rightEar.png。

猫：

• 将leftEar的Picture属性设置为CAT_leftEar.png，将rightEar的Picture属性设置为CAT_rightEar.png。

8. 选择猫还是狮子（3）

在为leftEar，rightEar和whiskers三个组件设置完Picture属性之后，画布应类似于以下两个图像之一。

9. 初步的GUI代码

初始文件中已经有一些使按钮按预期工作的代码。检查代码块，大致了解它们的作用。

这里有两个变量：photoCount计算已拍摄的照片数量，mostRecentPhoto存储最近拍摄的照片的文件名。

单击TakePhotoButton时，mostRecentPhoto文件名更新为当前图像，photoCount增加1。拍摄的第一张照片被命名为“characterCamera1.jpg”，第二张照片被命名为“characterCamera2.jpg”，依此类推。这些文件都保存到你的手机中。无论文件保存在哪里，在你的手机中都可以找到照片。例如，在Google Pixel上，照片将保存到“文件”app中。

跟踪photoCount并将其加1的原因是让每个图片文件都有一个唯一的名称。如果加1，则拍摄的照片都会重复写入同一个文件名。跟踪mostRecentPhoto的原因是为了可以使用SharePhotoButton分享这张照片。

TextToSpeech可以在拍照时让机器人说“已捕获照片！”

单击SharePhotoButton按钮时，可以分享最新照片！使用设备上安装的共享图像的任何应用（例如Google云端硬盘，Dropbox等）分享它。

10. 辅助功能

现在编写一些代码将三个ImageSprite（leftEar，rightEar和whiskers）放在面部相应的点上。

第一个编码任务是填充名为placeImage的帮助函数。

placeImage过程将img的中心 - ImageSprite放置在facePoint（由Facemesh跟踪的关键点）上。

11. 放置耳朵和胡须

通过调用ImageSprite.MoveTo（x，y）将ImageSprite的左上角移动到（x，y）。

但是，如果希望将img的中心放置在facePoint（x_f，y_f）上，则必须做一些简单的数学运算以获取其左上角的坐标，我们将其称为（x_c，y_c）。

注意，在画布Canvas的x-y坐标系中，（0，0）是左上角。 与正常的直角坐标系的区别在于y向下增加。

在上述情况下，如果想将左耳放置在Facemesh返回的左额头facePoint（x_f，y_f）的中心。

• 获得调整后的水平位置

  • *x_c = x_f-0.5图像宽度**

• 获得调整后的垂直位置

  • *y_c = y_f-0.5图像高度**

当我们调用ImageSprite.MoveTo（x_c，y_c）时，图像以facePoint的坐标（x_f，y_f）为中心。

12. 将过程填充完整

在placeImage过程中，需要完成的任务是：

• 填写ImageSprite.MoveTo代码块的x参数为*x_f-0.5图像宽度**。这是从facePoint的x坐标减去ImageSprite宽度的一半后得到的结果。

• 填写ImageSprite.MoveTo代码块的y参数为*y_f-0.5图像宽度**。这是从facePoint的y坐标减去ImageSprite高度的一半的结果。

如果感觉有点棘手，不要担心。下面会有如何完成过程的更多帮助。

1. 如何获得img的高度/宽度？

要获取图像的高度/宽度，请使用以下代码块。

要访问上面显示的这些ImageSprite代码块，在“Blocks模块”菜单中单击“任意组件”。这会打开下拉菜单显示以下内容。然后单击“任意ImageSprite”，会在其中找到上述代码块。

2. 我如何获得数字0.5？

单击“Blocks模块”中的“数学”选项，找到数字0。将数字拖到工作面板中，然后双击0以清除旧值并插入新值。

3. 如何获取facePoint和img？

将鼠标悬停在placeImage过程中的“img”上大约一秒钟，会弹出以下内容，这时就可以拖动“get img”了。

将鼠标悬停在placeImage过程中的“facePoint”上大约一秒钟，弹出以下内容。这时就可以拖动“get facePoint”了。

4. 如何获取facePoint的x，y坐标？

如前所述，每个facePoint是2个元素的列表。 x坐标位于索引1，y坐标位于索引2。

• 要获取x_f，请使用以下块从facePoint列表中获取索引为1的项目。

• 要获取y_f，请使用以下代码块从facePoint列表中获取索引为2的项目。

提示

解决方案

13. 脸部更新 过程

当FaceExtension检测到人脸时，会触发以下FaceExtension1.FaceUpdated事件。 此事件处理程序的代码也已创建并提供了调整大小resizing过程的代码，但是移动moving过程的代码不完整，你马上就会创建。

14. 移动 过程

滤镜的基本工作方式包括两部分。

1. 移动：当脸部移动时，图像会与脸部一起移动。
2. 调整大小：当脸部变大或变小时，图像将相应调整大小。

下面是第一个过程：移动Moving

要完成这段代码块，需要

• 调用placeImage将leftEar移动到前额的左侧（FaceExtension.LeftForehead）。

• 调用placeImage将rightEar移动到前额的右侧（FaceExtension.RightForehead）。

• 调用placeImage将whiskers移到嘴巴的上部（FaceExtension.MouthTop）。

记住，placeImage有两个参数：

1. ImageSprite对象
2. FaceExtension检测到的脸部关键点。

如何获得一个图像精灵ImageSprite？

在“Blocks模块”中，找到Canvas1，会看到三个ImageSprites：leftEar, rightEar和whiskers。

如果要获取leftEar对象，单击leftEar，选项抽屉会显示在右侧。滚动到底部找到leftEar对象。可以将其拖动到工作面板中作为placeImage的参数。

请遵循类似的步骤以获取正确的耳朵和胡须。

提示

解决方案

15. 调整大小

接下来是第二个步骤：调整大小。

• 定义图像的宽度或高度时，我们定义的是图像边界框的宽度或高度（以红色突出显示）。

• 所有宽度和高度都可以根据我们的期望任意选择并修改。

胡须：

• 宽度设置为脸部的宽度。
• 高度是眼睛和嘴巴之间的距离。

耳朵：

• 宽度设置为脸颊与鼻子之间的距离。
• 耳朵是正方形的边界框，我们可以将宽度和高度设为相同。

16. 测试应用

现在使用AI Companion来检查app是否正常运行。 注意不能用模拟器测试app，因为它不支持FaceExtension之类的MIT App Inventor扩展。

检查app是否可以跟踪人脸，并能够将耳朵和胡须正确放置在人脸上。 为了获得FaceExtension的最佳效果，请确保脸部光线充足并且直接面对相机。

17. 拍张照片发给自己的老友！

现在用全新的猫或狮子造型摆姿势，然后单击“拍照”按钮。 接下来，单击“共享最新图像”和自己的老友分享照片！

在下面的演示中，用户拍摄照片，单击“共享最新图像”，然后使用Google Hangouts与她的朋友分享照片。可用的app取决于你自己的手机。

太棒了！ 你已经完成了人物相机app！ 你经构建了一个基于AI的应用程序，该应用程序可以跟踪面部的运动。

拓展你的app

1. FaceExtension ShowMesh

在工作面板中单击FaceExtension1组件，会显示则其属性。 你可以操作其中一些属性。

可以将ShowMesh打开来试着检查一下。 这会显示Facemesh在你脸上识别的所有点的实时地图。

2. 使用FaceExtension之AllPoints

可以通过FaceExtension代码使用486个可用的点。

向下滚动到此Facemesh网页的最底部，可以查看所有可访问点的Facemesh地图。 可以单击它来放大。

例如，如果想要嘴唇上的特定点，可在地图上找到编号，假设为数字14，可以通过下面的代码块访问facePoint：

现在可以将该块用作placeImage的facePoint参数。

3. FaceExtension之UseCamera

默认情况下，UseCamera设置为“Front”以拍照。 将其切换为“Back”，这样可以为朋友拍照。 还可以添加一个按钮来切换相机镜头钮。 注意，如果在代码块中更改UseCamera，则必须将其设置为文本（“Back”或“Front”）。

注意：本app不需要摄像头组件，因为FaceExtension组件可以访问设备的摄像头。

4. 选择自己的角色！

你可以：

• 在线获取自己的图像或查看此图像库
• 转到网站remove.bg去除背景
• 制作自己的ImageSprites。
• 视需要更新高度和宽度尺寸
• 视需要将图像放置在相应的面部点上

让大脑放飞，让创意的果汁流淌！

这里有一些想法可以帮助你入门：

5. 允许切换滤镜

可以添加两个或多个按钮在不同的滤镜之间切换。

单击按钮时需要添加一些代码来更改ImageSprites的Picture属性。 这是按钮的一些代码示例。

6. 创建一个照片库

在相册中查看所有拍摄的照片会不会很开心？

可以添加第二个屏幕，保存到目前为止拍摄的照片名称，并将其显示为图库。 你可能需要使用TinyDB保存照片。 下面是图库外观的一些点子。

7. 增加互动

使用不同的关键点，通过跟踪两个facePoint之间的差异来识别脸部的运动。

这是一个表情符号与面部表情匹配的app演示。

要在app中获得这种额外的交互性，需要：

• 两个Imageprites，一个用于张嘴，另一个用于闭嘴
• 跟踪嘴巴的y坐标之间的差异
• 相应地更改不同表情符号Imagesprites的Visible属性。

关于Youth Mobile Power

我们很多人整天都在手机上度过，痴迷各种app。尽管我们知道手机会对我们的注意力、隐私甚至安全构成威胁，但我们还是继续打字和刷手机。但“口袋里的电脑”也为年轻人创造了未开发的机会，让他们学习、联系并改变我们的社区。

这就是为什么麻省理工学院和YR媒体联手推出了青年移动动力系列。YR青少年制作故事，突出年轻人如何以令人惊讶和强大的方式使用手机。与此同时，麻省理工学院的团队正在不断改进MIT App Inventor，让像你这样的用户能够创建像YR报道中提到的那样的APP。

回归初心：从故事中获得灵感，开始制作你自己的应用程序吧!

YR和麻省理工学院的合作部分得到了美国国家科学基金会的支持。本材料基于美国国家科学基金会在批准号下支持的工作。(1906895, 1906636)。本材料中所表达的任何意见、发现、结论或建议均为作者个人观点，并不一定反映美国国家科学基金会的观点。

点击此处查看更多由YR创建的应用程序和交互式新闻内容。

来得及时

"麻省理工学院的团队正在不断改进MIT App Inventor  "  . 还在完善中？据说被收购停止更新了吧

大江东去 发表于 2021-10-7 20:27
"麻省理工学院的团队正在不断改进MIT App Inventor  "  . 还在完善中？据说被收购停止更新了吧 ...

是MIT官网哦，一直都在持续更新，每个月至少两次以上，连IOS的版本都在不断更新。
“收购停止更新”是？？