上一個

下一個

練習 - 定型機器學習模型並建置 Web 介面來使用該模型

已完成

現在您可以使用與您的應用程式所用影像不同的影像來開始定型自訂機器學習模型。 您應用程式中的影像將會用來測試模型在執行推斷時是否正確。 您會使用不同的影像集，在自訂視覺 AI 的介面中建立模型本身。

注意

您只會定型幾個影像，但在生產系統中這樣的數量無法建立優質的模型。 此定型影像集僅供示範之用。

下載這個有 12 個定型影像的壓縮檔案，並將其解壓縮到本機電腦。

自訂視覺 AI

在瀏覽器中，瀏覽至自訂視覺 AI 並登入。 建立名為巧克力還是大麥町的新專案。 在快顯視窗中，為專案提供描述並配置資源，以便能在雲端中定型模型。 如有需要，請建立新的專案。

請務必將此專案的類型指定為 [分類]，因為此專案只會判斷類型。 這是多級分類類型的專案，因為此專案會為每個影像提供一個單一標籤。 選擇 [一般 (精簡)]，因為您要為 TensorFlow.js 匯出它。

定型您的模型

現在您已做好準備，可在影像集上定型。

在您下載的資料夾中，您會發現兩個資料夾，一個標示為 'ice cream'，另一個標示為 'dalmatian'。 按一下自訂視覺 AI 專案中的 [新增圖示] 按鈕，然後選取 dalmatian 資料夾中的影像。 標記那些 dalmatian。 對 ice cream 資料夾執行相同的程序，標記那些 ice cream。

您現在已將 12 個定型影像上傳並標記。 按一下頂端的 [定型] 按鈕，然後選取 [快速定型]。 您會看到已分析出效能的結果。 在冰淇淋或大麥町的新影像上測試您的資料。 這裡有一個要嘗試的影像：

將此影像拖曳到您的桌面，然後選取自訂視覺 AI 介面中的 [快速測試] 按鈕，並進行瀏覽以尋找桌面上的影像。 此模型會將這個新影像分類為大麥町！

下載模型

選取自訂視覺 AI 介面頂端的[匯出] 按鈕，即可下載模型及其相關聯的資產。 選取 TensorFlow 作為模型類型，並在下拉式清單中選擇 tensorflow.js。 封裝完成時，請選取 [下載]。

ZIP 檔案便會匯出到本機電腦。 解壓縮此檔案，並將產生的資料夾命名為 models。 在此資料夾內，您會找到 4 個檔案：cvexport.manifest 檔案、labels.txt 檔案、model.json 檔案和 weights.bin。

將整個 models 資料夾上傳至 Web 應用程式的 public 目錄。

現在您可以整合這些檔案，使其可供應用程式使用。

將模型整合到 Web 應用程式

首先要做的是，將特殊的 npm 套件安裝到 Web 應用程式 customvision-tfjs 中。 此程式庫可讓 Web 應用程式使用在自訂視覺 AI 上定型的模型來利用 tensorflow.js。

1. 在 Web 應用程式根目錄中的 package.json 檔案中，將 "customvision-tfjs": "^1.0.1", 新增至 dependencies 清單。

2. 在相同的檔案中，再將 "raw-loader": "^4.0.0", 新增至 devDependencies 清單。 您需要此套件才能管理從 Vue 應用程式讀取 .txt 檔案的作業。

3. 在相同檔案中，將 "webpack-cli": "^3.3.10" 新增至 devDependencies 清單，讓 Webpack CLI 可在應用程式內使用，其為文字檔剖析所需。

如果 Web 應用程式正在執行，請使用 Ctrl+C 將其停止，並透過終端從根目錄執行 npm i。 這會安裝此套件。

現在您可以重新啟動您的 Web 應用程式，並繼續作業 (npm run serve)。

接下來，藉由在 DetectImage.vue 中的已開啟 <script> 標籤正下方新增這一行，來整合您剛才安裝的套件：

import * as cvstfjs from "customvision-tfjs";
import labels from "raw-loader!../../public/models/labels.txt";

現在，您必須允許原始載入器套件讀取 labels.txt 檔案以獲得模型的標籤。

若要這麼做，請在應用程式的根目錄中建立名為 webpack.config.js 的新檔案。 在此檔案中，新增下列程式碼。

module.exports = {
    module: {
        rules: [
            {
                test: /\.txt$/i,
                use: 'raw-loader',
            },
        ],
    },
};

接下來，在 DetectImage.vue 的 <script> 區塊中，再將三個資料元素新增至 data 物件。

labels: labels,
model: null,
predictions: []

應用程式現在已做好準備，可取用模型和標籤清單並建立預測陣列。

現在，在 computed 物件尾端的結尾逗號後面新增 mounted 生命週期勾點。

async mounted() {
    this.image++;
    //load up a new model
    this.model = new cvstfjs.ClassificationModel();
    await this.model.loadModelAsync("models/model.json");
    //parse labels
    this.labels = labels.split("\n").map(e => {
      return e.trim();
    });
    //run prediction
    this.predict();
  },

應用程式一旦掛接便會引發這個非同步方法，然後遞增影像陣列、載入模型、剖析標籤，以及執行預測方法。

將非同步預測方法新增至 methods 物件。

async predict() {
      //execute inference
      let prediction = await this.model.executeAsync(this.$refs.img);
      let label = prediction[0];
      //build up a predictions object by parsing details to labels and probability
      this.predictions = label.map((p, i) => {
        return { index: i, label: this.labels[i], probability: p * 100 };
      });
    },

這個方法會向模型顯示一個影像，而此模型會傳回預測，以及其衍生的正確性機率乘以 100，使其顯示為正確性百分比。

完成 UI

最後，您已做好準備而可在 UI 中顯示這些預測。

在 DetectImage.vue 的<範本>中，將 <div> 新增至結尾 <div> 上方。

<div v-for="pred in predictions" :key="pred.index">{{ pred.label }}: {{ pred.probability.toFixed(0) + '%' }}</div>
<div v-if="!predictions.length">hmm.....</div>

此程式碼會顯示標籤，以及影像符合此標籤的機率。

如果您現在執行應用程式，則在您選取 [下一步] 來讓影像旋轉時，應該會出現預測內容。

新增 web.config 檔案

要讓應用程式在 Azure 中的 Windows 執行個體上執行所必須做的最後一件事，就是在 public 資料夾中新增名為 web.config 的檔案。 此檔案會讓 .json 模型做好準備而可供伺服器讀取。 將此程式碼新增至該檔案。

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <remove fileExtension=".json"/>
      <mimeMap fileExtension=".json" mimeType="application/json"/>
    </staticContent>
  </system.webServer>
</configuration>

將程式碼發佈至 GitHub

現在是將程式碼基底推送至 GitHub 的好時機。 在 GitHub 中建立新的存放庫，並將程式碼基底與其連結。

git remote add origin https://github.com/<your-github-handle>/<repo-name>.git

現在您可以使用 Visual Studio Code 的 Git 工具來認可程式碼，並將其推送至 GitHub 中的主要伺服器。

繼續