Transformers.js完全指南：在浏览器中运行AI模型的JavaScript库-优快云博客

Transformers.js完全指南：在浏览器中运行AI模型的JavaScript库

【免费下载链接】transformers.js State-of-the-art Machine Learning for the web. Run 🤗 Transformers directly in your browser, with no need for a server! 项目地址: https://gitcode.com/GitHub_Trending/tr/transformers.js

Transformers.js是一个功能强大的JavaScript库，它让开发者能够在Web浏览器中直接运行Transformer模型，无需依赖后端服务器支持。这个库为前端AI应用开发带来了革命性的变化，让复杂的机器学习任务在客户端就能完成。

项目概述

Transformers.js旨在提供与Hugging Face的Python transformers库相同的功能，这意味着你可以使用非常相似的API来运行相同的预训练模型。这些模型支持不同模态的常见任务：

自然语言处理：文本分类、命名实体识别、问答系统、语言建模、摘要、翻译、多项选择和文本生成
计算机视觉：图像分类、目标检测、分割和深度估计
音频处理：自动语音识别、音频分类和文本转语音
多模态应用：嵌入、零样本音频分类、零样本图像分类和零样本目标检测

核心架构解析

Transformers.js使用ONNX Runtime在浏览器中运行模型。最棒的部分是，你可以使用🤗 Optimum轻松将预训练的PyTorch、TensorFlow或JAX模型转换为ONNX格式。

项目结构

Transformers.js项目采用清晰的模块化结构：

transformers.js/
├── src/                # 核心源代码目录
│   ├── pipelines/      # 处理管道模块
│   ├── models/         # 模型管理模块
│   ├── backends/       # 后端支持模块
│   └── utils/          # 工具函数模块
├── examples/           # 应用示例集合
│   ├── vanilla-js/     # 原生JavaScript示例
│   ├── react/          # React框架示例
│   └── next-js/        # Next.js框架示例
├── docs/               # 详细文档目录
└── package.json        # 项目配置和依赖

快速开始指南

安装方法

通过NPM安装Transformers.js：

npm install @huggingface/transformers

或者，你也可以在不使用任何打包工具的情况下，通过CDN或静态托管在原生JS中使用它：

<script type="module">
    import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.8.0';
</script>

基础使用示例

Transformers.js的使用极其简单，与Python库的API非常相似：

import { pipeline } from '@huggingface/transformers';

// 创建情感分析管道
const classifier = await pipeline('sentiment-analysis');

const result = await classifier('这个库真是太棒了！');
// 输出：[{'label': 'POSITIVE', 'score': 0.999817686}]

实际应用场景

Transformers.js提供了丰富的示例应用，涵盖了各种使用场景：

原生JavaScript应用

在examples/vanilla-js目录中，你可以找到使用原生JavaScript实现的对象检测示例。这些示例展示了如何在不依赖任何框架的情况下直接使用库的功能。

React应用示例

examples/react-translator目录包含了一个多语言翻译网站的实现，展示了如何在现代前端框架中集成AI功能。

Next.js应用示例

项目提供了客户端推理和服务器端推理两种Next.js示例，分别位于examples/next-client和examples/next-server目录中。

高级配置选项

设备选择

默认情况下，在浏览器中运行时，模型将在你的CPU上运行（通过WASM）。如果你希望在GPU上运行模型（通过WebGPU），可以通过设置device选项来实现：

// 在WebGPU上运行模型
const pipe = await pipeline('sentiment-analysis', 'Xenova/distilbert-base-uncased-finetuned-sst-2-english', {
  device: 'webgpu',
});

量化配置

在资源受限的环境中，如Web浏览器，建议使用模型的量化版本来降低带宽并优化性能。这可以通过调整dtype选项来实现：

// 以4位量化运行模型
const pipe = await pipeline('sentiment-analysis', 'Xenova/distilbert-base-uncased-finetuned-sst-2-english', {
  dtype: 'q4',
});

模型转换指南

Transformers.js推荐使用转换脚本将PyTorch、TensorFlow或JAX模型转换为ONNX格式：

python -m scripts.convert --quantize --model_id bert-base-uncased

转换完成后，将在./models/目录下保存以下文件：

bert-base-uncased/
├── config.json
├── tokenizer.json
├── tokenizer_config.json
└── onnx/
    ├── model.onnx
    └── model_quantized.onnx

性能优化建议

为了获得最佳的使用体验，建议遵循以下最佳实践：

从轻量级模型开始尝试，逐步过渡到更复杂的模型
合理处理异步操作，避免阻塞主线程
注意浏览器兼容性，特别是WebGPU支持
根据应用场景选择合适的量化级别
利用浏览器缓存机制减少重复下载

Transformers.js架构图

总结

Transformers.js为前端开发者打开了AI应用开发的全新可能。通过在浏览器中直接运行模型，不仅降低了服务器成本，还提供了更好的用户体验。现在就开始你的JavaScript AI之旅，探索这个强大库带来的无限潜力。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考