当前位置：雾码资源 > AI > 论文 > 7分钟了解Tensorflow.js
whitewhite 论文

7分钟了解Tensorflow.js

Get to know TensorFlow.js in 7 minutes 7分钟了解Tensorflow.js

Get to know TensorFlow.js in 7 minutes

And learn how you can run ML/DL models directly in the browser

Photo by Irvan Smith on Unsplash

An increasing number of developers are using TensorFlow in their machine learning projects. In March this year, the TensorFlow team at Google announced the arrival of the much-awaited JavaScript framework, TensorFlow.js (which was previously called DeepLearn.js).

Image Source : Tensorflow.js Website

Now developers can build lightweight models and run them in the browser using JavaScript. Let’s understand what the need was for the development of this framework.

7分钟了解TensorFlow.js

学习怎样在浏览器中直接运行ML/DL模型

越来越多的开发者在他们的机器学习工程中使用TensorFlow。今年3月，Google的TensorFlow团队发布等待多时的JavaScript框架，TensorFlow.js(之前也叫做DeepLearn.js)

现在开发者可以编译轻量级的模型并在浏览器中使用JavaScript运行它，那么就让我们来理解这款框架的开发需要什么。

History

Before going to TensorFlow.js, I would like to start off with TensorFlow.

TensorFlow was developed in 2011 at Google as their propitiatory library for Machine learning/Deep learning applications at Google. This library was open sourced in 2015 under the Apache License.

TensorFlow is built in C++, which enables the code to execute at a very low level. TensorFlow has bindings to different language like Python, R, & Java. This enables TensorFlow to be used in these languages.

So, the obvious question is: what about JavaScript?

Conventionally, in JavaScript, ML/DL was performed by using an API. An API was made using some framework, and the model was deployed at the server. The client sent a request using JavaScript to get results from the server.

Client Server Architecture

In 2017, a project called Deeplearn.js appeared, which aimed to enable ML/DL in JavaScript, without the API hassle.

But there were questions about speed. It was very well known that JavaScript code could not run on GPU. To solve this problem, WebGL was introduced. This is a browser interface to OpenGL. WebGL enabled the execution of JavaScript code on GPU.

In March 2018, the DeepLearn.js team got merged into the TensorFlow Team at Google and was renamed TensorFlow.js.

Watch the below video for further details:

TensorFlow.js

Tensorflow.js provides two things:

  • The CoreAPI, which deals with the low level code

  • LayerAPI is built over the CoreAPI, and makes our lives easier by increasing the level of abstraction.

Getting Started

There are two main ways to get TensorFlow.js in your project:

回顾

在介绍TensorFlow.js之前，我想先从TensorFlow开始。

TensorFlow在2011年开发于Google作为i他们的机器学习/深度学习app的API lib。这个API lib于2015年在Apache协议下开源。

TensorFlow由C++编写，这使得代码能够在底层运行。TensorFlow已同其他语言邦定在一起，如Python，R，Java。从而这些语言也能够作为TensorFlow的调用接口。

那么问题来了：关于JavaScript我们知道些什么呢？

在JavaScript中，ML/DL通过使用API接口来调用。使用这些框架来生成一个API，并在服务器上部署模型。客户端使用JavaScript发送一个请求从服务器中获取回复。

客户端服务器架构

在2017年，一个叫做DeepLearning.js的工程诞生了，旨在没有API的反烦扰下在JavaScript中推动ML/DL的发展。

但是有出现了速度的问题。都知道JS代码不能运行在GPU上。为了解决这个问题，引进WebGL。这是一个OpenGL的浏览器接口。WebGl能够在GPU上执行JS代码。

在2018年3月，DeepLearn.js团队与TensorFlow团队合并，重命名为TensorFlow.js。

更多内容请看下方视频

TensorFlow.js提供两样东西：

CoreAPI，来处理底层代码

在CoreAPI之上编写的LayerAPI，通过增加层级的抽象性使coding更容易。

在你的项目中有两种方法引入TensorFlow.js

1. via <script> Tag

Add the following code to an HTML file:

<html>
  <head>
    <!-- Load TensorFlow.js -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.12.0"> </script>
  </head>
<body>
      Hello
  </body>
</html>

2. via NPM

Add TensorFlow.js to your project using yarn or npm.

yarn add @tensorflow/tfjs
npm install @tensorflow/tfjs

In your main js file:

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

CoreAPI

1. Tensors

So, what is a Tensor ?

  • A scalar is a single number. For example, x = 1

  • A vector is an array of numbers. For example, x=[1,2]

  • A matrix is a 2-D array
    ([[1, 2],
     [3, 4],
     [5, 6]])

  • A tensor is a n-dimensional array with n>2

