使用 ONNX Runtime 构建 Web 应用程序

本文档解释了使用 ONNX Runtime 构建 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 后处理的示例。

打包工具

[本节即将推出]