README.md 44.9 KB
Newer Older
1
[**中文**](./README_CN.md)
Y
YixinKristy 已提交
2

3
# VisualDL Guide
Y
YixinKristy 已提交
4

5
### Overview
Y
YixinKristy 已提交
6

7
VisualDL is a visualization tool designed for Deep Learning. VisualDL provides a variety of charts to show the trends of parameters. It enables users to understand the training process and model structures of Deep Learning models more clearly and intuitively so as to optimize models efficiently.
Y
YixinKristy 已提交
8

走神的阿圆's avatar
走神的阿圆 已提交
9
Currently, VisualDL provides ten components: scalar, image, audio, text, graph, histogram, pr curve, ROC curve, high dimensional and hyper parameters. VisualDL iterates rapidly and new functions will be continuously added.
Y
YixinKristy 已提交
10

走神的阿圆's avatar
走神的阿圆 已提交
11

12 13


14 15 16 17 18
|                        Component Name                        |         Display Chart         | Function                                                     |
| :----------------------------------------------------------: | :---------------------------: | :----------------------------------------------------------- |
|                [ Scalar](#Scalar--Line-Chart)                |          Line Chart           | Display scalar data such as loss and accuracy dynamically.   |
|             [Image](#Image--Image-Visualization)             |      Image Visualization      | Display images, visualizing the input and the output and making it easy to view the changes in the intermediate process. |
|             [Audio](#Audio--Audio-Play)             |      Audio Play      | Play the audio during the training process, making it easy to monitor the process of speech recognition and text-to-speech. |
走神的阿圆's avatar
走神的阿圆 已提交
19
| [Text](#Text) | Text Visualization | Visualize the text output of NLP models within any stage, aiding developers to compare the changes of outputs so as to deeply understand the training process and simply evaluate the performance of the model. |
20 21 22
|              [Graph](#Graph--Network-Structure)              |       Network Structure       | Visualize network structures, node attributes and data flow, assisting developers to learn and to optimize network structures. |
|       [Histogram](#Histogram--Distribution-of-Tensors)       |    Distribution of Tensors    | Present the changes of distributions of tensors, such as weights/gradients/bias, during the training process. |
|                   [PR Curve](#PR-Curve)                   |   Precision & Recall Curve    | Display precision-recall curves across training steps, clarifying the tradeoff between precision and recall when comparing models. |
走神的阿圆's avatar
走神的阿圆 已提交
23
|                   [ROC Curve](#ROC-Curve)                   |   Receiver Operating Characteristic curve    | Show the performance of a classification model at all classification thresholds. |
24
| [High Dimensional](#High-Dimensional--Data-Dimensionality-Reduction) | Data Dimensionality Reduction | Project high-dimensional data into 2D/3D space for embedding visualization, making it convenient to observe the correlation between data. |
走神的阿圆's avatar
走神的阿圆 已提交
25
| [Hyper Parameters](#hyperparameters--hyperparameter-visualization) |  HyperParameter Visualization  | Visualize the relationship between hyperparameters and model metrics (such as accuracy and loss) in a rich view, helping you identify the best hyperparameters in an efficient way. |
26

27
At the same time, VisualDL provides [VDL.service](#vdlservice) , which allows developers to easily save, track and share visualization results of experiments with anyone for free.
28

29
## Scalar--Line Chart
30

31 32 33 34 35 36 37
### Introduction

The data type of the input is scalar values. Scalar is used to present the training parameters in the form of a line chart. By using Scalar to record loss and accuracy, developers are able to track the trend of changes easily through line charts.

### Record Interface

The interface of the Scalar is shown as follows:
38 39 40 41

```python
add_scalar(tag, value, step, walltime=None)
```
42 43 44 45 46 47 48
The interface parameters are described as follows:
| parameter | format | meaning                                                      |
| --------- | ------ | ------------------------------------------------------------ |
| tag       | string | Record the name of the scalar data,e.g.train/loss. Notice that the name cannot contain `%` |
| value     | float  | Record the data, can't be `None`                                              |
| step      | int    | Record the training steps. The data will be sampled, meaning that only part of data will be displayed. (the sampling algorithm is reservoir sampling, details can be refered to [VisualDL sampling algorithm](../faq.md/#what-are-the-sampling-rules-of-visualdl))                                      |
| walltime  | int    | Record the time-stamp of the data, the default is the current time-stamp |
49

50
*Note that the rules of specifying tags (e.g.train/acc) are:
Y
YixinKristy 已提交
51

52 53 54
1. The tag before the first  `/` is the parent tag and serves as the tag of the same raw
2. The tag after the first `/` is a child tag, the charts with child tag will be displayed under the parent tag. The data of the same parent tag but different child tags will be displayed in the same column, but not in the same picture.
3. Users can use multiple `/`, but the tag of a raw is the parent tag--the tag before the first `/`
Y
YixinKristy 已提交
55

56
Here are three examples:
Y
YixinKristy 已提交
57

58
- When 'train' is created as the parent tag and 'acc' and 'loss' are created as child tags:`train/acc``train/loss`,the tag of a raw is 'train' , which includes two sub charts--'acc' and 'loss':
Y
YixinKristy 已提交
59 60

<p align="center">
61
  <img src="https://user-images.githubusercontent.com/48054808/90884030-88c54d80-e3e1-11ea-9ba7-4b8df7b3496e.png" width="100%"/>
Y
YixinKristy 已提交
62 63
</p>

64
- When 'train' is created as the parent tag, and 'test/acc' and 'test/loss' are created as child tags:`train/test/acc``train/test/loss`, the tag of a raw is 'train', which includes two sub charts--'test/acc' and 'test/loss': 
Y
YixinKristy 已提交
65 66

<p align="center">
67
  <img src="https://user-images.githubusercontent.com/48054808/90884098-a692b280-e3e1-11ea-8c0b-380b970b50b2.png" width="100%"/>
Y
YixinKristy 已提交
68 69
</p>

70
- When two parent tags are created:`acc``loss`, two rows of charts are named as 'acc' and 'loss' respectively.
Y
YixinKristy 已提交
71 72

<p align="center">
73
  <img src="https://user-images.githubusercontent.com/48054808/90884122-b3afa180-e3e1-11ea-90b0-93a75543f253.png" width="100%"/>
Y
YixinKristy 已提交
74 75
</p>

Y
YixinKristy 已提交
76
### Demo
Y
YixinKristy 已提交
77

78
- Fundamental Methods
Y
YixinKristy 已提交
79

80
The following shows an example of using Scalar to record data, and the script can be found in [Scalar Demo](../../demo/components/scalar_test.py)
81 82 83 84 85
```python
from visualdl import LogWriter

if __name__ == '__main__':
    value = [i/1000.0 for i in range(1000)]
86
    # initialize a recorder
87 88
    with LogWriter(logdir="./log/scalar_test/train") as writer:
        for step in range(1000):
89
            # add accuracy with tag of 'acc' to the recorder
90
            writer.add_scalar(tag="acc", step=step, value=value[step])
91
            # add loss with tag of 'loss' to the recorder
92 93
            writer.add_scalar(tag="loss", step=step, value=1/(value[step] + 1))
```
94
After running the above program, developers can launch the panel by:
95 96 97 98
```shell
visualdl --logdir ./log --port 8080
```

99
Then, open the browser and enter the address: `http://127.0.0.1:8080`to view line charts:
100 101

<p align="center">
102
  <img src="https://user-images.githubusercontent.com/48054808/90871520-c9b36700-e3cd-11ea-9063-ca692b1d3917.png" width="100%"/>
Y
YixinKristy 已提交
103 104
</p>

105
- Advanced Usage--Comparison of Multiple Experiments
Y
YixinKristy 已提交
106

107
The following shows the comparison of multiple sets of experiments using Scalar.
Y
YixinKristy 已提交
108

109
There are two steps to achieve this function:
Y
YixinKristy 已提交
110

111 112
1. Create sub-log files to store the parameter data of each group of experiments
2. When recording data to the scalar component,developers can compare **the same type of parameters for different experiments**  by **using the same tag**. Note that the log files you want to display must be placed in different directories because only one log file in a directory is valid and displayed.
Y
YixinKristy 已提交
113 114 115 116 117 118

```python
from visualdl import LogWriter

if __name__ == '__main__':
    value = [i/1000.0 for i in range(1000)]
119
    # Step 1: Create a parent folder: log and a child folder: scalar_test
Y
YixinKristy 已提交
120 121
    with LogWriter(logdir="./log/scalar_test") as writer:
        for step in range(1000):
122
            # Step 2: Add data with tag train/acc to the recorder
Y
YixinKristy 已提交
123
            writer.add_scalar(tag="train/acc", step=step, value=value[step])
124
            # Step 2: Add data with tag train/loss to the recorder
Y
YixinKristy 已提交
125
            writer.add_scalar(tag="train/loss", step=step, value=1/(value[step] + 1))
126
    # Step 1: Create a second child folder: scalar_test2    
Y
YixinKristy 已提交
127 128 129
    value = [i/500.0 for i in range(1000)]
    with LogWriter(logdir="./log/scalar_test2") as writer:
        for step in range(1000):
130
            # Step 2: Add the accuracy data of scalar_test2 under the same name `train/acc`
Y
YixinKristy 已提交
131
            writer.add_scalar(tag="train/acc", step=step, value=value[step])
132
            # Step 2: Add the loss data of scalar_test2 under the same name as `train/loss`
Y
YixinKristy 已提交
133 134 135
            writer.add_scalar(tag="train/loss", step=step, value=1/(value[step] + 1))
```

136
After running the above program, developers can launch the panel by:
Y
YixinKristy 已提交
137 138 139 140 141

```shell
visualdl --logdir ./log --port 8080
```

142
Then, open the browser and enter the address: `http://127.0.0.1:8080` to view line charts:
Y
YixinKristy 已提交
143 144

<p align="center">
145
  <img src="https://user-images.githubusercontent.com/48054808/90884963-4dc41980-e3e3-11ea-824a-277a8d71823e.png" width="100%"/>
Y
YixinKristy 已提交
146
</p>
147 148
*For more specific details of how to compare multiple experiments, pleas refer to the project on AI Studio:[VisualDL 2.0--Visualization of eye disease recognition training](https://aistudio.baidu.com/aistudio/projectdetail/502834)
It can be seen that the data of different experiments (determined by the path) are displayed in different pictures, and the data of the same tag is displayed on the same picture for comparison.
Y
YixinKristy 已提交
149

150
### Functional Instruction
Y
YixinKristy 已提交
151

152
* Developers are allowed to zoom in, restore, transform of the coordinate axis (y-axis logarithmic coordinates), download the line chart.
Y
YixinKristy 已提交
153 154

<p align="center">
155
  <img src="https://visualdl.bj.bcebos.com/images/scalar-icon.png" width="45%"/>
Y
YixinKristy 已提交
156 157 158 159
</p>



160
* Details can be shown by hovering on specific data points.
Y
YixinKristy 已提交
161 162

<p align="center">
163
  <img src="https://user-images.githubusercontent.com/48054808/90872099-b785f880-e3ce-11ea-9ebe-8083c893d88b.png" width="60%"/>
Y
YixinKristy 已提交
164 165 166 167
</p>



168
* Developers can find target scalar charts by searching corresponded tags.
Y
YixinKristy 已提交
169 170

<p align="center">
171
  <img src="https://user-images.githubusercontent.com/48054808/90872849-cfaa4780-e3cf-11ea-985d-b4c382acf773.png" width="90%"/>
Y
YixinKristy 已提交
172 173 174 175
</p>



176
* Specific runs can be selected by searching for the corresponded  experiment tags.
Y
YixinKristy 已提交
177 178

<p align="center">
179
  <img src="https://user-images.githubusercontent.com/48054808/90873112-2b74d080-e3d0-11ea-8a69-24b7b4abae96.png" width="40%"/>
Y
YixinKristy 已提交
180 181
</p>

182
* Display the global extrema
183 184

<p align="center">
185
  <img src="https://user-images.githubusercontent.com/48054808/93732753-46bc4100-fc05-11ea-92ca-35c89467815b.png" width="30%"/>
186 187 188
</p>

<p align="center">
189
  <img src="https://user-images.githubusercontent.com/48054808/93732766-58054d80-fc05-11ea-89e0-bc00a283f559.png" width="60%"/>
190 191
</p>

192
* Only display smoothed data 
193 194

<p align="center">
195
  <img src="https://user-images.githubusercontent.com/48054808/93732799-7f5c1a80-fc05-11ea-886f-193c3bcc9b5f.png" width="30%"/>
196 197 198
</p>

<p align="center">
199
  <img src="https://user-images.githubusercontent.com/48054808/93732815-9569db00-fc05-11ea-8353-ffa5086d3d52.png" width="60%"/>
200
</p>
Y
YixinKristy 已提交
201

202
* There are three measurement scales of X axis
Y
YixinKristy 已提交
203

204 205 206
1. Step: number of iterations
2. Walltime: absolute training time
3. Relative: training time
Y
YixinKristy 已提交
207 208

<p align="center">
209
  <img src="https://user-images.githubusercontent.com/48054808/90873502-da191100-e3d0-11ea-8b03-c8fea0b65388.png" width="40%"/>
Y
YixinKristy 已提交
210
</p>
211 212

* The smoothness of the curve can be adjusted to better show the change of the overall trend.
Y
YixinKristy 已提交
213 214

<p align="center">
215
  <img src="https://user-images.githubusercontent.com/48054808/90873564-edc47780-e3d0-11ea-909c-161e9fd8eeef.png" width="37%"/>
216 217 218
</p>


219
## Image--Image Visualization
220

221
### Introduction
222

223
The Image is used to present the change of image data during training. Developers can view images in different training stages by adding few lines of codes to record images in a log file.
224

225
### Record Interface
226

227
The interface of the Image is shown as follows:
228 229

```python
230
add_image(tag, img, step, walltime=None, dataformats="HWC")
231
```
232 233 234 235 236 237 238 239
The interface parameters are described as follows:
| parameter | format        | meaning                                                      |
| --------- | ------------- | ------------------------------------------------------------ |
| tag       | string        | Record the name of the image data,e.g.train/loss. Notice that the name cannot contain `%` |
| img       | numpy.ndarray | Images in ndarray format. The default `HWC` format dimension is [h, w, c], h and w are the height and width of the images, and c is the number of channels, which can be 1, 3, 4. Floating point data will be clipped to the range[0, 1), and note that the image data cannot be None.                                     |
| step      | int           | Record the training steps                                    |
| walltime  | int           | Record the time-stamp of the data, the default is the current time-stamp |
| dataformats| string       | Format of image,include `NCHW`、`NHWC`、`HWC`、`CHW`、`HW`,default is `HWC`. It will be converted to `HWC` format when stored.|
240

Y
YixinKristy 已提交
241
### Demo
242
The following shows an example of using Image to record data, and the script can be found in [Image Demo](https://github.com/PaddlePaddle/VisualDL/blob/develop/demo/components/image_test.py).
243 244 245 246 247 248 249
```python
import numpy as np
from PIL import Image
from visualdl import LogWriter


def random_crop(img):
250
    """get random 100x100 slices of image
251 252 253 254 255 256 257 258 259 260
    """
    img = Image.open(img)
    w, h = img.size
    random_w = np.random.randint(0, w - 100)
    random_h = np.random.randint(0, h - 100)
    r = img.crop((random_w, random_h, random_w + 100, random_h + 100))
    return np.asarray(r)


if __name__ == '__main__':
261
    # initialize a recorder
262 263
    with LogWriter(logdir="./log/image_test/train") as writer:
        for step in range(6):
264
            # add image data
Y
YixinKristy 已提交
265
            writer.add_image(tag="eye",
Y
YixinKristy 已提交
266
                             img=random_crop("../../docs/images/eye.jpg"),
267 268
                             step=step)
```
269
After running the above program, developers can launch the panel by:
270 271 272 273
```shell
visualdl --logdir ./log --port 8080
```

274
Then, open the browser and enter the address: `http://127.0.0.1:8080`to view:
Y
YixinKristy 已提交
275 276

<p align="center">
277
  <img src="https://user-images.githubusercontent.com/48054808/90874434-4a746200-e3d2-11ea-9395-a039d9e83470.png" width="90%"/>
Y
YixinKristy 已提交
278 279 280
</p>


281
### Functional Instructions
Y
YixinKristy 已提交
282

283
- Developers can find target images by searching corresponded tags.
Y
YixinKristy 已提交
284 285

<p align="center">
286
  <img src="https://user-images.githubusercontent.com/48054808/90875589-f8344080-e3d3-11ea-9020-52a5a88324ab.png" width="90%"/>
Y
YixinKristy 已提交
287 288 289
</p>


290
- Developers are allowed to view image data under different iterations by scrolling the Step/iteration slider.
走神的阿圆's avatar
走神的阿圆 已提交
291 292

<p align="center">
293
  <img src="https://user-images.githubusercontent.com/48054808/90875652-10a45b00-e3d4-11ea-9fd9-3c79f22829f7.gif" width="60%"/>
走神的阿圆's avatar
走神的阿圆 已提交
294 295
</p>

296
## Audio--Audio Play
走神的阿圆's avatar
走神的阿圆 已提交
297

298
### Introduction
Y
YixinKristy 已提交
299

300
Audio aims to allow developers to listen to the audio in real-time during the training process, helping developers to monitor the process of speech recognition and text-to-speech.
Y
YixinKristy 已提交
301

302
### Record Interface
Y
YixinKristy 已提交
303

304
The interface of the Image is shown as follows:
Y
YixinKristy 已提交
305 306 307 308

```python
add_audio(tag, audio_array, step, sample_rate)
```
309 310 311 312 313 314 315
The interface parameters are described as follows:
| parameter | format        | meaning                                                      |
| --------- | ------------- | ------------------------------------------------------------ |
| tag      | string        | Record the name of the audio,e.g.audoi/sample. Notice that the name cannot contain `%` |
| audio_arry      | numpy.ndarray | Audio in ndarray format, whose elements are float values, and the range should be normalized in [-1, 1]                     |
| step     | int           | Record the training steps                                  |
| sample_rate | int           | Sample rate,the default sampling rate is 8000. **Please note that the rate should be the rate of the original audio**          |
Y
YixinKristy 已提交
316 317

### Demo
318 319
The following shows an example of using Audio to record data, and the script can be found in [Audio Demo](https://github.com/PaddlePaddle/VisualDL/blob/develop/demo/components/audio_test.py).

Y
YixinKristy 已提交
320 321
```python
from visualdl import LogWriter
Y
YixinKristy 已提交
322
from scipy.io import wavfile
Y
YixinKristy 已提交
323 324 325


if __name__ == '__main__':
Y
YixinKristy 已提交
326 327
    with LogWriter(logdir="./log/audio_test/train") as writer:
        sample_rate, audio_data = wavfile.read('./test.wav')
Y
YixinKristy 已提交
328 329 330
        writer.add_audio(tag="audio_tag",
                         audio_array=audio_data,
                         step=0,
Y
YixinKristy 已提交
331
                         sample_rate=sample_rate)
Y
YixinKristy 已提交
332
```
333
After running the above program, developers can launch the panel by:
Y
YixinKristy 已提交
334 335 336 337
```shell
visualdl --logdir ./log --port 8080
```

338
Then, open the browser and enter the address: `http://127.0.0.1:8080`to view:
Y
YixinKristy 已提交
339 340

<p align="center">
341
  <img src="https://user-images.githubusercontent.com/48054808/88753858-eaeab400-d18f-11ea-87c6-46ab7d5a5fd0.png" width="90%"/>
Y
YixinKristy 已提交
342 343
</p>

344
### Functional Instructions
Y
YixinKristy 已提交
345

346
- Developers can find the target audio by searching corresponded tags.
Y
YixinKristy 已提交
347 348

<p align="center">
349
  <img src="https://user-images.githubusercontent.com/48054808/88755034-c6dca200-d192-11ea-8349-1414bcf9d38d.png" width="80%"/>
Y
YixinKristy 已提交
350 351
</p>

352
- Developers are allowed to listen to the audio under different iterations by scrolling the Step/iteration slider.
Y
YixinKristy 已提交
353 354

<p align="center">
355
  <img src="https://user-images.githubusercontent.com/48054808/88755220-33f03780-d193-11ea-9b0f-a283d9f3a78a.png" width="40%"/>
Y
YixinKristy 已提交
356 357
</p>

358
- Play/Pause the audio
Y
YixinKristy 已提交
359 360

<p align="center">
361
  <img src="https://user-images.githubusercontent.com/48054808/88755240-41a5bd00-d193-11ea-9780-7ae7c7792070.png" width="40%"/>
Y
YixinKristy 已提交
362 363
</p>

364
- Adjust the volume
Y
YixinKristy 已提交
365 366

<p align="center">
367
  <img src="https://user-images.githubusercontent.com/48054808/88755258-53876000-d193-11ea-96b2-9ed698423202.png" width="40%"/>
Y
YixinKristy 已提交
368 369
</p>

370
- Download the audio
Y
YixinKristy 已提交
371 372

<p align="center">
373
  <img src="https://user-images.githubusercontent.com/48054808/88755377-9a755580-d193-11ea-947e-4275b9d3aa54.png" width="40%"/>
Y
YixinKristy 已提交
374 375
</p>

376
## Text
走神的阿圆's avatar
走神的阿圆 已提交
377

378
### Introduction
走神的阿圆's avatar
走神的阿圆 已提交
379

380
visualizes the text output of NLP models within any stage, aiding developers to compare the changes of outputs so as to deeply understand the training process and simply evaluate the performance of the model.
走神的阿圆's avatar
走神的阿圆 已提交
381

382
### Record Interface
走神的阿圆's avatar
走神的阿圆 已提交
383

384
The interface of the Text is shown as follows:
走神的阿圆's avatar
走神的阿圆 已提交
385 386

```python
Y
YixinKristy 已提交
387
add_text(tag, text_string, step=None, walltime=None)
走神的阿圆's avatar
走神的阿圆 已提交
388 389
```

390
The interface parameters are described as follows:
走神的阿圆's avatar
走神的阿圆 已提交
391

392
| parameter          | format                  | meaning                                        |
走神的阿圆's avatar
走神的阿圆 已提交
393
| -------------- | --------------------- | ------------------------------------------- |
394 395 396 397
| tag            | string                | Record the name of the text data,e.g.train/loss. Notice that the name cannot contain `%` |
| text_string    | string                | Value of text |
| step           | int                   | Record the training steps                                  |
| walltime       | int                   | Record the time-stamp of the data, and the default is the current time-stamp      |
走神的阿圆's avatar
走神的阿圆 已提交
398 399 400

### Demo

401
The following shows an example of how to use Text component, and script can be found in [Text Demo](../../demo/components/text_test.py)
走神的阿圆's avatar
走神的阿圆 已提交
402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418

```python
from visualdl import LogWriter
if __name__ == '__main__':
    texts = [
        '上联: 众 佛 群 灵 光 圣 地	下联: 众 生 一 念 证 菩 提',
        '上联: 乡 愁 何 处 解	下联: 故 事 几 时 休',
        '上联: 清 池 荷 试 墨	下联: 碧 水 柳 含 情',
        '上联: 既 近 浅 流 安 笔 砚	下联: 欲 将 直 气 定 乾 坤',
        '上联: 日 丽 萱 闱 祝 无 量 寿	下联: 月 明 桂 殿 祝 有 余 龄',
        '上联: 一 地 残 红 风 拾 起	下联: 半 窗 疏 影 月 窥 来'
    ]
    with LogWriter(logdir="./log/text_test/train") as writer:
        for step in range(len(texts)):
            writer.add_text(tag="output", step=step, text_string=texts[step])
```

419
After running the above program, developers can launch the panel by:
走神的阿圆's avatar
走神的阿圆 已提交
420 421 422 423 424

```shell
visualdl --logdir ./log --port 8080
```

425
Then, open the browser and enter the address`http://127.0.0.1:8080` to view:
走神的阿圆's avatar
走神的阿圆 已提交
426 427 428 429 430

<p align="center">
  <img src="https://user-images.githubusercontent.com/28444161/106248340-cdd09400-624b-11eb-8ea9-5a07a239c365.png" width="95%"/>
</p>

431
### Functional Instrucions
走神的阿圆's avatar
走神的阿圆 已提交
432

433
- Developers can find the target text by searching corresponded tags.
走神的阿圆's avatar
走神的阿圆 已提交
434

435 436 437
  <p align="center">
    <img src="https://user-images.githubusercontent.com/48054808/86536503-baaa4f80-bf1a-11ea-80ab-cd988617d018.png" width="40%"/>
  </p>
走神的阿圆's avatar
走神的阿圆 已提交
438

439
- Developers can find the target runs by searching corresponded tags.
走神的阿圆's avatar
走神的阿圆 已提交
440

441 442 443
  <p align="center">
    <img src="https://user-images.githubusercontent.com/28444161/106256983-f4e09300-6256-11eb-9acc-a24a2ac9b70c.png" width="40%"/>
  </p>
走神的阿圆's avatar
走神的阿圆 已提交
444

445
- Developers can fold the tab of text.
走神的阿圆's avatar
走神的阿圆 已提交
446

447 448 449
 <p align="center">
   <img src="https://user-images.githubusercontent.com/28444161/106252364-28202380-6251-11eb-934c-d8893c2eaeca.png" width="80%"/>
 </p>
Y
YixinKristy 已提交
450

Y
YixinKristy 已提交
451

452
## Graph--Network Structure
Y
YixinKristy 已提交
453

454 455 456
### Introduction

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.
Y
YixinKristy 已提交
457 458

### Demo
459
There are two methods to launch this component:
Y
YixinKristy 已提交
460

461
- By the front end:
Y
YixinKristy 已提交
462

463 464
  - 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):
Y
YixinKristy 已提交
465 466 467 468 469 470

  ```shell
  visualdl --logdir ./log --port 8080
  ```


471
- By the backend:
Y
YixinKristy 已提交
472

473
  - Add the parameter `--model` and specify the **model file** path (not the folder path) to launch the panel:
Y
YixinKristy 已提交
474

Y
YixinKristy 已提交
475 476 477
  ```shell
  visualdl --model ./log/model --port 8080
  ```
Y
YixinKristy 已提交
478

479 480

After the launch, developers can view the network structure:
Y
YixinKristy 已提交
481 482

<p align="center">
483
  <img src="https://user-images.githubusercontent.com/48054808/90877274-6548d580-e3d6-11ea-9804-74a1ead47b30.png" width="80%"/>
Y
YixinKristy 已提交
484 485
</p>

486
### Functional Instructions
Y
YixinKristy 已提交
487

488 489 490
- 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
Y
YixinKristy 已提交
491 492

<p align="center">
493
  <img src="https://user-images.githubusercontent.com/48054808/90877449-a80aad80-e3d6-11ea-8016-0a2f3afe6f5e.png" width="80%"/>
Y
YixinKristy 已提交
494 495
</p>

496
- Developers are allowed to drag the model up and down,left and right,zoom in and zoom out.
Y
YixinKristy 已提交
497 498

<p align="center">
499
  <img src="https://user-images.githubusercontent.com/48054808/90878058-a097d400-e3d7-11ea-9543-bcef67ace675.gif" width="80%"/>
Y
YixinKristy 已提交
500 501
</p>

502
- Search to locate the specific node
Y
YixinKristy 已提交
503 504

<p align="center">
505
  <img src="https://user-images.githubusercontent.com/48054808/90878136-c0c79300-e3d7-11ea-9a14-1c1e809af442.png" width="30%"/>
Y
YixinKristy 已提交
506 507
</p>

508
- Click to view the model properties
Y
YixinKristy 已提交
509 510

<p align="center">
511
  <img src="https://user-images.githubusercontent.com/48054808/90878623-5531f580-e3d8-11ea-89cc-1be3500bff66.png" width="30%"/>
Y
YixinKristy 已提交
512 513
</p>

514
- Display the model information by selecting corresponded attributes
Y
YixinKristy 已提交
515 516

<p align="center">
517
  <img src="https://user-images.githubusercontent.com/48054808/90878712-6ed33d00-e3d8-11ea-85b9-48bf57867d30.png" width="23%"/>
Y
YixinKristy 已提交
518 519
</p>

520
- Files can be ex as PNG or SVG format
Y
YixinKristy 已提交
521 522

<p align="center">
523
  <img src="https://user-images.githubusercontent.com/48054808/90878893-b35ed880-e3d8-11ea-8c22-badee805bfff.png" width="30%"/>
Y
YixinKristy 已提交
524 525
</p>

526
- Click nodes to view attribute information
Y
YixinKristy 已提交
527 528

<p align="center">
529
  <img src="https://user-images.githubusercontent.com/48054808/90878944-c5407b80-e3d8-11ea-9db2-10e1dd1de5bf.png" width="30%"/>
Y
YixinKristy 已提交
530 531
</p>

532
- Switch the model by one-click
Y
YixinKristy 已提交
533 534

<p align="center">
535
  <img src="https://user-images.githubusercontent.com/48054808/90879247-34b66b00-e3d9-11ea-94ef-a26b1ba07dd0.png" width="25%"/>
Y
YixinKristy 已提交
536
</p>
537

538
## Histogram--Distribution of Tensors 
Y
YixinKristy 已提交
539

540
### Introduction
Y
YixinKristy 已提交
541

542
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.
Y
YixinKristy 已提交
543

544
### Record Interface
Y
YixinKristy 已提交
545

546
The interface of the Histogram is shown as follows: 
Y
YixinKristy 已提交
547 548 549 550

```python
add_histogram(tag, values, step, walltime=None, buckets=10)
```
551 552 553 554 555 556 557 558 559 560

The interface parameters are described as follows:

| parameter | format                | meaning                                                      |
| --------- | --------------------- | ------------------------------------------------------------ |
| tag       | string                | Record the name of the image data,e.g.train/loss. Notice that the name cannot contain `%` |
| values    | numpy.ndarray or list | Data is in ndarray or list format, which shape is (N, )        |
| step      | int                   | Record the training steps                                    |
| walltime  | int                   | Record the time-stamp of the data, and the default is the current time-stamp |
| buckets   | int                   | The number of segments to generate the histogram and the default value is 10 |
Y
YixinKristy 已提交
561

Y
YixinKristy 已提交
562 563
### Demo

564
The following shows an example of using  Histogram to record data, and the script can be found in [Histogram Demo](https://github.com/PaddlePaddle/VisualDL/blob/develop/demo/components/histogram_test.py)
Y
YixinKristy 已提交
565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583

```python
from visualdl import LogWriter
import numpy as np


if __name__ == '__main__':
    values = np.arange(0, 1000)
    with LogWriter(logdir="./log/histogram_test/train") as writer:
        for index in range(1, 101):
            interval_start = 1 + 2 * index / 100.0
            interval_end = 6 - 2 * index / 100.0
            data = np.random.uniform(interval_start, interval_end, size=(10000))
            writer.add_histogram(tag='default tag',
                                 values=data,
                                 step=index,
                                 buckets=10)
```

584
After running the above program, developers can launch the panel by:
Y
YixinKristy 已提交
585 586 587 588 589

```shell
visualdl --logdir ./log --port 8080
```

590
Then, open the browser and enter the address: `http://127.0.0.1:8080`to view the histogram.
Y
YixinKristy 已提交
591

592 593 594
### Functional Instructions

- Developers are allowed to zoom in and download the histogram.
Y
YixinKristy 已提交
595 596 597 598 599

  <p align="center">
    <img src="https://user-images.githubusercontent.com/48054808/86535351-42d82700-bf12-11ea-89f0-171280e7c526.png" width="60%"/>
  </p>

600
- Provide two modes: Offset and Overlay.
Y
YixinKristy 已提交
601 602

  <p align="center">
603
    <img src="https://user-images.githubusercontent.com/48054808/90879332-56175700-e3d9-11ea-87c3-24682191ddd4.png" width="30%"/>
Y
YixinKristy 已提交
604 605
  </p>

606 607

  - Offset mode
Y
YixinKristy 已提交
608 609 610 611 612

  <p align="center">
    <img src="https://user-images.githubusercontent.com/48054808/86536435-2b9d3780-bf1a-11ea-9981-92f837d22ae5.png" width="60%"/>
  </p>

613 614

  - Overlay mode
Y
YixinKristy 已提交
615 616 617 618 619

  <p align="center">
    <img src="https://user-images.githubusercontent.com/48054808/86536458-5ab3a900-bf1a-11ea-985e-05f06c1b762b.png" width="60%"/>
  </p>

620 621 622
- Display the parameters、training steps and frequency by hovering on specific data points.

  - In the 240th training step, the weight is -0.0031and the frequency is 2734
Y
YixinKristy 已提交
623 624 625 626 627

  <p align="center">
    <img src="https://user-images.githubusercontent.com/48054808/86536482-80d94900-bf1a-11ea-9e12-5bea9f382b34.png" width="60%"/>
  </p>

628
- Developers can find target histogram by searching corresponded tags.
Y
YixinKristy 已提交
629 630

  <p align="center">
631
    <img src="https://user-images.githubusercontent.com/48054808/90879724-ebb2e680-e3d9-11ea-9e05-9bc06691ed9c.png" width="85%"/>
Y
YixinKristy 已提交
632 633
  </p>

634
- Search tags to show the histograms generated by corresponded experiments.
Y
YixinKristy 已提交
635 636

  <p align="center">
637
    <img src="https://user-images.githubusercontent.com/48054808/90879868-26b51a00-e3da-11ea-8c1d-83fb019ec668.png" width="40%"/>
Y
YixinKristy 已提交
638 639
  </p>

640
## PR Curve
Y
YixinKristy 已提交
641

642
### Introduction
Y
YixinKristy 已提交
643

644
PR Curve presents precision-recall curves in line charts, describing the tradeoff relationship between precision and recall in order to choose a best threshold.
Y
YixinKristy 已提交
645

646
### Record Interface
Y
YixinKristy 已提交
647

648
The interface of the PR Curve is shown as follows:
Y
YixinKristy 已提交
649 650 651 652 653

```python
add_pr_curve(tag, labels, predictions, step=None, num_thresholds=10)
```

654
The interface parameters are described as follows:
Y
YixinKristy 已提交
655

656
| parameter          | format                  | meaning                                        |
Y
YixinKristy 已提交
657
| -------------- | --------------------- | ------------------------------------------- |
658 659 660 661 662 663 664
| tag            | string                | Record the name of the image data,e.g.train/loss. Notice that the name cannot contain `%` |
| labels         | numpy.ndarray or list | Data is in ndarray or list format, which shape should be (N, ) and value should be 0 or 1            |
| predictions    | numpy.ndarray or list | Prediction data is in ndarray or list format, which shape should be (N, ) and value should in [0, 1]           |
| step           | int                   | Record the training steps                                  |
| num_thresholds | int                   | Set the number of thresholds, default as 10, maximum as 127      |
| weights        | float                 | Set the weights of TN/FN/TP/FP to calculate precision and recall      |
| walltime       | int                   | Record the time-stamp of the data, and the default is the current time-stamp      |
Y
YixinKristy 已提交
665 666 667

### Demo

668
The following shows an example of how to use PR Curve component, and script can be found in [PR Curve Demo](../../demo/components/pr_curve_test.py)
Y
YixinKristy 已提交
669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684

```python
from visualdl import LogWriter
import numpy as np

with LogWriter("./log/pr_curve_test/train") as writer:
    for step in range(3):
        labels = np.random.randint(2, size=100)
        predictions = np.random.rand(100)
        writer.add_pr_curve(tag='pr_curve',
                            labels=labels,
                            predictions=predictions,
                            step=step,
                            num_thresholds=5)
```

685
After running the above program, developers can launch the panel by:
Y
YixinKristy 已提交
686 687 688 689 690

```shell
visualdl --logdir ./log --port 8080
```

691
Then, open the browser and enter the address`http://127.0.0.1:8080` to view:
Y
YixinKristy 已提交
692 693

<p align="center">
694
  <img src="https://user-images.githubusercontent.com/48054808/90879904-37fe2680-e3da-11ea-9369-2513620bf541.png" width="85%"/>
Y
YixinKristy 已提交
695 696
</p>

697
### Functional Instrucions
Y
YixinKristy 已提交
698

699
- Developers can zoom in, restore, and download PR Curves
Y
YixinKristy 已提交
700 701 702 703 704

  <p align="center">
    <img src="https://user-images.githubusercontent.com/48054808/86740067-f18e7b80-c068-11ea-96bf-52cb7da1f799.png" width="40%"/>
  </p>

705
- Developers hover on the specific data point to learn about the detailed information: TP, TN, FP, FN and the corresponded thresholds
Y
YixinKristy 已提交
706 707

    <p align="center">
708
      <img src="https://user-images.githubusercontent.com/48054808/90879971-4e0be700-e3da-11ea-989a-777b977c271d.png" width="50%"/>
Y
YixinKristy 已提交
709 710
    </p>

711
- The targeted PR Curves can be displayed by searching tags
Y
YixinKristy 已提交
712 713

  <p align="center">
714
    <img src="https://user-images.githubusercontent.com/48054808/90880145-8e6b6500-e3da-11ea-8f06-28248ee2eb84.png" width="80%"/>
Y
YixinKristy 已提交
715 716
  </p>

717
- Developers can find specific labels by searching tags or view the all labels
Y
YixinKristy 已提交
718 719

<p align="center">
720
  <img src="https://user-images.githubusercontent.com/48054808/90880173-9fb47180-e3da-11ea-8704-34cc55c0a844.png" width="30%"/>
Y
YixinKristy 已提交
721 722
</p>

723
- Developers is able to observe the changes of PR Curves across training steps
Y
YixinKristy 已提交
724 725

  <p align="center">
726
    <img src="https://user-images.githubusercontent.com/48054808/90880301-d2f70080-e3da-11ea-97e0-952b389f8010.png" width="30%"/>
Y
YixinKristy 已提交
727 728
  </p>

729 730 731 732 733 734
- There are three measurement scales of X axis

  1. Step: number of iterations
  2. Walltime: absolute training time
  3. Relative: training time

Y
YixinKristy 已提交
735
  <p align="center">
736
    <img src="https://user-images.githubusercontent.com/48054808/90880354-eace8480-e3da-11ea-921f-20f363eb1b1d.png" width="30%"/>
Y
YixinKristy 已提交
737 738
  </p>

739
## ROC Curve
740

741
### Introduction
742

743
ROC Curve shows the performance of a classification model at all classification thresholds; the larger the area under the curve, the better the model performs, aiding developers to evaluate the model performance and choose an appropriate threshold.
744

745
### Record Interface
746

747
The interface of the PR Curve is shown as follows:
748 749 750 751 752

```python
add_roc_curve(tag, labels, predictions, step=None, num_thresholds=10)
```

753
The interface parameters are described as follows:
754

755
| parameter          | format                  | meaning                                        |
756
| -------------- | --------------------- | ------------------------------------------- |
757 758 759 760 761 762 763
| tag            | string                | Record the name of the image data,e.g.train/loss. Notice that the name cannot contain `%` |
| values         | numpy.ndarray or list | Data is in ndarray or list format, which shape should be (N, ) and value should be 0 or 1            |
| predictions    | numpy.ndarray or list | Prediction data is in ndarray or list format, which shape should be (N, ) and value should in [0, 1]             |
| step           | int                   | Record the training steps                                  |
| num_thresholds | int                   | Set the number of thresholds, default as 10, maximum as 127      |
| weights        | float                 | Set the weights of TN/FN/TP/FP to calculate precision and recall      |
| walltime       | int                   | Record the time-stamp of the data, and the default is the current time-stamp      |
764 765 766

### Demo

767
The following shows an example of how to use ROC curve component, and script can be found in [ROC Curve Demo](../../demo/components/roc_curve_test.py)
768 769 770 771 772 773 774 775 776 777 778 779 780 781

```python
from visualdl import LogWriter
import numpy as np

with LogWriter("./log/roc_curve_test/train") as writer:
    for step in range(3):
        labels = np.random.randint(2, size=100)
        predictions = np.random.rand(100)
        writer.add_roc_curve(tag='roc_curve',
                             labels=labels,
                             predictions=predictions,
                             step=step,
                             num_thresholds=5)
782

783 784
```

785
After running the above program, developers can launch the panel by:
786 787 788 789 790

```shell
visualdl --logdir ./log --port 8080
```

791
Then, open the browser and enter the address`http://127.0.0.1:8080` to view:
792 793

<p align="center">
794
  <img src="https://user-images.githubusercontent.com/48054808/103344081-8928d000-4ac8-11eb-84d0-28f249886172.gif" width="85%"/>
795 796
</p>

797
*Note: the use of ROC Curve in the frontend is the same as that of PR Curve, please refer to the instructions in PR Curve section if needed.
798

799
## High Dimensional--Data Dimensionality Reduction
800

801
### Introduction
802

803
High Dimensional projects high-dimensional data into a low dimensional space, aiding users to have an in-depth analysis of the relationship between high-dimensional data. Three dimensionality reduction algorithms are supported:
804

805 806 807
 - PCA : Principle Component Analysis 
 - t-SNE : t-distributed Stochastic Neighbor Embedding 
 - umap: Uniform Manifold Approximation and Projection
808

809
### Record Interface
810

811
The interface of the High Dimensional is shown as follows:
812 813 814 815

```python
add_embeddings(tag, labels, hot_vectors, walltime=None)
```
816 817 818 819 820 821 822 823
The interface parameters are described as follows:
| parameter   | format              | meaning                                                      |
| ----------- | ------------------- | ------------------------------------------------------------ |
| tag         | string              | Record the name of the high dimensional data, e.g.`default`. Notice that the name cannot contain `%` |
| labels      | numpy.array or list | Represents the label of hot_vectors. The shape of `labels` should be (N, ) if only one dimension, and should be (M, N) if dimension of `labels` more than one, where each element is a one-dimensional label array. Each element is string type. |
| hot_vectors | numpy.array or list | Each element can be seen as a feature of the tag corresponding to the label. |
| labels_meta | numpy.array or list | The labels of parameter `labels` correspond to `labels` one-to-one. If not specified, the default value `__metadata__` will be used. When parameter `labels` is a one-dimensional array, there is no need to specify this parameter  |
| walltime    | int                 | Record the time stamp of the data, the default is the current time stamp. |
824

Y
YixinKristy 已提交
825
### Demo
826
The following shows an example of how to use High Dimensional component, and script can be found in [High Dimensional Demo](../../demo/components/high_dimensional_test.py)
827 828 829 830 831 832 833 834 835 836 837 838 839
```python
from visualdl import LogWriter


if __name__ == '__main__':
    hot_vectors = [
        [1.3561076367500755, 1.3116267195134017, 1.6785401875616097],
        [1.1039614644440658, 1.8891609992484688, 1.32030488587171],
        [1.9924524852447711, 1.9358920727142739, 1.2124401279391606],
        [1.4129542689796446, 1.7372166387197474, 1.7317806077076527],
        [1.3913371800587777, 1.4684674577930312, 1.5214136352476377]]

    labels = ["label_1", "label_2", "label_3", "label_4", "label_5"]
840
    # initialize a recorder
841
    with LogWriter(logdir="./log/high_dimensional_test/train") as writer:
842
        # recorde a set of labels and corresponding hot_vectors to the recorder 
843 844 845 846
        writer.add_embeddings(tag='default',
                              labels=labels,
                              hot_vectors=hot_vectors)
```
847
After running the above program, developers can launch the panel by:
848 849 850 851
```shell
visualdl --logdir ./log --port 8080
```

852
Then, open the browser and enter the address`http://127.0.0.1:8080` to view:
853 854

<p align="center">
855
  <img src="https://user-images.githubusercontent.com/48054808/103188111-1b32ac00-4902-11eb-914e-c2368bdb8373.gif" width="85%"/>
856
</p>
Y
YixinKristy 已提交
857

858
### Functional Instrucions
Y
YixinKristy 已提交
859

860
* Developers are allowed to select specific runs of data or certain labels of data to display
Y
YixinKristy 已提交
861 862

  <p align="center">
863
    <img src="https://user-images.githubusercontent.com/48054808/103191809-4e306c00-4911-11eb-853f-e143ef86e182.png" width="30%"/>
Y
YixinKristy 已提交
864 865
  </p>

866
* TSNE
Y
YixinKristy 已提交
867 868

  <p align="center">
869
    <img src="https://user-images.githubusercontent.com/48054808/103192762-cea49c00-4914-11eb-896c-070b0bf0e2ea.png" width="27%"/>
Y
YixinKristy 已提交
870 871
  </p>

872
* PCA
Y
YixinKristy 已提交
873 874

  <p align="center">
875
    <img src="https://user-images.githubusercontent.com/48054808/103192341-47a2f400-4913-11eb-9995-fdc0acadbdc9.png" width="27%"/>
Y
YixinKristy 已提交
876 877
  </p>

878
* UMAP
Y
YixinKristy 已提交
879 880

  <p align="center">
881
    <img src="https://user-images.githubusercontent.com/48054808/103192766-d2d0b980-4914-11eb-871e-e4b31542c5e9.png" width="27%"/>
Y
YixinKristy 已提交
882
  </p>
883

走神的阿圆's avatar
走神的阿圆 已提交
884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998
## HyperParameters--HyperParameter Visualization

### Introduction

HyperParameters visualize the relationship between hyperparameters and model metrics (such as accuracy and loss) in a rich view, helping you identify the best hyperparameters in an efficient way.

### Record Interface

The interface of the HyperParameters is slightly different from other components'. Firstly, you need to use the `add_hparams` to record the hyperparameter data(`hparams_dict`) and specify the name of the metrics(`metrics_list`). Then, for the metrics you just added, you need to record those metrics values by using `add_scalar`. In this way you can get all data for HpyerParameters Visualization.

```python
add_hparams(hparam_dict, metric_list, walltime=None):
```
The interface parameters are described as follows:
| parameter   | format              | meaning     |
| ----------- | ------------------- | ---------------------------------- |
| hparam_dict |       dict          | name and data of hparams.          |
| metric_list |       list          | The metrics name to be recorded later corresponds to the `tag` parameter in the `add_scalar` interface, and VisualDL corresponds to the indicator data through the `tag`. |
| walltime    |       int           | Record the time stamp of the data, the default is the current time stamp.  |

### Demo
The following shows an example of how to use HyperParameters component, and script can be found in [HyperParameters Demo](https://github.com/PaddlePaddle/VisualDL/blob/develop/demo/components/hparams_test.py)
```python
from visualdl import LogWriter

# This demo demonstrates the hyperparameter records of two experiments. Take the first
# experiment data as an example, First, record the data of the hyperparameter `hparams`
# in the `add_hparams` interface. Then specify the name of `metrics` to be recorded later.
# Finally, use `add_scalar` to specifically record the data of `metrics`. Note that the
# `metrics_list` parameter in the `add_hparams` interface needs to include the `tag`
# parameter of the `add_scalar` interface.
if __name__ == '__main__':
    # Record the data of the first experiment
    with LogWriter('./log/hparams_test/train/run1') as writer:
        # Record the value of `hparams` and the name of `metrics`
        writer.add_hparams(hparams_dict={'lr': 0.1, 'bsize': 1, 'opt': 'sgd'},
                           metrics_list=['hparam/accuracy', 'hparam/loss'])
        # Record the metrics values ​​of different steps in an experiment by matching
        # the `tag` in the `add_scalar` interface with `metrics_list` in `add_hparams` interface.
        for i in range(10):
            writer.add_scalar(tag='hparam/accuracy', value=i, step=i)
            writer.add_scalar(tag='hparam/loss', value=2*i, step=i)

    # Record the data of the second experiment
    with LogWriter('./log/hparams_test/train/run2') as writer:
        # Record the value of `hparams` and the name of `metrics`
        writer.add_hparams(hparams_dict={'lr': 0.2, 'bsize': 2, 'opt': 'relu'},
                           metrics_list=['hparam/accuracy', 'hparam/loss'])
        # Record the metrics values ​​of different steps in an experiment by matching
        # the `tag` in the `add_scalar` interface with `metrics_list` in `add_hparams` interface.
        for i in range(10):
            writer.add_scalar(tag='hparam/accuracy', value=1.0/(i+1), step=i)
            writer.add_scalar(tag='hparam/loss', value=5*i, step=i)
```
After running the above program, developers can launch the panel by:
```shell
visualdl --logdir ./log --port 8080
```

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/28444161/119247155-e9c0c280-bbb9-11eb-8175-58a9c7657a9c.gif" width="85%"/>
</p>

### Functional Instrucions

* Table View
  - The table view can be displayed in a sorted order.
  - Trial ID represents a specific experiment name, the column name displayed in other normal fonts is the hyperparameter name, and the column displayed in bold font is the metric name.
  - The position of hyperparameters and metrics can be customized by dragging.
  - The column width of the table view can be adjusted by dragging.
  - You can click to expand to view the scalar of the metrics.

  <p align="center">
    <img src="https://user-images.githubusercontent.com/28444161/119219705-75364700-bb19-11eb-9077-064337ae95be.png" width="85%"/>
  </p>

* Parallel Coordinates View
  - The specific values ​​of hyperparameters and metrics in a certain set of experiments can be displayed by hovering.
  - Scalar of the metrics in this group of experiments can be displayed by selecting a certain curve.

  <p align="center">
    <img src="https://user-images.githubusercontent.com/28444161/119221098-440d4500-bb20-11eb-8b26-d29f95147c04.png" width="85%"/>
  </p>

* Scatter Plot Matrix View
  - The specific values ​​of hyperparameters and metrics in a certain set of experiments can be displayed by hovering.
  - Scalar of the metrics in this group of experiments can be displayed by selecting a certain point.

  <p align="center">
    <img src="https://user-images.githubusercontent.com/28444161/119221108-54252480-bb20-11eb-9a8f-1d082c36402b.png" width="85%"/>
  </p>

* Scalar of Metrics
  - Can be viewed in table view, parallel coordinates view and scatter plot matrix view.
  - Scalar of the metrics viewed here can also be viewed under the `SCALARS` board.

  <p align="center">
    <img src="https://user-images.githubusercontent.com/28444161/119221127-6901b800-bb20-11eb-84f0-407bd7241bc7.png" width="85%"/>
  </p>

* Hyperparameter/metric range selection
  - Display part of the data by selecting the range of hyperparameters or metrics.

  <p align="center">
    <img src="https://user-images.githubusercontent.com/28444161/119221141-78810100-bb20-11eb-9e06-5b345459310a.png" width="20%"/>
  </p>

* download data
  - Two formats can be selected, CSV or TSV.

  <p align="center">
    <img src="https://user-images.githubusercontent.com/28444161/119221157-8b93d100-bb20-11eb-9c9e-7540b3cb92a1.png" width="20%"/>
  </p>
999

1000 1001
## VDL.service

1002
### Introduction
1003

1004
VDL.service enables developers to easily save, track and share visualization results with anyone for free.
1005

1006
### Usage Steps
1007

1008
1. Make sure that your get the lastest version of VisualDL, if not, please update by:
1009 1010 1011 1012 1013 1014

```
pip install visualdl --upgrade

```

1015
2. Upload log/model to save, track and share the visualization results.
1016 1017 1018 1019 1020 1021

```
visualdl service upload --logdir ./log \
                        --model ./__model__
```                       
                       
1022
3. An unique URL will be given. Then you can view the visualization results by simply copying and pasting the URL to the browser. 
1023 1024 1025 1026 1027 1028

  <p align="center">
    <img src="https://user-images.githubusercontent.com/48054808/93733769-5ccc0080-fc09-11ea-88c0-6f17c04ebdce.png" width="100%"/>
  </p>
  
   <p align="center">
1029
    <img src="https://user-images.githubusercontent.com/48054808/93734496-057b5f80-fc0c-11ea-9b52-229ff8847bc0.png" width="100%"/>
1030
  </p>