图书

电子书

课程

VIP会员

书课包

智能前端技术与实践

978-7-115-58439-7

作者: 石璞东吴萌王慧琴

译者:

编辑: 谢晓芳

分类: 前端开发

图书目录:

详情

要下载本书配套的源代码，请访问https://github.com/hahaDong/Deep_Learning_In_JavaScript

本书旨在介绍智能前端开发和深度学习。本书首先介绍了相关的开发环境、前端开发基础知识、深度学习基础知识、前端智能框架和卷积神经网络，然后讲述了线性回归、logistical回归、XOR问题、人体姿态检测、目标检测、光学字符识别等方面的案例，最后讲解了前端智能化案例。本书适合 Web 前端开发人员、人工智能开发人员阅读，也可供计算机相关专业的师生参考。

图书摘要

版权信息

书名：智能前端技术与实践

ISBN：978-7-115-58439-7

您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。

我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。

如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。

版　　权

著　　　　石璞东　吴　萌　王慧琴

责任编辑　谢晓芳

人民邮电出版社出版发行　　北京市丰台区成寿寺路11号

邮编　100164 　电子邮件　315@ptpress.com.cn

网址　http://www.ptpress.com.cn

读者服务热线：(010)81055410

反盗版热线：(010)81055315

内容提要

本书旨在介绍智能前端开发和深度学习。本书首先介绍了相关的开发环境、前端开发基础知识、深度学习基础知识、前端智能框架和卷积神经网络，然后讲述了线性回归、logistical回归、XOR问题、人体姿态检测、目标检测、光学字符识别等方面的案例，最后讲解了前端智能化案例。

本书适合Web前端开发人员、人工智能开发人员阅读，也可作为计算机相关专业师生的参考用书。

前　　言

一个成熟的人工智能应用包括算法、数据以及工程（即大前端）三个方面，因此，在人工智能时代，前端智能化是Web前端领域的重要发展趋势之一，该技术处于机器学习和JavaScript的前沿。

我是通过本科毕业设计才开始接触到前端智能化的，还记得当时的毕业设计要求是基于TensorFlow搭建AlexNet网络并训练MNIST手写数字，并保证其准确识别率不低于95%。虽然这个任务完成起来几乎没有任何难度，但我当时脑海中要完成的任务绝非如此。在我的想象中，最终的任务是用户通过手机等移动端设备或其他嵌入式设备随意采集不同的手写数字，经过模型预测之后，其结果可以正确显示出来。随着不断学习，我发现要想将我脑海中的画面落地到实际业务场景中，需要同时具备前端开发和机器学习两大领域的背景知识。虽然机器学习并非全新的概念，但通过JavaScript将其应用到前端的技术还处于起步探索阶段，并且相关的文献寥寥无几，因此大部分情况下只能自己硬啃官方文档。

除横跨两大技术栈的难度外，我们还要考虑数据预处理、张量操作。针对不同硬件设备，选择不同的神经网络设计方法。针对不同前端平台，选择相应开发方法等。对于任何一个初学者来说，如此庞大的知识体系是很难快速搭建的。

在研究生入学前的暑假，我有幸认识了哈尔滨工业大学的博士研究生冯振和人民邮电出版社的编辑张涛，他们听取了我关于本科毕业设计的一些想法，并鼓励我写一本关于前端和人工智能的书。我听了之后热血沸腾，这既可以系统梳理我的知识体系，又可以分享我学习过程中的经验教训，帮助大家少走弯路，于是我答应了。

因为从大二开始，我就在我的个人网站、微信公众号等其他第三方平台发表文章，所以我想当然地以为写书会和写博客文章一样简单。直到2020年寒假正式开始写书，我才体验到其中的艰辛。为了打磨书稿，我无数次更改目录，无数次调整内容框架，无数次梳理文字，无数次考究推理的合理性。为了迎合最新版本或适配更多设备，我还需要不断升级改造案例，我深入考虑每一章、每一节、每一段话，甚至每一个用词的细节。在2021年寒假期间，我完成了全书内容的80%。开学之后，由于没有太多集中的时间，直到2021年6月我才完成了本书的初稿。接下来的修改又花了几个月的时间。不过，最后看到我研究生期间的第一本作品，我觉得这一切都是值得的。

本书基于 TensorFlow.js讲述如何在浏览器端开发人工智能应用。我希望本书能够帮助相关从业者或任何对前端和深度学习感兴趣的朋友快速入门，进而促进复杂人工智能在移动端设备或嵌入式设备上的应用。

全书共12章，主要内容如下。

第1章重点介绍了如何在Windows系统和macOS下配置相关的开发环境，包括Anaconda3、TensorFlow 2、npm、WebStorm、Google浏览器以及微信开发者工具的安装等。

第2章重点介绍了与前端开发相关的基础内容，包括HTML基础、CSS基础、与Google扩展程序相关的JavaScript API、深度学习中的JavaScript以及微信小程序开发等。其中，微信小程序端样式设计基于ColorUI框架，网页端样式设计基于Bootstrap框架，网页端交互操作基于jQuery框架。

