本文为稀土技术社区首发签约文章，30天内制止转载，30天后未获授权制止转载，侵权必究！

从事人工智能之前，我做了8年的前端开发。我所说的前端并非特指Web前端，而是与服务后端相对，Android、iOS这类用户直接看到并交互的部分也算前端。

有老战友就找我聊：“唉！现在咱们公司上下都在搞AI，我这个Android是干着急，也插不上手”。

我说，不是啊，AI并非是后端的特权。咱前端也有许多“端侧”的AI，并且品种丰厚，细巧灵活。

一、前端也能够运转AI

下图是TensorFlow的Lite版别，它支撑Android、iOS、Raspberry Pi平台。这些AI才能，能够在用户的设备上直接运转。

假如你是Web前端的话，也有TensorFlow.js能够在浏览器上跑。

二、姿态猜测

看着老战友置疑的目光，我决定给他演示一个姿态（姿态）估计（猜测）的例子。

利用它，咱们能够检测人体关键点的方位和动态，效果如下：

有了上图的数据，可运用的场景就多了。比方下面这个体育动作计数和计时。

除此之外，老人跌倒检测、学生坐姿纠正、工人违规操作等，都能够实现。

TensorFlow官网关于它的介绍。

开篇它就供给了实例代码。咱们就跟着它，下载一个Android示例运转一下。

链接是 tensorflow.google.cn/lite/exampl…

打不开的话，后边有网盘地址。我怎么会让你得不到代码。

2.1 从运转示例代码起步

假定咱们都是第一次下载这个项目（我肯定是假装的）。后边我讲的，更多的是面临新事物的探求办法。

下载完了项目代码，一般情况下咱们会一脸茫然。

这时咱们忽然发现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源码

• tflite模型文件：包括多品种型的movenet模型，可选择运用。
• ios源码：需求参照文档，将模型引入。
• android源码（含模型）：Android项目，已包括模型。
• tf_app-release.apk：可直接运转的Android示例程序。

四、参阅和引证资料

以下是文中所讲的依据，以及部分截图的来历。供有意向进一步学习和研讨的朋友查阅。

Pose Estimation 姿态猜测的介绍

tensorflow.google.cn/lite/exampl…

Pose Classification 姿态分类的介绍

www.tensorflow.org/lite/tutori…

TensorFlow.js TensorFlow前端版别

blog.tensorflow.org/2021/05/nex…

Github-TensorFlow-pose 姿态猜测的官方示例代码库

github.com/tensorflow/…

目前为止，得有十多名掘友问过我：TF男孩，你这个TF是什么意思？看我通篇讲TensorFlow，再看我的头像，你应该猜到了吧！

发现没有，上面讲的python例子，能够脱离tensorflow环境运转。它并不要求你pip install tensorflow。同时，它也考虑前端平台的运用。我想，这是一种胸襟吧。向TF学习！