使用 TensorFlow.js 进行人脸检测

本指南介绍了 TensorFlow.js 与 Docker 的无缝集成来执行人脸检测。在本指南中，您将探索如何：

使用 Docker 运行容器化 TensorFlow.js 应用程序。
使用 TensorFlow.js 在 Web 应用程序中实现人脸检测。
为 TensorFlow.js Web 应用程序构建 Dockerfile。
使用 Docker Compose 进行实时应用程序开发和更新。
在 Docker Hub 上共享您的 Docker 映像以方便部署并扩大覆盖范围。

致谢
Docker 衷心感谢 Harsh Manvar对本指南的贡献。

先决条件

您已安装最新版本的 Docker Desktop。
您有一个 Git 客户端。本指南中的示例使用基于命令行的 Git 客户端，但您可以使用任何客户端。

什么是 TensorFlow.js？

TensorFlow.js是一个用于机器学习的开源 JavaScript 库，使您能够在浏览器或 Node.js 中训练和部署 ML 模型。它支持从头开始创建新模型或使用预先训练的模型，从而直接在 Web 环境中促进各种 ML 应用程序。 TensorFlow.js 提供高效的计算，使无需深厚 ML 专业知识的 Web 开发人员也可以执行复杂的 ML 任务。

为什么同时使用 TensorFlow.js 和 Docker？

环境一致性和简化部署：Docker 将 TensorFlow.js 应用程序及其依赖项打包到容器中，确保在所有环境中一致运行并简化部署。
高效开发和轻松扩展：Docker 通过热重载等功能提高开发效率，并使用 Kubernetes 等编排工具轻松扩展 TensorFlow.js 应用程序。
隔离和增强的安全性：Docker 将 TensorFlow.js 应用程序隔离在安全环境中，从而在以有限的权限运行应用程序时最大限度地减少冲突和安全漏洞。

获取并运行示例应用程序

在终端中，使用以下命令克隆示例应用程序。

$ git clone https://github.com/harsh4870/TensorJS-Face-Detection

克隆应用程序后，您会注意到该应用程序有一个Dockerfile.这个 Dockerfile 允许您仅使用 Docker 在本地构建和运行应用程序。

在将应用程序作为容器运行之前，必须将其构建到映像中。在目录中运行以下命令TensorJS-Face-Detection来构建名为的映像face-detection-tensorjs。

$ docker build -t face-detection-tensorjs .

该命令将应用程序构建到映像中。根据您的网络连接，第一次运行该命令时可能需要几分钟时间来下载必要的组件。

要将映像作为容器运行，请在终端中运行以下命令。

$ docker run -p 80:80 face-detection-tensorjs

该命令运行容器并将容器中的端口 80 映射到系统上的端口 80。

应用程序运行后，打开 Web 浏览器并通过 http://localhost:80访问该应用程序。您可能需要授予应用程序访问网络摄像头的权限。

在 Web 应用程序中，您可以更改后端以使用以下选项之一：

WASM
网页GL
中央处理器

要停止应用程序，请在终端中按ctrl+ 。c

关于申请

示例应用程序使用MediaPipe执行实时人脸检测，MediaPipe 是用于构建多模式机器学习管道的综合框架。它专门使用 BlazeFace 模型，这是一种用于检测图像中人脸的轻量级模型。

在 TensorFlow.js 或类似的基于 Web 的机器学习框架的上下文中，WASM、WebGL 和 CPU 后端可用于执行操作。这些后端中的每一个都利用现代浏览器中可用的不同资源和技术，并且都有其优点和局限性。以下部分是不同后端的简要细分。

WASM

WebAssembly (WASM) 是一种低级、类似汇编的语言，具有紧凑的二进制格式，可以在 Web 浏览器中以接近本机的速度运行。它允许用 C/C++ 等语言编写的代码编译成可以在浏览器中执行的二进制文件。

当需要高性能并且不支持 WebGL 后端或者您希望在所有设备上获得一致的性能而不依赖 GPU 时，这是一个不错的选择。

网页GL

WebGL 是一种浏览器 API，允许 GPU 加速使用物理和图像处理以及效果作为网页画布的一部分。

