基于 Transformers.js 实现前端图片对象检测

基于 Transformers.js 实现前端图片对象检测 | 极客日志

前言

在当今的技术环境中，人工智能（AI）与前端开发的融合越来越普遍。其中一个显著的应用是在图像识别中，AI 算法可以检测和标记图像中的对象，增强用户体验，并在网站或应用程序上实现创新功能。传统的图像识别通常依赖后端服务器进行计算，但这会带来延迟和带宽压力。随着 WebAssembly 和 ONNX Runtime 的发展，现在可以在浏览器端直接运行 AI 模型。

本文将详细介绍如何使用 @xenova/transformers 库在前端实现图片对象检测功能。通过这一方案，用户上传图片后，模型将在本地浏览器中完成推理，无需将图片上传至服务器，从而保护隐私并降低服务器成本。

先决条件

在继续之前，请确保您对 HTML、CSS 和 JavaScript 有基本的了解。另外，熟悉与 AI 和图像处理相关的概念将会有所帮助。您需要一个现代浏览器环境（推荐 Chrome、Edge 或 Firefox），因为这些浏览器对 WebAssembly 的支持最为完善。

技术原理

本方案核心依赖于 Hugging Face 推出的 Transformers.js 库。这是一个允许在浏览器中运行机器学习模型的 JavaScript 库。它支持多种任务，包括自然语言处理、图像分类、目标检测等。

ONNX Runtime: 模型通常被转换为 ONNX (Open Neural Network Exchange) 格式，这是一种开放的模型交换格式，便于在不同框架间迁移。
WebAssembly: 为了获得接近原生的性能，模型推理部分通过 WebAssembly 执行，这使得 JavaScript 能够调用高性能的 C++ 代码。
Transformer 模型: 我们使用的是 DETR (Detection Transformer) 模型，具体版本为 Xenova/detr-resnet-50。该模型擅长识别图像中的物体及其位置。

实现步骤详解

Step 1：导入必要的模块

首先，我们需要从 CDN 引入 transformers 库。使用 ES Module 语法可以直接在浏览器中运行。

import { pipeline, env } from "https://cdn.jsdelivr.net/npm/@xenova/[email protected]"
// 设置环境变量，禁止加载本地模型，强制使用 CDN 资源
env.allowLocalModels = false;

此代码从 CDN 中导入必要的模块。pipeline 用于初始化模型，env 用于配置运行时行为。
env.allowLocalModels = false; 将环境变量设置为 false，表示不允许使用本地文件系统中的模型，这有助于确保模型版本的统一性和安全性。

Step 2：HTML 结构与事件监听

我们需要创建一个文件上传输入框和一个容器来显示图片和检测结果。

<input type="file" accept="image/*" id="file-upload">
<div id="image-container"></div>
<p id="status"></p>

在 JavaScript 中，获取这些元素并添加事件监听器：

const fileUpload = document.getElementById('file-upload');
const imageContainer = document.getElementById('image-container');
const status = document.getElementById('status');

fileUpload.addEventListener('change', function (e) {
    // 当选择文件时触发的事件监听器
});

此部分代码从 DOM 中选择文件上传输入框和图像容器。
它向文件上传输入框添加了一个事件监听器，当用户选择文件时触发处理函数。

Step 3：读取上传的图像

使用 FileReader API 将用户上传的文件读取为 Data URL，以便浏览器渲染。

const reader = new FileReader();
reader.onload = function (e2) {
    // 文件读取完成时执行的函数
};
reader.readAsDataURL(file);

当选择文件时，创建了一个 FileReader 对象。
一个 onload 事件监听器被附加到读取器上，当文件读取完成时执行回调。
readAsDataURL 方法将所选文件的内容读取为 Base64 编码的数据 URL。

Step 4：显示上传的图像

在读取完成后，动态创建 <img> 元素并将其添加到容器中。

const image = document.createElement('img');
image.src = e2.target.result;
imageContainer.appendChild(image);

在 onload 函数内部，创建了一个 <img> 元素。
图像的 src 属性设置为读取文件作为数据 URL 的结果。
图像元素被追加到 HTML 文档中的图像容器中。

