在黑胡桃社区的体验案例中，有一个“人工智能教练”，它其实是一个自定义的图像分类器。使用 TensorFlow.js 这个强大而灵活的 Javascript 机器学习库可以很轻松地构建这样的图像分类器，并在浏览器中即时训练。

可到该地址中体验 https://teachable-machine.blackwalnut.tech/ （电脑打开体验更佳）

首先我们要加载并运行一个名为 MobileNet 的预训练模型，在浏览器中进行图像分类；然后通过迁移学习为我们的应用定制预训练好的 MobileNet 模型，并进行引导训练。在开始之前，我们也要先做好一些准备：

• 最新版本的 Chrome 或者其他浏览器；
• 了解 HTML、CSS、JavaScripe 和 Chrome 开发者工具（或你首选浏览器的开发者工具）。

推荐使用黑胡桃实验室社区的云平台进行此案例的尝试：https://blackwalnut.tech/tfboost/introduce。

现在，来看看“人工智能教练”是怎么诞生的吧！

加载 TensorFlow.js 和 MobileNet 模型

我们先在编辑器中打开 index.html 并添加以下内容：

<code>                      
             
      
/<code>

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

接下来，在代码编辑器中打开/创建 index.js 文件，添加以下代码：

<code>let net;
async function app() {  console.log('Loading mobilenet..');
  // Load the model.  net = await mobilenet.load();  console.log('Successfully loaded model');
  // Make a prediction through the model on our image.  const imgEl = document.getElementById('img');  const result = await net.classify(imgEl);  console.log(result);}
app();/<code>

在浏览器中测试 MobileNet 的预测

因为要运行该网页，我们在 Web 浏览器中打开了 index.html 即可。但如果你正在使用云控制台，只需刷新预览页面。

这时候，我们在开发者工具的 JavaScipt 控制台中看到了一张狗狗的照片。

这是 MobileNet 的预测结果！注意，这时候可能需要一点时间来下载模型，请耐心等待！——这个图像有没有分类正确呢？

其实在手机上我们也可以体验这个有趣的“人工智能教练”。

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

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

首先要设置的是网络摄像头的视频元素。打开 index.html 文件，在

<code><video>
/<code>

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

<code>const webcamElement = document.getElementById('webcam');
/<code>

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

<code>async function app() {  console.log('Loading mobilenet..');
  // Load the model.  net = await mobilenet.load();  console.log('Successfully loaded model');
  // Create an object from Tensorflow.js data API which could capture image   // from the web camera as Tensor.  const webcam = await tf.data.webcam(webcamElement);  while (true) {    const img = await webcam.capture();    const result = await net.classify(img); 

    document.getElementById('console').innerText = `      prediction: ${result[0].className}\\n      probability: ${result[0].probability}    `;    // Dispose the tensor to release the memory.    img.dispose();
    // Give some breathing room by waiting for the next animation frame to    // fire.    await tf.nextFrame();  }}/<code>

打开控制台，现在我们就可以看到 MobileNet 的预测和网络摄像头收集到的每一帧图像了。

这可能有些不可思议，因为 ImageNet 数据集看起来不太像出现在网络摄像头中的图像。不过大家可以把狗的照片先放在你的手机上，再放在笔记本电脑的摄像头前来测试这一点。

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

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

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

在 index.html 的

<code>
/<code>

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

<code>
<button>Add A/<button><button>Add B/<button><button>Add C/<button>

/<code>

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

<code>const classifier = knnClassifier.create();
/<code>

更新 app 函数

<code>async function app() {  console.log('Loading mobilenet..');
  // Load the model.  net = await mobilenet.load();  console.log('Successfully loaded model');
  // Create an object from Tensorflow.js data API which could capture image   // from the web camera as Tensor.  const webcam = await tf.data.webcam(webcamElement);
  // Reads an image from the webcam and associates it with a specific class  // index.  const addExample = async classId => {    // Capture an image from the web camera.    const img = await webcam.capture();
    // Get the intermediate activation of MobileNet 'conv_preds' and pass that    // to the KNN classifier.    const activation = net.infer(img, 'conv_preds');
    // Pass the intermediate activation to the classifier.    classifier.addExample(activation, classId);
    // Dispose the tensor to release the memory.    img.dispose();  };
  // When clicking a button, add an example for that class.  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) {      const img = await webcam.capture();
      // Get the activation from mobilenet from the webcam.      const activation = net.infer(img, 'conv_preds');      // Get the most likely class and confidence from the classifier module.      const result = await classifier.predictClass(activation);
      const classes = ['A', 'B', 'C'];      document.getElementById('console').innerText = `        prediction: ${classes[result.label]}\\n        probability: ${result.confidences[result.label]}      `;
      // Dispose the tensor to release the memory.      img.dispose();    }
    await tf.nextFrame();  }}/<code>

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

总结

到这里，我们已经成功使用 Tensorflow.js 实现了一个简单的机器学习 Web 应用程序——图像分类器，而且随时可以在浏览器上打开并进行训练。

原文链接：

https://codelabs.developers.google.com/codelabs/tensorflowjs-teachablemachine-codelab/#8

本文由头条号「黑胡桃实验室」敲制，欢迎非商业转载，转载请带上头条号名称及原文链接，并在文章开头明显位置注明原文地址、原文作者、译文地址和译者，以表示对作者和译者的感谢。

閱讀更多 黑胡桃實驗室 的文章

關鍵字: 人工智能 分类器 迁移