Getting ONNX Models Working In A Quarto Blog

To get ONNX models working in your quarto blog, first you’ll need to have a model. In my case I’m using one from pytorch. This requires installing pytorch for the model, onnxscript and onnx for exporting the model, and onnxruntime for loading the model back into python to test it out.

To get the model into your quarto blog, you’ll need the model, and the files to load it and display/interact with it.

Make sure you list everything as a resource in the YAML block at the top of the post.

loadmodel.html contains the javascript used to load and interact with the model, and the html to display a simple UI.

We’re using a CDN (cdn.jsdelivr.net/npm/onnxruntime-web@1.20.0/dist/ort.min.js) to avoid a build step.

For references see,

onnxruntime.ai/docs/tutorials/web/large-models.htmlonnxruntime.ai/docs/tutorials/web/deploy.html

Python Code

Imports and Model

Code

Export the model

Code

Test Model in Python

Code

HTML and Javascript Code

Example of HTML and Javascript

Code

Code

Counter: 0

Click Me!

Loading The Model

Code

Code

MyModel Inference

Status: Initializing...

Predict from Random Input

• -