|
| 1 | +# ONNX.js |
| 2 | +ONNX.js is a Javascript library for running ONNX models on browsers and on Node.js. |
| 3 | + |
| 4 | +ONNX.js has adopted WebAssembly and WebGL technologies for providing an optimized ONNX model inference runtime for both CPUs and GPUs. |
| 5 | + |
| 6 | +### Why ONNX models |
| 7 | +The [Open Neural Network Exchange](http://onnx.ai/) (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. [This](#Getting-ONNX-models) is a great place to start getting acquainted with ONNX models. |
| 8 | + |
| 9 | +### Why ONNX.js |
| 10 | +With ONNX.js, 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. |
| 11 | + |
| 12 | +ONNX.js can run on both CPU and GPU. For running on CPU, [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly) is adopted to execute model at near-native speed. Furthermore, ONNX.js utilizes [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_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.js 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. |
| 13 | + |
| 14 | +### Benchmarks |
| 15 | + |
| 16 | +Benchmarks have been run against the most prominent open source solutions in the same market. Below are the results collected for Chrome and Edge browsers on one sample machine (computations run on both CPU and GPU): |
| 17 | + |
| 18 | + |
| 19 | + |
| 20 | +> NOTE: |
| 21 | +> 1. Keras.js doesn't support WebGL usage on Edge |
| 22 | +> 2. Keras.js and TensorFlow.js doesn't support WebAssembly usage on any browser |
| 23 | +
|
| 24 | +> The specs of the machine that was used to perform the benchmarking is listed below: |
| 25 | +> * OS: Microsoft Windows 10 Enterprise Insider Preview |
| 26 | +> * Model: HP Z240 Tower Workstation |
| 27 | +> * Processor: Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz, 3401 Mhz, 4 Core(s), 8 Logical Processor(s) |
| 28 | +> * Installed Physical Memory (RAM): 32.0 GB |
| 29 | +> * GPU make / Chip type: AMD FirePro W2100 / AMD FirePro SDI (0x6608) |
| 30 | +> * GPU Memory (approx.): 18.0 GB |
| 31 | +
|
| 32 | +### Demo |
| 33 | + |
| 34 | +[ONNX.js demo website](https://microsoft.github.io/onnxjs-demo/) shows the capabilities of ONNX.js. Check the [code](https://github.com/Microsoft/onnxjs-demo). |
| 35 | + |
| 36 | +## Getting Started |
| 37 | +There are multiple ways to use ONNX.js in a project: |
| 38 | + |
| 39 | +### Using `<script>` tag |
| 40 | + |
| 41 | +This is the most straightforward way to use ONNX.js. The following HTML example shows how to use it: |
| 42 | + |
| 43 | +```html |
| 44 | +<html> |
| 45 | + <head> |
| 46 | + </head> |
| 47 | + |
| 48 | + <body> |
| 49 | + <!-- Load ONNX.js --> |
| 50 | + <script src="https://cdn.jsdelivr.net/npm/onnxjs/dist/onnx.min.js"></script> |
| 51 | + <!-- Code that consume ONNX.js --> |
| 52 | + <script> |
| 53 | + // create a session |
| 54 | + const myOnnxSession = new onnx.InferenceSession(); |
| 55 | + // load the ONNX model file |
| 56 | + myOnnxSession.loadModel("./my-model.onnx").then(()=>{ |
| 57 | + // generate model input |
| 58 | + const inferenceInputs = getInputs(); |
| 59 | + // execute the model |
| 60 | + session.run(inferenceInputs).then(output=>{ |
| 61 | + // consume the output |
| 62 | + const outputTensor = output.values().next().value; |
| 63 | + console.log(`model output tensor: ${outputTensor.data}.`); |
| 64 | + }); |
| 65 | + }) |
| 66 | + </script> |
| 67 | + </body> |
| 68 | +</html> |
| 69 | +``` |
| 70 | + |
| 71 | +Refer to [browser/Add](./examples/browser/add) for an example. |
| 72 | + |
| 73 | +### Using NPM and bundling tools |
| 74 | + |
| 75 | +Modern browser based applications are usually built by frameworks like [Angular](https://angular.io/), [React](https://reactjs.org/), [Vue.js](https://vuejs.org/) 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.js in an async context: |
| 76 | + |
| 77 | +1. Import `Tensor` and `InferenceSession`. |
| 78 | +```ts |
| 79 | +import {Tensor, InferenceSession} from 'onnxjs'; |
| 80 | +``` |
| 81 | + |
| 82 | +2. Create an instance of `InferenceSession`. |
| 83 | +```ts |
| 84 | +const session = new InferenceSession(); |
| 85 | +``` |
| 86 | + |
| 87 | +3. Load the ONNX.js model |
| 88 | +```ts |
| 89 | +// use the following in an async method |
| 90 | +const url = './data/models/resnet/model.onnx'; |
| 91 | +await session.loadModel(url); |
| 92 | +``` |
| 93 | + |
| 94 | +4. Create your input Tensor(s) similar to the example below. You need to do any pre-processing required by |
| 95 | +your model at this stage. For that refer to the documentation of the model you have: |
| 96 | +```javascript |
| 97 | +// creating an array of input Tensors is the easiest way. For other options see the API documentation |
| 98 | +const inputs = [new Tensor(new Float32Array([1.0,2.0,3.0,4.0]), 'float32', [2,2])]; |
| 99 | +``` |
| 100 | +5. Run the model with the input Tensors. The output Tensor(s) are available once the run operation is complete: |
| 101 | +```javascript |
| 102 | +// run this in an async method: |
| 103 | +const outputMap = await session.run(inputs); |
| 104 | +const outputTensor = outputMap.values().next().value; |
| 105 | +``` |
| 106 | +More verbose examples on how to use ONNX.js are located under the `examples` folder. For further info see [Examples](./examples/README.md) |
| 107 | + |
| 108 | +### Running in Node.js |
| 109 | + |
| 110 | +ONNX.js can run in Node.js as well. This is usually for testing purpose. Use the `require()` function to load ONNX.js: |
| 111 | +```js |
| 112 | +require('onnxjs'); |
| 113 | +``` |
| 114 | + |
| 115 | +Refer to [node/Add](./examples/node/add) for a detailed example. |
| 116 | + |
| 117 | +*NOTE: Currently, the supported platforms are Windows 10 + Edge/Chrome/Firefox/Electron/Node.js (support for other platforms is coming soon).* |
| 118 | + |
| 119 | +## Documents |
| 120 | + |
| 121 | +### Developers |
| 122 | +For information on development ONNX.js, please check [Development](./docs/development.md) |
| 123 | + |
| 124 | +For API reference, please check [API](./docs/api.md). |
| 125 | + |
| 126 | +### Getting ONNX models |
| 127 | +You could get ONNX models easily in multiple ways: |
| 128 | +- Choose a pre-trained ONNX model from the [ONNX Model Zoo](https://github.com/onnx/models) |
| 129 | +- Convert models from mainstream frameworks, e.g. PyTorch, TensorFlow and Keras, by following [ONNX tutorials](https://github.com/onnx/tutorials) |
| 130 | +- Use your data to generate a customized ONNX model from [Azure Custom Vision service](https://docs.microsoft.com/en-us/azure/cognitive-services/Custom-Vision-Service/home) |
| 131 | +- [Train a custom model in AzureML](https://github.com/Azure/MachineLearningNotebooks/tree/master/training) and save it in the ONNX format |
| 132 | + |
| 133 | +Learn more about ONNX |
| 134 | +- [ONNX website](http://onnx.ai/) |
| 135 | +- [ONNX on GitHub](https://github.com/onnx/onnx) |
| 136 | + |
| 137 | +### Operators supported |
| 138 | +The [list](./docs/operators.md) of ONNX operators supported by each of the 3 available builtin backends (cpu, wasm, and webgl). |
| 139 | + |
| 140 | +## Contribute |
| 141 | +We’d love to embrace your contribution to ONNX.js. Please refer to [CONTRIBUTING.md](./CONTRIBUTING.md). |
| 142 | + |
| 143 | +## License |
| 144 | +Copyright (c) Microsoft Corporation. All rights reserved. |
| 145 | + |
| 146 | +Licensed under the [MIT](./LICENSE) License. |
0 commit comments