冰淇淋还是斑点狗？谁能说得清？！构建一个基于机器学习的 PWA

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

图片由Karen Zack提供

使用 Vue.js 和自定义视觉 AI 创建一个用于图像推理的 PWA

提示！想在酷炫的互动环境中体验本教程并获得完成徽章吗？快去微软学习平台查看配套模块吧！

我一直以来都对Karen Zack（Instagram账号：@teenybiscuit）创作的一系列Instagram图片着迷不已——这种着迷难以言喻。她为近期被沉重新闻笼罩的人们提供了一项绝妙的服务：能够从鳄梨酱中辨认出鹦鹉，从百吉饼中辨认出腊肠犬，从炸鸡中辨认出拉布拉多犬等等。以下是她这项开创性作品的一个例子：

小猫大战焦糖

小狗大战百吉饼

鹦鹉大战鳄梨酱

注意：您可以按照 Microsoft Learn 中的步骤构建应用，那里对此内容有更深入的讲解。快来看看吧！完整的代码库也在这里。

处理这类棘手的图像既能让我们放松心情，又能帮助我们探索测试各种图像识别和分类机器学习方法的新途径。在本教程中，你将学习如何使用一款名为Custom Vision AI 的简洁图像推理工具，这样就无需从头开始训练模型。你将构建一个 Web 应用程序，该程序可以循环处理这些图像，以确定模型是否能够做出正确的预测。

使用基于预训练模型的认知服务，是体验机器学习模型的绝佳方式。您可以利用一些优秀的Azure 机器学习认知服务（我最喜欢的认知服务平台），构建一个完全无用的 Web 应用（我最喜欢的类型），并从中获得乐趣（我最喜欢的活动）。让我们开始吧！

好消息！我们将把这个应用变成 PWA（渐进式 Web 应用）。这种应用可以离线在手机上运行，​​即使使用了机器学习模型——无需调用应用外部的任何 API！既然这是构建机器学习应用的巧妙方法，而且掌握这项技能也很有好处，我们不妨学习一下。

搭建你的 PWA

首先，创建一个纯净的 Vue.js 应用。你可以使用 vue.jsvue ui或 Vue CLI 来启动它，前提是你的本地机器上已经安装了所有必要的依赖项。如果你是通过 vue.js 启动 Vue CLI vue create my-tricky-app，请手动选择要添加到应用中的功能，并确保选择“PWA”：

我们将创建一个基本的 Vue 网站，其中包含一些控制 PWA 行为的额外文件。具体来说，这些文件包括：

• registerServiceWorker.js
• service-worker.js
• 多个可用于各种平台的图标
• manifest.json 文件/public位于管理这些图标和其他重要元素的文件夹中

您可以使用浏览器的“开发者工具”>“审核”面板对 Web 应用运行 Lighthouse 审核。这将显示一些有趣的数据，例如应用在离线环境下的表现。请注意，您需要将应用运行在生产环境的 Web 服务器上才能查看完整的 Lighthouse 审核结果，因此您可以稍后返回此步骤以获取更详细的信息。

现在，您可以开始构建应用程序的推理功能，该功能将使用您将在 Custom Vision AI 中构建的机器学习模型来测试各种图像。您将使用 Karen Zack 用来创作“斑点狗大战冰淇淋”拼贴画的图像，我已经将这些图像分成了 16 张。您可以点击此处下载并将它们添加到本地/src/assets/images文件夹。

有关以下代码片段背后的原理的更详细解释，请访问学习模块。

构建您的界面

将默认<HelloWorld/>页面重命名为<DetectImage/>，并在 中这样引用它App.vue。然后，创建一个包含标题、图像和按钮的简单模板，并将 prop 的值更改msg为What do you see?：

  <template>
    <div class="hello">
      <h1>{{ msg }}</h1>
      <div>
        <img class="image" ref="img" :src="require('../assets/images/' + getImgIndex + '.jpg')" />
      </div>
      <div>
        <button class="button" @click="next()" :disabled="disable">Next</button>
      </div>
      <div
        v-for="pred in predictions"
        :key="pred.index"
      >{{ pred.label }}: {{ pred.probability.toFixed(0) + '%' }}</div>
      <div v-if="!predictions.length">hmm.....</div>
    </div>
  </template>

现在你需要准备好你的应用程序，以便托管在 Custom Vision AI 中训练的模型。

训练你的模型

精彩的部分来了！访问 CustomVision.ai 并登录。在可用的资源组中创建一个项目（如果没有现成的资源组，请创建一个）。classification由于您要进行二元分类，因此应该创建一个项目。选择“多类”（MultiClass），因为每张图像只有一个标签，并选择“通用（紧凑）”（General (compact)）域，以便您可以在 Web 上使用您的模型。将其导出为“基础平台”（Basic platform），因为您将在基于 TensorFlow.js 的环境中使用它。

现在你要教预训练模型一些关于冰淇淋和斑点狗的知识！为此，你需要一些关于这两类事物的图片——先从每类大约十张开始。我搜索了“巧克力碎片冰淇淋”，​​并使用了一个很棒的插件从网页上抓取图片，创建了一个训练图像集。

请注意，我每个类别只用了六张图像进行训练。当然，对于精确的迁移学习来说，这个数据集太小了，但 Custom Vision AI 仍然能很好地处理这个小数据集。对于生产级模型，您当然需要更大的图像集。

将冰淇淋和斑点狗的图片分别保存在本地计算机上的两个文件夹中（分别命名为“冰淇淋”ice cream和“斑点狗dalmatian”）。在 Custom Vision AI 界面中，将文件夹逐个拖放到网页中。给狗狗图片dalmatian和冰淇淋图片分别添加标签ice cream：

