主页 > 学车

在浏览器中使用TensorFlow.js和Python构建机器学习模型

时间:2020-02-25 来源:NIEBURG丽堡格
"\u003Cdiv\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F08e521db4fc940ecbf14e31a7382e712\" img_width=\"640\" img_height=\"70\" alt=\"在浏览器中使用TensorFlow.js和Python构建机器学习模型\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp class=\"ql-align-justify\"\u003E作者:MOHD SANAD ZAKI RIZVI\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E翻译:吴金笛\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E校对:丁楠雅\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E本文约\u003Cstrong\u003E5500字\u003C\u002Fstrong\u003E,建议阅读15分钟。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E本文首先介绍了TensorFlow.js的重要性及其组件,并介绍使用其在浏览器中构建机器学习模型的方法。然后,构建使用计算机的网络摄像头检测身体姿势的应用程序。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch1 class=\"ql-align-center\"\u003E\u003Cstrong\u003E概述\u003C\u002Fstrong\u003E\u003C\u002Fh1\u003E\u003Cul\u003E\u003Cli class=\"ql-align-justify\"\u003ETensorFlow.js (deeplearn.js)使我们能够在浏览器中构建机器学习和深度学习模型,而无需任何复杂的安装步骤。\u003C\u002Fli\u003E\u003Cli class=\"ql-align-justify\"\u003ETensorFlow.js的两个组件——Core API和Layer API。\u003C\u002Fli\u003E\u003Cli class=\"ql-align-justify\"\u003E了解如何构建一个很棒的使用Tensorflow.js对网络摄像头中的图像进行分类的模型。\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp class=\"ql-align-justify\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch1 class=\"ql-align-center\"\u003E\u003Cstrong\u003E介绍\u003C\u002Fstrong\u003E\u003C\u002Fh1\u003E\u003Cp class=\"ql-align-justify\"\u003E你最喜欢用什么工具来编写机器学习模型?数据科学家们对这个永恒的问题会给出各种不同的答案。一些人喜欢RStudio,另一些人更喜欢Jupyter Notebooks。我绝对属于后者。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E所以,当我第一次遇到TensorFlow.js(以前是deeplearn.js)时,我的心都要炸开了。在浏览器中构建机器学习模型?使用JavaScript?听起来好得令人难以置信!\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 超过43亿人使用网络浏览器——约占世界人口的55%。——维基百科(2019年3月)\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 谷歌的TensorFlow.js不仅将机器学习引入浏览器中,使机器学习大众化,而且对于经常使用JavaScript的开发人员来说,它也是一个完美的机器学习门户。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E \u003C\u002Fp\u003E\u003Cp class=\"ql-align-center\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002Fbe97c74c722447c6baa0f3797acd0a8e\" img_width=\"624\" img_height=\"318\" alt=\"在浏览器中使用TensorFlow.js和Python构建机器学习模型\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp class=\"ql-align-center\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 我们的网络浏览器是最容易访问的平台之一。这就是为什么构建不仅能够训练机器学习模型而且能够在浏览器本身中“学习”或“迁移学习”的应用程序是有意义的。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 在本文中,我们将首先了解使用TensorFlow.js的重要性及其它的不同组件。然后,我们将深入讨论使用TensorFlow.js在浏览器中构建我们自己的机器学习模型。然后我们将构建一个应用程序,来使用计算机的网络摄像头检测你的身体姿势!\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 如果你是TensorFlow的新手,你可以在下面文章中了解更多:\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli class=\"ql-align-justify\"\u003ETensorFlow 101: Understanding Tensors and Graphs to get you Started with Deep Learning\u003C\u002Fli\u003E\u003Cli class=\"ql-align-justify\"\u003EIntroduction to Implementing Neural Networks using TensorFlow\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp class=\"ql-align-justify\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch1 class=\"ql-align-center\"\u003E\u003Cstrong\u003E目录\u003C\u002Fstrong\u003E\u003C\u002Fh1\u003E\u003Cp class=\"ql-align-justify\"\u003E\u003Cstrong\u003E一、为什么你应该使用TensorFlow.js?\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 1.1 使用网络摄像头在浏览器中进行图像分类\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 1.2 TensorFlow.js的特征\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E\u003Cstrong\u003E二、了解浏览器中的机器学习\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 2.1 Core API:使用Tensors工作\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 2.2 Layer API:像Keras一样构建模型\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E\u003Cstrong\u003E三、利用谷歌的预训练模型:PoseNet\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch1 class=\"ql-align-center\"\u003E\u003Cstrong\u003E一、为什么要使用TensorFlow.js?\u003C\u002Fstrong\u003E\u003C\u002Fh1\u003E\u003Cp class=\"ql-align-justify\"\u003E我将用一种独特的方法来回答这个问题。我不会深入研究TensorFlow.js的理论方面,也不会列出它为什么是一个如此不可思议的工具。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 相反,我将简单地向你展示如果不使用TensorFlow.js将会错过什么。那么,让我们在5分钟内构建一个应用程序,来使用你的网络摄像头对图像进行分类。没错——我们将直接进入代码部分!\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 这是最好的部分——你不需要安装任何东西来做这个!只要一个文本编辑器和一个网络浏览器即可。下面的动图展示了我们将要构建的应用程序:\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E \u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002Fd59d18c1c0fb45c89f3618f1c87e8805\" img_width=\"600\" img_height=\"329\" alt=\"在浏览器中使用TensorFlow.js和Python构建机器学习模型\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp class=\"ql-align-justify\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 这多酷啊!我在浏览器里几分钟就完成了。那么,让我们看一下步骤和代码,以帮助你在Web浏览器中构建自己的图像分类模型。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E \u003Cstrong\u003E1.1 使用网络摄像头在浏览器中构建图像分类模型\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E打开你选择的文本编辑器并创建一个文件index.html。将以下代码保存于此文件内:\u003C\u002Fp\u003E\u003Cpre class=\"ql-align-justify\"\u003E \u003Cbr\u003E \u003Cbr\u003E \u003Cbr\u003E \u003Cbr\u003E \u003Cbr\u003E \u003Cbr\u003E \u003Cbr\u003E image_classification<\u002Ftitle> \u003Cbr\u003E <!-- load processing library--> \u003Cbr\u003E <script src=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fp5.js\u002F0.8.0\u002Fp5.min.js\"><\u002Fscript> \u003Cbr\u003E <script src=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fp5.js\u002F0.8.0\u002Faddons\u002Fp5.dom.min.js\"><\u002Fscript> \u003Cbr\u003E <!-- load ml5.js --> \u003Cbr\u003E <script src=\"https:\u002F\u002Funpkg.com\u002Fml5@0.1.1\u002Fdist\u002Fml5.min.js\"><\u002Fscript> \u003Cbr\u003E <!-- load index.js --> \u003Cbr\u003E <script src=\"index.js\"><\u002Fscript> \u003Cbr\u003E<\u002Fhead> \u003Cbr\u003E<body> \u003Cbr\u003E <!-- this is where the video will be shown --> \u003Cbr\u003E <video id=\"video\"><\u002Fvideo> \u003Cbr\u003E<\u002Fbody> \u003Cbr\u003E<\u002Fhtml> \u003Cbr\u003E\u003C\u002Fpre\u003E\u003Cp class=\"ql-align-justify\"\u003E接下来,创建另一个文件index.js并在其中编写以下代码:\u003C\u002Fp\u003E\u003Cpre class=\"ql-align-justify\"\u003E let mobilenet; \u003Cbr\u003E let video; \u003Cbr\u003E let label = ''; \u003Cbr\u003E \u003Cbr\u003E \u002F\u002F when model is ready make predictions \u003Cbr\u003E function modelReady() { \u003Cbr\u003E console.log('Model is ready!!!'); \u003Cbr\u003E mobilenet.predict(gotResults); \u003Cbr\u003E } \u003Cbr\u003E \u003Cbr\u003Efunction gotResults(error, results) { \u003Cbr\u003E if (error) { \u003Cbr\u003E console.error(error); \u003Cbr\u003E } else { \u003Cbr\u003E label = results[0].className; \u003Cbr\u003E \u002F\u002F loop the inference by calling itself \u003Cbr\u003E mobilenet.predict(gotResults); \u003Cbr\u003E } \u003Cbr\u003E} \u003Cbr\u003E \u003Cbr\u003E\u002F\u002F setup function \u003Cbr\u003Efunction setup() { \u003Cbr\u003E createCanvas(640, 550); \u003Cbr\u003E \u002F\u002F ml5 to create video capture \u003Cbr\u003E video = createCapture(VIDEO); \u003Cbr\u003E video.hide(); \u003Cbr\u003E background(0); \u003Cbr\u003E \u002F\u002F load the MobileNet and apply it on video feed \u003Cbr\u003E mobilenet = ml5.imageClassifier('MobileNet', video, modelReady); \u003Cbr\u003E} \u003Cbr\u003E \u003Cbr\u003Efunction draw() { \u003Cbr\u003E background(0); \u003Cbr\u003E \u002F\u002F show video \u003Cbr\u003E image(video, 0, 0); \u003Cbr\u003E fill(255); \u003Cbr\u003E textSize(32); \u003Cbr\u003E \u002F\u002F show prediction label \u003Cbr\u003E text(label, 10, height - 20); \u003Cbr\u003E} \u003Cbr\u003E\u003C\u002Fpre\u003E\u003Cp class=\"ql-align-justify\"\u003E保存这两个文件,然后在谷歌Chrome或Mozilla Firefox等浏览器中打开index.html文件。\u003Cstrong\u003E就是这样!你现在已经创建了一个可以使用你的网络摄像头在浏览器本身实时分类图像的应用程序!\u003C\u002Fstrong\u003E下面是它在我的计算机上的样子:\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E\u003Cstrong\u003E视频连接:\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cblockquote\u003Ehttps:\u002F\u002Fs3-ap-south-1.amazonaws.com\u002Fav-blog-media\u002Fwp-content\u002Fuploads\u002F2019\u002F05\u002Fmobilenet_demo.mp4?_=1\u003C\u002Fblockquote\u003E\u003Cp class=\"ql-align-justify\"\u003E 在这个例子中需要注意的要点:\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli class=\"ql-align-justify\"\u003E在上面的例子中,我们使用了一个预先训练的图像分类模型MobileNet(https:\u002F\u002Fai.googleblog.com\u002F2017\u002F06\u002Fmobilenets-open-source-models-for.html)\u003C\u002Fli\u003E\u003Cli class=\"ql-align-justify\"\u003E我们使用ml5.js(https:\u002F\u002Fml5js.org\u002F)一个构建在TensorFlow之上的库。它将MobileNet模型加载到浏览器中,并对视频提要执行推理。\u003C\u002Fli\u003E\u003Cli class=\"ql-align-justify\"\u003E我们还利用P5.js(https:\u002F\u002Fp5js.org\u002F)库来处理视频输入并在视频本身上显示标签。\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp class=\"ql-align-justify\"\u003E 我不需要在电脑上安装任何东西。这个例子应该适用于任何现代系统,不管它是Linux、Windows还是MacOS——这就是使用JavaScript在web上构建模型的强大功能。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 现在,让我们看看TensorFlow.js提供的强大功能,以及如何利用它们在浏览器中部署机器学习模型。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E \u003Cstrong\u003E1.2 TensorFlow.js的特征\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E TensorFlow.js是一个库,用于JavaScript开发和训练ML模型,并在浏览器或Node.js上部署。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E TensorFlow.js提供了许多的功能来供我们使用。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 它是TensorFlow在JavaScript中的扩展,JavaScript是我们在互联网上使用的几乎所有网站、浏览器或应用程序逻辑背后的编程语言。JavaScript和Python一样用途广泛,所以使用它来开发机器学习模型给我们带来了很多好处:\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli class=\"ql-align-justify\"\u003E如果ML模型是用web语言编写的,则更容易部署。\u003C\u002Fli\u003E\u003Cli class=\"ql-align-justify\"\u003E由于所有主流浏览器都支持JavaScript,所以你可以无处不在地使用它,而不必担心平台类型或其他兼容性问题。对于你的用户也是如此。\u003C\u002Fli\u003E\u003Cli class=\"ql-align-justify\"\u003ETensorFlow.js是一个客户端库,这意味着它可以在用户的浏览器中训练或运行ML模型。这减轻了与数据隐私有关的任何担忧。\u003C\u002Fli\u003E\u003Cli class=\"ql-align-justify\"\u003E在你的客户端上运行实时推断可使你的应用程序更具交互性,因为它们可以立即响应用户输入(例如我们前面构建的webcam应用程序)。\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp class=\"ql-align-center\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002Fa3130966197a4f8cbb8f38e3f8f76c95\" img_width=\"624\" img_height=\"318\" alt=\"在浏览器中使用TensorFlow.js和Python构建机器学习模型\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp class=\"ql-align-center\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003ETensorFlow.js以其当前的形式提供了以下主要功能:\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli class=\"ql-align-justify\"\u003E\u003Cstrong\u003E浏览器中的机器学习:\u003C\u002Fstrong\u003E你可以使用TensorFlow.js在浏览器中创建和训练ML模型。\u003C\u002Fli\u003E\u003Cli class=\"ql-align-justify\"\u003E\u003Cstrong\u003E谷歌的预训练模型:\u003C\u002Fstrong\u003ETensorFlow.js配备了一套由谷歌预训练的模型,用于对象检测、图像分割、语音识别、文本毒性分类等任务。\u003C\u002Fli\u003E\u003Cli class=\"ql-align-justify\"\u003E\u003Cstrong\u003E迁移学习:\u003C\u002Fstrong\u003E你可以通过对已经训练过的模型的部分进行再训练来执行转移学习,比如TensorFlow.js中的MobileNet。\u003C\u002Fli\u003E\u003Cli class=\"ql-align-justify\"\u003E\u003Cstrong\u003E部署python模型:\u003C\u002Fstrong\u003E使用Keras或TensorFlow训练的模型可以很容易地导入浏览器\u002F使用TensorFlow.js的部署。\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp class=\"ql-align-justify\"\u003E 在本文中,我们将关注前两个功能。在本系列的第二部分(即将推出!)中,我们将讨论如何在Python中转移学习和部署我们的模型。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch1 class=\"ql-align-justify\"\u003E \u003Cstrong\u003E二、浏览器中的机器学习\u003C\u002Fstrong\u003E\u003C\u002Fh1\u003E\u003Cp class=\"ql-align-justify\"\u003ETensorFlow.js提供了两种方法来训练模型(非常类似于TensorFlow):\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli class=\"ql-align-justify\"\u003E 第一种方法是使用Core API使用低级张量操作来定义模型。\u003C\u002Fli\u003E\u003Cli class=\"ql-align-justify\"\u003E第二种方法是使用Layers API定义模型,类似于Keras。\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp class=\"ql-align-justify\"\u003E让我们通过几个例子来理解这两种方法。毕竟,学习一个概念最好的方法就是把它付诸实践!\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 首先,设置你的HTML文件:\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 在你的电脑上建立一个新的index.html文件,并在其中编写以下代码:\u003C\u002Fp\u003E\u003Cpre class=\"ql-align-justify\"\u003E<html lang=\"en\">\u003Cbr\u003E<head>\u003Cbr\u003E <meta charset=\"UTF-8\">\u003Cbr\u003E <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\u003Cbr\u003E <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\u003Cbr\u003E <!-- load Tensorflow.js -->\u003Cbr\u003E <script src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@tensorflow\u002Ftfjs@1.0.0\u002Fdist\u002Ftf.min.js\"><\u002Fscript>\u003Cbr\u003E<\u002Fhead>\u003Cbr\u003E<body>\u003Cbr\u003E <h1>Tensorflow.js Core API<\u002Fh1>\u003Cbr\u003E <!-- <script src=\"index.js\"><\u002Fscript> -->\u003Cbr\u003E <script type=\"text\u002Fjavascript\">\u003Cbr\u003E<\u002Fscript>\u003Cbr\u003E<\u002Fbody>\u003Cbr\u003E<\u002Fhtml>\u003Cbr\u003E\u003C\u002Fpre\u003E\u003Cp class=\"ql-align-justify\"\u003E 我们创建了一个基本的HTML页面,并从云URL中加载了Tensorflow.js(第7行)。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E \u003Cstrong\u003E关于安装TensorFlow.js(deeplearn.js)的说明:\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 由于TensorFlow.js是为浏览器而设计的,所以安装和使用TensorFlow.js最简单的方法就是根本不安装它。你可以简单地从HTML中的URL加载它即可。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 如果你想在本地工作怎么办呢?实际上,你可以在Jupyter Notebook中使用TensorFlow.js,就像你在Python或R中通常做的那样。这是一个适合每个人的解决方案!\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 这种本地方法稍微长一些,并且需要一些时间,所以本文不会使用它。如果你确实想学习如何操作,可以从为Jupyter安装ijavascript内核开始。下面是我的Jupyter Notebook的截图:\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E \u003C\u002Fp\u003E\u003Cp class=\"ql-align-center\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002Fc7cf1da3d32941c8b6033607bb304f23\" img_width=\"604\" img_height=\"412\" alt=\"在浏览器中使用TensorFlow.js和Python构建机器学习模型\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp class=\"ql-align-center\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E现在,使用TensorFlow.js的推荐方法是使用库的官方URL直接加载它。你只需将以下行添加到HTML文件中:\u003C\u002Fp\u003E\u003Cpre class=\"ql-align-justify\"\u003E<scriptsrc=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@tensorflow\u002Ftfjs@1.0.0\u002Fdist\u002Ftf.min.js\"><\u002Fscript>\u003Cbr\u003E\u003C\u002Fpre\u003E\u003Cp class=\"ql-align-justify\"\u003E完成了!这真的很简单。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E\u003Cstrong\u003E2.1 Core API:使用Tensors工作\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E Core API与TensorFlowCore非常相似,我们可以使用低级张量运算和线性代数定义模型。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 如果我们想要构建自定义模型或想要从头开始构建神经网络,这非常有用。让我们举一个在浏览器中使用张量的例子。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 首先在index.html文件中的<script> <\u002F script>标记之间添加以下代码:\u003C\u002Fp\u003E\u003Cpre class=\"ql-align-justify\"\u003Econst a = tf.tensor([1, 2, 3, 4]);\u003Cbr\u003Econst b = tf.tensor([10, 20, 30, 40]);\u003Cbr\u003Econst y = a.add(b); \u002F\u002F equivalent to tf.add(a, b)\u003Cbr\u003Econst z = a.mul(b);\u003Cbr\u003Ey.print();\u003Cbr\u003Ez.print();\u003Cbr\u003E\u003C\u002Fpre\u003E\u003Cp class=\"ql-align-justify\"\u003E<script>标签基本上表示JavaScript。我们在这些标签之间写的任何内容都将作为JavaScript代码执行。以下是index.html现在的样子:\u003C\u002Fp\u003E\u003Cpre class=\"ql-align-justify\"\u003E<html lang=\"en\">\u003Cbr\u003E<head>\u003Cbr\u003E <meta charset=\"UTF-8\">\u003Cbr\u003E <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\u003Cbr\u003E <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\u003Cbr\u003E <!-- load Tensorflow.js -->\u003Cbr\u003E <script src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@tensorflow\u002Ftfjs@1.0.0\u002Fdist\u002Ftf.min.js\"><\u002Fscript>\u003Cbr\u003E<\u002Fhead>\u003Cbr\u003E<body>\u003Cbr\u003E <h1>Tensorflow.js Core API<\u002Fh1>\u003Cbr\u003E <!-- <script src=\"index.js\"><\u002Fscript> -->\u003Cbr\u003E <script type=\"text\u002Fjavascript\">\u003Cbr\u003E const a = tf.tensor([1, 2, 3, 4]);\u003Cbr\u003E const b = tf.tensor([10, 20, 30, 40]);\u003Cbr\u003E const y = a.add(b); \u002F\u002F equivalent to tf.add(a, b)\u003Cbr\u003E const z = a.mul(b); \u002F\u002F equivalent to tf.mul(a, b)\u003Cbr\u003E y.print();\u003Cbr\u003E z.print();\u003Cbr\u003E<\u002Fscript>\u003Cbr\u003E<\u002Fbody>\u003Cbr\u003E<\u002Fhtml>\u003Cbr\u003E\u003C\u002Fpre\u003E\u003Cp class=\"ql-align-justify\"\u003E在上面的代码中,我们在两个张量a和b上执行基本的加法和乘法运算,并将结果打印在浏览器中。现在,转到终端,打开项目文件夹,然后使用以下命令启动Python服务器:\u003C\u002Fp\u003E\u003Cpre class=\"ql-align-justify\"\u003Epython3 -m http.server\u003Cbr\u003E\u003C\u002Fpre\u003E\u003Cp class=\"ql-align-justify\"\u003E然后在你的浏览器打开以下地址:\u003C\u002Fp\u003E\u003Cpre class=\"ql-align-justify\"\u003Ehttp:\u002F\u002Flocalhost:8000\u002F\u003Cbr\u003E\u003C\u002Fpre\u003E\u003Cp class=\"ql-align-justify\"\u003E当你看到一个页面显示“Tensorflow.js Core API”时,使用Ctrl+Shift+I键打开控制台(console)。这应该在Chrome和Firefox都适用。我们在控制台得到上述操作的输出:\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E \u003C\u002Fp\u003E\u003Cp class=\"ql-align-center\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002Fa7491c17e617418e991e0b4884db6cd9\" img_width=\"547\" img_height=\"206\" alt=\"在浏览器中使用TensorFlow.js和Python构建机器学习模型\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp class=\"ql-align-center\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 如果你想深入阅读有关Core API的更多信息,那么我建议你阅读CoreAPI官方文档。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E\u003Cstrong\u003ECoreAPI文档:\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cblockquote\u003Ehttps:\u002F\u002Fwww.tensorflow.org\u002Fjs\u002Fguide\u002Ftensors_operations\u003C\u002Fblockquote\u003E\u003Cp class=\"ql-align-justify\"\u003E \u003Cstrong\u003E2.2 Layer API:像Keras一样构建模型\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E Layers API与Python中的Keras非常相似。就像Keras一样,你可以使用序列的和函数的方法创建模型。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 让我们通过一个例子仔细研究序列方法。我们将在这些数据点上训练回归模型:\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E \u003C\u002Fp\u003E\u003Cp class=\"ql-align-center\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002F429d7277708946fa8ff34e4b5d25629e\" img_width=\"247\" img_height=\"157\" alt=\"在浏览器中使用TensorFlow.js和Python构建机器学习模型\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp class=\"ql-align-center\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 这里,X和Y有一个线性关系——每个Y对应于X + i(其中i是0、1、2、3……n+1)。让我们在这个数据集上训练一个基本的回归模型。你可以在index.html文件中的<script><\u002Fscript>标记之间编写以下代码:\u003C\u002Fp\u003E\u003Cpre class=\"ql-align-justify\"\u003Econst callbacks = {\u003Cbr\u003E onEpochEnd: async (epoch, logs) => {\u003Cbr\u003E console.log(\"epoch: \" + epoch + JSON.stringify(logs))\u003Cbr\u003E }\u003Cbr\u003E };\u003Cbr\u003E \u002F\u002F Generate some synthetic data for training.\u003Cbr\u003E const xs = tf.tensor2d([[1], [2], [3], [4]], [4, 1]);\u003Cbr\u003E const ys = tf.tensor2d([[1], [3], [5], [7]], [4, 1]);\u003Cbr\u003E \u002F\u002F Build and compile model.\u003Cbr\u003E async function basicRegression(){\u003Cbr\u003E \u002F\u002F Build a sequential model\u003Cbr\u003E const model = tf.sequential();\u003Cbr\u003E model.add(tf.layers.dense({units: 1, inputShape: [1]}));\u003Cbr\u003E model.add(tf.layers.dense({units: 1, inputShape: [1]}));\u003Cbr\u003E model.compile({optimizer: 'sgd', loss: 'meanSquaredError'});\u003Cbr\u003E \u002F\u002F Train model with fit().\u003Cbr\u003E await model.fit(xs, ys, {epochs: 100, validationSplit: 0.1, callbacks: callbacks});\u003Cbr\u003E \u002F\u002F Run inference with predict().\u003Cbr\u003E model.predict(tf.tensor2d([[5]], [1, 1])).print();\u003Cbr\u003E }\u003Cbr\u003E \u002F\u002F Create a basic regression model\u003Cbr\u003E basicRegression();\u003Cbr\u003E\u003C\u002Fpre\u003E\u003Cp class=\"ql-align-justify\"\u003E敏锐的读者一定注意到,上面的语法与用Python构建顺序模型的Keras语法非常相似。我们回到浏览器控制台(console)时会得到预测。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E \u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002Fadf047bb4637434a933aba4dae507b52\" img_width=\"600\" img_height=\"322\" alt=\"在浏览器中使用TensorFlow.js和Python构建机器学习模型\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp class=\"ql-align-center\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 我们的简单回归模型预测7.556,非常接近8的期望值。这是一个基本的例子,但我们可以清楚地看到,在浏览器中直接构建机器学习模型是多么容易和有用。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E TensorFlow.js能够在浏览器中构建机器学习和深度学习模型。它还自动利用GPU(s)的强大功能,如果在你的系统模型训练期间可用。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 下面是一些使用TensorFlow.js在一些标准数据集上训练的深度学习模型的例子:\u003C\u002Fp\u003E\u003Cp class=\"ql-align-center\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002F12f84661bdde4c6a9348a18831a4c118\" img_width=\"544\" img_height=\"435\" alt=\"在浏览器中使用TensorFlow.js和Python构建机器学习模型\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp class=\"ql-align-center\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E你可以在tfjs-examples repository中浏览这些示例。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E\u003Cstrong\u003Etfjs-examples repository:\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cblockquote\u003Ehttps:\u002F\u002Fgithub.com\u002Ftensorflow\u002Ftfjs-examples\u003C\u002Fblockquote\u003E\u003Cp class=\"ql-align-justify\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch1 class=\"ql-align-justify\"\u003E \u003Cstrong\u003E三、利用谷歌的预训练模型:PoseNet\u003C\u002Fstrong\u003E\u003C\u002Fh1\u003E\u003Cp class=\"ql-align-justify\"\u003E TensorFlow.js提供了大量来自谷歌的预训练模型,用于许多有用的任务,如目标检测、语音识别、图像分割等。预先训练的模型的优点是,我们可以使用它们而不需要任何重大的依赖关系或安装,并且可以开箱即用。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 人们普遍预计谷歌将在未来几个月推出更多模型。你可以在下面链接查看可用的预训练模型:\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E\u003Cstrong\u003E相关链接:\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cblockquote\u003Ehttps:\u002F\u002Fwww.tensorflow.org\u002Fjs\u002Fmodels\u003C\u002Fblockquote\u003E\u003Cp class=\"ql-align-center\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002Fbfeefff0d9034e38806442c98d203224\" img_width=\"624\" img_height=\"311\" alt=\"在浏览器中使用TensorFlow.js和Python构建机器学习模型\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp class=\"ql-align-center\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E我们将在本文中使用PoseNet。PoseNet是一种视觉模型,可以通过估计人体关键关节的位置来估计一个人在图像或视频中的姿势。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E \u003Cstrong\u003EPoseNet是如何工作的?\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 这是一个迷人的概念。姿势估计是一种计算机视觉技术,用于检测图像和视频中的人物。例如,这可以帮助我们确定某人的肘部在图像中出现的位置。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 只是要清楚-姿势估计不是关于识别谁在一个图像中。\u003Cstrong\u003E该算法只是简单地估计关键身体关节的位置。\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E\u003Cstrong\u003E \u003C\u002Fstrong\u003E检测到的关键点设置为“Part”和“ID”索引,置信度得分在0.0和1.0之间(1.0是最高的)。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-center\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002F4922fd44b6744b8caf3f1dd96e94f602\" img_width=\"236\" img_height=\"556\" alt=\"在浏览器中使用TensorFlow.js和Python构建机器学习模型\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp class=\"ql-align-center\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 以下是PoseNet给出的输出类型的示例:\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E \u003C\u002Fp\u003E\u003Cp class=\"ql-align-center\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002F674ae6c006e046bfa455dbb456a1528b\" img_width=\"533\" img_height=\"273\" alt=\"在浏览器中使用TensorFlow.js和Python构建机器学习模型\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp class=\"ql-align-center\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E难以置信,对吧?!我们将使用ml5.js库来使用PoseNet。ml5.js是一个基于TensorFlow.js和p5.js的库。p5.js是另一个库可以使你更容易在浏览器中访问网络摄像头。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E ml5.js旨在使机器学习对广大的艺术家,创意编码员和学生来说变得平易近人。该库以TensorFlow.js为基础,通过简单的语法在浏览器中提供对机器学习算法和模型的访问。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 例如,你可以使用ml5.js在5行代码中使用MobileNet创建图像分类模型,如下所示:\u003C\u002Fp\u003E\u003Cp class=\"ql-align-center\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002Fe2543ff84609471296702e4d10a6a321\" img_width=\"624\" img_height=\"239\" alt=\"在浏览器中使用TensorFlow.js和Python构建机器学习模型\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp class=\"ql-align-center\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 正是由于Ml5.js的简单性,使得它非常适合在浏览器中快速构建原型,这也是我们在项目中使用它的原因。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 让我们回到PoseNet。创建一个新文件index.html并添加以下代码:\u003C\u002Fp\u003E\u003Cpre class=\"ql-align-justify\"\u003E<html lang=\"en\">\u003Cbr\u003E<head>\u003Cbr\u003E <meta charset=\"UTF-8\">\u003Cbr\u003E <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\u003Cbr\u003E <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\u003Cbr\u003E <!-- load p5.js -->\u003Cbr\u003E <script src=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fp5.js\u002F0.7.3\u002Fp5.min.js\"><\u002Fscript>\u003Cbr\u003E <script src=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fp5.js\u002F0.7.3\u002Faddons\u002Fp5.dom.min.js\"><\u002Fscript>\u003Cbr\u003E <!-- load ml5.js -->\u003Cbr\u003E <script src=\"https:\u002F\u002Funpkg.com\u002Fml5@0.2.3\u002Fdist\u002Fml5.min.js\" type=\"text\u002Fjavascript\"><\u002Fscript>\u003Cbr\u003E <!-- keep the video in center of browser -->\u003Cbr\u003E <style type=\"text\u002Fcss\">\u003Cbr\u003E body{\u003Cbr\u003E text-align: center;\u003Cbr\u003E }\u003Cbr\u003E<\u002Fstyle>\u003Cbr\u003E<\u002Fhead>\u003Cbr\u003E<body>\u003Cbr\u003E <h1>PoseNet demo with Ml5.js<\u002Fh1>\u003Cbr\u003E <p id=\"status\">Loading Model...<\u002Fp>\u003Cbr\u003E <div id=\"videoContainer\"><\u002Fdiv>\u003Cbr\u003E <!-- load the posenet.js file -->\u003Cbr\u003E <script src=\"posenet.js\"><\u002Fscript>\u003Cbr\u003E<\u002Fbody>\u003Cbr\u003E<\u002Fhtml>\u003Cbr\u003E\u003C\u002Fpre\u003E\u003Cp class=\"ql-align-justify\"\u003E这将创建一个基本的HTML网页并加载必要的文件。\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli class=\"ql-align-justify\"\u003Eml5.js和p5.js是通过其官方URL加载的。\u003C\u002Fli\u003E\u003Cli class=\"ql-align-justify\"\u003Eposenet.js是我们将编写用于使用PoseNet的代码的文件。\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp class=\"ql-align-justify\"\u003E 现在,我们将编写用于使用PoseNet的JavaScript代码。在与index.html相同的文件夹中创建一个新文件posenet.js。以下是完成此项工作所需的步骤: \u003C\u002Fp\u003E\u003Col\u003E\u003Cli class=\"ql-align-justify\"\u003E加载PoseNet模型并从网络摄像头捕获视频\u003C\u002Fli\u003E\u003Cli class=\"ql-align-justify\"\u003E检测身体关节的关键点\u003C\u002Fli\u003E\u003Cli class=\"ql-align-justify\"\u003E显示检测到的身体关节\u003C\u002Fli\u003E\u003Cli class=\"ql-align-justify\"\u003E绘制估计的身体骨骼\u003C\u002Fli\u003E\u003C\u002Fol\u003E\u003Cp class=\"ql-align-justify\"\u003E 让我们从第一步开始。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E \u003Cstrong\u003E步骤1:加载PoseNet模型并从网络摄像头捕获视频\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 我们将使用ml5.js加载PoseNet。与此同时,p5.js使我们可以用几行代码从网络摄像头捕获视频:\u003C\u002Fp\u003E\u003Cpre class=\"ql-align-justify\"\u003Elet video;\u003Cbr\u003Elet poseNet;\u003Cbr\u003Elet poses = [];\u003Cbr\u003Efunction setup() {\u003Cbr\u003E const canvas = createCanvas(640, 480);\u003Cbr\u003E canvas.parent('videoContainer');\u003Cbr\u003E \u002F\u002F Video capture\u003Cbr\u003E video = createCapture(VIDEO);\u003Cbr\u003E video.size(width, height);\u003Cbr\u003E \u002F\u002F Create a new poseNet method with a single detection\u003Cbr\u003E poseNet = ml5.poseNet(video, modelReady);\u003Cbr\u003E \u002F\u002F This sets up an event that fills the global variable \"poses\"\u003Cbr\u003E \u002F\u002F with an array every time new poses are detected\u003Cbr\u003E poseNet.on('pose', function(results) {\u003Cbr\u003E poses = results;\u003Cbr\u003E });\u003Cbr\u003E \u003Cbr\u003E function modelReady(){\u003Cbr\u003E select('#status').html('model Loaded')\u003Cbr\u003E}\u003Cbr\u003E\u003C\u002Fpre\u003E\u003Cp class=\"ql-align-justify\"\u003E以上代码块中最重要的是:\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli class=\"ql-align-justify\"\u003EcreateCapture(VIDEO):它是一个p5.js函数,用于通过摄像头捕获视频来创建视频元素。\u003C\u002Fli\u003E\u003Cli class=\"ql-align-justify\"\u003Eml5.poseNet(video,modelRead):我们使用ml5.js加载poseNet模式。通过传入视频,我们告诉模型处理视频输入。\u003C\u002Fli\u003E\u003Cli class=\"ql-align-justify\"\u003EPoseNet.on():每当检测到一个新的姿势时,就执行这个函数。\u003C\u002Fli\u003E\u003Cli class=\"ql-align-justify\"\u003EmodelReady():当PoseNet完成加载时,我们调用这个函数来显示模型的状态。\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp class=\"ql-align-justify\"\u003E \u003Cstrong\u003E步骤2:检测身体关节的关键点\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 下一步是检测姿势。你可能已经注意到,在前面的步骤中,我们通过调用poseNet.on()将每个检测到的位姿保存到pose变量中。这个函数在后台连续运行。无论何时找到一个新的姿势,它都会以以下格式给出身体关节的位置:\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E \u003C\u002Fp\u003E\u003Cp class=\"ql-align-center\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F661cafa63dce49c9ad100e705cc40c99\" img_width=\"483\" img_height=\"291\" alt=\"在浏览器中使用TensorFlow.js和Python构建机器学习模型\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp class=\"ql-align-justify\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli class=\"ql-align-justify\"\u003E\u003Cstrong\u003E'score'\u003C\u002Fstrong\u003E是指模型的置信度\u003C\u002Fli\u003E\u003Cli class=\"ql-align-justify\"\u003E\u003Cstrong\u003E'part'\u003C\u002Fstrong\u003E表示检测到的身体关节\u002F关键点\u003C\u002Fli\u003E\u003Cli class=\"ql-align-justify\"\u003E\u003Cstrong\u003E'position'\u003C\u002Fstrong\u003E包含检测到的部分的x和y位置\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp class=\"ql-align-justify\"\u003E 我们不必为此部分编写代码,因为它是自动生成的。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E \u003Cstrong\u003E步骤3:显示检测到的人体关节\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 我们知道被检测到的人体关节及其x和y位置。现在,我们只需要在视频上画出它们来显示检测到的人体关节。我们已经看到,PoseNet给出了一个检测到的人体关节列表,每个关节及其x和y位置的置信度评分。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 我们将使用20%的阈值(keypoint.score > 0.2)置信度得分,以便绘制一个关键点。下面是实现这一操作的代码:\u003C\u002Fp\u003E\u003Cpre class=\"ql-align-justify\"\u003E\u002F\u002F A function to draw ellipses over the detected keypoints\u003Cbr\u003Efunction drawKeypoints() {\u003Cbr\u003E \u002F\u002F Loop through all the poses detected\u003Cbr\u003E for (let i = 0; i < poses.length; i++) {\u003Cbr\u003E \u002F\u002F For each pose detected, loop through all the keypoints\u003Cbr\u003E let pose = poses[i].pose;\u003Cbr\u003E for (let j = 0; j < pose.keypoints.length; j++) {\u003Cbr\u003E \u002F\u002F A keypoint is an object describing a body part (like rightArm or leftShoulder)\u003Cbr\u003E let keypoint = pose.keypoints[j];\u003Cbr\u003E \u002F\u002F Only draw an ellipse is the pose probability is bigger than 0.2\u003Cbr\u003E if (keypoint.score > 0.2) {\u003Cbr\u003E fill(255, 0, 0);\u003Cbr\u003E noStroke();\u003Cbr\u003E ellipse(keypoint.position.x, keypoint.position.y, 10, 10);\u003Cbr\u003E }\u003Cbr\u003E }\u003Cbr\u003E }\u003Cbr\u003E}\u003Cbr\u003E\u003C\u002Fpre\u003E\u003Cp class=\"ql-align-justify\"\u003E\u003Cstrong\u003E步骤4:绘制估计的身体骨架\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 除了关键点或身体关节,PoseNet还可以检测估计的身体骨架。我们可以使用pose变量来绘制骨架:\u003C\u002Fp\u003E\u003Cpre class=\"ql-align-justify\"\u003E\u002F\u002F A function to draw the skeletons\u003Cbr\u003Efunction drawSkeleton() {\u003Cbr\u003E \u002F\u002F Loop through all the skeletons detected\u003Cbr\u003E for (let i = 0; i < poses.length; i++) {\u003Cbr\u003E let skeleton = poses[i].skeleton;\u003Cbr\u003E \u002F\u002F For every skeleton, loop through all body connections\u003Cbr\u003E for (let j = 0; j < skeleton.length; j++) {\u003Cbr\u003E let partA = skeleton[j][0];\u003Cbr\u003E let partB = skeleton[j][1];\u003Cbr\u003E stroke(255, 0, 0);\u003Cbr\u003E line(partA.position.x, partA.position.y, partB.position.x, partB.position.y);\u003Cbr\u003E }\u003Cbr\u003E }\u003Cbr\u003E}\u003Cbr\u003E\u003C\u002Fpre\u003E\u003Cp class=\"ql-align-justify\"\u003E在这里,我们遍历检测到的骨架并创建连接关键点的线。代码还是相当简单。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 现在,最后一步是重复调用drawSkeleton()和drawKeypoints()函数,以及我们从网络摄像头捕获的视频源。我们可以使用p5.js的draw()函数来实现,该函数在setup()之后直接调用,并重复执行:\u003C\u002Fp\u003E\u003Cpre class=\"ql-align-justify\"\u003Efunction draw() {\u003Cbr\u003E image(video, 0, 0, width, height);\u003Cbr\u003E \u002F\u002F We can call both functions to draw all keypoints and the skeletons\u003Cbr\u003E drawKeypoints();\u003Cbr\u003E drawSkeleton();\u003Cbr\u003E}\u003Cbr\u003E\u003C\u002Fpre\u003E\u003Cp class=\"ql-align-justify\"\u003E接下来,转到终端窗口,进入项目文件夹,然后启动Python服务器:\u003C\u002Fp\u003E\u003Cpre class=\"ql-align-justify\"\u003Epython3 -m http.server\u003Cbr\u003E\u003C\u002Fpre\u003E\u003Cp class=\"ql-align-justify\"\u003E然后转到你的浏览器并打开以下地址:\u003C\u002Fp\u003E\u003Cpre class=\"ql-align-justify\"\u003Ehttp:\u002F\u002Flocalhost:8000\u002F\u003Cbr\u003E\u003C\u002Fpre\u003E\u003Cp class=\"ql-align-justify\"\u003E \u003C\u002Fp\u003E\u003Cp class=\"ql-align-center\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F6534fe15f8bc4156b2d54e6e47760c90\" img_width=\"483\" img_height=\"75\" alt=\"在浏览器中使用TensorFlow.js和Python构建机器学习模型\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp class=\"ql-align-center\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E瞧!你的PoseNet应该很好地检测到了你的身体姿势(如果你已经正确地遵循了所有步骤)。以下是我的模型的情况:\u003C\u002Fp\u003E\u003Cp class=\"ql-align-center\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002Ffaa1a1293ebe4908a4c56cc12ad5e13f\" img_width=\"600\" img_height=\"342\" alt=\"在浏览器中使用TensorFlow.js和Python构建机器学习模型\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp class=\"ql-align-justify\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch1 class=\"ql-align-center\"\u003E\u003Cstrong\u003E尾记\u003C\u002Fstrong\u003E\u003C\u002Fh1\u003E\u003Cp class=\"ql-align-justify\"\u003E你可以看到我为什么喜欢TensorFlow.js。它非常有效率,甚至不需要你在构建模型时担心复杂的安装步骤。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E TensorFlow.js展示了通过将机器学习带到浏览器中使机器学习更容易访问的许多前景。同时,它还具有数据隐私、交互性等优点。这种组合使得它成为数据科学家工具箱中的一个非常强大的工具,特别是如果你想部署你的机器学习应用程序的话。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 在下一篇文章中,我们将探讨如何在浏览器中应用迁移学习,并使用TensorFlow.js部署机器学习或深度学习模型。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E 我们用PoseNet做的项目可以更进一步,通过训练另一个分类器来构建一个姿态识别应用程序。我鼓励你去尝试一下!\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E原文标题:\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E\u003Cstrong\u003EBuild a Machine Learning Model in your Browser using TensorFlow.jsand Python\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E原文链接:\u003C\u002Fp\u003E\u003Cblockquote\u003Ehttps:\u002F\u002Fwww.analyticsvidhya.com\u002Fblog\u002F2019\u002F06\u002Fbuild-machine-learning-model-in-your-browser-tensorflow-js-deeplearn-js\u002F\u003C\u002Fblockquote\u003E\u003Cp class=\"ql-align-justify\"\u003E\u003Cstrong\u003E译者简介\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F75bb3d5ef07a4cc4936ba39a388860d8\" img_width=\"774\" img_height=\"580\" alt=\"在浏览器中使用TensorFlow.js和Python构建机器学习模型\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp class=\"ql-align-justify\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E\u003Cstrong\u003E吴金笛\u003C\u002Fstrong\u003E,雪城大学计算机科学硕士一年级在读。迎难而上是我最舒服的状态,动心忍性,曾益我所不能。我的目标是做个早睡早起的Cool Girl。\u003C\u002Fp\u003E\u003Cp class=\"ql-align-center\"\u003E\u003Cstrong\u003E— 完 —\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp class=\"ql-align-justify\"\u003E关注清华-青岛数据科学研究院官方微信公众平台“\u003Cstrong\u003ETHU数据派\u003C\u002Fstrong\u003E”及姊妹号“\u003Cstrong\u003E数据派THU\u003C\u002Fstrong\u003E”获取更多讲座福利及优质内容。\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E" </div> </div> <div class="handle"> <div class="context"> <ul> <li> 上一篇:><a href="/chaxun/29783.html">风格定位在传统</a></li> <li style="text-align:right"> 下一篇:<a href="/mingxing/29785.html">网易这款游戏有点傻,非要用心做游戏用脚做CG</a></li> </ul> </div> </div> <div class="tuijian"> <h3><span>相关阅读</span></h3> <ul> <li><a href="http://www.sweety-eye.com/html/4778805944/86313118.xml">日本是“寿司大国”,韩国是“泡菜大国”,那老外怎么称呼中国呢</a></li> <li><a href="http://www.sweety-eye.com/html/3672343655/52406398.xml">痛心!通江路附近电瓶车和小汽车相撞,请不要让家人带着悲伤过年</a></li> <li><a href="http://m.sweety-eye.com/20199936031113.html">历史上秦始皇真的不近女色吗?</a></li> <li><a href="http://www.oscooled.com/article5156691706/27006897.xml">蔡徐坤又被黑?演唱会使用垫肩装肌肉,网友直呼:你不难受吗?</a></li> <li><a href="http://www.oscooled.com/article311642341/96371.html">《CS:GO》新手进阶必备!实用有趣创意工坊</a></li> <li><a href="http://m.sweety-eye.com/2019364012248/34139.html">《经济日报》:新三板能否与科创板“错位合唱”?</a></li> <li><a href="http://m.sweety-eye.com/news_866883637/91698.html">娱乐圈男星娶了外国老婆,以为捡到宝,结果40岁之后都发愁!</a></li> <li><a href="http://www.oscooled.com/20199025957488/31120305.xml">奥斯卡最佳外语片,用超现实主义诠释,自闭症和强迫症如何相爱?</a></li> <li><a href="http://m.sweety-eye.com/news_9408937548.html">肩背痛,只要一根筷子,就可解决它(视频指导)</a></li> </ul> <ul> <li></li> </ul> </div> <div class="pindao"> <h3><span>频道推荐</span></h3> <ul> <li> <div class="qietu"> <a href="/xueche/7292.html" target="_blank" title="神奇!齐达内仅用半月激活皇马废柴天王 他可让球队节省两亿"><img src="http://p3.pstatp.com/list/190x124/pgc-image/6161e3fb896e4ac5bea201ab8a6d149f" alt="神奇!齐达内仅用半月激活皇马废柴天王 他可让球队节省两亿" /></a> <p> <a href="/xueche/7292.html" target="_blank" title="神奇!齐达内仅用半月激活皇马废柴天王 他可让球队节省两亿">神奇!齐达内仅用半月激活皇马废柴天王 他可让球队节省两亿</a> </p> </div> </li> <li> <div class="qietu"> <a href="/xueche/33931.html" target="_blank" title="滴滴、美团们的“聚合”新生意"><img src="http://p1.pstatp.com/list/190x124/pgc-image/57c4f49a149748d59a056c31ab735b04" alt="滴滴、美团们的“聚合”新生意" /></a> <p> <a href="/xueche/33931.html" target="_blank" title="滴滴、美团们的“聚合”新生意">滴滴、美团们的“聚合”新生意</a> </p> </div> </li> <li> <div class="qietu"> <a href="/xueche/7672.html" target="_blank" title="为什么微软做不好手机系统?OPPO沈义人的吐槽一针见血!"><img src="http://p1.pstatp.com/list/190x124/pgc-image/73c95ee6ba154fcc81fab7596225353a" alt="为什么微软做不好手机系统?OPPO沈义人的吐槽一针见血!" /></a> <p> <a href="/xueche/7672.html" target="_blank" title="为什么微软做不好手机系统?OPPO沈义人的吐槽一针见血!">为什么微软做不好手机系统?OPPO沈义人的吐槽一针见血!</a> </p> </div> </li> <li> <div class="qietu"> <a href="/xueche/19775.html" target="_blank" title="全球首款橄榄绿配色HIFI播放器!艾利和SR15首发体验评测。"><img src="https://p9.pstatp.com/list/190x124/pgc-image/147822644a054b80ba2ec900c10a5376" alt="全球首款橄榄绿配色HIFI播放器!艾利和SR15首发体验评测。" /></a> <p> <a href="/xueche/19775.html" target="_blank" title="全球首款橄榄绿配色HIFI播放器!艾利和SR15首发体验评测。">全球首款橄榄绿配色HIFI播放器!艾利和SR15首发体验评测。</a> </p> </div> </li> <li> <div class="qietu"> <a href="/xueche/3683.html" target="_blank" title="历史上最残暴民族,拿汉人女子当粮草,终受报应被灭族"><img src="http://mmbiz.qpic.cn/mmbiz_jpg/THdGeztIeOfty7f9mEL8Pl8yPKcO7icabWwDEJvKuy9eTYcYWYFWeibElvibskVNEdcibEY2JvXDsSF6Tl57n3Emicw/0?wx_fmt=jpeg" alt="历史上最残暴民族,拿汉人女子当粮草,终受报应被灭族" /></a> <p> <a href="/xueche/3683.html" target="_blank" title="历史上最残暴民族,拿汉人女子当粮草,终受报应被灭族">历史上最残暴民族,拿汉人女子当粮草,终受报应被灭族</a> </p> </div> </li> <li> <div class="qietu"> <a href="/xueche/22630.html" target="_blank" title="封神:情敌上线妲己失宠,狐妖子虚特地安慰,目的竟是一样的?"><img src="http://p3.pstatp.com/list/190x124/pgc-image/3ce2aeeeebad4f6f93c3ef4ed31c58d7" alt="封神:情敌上线妲己失宠,狐妖子虚特地安慰,目的竟是一样的?" /></a> <p> <a href="/xueche/22630.html" target="_blank" title="封神:情敌上线妲己失宠,狐妖子虚特地安慰,目的竟是一样的?">封神:情敌上线妲己失宠,狐妖子虚特地安慰,目的竟是一样的?</a> </p> </div> </li> <li> <div class="qietu"> <a href="/xueche/10143.html" target="_blank" title="母乳喂养期间,妈妈是否需忌口?"><img src="https://p3.pstatp.com/list/dfic-imagehandler/8ff9c8bf-9049-40b5-b86b-d615a3733ea7" alt="母乳喂养期间,妈妈是否需忌口?" /></a> <p> <a href="/xueche/10143.html" target="_blank" title="母乳喂养期间,妈妈是否需忌口?">母乳喂养期间,妈妈是否需忌口?</a> </p> </div> </li> <li> <div class="qietu"> <a href="/xueche/2704.html" target="_blank" title="大观自成设计丨中南·湖悦天境:融汇中西的当代美学设计"><img src="http://mmbiz.qpic.cn/mmbiz_jpg/3QicsJHUxPlloS1WsuB28xggdtRgCPSE3nhZ8r8f6ElFnbbzgpiaElIiaHnrTSQR9ywcXrwicvWxLA4uY4zUxicErUQ/0?wx_fmt=jpeg" alt="大观自成设计丨中南·湖悦天境:融汇中西的当代美学设计" /></a> <p> <a href="/xueche/2704.html" target="_blank" title="大观自成设计丨中南·湖悦天境:融汇中西的当代美学设计">大观自成设计丨中南·湖悦天境:融汇中西的当代美学设计</a> </p> </div> </li> <li> <div class="qietu"> <a href="/xueche/1774.html" target="_blank" title="小说免费:情爱画廊"><img src="http://mmbiz.qpic.cn/mmbiz_jpg/DQ1BSRYITEEH65h0iciaSJ4HGucrBL2NXWTtyO8xCqs1nwibqACaZgmnqiaJ8xOJzicibLwT82ygVq9mpuJNeILxic8eg/0?wx_fmt=jpeg" alt="小说免费:情爱画廊" /></a> <p> <a href="/xueche/1774.html" target="_blank" title="小说免费:情爱画廊">小说免费:情爱画廊</a> </p> </div> </li> </ul> </div> </div> <div class="right"> <div class="gengx"> <div class="ctil"><span>最近更新</span></div> <div class="nron"> <div class="fir"> <a href="/xueche/34735.html" title="“捷达牌”新车VS5即将上市,网友:“贴标大众”来抢更多市场了" target="_blank"> <div class="cpw"><img src="http://p1.pstatp.com/list/190x124/pgc-image/7bbf13859f794abe957890ec0caaaddd" alt="“捷达牌”新车VS5即将上市,网友:“贴标大众”来抢更多市场了" /></div> <p>“捷达牌”新车VS5即将上市,网友:“贴标大众”来抢更多市场了</p> </a> </div> <div class="sec"> <ol> <li><a href="/xueche/34718.html" target="_blank" title="没个背景谁敢当老板啊!部下也有几把刷子,这公司">没个背景谁敢当老板啊!部下也有几把刷子,这公司</a></li> <li><a href="/xueche/34604.html" target="_blank" title="陈锡文:判断乡村情况要靠科学统计而不是返乡故事">陈锡文:判断乡村情况要靠科学统计而不是返乡故事</a></li> <li><a href="/xueche/34596.html" target="_blank" title="24岁小伙过量喝饮料住进ICU">24岁小伙过量喝饮料住进ICU</a></li> <li><a href="/xueche/34478.html" target="_blank" title="A股108位单身女董秘介绍大全(我们尽力啦)">A股108位单身女董秘介绍大全(我们尽力啦)</a></li> <li><a href="/xueche/34464.html" target="_blank" title="和漏液说说拜拜,安钛克风影CPU风冷散热器开箱体验">和漏液说说拜拜,安钛克风影CPU风冷散热器开箱体验</a></li> </ol> </div> </div> </div> <div class="jiepai"> <div class="ctil"><span>编辑推荐</span></div> <div class="nron"> <ul> <li> <a href="/xueche/2434.html" target="_blank" title="国新办举行“最美退役军人”典型代表与新闻媒体见面会"> <div class="cpw"><img src="http://mmbiz.qpic.cn/mmbiz_jpg/QbJFIhLDyb3rCJ7QT2crxqsBSnNXyniarnLNbOKuvro69NkczTQCziaV2cqq8uZcBxbxr33V3pibkgY2fMWM0OZicQ/0?wx_fmt=jpeg" alt="国新办举行“最美退役军人”典型代表与新闻媒体见面会" /></div> <p>国新办举行“最美退役军人”典型代表与新闻媒体见面会</p> </a> </li> <li> <a href="/xueche/12763.html" target="_blank" title="曾是周星驰电影《功夫》中的特型演员,今与两米高妻子住郊区平房"> <div class="cpw"><img src="http://mmbiz.qpic.cn/mmbiz_jpg/Ihp70OVZOQeQibgjeooBH4Dt4iah7lJRRBKIWDOTdp4c6JcOcjgn2ID7QuSucHSalc5HJpfmzfjoia0d50UW1Cu0A/0?wx_fmt=jpeg" alt="曾是周星驰电影《功夫》中的特型演员,今与两米高妻子住郊区平房" /></div> <p>曾是周星驰电影《功夫》中的特型演员,今与两米高妻子住郊区平房</p> </a> </li> <li> <a href="/xueche/3301.html" target="_blank" title="育儿 | 你的亲子陪伴指标合格吗?"> <div class="cpw"><img src="http://mmbiz.qpic.cn/mmbiz_jpg/aIFHKbia7I51FspFs9O5q9f3lkDLy8HDk6wbkKkcfJDBH5vcIHcMGEzm8FLKIicW3wkpIhPvIKWD0H4RWr3xeINQ/0?wx_fmt=jpeg" alt="育儿 | 你的亲子陪伴指标合格吗?" /></div> <p>育儿 | 你的亲子陪伴指标合格吗?</p> </a> </li> <li> <a href="/xueche/9494.html" target="_blank" title="Arduino物联网开发实战2 --数据反馈"> <div class="cpw"><img src="http://p1.pstatp.com/list/190x124/pgc-image/e2928cf4f03d4245bcb7b300d4ef20d2" alt="Arduino物联网开发实战2 --数据反馈" /></div> <p>Arduino物联网开发实战2 --数据反馈</p> </a> </li> <li> <a href="/xueche/2322.html" target="_blank" title="人生守住这3个“旧”,福报不请自来(深度好文)"> <div class="cpw"><img src="http://mmbiz.qpic.cn/mmbiz_jpg/koyJicV96QibFwyibZTbvdd3RydcZUyeNNRBH6Ly4yMxN8GTupjJmuBmcfamwao3INS9hHXeNszdtzicnOkHvSBjaw/0?wx_fmt=jpeg" alt="人生守住这3个“旧”,福报不请自来(深度好文)" /></div> <p>人生守住这3个“旧”,福报不请自来(深度好文)</p> </a> </li> <li> <a href="/xueche/13664.html" target="_blank" title="《少年可期》:范丞丞唱情歌,嗓音醇厚台风稳"> <div class="cpw"><img src="https://p1.pstatp.com/list/190x124/pgc-image/f3d58966f60141a4ab2a4610c9a58009" alt="《少年可期》:范丞丞唱情歌,嗓音醇厚台风稳" /></div> <p>《少年可期》:范丞丞唱情歌,嗓音醇厚台风稳</p> </a> </li> </ul> </div> </div> <div class="gengx"> <div class="ctil"><span>热点关注</span></div> <div class="nron"> <div class="sec"> <ol> <li><a href="/xueche/21582.html" target="_blank" title="如果只有一个“胶囊衣橱”,你需要哪些单品才能成为时尚小公主?">如果只有一个“胶囊衣橱”,你需要哪些单品才能成为时尚小公主?</a></li> <li><a href="/xueche/9498.html" target="_blank" title="遗憾的告诉大家,时间机器无法实现!">遗憾的告诉大家,时间机器无法实现!</a></li> <li><a href="/xueche/1275.html" target="_blank" title="搞笑图片:姑娘,,出门没照镜子吗?裙子被咬成啥样了,不觉得尴尬吗?">搞笑图片:姑娘,,出门没照镜子吗?裙子被咬成啥样了,不觉得尴尬吗?</a></li> <li><a href="/xueche/1433.html" target="_blank" title="【财经早八点】1月3日(星期四)">【财经早八点】1月3日(星期四)</a></li> <li><a href="/xueche/30948.html" target="_blank" title="科学上网,涨价在即,机不可失">科学上网,涨价在即,机不可失</a></li> <li><a href="/xueche/25498.html" target="_blank" title="德云社郭德纲众多弟子,愚笨的岳云鹏起点最低,为何现在人气最高">德云社郭德纲众多弟子,愚笨的岳云鹏起点最低,为何现在人气最高</a></li> <li><a href="/xueche/27190.html" target="_blank" title="十首开怀诗词:你的笑,融化了冬天的冰雪">十首开怀诗词:你的笑,融化了冬天的冰雪</a></li> <li><a href="/xueche/26661.html" target="_blank" title="炉石传说:机械崛起让萨满也风光起来了,每一把都在期待惊喜">炉石传说:机械崛起让萨满也风光起来了,每一把都在期待惊喜</a></li> <li><a href="/xueche/1166.html" target="_blank" title="超能课堂(162):SSD大敌当前,HDD硬盘100TB容量还有大招">超能课堂(162):SSD大敌当前,HDD硬盘100TB容量还有大招</a></li> <li><a href="/xueche/475.html" target="_blank" title="喝绿茶有什么好处和坏处?一篇文章就来告诉你,可别错过了">喝绿茶有什么好处和坏处?一篇文章就来告诉你,可别错过了</a></li> </ol> </div> </div> </div> <div class="rcross"> <div class="div1" id="float"> <script>document.write(unescape('%3Cdiv id="hm_t_117167"%3E%3C/div%3E%3Cscript charset="utf-8" src="//crs.baidu.com/t.js?siteId=3276d57f45c584284d5bf21777ff50a4&planId=117167&async=0&referer=') + encodeURIComponent(document.referrer) + '&title=' + encodeURIComponent(document.title) + '&rnd=' + (+new Date) + unescape('"%3E%3C/script%3E'));</script> </div> </div> </div> </div> </div> <div class="footerd"> <ul> <li>Copyright © all rights reserved 版权所有 NIEBURG丽堡格</li> </ul> </div> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <div style="display:none"> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?f182f4f260e6cf3f33b51893da957525"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div></body> </html>