使用 ONNX Runtime 构建 Web 应用

本文档解释了使用 ONNX Runtime 构建 Web 应用的选项和注意事项。

目录

• 部署目标的选项
• 获取模型的选项
• 引导你的应用
• 添加 ONNX Runtime Web 作为依赖项
• 在你的代码中使用 onnxruntime-web
• 预处理和后处理
• 打包工具

部署目标的选项

1. 浏览器中推理

   运行时和模型下载到客户端，推理在浏览器内部进行。在此场景下使用 onnxruntime-web。

2. 服务器上推理

   浏览器将用户输入发送到服务器，服务器进行推理并获得结果，然后发送回客户端。

   使用原生的 ONNX Runtime 以获得最佳性能。

   要将 Node.js 用作服务器应用，请在服务器上使用 onnxruntime-node（ONNX Runtime Node.js 绑定）。

3. Electron

   Electron 使用前端（基于 chromium，技术上是浏览器核心）和后端（基于 Node.js）。

   如果可能，在后端使用 onnxruntime-node 进行推理，这样更快。在前端使用 onnxruntime-web 也是一种选择（出于安全和兼容性考虑）。

4. React Native

   React-native 是一个框架，它使用与 reactjs 相同的 API，但在移动端构建的是原生应用而非 Web 应用。应使用 onnxruntime-react-native。

获取模型的选项

你需要了解你的 Web 应用场景，并获取适合该场景的 ONNX 模型。

ONNX 模型可以从 ONNX 模型动物园获取，或从 PyTorch 或 TensorFlow 等其他框架转换而来。

你可以将 ONNX 格式模型转换为 ORT 格式模型，以优化二进制大小、加快初始化速度和降低内存峰值使用量。

你可以执行模型特定的自定义构建以进一步优化二进制大小。

引导你的应用

根据你选择的 Web 框架（例如 vuejs、reactjs、angularjs）引导你的 Web 应用。

如果你已经有一个 Web 应用并且正使用 ONNX Runtime 向其中添加机器学习功能，则可以跳过此步骤。

添加 ONNX Runtime Web 作为依赖项

安装 onnxruntime-web。这些命令行将更新应用的 package.json 文件。

使用 yarn

yarn add onnxruntime-web 

使用 npm

npm install onnxruntime-web

在包名后添加“@dev”以使用每夜构建版本（例如：npm install onnxruntime-web@dev）。

在你的代码中使用 onnxruntime-web

1. 导入 onnxruntime-web，详见 导入 onnxruntime-web

2. 初始化推理会话，详见 InferenceSession.create

   会话初始化只需要进行一次。

3. 运行会话，详见 session.run

   每次有新的用户输入时，都需要运行会话。

更多详情请参考 ONNX Runtime Web API 文档。

预处理和后处理

原始输入通常是字符串（用于 NLP 模型）或图像（用于图像模型）。它们来自多种形式和格式。

字符串输入

1. 在 JS/wasm 中使用分词器对其进行预处理以得到数字数据，从数据创建张量，然后将其馈送给 ORT 进行模型推理。

2. 使用一个或多个自定义算子来处理字符串。使用自定义算子进行构建。模型可以直接处理字符串张量输入。请参考onnxruntime-extensions库，其中包含一组可能的自定义算子。

图像输入

1. 使用 JS/wasm 库预处理数据，并创建张量作为输入以满足模型的要求。请参见 使用 ONNX Runtime Web 进行图像分类教程。

2. 修改模型，将预处理作为算子包含在模型内部。模型将期望某种特定的 Web 图像格式（例如来自 canvas 的位图或纹理）。

输出

模型的输出各不相同，大多数都需要自己的后处理代码。请参考上面的教程作为 JavaScript 后处理的示例。

打包工具

[本节内容即将推出]