使用 TensorFlow.js 和 COCO-SSD 在浏览器中利用实时对象检测

简介

近年来，机器学习领域取得了显着的进步，特别是在将强大的模型引入 Web 应用程序方面。其中一项突破是能够直接在 Web 浏览器中执行实时对象检测，这要归功于 TensorFlow.js 等技术和 COCO-SSD 等模型。本文探讨了开发人员如何利用这些工具来创建交互式应用程序，以检测实时网络摄像头流、上传的图像或视频中的对象，所有这些都不需要服务器端处理。

了解 TensorFlow.js 和 COCO-SSD

TensorFlow.js 是 Google 开发的 JavaScript 库，允许开发人员直接在浏览器中运行机器学习模型。它提供了一种使用 JavaScript API 部署预训练模型或训练新模型的方法，使其易于访问且易于与 Web 应用程序集成。 COCO-SSD（上下文中的常见对象 - Single Shot MultiBox Detector）是一种流行的用于对象检测的预训练模型。它经过优化，可以实时检测各种物体，使其适合交互式应用程序。

设置环境

首先，开发人员需要设置他们的开发环境。这通常涉及：

• 使用脚本标签在 HTML 文档中包含 TensorFlow.js 和 COCO-SSD：

  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd@latest"></script>

• 创建 HTML 结构来处理视频输入、图像上传和控制按钮等用户界面元素。

构建应用程序

1. 处理用户输入

该应用程序允许用户在不同的输入类型之间进行选择：

• 网络摄像头：直接从用户的网络摄像头捕获实时视频源。
• 图像：允许用户从其设备上传图像文件。
• 视频：允许用户上传视频文件以进行对象检测。

<div id="inputSelection">
    <label><input type="radio" name="inputType" value="webcam" checked> Webcam</label>
    <label><input type="radio" name="inputType" value="image"> Image</label>
    <label><input type="radio" name="inputType" value="video"> Video</label>
</div>
<input type="file" id="imageInput" accept="image/*" style="display:none;">
<input type="file" id="videoInput" accept="video/*" style="display:none;">

2. 显示输入和结果

应用程序使用

<div id="videoContainer">
    <video id="videoElement" autoplay playsinline></video>
    <div id="infoBox" class="infoBox">
        <p><strong>Detected Object:</strong> <span id="objectLabel"></span></p>
        <p><strong>Confidence:</strong> <span id="confidenceScore"></span></p>
    </div>
</div>
<img id="imageDisplay">
<video id="videoDisplay" controls loop></video>
<canvas id="outputCanvas"></canvas>

3. 实现对象检测逻辑

JavaScript (script.js) 使用 TensorFlow.js 和 COCO-SSD 处理对象检测逻辑。这涉及：

• 初始化模型并异步加载：

  async function loadModel() {
      const model = await cocoSsd.load();
      return model;
  }

• 对选定的输入（视频或图像）执行检测并用结果更新 UI：

  async function detectObjects(input) {
      const model = await loadModel();
      const predictions = await model.detect(input);
      // Update UI with predictions
  }

• 处理不同的输入类型（网络摄像头、图像、视频）并根据用户操作触发检测。

4. 用户交互和控制

该应用程序包括用于控制对象检测的按钮：

• 开始检测：根据选定的输入启动对象检测。
• 停止检测：暂停或停止检测过程。
• 截屏：允许用户截取当前检测结果的屏幕截图。

<div id="controls">
    <button id="startButton">Start Detection</button>
    <button id="stopButton" disabled>Stop Detection</button>
    <button id="captureButton" disabled>Capture Screenshot</button>
</div>

5. 提升用户体验

为了提供无缝体验，该应用程序包含一个加载指示器 (

Loading...

)，用于在 TensorFlow.js 和 COCO-SSD 模型加载时通知用户正在加载。

结论

总之，TensorFlow.js 与 COCO-SSD 的结合为直接在网络浏览器中进行实时对象检测开辟了令人兴奋的可能性。本文演示了构建此类应用程序所涉及的基本组件和步骤，从设置环境到实现对象检测逻辑和增强用户交互。开发人员现在可以利用这些技术来创建交互式和响应式 Web 应用程序，从而突破网络机器学习的可能性界限。随着这些技术的不断发展，未来将迎来更加复杂和易于访问的人工智能网络体验。

这是 Github 存储库

以上是使用 TensorFlow.js 和 COCO-SSD 在浏览器中利用实时对象检测的详细内容。更多信息请关注PHP中文网其他相关文章！