WebGL 非常适合可并行化的操作，并且可以显着受益于 GPU 加速，例如深度学习模型中常见的矩阵乘法和卷积。

中央处理器

CPU 后端使用纯 JavaScript 执行，利用设备的中央处理单元 (CPU)。该后端是最普遍兼容的，当 WebGL 和 WASM 后端都不可用或不合适时，可以作为后备。

探索应用程序的代码

在以下部分中探讨每个文件的用途及其内容。

index.html 文件

该index.html文件用作 Web 应用程序的前端，该应用程序利用 TensorFlow.js 从网络摄像头视频源中进行实时人脸检测。它结合了多种技术和库，可以直接在浏览器中促进机器学习。它使用多个 TensorFlow.js 库，包括：

tfjs-core 和 tfjs-converter 用于核心 TensorFlow.js 功能和模型转换。
tfjs-backend-webgl、tfjs-backend-cpu 和 tf-backend-wasm 脚本，用于 TensorFlow.js 可用于处理的不同计算后端选项。这些后端允许应用程序通过利用用户的硬件功能来高效地执行机器学习任务。
BlazeFace 库，一个用于人脸检测的 TensorFlow 模型。

它还使用以下附加库：

dat.GUI，用于创建图形界面以与应用程序的设置实时交互，例如在 TensorFlow.js 后端之间切换。
Stats.min.js 用于显示性能指标（如 FPS）以监控应用程序在运行期间的效率。

<style>
  body {
    margin: 25px;
  }

  .true {
    color: green;
  }

  .false {
    color: red;
  }

  #main {
    position: relative;
    margin: 50px 0;
  }

  canvas {
    position: absolute;
    top: 0;
    left: 0;
  }

  #description {
    margin-top: 20px;
    width: 600px;
  }

  #description-title {
    font-weight: bold;
    font-size: 18px;
  }
</style>

<body>
  <div id="main">
    <video id="video" playsinline style="
      -webkit-transform: scaleX(-1);
      transform: scaleX(-1);
      width: auto;
      height: auto;
      ">
    </video>
    <canvas id="output"></canvas>
    <video id="video" playsinline style="
      -webkit-transform: scaleX(-1);
      transform: scaleX(-1);
      visibility: hidden;
      width: auto;
      height: auto;
      ">
    </video>
  </div>
</body>
<script src="https://unpkg.com/@tensorflow/tfjs-core@2.1.0/dist/tf-core.js"></script>
<script src="https://unpkg.com/@tensorflow/tfjs-converter@2.1.0/dist/tf-converter.js"></script>

<script src="https://unpkg.com/@tensorflow/tfjs-backend-webgl@2.1.0/dist/tf-backend-webgl.js"></script>
<script src="https://unpkg.com/@tensorflow/tfjs-backend-cpu@2.1.0/dist/tf-backend-cpu.js"></script>
<script src="./tf-backend-wasm.js"></script>

<script src="https://unpkg.com/@tensorflow-models/blazeface@0.0.5/dist/blazeface.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
<script src="./index.js"></script>

index.js 文件

该index.js文件执行面部检测逻辑。它演示了 Web 开发和机器学习集成中的几个高级概念。以下是其一些关键组件和功能的细分：

Stats.js：该脚本首先创建一个 Stats 实例来实时监控和显示应用程序的帧速率 (FPS)。这对于性能分析很有帮助，特别是在测试不同 TensorFlow.js 后端对应用程序速度的影响时。
TensorFlow.js：该应用程序允许用户通过 dat.GUI 提供的图形界面在 TensorFlow.js 的不同计算后端（wasm、webgl 和 cpu）之间切换。更改后端可能会影响性能和兼容性，具体取决于设备和浏览器。 addFlagLabels 函数动态检查并显示是否支持 SIMD（单指令、多数据）和多线程，这与 wasm 后端的性能优化相关。
setupCamera 函数：使用 MediaDevices Web API 初始化用户的网络摄像头。它将视频流配置为不包含音频并使用前置摄像头（faceMode：'user'）。加载视频元数据后，它会解析视频元素的承诺，然后将其用于面部检测。
BlazeFace：该应用程序的核心是 renderPrediction 函数，它使用 BlazeFace 模型执行实时人脸检测，BlazeFace 模型是一种用于检测图像中人脸的轻量级模型。该函数在每个动画帧上调用 model.estimateFaces 以检测视频源中的人脸。对于每个检测到的面部，它会在面部周围绘制一个红色矩形，并在覆盖视频的画布上绘制蓝色点作为面部标志。

