导航菜单
首页 » 口贷网 » 正文

我的世界中文版-在浏览器中运用TensorFlow.js和Python构建机器学习模型

作者:MOHD SANAD ZAKI RIZVI

翻译:吴金笛

校正:丁楠雅

本文约5500字,主张阅览15分钟。

本文首要介绍了TensorFlow.js的重要性及其组件,并介绍运用其在阅读器中构建机器学习模型的办法。然后,构建运用核算机的网络摄像头检测身体姿势的运用程序。


概述

  • TensorFlow.js (deeplearn.js)使咱们能够在阅读器中构建机器学习和深度学习模型,而无需任何杂乱的装置过程。
  • TensorFlow.js的两个组件——Core API和Layer API。
  • 了解怎么构建一个很棒的运用Tensorflow.js对网络摄像头中的图画进行分类的模型。


介绍

你最喜爱用什么东西来编写机器学习模型?数据科学家们对这个永久的问题会给出各种不同的答案。一些人喜爱RStudio,另一些人更喜爱Jupyter Notebooks。我肯定归于后者。

所以,当我榜首次遇到TensorFlow.js(曾经是deeplearn.js)时,我的心都要炸开了。在阅读器中构建机器学习模型?运用JavaScript?听起来好得令人难以置信!

超越43亿人运用网络阅读器——约占国际人口的55%。——维基百科(2019年3月)

谷歌的TensorFlow.js不只将机器学习引进阅读器中,使机器学习大众化,而且关于常常运用JavaScript的开发人员来说,它也是一个完美的机器学习门户。



咱们的网络阅读器是最简略拜访的渠道之一。这便是为什么构建不只能够练习机器学习模型而且能够在阅读器自身中“学习”或“搬迁学习”的运用程序是有意义的。

在本文中,咱们将首要了解运用TensorFlow.js的重要性及其它的不同组件。然后,咱们将深化评论运用TensorFlow.js在阅读器中构建咱们自己的机器学习模型。然后咱们将构建一个运用程序,来运用核算机的网络摄像头检测你的身体姿势!

假如你是TensorFlow的新手,你能够鄙人面文章中了解更多:

  • TensorFlow 101: Understanding Tensors and Graphs to get you Started with Deep Learning
  • Introduction to Implementing Neural Networks using TensorFlow


目录

一、为什么你应该运用TensorFlow.js?

1.1 运用网络摄像头在阅读器中进行图画分类

1.2 TensorFlow.js的特征

二、了解阅读器中的机器学习

2.1 Core API:运用Tensors作业

2.2 Layer API:像Keras相同构建模型

三、运用谷歌的预练习模型:PoseNet


一、为什么要运用TensorFlow.js?

我将用一种共同的办法来答复这个问题。我不会深化研讨TensorFlow.js的理论方面,也不会列出它为什么是一个如此难以想象的东西。

相反,我将简略地向你展现假如不运用TensorFlow.js将会错失什么。那么,让咱们在5分钟内构建一个运用程序,来运用你的网络摄像头对图画进行分类。没错——咱们将直接进入代码部分!

这是最好的部分——你不需求装置任何东西来做这个!只需一个文本编辑器和一个网络阅读器即可。下面的动图展现了咱们行将构建的运用程序:


这多酷啊!我在阅读器里几分钟就完结了。那么,让咱们看一下过程和代码,以协助你在Web阅读器中构建自己的图画分类模型。

1.1 运用网络摄像头在阅读器中构建图画分类模型

翻开你挑选的文本编辑器并创立一个文件index.html。将以下代码保存于此文件内:






















接下来,创立另一个文件index.js并在其间编写以下代码:

 let mobilenet; 
let video;
let label = '';

// when model is ready make predictions
function modelReady() {
console.log('Model is ready!!!');
mobilenet.predict(gotResults);
}

function gotResults(error, results) {
if (error) {
console.error(error);
} else {
label = results[0].className;
// loop the inference by calling itself
mobilenet.predict(gotResults);
}
}

// setup function
function setup() {
createCanvas(640, 550);
// ml5 to create video capture
video = createCapture(VIDEO);
video.hide();
background(0);
// load the MobileNet and apply it on video feed
mobilenet = ml5.imageClassifier('MobileNet', video, modelReady);
}

