onnxruntime-web

What is onnxruntime-web?

onnxruntime-web is a JavaScript library that allows you to run ONNX (Open Neural Network Exchange) models directly in the browser or in Node.js environments. It leverages WebAssembly (WASM) and WebGL for efficient execution of machine learning models, making it possible to perform inference tasks on the client side without needing a server.

What are onnxruntime-web's main functionalities?

Load and Run ONNX Model

This feature allows you to load an ONNX model and run inference on it. The code sample demonstrates how to create an inference session, prepare input data, and run the model to get the results.

const ort = require('onnxruntime-web');

async function runModel() {
  const session = await ort.InferenceSession.create('model.onnx');
  const input = new ort.Tensor('float32', new Float32Array([1.0, 2.0, 3.0, 4.0]), [1, 4]);
  const feeds = { input: input };
  const results = await session.run(feeds);
  console.log(results);
}

runModel();

Use WebGL Backend

This feature allows you to leverage the WebGL backend for running ONNX models, which can provide better performance for certain types of models. The code sample shows how to specify the WebGL execution provider when creating the inference session.

const ort = require('onnxruntime-web');

async function runModelWithWebGL() {
  const session = await ort.InferenceSession.create('model.onnx', { executionProviders: ['webgl'] });
  const input = new ort.Tensor('float32', new Float32Array([1.0, 2.0, 3.0, 4.0]), [1, 4]);
  const feeds = { input: input };
  const results = await session.run(feeds);
  console.log(results);
}

runModelWithWebGL();

Run Model in Node.js

This feature demonstrates how to run ONNX models in a Node.js environment. The code sample is similar to the browser example but is intended to be run in a Node.js context.

const ort = require('onnxruntime-web');

async function runModelInNode() {
  const session = await ort.InferenceSession.create('model.onnx');
  const input = new ort.Tensor('float32', new Float32Array([1.0, 2.0, 3.0, 4.0]), [1, 4]);
  const feeds = { input: input };
  const results = await session.run(feeds);
  console.log(results);
}

runModelInNode();

Other packages similar to onnxruntime-web

brain.js

Brain.js is a JavaScript library for neural networks, which can be used in the browser or with Node.js. It is simpler and more lightweight compared to onnxruntime-web, and is suitable for basic neural network tasks. However, it does not support the ONNX model format.

synaptic

Synaptic is a JavaScript neural network library for node.js and the browser. It provides a flexible and powerful API for creating and training neural networks. Unlike onnxruntime-web, Synaptic does not support running pre-trained ONNX models and is more focused on building and training models from scratch.

README

ONNX Runtime Web

ONNX Runtime Web is a Javascript library for running ONNX models on browsers and on Node.js.

ONNX Runtime Web has adopted WebAssembly and WebGL technologies for providing an optimized ONNX model inference runtime for both CPUs and GPUs.

Why ONNX models

The Open Neural Network Exchange (ONNX) is an open standard for representing machine learning models. The biggest advantage of ONNX is that it allows interoperability across different open source AI frameworks, which itself offers more flexibility for AI frameworks adoption. See Getting ONNX Models.

Why ONNX Runtime Web

With ONNX Runtime Web, web developers can score pre-trained ONNX models directly on browsers with various benefits of reducing server-client communication and protecting user privacy, as well as offering install-free and cross-platform in-browser ML experience.

ONNX Runtime Web can run on both CPU and GPU. For running on CPU, WebAssembly is adopted to execute the model at near-native speed. Furthermore, ONNX Runtime Web utilizes Web Workers to provide a "multi-threaded" environment to parallelize data processing. Empirical evaluation shows very promising performance gains on CPU by taking full advantage of WebAssembly and Web Workers. For running on GPUs, a popular standard for accessing GPU capabilities - WebGL is adopted. ONNX Runtime Web has further adopted several novel optimization techniques for reducing data transfer between CPU and GPU, as well as some techniques to reduce GPU processing cycles to further push the performance to the maximum.

