智能前端技术与实践.pdf

推荐序 1 随着大数据、云计算、互联网、物联网等信息技术的发展，泛在感知数据和图形处理器等计算平台极大地推动了以深度神经网络为代表的人工智能技术的应用，大幅弥补了科学与应用之间的技术鸿沟，图像分类、语音识别、知识问答、人机对弈、无人驾驶等技术实现了从不能用、不好用到可以用、效果好的突破。然而，以深度神经网络为代表的人工智能应用过度依赖计算机算力，因此在后摩尔定律时代它可能会遭遇发展瓶颈。具体来说，计算能力提高 10 倍相当于三年的算法改进，算力提高的背后却是无法承受的硬件成本。因此，基于当下现有的硬件设施平台设计出参数少、准确率高的神经网络对复杂人工智能技术在移动端设备或嵌入式设备上的落地应用显得尤为重要。本书基于 TensorFlow.js 框架将计算机视觉技术与前端开发有机结合，介绍了线性回归、logistical 回归、XOR 问题、人体姿态检测、目标检测、OCR（Optical Character Recognition，光学字符识别）等案例的部署。这是一本横跨前端开发和深度学习两大技术领域的书，可谓一册在手，应有尽有！李昌华 陕西省计算机教育学会副理事长、博士生导师 推荐序 2 当我认识璞东时，他还是一名即将毕业的大四学生，还记得我们第一次视频通话是在2020 年。当时他对代码的浓厚兴趣给我留下了深刻的印象，他根据自己在前端开发和深度学习方面的编程经验编写了本书。书中相关主题的知识广度令人印象深刻。本书一共包含多个案例，如线性回归、logistical回归、XOR 问题、姿态检测、目标检测、OCR 等案例。这些案例可在石璞东的个人网站、微信小程序和 Google 网上应用商店上找到。阅读本书将帮助您获得重要的 Web 开发和深度学习技能，提升您在 TensorFlow 和JavaScript 方面的开发水平。我真心希望本书能够帮助所有具备 Web 开发经验和深度学习技能的程序员或对该领域有兴趣的人。Alex（岑国良）Savills Singapore Pte 公司会计 推荐序 3 我希望我的描述能让读者快速感知到能从本书里学到什么。如果你已经有了一些编程基础，想要通过本书了解更多的实战经验并且能够快速上手，那么本书会令你得偿所愿。虽然实践出真知，但是基础理论也很重要。本书由浅入深逐步展开讨论。本书首先介绍开发环境的配置与前端开发基础知识（包含 HTML、CSS、JavaScript），并将其与深度学习有机融合，在此基础上带领读者进行一些简单的网页开发、Google 浏览器插件开发以及微信小程序开发等。本书然后分别介绍了深度学习的基础知识、TensorFlow.js 框架以及卷积神经网络等，以及一些基础实践案例。本书最后展示了Google 官方提供的部分场景型实践案例。本书从基础知识到案例详解，环环相扣，层层递进，以激发起读者的兴趣。本书的所有案例可参见作者的个人网站、作者的微信小程序和 Google 网上应用商店。丰富的案例将帮助所有阅读本书的人更好地理解相关技术。我很荣幸能够与本书的作者在同一所大学相识，在一同学习前端开发的过程中，我能够深刻地感受到作者对于技术的热爱与追求，我也很钦佩他孜孜不倦的探索精神。本书是一本实用的工具书，相比于枯燥乏味的理论知识，它主要展示从实际操作中总结出的一些经验教训。我热切地希望本书的读者能够打开自己的代码编译器，动手实现本书中的一切案例，你会有意想不到的收获！霍鑫楠 北京完美世界前端开发工程师 前 言 一个成熟的人工智能应用包括算法、数据以及工程（即大前端）三个方面，因此，在人工智能时代，前端智能化是 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:/ 作者和编辑尽最大努力来确保书中内容的准确性，但难免会存在疏漏。欢迎您将发现的问题反馈给我们，帮助我们提升图书的质量。当您发现错误时，请登录异步社区，按书名搜索，进入本书页面，单击“提交勘误”，输入勘误信息，单击“提交”按钮即可，如下图所示。本书的作者和编辑会对您提交的勘误进行审核，确认并接受后，您将获赠异步社区的 100 积分。积分可用于在异步社区兑换优惠券、样书或奖品。与我们联系 我们的联系邮箱是 。如果您对本书有任何疑问或建议，请您发邮件给我们，并请在邮件标题中注明本书书名，以便我们更高效地做出反馈。如果您有兴趣出版图书、录制教学视频，或者参与图书翻译、技术审校等工作，可以发邮件给我们；有意出版图书的作者也可以到异步社区投稿（直接访问 IT（信息技术）专业图书社区，致力于出版精品 IT 图书和相关学习产品，为作译者提供优质出版服务。异步社区创办于 2015 年 8 月，提供大量精品 IT 图书和电子书，以及高品质技术文章和视频课程。更多详情请访问异步社区官网https:/。“异步图书”是由异步社区编辑团队策划出版的精品 IT 专业图书的品牌，依托于人民邮电出版社的计算机图书出版积累和专业编辑团队，相关图书在封面上印有异步图书的 LOGO。异步图书的出版领域包括软件开发、大数据、人工智能、测试、前端、网络技术等。异步社区 微信服务号 目 录 第 1 章 开发环境配置.1 1.1 安装 Anaconda3.1 1.2 安装 TensorFlow 2.6 1.3 安装 npm 包管理工具.12 1.4 安装 TensorFlow.js 的相关包.15 1.5 使用 WebStorm.20 1.6 使用 Google 浏览器.21 1.6.1 注册 Chrome Web Store 开发者.21 1.6.2 Google 浏览器扩展程序.23 1.7 使用微信开发者工具.31 1.7.1 添加微信小程序插件.32 1.7.2 使用微信小程序插件.33 1.7.3 发布微信小程序.39 第 2 章 前端开发基础.45 2.1 背景知识概述.45 2.2 HTML 基础.46 2.2.1 HTML 文档基本结构.47 2.2.2 常用标签.56 2.3 CSS 基础.62 2.3.1 CSS 的 3 种使用方法.62 2.3.2 CSS 选择器.63 2.4 JavaScript 基础.64 2.5 与Google扩展程序相关的JavaScript API.65 2.6 深度学习中的 JavaScript.69 2.6.1 JavaScript 数据类型.69 2.6.2 JavaScript 异步编程.71 2.7 微信小程序开发.75 2.7.1 微信小程序框架结构分析.76 2.7.2 页面描述文件.81 2.7.3 页面样式文件.97 2.7.4 逻辑层文件.98 2.7.5 小程序的事件系统.101 第 3 章 深度学习概述.95 3.1 深度学习环境.95 3.1.1 云端深度学习环境选择.95 3.1.2 本地深度学习环境搭建.104 3.2 深度学习框架.105 3.3 TensorFlow 2 基础.113 3.3.1 数据类型.113 3.3.2 数值精度.115 3.3.3 操作和计算图.116 3.3.4 自动微分和梯度带.117 3.3.5 广播机制.118 3.3.6 框架概述.118 3.4 深度学习基础.119 3.4.1 BP 神经网络.120 3.4.2 激活函数.121 3.4.3 softmax 函数.126 3.4.4 损失函数.126 3.4.5 梯度下降算法.130 3.4.6 反向传播.132 第 4 章 TensorFlow.js 框架详解.134 4.1 TensorFlow.js 框架概述.134 4.2 TensorFlow.js 低阶 API 详解.136 4.2.1 张量操作方法.136 4.2.2 数学运算.148 4.3 TensorFlow.js 高阶 API 详解.153 4.3.1 构建模型.154 4.3.2 模型配置.160 4.3.3 模型训练.160 4.3.4 模型评估.160 4.3.5 模型转换.164 4.4 TensorFlow.js Vis 库详解.166 4.4.1 Visor 接口方法介绍.167 4.4.2 模型可视化.168 4.4.3 数据可视化.173 4.4.4 模型评价指标.175 4.5 其他 API.176 4.5.1 数据操作.176 4.5.2 浏览器操作.183 4.5.3 性能优化.184 4.5.4 正则化.185 4.5.5 早停法.185 第 5 章 卷积神经网络.187 5.1 卷积神经网络概述.187 5.2 卷积层.188 5.3 池化层.192 5.4 轻量级的卷积神经网络.194 5.4.1 SqueezeNet.195 5.4.2 MobileNetV1.198 5.4.3 ShuffleNetV1.201 5.4.4 Xception.203 第 6 章 TensorFlow.js 基础案例.206 6.1 线性回归.207 6.1.1 案例简介.207 6.1.2 代码实现.207 6.2 logistical 回归.211 6.2.1 案例简介.211 6.2.2 代码实现.211 6.3 XOR 问题.215 6.3.1 案例简介.215 6.3.2 代码实现.216 6.4 加载与应用 MobileNet 模型.220 6.4.1 案例简介.220 6.4.2 代码实现.220 6.5 你画我猜（MNIST 手写 数字版）.224 6.5.1 案例简介.224 6.5.2 代码实现.224 第 7 章 TensorFlow 官方数据集实战.231 7.1 boston_housing 数据集与实战 案例.231 7.1.1 数据集介绍.231 7.1.2 房价预测实战.232 7.2 与 CIFAR-10 数据集相关的实战 案例.235 7.2.1 数据集介绍.235 7.2.2 在 Anaconda3 Jupyter Notebook 中 加载数据集.235 7.2.3 在 Kaggle 中导入 CIFAR-10 数据集.236 7.2.4 从本地导入CIFAR-10数据集.240 7.3 与 CIFAR-100 数据集相关的实战 案例.248 7.3.1 数据集介绍.248 7.3.2 数据集展示.249 7.4 与 MNIST 数据集相关的实战 案例.253 7.4.1 数据集介绍.253 7.4.2 数据集展示.253 7.5 与 Fashion_MNIST 数据集相关 实战案例.255 7.5.1 数据集介绍.255 7.5.2 数据集加载.256 7.6 基于 CNN 的 MNIST 手写数字 识别.257 7.6.1 自定义网络模型.257 7.6.2 微信小程序部署.261 第 8 章 基于 CNN 的常见水果分类 识别.266 8.1 数据集介绍.266 8.2 数据集标注.269 8.3 数据预处理.277 8.3.1 数据文件读取.277 8.3.2 文件解码.278 8.3.3 文件数据类型转换.278 8.3.4 数据归一化.280 8.4 模型概览.282 8.5 模型设计.284 8.6 模型配置.284 8.7 模型训练.285 8.8 模型评估.286 8.9 模型部署.289 8.9.1 在微信小程序中加载模型.289 8.9.2 在 Google 浏览器中加载 模型.291 第 9 章 基于 PoseNet 的人体姿态 检测.293 9.1 项目概述.293 9.2 项目初始化.294 9.2.1 添加 camera 组件.295 9.2.2 添加 canvas 对象.296 9.3 模型加载.296 9.4 姿态检测.297 9.5 预测结果绘制.301 9.6 效果展示.302 第 10 章 基于 Coco SSD 的目标检测.303 10.1 项目概述.303 10.2 项目初始化.304 10.2.1 添加 camera 组件.304 10.2.2 添加 canvas 对象.305 10.3 模型加载.305 10.4 目标检测.305 10.5 预测结果绘制.307 10.6 效果展示.307 第 11 章 OCR 技术.309 11.1 OCR 技术概述.310 11.2 OCR 工具推荐.311 11.3 微信 OCR.315 11.3.1 插件配置信息.316 11.3.2 页面结构设计.317 11.3.3 页面逻辑功能.318 11.4 Google 扩展程序 OCR.319 11.4.1 插件配置信息.319 11.4.2 页面结构设计.320 11.4.3 页面逻辑功能.321 11.4.4 后台脚本.322 第 12 章 神奇的人工智能.324 12.1 个人网站恶意评论检测.324 12.1.1 项目简介.324 12.1.2 代码实现.326 12.1.3 效果展示.330 12.2 微信同声传译.331 12.2.1 项目简介.331 12.2.2 代码实现.332 12.2.3 效果展示.333 12.3 Google 面馆正式营业了.334 12.4 猜画小歌.335 12.5 Face Touch Monitor.335 12.6 Teachable Machine.336 12.7 其他案例.337 1 第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 所示页面。2 图1-2 Get Started页面 接下来，单击 Download Anaconda installers 按钮，进入 Anaconda 的下载页，如图 1-3 所示。图1-3 Anaconda的下载页 接着，根据计算机的配置，选择合适的版本并下载，如图 1-4 所示。图1-4 下载Anaconda3 3 下载完成后，双击该可执行文件，开始进行 Anaconda3 的安装，如图 1-5 所示。接着，单击 Next 按钮，进入图 1-6 所示 License Agreement 界面。接下来，单击 I Agree 按钮，进入Select Installation Type 界面，并选中Just Me（recommended）单选按钮，如图 1-7 所示。图1-5 安装Anaconda3 图1-6 License Agreement界面 继续单击 Next 按钮，进入 Choose Install Location 界面并选择安装位置，如图 1-8 所示。图1-7 Select Installation Type界面 图1-8 Choose Install Location界面 选择好安装 Anaconda3 的本地路径后，单击 Next 按钮，进入 Advanced Installation Options 界面并勾选 Register Anaconda3 as my default Python 3.8 复选框，配置可选项，如图 1-9 所示。4 我们按照官方的推荐（Advanced Options）进行安装即可，直接单击 Install 按钮，安装过程如图 1-10 所示。图1-9 配置可选项 图1-10 安装过程 稍等片刻，Anaconda3 的安装进度达到 100%，如图 1-11 所示。接着，单击 Next 按钮，进入图 1-12 所示界面，查看 Anaconda 的相关信息。图1-11 安装进度达到100%图1-12 查看Anaconda的相关信息 继续单击 Next 按钮，进入图 1-13 所示界面，单击 Finish 按钮，即可完成 Anaconda3 的安装。安装成功后，我们打开 Windows 系统的“开始”菜单，可以看到图 1-14 所示的 Anaconda3文件夹。至此，我们完成了 Windows 系统中 Anaconda3 的安装。Anaconda3 在 macOS 上的具体安装细节与在 Windows 系统上的安装过程类似，这里不再赘述。5 图1-13 完成安装 图1-14 Windows系统“开始”菜单中的Anaconda3文件夹 如果你在安装 Anaconda3 时遇到下载速度过慢的问题，推荐使用 Anaconda3 的清华镜像来完成安装，具体步骤如下。首先，访问“清华大学开源软件镜像站”首页，如图 1-15 所示。图1-15“清华大学开源软件镜像站”首页 6 然后，在首页的搜索框中搜索 Anaconda，搜索结果如图 1-16 所示。接下来，选择 archive/选项，进入图 1-17 所示页面，查看 Anaconda 的版本。图1-16 Anaconda的相关搜索结果 图1-17 查看Anaconda的版本 该页面包含了主流操作系统中Anaconda的不同安装版本，大家按照自己的需求进行安装即可。1.2 安装 TensorFlow 2 Anaconda3 中内置了 Scikit-learn、NumPy、IPython、Pathlib、Pandas、Matplotlib 等常用库。7 关于内置库的更多信息，这里不再赘述，请参考 Anaconda 官网中的相关文档介绍，如图 1-18所示。图1-18 Anaconda内置库信息（通过官网查看）我们也可以进入 Anaconda Prompt 环境，通过代码清单 1-1 所示的命令进行相关库的查看，如图 1-19 所示。代码清单 1-1 conda list 8 图1-19 Anaconda内置库信息（通过命令行查看）查看完相关库的信息后，我们继续进行 TensorFlow 2 的安装，这里我们将介绍两种安装TensorFlow 2 的方法，包括官网安装和镜像源安装。1官网安装 首先，我们进入 TensorFlow 官网，如图 1-20 所示。9 图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 10 图1-22 通过pip命令安装TensorFlow的细节 安装成功后，我们看到当前 TensorFlow 版本为 2.4.1，如图 1-23 所示。图1-23 安装成功 在安装过程中，大家可能会遇到下载速度过慢等问题。接下来，我们将介绍如何通过国内镜像源进行安装。2镜像源安装 首先，推荐几个较常用的国内镜像网站：清华大学开源软件镜像站；阿里巴巴开源镜像站；11 中国科技大学开源软件镜像；豆瓣镜像。然后，我们通过中国科技大学的开源软件镜像完成 TensorFlow 2 的安装，如代码清单 1-4所示。代码清单 1-4 pip install tensorflow-i https:/ 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 所示。12 图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 所示的安装包配置文件。13 图1-27 安装包配置文件 接着，双击安装包，进行 Node.js 的安装，安装成功后，我们可以看到图 1-28 所示信息。图1-28 安装成功的信息 接下来，打开终端工具，查看 Node.js 和 npm 的版本信息，如图 1-29 所示。14 图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 npmlatest-g macOS 中更新 npm 包的细节如图 1-31 所示。图1-31 macOS中更新npm包的细节 在 Windows 系统中，只需在终端中输入代码清单 1-8 所示命令，即可完成 npm 包的更新。Windows 系统中更新 npm 包的细节如图 1-32 所示。代码清单 1-8 npm install-g npm 15 图1-32 Windows系统中更新npm包的细节 Node.js 在 Windows 系统上的安装与在 macOS 上的安装过程类似，这里不再赘述。1.4 安装 TensorFlow.js 的相关包 TensorFlow.js 可以在浏览器和 Node.js 中运行，本节将重点介绍如何在浏览器中使用TensorFlow.js。在基于浏览器的项目中获取 TensorFlow.js 主要有两种方法。第一种是使用脚本标签，第二种是通过 npm 安装并且使用 Parcel 构建工具。1使用标签 我们可以将代码清单 1-9 所示脚本标签添加到项目的主 HTML 文件中。代码清单 1-9 添加完上述脚本标签后，我们就可以在浏览器中使用 TensorFlow.js 库了。该方法最大的缺点是当我们在代码编辑器中使用相关 API 时没有智能提示。2使用 npm 包 相对于通过标签引入的方法，我们更推荐通过 npm 包进行安装并使用 Parcel 构建工具。首先，创建一个项目文件夹，并在该文件夹中创建主页面文件 index.html 和脚本文件script.js。然后，在 index.html 文件中通过标签引入 script.js，如图 1-33 所示。16 图1-33 在index.html文件中通过标签引入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 17 接下来，我们在浏览器中打开 http:/localhost:1234，弹出的启动页面如图 1-34 所示。图1-34 启动页面 我们可以在 http:/localhost:1234 对应的启动页面中查看相应的效果。关于 Parcel 的使用，我们不再赘述。最后，我们介绍如何通过 npm 包安装 TensorFlow.js 的相关模块。1TensorFlow.js Core TensorFlow.js Core 模块主要提供与数值计算和硬件加速相关的低阶API，是TensorFlow.js 生态系统的一部分，可以通过代码清单 1-14 所示命令完成安装。代码清单 1-14 npm install tensorflow/tfjs-core 2TensorFlow.js Layers TensorFlow.js Layers 模块以 TensorFlow.js Core 为基础，是用来在浏览器中构建、训练并运行深度学习模型的高阶 API，属于 TensorFlow.js 生态系统的一部分，可以通过代码清单 1-15所示命令完成安装。代码清单 1-15 18 npm install tensorflow/tfjs-layers 3TensorFlow.js Data TensorFlow.js Data 模块用于加载并解析磁盘或互联网上各种格式的数据，可以通过代码清单 1-16 所示命令完成安装。代码清单 1-16 npm install tensorflow/tfjs-data 4TensorFlow.js Vis TensorFlow.js Vis 模块能够将 TensorFlow.js 模型进行可视化，可以通过代码清单 1-17 所示命令完成安装。代码清单 1-17 npm install tensorflow/tfjs-vis 5TensorFlow.js AutoML TensorFlow.js AutoML 模块提供一系列用于加载和运行 AutoML Edge 相关模型的 API，可以通过代码清单 1-18 所示命令完成安装。代码清单 1-18 npm install tensorflow/tfjs-automl 6TensorFlow.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 19 图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 20 图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 天。完成上述所有操作后，我们就可以创建 21 自己的项目了，如图 1-39 所示。图1-39 在WebStorm中创建项目 1.6 使用 Google 浏览器 1.6.1 注册 Chrome Web Store 开发者 关于 Google 浏览器的安装及 Google 账号的注册登录等内容，这里不再赘述。为了方便本书后续案例的操作演示，我们继续注册为 Chrome Web Store 的开发人员。首先，访问 Chrome 网上应用店开发者控制台，打开注册界面，如图 1-40 所示。22 图1-40 注册界面 然后，在图 1-40 所示界面中，勾选左下角的“我已阅读并同意接受开发者协议和隐私权政策”单选框并单击右边“支付注册费”按钮，进入图 1-41 所示界面，填写信用卡等信息。接着，填写账单邮寄地址，正确填写完所有信息后，单击下方的“购买”按钮，并支付$5.00 开发者认证费用即可。支付成功后，会进入 Chrome Web Store Developer Dashboard 界面，如图 1-42 所示。图 1-41 填写信用卡等信息 23 图1-42 Chrome Web Store Developer Dashboard界面