function draw() {
background(0);
// show video
image(video, 0, 0);
fill(255);
textSize(32);
// show prediction label
text(label, 10, height - 20);
}

保存这两个文件,然后在谷歌Chrome或Mozilla Firefox等阅读器中翻开index.html文件。便是这样!你现在现已创立了一个能够运用你的网络摄像头在阅读器自身实时分类图画的运用程序!下面是它在我的核算机上的姿势:

视频衔接:

https://s3-ap-south-1.amazonaws.com/av-blog-media/wp-content/uploads/2019/05/mobilenet_demo.mp4?_=1

在这个比方中需求留意的要害:

  • 在上面的比方中,咱们运用了一个预先练习的图画分类模型MobileNet(https://ai.googleblog.com/2017/06/mobilenets-open-source-models-for.html)
  • 咱们运用ml5.js(https://ml5js.org/)一个构建在TensorFlow之上的库。它将MobileNet模型加载到阅读器中,并对视频概要履行推理。
  • 咱们还运用P5.js(https://p5js.org/)库来处理视频输入并在视频自身上显现标签。

我不需求在电脑上装置任何东西。这个比方应该适用于任何现代体系,不论它是Linux、Windows仍是MacOS——这便是运用JavaScript在web上构建模型的强壮功用。

现在,让咱们看看TensorFlow.js供给的强壮功用,以及怎么运用它们在阅读器中布置机器学习模型。

1.2 TensorFlow.js的特征

TensorFlow.js是一个库,用于JavaScript开发和练习ML模型,并在阅读器或Node.js上布置。

TensorFlow.js供给了许多的功用来供咱们运用。

它是TensorFlow在JavaScript中的扩展,JavaScript是咱们在互联网上运用的简直一切网站、阅读器或运用程序逻辑背面的编程言语。JavaScript和Python相同用处广泛,所以运用它来开发机器学习模型给咱们带来了许多长处:

  • 假如ML模型是用web言语编写的,则更简略布置。
  • 由于一切干流阅读器都支撑JavaScript,所以你能够无处不在地运用它,而不用忧虑渠道类型或其他兼容性问题。关于你的用户也是如此。
  • TensorFlow.js是一个客户端库,这意味着它能够在用户的阅读器中练习或运转ML模型。这减轻了与数据隐私有关的任何忧虑。
  • 在你的客户端上运转实时揣度可使你的运用程序更具交互性,由于它们能够当即响运用户输入(例如咱们前面构建的webcam运用程序)。



TensorFlow.js以其当时的方式供给了以下主要功用:

  • 阅读器中的机器学习:你能够运用TensorFlow.js在阅读器中创立和练习ML模型。
  • 谷歌的预练习模型:TensorFlow.js装备了一套由谷歌预练习的模型,用于方针检测、图画切割、语音辨认、文本毒性分类等使命。
  • 搬迁学习:你能够经过对现已练习过的模型的部分进行再练习来履行搬运学习,比方TensorFlow.js中的MobileNet。
  • 布置python模型:运用Keras或TensorFlow练习的模型能够很简略地导入阅读器/运用TensorFlow.js的布置。

在本文中,咱们将重视前两个功用。在本系列的第二部分(行将推出!)中,咱们将评论怎么在Python中搬运学习和布置咱们的模型。


二、阅读器中的机器学习

TensorFlow.js供给了两种办法来练习模型(十分类似于TensorFlow):

  • 榜首种办法是运用Core API运用初级张量操作来界说模型。
  • 第二种办法是运用Layers API界说模型,类似于Ker我的世界中文版-在浏览器中运用TensorFlow.js和Python构建机器学习模型as。

让咱们经过几个比方来了解这两种办法。究竟,学习一个概念最好的办法便是把它付诸实践!

首要,设置你的HTML文件:

在你的电脑上树立一个新的index.html文件,并在其间编写以下代码:










Tensorflow.js Core API






咱们创立了一个底子的HTML页面,并从云URL中加载了Tensorflow.js(第7行)。

关于装置TensorFlow.js(deeplearn.js)的阐明:

由于TensorFlow.js是为阅读器而规划的,所以装置和运用TensorFlow.js最简略的办法便是底子不装置它。你能够简略地从HTML中的URL加载它即可。

假如你想在本地作业怎么办呢?实际上,你能够在Jupyter Notebook中运用TensorFlow.js,就像你在Python或R中一般做的那样。这是一个合适每个人的解决方案!

这种本地办法略微长一些,而且需求一些时刻,所以本文不会运用它。假如你的确想学习怎么操作,能够从为Jupyter装置ijavascript内核开端。下面是我的Jupyter Notebook的截图:



现在,运用TensorFlow.js的引荐办法是运用库的官方URL直接加载它。你只需将以下行增加到HTML文件中:


完结了!这真的很简略。

2.1 Core API:运用Tensors作业

Core API与TensorFlowCore十分类似,咱们能够运用初级张量运算和线性代数界说模型。

假如咱们想要构建自界说模型或想要从头开端构建神经网络,这十分有用。让咱们举一个在阅读器中运用张量的比方。

首要在index.html文件中的


Tensorflow.js Core AP我的世界中文版-在浏览器中运用TensorFlow.js和Python构建机器学习模型I






在上面的代码中,咱们在两个张量a和b上履行底子的加法和乘法运算,并将成果打印在阅读器中。现在,转到终端,翻开项目文件夹,然后运用以下指令发动Python服务器:

python3 -m http.server

然后在你的阅读器翻开以下地址:

http://localhost:8000/

当你看到一个页面显我的世界中文版-在浏览器中运用TensorFlow.js和Python构建机器学习模型现“Tensorflow.js Core API”时,运用Ctr我的世界中文版-在浏览器中运用TensorFlow.js和Python构建机器学习模型l+Shift+I键翻开控制台(console)。这应该在Chrome和Firefox都适用。咱们在控制台得到上述操作的输出:



假如你想深化阅览有关Core API的更多信息,那么我主张你阅览CoreAPI官方文档。

CoreAPI文档:

https://www.tensorflow.org/js/guide/tensors_operations

2.2 Layer API:像Keras相同构建模型

Layers API与Python中的Keras十分类似。就像Keras相同,你能够运用序列的和函数的办法创立模型。

让咱们经过一个比方细心研讨序列办法。咱们将在这些数据点上练习回归模型:



这儿,X和Y有一个线性联系——每个Y对应于X + i(其间i是0、1、2、3……n+1)。让咱们在这个数据集上练习一个底子的回归模型。你能够在index.html文件中的符号之间编写以下代码:

const callbacks = {
onEpochEnd: async (epoch, logs) => {
console.log("epoch: " + epoch + JSON.stringify(logs))
}
};
// Generate some synthetic data for training.
const xs = tf.tensor2d([[1], [2], [3], [4]], [4, 1]);
const ys = tf.tensor2d([[1], [3], [5], [7]], [4, 1]);
// Build and compile model.
async function basicRegression(){
// Build a sequential model
const model = tf.sequential();
model.add(tf.layers.dense({units: 1, inputShape: [1]}));
model.add(tf.layers.dense({units: 1, inputShape:我的世界中文版-在浏览器中运用TensorFlow.js和Python构建机器学习模型 [1]}));
model.compile({optimizer: 'sgd', loss: 'meanSquaredError'});
// Train model with fit().
await model.fit(xs, ys, {epochs: 100, validationSplit: 0.1, callbacks: callbacks});
// Run inference with predict().
model.predict(tf.tensor2d([[5]], [1, 1])).print();
}
// Create a basic regression model
basicRegression();

敏锐的读者必定留意到,上面的语法与用Python构建次序模型的Keras语法十分类似。咱们回到阅读器控制台(console)时会得到猜测。


咱们的简略回归模型猜测7.556,十分挨近8的期望值。这是一个底子的比方,但咱们能够清楚地看到,在阅读器中直接构建机器学习模型是多么简略和有用。

TensorFlow.js能够在阅读器中构建机器学习和深度学习模型。它还主动运用GPU(s)的强壮功用,假如在你的体系模型练习期间可用。

下面是一些运用TensorFlow.js在一些规范数据集上练习的深度学习模型的比方:



你能够在tfjs-examples repository中阅读这些示例。

tfjs-examples repository:

https://github.com/tensorflow/tfjs-examples


三、运用谷歌的预练习模型:PoseNet

TensorFlow.js供给了很多来自谷歌的预练习模型,用于许多有用的使命,如方针检测、语音辨认、图画切割等。预先练习的模型的长处是,咱们能够运用它们而不需求任何严重的依靠联系或装置,而且能够开箱即用。

人们遍及估量谷歌将在未来几个月推出更多模型。你能够鄙人面链接检查可用的预练习模型:

相关链接:

https://www.tensorflow.org/js/models



咱们将在本文中运用PoseNet。PoseNet是一种视觉模型,能够经过估量人体要害关节的方位来估量一个人在图画或视频中的姿势。

PoseNet是怎么作业的?

这是一个诱人的概念。姿势估量是一种核算机视觉技能,用于检测图画和视频中的人物。例如,这能够协助咱们确认或人的肘部在图画中呈现的方位。

仅仅要清楚-姿势估量不是关于辨认谁在一个图画中。该算法仅仅简略地估量要害身体关节的方位。

检测到的要害点设置为“Part”和“ID”索引,置信度得分在0.0和1.0之间(1.0是最高的)。



以下是PoseNet给出的输出类型的示例:



难以置信,对吧?!咱们将运用ml5.js库来运用PoseNet。ml5.js是一个根据TensorFlow.js和p5.js的库。p5.js是另一个库能够使你更简略在阅读器中拜访网络摄像头。

ml5.js旨在使机器学习对广阔的艺术家,构思编码员和学生来说变得和蔼可亲。该库以TensorFlow.js为根底,经过简略的语法在阅读器中供给对机器学习算法和模型的拜访。

例如,你能够运用ml5.js在5行代码中运用MobileNet创立图画分类模型,如下所示:



正是由于Ml5.js的简略性,使得它十分合适在阅读器中快速构建原型,这也是咱们在项目中运用它的原因。

让咱们回到PoseNet。创立一个新文件index.html并增加以下代码:













body{
text-align: center;
}



PoseNet demo with Ml5.js


Loading Model...







这将创立一个底子的HTML网页并加载必要的文件。

  • ml5.js和p5.js是经过其官方URL加载的。
  • posenet.js是咱们将编写用于运用PoseNet的代码的文件。

现在,咱们将编写用于运用PoseNet的JavaScript代码。在与index.html相同的文件夹中创立一个新文件posenet.js。以下是完结此项作业所需的过程:

  1. 加载PoseNet模型并从网络摄像头捕获视频
  2. 检测身体关节的要害点
  3. 显现检测到的身体关节
  4. 制作估量的身体骨骼

让咱们从榜首步开端。

过程1:加载PoseNet模型并从网络摄像头捕获视频

咱们将运用ml5.js加载PoseNet。与此一起,p5.js使咱们能够用几行代码从网络摄像头捕获视频:

let video;
let poseNet;
let poses = [];
function setup() {
const canvas = createCanvas(640, 480);
canvas.parent('videoContainer');
// Video capture
video = createCapture(VIDEO);
video.size(width, height);
// Create a new poseNet method with a single detection
poseNet = ml5.poseNet(video, modelReady);
// This sets up an event that fills the global variable "poses"
// wi深圳欢乐谷th an array every time new poses are detected
poseNet.on('pose', function(results) {
poses = results;
});

function modelReady(){
select('#status').html('model Loaded')
}

以上代码块中最重要的是:

  • createCapture(VIDEO):它是一个p5.js函数,用于经过摄像头捕获视频来创立视频元素。
  • ml5.poseNet(video,modelRead):咱们运用ml5.js加载poseNet形式。经过传入视频,咱们告知模型处理视频输入。
  • PoseNet.on():每逢检测到一个新的姿势时,就履行这个函数。
  • modelReady():当PoseNet完结加载时,咱们调用这个函数来显现模型的状况。

过程2:检测身体关节的要害点

下一步是检测姿势。你或许现已留意到,在前面的过程中,咱们经过调用poseNet.on()将每个检测到的位姿保存到pose变量中。这个函数在后台接连运转。不管何时找到一个新的姿势,它都会以以下格局给出身体关节的方位:



  • 'score'是指模型的置信度
  • 'part'表明检测到的身体关节/要害点
  • 'position'包括检测到的部分的x和y方位

咱们不用为此部分编写代码,由于它是主动生成的。

过程3:显现检测到的人体关节

咱们知道被检测到的人体关节及其x和y方位。现在,咱们只需求在视频上画出它们来显现检测到的人体关节。咱们现已看到,PoseNet给出了一个检测到的人体关节列表,每个关节及其x和y方位的置信度评分。

咱们将运用20%的阈值(keypoint.score > 0.2)我的世界中文版-在浏览器中运用TensorFlow.js和Python构建机器学习模型置信度得分,以便制作一个要害点。下面是完成这一操作的代码:

// A function to draw ellipses over the detected keypoints
function drawKeypoints() {
// Loop through all the poses detected
for (let i = 0; i < poses.length; i++) {
// For each pose detected, loop through all the keypoints
let pose = poses[i].pose;
for (let j = 0; j < pose.keypoints.length; j++) {
// A keypoint is an object describing a body part (like rightArm or leftShoulder)
let keypoint = pose.keypoints[j];
// Only draw an ellipse is the pose probability is bigger than 0.2
if (keypoint.score > 0.2) {
fill(255, 0, 0);
noStroke();
ellipse(keypoint.position.x, keypoint.position.y, 10, 10);
}
}
}
}

过程4:制作估量的身体骨架

除了要害点或身体关节,PoseNet还能够检测估量的身体骨架。咱们能够运用pose变量来制作骨架:

// A function to draw the skeletons
function drawSkeleton() {
// Loop through all the skeletons detected
for (let i = 0; i < poses.length; i++) {
let skeleton = poses[i].skeleton;
// For every skeleton, loop through all body connections
for (let j = 0; j < skeleton.length; j++) {
let partA = skeleton[j][0];
let partB = skeleton[j][1];
stroke(255, 0, 0);
line(partA.position.x, partA.position.y, partB.position.x, partB.position.y);
}
}
}

在这儿,咱们遍历检测到的骨架并创立衔接要害点的线。代码仍是适当简略。

现在,最终一步是重复调用drawSkeleton()和drawKeypoints()函数,以及咱们从网络摄像头捕获的视频源。咱们能够运用p5.js的draw()函数来完成,该函数在setup()之后直接调用,并重复履行:

function draw() {
image(video, 0, 0, width, height);
// We can call both functions to draw all keypoints and the skeletons
drawKeypoints();
drawSkeleton();
}

接下来,转到终端窗口,进入项目文件夹,然后发动Python服务器:

python3 -m http.server

然后转到你的阅读器并翻开以下地址:

http://localhost:8000/



瞧!你的PoseNet应该很好地检测到了你的身体姿势(假如你现已正确地遵从了一切过程)。以下是我的模型的状况:



尾记

你能够看到我为什么喜爱TensorFlow.js。它十分有效率,乃至不需求你在构建模型时忧虑杂乱的装置过程。

TensorFlow.js展现了经过将机器学习带到阅读器中使机器学习更简略拜访的许多远景。一起,它还具有数据隐私、交互性等长处。这种组合使得它成为数据科学家东西箱中的一个十分强壮的东西,特别是假如你想布置你的机器学习运用程序的话。

鄙人一篇文章中,咱们将讨论怎么在阅读器中运用搬迁学习,并运用TensorFlow.js布置机器学习或深度学习模型。

咱们用PoseNet做的项目能够更进一步,经过练习另一个分类器来构建一个姿势辨认运用程序。我鼓舞你去测验一下!

原文标题:

Build a Machine Learning Model in your Browser using TensorFlow.jsand Python

原文链接:

https://www.analyticsvidhya.com/blog/2019/06/build-machine-learning-model-in-your-browser-tensorflow-js-deeplearn-js/

译者简介


吴金笛,雪城大学核算机科学硕士一年级在读。知难而进是我最舒服的状况,动心忍性,曾益我所不能。我的方针是做个早睡早起的Cool Girl。

— 完 —

重视清华-青岛数据科学研讨院官方微信大众渠道“THU数据派”及姊妹号“数据派THU”获取更多讲座福利及优质内容。

二维码