<img src="./docs/onnx_modifier_logo_1.png" style="zoom: 60%;" />

English | [简体中文](readme_zh-CN.md)

# Introduction

To edit an ONNX model, One common way is to visualize the model graph, and edit it using ONNX Python API. This works fine. However, we have to code to edit, then visualize to check. The two processes may iterate for many times, which is time-consuming. :wave: 

What if we have a tool, which allow us to **edit and preview the editing effect in a totally visualization fashion**? 

Then `onnx-modifier` comes. With it, we can focus on editing the model graph in the visualization pannel. All the editing information will be summarized and processed by Python ONNX automatically at last. Then our time can be saved! :rocket: 

`onnx-modifier` is built based on the popular network viewer [Netron](https://github.com/lutzroeder/netron) and the lightweight web application framework [flask](https://github.com/pallets/flask). 

Currently, the following editing operations are supported:

- Delete a single node.
- Delete a node and all the nodes rooted on it.
- Recover a deleted node.
- Rename the input/output name of a node.

Hope it helps!

# Get started 

Clone the repo and install the require Python packages by 

```bash
git clone git@github.com:ZhangGe6/onnx-modifier.git
cd onnx-modifier

pip install onnx
pip install flask
```

Then run

```bash
python app.py
```

Click the url in the output info generated by flask (`http://127.0.0.1:5000/` for example), then `onnx-modifier` will be launched in the web browser. 

Click `Open Model...` to upload the ONNX model to edit. The model will be parsed and shown on the page.

# Edit

<table>
    <tr>
        <td ><center><img src="./docs/top_left_buttons.png"> <b>top left buttons (Graph-level-operations)</b></center></td>
        <td ><center><img src="./docs/node_prop_buttos.png" ><b>sidebar buttons (Node-level-operations)</b></center></td>
    </tr>
</table>


Graph-level-operation elements are placed on the left-top of the page. Currently, there are three buttons: `Preview`，`Reset` and `Download`. They can do:

- `Preview`: Preview the result model graph with all current modifications applied;
- `Reset`: Reset the model graph to its initial state;
- `Download`: Save the modified model into disk.

Node-level-operation elements are all in the sidebar, which can be invoked by clicking a specific node. Let's take a closer look.

## Delete node

There are two modes for deleting node: `Delete With Children` and `Delete Single Node`. `Delete Single Node` only deletes the clicked node, while `Delete With Children` also deletes all the node rooted on the clicked node, which is convenient and nature if we want to delete a long path of nodes. 

> The implementation of `Delete With Children` is based on the backtracking algorithm.

The deleted nodes are in grey mode. The following figure shows a typical deleting process.

<img src="./docs/onnx_modifier_delete.png" style="zoom: 50%;" />

## Recover node

 By `Recover Node` button, we can recover the node back to graph after deleting it.

## Change the input/output name of node

By changing the input/output name of nodes, we can change the model forward routine. It can also be helpful if we want to rename the model output(s). 

How can we do this using `onnx-modifier`? Note that there is a `RENAME HELPER` section in the node sidebar. All the original input/output names of a node (except weight parameters) are listed here, each following with a input field, where we can input the new name. After clicking  the `Preview` button, the graph will be rendered with the new name. 

For example,  Now we want remove the preprocess operators (`Sub->Mul->Sub->Transpose`) shown in the following figure. We can

1. click on the 1st `Conv` node, rename its input as *serving_default_input:0*.
2. click `Preview`, we can see that the model input has linked to the 1st `Conv`directly. And  the preprocess operators have been split from the main routine. Then delete them. 
3. we are done! click `Preview` to have a check (click `Download`, then we can get the modified ONNX model).

<img src="./docs/rename_node_io.png" alt="rename_node_io" style="zoom:60%;" />

# Sample models

For quick testing, some typical sample models are provided as following. Most of them are from [onnx model zoo](https://github.com/onnx/models)

- squeezeNet [Link (4.72MB)](https://github.com/onnx/models/blob/main/vision/classification/squeezenet/model/squeezenet1.0-12.onnx)
- MobileNet [Link (13.3MB)](https://github.com/onnx/models/blob/main/vision/classification/mobilenet/model/mobilenetv2-7.onnx)
- ResNet50-int8 [Link (24.6MB)](https://github.com/onnx/models/blob/main/vision/classification/resnet/model/resnet50-v1-12-int8.onnx)
- movenet-lightning [Link (9.01MB)](https://pan.baidu.com/s/1MVheshDu58o4AAgoR9awRQ?pwd=jub9)
  - Converted from the pretrained [tflite model](https://tfhub.dev/google/movenet/singlepose/lightning/4) using [tensorflow-onnx](https://github.com/onnx/tensorflow-onnx);
  - There are preprocess nodes and a big bunch of postprocessing nodes in the model.

`onnx-modifier` is under active development :hammer_and_wrench:. Welcome to use, create issues and pull requests! 🥰

# Credits and referred materials

- [Netron](https://github.com/lutzroeder/netron)
- [flask](https://github.com/pallets/flask)
- ONNX Python API [Official doc](https://github.com/onnx/onnx/blob/main/docs/PythonAPIOverview.md), [Leimao's Blog](https://leimao.github.io/blog/ONNX-Python-API/)
- ONNX IO Stream  [Leimao's Blog](https://leimao.github.io/blog/ONNX-IO-Stream/)
- [onnx-utils](https://github.com/saurabh-shandilya/onnx-utils)
- [sweetalert](https://github.com/t4t5/sweetalert)


[https://github.com/onnx/models/blob/main/vision/classification/mobilenet/model/mobilenetv2-7.onnx]: