Este artículo es el primer artículo firmado por la comunidad tecnológica de pepitas de tierras raras. Está prohibida la reimpresión dentro de los 30 días y la reimpresión sin autorización después de los 30 días. ¡Se debe investigar la infracción!

Antes de dedicarme a la inteligencia artificial, hice desarrollo front-end durante 8 años. El front-end que mencioné no se refiere específicamente a él Web前端, sino que es opuesto al back-end del servicio. AndroidLa iOSparte que los usuarios ven e interactúan directamente también se considera el front-end.

Algunos viejos camaradas vinieron a chatear conmigo: "¡Oye! Ahora nuestra empresa está trabajando en IA, y tengo prisa con Android, y no puedo involucrarme".

Dije, no, AIno es el privilegio del back-end. También tenemos mucha IA del "lado del dispositivo" en la interfaz, y son ricas en variedad, pequeñas y flexibles.

1. El front-end también puede ejecutar AI

La siguiente figura es la versión TensorFlowde Lite, que admite Android, iOSy Raspberry Piplataformas. Estas AIcapacidades pueden ejecutarse directamente en el dispositivo del usuario.

Si usted es Webel front-end, TensorFlow.jstambién puede ejecutarlo en el navegador.

2. Predicción de la postura

Mirando los ojos sospechosos de mis viejos camaradas, decidí mostrarle un 姿态（姿势）估计（预测）ejemplo.

Al usarlo, podemos detectar la posición y la dinámica de los puntos clave del cuerpo humano, el efecto es el siguiente:

Con los datos de la figura anterior, hay muchos escenarios aplicables. Por ejemplo, la siguiente acción deportiva contando y cronometrando.

Además, se puede realizar la detección de caídas de ancianos, la corrección de la postura sentada de los estudiantes y la operación ilegal de los trabajadores.

TensorFlowEl sitio web oficial lo presenta.

Proporciona código de ejemplo al principio. Vamos a seguirlo, descargar uno Android示例y ejecutarlo.

El enlace es tensorflow.google.cn/lite/exampl…

Si no se puede abrir, hay una dirección de disco de red detrás. ¿Cómo puedo dejar que no consigas el código?

2.1 Comience ejecutando el código de muestra

Digamos que ambos descargamos el proyecto por primera vez (definitivamente estoy fingiendo). De lo que hablaré más adelante es más sobre el método de indagación frente a cosas nuevas.

Después de descargar el código del proyecto, en circunstancias normales estaremos perdidos.

这时我们突然发现android文件夹下有一个README.md。打开它，阅读它。英文的，去翻译。但凡规范的示例项目，都会在README.md中说明环境要求、操作步骤。

从上面的说明中，我们可以看到要求Android Studio 4.2及以上，最低SDK是API 21。它甚至提到打开Android Studio软件，从欢迎页面选择“打开已有项目工程”。

所以，不用怕，它很细致，“点击运行按钮”它都写上了。此处不是我有意简写，是我真的没法比它更具体，我再重复一遍算抄袭。

看，这就是让你感到恐惧的陌生知识！尽管它非常友好，你却开局想抵触它。我们不应该这样。

你只需关注下编译时app\download.gradle是否被执行，它的作用是下载模型文件到app\src\main\assets下。我导入项目后，一路运行到底，除了需要等待，没有遇到任何问题。

虽然官方提供了很多运行效果图，但我还是坚持出镜展示一下。这表示TF男孩不是拿官方图糊弄读者。他也在操作，并且理论和实践都可行。

为了让新手读者体验这个乐趣，并且避免等待。我把完整的Android项目材料打包好了（包含预置模型，可直接安装的apk文件）。文末会附上下载链接。

到这里，我想表达，其实AI在前端是可以流畅运行的。

不止能运行，客户端一侧的AI，反而具有得天独厚的优势。主要表现在以下几点：

信息采集零延迟：手机都带摄像头，说拍照就拍照，拍完立马能提供给AI处理。
客户端边缘计算：不用上传数据到云服务器，减轻负载压力，而且现在客户端的算力不容小觑。
更本地化的渲染：信息的采集、处理全在本地设备，有助于结果的流式呈现（边处理边渲染）。

前端的朋友们，看看开头那几十项前端可用的AI能力。谁还敢说我们无法助力企业的AI进程！

我们只需要稍微了解一下AI的工作原理，再加上我们前端的优势，势必会如虎添翼！

下面我就讲解它的工作原理！

2.2 工作原理

代码跑起来并使用，肯定是没问题的。不管是安卓、iOS还是树莓派，甚至浏览器。我正好有树莓派设备，也试了试，没问题。

如果你想定制化需求，将这项能力融入到自家的产品中，那就需要了解它的工作原理了。

讲解原理，用Python更合适。

不用着急。了解TF男孩的朋友能猜到，后面他会提供简洁又完整还带注释的源码。

2.2.1 关于模型版本

前端的AI能力，一般是在本地加载成品模型直接运行。所以，我们首先要认识这些模型。

这个姿势预测，谷歌很早就开发出来了。2017年发布了第一代模型叫PoseNet。后来，又推出第二代叫MoveNet。今天我们只看第二代。

第二代MoveNet又分为好多版本：

Thunder：准确、精细，但是速度慢。适合判断瑜伽动作是否到位。
Lightning：轻量、迅速，但是准确度低。适合拳击、跳绳等高频统计。
Multipose：主打一个人员多、背景杂。比如排球比赛监测众多球员。

对于很多事情，我以前不理解，比如为什么要那么多分支、版本？都弄成一个不好吗？

后来自己做模型时就明白了：资源就那么多，你是想投入到速度还是精度？

2.2.2 关于出入参数

这几个前端平台，甭管Android还是iOS，他们的模型都是同一个，因此出入参数也一样。你学会了一个，相当于全会了。

MoveNet的输入，支持实时相机数据，也支持图片。后面我们会拿图片做演示。

它的输出是身体上检测到的17个点。它们分别是：

0 鼻子	1 左眼	2 右眼	3 左耳
4 右耳	5 左肩	6 右肩	7 左肘
8 右肘	9 左腕	10 右腕	11 左胯
12 右胯	13 左膝	14 右膝	15 左踝
16 右踝

具体对应人体部位如下：

2.3 代码讲解

为了便于讲解代码，我特别写了一个精简的Python项目。地址如下： github.com/hlwgy/jueji…

仓库文件结构说明：

tflite 模型文件
  |--- movenet_lightning.tflite 轻量级模型，它快
  |--- movenet_thunder.tflite 精准级别模型，它准
  |--- classifier.tflite 分类模型，这是一个瑜伽动作的分类模型
  |--- labels.txt 分类模型的种类列表
data.py 数据定义
classifier.py 动作分类库
movenet.py 姿势预测类库
main.py 演示入口类，调用类库
test.jpeg 测试图片

以上代码文件来自官方示例。虽然官方的示例很规范，但对初学者还是不够简洁。官方总是想把所有功能都展示出来，而我只想讲其中的某个点。于是我从几十个文件中，抽出两条主线，组了这个项目。以此来演示如何提取身体的节点数据，以及对结果数据进行应用。

环境支持：python 3.8
类库支持：numpy、cv2
pip install numpy
pip install opencv-python

2.3.1 姿态数据提取

import cv2 # 用于图片处理
from movenet import Movenet # 导入类库
# 构建模型
pose_detector = Movenet('tflite/movenet_thunder')
# 读入图片
input_image = cv2.imread('test.jpeg')
# 将图片交给模型检测
person = pose_detector.detect(input_image)
print(person) # 获得提取结果

通过Movenet类从路径加载模型。

通过cv2.imread从路径加载图片数据。

将图片数据交给模型的detect方法去检测。模型会返回检测结果Person类。这个Person就是在data.py中定义的。

我们打印person结构如下：

Person(
    bounding_box=Rectangle(start_point=Point(x=140, y=72), 
      end_point=Point(x=262, y=574)), 
      score=0.61832184),
    keypoints=[
        KeyPoint(body_part=<BodyPart.NOSE: 0>, 
                coordinate=Point(x=193, y=85), 
                score=0.5537756)
        ……
        KeyPoint(body_part=<BodyPart.RIGHT_ANKLE: 16>, 
                coordinate=Point(x=150, y=574), 
                score=0.83522)
    ]