第3章讨论了与深度学习相关的基础内容，包括深度学习环境、深度学习框架等。

第4章讲述了与前端智能开发相关的框架，包括TensorFlow.js低阶API、TensorFlow.js高阶API、TensorFlow.js Vis库以及其他较重要的API。

第5章介绍了与卷积神经网络相关的内容，包括卷积神经网络的核心思想、卷积层、池化层以及4种经典的轻量级卷积神经网络。

第6章讨论了5个简单的案例。

第7章讲述了5个与计算机视觉有关的数据集及其使用方法，并结合微信小程序展示了基于CNN的MNIST手写数字的识别。

第8章讨论了一个基于CNN的常见水果分类案例。

第9章展示了一个关于人体姿态检测的案例。

第10章展示了如何在微信小程序端完成一个基于Coco SSD的目标检测案例。

第11章讨论了传统OCR技术以及深度学习背景下的OCR技术，并详细讲解了OCR技术在微信小程序以及Google扩展程序中的部署。

第12章介绍了一些有趣的前端人工智能应用。

本书适合以下人员阅读：

Web前端开发工程师；
前端AI工程师；
深度学习算法工程师；
计算机相关专业学生以及任何对前端开发和深度学习感兴趣的人。

本书有专门的读者交流群，添加“hahaCoder”微信公众号即可加入读者交流群。同时，我也会在bilibili网站分享一些技术总结和个人感悟，在bilibili网站中搜索“石璞东”即可找到我。

致谢

本书的顺利完成，得益于家人、老师和朋友的帮助。

感谢我的奶奶、爸爸、妈妈为我提供的写作环境，感谢姐姐、姐夫、堂哥、表哥给我的建议，没有他们的支持与鼓励，我难以完成本书。

感谢我的女朋友王璐瑶在写书过程中对我的理解、陪伴与支持。

感谢人民邮电出版社的编辑在选题立项、书稿撰写、审核、出版等过程中的指导，没有他们的督促与把关，我也难以看到本书的顺利出版。

最后，感谢我的读者以及所有曾经帮助过我的人！

石璞东

服务与支持

本书由异步社区出品，社区（https://www.epubit.com/）为您提供相关后续服务。

提交勘误

作者和编辑尽最大努力来确保书中内容的准确性，但难免会存在疏漏。欢迎您将发现的问题反馈给我们，帮助我们提升图书的质量。

当您发现错误时，请登录异步社区，按书名搜索，进入本书页面，单击“提交勘误”，输入勘误信息，单击“提交”按钮即可，如下图所示。本书的作者和编辑会对您提交的勘误进行审核，确认并接受后，您将获赠异步社区的100积分。积分可用于在异步社区兑换优惠券、样书或奖品。

与我们联系

我们的联系邮箱是contact@epubit.com.cn。

如果您对本书有任何疑问或建议，请您发邮件给我们，并请在邮件标题中注明本书书名，以便我们更高效地做出反馈。

如果您有兴趣出版图书、录制教学视频，或者参与图书翻译、技术审校等工作，可以发邮件给我们；有意出版图书的作者也可以到异步社区投稿（直接访问www.epubit.com/contribute即可）。

如果您所在的学校、培训机构或企业想批量购买本书或异步社区出版的其他图书，也可以发邮件给我们。

如果您在网上发现有针对异步社区出品图书的各种形式的盗版行为，包括对图书全部或部分内容的非授权传播，请您将怀疑有侵权行为的链接通过邮件发送给我们。您的这一举动是对作者权益的保护，也是我们持续为您提供有价值内容的动力之源。

关于异步社区和异步图书

“异步社区”是人民邮电出版社旗下IT（信息技术）专业图书社区，致力于出版精品IT图书和相关学习产品，为作译者提供优质出版服务。异步社区创办于2015年8月，提供大量精品IT图书和电子书，以及高品质技术文章和视频课程。更多详情请访问异步社区官网https://www.epubit.com。

“异步图书”是由异步社区编辑团队策划出版的精品IT专业图书的品牌，依托于人民邮电出版社的计算机图书出版积累和专业编辑团队，相关图书在封面上印有异步图书的LOGO。异步图书的出版领域包括软件开发、大数据、人工智能、测试、前端、网络技术等。

异步社区

微信服务号

第1章　开发环境配置

论语有云：“工欲善其事，必先利其器。”在介绍前端开发和深度学习的内容之前，本章先介绍相关案例所需要的开发环境，包括Anaconda3、TensorFlow 2、npm包管理工具、TensorFlow.js相关包、WebStorm工具及Google浏览器和微信开发者工具等。

1.1　安装Anaconda3

Anaconda3是一个用于Python科学计算和机器学习的开源工具，它是Python的一个科学计算发行版，支持Linux、macOS和Windows系统，包含conda等众多工具包和依赖项，提供了管理包和管理环境的功能，可用于解决开发过程中可能会遇到的Python多版本共存及切换和第三方包的安装等问题。本节介绍如何在Windows系统上完成Anaconda3的安装。

