基于 TensorFlow.js 的迁移学习图像分类器

标签: dev | 发表时间:2019-12-08 00:00 | 作者:
出处:http://itindex.net/relian

欢迎点击「算法与编程之美」↑关注我们!

本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。

问题描述

TensorFlow.js是一个基于deeplearn.js构建的强大而灵活的Javascript机器学习库,它可直接在浏览器上创建深度学习模块。使用它可以在浏览器上创建CNN(卷积神经网络)、RNN(循环神经网络)等等,且可以使用终端的GPU处理能力训练这些模型。接下来我们将学习如何建立一个简单的“可学习机器”——基于 TensorFlow.js 的迁移学习图像分类器。

解决方案

加载 TensorFlow.js 和MobileNet 模型

在编辑器中创建一个HTML文件,命名为index.html,添加以下内容。

<!DOCTYPE html>

<html>

       <head>

              <meta  charset="utf-8" />

              <title></title>

              <!--加载最新版本的TensorFlow.js -->

              <script  src="https://unpkg.com/@tensorflow/tfjs"></script>

         <script  src="https://unpkg.com/@tensorflow-models/mobilenet"></script>

       </head>

       <body>

       <div  id="console></div>

     <!--添加一个用于测试的图像-->

     <img id="img" crossOrigin  src="https://i.imgur.com/JlUvsxa.jpg" width=227 height=227/>

     <!-- 加载 index.js 在内容页之后-->

     <script src="js/index.js"></script>

             

       </body>

</html>

注意:在img里请使用有用的图片地址

在浏览器中设置 MobileNet 用于预测

在代码编辑器中打开/创建index.js 文件,添加以下代码:

let net;

async function app(){

   console.log('Loading mobilenet..');

// 加载模型

   net = await mobilenet.load();

   console.log('Sucessfully loaded model');

// 通过模型预测图像

   const imgEl = document.getElementById('img');

   const result = await net.classify(imgEl);

   console.log(result);

}

app();

在浏览器中测试 MobileNet 的预测

运行index.html文件,调出JavaScript控制台,你将看见一张狗的照片,而这就是MobileNet 的预测结果。

通过网络摄像头图像在浏览器中执行 MobileNet 预测

接下来,我们来设置网络摄像头来预测由网络摄像头传输的图像。

现在,让我们让它更具交互性和实时性。让我们设置网络摄像头来预测由网络摄像头传输的图像。

首先要设置网络摄像头的视频元素。打开 index.html 文件,在 <body> 部分中添加如下行,并删除我们用于加载狗图像的<img> 标签。

<video autoplay playsinline muted  id="webcam" width="224"  height="224"></video>      

打开 index.js 文件并将webcamElement 添加到文件的最顶部。

const webcamElement =  document.getElementById('webcam');

 在同一个 index.js 文件中,在调用 “app()” 函数之前添加网络摄像头的设置函数:

async function setupWebcam() { 

       return  new Promise((resolve, reject) => {     

              const  navigatorAny = navigator;

         navigator.getUserMedia = navigator.getUserMedia ||

            navigatorAny.webkitGetUserMedia  || navigatorAny.mozGetUserMedia ||

            navigatorAny.msGetUserMedia;   

         if (navigator.getUserMedia) {

            navigator.getUserMedia({video:  true},

                  stream=>  {

                         webcamElement.srcObject  = stream;

                         webcamElement.addEventListener('loadeddata',  () => resolve(), false);       

                  },

                  error=>  reject());   

         }else{

                reject();

         }

     });

}

在之前添加的 app() 函数中,你可以删除通过图像预测的部分,用一个无限循环,通过网络摄像头预测代替。

async function app(){

     console.log('Loading mobilenet..');

// 加载模型

     net = await mobilenet.load();

     console.log('Sucessfully loaded model');

     await setupWebcam();

     while(true){

            const result = await  net.classify(webcamElement);

         document.getElementById('console').innerText =`

            prediction:  ${result[0].className}\n

            probability:  ${result[0].probability}

         `;

 

     // 给自己一些喘息的空间

     // 等待下一个动画帧开始

     await tf.nextFrame();

  }

}

如果你在网页中打开控制台,现在你应该会看到 MobileNet 的预测和网络摄像头收集到的每一帧图像。

在 MobileNet 预测的基础上添加一个自定义的分类器

