天天看点

Tensorflow.js机器学习示例一、什么是TensorFlow.js二、添加TensorFlow.js三、TensorFlow.js机器学习示例

来源于https://cloud.tencent.com/developer/article/1346798,本文在win10系统的node.js环境下进行了测试。

对于第一次接触Tensorflow.js的纯新手,本文将介绍:

  • 什么是TensorFlow.js
  • 如何将TensorFlow.js添加到浏览器或node.js中
  • 如何在浏览器或node.js中,使用TensorFlow.js添加机器学习功能

一、什么是TensorFlow.js

TensorFlow.js 是一个 JavaScript 库,用于在浏览器和 Node.js 训练和部署机器学习模型。

Tensorflow.js机器学习示例一、什么是TensorFlow.js二、添加TensorFlow.js三、TensorFlow.js机器学习示例

二、添加TensorFlow.js

1.设置项目

第一步,设置项目。创建一个新的空目录:

mkdir tfjs1
           

切换到新创建的项目文件夹:

cd ./tfjs1
           

在文件夹中,我们现在准备创建一个package.json文件,以便我们能够通过使用Node.js包管理器来管理依赖项:

npm init -y
           

因为我们将在项目文件夹中本地安装依赖项(例如Tensorflow.js库),所以我们需要为Web应用程序使用模块捆绑器(bundler)。为了尽可能简单,我们将使用Parcel Web应用程序捆绑器,因为Parcel不需要进行配置。让我们通过在项目目录中执行以下命令来安装Parcel捆绑器:

npm install -g parcel-bundler
           

接下来,让我们为我们的实现创建两个新的空文件:

type nul >index.html
type nul >index.js
           

最后让我们将Bootstrap库添加为依赖项,因为我们将为我们的用户界面元素使用一些Bootstrap CSS类,安装Bootstrap时提示安装jquery和popper.js,所以先安装这两个库:

npm install jquery
npm install popper.js
npm install bootstrap
           

2.添加TensorFlow.js

为了Tensorflow.js添加到项目中,我们再次使用NPM并在项目目录中执行以下命令:

npm install @tensorflow/tfjs
           

这将下载并将其安装到node_modules文件夹中。成功执行此命令后,我们现在可以通过在文件顶部添加以下import语句来导入index.js中的Tensorflow.js库:

import * as tf from '@tensorflow/tfjs';
           

当我们将TensorFlow.js导入为tf后,我们现在可以通过在代码中使用tf对象来访问TensorFlow.js API 。

三、TensorFlow.js机器学习示例

1.定义模型

现在TensorFlow.js已经可用,让我们从一个简单的机器学习练习开始。下面的示例应用程序涵盖的机器学习脚本是公式Y = 2X-1,这是个线性回归。

此函数返回给定X对应的Y值。如果绘制点(X,Y),你将得到一条直线,如下所示:

Tensorflow.js机器学习示例一、什么是TensorFlow.js二、添加TensorFlow.js三、TensorFlow.js机器学习示例

我们想要在下面实现的机器学习练习将使用来自该函数的输入数据(X,Y)并使用这些数字对训练模型。模型不会知道函数本身,我们将使用训练号模型根据X值输入预测Y值。期望从模型返回的Y结果接近函数返回的精确值。

让我们创建一个非常简单的神经网络来实现。此模型只需处理一个输入值和一个输出值:

// Define a machine learning model for linear regression
const model = tf.sequential();
model.add(tf.layers.dense({units: 1, inputShape: [1]}));
           

首先,我们通过调用tf.sequential方法创建一个新的模型实例。我们得到一个新的序列模型。它是一种,其中一层的输出是下一层的输入,即模型拓扑是层的简单“堆叠”,没有分支或跳过。

创建好模型后,我们准备通过调用model.add来添加第一层。通过调用tf.layers.dense将新层传递给add方法。这会创建一个稠密层。在稠密层中,层中的每个节点都连接到前一层中的每个节点。对于我们的示例,只需向神经网络添加一个具有一个输入和输出形状的密集层就足够了。

在下一步中,我们需要为模型指定损失函数和优化函数。

// Specify loss and optimizer for model
model.compile({loss: 'meanSquaredError', optimizer: 'sgd'});
           

这通过将配置对象传递给模型实例的编译方法调用来完成。配置对象包含两个属性:

  • loss:这里我们使用meanSquaredError损失函数。通常,损失函数用于将一个或多个变量的值映射到表示与该值相关联的一些“损失”的实数上。如果训练模型,它会尝试最小化损失函数的结果。估计量的均方误差是误差平方的平均值 - 即估计值与估计值之间的平均平方差。
  • optimizer:要使用的优化器函数。我们的线性回归机器学习任务使用的是sgd函数。Sgd代表Stochastic Gradient Descent,它是一个适用于线性回归任务的优化器函数。

