对于前端开发者理解机器学习来说是一件很有挑战性的事情。很久没研究机器学习了，在这方面算是新手。在本文中，我将尝试用自己的理解来解释一些概念。但是，在使用现有的AI模型时，我们不需要深入的机器学习知识。我们可以使用一些现有的工具，如Keras、TensorFlow或TensorFlow.js。在这里，我们将了解如何创建AI模型并在TensorFlow.js中使用一些复杂模型。不需要很深的知识，但让我解释一些基本概念。什么是模型？或者一个更好的问题：什么是现实？是的，这很难回答，我们必须简化问题才能理解。表示现实的部分简化版本的一种方法是使用模型。所以，你可以想出无限多的模型，比如世界地图、图表等。模型在没有机器参与的情况下更容易让我们理解。例如，如果我们要创建一个模型来表示巴塞罗那房价随着房间数量的变化而变化。首先，我们需要收集一些数据：NumberofroomsPrices3131.0003125.0004235.0004265.0005535.000然后，我们将使用一个二维图表来显示这两个数据，每个坐标轴对应一个参数。然后……Duang！我们现在可以画一条线，预测6个房间以上的房子的价格。这个模型叫做线性回归，它是机器学习中最简单的模型之一。当然，这个模型还不够好：只有5个样本，结果不够可靠。参数只有两个，但其实影响房子价格的因素更多，比如地段，房子的楼龄等等。对于第一个问题，我们可以增加样本数来解决，比如增加100万条数据。对于第二个问题，我们可以添加更多的轴。我们可以在2D图形上画直线，也可以在3D坐标轴上画平面。但是如何处理超过3D，比如4D甚至1000000D？我们的大脑无法想象多维度的图形，但好消息是我们可以用数学和计算超平面来处理这个问题，而神经网络是一个很好的工具。顺便说一句，您无需成为数学专家即可使用TensorFlow.js。什么是神经网络？在了解神经网络之前，让我们先了解一下什么是神经网络。现实世界中的神经看起来像这样：神经最重要的部分包括：树突：输入数据的地方。轴突：输出端。突触：神经通讯的结构。它负责将电信号从神经轴突末端传输到附近神经的树突。这些突触结构是学习的关键，因为它们在使用过程中会增加和减少电信号的活动。机器学习中的神经网络是（简化）：Input：输入参数。权重：像突触一样，它们通过增加或减少来调整神经活动，以实现更好的线性回归。线性函数（Linearfunction）：每条神经就像一个线性回归函数。到目前为止，线性回归函数只需要一根神经。激活函数：我们可以提供一些激活函数来从一个标量（Scalar）变成另一个非线性函数。例如：sigmoid、RELU、tanh。输出（Output）：激活函数计算后的输出结果。激活函数的使用非常有用，它是神经网络的精髓。没有激活函数，神经网络就不可能是智能的。原因是，即使网络中可能有很多神经元，神经网络的输出始终是线性回归。我们需要某种机制将这种独立的线性回归变为非线性，以解决非线性问题。由于这些激活函数，我们可以将这些线性函数转换为非线性函数：训练模型在上面的2D线性回归示例中，在图中画一条线足以让我们开始预测新数据。但是，“深度学习”的概念就是让我们的神经网络学会画这条线。要画一条简单的线，我们只需要一个非常简单的神经网络，包括一个神经元，但其他模型会做更复杂的事情，比如对两组数据进行分类。在这种情况下，“训练”将学习如何绘制下面的图像：它并不太复杂，因为它只是二维的。每个模型都是一个世界，所有这些模型都是用相似的概念训练的。首先是随机画一条线，然后在循环算法中改进它，在每个循环中修正错误。这种优化算法也称为梯度下降法（GradientDescent），还有更复杂的算法如SGD和ADAM，概念类似。要理解梯度下降，我们需要知道每种算法（线性回归、逻辑回归等）都有不同的成本函数来衡量这些误差。成本函数总是会收敛到某个点，它可能是凸的也可能是非凸的。最佳收敛点会在0%error处找到，我们的目标就是达到这个点。但是当我们使用梯度下降算法时，我们从一个随机点开始，但我们不知道它在哪里。想象一下，你在一座山上，完全失明，然后你需要一步步下山才能到达最高点。如果地形复杂（如非凸函数），下降过程会更复杂。什么是梯度下降算法我就不深入解释了。你只需要记住它是一种优化算法，用于训练AI模型以最小化预测误差。该算法需要时间和GPU来计算矩阵乘法。收敛点通常在第一轮执行时很难到达，所以我们需要调整一些超参数，比如学习率（learningrate），或者加入一些正则化（regularization）。经过多次梯度下降，我们到达了非常接近收敛点的地方，错误率也接近于0%。至此，我们的模型创建成功，我们可以开始进行预测了。使用TensorFlow.js训练模型TensorFlow.js为我们提供了一种创建神经网络的简单方法。首先，我们将首先创建一个LinearModel类并添加trainModel方法。对于这种类型的模型，我将使用顺序模型（sequentialmodel）。顺序模型是指某一层的输出是下一层的输入。例如，当模型的拓扑结构是一个简单的栈时，它不包含分支和跳跃。.在trainModel方法中，我们将定义层（只需要使用一个层，这足以解决线性回归问题）：import*astfrom'@tensorflow/tfjs';/***Linearmodelclass*/exportdefaultclassLinearModel{/***Trainmodel*/asynctrainModel(xs,ys){constlayers=tf.layers.dense({units:1,//DimensionalityoftheoutputspaceinputShape:[1],//Onlyoneparam});constlossAndOptimizer={loss:'meanSquaredError',optimizer:'sgd',//随机梯度下降};this.linearModel=tf.sequential();this.linearModel.add(layers);//Addthelayerthis.linearModel.compile(lossAndOptimizer);//开始模型训练！awaitthis.linearModel.fit(tf.tensor1d(xs),tf.tensor1d(ys),);}...more}这个类的使用方法：constmodel=newLinearModel();//xsandys->arrayofnumbers(x-axisandy-axis)awaitmodel.trainModel(xs,是);训练完成后，我们就可以开始进行预测了！使用TensorFlow.js进行预测预测部分通常更容易。与训练需要定义一些超参数的模型相比，进行预测是微不足道的。我们将在LinearRegressor类中添加此方法：import*astffrom'@tensorflow/tfjs';exportdefaultclassLinearModel{...trainingCodepredict(value){returnArray.from(this.linearModel.predict(tf.tensor2d([value],[1,1])).dataSync())}}现在，我们使用预测方法constprediction=model.predict(500);//Predictforthenumber500console.log(prediction)//=>420.423你可以运行这个在线代码：https://stackblitz.com/edit/linearmodel-tensorflowjs-react在TensorFlow.js中使用经过训练的模型学习如何创建模型是最难的部分，规范化训练数据，正确选择所有超参数等等。如果您是新手并且想尝试一些模型，您可以使用经过训练的模型。TensorFlow.js中可以使用的模型有很多，您可以使用TensorFlow或Keras创建模型，然后将它们导入到TensorFlow.js中。比如你可以使用posenet模型（实时人体姿态模拟）做一些有趣的事情：代码在：https://github.com/aralroca/posenet-d3使用起来非常简单：import*asposenetfrom'@tensorflow-models/posenet';//ConstantsconstimageScaleFactor=0.5;constoutputStride=16;constflipHorizo??ntal=true;constweight=0.5;//加载模型constnet=awaitposenet.load(weight);//Dopredictionsconstposes=awaitnet.estimateSinglePose(imageElement,StrimageScaleFactorputor,flip)姿势变量在这个JSON文件中：{"score":0.32371445304906,"keypoints":[{"position":{"y":76.291801452637,"x":253.36747741699},"part":"nose""score":0.99539834260941},{"position":{"y":71.10383605957,"x":253.54365539551},"part":"leftEye","score":0.98781454563141},//...Andfor:rightEye,leftEar,rightEar,leftShoulder,rightShoulder//leftElbow,rightElbow,leftWrist,rightWrist,leftHip,rightHip,//leftKnee,rightKnee,leftAnkle,rightAnkle]}想象一下您可以用这个模型做多少有趣的事情！上面的示例代码位于：https://github.com/aralroca/fishFollow-posenet-tfjs从Keras导入模型我们可以从外部导入模型到TensorFlow.js。在下面的例子中，我们将使用一个Keras模型来进行数字识别（文件格式为h5）为了达到目的，我们需要用到tfjs_converter。pipinstalltensorflowjs然后，使用转换工具：tensorflowjs_converter--input_formatkeraskeras/cnn.h5src/assets现在，你可以将模型导入到JS代码中。//Loadmodelconstmodel=awaittf.loadModel('./assets/model.json');//准备imageletimg=tf.fromPixels(imageData,1);img=img.reshape([1,28,28,1]);img=tf.cast(img,'float32');//Predictconstoutput=model.predict(img);只需几行代码，您就可以使用Keras中的数字识别模型。当然，我们还可以添加一些更有趣的逻辑，比如添加画布绘制数字，然后抓图识别数字。代码：https://github.com/aralroca/MNIST_React_TensorFlowJS为什么要在浏览器中运行AI？如果硬件不可用，在浏览器上训练模型的效率可能会非常低。TensorFlow.js利用WebGL接口来加速训练，但即便如此，它也比TensorFlowPython版本慢1.5-2倍。然而，在TensorFlow.js出现之前，我们基本上不可能在没有API交互的情况下在浏览器中使用机器学习模型。现在我们可以在我们的应用程序中离线训练和使用模型。而且，无需与服务器交互，预测速度更快。另一个好处是在浏览器中执行这些计算可以减少服务器开销并节省成本。结论模型是我们用来表示可用于进行预测的现实的一部分的简化。创建模型的一个好方法是使用神经网络。创建神经网络的一种易于使用的方法是TensorFlow.js。