TensorFlow.js has utility functions for common cases like Scalar, 1D, 2D, 3D and 4D tensors, as well a number of functions to initialize tensors in ways useful for machine learning.

Code Examples

tf.tensor():

// Pass an array of values to create a vector.
tf.tensor([1, 2, 3, 4]).print();

tf.scalar():

tf.scalar(3.14).print();

And so on…

Watch the Below Video to get a deep insight into Tensors in TensorFlow.js:

1. 通过<script>标签 

添加下列代码到一个HTML文件：

<html>
  <head>
    <!-- Load TensorFlow.js -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.12.0"> </script>
  </head>
<body>
      Hello
  </body>
</html>

2. 通过NPM

使用yarn或者NPM把TensorFlow.js添加到你的项目。

yarn add @tensorflow/tfjs
npm install @tensorflow/tfjs

在你的主js文件：

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

核心API

1. 张量（Tensors）

所以，什么是张量?

（图挂了）

  • 标量是单个数。例如，x = 1  

  • 矢量是一组数字。例如,x =[1,2]  

  • 矩阵是一个二维数组  
    ([[1, 2],
     [3, 4],
     [5, 6]])

  • 张量是一个n维数组，n>2

TensorFlow.js具有用于标量、一维、二维、三维和四维张量等常见情况的实用函数，以及一些用于初始化张量的函数，这些函数对机器学习非常有用。  

代码示例

tf.tensor():

// Pass an array of values to create a vector.
tf.tensor([1, 2, 3, 4]).print();

tf.scalar():

tf.scalar(3.14).print();

等等…… 观看下方视频来深入了解TensorFlow.js中的张量:

2. Variables & Operations

Tensors are immutable data structures. That means their values can’t be changed once they are set.

However, tf.variable() is introduced in TensorFlow.js. The real use case for tf.variable() is when we need to change the data frequently, such as when adjusting model weights in Machine Learning.

Code sample:

const x = tf.variable(tf.tensor([1, 2, 3]));
x.assign(tf.tensor([4, 5, 6]));

x.print();

Operations

There are various operations in TensorFlow.js. In order to perform mathematical computation on Tensors, we use operations. Tensors are immutable, so all operations always return new Tensors and never modify input Tensors. So tf.variable() can be used in order to save memory.

Let’s look into some operations:

tf.add() — Adds two tf.Tensors element-wise

const a = tf.tensor1d([1, 2, 3, 4]);
const b = tf.tensor1d([10, 20, 30, 40]);

a.add(b).print();  // or tf.add(a, b)

There are many operations in TensorFlow.js. You can check the documentation for other operations. I will demonstrate one more operation here: tf.matmul()

tf.matmul() — Computes the dot product of two matrices, A * B.

const a = tf.tensor2d([1, 2], [1, 2]);
const b = tf.tensor2d([1, 2, 3, 4], [2, 2]);
a.matMul(b).print();  // or tf.matMul(a, b)

Watch the below video for deep insight into Variable and Operations:

3. Memory Management

Memory management is the key in Machine Learning/Deep Learning tasks, because they are generally computationally expensive.

TensorFlow.js provides two major ways to manage memory:

  1. tf.dispose()

  2. tf.tidy()

They both typically do the same thing, but they do it in different ways.

tf.tidy()

2.变量 & 运算

张量是一种不能被改变的数据结构。这意味着一旦设置好它们的值就无法更改。 但是，TensorFlow.js中引入了tf.variable()。它的真正用例是当我们需要频繁更改数据时，例如在机器学习中调整模型权重时。 代码示例: 

const x = tf.variable(tf.tensor([1, 2, 3]));
x.assign(tf.tensor([4, 5, 6]));

x.print();

运算

在TensorFlow.js中有各种各样的运算。为了对张量进行数学计算，我们使用运算。张量是不可变的，因此所有运算总是会返回新的张量，而从不修改输入的张量。在这我们可以使用tf.variable()来节省内存。 让我们来看看一些运算: tf.add()——按元素添加两个tf张量

const a = tf.tensor1d([1, 2, 3, 4]);
const b = tf.tensor1d([10, 20, 30, 40]);

a.add(b).print();  // or tf.add(a, b)

在TensorFlow.js中还有很多其他运算。你可以查看文档来了解它们。我将在这里演示另一个操作：tf.matmul() tf.matmul() ——计算矩阵A * B的点积。

const a = tf.tensor2d([1, 2], [1, 2]);
const b = tf.tensor2d([1, 2, 3, 4], [2, 2]);

a.matMul(b).print();  // or tf.matMul(a, b)

