Skip to content

Latest commit

 

History

History
83 lines (63 loc) · 2.87 KB

README.md

File metadata and controls

83 lines (63 loc) · 2.87 KB
Raw

Importing ONNX Runtime Web

Summary

This example is a demonstration of how to import ONNX Runtime Web in your project.

ONNX Runtime Web can be consumed by either using a script tag in HTML or using a modern web app framework with bundler.

Usage - Using Script tag in HTML

Please use the following HTML snippet to import ONNX Runtime Web:

<!-- import ONNXRuntime Web from CDN (IIFE) -->
<script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js"></script>
<!-- import ONNXRuntime Web from CDN (ESM) -->
<script type="module">
    import * as ort from "https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/esm/ort.min.js";

    // use "ort"
    // ...
</script>

See also Quick Start - Web (using script tag) for an example of using script tag.

Usage - Using a bundler

Please use the following code snippet to import ONNX Runtime Web:

// Common.js import syntax
const ort = require('onnxruntime-web');
// ES Module import syntax
import * as ort from 'onnxruntime-web';

See also Quick Start - Web (using bundler) for an example of using bundler.

Conditional Importing

ONNX Runtime Web supports conditional importing. Please refer to the following table:

Description IIFE Filename Common.js / ES Module import path
Default import. Includes all official released features ort.min.js onnxruntime-web
Experimental. Includes all features ort.all.min.js onnxruntime-web/experimental
Wasm. Includes WebAssembly backend only ort.wasm.min.js onnxruntime-web/wasm
Wasm-core. Includes WebAssembly backend with core features only. Proxy support and Multi-thread support are excluded ort.wasm-core.min.js onnxruntime-web/wasm-core
Webgl. Includes WebGL backend only ort.webgl.min.js onnxruntime-web/webgl
Webgpu. Includes WebGPU backend only ort.webgpu.min.js onnxruntime-web/webgpu
Training. Includes WebAssembly single-threaded only, with training support ort.training.wasm.min.js onnxruntime-web/training

Use the following syntax to import different target:

  • for script tag usage, replace the URL's file name from the table ("IIFE Filename" column) above:

    <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/<file-name>"></script>
    <script type="module">
  import * as ort from "https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/esm/<file-name>";

  // use "ort"
  // ...
</script>

  • for Common.js module usage, use

    const ort = require('<path>');

    with the path from the table ("Common.js / ES Module import path" column) above

  • for ES Module usage, use

    import * as ort from '<path>';

    with the path from the table ("Common.js / ES Module import path" column) above