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

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

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

问题描述

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

解决方案

加载 TensorFlow.js 和MobileNet 模型

在编辑器中创建一个HTML文件，命名为index.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 文件，在 部分中添加如下行，并删除我们用于加载狗图像的 标签。

打开 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 的 标签的末尾添加 KNN 分类器的导入（你仍然需要 MobileNet，所以不要删除它的导入）：

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

add  a      add a      add a

在 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 团队

---

   

微信号：算法与编程之美          

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

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