Repro for microsoft/onnxruntime#15869
Basic example of ONNX runtime web with WebGPU support, based on this WASM example
To run: python -m http.server
Open http://localhost:8000 in Chrome
Should take a little bit to load the model (137MB) then display loaded model successfully
| <!DOCTYPE html> | |
| <html> | |
| <header> | |
| <title>ONNX Runtime JavaScript example with WebGPU</title> | |
| </header> | |
| <body> | |
| <script type="module"> | |
| // see also advanced usage of importing ONNX Runtime Web: | |
| // https://github.com/microsoft/onnxruntime-inference-examples/tree/main/js/importing_onnxruntime-web | |
| // import ONNXRuntime Web from CDN | |
| import * as ort from "https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/esm/ort.webgpu.min.js"; | |
| // set wasm path override (not sure why this is still needed for webgpu backend? as fallback for missing kernels?) | |
| ort.env.wasm.wasmPaths = "https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/"; | |
| // use an async context to call onnxruntime functions. | |
| async function main() { | |
| try { | |
| // create a new session and load the model. | |
| const modelPath = 'https://huggingface.co/runwayml/stable-diffusion-v1-5/resolve/onnx/vae_encoder/model.onnx?download=true' | |
| const session = await ort.InferenceSession.create(modelPath, {executionProviders: ['webgpu']}); | |
| document.write(`loaded model successfully`); | |
| } catch (e) { | |
| document.write(`failed to load ONNX model: ${e}.`); | |
| } | |
| } | |
| main(); | |
| </script> | |
| </body> | |
| </html> |
microsoft/onnxruntime#20165 makes some optimization to the package export/import and deployment. Now you can use latest dev build:
As explained in microsoft/onnxruntime#15869, ORT Web always uses WebAssembly, regardless what EP it is using.