观看下面的视频来深入了解变量和操作:  

 

3. 内存管理

内存管理是机器学习/深度学习任务的关键，因为它们通常需要消耗大量计算资源。 TensorFlow.js提供了两种主要的内存管理方法:

  1. tf.dispose()
  2. tf.tidy()

它们用不同的方式做着差不多同样的事情。

tf.tidy()

This executes the provided function fn and after it is executed, cleans up all intermediate tensors allocated by fn except those returned by fn.

tf.tidy() helps avoid memory leaks. In general, it wraps calls to operations in tf.tidy() for automatic memory cleanup.

Code example:

const y = tf.tidy(() => {
   // aa, b, and two will be cleaned up when the tidy ends.
   const two= tf.scalar(2);
   const aa = tf.scalar(2);
   const b = aa.square();

   console.log('numTensors (in tidy): ' + tf.memory().numTensors);

   // The value returned inside the tidy function will return
   // through the tidy, in this case to the variable y.
   return b.add(two);
});

console.log('numTensors (outside tidy): ' + tf.memory().numTensors);
y.print();

tf.dispose()

Disposes any tf.Tensors found within the mentioned object.

Code example:

const two= tf.scalar(2);
two.dispose()

LayersAPI

Layers are the primary building block for constructing a ML/DL Model. Each layer will typically perform some computation to transform its input to its output. Under the hood, every layer uses the CoreAPI of Tensorflow.js.

Layers will automatically take care of creating and initializing the various internal variables/weights they need to function. So, basically it makes life easier by increasing the level of abstraction.

We will make a simple example feed forward network using the LayerAPI. The Feed Forward network we will build is as below:

Image is my own

Code:

它执行所提供的函数fn，在执行函数fn之后，清除fn分配的所有中间张量(fn返回的张量除外)。  

tf.tidy() 有助于避免内存泄漏。通常， tf.tidy()  中包装了对运算的调用，以实现自动内存清理。 

代码示例：

const y = tf.tidy(() => {
   // aa, b, and two will be cleaned up when the tidy ends.
   const two= tf.scalar(2);
   const aa = tf.scalar(2);
   const b = aa.square();

   console.log('numTensors (in tidy): ' + tf.memory().numTensors);

   // The value returned inside the tidy function will return
   // through the tidy, in this case to the variable y.
   return b.add(two);
});

console.log('numTensors (outside tidy): ' + tf.memory().numTensors);
y.print();

tf.dispose()

处理在对象中找到的任何tf.Tensors张量。

代码示例:

const two= tf.scalar(2);
two.dispose()

LayersAPI

层是构建ML/DL模型时的主要成分。每个层通常会执行一些计算，将输入转换为输出。每一层都使用Tensorflow.js的CoreAPI。 层将自动创建和初始化它们需要的各种内部变量/权重。因此它基本上通过增加抽象级别来使生活变得更容易。

我们将使用LayerAPI制作一个简单的前馈网络示例。我们将构建的前馈网络如下：

图是我自己的

代码:

Index.html

<html>
<head>
<title></title>
<script src=”"> </script>
<script src=”main.js” type=”text/javascript”></script>
</head>
<body>
Tensorflow JS Demo
</body>
</html>

main.js

const model = tf.sequential();
//config for layer
const config_hidden = {
  inputShape:[3],
  activation:'sigmoid',
  units:4
}
const config_output={
  units:2,
  activation:'sigmoid'
}
//defining the hidden and output layer
const hidden = tf.layers.dense(config_hidden);
const output = tf.layers.dense(config_output);
//adding layers to model
model.add(hidden);
model.add(output);
//define an optimizer
const optimize=tf.train.sgd(0.1);
//config for model
const config={
optimizer:optimize,
loss:'meanSquaredError'
}
//compiling the model
model.compile(config);
console.log('Model Successfully Compiled');
//Dummy training data
const x_train = tf.tensor([
  [0.1,0.5,0.1],
  [0.9,0.3,0.4],
  [0.4,0.5,0.5],
  [0.7,0.1,0.9]
])
//Dummy training labels
const y_train = tf.tensor([
  [0.2,0.8],
  [0.9,0.10],
  [0.4,0.6],
  [0.5,0.5]
])
//Dummy testing data
const x_test = tf.tensor([
  [0.9,0.1,0.5]
])
train_data().then(function(){
  console.log('Training is Complete');
  console.log('Predictions :');
  model.predict(x_test).print();
})
async function train_data(){
  for(let i=0;i<10;i++){
  const res = await model.fit(x_train,y_train,epoch=1000,batch_size=10);
   console.log(res.history.loss[0]);
  }
}

Output:

Watch the below videos for deep insight and code explanation:

