在黑胡桃社區的體驗案例中，有一個“人工智能教練”，它其實是一個自定義的圖像分類器。使用 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

本文由頭條號「黑胡桃實驗室」敲制，歡迎非商業轉載，轉載請帶上頭條號名稱及原文鏈接，並在文章開頭明顯位置註明原文地址、原文作者、譯文地址和譯者，以表示對作者和譯者的感謝。

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

關鍵字: 人工智能 分類器 遷移