首先，进入Anaconda官网，如图1-1所示。

图1-1　Anaconda官网

然后，单击Get Started按钮，进入图1-2所示页面。

图1-2　Get Started页面

接下来，单击Download Anaconda installers按钮，进入Anaconda的下载页，如图1-3所示。

图1-3　Anaconda的下载页

接着，根据计算机的配置，选择合适的版本并下载，如图1-4所示。

图1-4　下载Anaconda3

下载完成后，双击该可执行文件，开始进行Anaconda3的安装，如图1-5所示。

图1-5　安装Anaconda3

接着，单击Next按钮，进入图1-6所示License Agreement界面。

图1-6　License Agreement界面

接下来，单击I Agree按钮，进入Select Installation Type界面，并选中Just Me（recommended）单选按钮，如图1-7所示。

图1-7　Select Installation Type界面

继续单击Next按钮，进入Choose Install Location界面并选择安装位置，如图1-8所示。

图1-8　Choose Install Location界面

选择好安装Anaconda3的本地路径后，单击Next按钮，进入Advanced Installation Options界面并勾选Register Anaconda3 as my default Python 3.8复选框，配置可选项，如图1-9所示。

图1-9　配置可选项

我们按照官方的推荐（Advanced Options）进行安装即可，直接单击Install按钮，安装过程如图1-10所示。

图1-10　安装过程

稍等片刻，Anaconda3的安装进度达到100%，如图1-11所示。

图1-11　安装进度达到100%

接着，单击Next按钮，进入图1-12所示界面，查看Anaconda的相关信息。

图1-12　查看Anaconda的相关信息

继续单击Next按钮，进入图1-13所示界面，单击Finish按钮，即可完成Anaconda3的安装。安装成功后，我们打开Windows系统的“开始”菜单，可以看到图1-14所示的Anaconda3文件夹。

图1-13　完成安装

图1-14　Windows系统“开始”菜单中的Anaconda3文件夹

至此，我们完成了Windows系统中Anaconda3的安装。Anaconda3在macOS上的具体安装细节与在Windows系统上的安装过程类似，这里不再赘述。

如果你在安装Anaconda3时遇到下载速度过慢的问题，推荐使用Anaconda3的清华镜像来完成安装，具体步骤如下。

首先，访问“清华大学开源软件镜像站”首页，如图1-15所示。

图1-15 “清华大学开源软件镜像站”首页

然后，在首页的搜索框中搜索Anaconda，搜索结果如图1-16所示。

图1-16　Anaconda的相关搜索结果

接下来，选择archive/选项，进入图1-17所示页面，查看Anaconda的版本。

图1-17　查看Anaconda的版本

该页面包含了主流操作系统中Anaconda的不同安装版本，大家按照自己的需求进行安装即可。

1.2　安装TensorFlow 2

Anaconda3中内置了Scikit-learn、NumPy、IPython、Pathlib、Pandas、Matplotlib等常用库。关于内置库的更多信息，这里不再赘述，请参考Anaconda官网中的相关文档介绍，如图 1-18所示。

图1-18　Anaconda内置库信息（通过官网查看）

我们也可以进入Anaconda Prompt环境，通过代码清单1-1所示的命令进行相关库的查看，如图1-19所示。

代码清单1-1

conda list

图1-19　Anaconda内置库信息（通过命令行查看）

查看完相关库的信息后，我们继续进行 TensorFlow 2 的安装，这里我们将介绍两种安装TensorFlow 2的方法，包括官网安装和镜像源安装。

1．官网安装

首先，我们进入TensorFlow官网，如图1-20所示。

图1-20　TensorFlow官网

然后，选择首页导航栏的Install选项，进入图1-21所示下载页面。

图1-21　TensorFlow下载页面

接下来，我们可以借助pip工具进行安装，也可以在Docker容器中安装。由于Docker容器不是本书的重点，因此这里不再赘述，我们重点讲解如何通过pip进行安装。

首先，我们通过代码清单1-2所示的命令将pip升级到最新版。

代码清单1-2

pip install --upgrade pip

然后，通过代码清单1-3所示的命令安装TensorFlow，安装细节如图1-22所示。

代码清单1-3

pip install tensorflow

图1-22　通过pip命令安装TensorFlow的细节

安装成功后，我们看到当前TensorFlow版本为2.4.1，如图1-23所示。

图1-23　安装成功

在安装过程中，大家可能会遇到下载速度过慢等问题。接下来，我们将介绍如何通过国内镜像源进行安装。

2．镜像源安装

首先，推荐几个较常用的国内镜像网站：

清华大学开源软件镜像站；
阿里巴巴开源镜像站；
中国科技大学开源软件镜像；
豆瓣镜像。

然后，我们通过中国科技大学的开源软件镜像完成TensorFlow 2的安装，如代码清单1-4所示。