现在,让我们把它变得更加实用。我们使用网络摄像头动态创建一个自定义的 3 对象的分类器。我们将通过 MobileNet 进行分类,但这次我们将使用特定网络摄像头图像在模型的内部表示(激活值)来进行分类。

我们将使用一个叫做 "K-Nearest NeighborsClassifier" 的模块,他将有效的让我们把摄像头采集的图像(实际上是 MobileNet 中的激活值)分成不同的类别,当用户要求做出预测时,我们只需选择拥有与待预测图像最相似的激活值的类即可。

在 index.html 的<head> 标签的末尾添加 KNN 分类器的导入(你仍然需要 MobileNet,所以不要删除它的导入):

<script  src="https://unpkg.com/@tensorflow-models/knn-classifier"></script>

在 index.html 视频部分下面添加三个按钮。这些按钮将用于向模型添加训练图像。

<button id="class-a">add  a</button>

     <button id="class-b">add a</button>

     <button id="class-c">add a</button>

在 index.js 的顶部,创建一个分类器

const classifier =  knnClassifier.create();

更新 app 函数;

async function app(){

     console.log('Loading mobilenet..');

     //losd the model

     net = await mobilenet.load();

     console.log('Sucessfully loaded model');

     

     await setupWebcam();

     //从网络摄像头中读取图像并将其与特定类关联

     const addExample classId=>{

            // 获取 MobileNet 中间的 'conv_preds' 的激活值

         // 并将其传递给 KNN 分类器

         const activation = net.infer(webcamElement, 'conv_preds');

        // 将中间激活值传递给分类器

         classifier.addExample(activation, classId);     

     };

      

     // 单击该按钮是,为该类添加一个实例

     document.getElementById("class-a").addEventListener('click',()=>addExample(0));

     document.getElementById("class-b").addEventListener('click',()=>addExample(1));

     document.getElementById("class-c").addEventListener('click',()=>addExample(2));

     while(true){

            if(classifier.getNumClasses()  > 0) {     

            // 获取  MobileNet 在网络摄像头中图像上的激活值

            const activation = net.infer(webcamElement,  'conv_preds');          

            // 从分类器模块上获取最可能的类

            const result = await  classifier.predictClass(activation);

            const classes = ['A', 'B',  'C'];     

             document.getElementById('console').innerText = `      

                prediction:  ${classes[result.classIndex]}\n       

                probability:  ${result.confidences[result.classIndex]}       

            `;

     }         

     await tf.nextFrame();

  }

}

当你加载 index.html 页面时,你可以使用常用对象或面部表情/手势为这三个类中的每一个类捕获图像。每次单击其中一个 "Add" 按钮,就会向该类添加一个图像作为训练实例。当你这样做的时候,模型会继续预测网络摄像头的图像,并实时显示结果。

注意:在这里可能会报错,出现:Uncaught (in promise)TypeError: Failed to fetch。

这个错误提示是网络连接超时的意思,解决办法如下:

清除浏览器历史记录和缓存。Google Chrome浏览器清除历史记录和缓存:转到“自定义和控制”(Chrome浏览器右上角) – >然后单击“设置” –>单击下面的“显示高级设置”按钮 – >然后到“隐私”部分 – >点击“清除浏览数据”按钮 – >检查新弹出窗口中的所有框 – >然后单击“清除浏览数据”按钮。

结语

我们在这里主要是加载并运行一个名为 MobileNet 的流行的预训练模型从而实现在浏览器中的图像分类问题。使用“迁移学习”技术,这项技术将使用预训练好的 MobileNet 模型为你的应用定制以及引导训练。在学习和实现例子的过程中,会遇到许多的问题,而我们则需要去静下心解决这些问题,学会在我们写的代码中找问题。



END


实习编辑   |   王楠岚

责      编   |   杨金月


 where2go 团队


   

微信号:算法与编程之美          

长按识别二维码关注我们!

温馨提示: 点击页面右下角“写留言”发表评论,期待您的参与!期待您的转发!


相关 [tensorflow js 学习] 推荐:

深度学习利器:TensorFlow实战

- - 孟飞阳的博客
深度学习及TensorFlow简介. 深度学习目前已经被应用到图像识别,语音识别,自然语言处理,机器翻译等场景并取得了很好的行业应用效果. 至今已有数种深度学习框架,如TensorFlow、Caffe、Theano、Torch、MXNet,这些框架都能够支持深度神经网络、卷积神经网络、深度信念网络和递归神经网络等模型.

