在 WebGPU 上运行模型

WebGPU 是用于加速图形和计算的新的 Web 标准。API 使 Web 开发者能够使用底层系统的 GPU 直接在浏览器中执行高性能计算。WebGPU 是 WebGL 的继任者，并提供显著更好的性能，因为它允许与现代 GPU 进行更直接的交互。最后，它支持通用 GPU 计算，这使其非常适合机器学习！

截至 2024 年 10 月，全球 WebGPU 支持率约为 70%（根据 caniuse.com），这意味着某些用户可能无法使用该 API。

如果以下演示在您的浏览器中不起作用，您可能需要使用功能标志启用它

Firefox：使用 dom.webgpu.enabled 标志（请参阅此处）。
Safari：使用 WebGPU 功能标志（请参阅此处）。
旧版本的 Chromium 浏览器（在 Windows、macOS、Linux 上）：使用 enable-unsafe-webgpu 标志（请参阅此处）。

在 Transformers.js v3 中的用法

感谢我们与 ONNX Runtime Web 的合作，启用 WebGPU 加速就像在加载模型时设置 device: 'webgpu' 一样简单。让我们看一些例子！

示例： 在 WebGPU 上计算文本嵌入 (演示)

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

// Create a feature-extraction pipeline
const extractor = await pipeline(
  "feature-extraction",
  "mixedbread-ai/mxbai-embed-xsmall-v1",
  { device: "webgpu" },
);

// Compute embeddings
const texts = ["Hello world!", "This is an example sentence."];
const embeddings = await extractor(texts, { pooling: "mean", normalize: true });
console.log(embeddings.tolist());
// [
//   [-0.016986183822155, 0.03228696808218956, -0.0013630966423079371, ... ],
//   [0.09050482511520386, 0.07207386940717697, 0.05762749910354614, ... ],
// ]

示例： 在 WebGPU 上使用 OpenAI Whisper 执行自动语音识别 (演示)

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

// Create automatic speech recognition pipeline
const transcriber = await pipeline(
  "automatic-speech-recognition",
  "onnx-community/whisper-tiny.en",
  { device: "webgpu" },
);

// Transcribe audio from a URL
const url = "https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/jfk.wav";
const output = await transcriber(url);
console.log(output);
// { text: ' And so my fellow Americans ask not what your country can do for you, ask what you can do for your country.' }

示例： 在 WebGPU 上使用 MobileNetV4 执行图像分类 (演示)

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

// Create image classification pipeline
const classifier = await pipeline(
  "image-classification",
  "onnx-community/mobilenetv4_conv_small.e2400_r224_in1k",
  { device: "webgpu" },
);

// Classify an image from a URL
const url = "https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/tiger.jpg";
const output = await classifier(url);
console.log(output);
// [
//   { label: 'tiger, Panthera tigris', score: 0.6149784922599792 },
//   { label: 'tiger cat', score: 0.30281734466552734 },
//   { label: 'tabby, tabby cat', score: 0.0019135422771796584 },
//   { label: 'lynx, catamount', score: 0.0012161266058683395 },
//   { label: 'Egyptian cat', score: 0.0011465961579233408 }
// ]

报告错误和提供反馈

由于 WebGPU 的实验性质，尤其是在非 Chromium 浏览器中，当您尝试运行模型时可能会遇到问题（即使它可以在 WASM 中运行）。如果您遇到问题，请在 GitHub 上提交 issue，我们将尽力解决。谢谢！

< > 在 GitHub 上更新