当前位置：首页 > 编程日记 > 正文

python 加载动图_在浏览器中使用TensorFlow.js和Python构建机器学习模型（附代码）...

编程日记 2024-03-17 09:30:00

大数据文摘授权转载自数据派THU

作者：MOHD SANAD ZAKI RIZVI

本文主要介绍了：

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浏览器中构建自己的图像分类模型。

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

打开你选择的文本编辑器并创建一个文件index.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>image_classificationtitle>            <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>            <script src="https://unpkg.com/ml5@0.1.1/dist/ml5.min.js">script>            <script src="index.js">script>  head>  <body>            <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 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提供的强大功能，以及如何利用它们在浏览器中部署机器学习模型。

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定义模型，类似于Keras。

让我们通过几个例子来理解这两种方法。毕竟，学习一个概念最好的方法就是把它付诸实践！

首先，设置你的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文件中：

完成了！这真的很简单。

Core API：使用Tensors工作

Core API与TensorFlowCore非常相似，我们可以使用低级张量运算和线性代数定义模型。

如果我们想要构建自定义模型或想要从头开始构建神经网络，这非常有用。让我们举一个在浏览器中使用张量的例子。

首先在index.html文件中的

Tensorflow.js Core API

https://www.dkcj.cn/info/3283.html

mySQL笔记（1）

1.show databases; 显示所有数据库 2.create database 数据库名 [其他选项]； 新建数据库例：create database example_db character set gbk; 创建了一个名为example_db的数据库，并将数据库字符编码指定为gbk,便于在命令提示符下显…

编程日记2024/03/17 09:00:00

Loadrunner进行md5加密方法

本文主要介绍使用Loadrunner进行字符串md5加密的方法。使用Loadrunner进行md5比较简单，首先是加载md5.h头文件，后使用头文件中的加密函数即可。 1. md5.h头文件内容如下 #ifndef MD5_H #define MD5_H #ifdef __alpha typedef unsigned int uint32; #els…

编程日记2024/03/17 08:30:00

6 Java Shell排序

希尔排序是先将整个待排序的记录序列分割成为若干子序列分别进行直接插入排序，待整个序列中的记录“基本有序”时，再对全体记录进行依次直接插入排序。 1、基本思想将待排序数组按照步长gap进行分组，然后将每组的元素利用直接插入排序的方法…

编程日记2024/03/17 08:00:00

如何向非技术人员解释“稀疏傅里叶变换”算法？

【伯乐在线导读】：这个问题来自 Quora，下面是来自 Tanooj Luthra 的回复。让我们来演奏一架想象中的钢琴。钢琴的每个琴键都对应一个特定频率的声音。例如，一个比较有名的频率是国际标准音A（440赫兹）。当有琴键按下时…

编程日记2024/03/17 07:30:00

N皇后摆放问题

Description 在N*N的方格棋盘放置了N个皇后，使得它们不相互攻击（即任意2个皇后不允许处在同一排，同一列，也不允许处在与棋盘边框成45角的斜线上。你的任务是，对于给定的N，求出有多少种合法的放置方法。 Inp…

编程日记2024/03/17 07:00:00

java线程的优先级是数字越大优先级越高_《深入理解Java虚拟机》5分钟速成：12章（Java内存模型与线程）...

第12章 Java内存模型与线程前言：1、物理机如何处理并发问题？2、什么是Java内存模型？3、原子性、可见性、有序性的具体含义和应用实现？4、volatile 关键字特性？5、基于volatile变量的运算在并发下是否是线程安全的&…

编程日记2024/03/17 06:30:00

动软代码生成V2.74模版简介

最近发现很多人用动软代码生成，确实方便，有些经验记录下，以后查看回顾。 ..\Maticsoft\Codematic2\Template\TemplateFile 为模板文件夹，直接在目录下新建文件夹【我的自定义模版】,有个【模版示例.cmt】也直接复制到自定义文件下…

编程日记2024/03/17 06:00:00

《少年先疯队》第九次团队作业：Beta冲刺第二天

2.1 今日完成任务情况姚玉婷：房间管理功能测试文档的编写马丽莎：酒店系统中商品管理功能的完善张琼：商品管理功能的测试孙苗坤：商品管理功能的测试2.2 明天任务安排姚玉婷：酒店系统中剩余功能的完善马丽莎&#x…

编程日记2024/03/17 05:30:00

傅里叶变换的参考文档

https://betterexplained.com/articles/an-interactive-guide-to-the-fourier-transform/ http://blog.jobbole.com/70549/

编程日记2024/03/17 05:00:01

取消ssh密钥文件登录_Xshell密钥登入，增加安全

