Model Explorer ONNX Adapter

ONNX Adapter for google-ai-edge/model-explorer

🌟 Use it on HuggingFace Spaces

https://huggingface.co/spaces/justinchuby/model-explorer

Installation

pip install --upgrade model-explorer-onnx

Usage

model-explorer --extensions=model_explorer_onnx

# Or as a shortcut
onnxvis

# Supply model path
onnxvis model.onnx

Read more on the Model Explorer User Guide.

Static web app (Pyodide + pure JS frontend)

This repository also includes a static web app under web/, which runs ONNX conversion fully in-browser with Pyodide and renders with ai-edge-model-explorer-visualizer.

cd web
npm install
npm run dev

Build for static hosting:

npm run build

Install as a desktop app (PWA)

The web/ app is configured as a Progressive Web App. After deployment (or when running locally), open it in a Chromium-based browser and use "Install app" in the address bar/menu to install it like a desktop application.

GitHub Pages deployment is configured in .github/workflows/pages.yaml.

Keeping web/src/python/convert.py in sync with src/

The web converter is web-adapted, but it is tracked against src/model_explorer_onnx/main.py and src/model_explorer_onnx/_passes.py with a sync stamp. web scripts (dev/build) run a sync check automatically.

If you intentionally update web/src/python/convert.py after source changes:

python tools/web/sync_web_converter.py --mode update

Notes on representation

Graph input/output/initializers in ONNX are values (edges), not nodes. A node is displayed here for visualization. Graph inputs that are initialized by initializers are displayed as InitializedInput, and are displayed closer to nodes that use them.

Nodes that implicitly capture values for their sub-graphs (Loop, Scan, etc.) will have an additional (Capture) node as input that connects all of the implicitly captured values with itself. As a special case, the subgraphs of an If node are flattened. The outputs of the two branches of an If node will be gathered by a (Phi) node to show connectivity. This modification in the graph ensures that all value dependencies are shown in the visualization.

Color Themes

Get node color themes here

Visualizing PyTorch ONNX exporter (dynamo=True) accuracy results

import torch
from torch.onnx.verification import verify_onnx_program

from model_explorer_onnx.torch_utils import save_node_data_from_verification_info

# Export the and save model
onnx_program = torch.onnx.export(model, args, dynamo=True)
onnx_program.save("model.onnx")

verification_infos = verify_onnx_program(onnx_program, compare_intermediates=True)

# Produce node data for Model Explorer for visualization
save_node_data_from_verification_info(
    verification_infos, onnx_program.model, model_name="model"
)

You can then use Model Explorer to visualize the results by loading the generated node data files:

onnxvis model.onnx --node_data_paths=model_max_abs_diff.json,model_max_rel_diff.json

Screenshots