你好，欢迎和我一起学习前端工程师的AI实战课。
通过前几节课的学习，我们了解了AI和计算机视觉的方向和模型，特别是深度学习中的卷积神经网络和目标检测。目标检测是一个应用方向，而卷积神经网络是实现它的方法之一。
同时，通过学习AI相关的数学知识，我们掌握了AI模型的运行方式和原理。接下来，我们将配置AI模型的基础运行环境。
因为我们是前端工程师，那么JavaScript自然是我们的首选。所以，我们会先进行以JS为基础编程语言的环境配置。
其次，AI的发展是离不开Python的支持的。所以，这节课也会讲解如何基于Python来搭建和配置基础环境。
JavaScript和Python作为动态脚本语言在语言层面上并无差别，但Python的AI生态环境十分强大，里面既有TensorFlow、PyTorch等十分受欢迎的深度学习框架，还包含Numpy等进行大维度数组和矩阵运算的库。而JavaScript运行环境在浏览器和NodeJS中，也拥有TensorFlow的JS和NodeJS版本，但受限于浏览器和NodeJS运行时的运算效率以及GPU的调用能力。
所以Python更加合适进行需要大量计算的离线模型训练，而JavaScript更加适合运行时的模型预测。
JavaScript也能玩转AI
首先是基于JavaScript的AI环境搭建，相对是比较清爽简约的。我们可以基于JavaScript的两个宿主环境来分别搭建浏览器环境和NodeJS环境，并且分别使用现在流行的Tensorflow.js和Brain.js实现一个最小实例。
TensorFlow.js是一个开源的JavaScript库，用于在浏览器和Node.js上训练和运行机器学习模型。它允许开发者直接在前端应用中集成深度学习模型，无需依赖后端。这意味着你可以在网页上实现实时的图像识别、文本理解等AI功能。
Brain.js是一个用JavaScript编写的库，它让开发者能够在浏览器和Node.js环境中轻松地创建和训练神经网络。这意味着你可以用它来实现机器学习功能，比如图像识别或语言理解。它设计得非常简单，即使是没有深度学习背景的开发者也能快速上手。
那么对于浏览器环境，我们可以直接创建一个html文件，并通过 script 标签引入对应的JavaScript文件。引入这两个JS文件链接即可。
// CDN file for tensorflow.js
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script>
// CDN file for bracin.js
<script src="//unpkg.com/brain.js"></script>
同样对于NodeJS我们可以使用一样的代码，新建一个node项目，下载安装需要的brain和tensoflow的包。
// install the brain.js package
npm install --save brain.js
// install the @tensorflow/tfjs-node
npm install --save @tensorflow/tfjs-node
完成安装以后，我想你应该迫不及待把它们给用起来了。我们这就进入实战练习环节。
这里有一个二分类任务实例，将需求文档里面的描述语句进行分类，分为描述前端相关需求，描述后端相关需求，用模型来进行训练和识别。这里需要使用brain.js 以及 LSTM来完成这个实例。
首先我们需要构建训练数据，每一条文本对应一个分类类型，以键值对数据结构来组织训练数据。正如代码中数据所示，input对应输入文本，output则对应该文本的类型。你也可以按照这个格式定义自己想要的数据。
然后通过brain新建一个 LSTM模型实例，设置超参数后就可以进行训练了。使用浏览器打开网页控制台可以看到模型训练过程中的日志输出，以及最后的模型预测输出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./brain.js"></script>
</head>
<body>
<script>
// prepare training data
const data = [
{ "input": "implementing a caching mechanism improves performance", "output": "backend" },
{ "input": "hover effects on buttons", "output": "frontend" },
{ "input": "optimizing SQL queries", "output": "backend" },
{ "input": "using flexbox for layout", "output": "frontend" },
{ "input": "setting up a CI/CD pipeline", "output": "backend" },
{ "input": "SVG animations for interactive graphics", "output": "frontend" },
{ "input": "authentication using OAuth", "output": "backend" },
{ "input": "responsive images for different screen sizes", "output": "frontend" },
{ "input": "creating REST API endpoints", "output": "backend" },
{ "input": "CSS grid for complex layouts", "output": "frontend" },
{ "input": "database normalization for efficiency", "output": "backend" },
{ "input": "custom form validation", "output": "frontend" },
{ "input": "implementing web sockets for real-time communication", "output": "backend" },
{ "input": "parallax scrolling effect", "output": "frontend" },
{ "input": "securely storing user passwords", "output": "backend" },
{ "input": "creating a theme switcher (dark/light mode)", "output": "frontend" },
{ "input": "load balancing for high traffic", "output": "backend" },
{ "input": "accessibility features for disabled users", "output": "frontend" },
{ "input": "scalable architecture for growing user base", "output": "backend" }
];
// Create a recurrent neural network
const network = new brain.recurrent.LSTM();
// Train the network
network.train(data, {
iterations: 2000,
log: true,
logPeriod: 100
});
// Make a prediction
const output = network.run('data access layer is not presentation layer');
console.log(`Category: ${output}`); // backend
</script>
</body>
</html>
这里使用了Brain.js来完成这个实例，我们同样也可以选择tensorflow.js来完成。完整代码我放在了课程专用代码库，有需要可以下载运行。
更加丰富的Python
作为前端工程师，选择以JavaScript为基础编程语言的AI环境是无可厚非的，但Python 至今仍然是进行人工智能（AI）和机器学习（ML）项目的首选语言之一，原因有很多。
首先，Python 的语法简单、直观，使得开发者可以快速理解和编写机器学习算法。
其次，Python 拥有强大的库和框架支持，如 TensorFlow、PyTorch、Keras 等，这些工具大大简化了数据处理、模型构建、训练和预测的过程。
此外，Python 社区活跃，提供了大量的教程、文档和论坛，方便开发者学习和解决遇到的问题。
一些常用的比较出名的深度学习框架和库是我们需要学习了解的，比如Tensorflow、PyTorch和Pandas等。
首先是Tensorflow，它是Google开发实现的用于大规模机器学习的框架，同时也提供JavaScript版本，既可以在Python环境下运行，也可以在JavaScript环境下运行。
其次是PyTorch，是FaceBook开发实现的一个深度学习框架。它十分灵活和易用，特别适合研究和开发，广泛应用于计算机视觉、自然语言处理等领域。基于此，我们后续章节的模型训练环节将会使用Pytorch框架来进行。
梳理完常用框架，我们再来看看一些在深度学习中出现频率比较高的库。首先是NumPy，它是一个用户科学计算的开源python库，支持大规模多维数组和矩阵运算。而且这个库包含了大量的数学函数库来操作这些数组。NumPy是许多其他科学计算和数据分析库（如SciPy、Pandas、TensorFlow等）的基础。
再说说Pandas，它是一个用于数据操作和分析的开源Python库。提供了高性能、易于使用的数据结构和数据分析工具，特别适合处理结构化数据。Pandas的核心数据结构是DataFrame，它类似于电子表格或SQL表格，能够帮你轻松地完成数据清洗、操作和分析任务。
我们这就来配置一个基于Python的深度学习开发环境。在Windows操作系统上进行，因为它在各种框架和平台上有良好的适配性。这里说明一下，我的处理器配置为Inter酷睿处理器，并且配备了Nivida RTX3060_12G显存GPU，对于GPU的型号没有强制要求。
那么首先，YOLOv5我们在前几节课中稍有涉猎，这是一个流行的轻量级目标检测模型，适用于多种计算机视觉任务。
在具有 GPU 支持的 Windows 电脑上配置 YOLOv5 环境的步骤并不复杂，我们这就亲自体验一下。
集成环境Anaconda
Anaconda是一个开源的包管理和环境管理系统，最初由Anaconda公司开发。它可以在Windows、macOS和Linux上运行，支持多种编程语言（如Python、R、Ruby、Lua、Scala、Java、JavaScript、C/C++、FORTRAN等）。Anaconda的主要功能包括包管理、环境管理和依赖管理。这个系统有很多优点，比如环境隔离、依赖管理、跨平台支持，GPU支持等。
我们第一步先要安装conda，我们只需要打开它的官网下载对应操作系统的安装包，然后根据提示安装即可。完成安装后，在命令行执行 conda -V 看到有版本号输出，这就说明安装完成了。
Conda有一系列的命令，这里我列出我们需要用到的几个，更多的可以执行查询。
conda create --name myenv // 新建名为 myenv 环境
conda create --name myenv python=3.8 // 新建指定版本的环境
conda env list // 查看所有的环境
conda activate myenv // 激活名为 myenv 的环境
conda env remove --name myenv // 删除名为 myenv 的环境
conda install package_name // 安装包
conda install package_name=1.2.3 // 安装指定版本的包
conda update package_name // 更新包
conda uninstall package_name // 卸载包
那么，现在我们来使用 conda新建一个具有 pytorch 和 python3.x的环境，执行 conda create -n od_pytorch python=3.9，等待环境初始化完成和依赖包的分析与下载完成。如果看到后面截图这样的提示，就表示顺利完成了安装。
然后，我们通过conda activate od_pytorch 命令，激活新建的隔离环境。
安装 PyTorch
然后我们需要在激活的环境下安装PyTorch，这里我们需要到PyTorch官网上找一下对应版本的PyTorch，找到相应的运行命令，在激活的环境下执行即可。考虑到更加广泛的使用，这里我选择了CPU版本，如果想使用GPU版本，还需要配置CUDA和cuDNN。
在命令行执行过程中需要下载许多依赖包，可能需要一些下载时间。
conda install pytorch torchvision torchaudio cpuonly -c pytorch
安装 YOLOv5
完成PyTorch的配置后，我们还要在GIthub上下载YOLOv5的源代码。
同时还需要在终端运行 conda install requirements.txt 来下载依赖包。请注意依赖包需要放在配置好的环境路径下。
至此，你已经成功在 Windows 上配置了基于 PyTorch 的 YOLOv5 环境，可以开始训练属于你的目标检测模型了。
如何选择合适的运行环境
你可能会奇怪，我们作为前端工程师为什么不直接选择JavaScript，毕竟TensorFlow等优秀的框架，也提供了JS版本的文件。
首先，JavaScript作为极度依赖宿主环境的一门解释性语言，其计算性能无法满足深度学习模型训练的计算效率要求。
我来举个具体的例子。比如说，我们将上面基于Brain.js的文本二分类的任务跑在浏览器中，这时你就会发现，浏览器每完成一次训练的时间都比较长。同时因为训练的代码跑在主线程中，这样会阻碍页的更新渲染，造成肉眼可见的卡顿。
所以，想要使用JavaScript来完成稍大一点的模型训练，就一定要考虑到计算性能。这个话题我们会在加餐部分的第23节课中细讲。
其次，JavaScript在AI深度学习方面的社区环境没有Python完善与活跃，在遇到问题的时候也无法快速地找到有效的答案。
因此，我们在进行模型训练的时候，使用Python完成会更合适，在应用层面再使用JavaScript调用。
总结
我们来做一个总结吧。
基于JavaScript的深度学习环境，我们掌握了两个进行深度学习计算的框架——TensorFlow.js和 Brain.js。基于JS的文件既可以运行在浏览器中，也可以运行在NodeJS中。之后我们还利用Brain.js，在浏览器环境中实现了一个二分类的文本分类实例。
基于Python的深度学习环境更加丰富，不仅有Tensoflow、PyTorch这样优秀的框架，还具有NumPy、Pandas等优秀的科学计算库。这节课里，我们也演示了如何基于Anaconda，搭建PyTorch+YOLOv5的目标检测环境，课后你可以动手试试看。
通过对比可以发现，以Python为基础编程语言的环境，无论是社区生态、计算性能还是框架库的支持都更有优势，因此使用它来完成模型的大规模训练计算更为合适。而对于JavaScript为基础编程语言的环境，则更加适用于运行时环境。
思考题
为什么进行模型训练使用GPU计算效率会比CPU高？
欢迎你在留言区和我交流互动，如果这节课对你有启发，也推荐分享给身边更多朋友。
精选留言
2024-12-03 11:17:39
2025-01-03 17:15:03
2025-01-03 17:13:58
2024-11-14 11:32:50
2024-11-09 20:16:13
-----
是 activate 不是 actovate，打错字啦
2024-11-04 23:29:47
2024-10-23 22:54:55