代码清单1-4

pip install tensorflow -i  https://pypi.mirrors.ustc.edu.cn/simple/

图1-24所示即为通过中科大镜像安装TensorFlow 2的细节。

图1-24　通过中科大镜像安装TensorFlow 2的细节

安装成功后，打开Jupyter Notebook，并新建一个Python 3文件。接下来，导入几个常用的库，并查看其相关信息，如代码清单1-5所示。

代码清单1-5

import tensorflow as tf
import matplotlib.pyplot as plt
import numpy as np
import pandas as pd
tf.__version__,plt,np,pd

运行结果如图1-25所示。

图1-25　运行结果

我们可以看到，TensorFlow安装成功，且其他相关内置库也可以正常引用。

1.3　安装npm包管理工具

npm是随同Node.js一起安装的包管理工具，是一个功能强大的软件注册表，可用来安装Node.js 的各种扩展，它由网站、注册表、命令行工具这 3 个独立的部分组成。首先，我们进入Node.js官网，如图1-26所示。

图1-26　Node.js官网

我们一般选择下载LTS（Long-Term Support，长期支持）版本，下载完成后，可以看到图1-27所示的安装包配置文件。

图1-27　安装包配置文件

接着，双击安装包，进行Node.js的安装，安装成功后，我们可以看到图1-28所示信息。

图1-28　安装成功的信息

接下来，打开终端工具，查看Node.js和npm的版本信息，如图1-29所示。

图1-29　查看Node.js和npm的版本信息

我们发现，图1-29中npm包的版本为6.14.10。接下来，我们通过代码清单1-6所示命令查看npm的最新版本。

代码清单1-6

npm view npm version

如图1-30所示，npm包的最新版本为6.14.11，因此我们需要更新它。在macOS下，只需要在终端中输入代码清单1-7所示命令，即可完成npm包的更新。

图1-30　npm最新版本信息

代码清单1-7

sudo npm install npm@latest -g

macOS中更新npm包的细节如图1-31所示。

图1-31　macOS中更新npm包的细节

在Windows系统中，只需在终端中输入代码清单1-8所示命令，即可完成npm包的更新。Windows系统中更新npm包的细节如图1-32所示。

代码清单1-8

npm install -g npm

图1-32　Windows系统中更新npm包的细节

Node.js在Windows系统上的安装与在macOS上的安装过程类似，这里不再赘述。

1.4　安装TensorFlow.js的相关包

TensorFlow.js 可以在浏览器和 Node.js 中运行，本节将重点介绍如何在浏览器中使用TensorFlow.js。在基于浏览器的项目中获取TensorFlow.js主要有两种方法。第一种是使用脚本标签，第二种是通过npm安装并且使用Parcel构建工具。

1．使用<script/>标签

我们可以将代码清单1-9所示脚本标签添加到项目的主HTML文件中。

代码清单1-9

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>

添加完上述脚本标签后，我们就可以在浏览器中使用 TensorFlow.js 库了。该方法最大的缺点是当我们在代码编辑器中使用相关API时没有智能提示。

2．使用npm包

相对于通过<script/>标签引入的方法，我们更推荐通过 npm 包进行安装并使用 Parcel构建工具。

首先，创建一个项目文件夹，并在该文件夹中创建主页面文件index.html和脚本文件script.js。然后，在index.html文件中通过<script/>标签引入script.js，如图1-33所示。

图1-33　在index.html文件中通过<script/>标签引入script.js

接下来，我们在项目文件夹的根目录下通过代码清单1-10所示命令完成项目的初始化。

代码清单1-10

npm init

完成初始化工作后，继续通过代码清单1-11所示命令安装TensorFlow.js包。

代码清单1-11

npm install @tensorflow/tfjs

接着，通过代码清单1-12所示命令安装Parcel构建工具。

代码清单1-12

npm install -g parcel-bundler

安装完成后，我们就可以打包该Web项目了。Parcel中内置了一个当文件内容发生改变时能够重新构建应用的开发服务器。为了实现快速开发，该开发服务器支持热模块替换，因此我们只需指出入口文件（Parcel中所有指令的入口可以是一个或多个文件，一个或多个通配符表达式，一个或多个目录）即可，如代码清单1-13所示。

代码清单1-13