Step 5：启动 AI 检测

在图像显示后，调用检测函数。注意，模型加载是异步的，首次加载可能需要几秒。

await detect(image);

在显示上传的图像后，使用上传的图像作为参数调用 detect 函数。
使用 await 确保模型加载和推理完成后再继续后续操作。

Step 6：使用 AI 模型进行对象检测

这是核心部分。我们实例化一个对象检测管道。

const detector = await pipeline("object-detection", "Xenova/detr-resnet-50");
const output = await detector(image.src, {
    threshold: 0.1,
    percentage: true
});

使用 pipeline 函数从指定的模型（"Xenova/detr-resnet-50"）实例化一个对象检测模型。
threshold 参数控制置信度阈值，低于此值的检测将被忽略。
percentage: true 表示返回的坐标是相对于图像尺寸的百分比，方便定位。
output 包含对象检测任务的结果数组。

Step 7：渲染检测到的框

遍历检测结果，逐个渲染边界框。

output.forEach(renderBox);

对输出中检测到的每个对象，调用 renderBox 函数以渲染边界框。
需要确保在每次新检测前清除旧的框，避免重叠。

Step 8：渲染边界框

根据坐标计算 CSS 样式，绘制矩形框和标签。

function renderBox({ box, label }) {
    const { xmax, xmin, ymax, ymin } = box;
    const boxElement = document.createElement("div");
    boxElement.className = "bounding-box";
    
    Object.assign(boxElement.style, {
        borderColor: '#123123',
        borderWidth: '1px',
        borderStyle: 'solid',
        left: 100 * xmin + '%',
        top: 100 * ymin + '%',
        width: 100 * (xmax - xmin) + "%",
        height: 100 * (ymax - ymin) + "%"
    });

    const labelElement = document.createElement('span');
    labelElement.textContent = label;
    labelElement.className = "bounding-box-label";
    labelElement.style.backgroundColor = '#000000';

    boxElement.appendChild(labelElement);
    imageContainer.appendChild(boxElement);
}

renderBox 函数接受一个具有 box（边界框的坐标）和 label（检测到的对象的标签）的对象。
在函数内部，创建一个 <div> 元素来表示边界框。
应用 CSS 样式来根据检测到的对象的坐标来定位和样式化边界框。
创建一个 <span> 元素来在边界框内显示检测到的对象的标签。

完整代码示例

以下是整合后的完整 HTML 文件代码，包含了样式、结构和逻辑。请注意，实际使用时建议将模型加载逻辑优化为全局单例，避免重复加载。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>前端图片对象检测</title>
  <style>
    .container {
      margin: 40px auto;
      width: max(50vw, 400px);
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .custom-file-upload {
      display: flex;
      align-items: center;
      cursor: pointer;
      gap: 10px;
      border: 2px solid black;
      padding: 8px 16px;
      border-radius: 6px;
    }

    #file-upload {
      display: none;
    }

    #image-container {
      width: 100%;
      margin-top: 20px;
      : relative;
      : ;
      :  dashed ;
    }

     >  {
      : ;
      : block;
    }

     {
      : absolute;
      : border-box;
      : none;
    }

     {
      : absolute;
      : white;
      : ;
      :  ;
      : ;
      : (, , , );
    }
  


  
    
      
      上传图片
    
    
    等待上传...

性能优化与注意事项

模型缓存: 首次加载模型会下载约 100MB+ 的数据。建议在 initDetector 中使用 localStorage 或 Service Worker 缓存模型文件，避免重复下载。
内存管理: 浏览器端的 AI 推理消耗较多内存。对于大尺寸图片，建议在使用前进行缩放处理，以减少显存占用。
错误处理: 网络波动可能导致模型加载失败。务必添加 try-catch 块捕获异常，并提供友好的用户提示。
兼容性: 虽然主流浏览器支持良好，但部分移动端浏览器可能因内存限制无法运行大型模型。建议针对低端设备进行降级处理。

常见问题排查

问题: 页面加载后一直显示'分析中'。
- 原因: 模型下载未完成。
- 解决: 检查网络连接，确认 CDN 可访问。可在控制台查看进度日志。
问题: 检测框位置偏移。
- 原因: 图片加载完成前进行了检测。
- 解决: 确保 image.onload 或 await 图片加载后再调用检测函数。
问题: 某些物体未被检测到。
- 原因: 置信度阈值过高或模型训练数据不包含该类物体。
- 解决: 调整 threshold 参数，或尝试更换其他预训练模型。

总结

本文详细介绍了将 AI 对象检测与前端 Web 开发无缝集成的方法。通过按照所述步骤并利用现成的 AI 库（Transformers.js），开发人员可以为其 Web 应用程序增加强大的图像识别功能。这种 AI 和前端技术的融合为在 Web 上创建智能和交互式用户体验开启了广阔的可能性。相比传统后端方案，前端推理具有更低的延迟和更好的用户隐私保护能力，是未来边缘计算的重要方向之一。

import { pipeline, env } from "https://cdn.jsdelivr.net/npm/@xenova/[email protected]" env.allowLocalModels = false; const fileUpload = document.getElementById('file-upload'); const imageContainer = document.getElementById('image-container'); const status = document.getElementById('status'); let detector = null; // 初始化模型 async function initDetector() { if (!detector) { status.textContent = "正在加载模型..."; detector = await pipeline("object-detection", "Xenova/detr-resnet-50"); status.textContent = "模型已就绪，请上传图片"; } } fileUpload.addEventListener('change', async function (e) { const file = e.target.files[0]; if (!file) return; // 清空之前的结果 imageContainer.innerHTML = ''; status.textContent = "分析中..."; // 初始化模型（如果未加载） await initDetector(); const reader = new FileReader(); reader.onload = async function (e2) { const image = document.createElement('img'); image.src = e2.target.result; imageContainer.appendChild(image); try { await detect(image); status.textContent = "分析完成"; } catch (err) { console.error(err); status.textContent = "分析失败，请查看控制台"; } }; reader.readAsDataURL(file); }); // 检测图片的 AI 任务 async function detect(image) { if (!detector) return; const output = await detector(image.src, { threshold: 0.1, percentage: true }); // 清除旧框 const oldBoxes = imageContainer.querySelectorAll('.bounding-box'); oldBoxes.forEach(box => box.remove()); output.forEach(renderBox); } // 渲染检测框函数 function renderBox({ box, label }) { const { xmax, xmin, ymax, ymin } = box; const boxElement = document.createElement("div"); boxElement.className = "bounding-box"; Object.assign(boxElement.style, { borderColor: '#ff0000', borderWidth: '2px', borderStyle: 'solid', left: 100 * xmin + '%', top: 100 * ymin + '%', width: 100 * (xmax - xmin) + "%", height: 100 * (ymax - ymin) + "%" }); const labelElement = document.createElement('span'); labelElement.textContent = label; labelElement.className = "bounding-box-label"; labelElement.style.top = '-20px'; labelElement.style.left = '0px'; boxElement.appendChild(labelElement); imageContainer.appendChild(boxElement); }

基于 Transformers.js 实现前端图片对象检测

前言

先决条件

技术原理

实现步骤详解

Step 1：导入必要的模块

Step 2：HTML 结构与事件监听

Step 3：读取上传的图像

Step 4：显示上传的图像

Step 5：启动 AI 检测

Step 6：使用 AI 模型进行对象检测

Step 7：渲染检测到的框

Step 8：渲染边界框

完整代码示例

性能优化与注意事项

常见问题排查

总结

更多推荐文章

相关免费在线工具

基于 Transformers.js 实现前端图片对象检测

前言

先决条件

技术原理

实现步骤详解

Step 1：导入必要的模块

Step 2：HTML 结构与事件监听

Step 3：读取上传的图像

Step 4：显示上传的图像

Step 5：启动 AI 检测

Step 6：使用 AI 模型进行对象检测

Step 7：渲染检测到的框

Step 8：渲染边界框

完整代码示例

性能优化与注意事项

常见问题排查

总结

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具