const stats = new Stats();
stats.showPanel(0);
document.body.prepend(stats.domElement);

let model, ctx, videoWidth, videoHeight, video, canvas;

const state = {
  backend: 'wasm'
};

const gui = new dat.GUI();
gui.add(state, 'backend', ['wasm', 'webgl', 'cpu']).onChange(async backend => {
  await tf.setBackend(backend);
  addFlagLables();
});

async function addFlagLables() {
  if(!document.querySelector("#simd_supported")) {
    const simdSupportLabel = document.createElement("div");
    simdSupportLabel.id = "simd_supported";
    simdSupportLabel.style = "font-weight: bold";
    const simdSupported = await tf.env().getAsync('WASM_HAS_SIMD_SUPPORT');
    simdSupportLabel.innerHTML = `SIMD supported: <span class=${simdSupported}>${simdSupported}<span>`;
    document.querySelector("#description").appendChild(simdSupportLabel);
  }

  if(!document.querySelector("#threads_supported")) {
    const threadSupportLabel = document.createElement("div");
    threadSupportLabel.id = "threads_supported";
    threadSupportLabel.style = "font-weight: bold";
    const threadsSupported = await tf.env().getAsync('WASM_HAS_MULTITHREAD_SUPPORT');
    threadSupportLabel.innerHTML = `Threads supported: <span class=${threadsSupported}>${threadsSupported}</span>`;
    document.querySelector("#description").appendChild(threadSupportLabel);
  }
}

async function setupCamera() {
  video = document.getElementById('video');

  const stream = await navigator.mediaDevices.getUserMedia({
    'audio': false,
    'video': { facingMode: 'user' },
  });
  video.srcObject = stream;

  return new Promise((resolve) => {
    video.onloadedmetadata = () => {
      resolve(video);
    };
  });
}

const renderPrediction = async () => {
  stats.begin();

  const returnTensors = false;
  const flipHorizontal = true;
  const annotateBoxes = true;
  const predictions = await model.estimateFaces(
    video, returnTensors, flipHorizontal, annotateBoxes);

  if (predictions.length > 0) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (let i = 0; i < predictions.length; i++) {
      if (returnTensors) {
        predictions[i].topLeft = predictions[i].topLeft.arraySync();
        predictions[i].bottomRight = predictions[i].bottomRight.arraySync();
        if (annotateBoxes) {
          predictions[i].landmarks = predictions[i].landmarks.arraySync();
        }
      }

      const start = predictions[i].topLeft;
      const end = predictions[i].bottomRight;
      const size = [end[0] - start[0], end[1] - start[1]];
      ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
      ctx.fillRect(start[0], start[1], size[0], size[1]);

      if (annotateBoxes) {
        const landmarks = predictions[i].landmarks;

        ctx.fillStyle = "blue";
        for (let j = 0; j < landmarks.length; j++) {
          const x = landmarks[j][0];
          const y = landmarks[j][1];
          ctx.fillRect(x, y, 5, 5);
        }
      }
    }
  }

  stats.end();

  requestAnimationFrame(renderPrediction);
};

const setupPage = async () => {
  await tf.setBackend(state.backend);
  addFlagLables();
  await setupCamera();
  video.play();

  videoWidth = video.videoWidth;
  videoHeight = video.videoHeight;
  video.width = videoWidth;
  video.height = videoHeight;

  canvas = document.getElementById('output');
  canvas.width = videoWidth;
  canvas.height = videoHeight;
  ctx = canvas.getContext('2d');
  ctx.fillStyle = "rgba(255, 0, 0, 0.5)";

  model = await blazeface.load();

  renderPrediction();
};

setupPage();

tf-backend-wasm.js 文件

该文件是TensorFlow.js 库tf-backend-wasm.js的一部分。它包含 TensorFlow.js WASM 后端的初始化逻辑、一些用于与 WASM 二进制文件交互的实用程序以及为 WASM 二进制文件设置自定义路径的函数。