TensorFlow 1.0 把机器学习引入智能手机

- - IT瘾-tuicool
点击上方蓝色“网路冷眼”可以订阅哦. TensorFlow 1.0 是 Google机器学习库的首个主要版本,带来许多革命性的变化,包括了提供移动设备进行高效深度学习的功能. Google的开源深度学习框架TensorFlow已经发布了一个完整版1.0的发布候选版本. 版本1.0不仅改进了机器学习函数的框架,而且让用户使用 Python 和 Java 语言进行TensorFlow 开发更加容易,并改进了调试功能.

Keras:基于Theano和TensorFlow的深度学习库

- -
Keras:基于Theano和TensorFlow的深度学习库. Keras是一个高层神经网络API,Keras由纯Python编写而成并基Tensorflow或Theano. Keras 为支持快速实验而生,能够把你的idea迅速转换为结果,如果你有如下需求,请选择Keras:. 简易和快速的原型设计(keras具有高度模块化,极简,和可扩充特性).

基于TensorFlow Serving的深度学习在线预估

- - 美团点评技术团队
随着深度学习在图像、语言、广告点击率预估等各个领域不断发展,很多团队开始探索深度学习技术在业务层面的实践与应用. 而在广告CTR预估方面,新模型也是层出不穷: Wide and Deep[1]、DeepCross Network[2]、DeepFM[3]、xDeepFM[4],美团很多篇深度学习博客也做了详细的介绍.

基于 TensorFlow Serving 的深度学习在线预估

- - IT瘾-dev
随着深度学习在图像、语言、广告点击率预估等各个领域不断发展,很多团队开始探索深度学习技术在业务层面的实践与应用. 而在广告CTR预估方面,新模型也是层出不穷: Wide and Deep[1]、DeepCross Network[2]、DeepFM[3]、xDeepFM[4],美团很多篇深度学习博客也做了详细的介绍.

深度学习在花椒直播的应用(Tensorflow 原理篇)

- - IT瘾-dev
殷雅俊,2018年北京邮电大学硕士毕业,自2017年下半年来一直在花椒实习,随后进入花椒直播智能工程组担任算法工程师,主要负责花椒直播个性化推荐算法研发,花椒图像识别算法研发等工作. 1.花椒直播的深度学习使用. 使用Spark进行数据清洗,构建用户画像和物品画像,挖掘数据特征,形成数据集存储在HDFS.

Facebook开源移动端深度学习加速框架,比TensorFlow Lite快一倍

- - IT瘾-geek
方栗子 发自 凹非寺. 量子位 出品 | 公众号 QbitAI. Facebook发布了一个开源框架,叫 QNNPACK,是手机端神经网络计算的加速包. 官方表示,它可以 成倍提升神经网络的推理效率,几乎比 TensorFlow Lite快一倍. 这个框架,能够为很多运算加速,比如 DW卷积 (Depthwise Convolution) ,许多先进的架构里面都用得到.

深度 | 对比深度学习十大框架:TensorFlow最流行但并不是最好

- - IT瘾-geek
2016 年已经过去,BEEVA Labs 数据分析师 Ricardo Guerrero Gomez-Ol 近日在 Medium 上发表了一篇文章,盘点了目前最流行的深度学习框架. 他写道:「我常听到人们谈论深度学习——我该从哪里开始呢. TensorFlow 是现在最流行的吧. 我听说 Caffe 很常用,但会不会太难了.

WebView JS 交互

- - ITeye博客
WebView加jquery做页面会怎么样呢. // 创建WebView对象. // 把programList添加到js的全局对象window中,. // 这样就可以使用window.programList来获取数据. * 定义js回调java函数. // 绑定键盘的向上,向下按钮事件触发相应的js事件.

TensorFlow-dev-summit:那些 TensorFlow 上好玩的和黑科技

- - IT瘾-dev
本文属于介绍性文章,其中会介绍许多TensorFlow的新feature和summit上介绍的一些有意思的案例,文章比较长,可能会花费30分钟到一个小时. Google于2017年2月16日(北京时间)凌晨2点在美国加利福尼亚州山景城举办了首届TensorFlow开发者峰会. Google现场宣布全球领先的深度学习开源框架TensorFlow正式对外发布V1.0版本,并保证Google的本次发布版本的API接口满足生产环境稳定性要求.