现在该模型已配置,下一个要执行的任务是使用值训练模型。

2.训练模型

为了用函数Y=2X-1的值训练模型,我们定义了两个形状为6,1的张量。第一张量xs包含x值,第二张量ys包含相应的y值:

// Prepare training data
const xs = tf.tensor2d([-1, 0, 1, 2, 3, 4], [6, 1]);
const ys = tf.tensor2d([-3, -1, 1, 3, 5, 7], [6, 1])
           

现在让我们通过将两个张量传递给调用的model.fit方法来训练模型。

对于第三个参数,我们传递一个对象,该对象包含一个名为epochs的属性,该属性设置为值500。此处指定的数字是指定TensorFlow.js通过训练集的次数。

fit方法的结果是一个Promise,所以我们注册一个回调函数,该函数在训练结束时被激活。

3.预测

现在让我们在这个回调函数中执行最后一步,并根据给定的x值预测y值:

// Train the model
model.fit(xs, ys, {epochs: 500}).then(() => {
    // Use model to predict values
    model.predict(tf.tensor2d([5], [1,1])).print();
});
           

使用model.predict方法完成预测。该方法以张量的形式接收输入值作为参数。在这个特定情况下,我们在内部创建一个只有一个值(5)的张量并将其传递给预测。通过调用print函数,我们确保将结果值打印到控制台。

4.优化用户界面

已上面经实现的示例是使用固定输入值进行预测(5)并将结果输出到浏览器控制台。让我们引入一个更复杂的用户界面,让用户能够输入用于预测的值。在index.html中添加以下代码:

<html >
<body>
<div class="container" style="padding-top: 20px">
    <div class="card">
        <div class="card-header">
            <strong>TensorFlow.js Demo - Linear Regression</strong>
        </div>
        <div class="card-body">
            <label>Input Value:</label> <input type="text" id="inputValue" class="form-control"><br>
            <button type="button" class="btn btn-primary" id="predictButton" disabled>Model is being trained, please wait ...</button><br><br>
            <h4><span>Result: </span></h4>
            <h5><span class="badge badge-secondary" id="output"></span></h5>
        </div>
    </div>
</div>

<script src="./index.js"></script>
</body>
</html>
           

这里我们使用各种Bootstrap CSS类,向页面添加输入和按钮元素,并定义用于输出结果的区域。

我们还需要在index.js中做一些更改:

import * as tf from '@tensorflow/tfjs';
import 'bootstrap/dist/css/bootstrap.css';

// Define a machine learning model for linear regression
const model = tf.sequential();
model.add(tf.layers.dense({units: 1, inputShape: [1]}));

// Specify loss and optimizer for model
model.compile({loss: 'meanSquaredError', optimizer: 'sgd'});

// Prepare training data
const xs = tf.tensor2d([-1, 0, 1, 2, 3, 4], [6, 1]);
const ys = tf.tensor2d([-3, -1, 1, 3, 5, 7], [6,1]);

// Train the model and set predict button to active
model.fit(xs, ys, {epochs: 500}).then(() => {
    // Use model to predict values
    document.getElementById('predictButton').disabled = false;
    document.getElementById('predictButton').innerText = "Predict";
});

// Register click event handler for predict button
document.getElementById('predictButton').addEventListener('click', (el, ev) => {
    let val = parseInt( document.getElementById('inputValue').value);
    document.getElementById('output').innerText = String(model.predict(tf.tensor2d([val], [1,1])));
});
           

注册了预测按钮的click事件的事件处理程序。在此函数内部,读取input元素的值并调用model.predict方法。此方法返回的结果将插入具有id输出的元素中。

通过使用

parcel

命令启动构建程序和开发的Web服务:

parcel index.html
           

你现在应该可以在浏览器中通过URL http://localhost:1234打开网站。

现在的结果应该如下所示:

Tensorflow.js机器学习示例一、什么是TensorFlow.js二、添加TensorFlow.js三、TensorFlow.js机器学习示例

用户现在能够输入值(x),然后预测Y值。单击“ Predict ”按钮完成预测,结果会直接显示在网站上。如图:

Tensorflow.js机器学习示例一、什么是TensorFlow.js二、添加TensorFlow.js三、TensorFlow.js机器学习示例

如上所述,了解了Tensorflow.js的基础知识,通过使用该库,我们实现了基于线性回归的第一个简单的机器学习示例,对主要的Tensorflow.js构建块有基本的了解。

继续阅读