refine English readme and add Chinese readme

onnx_modifier.py

@@ -97,6 +97,9 @@ class onnxModifier:
                 # print(node.input, node.output)
             
     def check_and_save_model(self, save_dir='./modified_onnx'):
+        if not os.path.exists(save_dir):
+            os.mkdir(save_dir)
+            
         save_path = os.path.join(save_dir, 'modified_' + self.model_name)
         onnx.checker.check_model(self.model_proto)
         onnx.save(self.model_proto, save_path)  

readme.md

@@ -1,29 +1,36 @@
 <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 **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: 
+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 with it.
+- Delete a node and all the nodes rooted on it.
 - Recover a deleted node.
-- Rename the input/output name.
+- Rename the input/output name of a node.
 
 Hope it helps!
 
 # Get started 
 
-Install the require Python packages by 
+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
 ```
@@ -36,14 +43,14 @@ 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 show on the page.
+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"> top left buttons (Graph-level-operations)</center></td>
-        <td ><center><img src="./docs/node_prop_buttos.png" >sidebar buttons (Node-level-operations)</center></td>
+        <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>
 
@@ -51,15 +58,15 @@ Graph-level-operation elements are placed on the left-top of the page. Currently
 
 - `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 file.
+- `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 (buttons) 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. 
+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 backtracking algorithm.
+> 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.
 
@@ -73,13 +80,13 @@ The deleted nodes are in grey mode. The following figure shows a typical deletin
 
 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 and output name of a node is listed here, each following with a input field. we can input the new name here. After clicking  the `Preview` button, the graph will be rendered with the new name (and a new model forward routine). 
+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 first `Conv` node, rename the original input name as *serving_default_input:0*.
-2. delete the node between input node and the first `Conv` 
-3. click `Preview` to preview, then click `Download`, we can get the modified ONNX model.
+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%;" />
 
@@ -88,8 +95,7 @@ For example,  Now we want remove the preprocess operators (`Sub->Mul->Sub->Trans
 `onnx-modifier` is under active development :hammer_and_wrench:. Welcome to use, create issues and pull requests! 🥰
 
 # Credits and referred materials
