Upgrade version and docs

Author: rainyfly

README.md

@@ -315,10 +315,18 @@ Developers can compare multiple experiments by specifying and uploading the path
 
 ### Graph
 
-**Graph** enables developers to visualize model structures by only one click. Moreover, **Graph** allows developers to explore model attributes, node information, node input and output. aiding them analyze model structures quickly and understand the direction of data flow easily.
+**Graph** enables developers to visualize model structures by only one click. Moreover, **Graph** allows developers to explore model attributes, node information, node input and output. aiding them analyze model structures quickly and understand the direction of data flow easily. Additionally, Graph supports the visualization of dynamic and static model graph respectively.
+
+- dynamic graph
+
+<p align="center">
+<img src="https://user-images.githubusercontent.com/22424850/175811841-64b44d99-7d48-4fe9-a679-01156d15af74.gif" width="85%"/>
+</p>
+
+- static graph
 
 <p align="center">
-<img src="https://user-images.githubusercontent.com/48054808/90869866-6aecee00-e3cb-11ea-8211-b8af070239e6.png" width="85%"/>
+<img src="https://user-images.githubusercontent.com/22424850/175811795-1fd21737-06f0-42fc-bea3-ef7a17216fc9.gif" width="85%"/>
 </p>
 
 

README_CN.md

@@ -337,12 +337,18 @@ value: 3.1297709941864014
 
 ### Graph
 
-一键可视化模型的网络结构。可查看模型属性、节点信息、节点输入输出等，并支持节点搜索，辅助用户快速分析模型结构与了解数据流向。
+一键可视化模型的网络结构。可查看模型属性、节点信息、节点输入输出等，并支持节点搜索，辅助用户快速分析模型结构与了解数据流向，覆盖动态图与静态图两种格式。
+- 动态图
 
 <p align="center">
-<img src="https://user-images.githubusercontent.com/48054808/84483052-5acdd980-accb-11ea-8519-1608da7ee698.png" width="85%"/>
+<img src="https://user-images.githubusercontent.com/22424850/175770313-2509f7e9-041a-4654-9a0f-45f4bd76e1e8.gif" width="85%"/>
 </p>
 
+- 静态图
+
+<p align="center">
+<img src="https://user-images.githubusercontent.com/22424850/175770315-11e2c3f5-141c-4f05-be86-0e1e2785e11f.gif" width="85%"/>
+</p>
 
 ### Histogram
 

docs/README.md

@@ -239,12 +239,21 @@ Developers can compare with multiple experiments by specifying and uploading the
 
 ### Graph
 
-**Graph** enables developers to visualize model structures by only one click. Moreover, **Graph** allows Developers to explore model attributes, node information, node input and output. aiding them analyze model structure quickly and understand the direction of data flow easily.
+**Graph** enables developers to visualize model structures by only one click. Moreover, **Graph** allows developers to explore model attributes, node information, node input and output. aiding them analyze model structures quickly and understand the direction of data flow easily. Additionally, Graph supports the visualization of dynamic and static model graph respectively.
+
+- dynamic graph
+
+<p align="center">
+<img src="https://user-images.githubusercontent.com/22424850/175811841-64b44d99-7d48-4fe9-a679-01156d15af74.gif" width="85%"/>
+</p>
+
+- static graph
 
 <p align="center">
-<img src="https://user-images.githubusercontent.com/48054808/90869866-6aecee00-e3cb-11ea-8211-b8af070239e6.png" width="85%"/>
+<img src="https://user-images.githubusercontent.com/22424850/175811795-1fd21737-06f0-42fc-bea3-ef7a17216fc9.gif" width="85%"/>
 </p>
 
+
 ### Histogram
 
 **Histogram** displays how the trend of tensors (weight, bias, gradient, etc.) changes during the training process in the form of histogram. Developers can adjust the model structures accurately by having an in-depth understanding of the effect of each layer.

docs/README_CN.md

@@ -250,9 +250,17 @@ app.run(logdir="./log")
 
 ### Graph
 
-一键可视化模型的网络结构。可查看模型属性、节点信息、节点输入输出等，并支持节点搜索，辅助用户快速分析模型结构与了解数据流向。
+一键可视化模型的网络结构。可查看模型属性、节点信息、节点输入输出等，并支持节点搜索，辅助用户快速分析模型结构与了解数据流向，覆盖动态图与静态图两种格式。
+- 动态图
+
+<p align="center">
+<img src="https://user-images.githubusercontent.com/22424850/175770313-2509f7e9-041a-4654-9a0f-45f4bd76e1e8.gif" width="85%"/>
+</p>
+
+- 静态图
+
 <p align="center">