See Compatibility and Operators Supported for a list of platforms and operators ONNX Runtime Web currently supports.

Getting Started

There are multiple ways to use ONNX Runtime Web in a project:

Using <script> tag

This is the most straightforward way to use ONNX Runtime Web. The following HTML example shows how to use it:

<html>
  <head> </head>

  <body>
    <!-- Load ONNX Runtime Web -->
    <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js"></script>
    <!-- Code that consume ONNX Runtime Web -->
    <script>
      async function runMyModel() {
        // create a session
        const myOrtSession = await ort.InferenceSession.create(
          "./my-model.onnx"
        );
        // generate model input
        const input0 = new ort.Tensor(
          new Float32Array([1.0, 2.0, 3.0, 4.0]) /* data */,
          [2, 2] /* dims */
        );
        // execute the model
        const outputs = await myOrtSession.run({ input_0: input0 });
        // consume the output
        const outputTensor = outputs["output_0"];
        console.log(`model output tensor: ${outputTensor.data}.`);
      }
      runMyModel();
    </script>
  </body>
</html>

Using NPM and bundling tools

Modern browser based applications are usually built by frameworks like Angular, React, Vue.js and so on. This solution usually builds the source code into one or more bundle file(s). The following TypeScript example shows how to use ONNX Runtime Web in an async context:

1. Import Tensor and InferenceSession.

import { Tensor, InferenceSession } from "onnxruntime-web";

1. Create an instance of InferenceSession and load ONNX model.

// use the following in an async method
const url = "./data/models/resnet/model.onnx";
const session = await InferenceSession.create(url);

1. Create your input Tensor(s) similar to the example below. You need to do any pre-processing required by your model at this stage. For that refer to the documentation of the model you have:

// creating an array of input Tensors is the easiest way. For other options see the API documentation
const input0 = new Tensor(new Float32Array([1.0, 2.0, 3.0, 4.0]), [2, 2]);

1. Run the model with the input Tensors. The output Tensor(s) are available once the run operation is complete:

// run this in an async method:
// assume model's input name is 'input_0' and output name is 'output_0'
const outputs = await session.run({ input_0: input0 });
const outputTensor = outputs.output_0;

1. Bundle your code. All web application frameworks offer bundling tools and instructions. Specifically, you can specify onnxruntime-web as an external dependency:

  // a webpack example
  externals: {
    'onnxruntime-web': 'ort', // add this line in your webpack.config.js
    // ...
  }

so that you can consume the file ort.min.js from a CDN provider demonstrated as above.

Documents

Developers

For information on ONNX.js development, please check Development

For API reference, please check API.

Getting ONNX models

You can get ONNX models easily in multiple ways:

• Choose a pre-trained ONNX model from the ONNX Model Zoo
• Convert models from mainstream frameworks, e.g. PyTorch, TensorFlow and Keras, by following ONNX tutorials
• Use your data to generate a customized ONNX model from Azure Custom Vision service
• Train a custom model in AzureML and save it in the ONNX format

Learn more about ONNX

• ONNX website
• ONNX on GitHub

Compatibility

OS/Browser	Chrome	Edge	Safari	Electron
Windows 10	:heavy_check_mark:	:heavy_check_mark:	-	:heavy_check_mark:
macOS	:heavy_check_mark:	-	:heavy_check_mark:	:heavy_check_mark:
Ubuntu LTS 18.04	:heavy_check_mark:	-	-	:heavy_check_mark:
iOS	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	-
Android	:heavy_check_mark:	-	-	-

Operators

WebAssembly backend

ONNX Runtime Web currently support all operators in ai.onnx and ai.onnx.ml.

WebGL backend

ONNX Runtime Web currently supports most operators in ai.onnx operator set v7 (opset v7). See operators.md for a complete, detailed list of which ONNX operators are supported by WebGL backend.

License

License information can be found here.