parcel demo/*html

接下来，我们在浏览器中打开http://localhost:1234，弹出的启动页面如图1-34所示。

图1-34　启动页面

我们可以在http://localhost:1234对应的启动页面中查看相应的效果。关于Parcel的使用，我们不再赘述。最后，我们介绍如何通过npm包安装TensorFlow.js的相关模块。

1．TensorFlow.js Core

TensorFlow.js Core 模块主要提供与数值计算和硬件加速相关的低阶API，是TensorFlow.js生态系统的一部分，可以通过代码清单1-14所示命令完成安装。

代码清单1-14

npm install @tensorflow/tfjs-core

2．TensorFlow.js Layers

TensorFlow.js Layers模块以TensorFlow.js Core为基础，是用来在浏览器中构建、训练并运行深度学习模型的高阶API，属于TensorFlow.js生态系统的一部分，可以通过代码清单1-15所示命令完成安装。

代码清单1-15

npm install @tensorflow/tfjs-layers

3．TensorFlow.js Data

TensorFlow.js Data模块用于加载并解析磁盘或互联网上各种格式的数据，可以通过代码清单1-16所示命令完成安装。

代码清单1-16

npm install @tensorflow/tfjs-data

4．TensorFlow.js Vis

TensorFlow.js Vis模块能够将TensorFlow.js模型进行可视化，可以通过代码清单1-17所示命令完成安装。

代码清单1-17

npm install @tensorflow/tfjs-vis

5．TensorFlow.js AutoML

TensorFlow.js AutoML模块提供一系列用于加载和运行AutoML Edge相关模型的API，可以通过代码清单1-18所示命令完成安装。

代码清单1-18

npm install @tensorflow/tfjs-automl

6．TensorFlow.js Converter

TensorFlow.js Converter是一个开源包，用于将预训练的 TensorFlow SavedModel 或TensorFlow Hub模块加载到浏览器中。注意，该库依赖Python 3.6.8版本。为了防止版本冲突，我们必须借助conda安装Python虚拟环境。关于conda工具的安装这里不再赘述。我们看一下如何在虚拟环境中安装tfjs-converter。

首先，打开终端工具，并输入代码清单1-19所示命令，开始虚拟环境的安装。

代码清单1-19

conda create -n demo python=3.6.8

安装完成后，通过代码清单1-20所示命令查看虚拟环境的相关信息，如图1-35所示。

代码清单1-20

conda info --envs

图1-35　虚拟环境的信息

接着，通过代码清单1-21所示命令进入对应的虚拟环境并查看虚拟环境中Python的版本信息，如图1-36所示。

代码清单1-21

conda activate demo

图1-36　虚拟环境中Python的版本信息

最后，通过代码清单1-22所示命令在虚拟环境中安装tfjs-converter包。安装细节如图1-37所示。

代码清单1-22

pip install tensorflowjs

图1-37　在虚拟环境中安装相关包的细节

安装成功后，通过代码清单1-23所示命令查看版本信息，如图1-38所示。

代码清单1-23

tensorflowjs_converter --version

图1-38　查看版本信息

至此，关于通过npm安装TensorFlow.js相关包的方法已经全部讲解完毕。

1.5　使用WebStorm

前端开发常用的代码编辑器包括HBuilder、Sublime Text、Visual Studio Code和WebStorm等，本书将以WebStorm作为开发平台来介绍后续相关案例。

关于WebStorm工具的安装，这里不再赘述，请读者自行完成。安装完成后，输入正确的激活码即可正常使用，或者我们选择免费使用30天。完成上述所有操作后，我们就可以创建自己的项目了，如图1-39所示。

图1-39　在WebStorm中创建项目

1.6　使用Google浏览器

1.6.1　注册Chrome Web Store开发者

关于Google浏览器的安装及Google账号的注册登录等内容，这里不再赘述。为了方便本书后续案例的操作演示，我们继续注册为Chrome Web Store的开发人员。

首先，访问Chrome网上应用店开发者控制台，打开注册界面，如图1-40所示。

图1-40　注册界面

然后，在图 1-40 所示界面中，勾选左下角的“我已阅读并同意接受开发者协议和隐私权政策”单选框并单击右边“支付注册费”按钮，进入图 1-41 所示界面，填写信用卡等信息。

图1-41 填写信用卡等信息

接着，填写账单邮寄地址，正确填写完所有信息后，单击下方的“购买”按钮，并支付$5.00 开发者认证费用即可。支付成功后，会进入 Chrome Web Store Developer Dashboard界面，如图1-42所示。

图1-42　Chrome Web Store Developer Dashboard界面

1.6.2　Google浏览器扩展程序

1．扩展程序介绍

扩展程序是可以定制浏览体验的小型软件程序，用户无须深入研究浏览器的原生代码就可以根据个人需要或偏好来定制Chrome的功能和行为。对于Web开发人员来说，只需学习如何通过Chrome公开的一些JavaScript API向Chrome添加功能即可，这大大降低了学习成本。

扩展程序会被压缩成可供用户下载并安装的以.crx结尾的安装包。与普通的Web应用程序不同，扩展程序不依赖Web上的内容，开发者完成扩展程序的开发后，将其上传至Chrome Web Store即可供特定用户使用。接下来，我们开发一个插件并在本地完成安装。步骤如下。

我们分别在google_demo的dist文件夹下创建icon文件夹和index.html、index.js、manifest.json、style.css文件，如图1-43所示。这里重点讲解一下manifest.json文件。

图1-43　创建文件夹和文件

在Chrome Web Store中，我们可以发布以下3种类型的项目：

应用程序（App）；
主题（Theme）；
扩展（Extension）程序。

这3种项目都需要一个名为manifest.json的清单，这是一个用于描述项目具体细节的JSON格式的文件。通常情况下，该文件的格式是固定的，但是当要解决一些重要的问题时也会做一些改变。对于开发人员来说，我们应该在清单中通过设置manifest_version字段的值来明确所使用清单规范的版本，如代码清单1-24所示。

代码清单1-24

{

...,

"manifest_version": 2,
  ...
}

2014年1月，Chrome停止加载或运行manifest v1版本的程序。截至2020年1月，manifest v3版本还没有发布，因此在我们的扩展程序中使用manifest v2是一个明智的选择。

后台脚本和许多其他重要组件必须在清单中注册，在清单中注册后台脚本会告诉扩展程序要引用哪个文件及该文件的行为。我们查看清单中可以添加的字段摘要。

1）必要字段

必要字段包含当前扩展程序的版本信息、所使用清单文件的版本及扩展程序的名称，如代码清单1-25所示。

代码清单1-25

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "versionString"
}

2）推荐字段

推荐字段包含当前扩展程序的图标、描述信息等，如代码清单1-26所示。

代码清单1-26

{
  "default_locale": "en",
  "description": "A plain text description",
  "icons": {...}
}

3）任选一个（或不选）

开发者可以对浏览器右上角的图标进行设置，如代码清单1-27所示。

代码清单1-27

{
  "browser_action": {...},
  "page_action": {...}
}

4）可选字段

开发者可以指定当前扩展程序向页面注入脚本的形式、后台JavaScript代码或后台页面及开发者或插件的主页设置等信息，如代码清单1-28所示。

代码清单1-28

{
  "action": ...,
  "author": ...,
  "automation": ...,
  "background": {
    // 推荐的
    "persistent": false,
    // 可选的
    "service_worker": ...
  },
  "chrome_settings_overrides": {...},
  "chrome_url_overrides": {...},
  "commands": {...},
  "content_capabilities": ...,
  "content_scripts": [{...}],
  "content_security_policy": "policyString",
  "converted_from_user_script": ...,
  "current_locale": ...,
  "declarative_net_request": ...,
  "devtools_page": "devtools.html",
  "differential_fingerprint": ...,
  "event_rules": [{...}],
  "externally_connectable": {
    "matches": ["*://*.example.com/*"]
  },
  "file_browser_handlers": [...],
  "file_system_provider_capabilities": {
    "configurable": true,
    "multiple_mounts": true,
    "source": "network"
  },
  "homepage_url": "http://path/to/homepage",
  "host_permissions": ...,
  "import": [{"id": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}],
  "incognito": "spanning, split, or not_allowed",
  "input_components": ...,
  "key": "publicKey",
  "minimum_chrome_version": "versionString",
  "nacl_modules": [...],
  "natively_connectable": ...,
  "oauth2": ...,
  "offline_enabled": true,
  "omnibox": {
    "keyword": "aString"
  },
  "optional_permissions": ["tabs"],
  "options_page": "options.html",
  "options_ui": {
    "chrome_style": true,
    "page": "options.html"
  },
  "permissions": ["tabs"],
  "platforms": ...,
  "replacement_web_app": ...,
  "requirements": {...},
  "sandbox": [...],
  "short_name": "Short Name",
  "signature": ...,
  "spellcheck": ...,
  "storage": {
    "managed_schema": "schema.json"
  },
  "system_indicator": ...,
  "tts_engine": {...},
  "update_url": "http://path/to/updateInfo.xml",
  "version_name": ...,
  "web_accessible_resources": [...]
}

接着，查看所上传项目的manifest.json文件，如代码清单1-29所示。

代码清单1-29

{
  "name": "你好，我是石璞东",
  "description" : "hahaCoder",
  "version": "1.0",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "index.html",
    "default_icon": "icon/hello.png"
  },
  "commands": {
    "_execute_browser_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+F",
        "mac": "MacCtrl+Shift+F"
      },
      "description": "Opens index.html"
    }
  }
}

由以上manifest.json清单我们可以知道如下几点。

该扩展程序的名称（name）为“你好，我是石璞东”。
描述信息（description）为“hahaCoder”。
程序版本为1.0。
清单文件版本（manifest_version）为第2版。
browser_action字段规定了该扩展程序的图标（default_icon）和用户单击图标时弹出的窗口（default_popup）。
commands字段允许开发者使用命令API添加键盘快捷键，这些快捷键会触发扩展程序中的操作。注意，只有当清单文件版本（manifest_version）至少为2时，才能使用该API，_execute_browser_action（和_execute_page_action）命令常用于打开扩展程序的弹出窗口，它们通常不会产生开发者可以处理的事件。如果开发者需要根据弹出窗口的打开位置来采取不同的措施，可以考虑在弹出窗口的代码中监听onDomReady 事件，上述清单文件规定了 Windows 系统中打开该扩展程序的快捷键是Ctrl+Shift+F，macOS中的快捷键是Control+Shift+F。

2．安装扩展程序

首先，我们在本地计算机上安装扩展程序，步骤如下。

（1）在浏览器地址栏输入chrome://extensions/，进入扩展程序管理界面。

（2）开启右上方开关选择器，打开开发者模式。

（3）单击“加载已解压的扩展程序”按钮，并上传google_demo中的dist文件夹。

查看本地效果，确认无误后，我们就可以发布该扩展程序了。操作步骤所示。

首先，我们进入Chrome Web Store Developer Dashboard界面。然后，上传本地压缩好的文件，如图1-44所示。

图1-44　上传压缩文件

上传成功后，单击所上传的文件，完成商品详情信息和隐私权信息的填写，如图1-45、图1-46所示。

图1-45　填写商品详情信息

图1-46　填写隐私权信息

填写过程中，注意，每次填写完成部分信息后，单击“保存草稿”按钮，保存我们所填写的内容。若“提请审核”按钮一直处于禁用状态，单击“为何我无法发布内容？”超链接。根据提示信息，修改我们填错的内容。如图 1-47 所示，错误消息提示我们详情信息字数太少。

图1-47　查看报错消息

修改完所有报错信息后，单击“提请审核”按钮，进入图1-48所示界面。

图1-48　提交审核界面

提交审核成功后，我们重新进入Chrome Web Store Developer Dashboard界面，发现扩展程序的状态已由“草稿”变成“待审核”，如图1-49所示。

图1-49　待审核界面

当Chrome Web Store顺利通过我们所上传的扩展程序后，其状态会由“待审核”变为“已发布-公开发布”，如图1-50所示。

图1-50　查看审核信息

1.7　使用微信开发者工具

关于微信开发者工具的安装及微信小程序账号的注册，这里不再赘述，请读者自行完成，安装成功后，启动微信开发者工具，按照提示填入或选择项目名称、目录、AppID、开发模式、后端服务所对应的信息，如图1-51所示。

图1-51　创建微信小程序时填写的信息

提示

要查看AppID，首先进入小程序后台，然后选择左侧面板中的“开发”，接着选择“开发管理”选项卡下的“开发设置”，如图1-52所示。

图1-52　查看AppID

这里注意以下两点。

“开发模式”下拉列表中，请选择“小程序”，而不是“插件”。
对于“后端服务”，请选择“不使用云服务”单选按钮，若后续案例中要使用到云开发的一些功能，我们自行配置即可。

1.7.1　添加微信小程序插件

插件是可添加到小程序内并直接使用的功能组件。开发者可以像开发小程序一样开发插件，供其他小程序使用。同时，小程序开发者可直接在小程序内使用插件，无须重复开发，以为用户提供更丰富的服务。插件开发不是本书的重点，这里不再赘述，我们重点看如何便捷地把插件添加到自己的小程序内。添加流程如下。

首先，进入小程序后台界面。然后，在侧边面板中单击“设置”选项。接着，单击“第三方设置”按钮，并选择“插件管理”选项。最后，单击“添加”按钮，完成TensorFlowJS插件的安装（该插件无须申请，添加后可直接使用），如图1-53所示。

图1-53　添加插件

1.7.2　使用微信小程序插件

完成TensorFlowJS插件的添加后，我们即可在“插件管理”界面中看到所添加的插件，如图1-54所示。

接下来，在图1-54所示界面中，单击“详情”超链接，进入TensorFlowJS插件的详情页并查看TensorFlowJS的开发文档，如图1-55所示。

图1-54　单击“详情”超链接

图1-55　开发文档

最后，我们将完整演示从微信小程序项目的创建到成功在项目中使用TensorFlowJS插件的全过程。

1）新建一个微信小程序项目

启动微信开发者工具，并填入该项目的相关信息，新建微信小程序项目，如图1-56所示。

2）安装相关包

我们通过终端工具进入该项目，并通过代码清单1-30所示命令进行项目的初始化。初始化过程中，系统会提示我们输入一些关于该项目的信息，如果没有特殊需求，一般选择默认选项即可，如图1-57所示。

图1-56　新建微信小程序项目

代码清单1-30

npm init

图1-57　项目初始化

接下来，通过代码清单1-31所示命令安装基础包。

代码清单1-31

npm install @tensorflow/tfjs-core

通过代码清单1-32所示命令安装tfjs-converter包。

代码清单1-32

npm install @tensorflow/tfjs-converter

在本书后续相关案例中，我们需要使用tf.loadGraphModel或tf.loadLayersModel API来载入模型，因此还需要通过npm安装fetch-wechat包，如代码清单1-33所示。

代码清单1-33

npm install fetch-wechat

最后，安装tfjs-backend-webgl包，如代码清单1-34所示。

代码清单1-34

npm install @tensorflow/tfjs-backend-webgl

安装完成后，我们切换到微信开发者工具的界面，选择“工具”→“构建npm”选项，开始构建我们刚刚安装的所有npm包，如图1-58所示。

图1-58　构建npm包

注意，每当安装新的npm包后，都要重新做一遍“构建npm”的过程，否则所安装的 npm 包就不能正常调用。构建完成后，若我们可以看到图 1-59 所示信息，就表示构建成功。

3）通过代码引入相关包

我们需要通过代码将所安装的npm包导入所创建的项目中，请看操作具体步骤。

使用插件前，我们要在app.json中声明需要使用的插件，如代码清单1-35所示。

图1-59　构建成功

代码清单1-35

{
  ...
  "plugins": {
    "tfjsPlugin": {
      "version": "0.0.6",
      "provider": "wx6afed118d9e81df9"
    }
  }
  ...
}

4）在app.js的onLaunch()里调用configPlugin()函数

首先，我们对app.js文件的内容做一下修改，如图1-60所示。

图1-60　修改app.js的内容

然后，在APP()函数外部添加代码，如代码清单1-36所示。

代码清单1-36

var fetchWechat = require('fetch-wechat');
var tf = require('@tensorflow/tfjs-core');
var webgl = require('@tensorflow/tfjs-backend-webgl');
var plugin = requirePlugin('tfjsPlugin');

最后，在App()函数内部的onLaunch()方法中加入代码，以调用插件函数，如代码清单1-37所示。

代码清单1-37

plugin.configPlugin({
     fetchFunc: fetchWechat.fetchFunc(),
     tf,webgl,canvas: wx.createOffscreenCanvas()
   });

设置完组件后，我们就可以使用TensorFlow.js库的API了。我们写一段测试代码验证一下该组件是否可以正常调用，如代码清单1-38所示。

代码清单1-38

// app.js
var fetchWechat = require('fetch-wechat');
var tf = require('@tensorflow/tfjs-core');
var webgl = require('@tensorflow/tfjs-backend-webgl');
var plugin = requirePlugin('tfjsPlugin');

App({
  onLaunch() {
    plugin.configPlugin({
      fetchFunc: fetchWechat.fetchFunc(),
      tf,webgl,canvas: wx.createOffscreenCanvas()
    });
    tf.tensor([1,2,3,4]).print()
  }
})

我们看到代码清单1-38中所定义的张量可以正常显示在控制台，运行结果如图1-61所示。

图1-61　运行结果

张量显示成功表明，TensorFlowJS组件可以正常调用。

1.7.3　发布微信小程序

完成小程序账号的注册、登录等操作后，我们就可以按照不同案例的要求来编写合适的代码了，当代码编写完成后，我们通过“预览”（或“真机调试”）来检查效果，如图1-62所示。

图1-62　预览小程序项目

在手机端预览完成并确认无误后，单击图1-62所示界面中右上方的“上传”按钮，按照提示输入相关信息，最后在弹出的对话框中单击“上传”按钮，上传微信小程序，如图1-63所示。

图1-63　上传微信小程序

上传成功后，我们即可看到图1-64所示信息。此时，单击“确定”按钮即可。

图1-64 上传成功

接下来，我们进入微信公众平台后台界面，选择“管理”，“版本管理”界面就会展示我们刚刚提交的代码开发版本信息，如图1-65所示。

图1-65　查看代码开发版本信息

单击“提交审核”按钮，进入图1-66所示界面，查看审核的相关须知，并单击“下一步”按钮。

图1-66　查看审核的相关须知

接下来，进入审核信息填写界面，我们按照提示要求填写正确信息即可，如图1-67所示。

图1-67　审核信息填写

填写完成后，单击“提交审核”按钮，弹出图1-68所示的提交反馈界面。

图1-68　提交反馈界面

此时我们返回“版本管理”界面，可以看到刚刚提交的开发版本处于审核中，如图1-69所示。

在所有信息填写正确的条件下，等待一段时间后（一般一个工作日微信公众平台可以审核完成，节假日除外），我们最初提交的开发版本会审核通过。此时我们只需要单击图1-70所示界面中的“提交发布”按钮即可。

图1-69　审核版本

图1-70　单击“提交发布”按钮

开发者可以根据情况选择线上版本的发布模式（全量发布或灰度发布），选择完成后，扫描微信二维码进行验证即可完成小程序的发布。

智能前端技术与实践

图书目录:

详情

图书摘要

版权信息

版 权

内容提要

推荐序1

推荐序2

推荐序3

前 言

致谢

服务与支持

提交勘误

与我们联系

关于异步社区和异步图书

第1章 开发环境配置

1.1 安装Anaconda3

1.2 安装TensorFlow 2

1．官网安装

2．镜像源安装

1.3 安装npm包管理工具

1.4 安装TensorFlow.js的相关包

1．使用<script/>标签

1．TensorFlow.js Core

2．TensorFlow.js Layers

3．TensorFlow.js Data

4．TensorFlow.js Vis

5．TensorFlow.js AutoML

6．TensorFlow.js Converter

1.5 使用WebStorm

1.6 使用Google浏览器

1.6.1 注册Chrome Web Store开发者

1.6.2 Google浏览器扩展程序