图片上传并添加标签后，即可开始训练。点击按钮train，观看模型构建过程！完成后，您将看到模型的准确率。用一张可爱的狗狗图片测试一下。您的模型准确率如何？

现在您可以下载生成的模型文件，并将它们放置在您的 Web 应用程序中public/models：

• cvexport.清单
• labels.txt
• model.json
• 权重.bin

为什么要把这些文件放在 `<script>` 文件夹里/public，而不是放在 `<script>`文件夹/assets或其他地方？publicVue.js 应用中的 `<script>` 文件夹用于存放不应该由 webpack 打包的静态资源。Custom Vision AI 构建过程生成的四个文件需要保持原样，并由您的应用按需提供，而无需通过 webpack 打包。

现在你可以在你的网页应用中使用这些功能了。

完成 Web 应用程序

您需要通过 npm 安装一些库来支持机器学习文件的使用。

1. 在package.json你的 Web 应用程序根目录下的文件中，将以下内容添加"customvision-tfjs": "^1.0.1",到dependencies列表中。
2. 在同一个文件中，也要将其添加"raw-loader": "^4.0.0",到devDependencies列表中。你需要这个包来管理 Vue 应用中 .txt 文件的读取。
3. 在同一个文件中，最后将其添加"webpack-cli": "^3.3.10"到devDependencies列表中，以便 webpack CLI 可以在应用程序中使用，这对于文本文件解析也是必要的。

有趣的是！CustomVision-tfjs 底层使用了 TensorFlow.js。

在 VS Code 的终端中，如果你的应用当前正在运行，请停止它（Ctrl-C），然后添加以下包：npm install。现在你可以开始构建<script>应用的底层结构了。

<template>在's' 结束标签下，创建一个新<script>标签，并添加以下代码：

<script>
import * as cvstfjs from "customvision-tfjs";
import labels from "raw-loader!../../public/models/labels.txt";
export default {
  name: "DetectImage",
  props: {
    msg: String
  },
  data() {
    return {
      labels: labels,
      model: null,
      predictions: [],
      image: 0,
      numImages: 16
    };
  },
  computed: {
    getImgIndex() {
      return this.image.toString();
    },
    disable() {
      if (this.image == this.numImages) {
        return true;
      } else return false;
    }
  },

  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
      this.predictions = label.map((p, i) => {
        return { index: i, label: this.labels[i], probability: p * 100 };
      });
    },

    next() {
      this.image++;
      this.predictions = [];
      setTimeout(this.predict, 500);
    }
  }
};
</script>

让我们来逐段分析这段代码。首先，我们cvstfjs从之前安装的 npm 库中导入一些模块，以便管理我们构建的自定义视觉模型。

然后，我们加载标签.txt文件。这会用到该raw-loader包。你需要告诉 webpack 如何处理这种类型的文本文件，所以如果根目录下没有该文件，请添加一个新文件，并使用webpack.config.js以下代码调用它：

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

您的数据对象存储了在构建推理方法时将使用的变量的引用。

此外，还有一些计算属性。这些属性用于计算各种用户界面元素，例如正在显示的图像索引，以及当没有更多图像要显示时，“下一页”按钮需要禁用的时刻。

在异步mounted生命周期钩子中，您需要加载模型。模型可能很大，因此最好等到模型和标签文件（也需要解析）一起加载完毕后再开始推理。最后，当一切就绪后，调用 ` predict.`

Predict()它也采用异步方式，并使用 Custom Vision 的 npm 库将预测结果与标签进行匹配。预测完成后，next点击按钮即可开始对后续图像进行预测。请注意，您需要使用一种setTimeout方法来减缓预测的启动速度，直到图像加载完毕。

当您对模型的性能及其预测结果感到满意后，您可以将 Web 应用程序发布到 Azure 网站等托管提供商。

还记得你的应用是 PWA 吗？应用构建并发布后，你可以使用开发者工具切换到“离线”模式，并观察如何继续使用推理方法。Custom Vision AI 还允许你为模型创建端点，但使用这些端点需要一定的在线延迟。

将应用发布到 Azure 网站

最简单的方法是通过 GitHub Action。按照以下说明创建工作流并将 Azure 门户连接到 GitHub。每次应用发生更改时，它都会重新构建。这是一种只需向 GitHub 推送即可刷新模型的好方法。

但是等等！如果您要发布到 Azure，则需要在根目录中添加一个文件，该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>

哦，还有一件事！您还需要做最后一个更改，即启用 Service Worker 的构建。您需要在应用程序的根文件夹中创建一个名为 `.service.js` 的文件，vue.config.js其中可以包含以下代码：

module.exports = {
    pwa: {
        workboxOptions: {
            exclude: [/\.map$/, /web\.config$/],
        },
    },
};

该文件告诉 service worker 忽略你之前添加的 web.config 文件，该文件的存在会给 service worker 构建过程带来问题。

现在，当您的应用发布到 Web 服务器后，您就可以在在线和离线状态下查看其运行情况了！

结论

本文介绍了如何构建一个基于机器学习模型的 Vue.js Web 应用，该应用采用嵌入式文件，因此即使离线也能运行。此外，您还学习了如何将此类应用部署到 Azure，从而获得满足图像推理需求的端到端解决方案。如果您正在寻找优秀的图像处理解决方案，我建议您尝试CustomVision.ai ，因为它是处理图像推理的绝佳方式，而从零开始构建图像推理并非易事。请在下方评论区分享您的成果！如果您想观看我讲解构建此应用相关元素的视频，请观看下方视频。