使用 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”以使用 nightly build（例如 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 后处理的示例。

打包器

[本节即将推出]