I understand that this is a small overview on the Tensorflow.js Library. I feel this can be a starting point before you read the documentation and go through some real world applications.

I will be posting real world examples using TensorFlow.js as below:

More Real world examples coming soon…Stay Tuned…

My take on this

This is excellent for coders who are familiar with JavaScript and are trying to find their way in the ML/DL world!

It makes things a lot simpler for people coming from a non-ML/DL background, but who are looking to understand this field. The use cases for this are many, and I personally think it’s something we need at the moment.

In my next article and video, I will talk about ML5 which is built over TensorFlow.js. ML5 is built at New York University and is under active development.

What do you think about TensorFlow.js? Let me know in the comments section below. If you like this article, you would also like my Videos on Youtube.

Index.html

<html>
<head>
<title></title>
<script src=”"> </script>
<script src=”main.js” type=”text/javascript”></script>
</head>
<body>
Tensorflow JS Demo
</body>
</html>

main.js

const model = tf.sequential();
//config for layer
const config_hidden = {
  inputShape:[3],
  activation:'sigmoid',
  units:4
}
const config_output={
  units:2,
  activation:'sigmoid'
}
//defining the hidden and output layer
const hidden = tf.layers.dense(config_hidden);
const output = tf.layers.dense(config_output);
//adding layers to model
model.add(hidden);
model.add(output);
//define an optimizer
const optimize=tf.train.sgd(0.1);
//config for model
const config={
optimizer:optimize,
loss:'meanSquaredError'
}
//compiling the model
model.compile(config);
console.log('Model Successfully Compiled');
//Dummy training data
const x_train = tf.tensor([
  [0.1,0.5,0.1],
  [0.9,0.3,0.4],
  [0.4,0.5,0.5],
  [0.7,0.1,0.9]
])
//Dummy training labels
const y_train = tf.tensor([
  [0.2,0.8],
  [0.9,0.10],
  [0.4,0.6],
  [0.5,0.5]
])
//Dummy testing data
const x_test = tf.tensor([
  [0.9,0.1,0.5]
])
train_data().then(function(){
  console.log('Training is Complete');
  console.log('Predictions :');
  model.predict(x_test).print();
})
async function train_data(){
  for(let i=0;i<10;i++){
  const res = await model.fit(x_train,y_train,epoch=1000,batch_size=10);
   console.log(res.history.loss[0]);
  }
}

Output:

看下面的视频来加深理解和理解代码：

我理解这是一个简短的概述关于Tensorflow.js Library（知识库）。我觉得这可以作为你阅读文献和应用实例的一个起点。

我将会以如下的形式使用TensorFlow.js发布实例：

More Real world examples coming soon…Stay Tuned…

更多的实例即将出现...持续调整...

我所呈现的内容

对于那些熟悉JavaScript并试图在ML/DL世界中一展拳脚的程序员来说这是极好的！
它帮助那些没有ML/DL背景却试图进入这一领域的人把事情变的更简单了。这样的例子很多，我个人认为这正是当前我们所需要的。

在我接下来的文章和视频中，我将会介绍基于TensorFlow.js构建的ML5 。 ML5 是在纽约大学开发的并还在积极开发中。
你对TensorFlow.js有什么想法呢？请在下方留言评论。如果你喜欢这篇文章，你也会喜欢我在Youtube上的视频。
1. 本站提供资源以极具性价比的价格出售，我们的定价远低于市场常见价格。无论是单独购买还是购买永久会员以下载全站资源，我们不提供任何相关技术服务。
2. 若遇到资源下载链接失效，请及时通过联系站长QQ以获取补发。
3. 所有本站资源仅供学习和研究目的使用。用户必须在24小时内删除所下载的资源，并严禁将其用于任何商业活动。对于因违反此规定引发的任何法律问题及连带责任，本站及发布者不承担任何责任。除非特别注明为原创，本站资源大多来源于网络，版权归原作者所有。若有侵权，请联系我们以便进行删除处理。
4. 本站提供的所有下载资源（包括软件等），我们保证未进行任何负面修改（不包括为改善功能或修复bug等正向优化或二次开发）。然而，我们无法保证资源的准确性、安全性和完整性。用户下载后应自行判断。本站旨在促进学习交流，并不保证所有源码完全无误或无bug。用户应明白，除非特别注明，【雾码资源】对提供下载的软件等不持有任何权利，其版权属于相应合法拥有者。
5. 请您仔细阅读以上内容，购买即表示您同意以上所有条款。
雾码资源 » 7分钟了解Tensorflow.js
头像

white 码农

分享到：

相关推荐

提供最优质的资源集合

立即查看 了解详情