独家 | 在浏览器中使用TensorFlow.js和Python构建机器学习模型（附代码）-CSDN博客

本文链接：https://blog.csdn.net/tMb8Z9Vdm66wH68VX1/article/details/94794414

640?wx_fmt=png

作者：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的开发人员来说，它也是一个完美的机器学习门户。

640?wx_fmt=png

我们的网络浏览器是最容易访问的平台之一。这就是为什么构建不仅能够训练机器学习模型而且能够在浏览器本身中“学习”或“迁移学习”的应用程序是有意义的。

在本文中，我们将首先了解使用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?

我将用一种独特的方法来回答这个问题。我不会深入研究TensorFlow.js的理论方面，也不会列出它为什么是一个如此不可思议的工具。

相反，我将简单地向你展示如果不使用TensorFlow.js将会错过什么。那么，让我们在5分钟内构建一个应用程序，来使用你的网络摄像头对图像进行分类。没错——我们将直接进入代码部分！

这是最好的部分——你不需要安装任何东西来做这个！只要一个文本编辑器和一个网络浏览器即可。下面的动图展示了我们将要构建的应用程序：

640?wx_fmt=gif

这多酷啊！我在浏览器里几分钟就完成了。那么，让我们看一下步骤和代码，以帮助你在Web浏览器中构建自己的图像分类模型。

1.1 使用网络摄像头在浏览器中构建图像分类模型

打开你选择的文本编辑器并创建一个文件index.html。将以下代码保存于此文件内：

<!DOCTYPE html>  	
<html>  	
<head>  	
    <meta charset="UTF-8">  	
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  	
    <meta name="viewport" content="width=device-width, initial-scale=1">  	
    <!-- title of the page -->  	
    <title>image_classification</title>  	
    <!-- load processing library-->  	
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>  	
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>  	
    <!-- load ml5.js -->  	
    <script src="https://unpkg.com/[email protected]/dist/ml5.min.js"></script>  	
    <!-- load index.js -->  	
    <script src="index.js"></script>  	
</head>  	
<body>  	
    <!-- this is where the video will be shown -->  	
    <video id="video"></video>  	
</body>  	
</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 th