-<img src="https://user-images.githubusercontent.com/48054808/84483052-5acdd980-accb-11ea-8519-1608da7ee698.png" width="85%"/>
+<img src="https://user-images.githubusercontent.com/22424850/175770315-11e2c3f5-141c-4f05-be86-0e1e2785e11f.gif" width="85%"/>
 </p>
 
 ### Histogram

docs/components/README.md

@@ -454,44 +454,114 @@ Then, open the browser and enter the address`http://127.0.0.1:8080` to view:
 
 Graph can visualize the network structure of the model by one click. It enables developers to view the model attributes, node information, searching node and so on. These functions help developers analyze model structures and understand the directions of data flow quickly.
 
+### Record Interface
+
+The interface of the Graph is shown as follows:
+
+```python
+add_graph(model, input_spec, verbose=False):
+```
+
+The interface parameters are described as follows:
+
+| parameter          | format                  | meaning                                        |
+| -------------- | --------------------- | ------------------------------------------- |
+| model          | paddle.nn.Layer              | Dynamic model of paddle |
+| input_spec     | list\[paddle.static.InputSpec\|Tensor\]   | Describes the input of the saved model's [forward arguments](https://www.paddlepaddle.org.cn/documentation/docs/zh/api/paddle/static/InputSpec_cn.html)        |
+| verbose           | bool             | Whether to print graph statistic information in console.       |
+
+**Note**
+
+If you want to use add_graph interface, paddle package is required. Please refer to website of [PaddlePaddle](https://www.paddlepaddle.org.cn/install/quick?docurl=/documentation/docs/en/install/pip/linux-pip_en.html)。
+
 ### Demo
+The following shows an example of how to use Graph component, and script can be found in [Graph Demo](https://github.com/PaddlePaddle/VisualDL/blob/develop/demo/components/graph_test.py)
 There are two methods to launch this component:
 
-- By the front end:
+```python
+import paddle
+import paddle.nn as nn
+import paddle.nn.functional as F
 
-  - If developers only need to use Graph, developers can launch VisualDL (Graph) by executing `visualdl`on the command line.
-  - If developers need to use Graph and other functions at the same time, they need to specify the log file path (using `./log` as an example):
+from visualdl import LogWriter
 
-  ```shell
-  visualdl --logdir ./log --port 8080
-  ```
 
+class MyNet(nn.Layer):
+    def __init__(self):
+        super(MyNet, self).__init__()
+        self.conv1 = nn.Conv2D(
+            in_channels=1, out_channels=20, kernel_size=5, stride=1, padding=2)
+        self.max_pool1 = nn.MaxPool2D(kernel_size=2, stride=2)
+        self.conv2 = nn.Conv2D(
+            in_channels=20,
+            out_channels=20,
+            kernel_size=5,
+            stride=1,
+            padding=2)
+        self.max_pool2 = nn.MaxPool2D(kernel_size=2, stride=2)
+        self.fc = nn.Linear(in_features=980, out_features=10)
+
+    def forward(self, inputs):
+        x = self.conv1(inputs)
+        x = F.relu(x)
+        x = self.max_pool1(x)
+        x = self.conv2(x)
+        x = F.relu(x)
+        x = self.max_pool2(x)
+        x = paddle.reshape(x, [x.shape[0], -1])
+        x = self.fc(x)
+        return x
+
+
+net = MyNet()
+with LogWriter(logdir="./log/graph_test/") as writer:
+    writer.add_graph(
+        model=net,
+        input_spec=[paddle.static.InputSpec([-1, 1, 28, 28], 'float32')],
+        verbose=True)
+```
 
-- By the backend:
 
-  - Add the parameter `--model` and specify the **model file** path (not the folder path) to launch the panel:
 
-  ```shell
-  visualdl --model ./log/model --port 8080
-  ```
+After running the above program, developers can launch the panel by:
 
+```shell
+visualdl --logdir ./log/graph_test/ --port 8080
+```
 
-After the launch, developers can view the network structure:
+Then, open the browser and enter the address`http://127.0.0.1:8080` to view:
 
 <p align="center">
-  <img src="https://user-images.githubusercontent.com/48054808/90877274-6548d580-e3d6-11ea-9804-74a1ead47b30.png" width="80%"/>
+  <img src="https://user-images.githubusercontent.com/22424850/175811156-a80ca0c4-207d-44d7-bd5a-9701a7875722.gif" width="80%"/>
 </p>
 
+**Note**
+
+We provide option --model to specify model structure file in previous versions, and this option is still supported now. You can specify model exported by `add_graph` interface ("vdlgraph" contained in filename), which will be shown in dynamic graph page, and we use string "manual_input_model" in the page to denote the model you specify by this option. Other supported file formats are presented in static graph page.
+
+For example
+```shell
+visualdl --model ./log/model.pdmodel --port 8080
+```
+which will be shown in static graph page. And
+```shell
+visualdl --model ./log/vdlgraph.1655783158.log --port 8080
+```
+shown in dynamic graph page.
+
 ### Functional Instructions
 
-- Upload the model file by one-click
-  - Supported model：PaddlePaddle、ONNX、Keras、Core ML、Caffe、Caffe2、Darknet、MXNet、ncnn、TensorFlow Lite
-  - Experimental supported model：TorchScript、PyTorch、Torch、 ArmNN、BigDL、Chainer、CNTK、Deeplearning4j、MediaPipe、ML.NET、MNN、OpenVINO、Scikit-learn、Tengine、TensorFlow.js、TensorFlow
+Graph page is divided into dynamic and static version currently. Dynamic version is used to visualize dynamic model of paddle, which is exported by add_graph interface.
+The other is used to visualize static model of paddle, which is exported by [paddle.jit.save](https://www.paddlepaddle.org.cn/documentation/docs/en/api/paddle/jit/save_en.html) interface and other supported formats.
+
 
 <p align="center">
-  <img src="https://user-images.githubusercontent.com/48054808/90877449-a80aad80-e3d6-11ea-8016-0a2f3afe6f5e.png" width="80%"/>
+  <img src="https://user-images.githubusercontent.com/22424850/175810574-d3526ef5-859f-4ea9-b705-f55bfc8ed5af.png" width="80%"/>
 </p>
 
+**Common functions**
+
+
 - Developers are allowed to drag the model up and down，left and right，zoom in and zoom out.
 
 <p align="center">
@@ -534,6 +604,44 @@ After the launch, developers can view the network structure:
   <img src="https://user-images.githubusercontent.com/48054808/90879247-34b66b00-e3d9-11ea-94ef-a26b1ba07dd0.png" width="25%"/>
 </p>
 
+**Specific feature in dynamic version**
+
+- Fold and unfold one node
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/175810800-4823b9f1-3d59-44e8-aaa5-a80577624452.png" width="80%"/>
+</p>
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/175810790-a35f83bf-a23c-4a28-afb7-2e0cf7711b9c.png" width="80%"/>
+</p>
+
+- Fold and unfold all nodes
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/175810856-ff98a1ed-2a4f-4cc1-bc9b-3085857c0b81.png" width="80%"/>
+</p>
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/175810837-a0953956-7320-4e78-9c52-72ad13962216.png" width="80%"/>
+</p>
+
+- Link api specification of paddle
+
+  If you use paddle.nn components to construct your network model, you can use alt+click mouse to direct to corresponding api specification.
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/175810992-b86e9aef-e700-4c2d-bcd0-21fc96fc2564.png" width="80%"/>
+</p>
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/22424850/175810997-0672d836-4d7c-432d-b5de-187f97c421ae.png" width="80%"/>
+</p>
+
+**Specific feature in static version**
+
+- Upload the model file by one-click
+  - Supported model：PaddlePaddle、ONNX、Keras、Core ML、Caffe、Caffe2、Darknet、MXNet、ncnn、TensorFlow Lite
+  - Experimental supported model：TorchScript、PyTorch、Torch、 ArmNN、BigDL、Chainer、CNTK、Deeplearning4j、MediaPipe、ML.NET、MNN、OpenVINO、Scikit-learn、Tengine、TensorFlow.js、TensorFlow
+
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/48054808/90877449-a80aad80-e3d6-11ea-8016-0a2f3afe6f5e.png" width="80%"/>
+</p>
+
 ## Histogram--Distribution of Tensors 
 
 ### Introduction