tfjs-backend-wasm-simd.wasm 文件

该文件是TensorFlow.js 库tfjs-backend-wasm-simd.wasm的一部分。它是用于 WebAssembly 后端的 WASM 二进制文件，专门针对 SIMD（单指令、多数据）指令进行了优化。

探索 Dockerfile

在基于 Docker 的项目中，Dockerfile 充当构建应用程序环境的基础资产。

Dockerfile 是一个文本文件，指示 Docker 如何创建应用程序环境的映像。镜像包含运行应用程序时您想要和需要的一切，例如文件、包和工具。

以下是该项目的 Dockerfile。

FROM nginx:stable-alpine3.17-slim
WORKDIR /usr/share/nginx/html
COPY . .

此 Dockerfile 定义了一个映像，该映像使用 Alpine Linux 基础映像中的 Nginx 提供静态内容。

使用 Compose 进行开发

Docker Compose 是一个用于定义和运行多容器 Docker 应用程序的工具。通过 Compose，您可以使用 YAML 文件来配置应用程序的服务、网络和卷。在这种情况下，应用程序不是多容器应用程序，但 Docker Compose 具有其他有用的开发功能，例如 Compose Watch。

示例应用程序还没有 Compose 文件。要创建 Compose 文件，请在TensorJS-Face-Detection目录中创建一个名为的文本文件 compose.yaml，然后添加以下内容。

services:
  server:
    build:
      context: .
    ports:
      - 80:80
    develop:
      watch:
        - action: sync
          path: .
          target: /usr/share/nginx/html

此 Compose 文件定义了使用同一目录中的 Dockerfile 构建的服务。它将主机上的端口 80 映射到容器中的端口 80。它还具有一个develop带有属性的小节watch，该属性定义了控制基于本地文件更改的自动服务更新的规则列表。有关 Compose 指令的更多详细信息，请参阅 Compose 文件参考。

保存对文件的更改compose.yaml，然后运行以下命令来运行应用程序。

$ docker compose watch

应用程序运行后，打开 Web 浏览器并通过 http://localhost:80访问该应用程序。您可能需要授予应用程序访问网络摄像头的权限。

现在，您可以对源代码进行更改，并查看自动反映在容器中的更改，而无需重建和重新运行容器。

打开index.js文件并将第 83 行的地标点更新为绿色而不是蓝色。

-        ctx.fillStyle = "blue";
+        ctx.fillStyle = "green";

保存对文件的更改index.js，然后刷新浏览器页面。地标点现在应该显示为绿色。

要停止应用程序，请在终端中按ctrl+ 。c

在 Docker Hub 上发布您的 Docker 映像可以简化其他人的部署流程，从而能够无缝集成到不同的项目中。它还促进容器化解决方案的采用，扩大其在整个开发者生态系统中的影响。分享您的图片：

注册或登录 Docker Hub。
重建您的映像以包含对应用程序的更改。这次，在镜像名称前添加您的 Docker ID。 Docker 使用名称来确定将其推送到哪个存储库。打开终端并在TensorJS-Face-Detection目录中运行以下命令。替换YOUR-USER-NAME 为您的 Docker ID。
$ docker build -t YOUR-USER-NAME/face-detection-tensorjs .
运行以下docker push命令将镜像推送到 Docker Hub。替换YOUR-USER-NAME为您的 Docker ID。
$ docker push YOUR-USER-NAME/face-detection-tensorjs
验证您是否已将映像推送到 Docker Hub。
1. 转到 Docker 中心。
2. 选择存储库。
3. 查看存储库的上次推送时间。

其他用户现在可以使用该命令下载并运行您的映像docker run。它们需要替换YOUR-USER-NAME为您的 Docker ID。

$ docker run -p 80:80 YOUR-USER-NAME/face-detection-tensorjs

概括

本指南演示了如何利用 TensorFlow.js 和 Docker 在 Web 应用程序中进行人脸检测。它强调了运行容器化 TensorFlow.js 应用程序以及使用 Docker Compose 进行开发以进行实时代码更改的简便性。此外，它还介绍了如何在 Docker Hub 上共享 Docker 映像来简化其他人的部署，从而增强应用程序在开发人员社区中的影响力。