它的内容分为两个部分：

bounding_box是识别出的人形区域。看来它是先找到人，然后再进行分析。这里包含score得分，还有矩形框start_point、end_point起始点的坐标。

keypoints是一个数组，里面是身上那17个点的信息。包含score得分，body_part身体部位名称，coordinate是这个点在图上的(x, y)坐标。

这样还是太抽象。我们可以把结果画到图片上。

bounding_box = person.bounding_box 
keypoints = person.keypoints
# 把人体框选出来
start_point = bounding_box.start_point
end_point = bounding_box.end_point
cv2.rectangle(input_image, start_point, end_point, (255, 0, 0), 2)
# 把识别的17个点画出来
for i in range(len(keypoints)):
    cv2.circle(input_image, keypoints[i].coordinate, 2, (0, 0, 255), 4)

运行一下，看看效果：

左边是官方提供的图片，一个外国人。右边是我的靓照，一个中国人。官方给的示例总是完美的。而我扛着扫帚的那只手的手腕，没有识别到，应该是受到了扫帚干扰导致的。

上面演示的是图片作为输入源。其实摄像头也一样。尽管不同终端调用摄像头的代码不一样，但最终都是要获取图像数据并传给模型。以下是一个示例：

……
# 构建摄像头
cap = cv2.VideoCapture(camera_id)
while cap.isOpened():
  # 获取图片
  success, image = cap.read()
  image = cv2.flip(image, 1)
  # 将图片讲给模型处理
  person = pose_detector.detect(image)
  ……

2.3.2 姿态数据的应用

获取到17个点有什么用？怎么用？

这类语言，容易把一个技术人员给问懵。因为程序员常常沉浸在代码的成就中，并以此为豪。

TensorFlow的作者谷歌也想到了这一点。于是它们又提供了一个姿势数据应用的示例：瑜伽动作分类。

瑜伽有很多动作。比如我们的“金鸡独立”他们叫树式（tree）。这个动作像大树般稳定，在站立时需要向下扎根踩稳，并且保持身体直挺向上延伸。

但凡是一个动作，它就有判别标准。比如坐姿，肯定是膝和腰部近似垂直。而这些是可以转化为数据进行计算的。

我提供的示例项目中有一个classifier.py文件，模型文件中也有classifier.tflite和labels.txt。这就是谷歌针对瑜伽动作的示例。

# 导入类库
from classifier import Classifier
# 构建分类模型
classifier = Classifier('tflite/classifier', 'tflite/labels.txt')
# 将姿势数据传入模型，person结果数据可由上一步获得
categories = classifier.classify_pose(person)
# 给出分类结果
class_name = categories[0].label
print(class_name)

示例中test.jpeg就是张瑜伽照片，我们来看看效果。

结果识别出这个动作是tree。

如果你想要定义专属的动作，TensorFlow也支持你训练自己的数据（文末有链接）。

我还能想到很多的应用。比如你的肢体动作，让另一个动漫形象表现出来。就是你在这招手，模型获取到动作数据，然后把动作用一个可爱的二次元渲染出来。这样你就有了一个替身。

不管怎样，前端并没有被人工智能抛弃。甚至五六年前，TensorFlow就已经在做这方面的工作了。

如果你是前端，可以去学一学，用AI加持下自己的技能。在工作上，不管是“先涨工资，再好好干”，还是“好好干，后涨工资”。前提都是你干得了。有钱不花与没钱可花，是两种境界。

三、源码、模型和资料

为了简洁讲解，上面演示的是python代码。以下是其他前端平台的代码，供朋友们下载和使用。如果你把上面讲的原理和出入参数看懂了，再去干涉以下代码应该很简单。

JueJin_MoveNet
  |--- tflite模型文件
    |--- movenet_lightning.tflite 轻量级模型，它快
    |--- movenet_thunder.tflite 精准准级别模型，它准
    |--- movenet_multipose.tflite 多人模型，最多支持6人检测
    |--- classifier.tflite 分类模型，这是一个瑜伽工作分类
    |--- labels.txt 分类模型的种类列表
    |--- posenet.tflite 上一代老前辈posnet，这一代叫movenet
  |--- android源码（含模型）
  |--- tf_app-release.apk
  |--- ios源码