使用 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 後處理的示例。

打包工具

[本節即將推出]