mirror of https://github.com/saymrwulf/onnxruntime.git synced 2026-07-14 18:12:05 +00:00

[doc] Update "Get Started" page for ORT web (#19568 )

### Description
This PR re-arranges documentation of ORT web.

Current doc: https://onnxruntime.ai/docs/
Change preview: https://fs-eire.github.io/onnxruntime/docs/

- split `Doc -> Get Started -> JavaScript` from single page into
multiple pages, to make it easier to split from web, node and
react-native
- remove `Doc -> Get Started -> with Web`. The page was a few links and
now they are moved to other places
- add a few contents into `Doc -> Get Started -> JavaScript -> Web`. Now
this is the main page for ORT web doc.
- rename `Tutorials -> deploy on Web` to `Tutorials -> Web`. "deploy" is
confusing as it's not the accurate term to describe the content.

=================================================================


### Discussions:
TBD


=================================================================


### ORT web documentation work item list:

- [ ] Update `Get Started` page for ORT web at onnxruntime.ai **( this
PR )**
    - to make it easier for users to navigate
- [ ] Update `Tutorials` page for ORT web at onnxruntime.ai
- The purpose of this page is unclear. It contains descriptive
information and step-by-step instructions on an E2E examples. It can be
a good Blog, but not good for documentation, which usually has a
well-structured content.
- The [index
page](https://fs-eire.github.io/onnxruntime/docs/tutorials/web/) has
duplicated contents with its child page ["Build a web application with
ONNX
Runtime"](https://fs-eire.github.io/onnxruntime/docs/tutorials/web/build-web-app.html)
    - Some contents are out-of-dated.
- [ ] Update [`API Usage -
SessionOptions`](https://github.com/microsoft/onnxruntime-inference-examples/tree/main/js/api-usage_session-options)
on onnxruntime-inference-examples repo.
- Add explaination and examples if necessary for all new WebGPU session
options.
- [ ] Update [`API usage - ort.env
flags`](https://github.com/microsoft/onnxruntime-inference-examples/blob/main/js/api-usage_ort-env-flags)
on onnxruntime-inference-examples repo.
    - Add all newly introduced flags.

2024-02-22 16:41:35 -08:00

5.6 KiB

Raw Blame History

title	parent	grand_parent	has_children	nav_order
Web	JavaScript	Get Started	false	1

Get started with ONNX Runtime Web

{: .no_toc }

TOC placeholder {:toc}

Install

Use the following command in shell to install ONNX Runtime Web:

# install latest release version
npm install onnxruntime-web

# install nightly build dev version
npm install onnxruntime-web@dev

Import

Use the following JavaScript code to import ONNX Runtime Web:

// use ES6 style import syntax (recommended)
import * as ort from 'onnxruntime-web';

// or use CommonJS style import syntax
const ort = require('onnxruntime-web');

If you want to use ONNX Runtime Web with WebGPU support (experimental feature), you need to import as below:

// use ES6 style import syntax (recommended)
import * as ort from 'onnxruntime-web/webgpu';

// or use CommonJS style import syntax
const ort = require('onnxruntime-web/webgpu');

For a complete table for importing, see Conditional Importing.

Documentation

See ONNX Runtime JavaScript API{:target="_blank"} for API reference. Please also check the following links for API usage examples:

Tensor - a demonstration of basic usage of Tensor.
Tensor <--> Image conversion - a demonstration of conversions from Image elements to and from Tensor.
InferenceSession - a demonstration of basic usage of InferenceSession.
SessionOptions - a demonstration of how to configure creation of an InferenceSession instance.
ort.env flags - a demonstration of how to configure a set of global flags.
See also: Typescript declarations for Inference Session, Tensor, and Environment Flags for reference.

See Tutorial: Web for tutorials.

See Training on web demo for training using onnxruntime-web.

Examples

The following examples describe how to use ONNX Runtime Web in your web applications for model inferencing:

The following are E2E examples that uses ONNX Runtime Web in web applications:

Classify images with ONNX Runtime Web - a simple web application using Next.js for image classifying.
ONNX Runtime Web demos for image recognition, handwriting analysis, real-time emotion detection, object detection, and so on.
OpenAI Whisper - demonstrates how to run whisper tiny.en in your browser using onnxruntime-web and the browser's audio interfaces.
Facebook Segment-Anything - demonstrates how to run segment-anything in your browser using onnxruntime-web with webgpu.

The following are video tutorials that use ONNX Runtime Web in web applications:

Supported Versions

EPs/Browsers	Chrome/Edge (Windows)	Chrome/Edge (Android)	Chrome/Edge (MacOS)	Chrome/Edge (iOS)	Safari (MacOS)	Safari (iOS)	Firefox (Windows)	Node.js
WebAssembly (CPU)	✔️	✔️	✔️	✔️	✔️	✔️	✔️	✔️^[1]
WebGPU	✔️^[2]	✔️^[3]	✔️	❌	❌	❌	❌	❌
WebGL	✔️^[4]	✔️^[4]	✔️^[4]	✔️^[4]	✔️^[4]	✔️^[4]	✔️^[4]	❌
WebNN	✔️^[5]	❌	❌	❌	❌	❌	❌	❌

[1]: Node.js only support single-threaded wasm EP.
[2]: WebGPU requires Chromium v113 or later on Windows. Float16 support requires Chrome v121 or later, and Edge v122 or later.
[3]: WebGPU requires Chromium v121 or later on Windows.
[4]: WebGL support is in maintenance mode. It is recommended to use WebGPU for better performance.
[5]: Requires to launch browser with commandline flag --enable-experimental-web-platform-features.

5.6 KiB Raw Blame History