-
-- ONNX Python API [Official](https://github.com/onnx/onnx/blob/main/docs/PythonAPIOverview.md) [Leimao's Blog](https://leimao.github.io/blog/ONNX-Python-API/)
+- 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/)
 - [Netron](https://github.com/lutzroeder/netron)
 - [onnx-utils](https://github.com/saurabh-shandilya/onnx-utils)

readme_zh-CN.md.md

@@ -0,0 +1,103 @@
+---
+title: onnx-modifier-ONNX可视化编辑
+author: Zhang Ge
+date: 2022-04-29 09:09:00 +0800
+categories: [专业积累, 工具开发]
+tags: [onnx]
+math: true
+---
+
+简体中文 | [English](readme.md)
+
+<img src="./docs/onnx_modifier_logo_1.png" style="zoom: 60%;" />
+
+`ONNX `(Open Neural Network Exchange) 是一种针对机器学习所设计的开放式的文件格式，经常作为不同框架模型转化的中间文件。有时我们拿到ONNX文件，想将它进行一些修改，比如：
+
+- **删除部分节点。** 比如，`ONNX`文件中一些前后处理的算子节点。
+- **增加节点**。
+- **修改节点属性。**比如修改某一节点的输入输出名称。
+
+目前常用的方法是，先可视化模型图结构，然后基于`ONNX`的Python API编写脚本，对模型图结构进行编辑。但这可能需要我们在可视化-脚本-可视化-...之间反复横跳。而且在一张庞大的图上搜集想要修改的节点，也比较花时间。
+
+能不能有一个工具，可以**实时预览编辑后的可视化效果，从而更方便，快捷，直观地实现`ONNX`模型的编辑**呢？:rocket: 这便是`onnx-modifier` ([github]())开发的动机。所有的编辑信息将最终汇总，统一送由ONNX Python处理，得到编辑后的ONNX模型文件。
+
+`onnx-modifier`基于流行的模型可视化工具 [Netron](https://github.com/lutzroeder/netron) 和轻量级Web应用框架 [flask](https://github.com/pallets/flask) 开发。希望它能给社区带来一些贡献~
+
+# 安装与运行
+
+- 拉取`onnx-modifier`，安装所需要的Python库 
+
+  ```bash
+  git clone git@github.com:ZhangGe6/onnx-modifier.git
+  cd onnx-modifier
+  
+  pip install onnx
+  pip install flask
+  ```
+
+- 运行 
+
+  ```bash
+  python app.py
+  ```
+
+  点击输出中的url（如`http://127.0.0.1:5000/`），即可在浏览器中进入onnx-modifier界面。点击`Open Model...`，上传所需要编辑的模型文件，上传完毕后，网络可视化结构会自动显示。
+
+# 编辑
+
+<table>
+    <tr>
+        <td ><center><img src="./docs/top_left_buttons.png"> <b>图结构层级操作<br>（界面左上角）</b></center></td>
+        <td ><center><img src="./docs/node_prop_buttos.png" ><b>节点层级操作（节点属性栏）</b></center></td>
+    </tr>
+<table>
+
+
+
+图结构层级的操作按钮放置在可视化页面的左上角，有三个：`Preview`，`Reset`和`Download`. 它们的功能分别为：
+
+- `Preview`：预览当前编辑得到的模型图结构；
+- `Reset`：重置模型图结构为初始状态；
+- `Download`：保存编辑后的模型文件到本地。
+
+节点层级的操作都在节点属性栏里，点击某一节点后即可弹出，一起来康康。
+
+## 删除节点
+
+删除节点有两种模式：`Delete With Children` 和 `Delete Single Node`. 后者只删除当前单个节点；而前者还会自动删除以这个节点为根节点的所有节点，就不用一个一个删除啦。
+
+> `Deletw With Children`方法基于回溯算法实现。
+
+被删除的节点会变灰显示。删除节点的效果如下：
+
+<img src="./docs/onnx_modifier_delete.png" style="zoom: 60%;" />
+
+
+
+## 重置节点
+
+在节点对应的属性栏点击`Recover Node`按钮，可将被删除的节点重新恢复到图中。
+
+## 修改节点输入输出名称
+
+通过修改节点的输出输出名，我们可以对模型推理图进行修改（如删除一些预处理/后处理节点）。该功能同样可以用在更改模型的输出的名称（即修改模型叶子节点的输出名）。
+
+那在`onnx-modifer`中要怎么做呢？在节点属性栏中有一个`RENAME HELPER`小节。当前节点的全部输入/输出名都会列在这里（不包含模型权重），每个输入/输出名后面跟着一个输入框，直接在对应的输入框中，键入新的名称就可以啦。
+
+比如，在下图所示的模型中，我们想要删除预处理对应的节点（`Sub->Mul->Sub->Transpose`），可以这样做：
+
+1. 点击第一个`Conv`节点，在弹出的属性栏中，将输入名称改为*serving_default_input:0*；
+2. 预览一下，发现输入已经和第一个`Conv`直接相连，几个预处理节点也已经从前向图中分离出来，将它们删除；
+3. 完工，预览check一下（点击`Download`就可以获得编辑后的ONNX模型啦）。
+
+<img src="./docs/rename_node_io.png" alt="rename_node_io" style="zoom:60%;" />
+
+`onnx-modifer`正在活跃地更新中:hammer_and_wrench:。 欢迎使用，提issue，如果有帮助的话，感谢给个:star:~
+
+# 参考资料
+
+- 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/)
+- [Netron](https://github.com/lutzroeder/netron)
+- [onnx-utils](https://github.com/saurabh-shandilya/onnx-utils)
+- [flask](https://github.com/pallets/flask)