前言
在当今的技术环境中，人工智能（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">