1.点击Xshell菜单栏的工具，选择新建用户密钥生成向导，进行密钥对生成操作。2.这个时候，你已经有了一对密钥，需要开始设定服务器的配置，启用密钥认证登录，同时为了系统安全着想，关闭密码认证的方…

编程日记2024/03/17 04:30:00

20150726 填坑日记

三中内填坑： 1. 组合数递推什么的 C(m,n)C(m,n-1)C(m-1,n-1)。填了个大坑，以前没认真听课QAQ 2. 裸题过河卒 3. 缺角正方形摆放车统计，分上下部分，枚举上部分放几个即可，O(n) 4. 3d立体图统计表面积：先把上…

编程日记2024/03/17 04:00:00

Word 2003文件保存和另存为操作是否熟练掌握的有关测试

提出问题本文内容不仅适用于Word，对于其他的文档（文字、图形、动画、声音等）编辑软件基本通用。对于操作上述各种编辑软件时，大家都应该注意到，我们第一次保存文件时系统出现的是“另存为”对话框。此后，再…

编程日记2024/03/17 03:30:00

kdress学习

这两天看了一本书叫《linux二进制分析》，这里面提到的一个小工具kdress，这里分析一下源码在：https://github.com/elfmaster/kdress kdress介绍 /boot目录下有一个vmlinux的文件，这是一个经过压缩的linux内核，不过缺少…

编程日记2024/03/17 03:00:00

什么是DCI? 它有什么用？

当你学习LTE的物理帧(physicalframe)结构时,你肯定会有所体会：”靠，怎么这么复杂啊”.物理帧结构是时域 (Time Domain)、频域(Frequency Domain)和调制方式（modulation scheme）的组合。你可能会有疑问：”接收方怎么知…

编程日记2024/03/17 02:30:00

判断小数是否相等_四年级上册数学填空+计算+判断易错题整理练习，收藏练一练！...

四年级数学易错题练习一、填空题1、1.250.8表示( )。2、去掉0.25的小数点，就是把这个数扩大( )；把50.4的小数点向左移动两位，就是把它缩小到原来的( )。3、两个因数相乘, 一个因数扩大10倍，另一个因数扩大…

编程日记2024/03/17 02:00:00

jquery checkbox勾选/取消勾选的诡异问题

$("input[idsubmit2]").click(function() { 　　$("[idpostage2]").prop("checked", true); }); $("input[idsubmit3]").click(function() { 　　$("[idpostage2]").prop("checked", false); }); 解决办法&#x…

编程日记2024/03/17 01:30:00

C#_uploadify_mvc_version

jQuery Uploadify在ASP.NET MVC3中的使用 1、Uploadify简介 Uploadify是基于jQuery的一种上传插件，支持多文件、带进度条显示上传，在项目开发中常被使用。 Uploadify官方网址：http://www.uploadify.com/ 2、ASP.NET MVC3中的使用Uploadify 搭…

编程日记2024/03/17 01:00:00

Velocity Engine基础

回到顶部Velocity是一个基于Java的模板引擎，可以通过特定的语法获取在java对象的数据 , 填充到模板中，从而实现界面和java代码的分离!Velocity Template Language (VTL) , 是Velocity 中提供的一种模版语言 , 旨在提供最简单和最干净的方法来将动态内容合并到网页中。简单来说VTL可以将程序中的动态数展示到网页中注释非解析内容 , 引用和指令。

编程日记2024/03/17 00:30:04

mysql唯一索引与null

根据NULL的定义，NULL表示的是未知，因此两个NULL比较的结果既不相等，也不不等，结果仍然是未知。根据这个定义，多个NULL值的存在应该不违反唯一约束，所以是合理的，在oracel也是如此。在mysql 的innodb引擎中，是允许在唯一索引的字段中出现多个null值的。有上面的表和数据可以看出，查询多条数据。

编程日记2024/03/17 00:30:04

矩阵乘法递归求解

给定两个NN的矩阵，求乘积如下图所示，乘法执行过程如下： 1.矩阵1先拿出一行，矩阵2先拿出一列 2.行与列相乘得到value1 3.行与剩下矩阵2相乘得到value2（递归过程） 4.剩下矩阵1与列相乘得到value3&#xff08…

编程日记2024/03/17 00:30:00

What is acceptable cell and suitable cell in LTE?

The difference between acceptable cell and suitable cell in LTE is given below. acceptable cell In a area where UE is not able to find any suitable cell to camp on, it goes for acceptable cell. An “acceptable cell” is a cell on which the UE may camp to o…

编程日记2024/03/17 00:00:00