From fbc54a9c67e8b45642cdda25fdba1372d44296b7 Mon Sep 17 00:00:00 2001 From: YixinKristy <48054808+YixinKristy@users.noreply.github.com> Date: Fri, 17 Jul 2020 17:34:21 +0800 Subject: [PATCH 1/9] Update README.md (#1) --- docs/components/README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/components/README.md b/docs/components/README.md index 9077a0464..ef335ca51 100644 --- a/docs/components/README.md +++ b/docs/components/README.md @@ -12,7 +12,7 @@ VisualDL 是一个面向深度学习任务设计的可视化工具。VisualDL | :----------------------------------------------------------: | :--------: | :----------------------------------------------------------- | | [ Scalar](#Scalar--标量组件) | 折线图 | 动态展示损失函数值、准确率等标量数据 | | [Image](#Image--图片可视化组件) | 图片可视化 | 显示图片，可显示输入图片和处理后的结果，便于查看中间过程的变化 | -| [Audio](#Audio--音频可视化组件) | 音频可视化 | 播放训练过程中的音频数据，监控语音识别与合成等任务的训练过程 | +| [Audio](#Audio--音频播放组件) | 音频可视化 | 播放训练过程中的音频数据，监控语音识别与合成等任务的训练过程 | | [Graph](#Graph--网络结构组件) | 网络结构 | 展示网络结构、节点属性及数据流向，辅助学习、优化网络结构 | | [Histogram](#Histogram--直方图组件) | 直方图 | 展示训练过程中权重、梯度等张量的分布 | | [PR Curve](#PR-Curve--PR曲线组件) | 折线图 | 权衡精度与召回率之间的平衡关系 | @@ -266,7 +266,7 @@ visualdl --logdir ./log --port 8080

-## Audio--音频可视化组件 +## Audio--音频播放组件 ### 介绍 @@ -285,7 +285,7 @@ add_audio(tag, audio_array, step, sample_rate) | tag | string | 记录指标的标志，如`audio_tag`，不能含有`%` | | audio_arry | numpy.ndarray | 以ndarray格式表示的音频 | | step | int | 记录的步数 | -| sample_rate | int | 采样率 | +| sample_rate | int | 采样率，**注意正确填写对应音频的采样率** | ### Demo @@ -314,7 +314,7 @@ def read_audio_data(audio_path): if __name__ == '__main__': - with LogWriter(logdir="vdl_audio_0713") as writer: + with LogWriter(logdir="./log") as writer: audio_shape, audio_data = read_audio_data("./testing.wav") audio_data = np.array(audio_data) writer.add_audio(tag="audio_tag", @@ -328,7 +328,7 @@ if __name__ == '__main__': visualdl --logdir ./log --port 8080 ``` -在浏览器输入`http://127.0.0.1:8080`，即可查看图片数据。 +在浏览器输入`http://127.0.0.1:8080`，即可查看音频数据。

From 155e1072d96e8130c986a8cb16a2c5825090f28f Mon Sep 17 00:00:00 2001 From: YixinKristy <48054808+YixinKristy@users.noreply.github.com> Date: Thu, 23 Jul 2020 23:55:12 +0800 Subject: [PATCH 2/9] Delete UserGuide-en.md (#2) --- UserGuide-en.md | 542 ------------------------------------------------ 1 file changed, 542 deletions(-) delete mode 100644 UserGuide-en.md diff --git a/UserGuide-en.md b/UserGuide-en.md deleted file mode 100644 index 1100ca982..000000000 --- a/UserGuide-en.md +++ /dev/null @@ -1,542 +0,0 @@ - -[**中文**](./docs/components/README.md) - -# VisualDL Guide - -### Overview - -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. - -Currently, VisualDL provides three components: scalar, image, high dimensional. VisualDL iterates rapidly and new functions will be continuously added. - - - -| 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. | -| [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. | -| [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. | - - - -## Scalar--Line Chart - -### 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: - -```python -add_scalar(tag, value, step, walltime=None) -``` -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 | -| step | int | Record the training steps | -| walltime | int | Record the time-stamp of the data, the default is the current time-stamp | - -*Note that the rules of specifying tags (e.g.train/acc) are: - -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 -3. Users can use multiple `/`, but the tag of a raw is the parent tag--the tag before the first `/` - -Here are three examples: - -- 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': - -

- -

- -- 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': - -

- -

- -- When two parent tags are created：`acc`、 `loss`， two rows of charts are named as 'acc' and 'loss' respectively. - -

- -

- -### Demo - -- Fundamental Methods - -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) -```python -from visualdl import LogWriter - -if __name__ == '__main__': - value = [i/1000.0 for i in range(1000)] - # initialize a recorder - with LogWriter(logdir="./log/scalar_test/train") as writer: - for step in range(1000): - # add accuracy with tag of 'acc' to the recorder - writer.add_scalar(tag="acc", step=step, value=value[step]) - # add loss with tag of 'loss' to the recorder - writer.add_scalar(tag="loss", step=step, value=1/(value[step] + 1)) -``` -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 line charts: - -

- -

- -- Advanced Usage--Comparison of Multiple Experiments - -The following shows the comparison of multiple sets of experiments using Scalar. - -There are two steps to achieve this function: - -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** - -```python -from visualdl import LogWriter - -if __name__ == '__main__': - value = [i/1000.0 for i in range(1000)] - # Step 1: Create a parent folder: log and a child folder: scalar_test - with LogWriter(logdir="./log/scalar_test") as writer: - for step in range(1000): - # Step 2: Add data with tag train/acc to the recorder - writer.add_scalar(tag="train/acc", step=step, value=value[step]) - # Step 2: Add data with tag train/loss to the recorder - writer.add_scalar(tag="train/loss", step=step, value=1/(value[step] + 1)) - # Step 1: Create a second child folder: scalar_test2 - value = [i/500.0 for i in range(1000)] - with LogWriter(logdir="./log/scalar_test2") as writer: - for step in range(1000): - # Step 2: Add the accuracy data of scalar_test2 under the same name `train/acc` - writer.add_scalar(tag="train/acc", step=step, value=value[step]) - # Step 2: Add the loss data of scalar_test2 under the same name as `train/loss` - writer.add_scalar(tag="train/loss", step=step, value=1/(value[step] + 1)) -``` - -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 line charts: - -

- -

-*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) - -### Functional Instruction - -* Developers are allowed to zoom in, restore, transform of the coordinate axis (y-axis logarithmic coordinates), download the line chart. - -

- -

- - - -* Details can be shown by hovering on specific data points. - -

- -

- - - -* Developers can find target images by searching corresponded image tags. - -

- -

- - - -* Specific runs can be selected by searching for the corresponded experiment tags. - -

- -

- - -* There are three measurement scales of X axis - -1. Step: number of iterations -2. Walltime: absolute training time -3. Relative: training time - -

- -

-* The smoothness of the curve can be adjusted to better show the change of the overall trend. - -

- -

- - -## Image--Image Visualization - -### Introduction - -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. - -### Record Interface - -The interface of the Image is shown as follows: - -```python -add_image(tag, img, step, walltime=None) -``` -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 | -| step | int | Record the training steps | -| walltime | int | Record the time-stamp of the data, the default is the current time-stamp | - -### Demo -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). -```python -import numpy as np -from PIL import Image -from visualdl import LogWriter - - -def random_crop(img): - """get random 100x100 slices of image - """ - 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__': - # initialize a recorder - with LogWriter(logdir="./log/image_test/train") as writer: - for step in range(6): - # add image data - writer.add_image(tag="eye", - img=random_crop("../../docs/images/eye.jpg"), - step=step) -``` -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: - -

- -

- - -### Functional Instructions - -- Developers can find target images by searching corresponded tags. - -

- -

- - -- Developers are allowed to view image data under different iterations by scrolling the Step/iteration slider. - -

- -

- -## Graph--Network Structure - -### 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. - -### Demo -There are two methods to launch this component: - -- By the front end: - - - 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): - - ```shell - visualdl --logdir ./log --port 8080 - ``` - - -- 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 the launch, developers can view the network structure: - -

- -

- -### 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 - -

- -

- -- Developers are allowed to drag the model up and down，left and right，zoom in and zoom out. - -

- -

- -- Search to locate the specific node - -

- -

- -- Click to view the model properties - -

- -

- -

- -

- -- Display the model information by selecting corresponded attributes - -

- -

- -- Files can be ex as PNG or SVG format - -

- -

- -- Click nodes to view attribute information - -

- -

- -- Switch the model by one-click - -

- -

- -## Histogram--Distribution of Tensors - -### Introduction - -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. - -### Record Interface - -The interface of the Histogram is shown as follows: - -```python -add_histogram(tag, values, step, walltime=None, buckets=10) -``` - -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 | -| 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 | - -### Demo - -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) - -```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) -``` - -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 the histogram. - -### Functional Instructions - -- Developers are allowed to zoom in and download the histogram. - -

- -

- -- Provide two modes: Offset and Overlay. - -

- -

- - - - Offset mode - -

- -

- - - - Overlay mode - -

- -

- -- 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 - -

- -

- -- Developers can find target histogram by searching corresponded tags. - -

- -

- -- Search tags to show the histograms generated by corresponded experiments. - -

- -

- -## High Dimensional--Data Dimensionality Reduction - -### Introduction - -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. Two dimensionality reduction algorithms are supported: - - - PCA : Principle Component Analysis - - t-SNE : t-distributed Stochastic Neighbor Embedding - -### Record Interface - -The interface of the High Dimensional is shown as follows: - -```python -add_embeddings(tag, labels, hot_vectors, walltime=None) -``` -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 | Labels are represented by one-dimensional 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. | -| 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 High Dimensional component, and script can be found in [High Dimensional Demo](../../demo/components/high_dimensional_test.py) -```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"] - # initialize a recorder - with LogWriter(logdir="./log/high_dimensional_test/train") as writer: - # recorde a set of labels and corresponding hot_vectors to the recorder - writer.add_embeddings(tag='default', - labels=labels, - hot_vectors=hot_vectors) -``` -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: - -

- -

- -### Functional Instrucions - -* Developers are allowed to select specific run of data to display - -

- -

- -* Developers can find specific labels by searching tags or view the all labels - -

- -

- -* Support "2D" or "3D" forms to display the high-dimensional data distribution - -

- -

- -* PCA and T-SNE are supported - -

- -

From 5719339b42967fa24c56129b4fd7f8911236e4b5 Mon Sep 17 00:00:00 2001 From: YixinKristy <48054808+YixinKristy@users.noreply.github.com> Date: Thu, 23 Jul 2020 23:58:57 +0800 Subject: [PATCH 3/9] Update README.md (#3) --- docs/components/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/components/README.md b/docs/components/README.md index ef335ca51..f7629a24c 100644 --- a/docs/components/README.md +++ b/docs/components/README.md @@ -49,19 +49,19 @@ add_scalar(tag, value, step, walltime=None) 具体使用参见以下三个例子： -- 创建train为父tag，acc和loss为子tag：`train/acc`、 `train/loss`，即创建了tag为train的图片栏，包含acc和loss两张图片： +- 创建train为父tag，acc和loss为子tag：`train/acc`、 `train/loss`，即创建了tag为train的图片栏，包含acc和loss两张图表：

-- 创建train为父tag，test/acc和test/loss为子tag：`train/test/acc`、 `train/test/loss`，即创建了tag为train的图片栏，包含test/acc和test/loss两张图片： +- 创建train为父tag，test/acc和test/loss为子tag：`train/test/acc`、 `train/test/loss`，即创建了tag为train的图片栏，包含test/acc和test/loss两张图表：

-- 创建两个父tag：`acc`、 `loss`，即创建了tag分别为acc和loss的两个图片栏：： +- 创建两个父tag：`acc`、 `loss`，即创建了tag分别为acc和loss的两个图表栏：：

From f945438747be3d677e28adc359ce60dc7507826b Mon Sep 17 00:00:00 2001 From: YixinKristy <48054808+YixinKristy@users.noreply.github.com> Date: Tue, 28 Jul 2020 21:11:01 +0800 Subject: [PATCH 4/9] Update README.md (#4) --- docs/components/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/components/README.md b/docs/components/README.md index f7629a24c..e1a8ecf20 100644 --- a/docs/components/README.md +++ b/docs/components/README.md @@ -6,7 +6,7 @@ VisualDL 是一个面向深度学习任务设计的可视化工具。VisualDL 利用了丰富的图表来展示数据，用户可以更直观、清晰地查看数据的特征与变化趋势，有助于分析数据、及时发现错误，进而改进神经网络模型的设计。 -目前，VisualDL 支持 scalar, image, graph, histogram, pr curve, high dimensional 六个组件，项目正处于高速迭代中，敬请期待新组件的加入。 +目前，VisualDL 支持 scalar, image, audio，graph, histogram, pr curve, high dimensional 七个组件，项目正处于高速迭代中，敬请期待新组件的加入。 | 组件名称 | 展示图表 | 作用 | | :----------------------------------------------------------: | :--------: | :----------------------------------------------------------- | @@ -572,7 +572,7 @@ add_pr_curve(tag, labels, predictions, step=None, num_thresholds=10) | 参数 | 格式 | 含义 | | -------------- | --------------------- | ------------------------------------------- | | tag | string | 记录指标的标志，如`train/loss`，不能含有`%` | -| values | numpy.ndarray or list | 以ndarray或list格式表示的实际类别 | +| labels | numpy.ndarray or list | 以ndarray或list格式表示的实际类别 | | predictions | numpy.ndarray or list | 以ndarray或list格式表示的预测类别 | | step | int | 记录的步数 | | num_thresholds | int | 阈值设置的个数，默认为10，最大值为127 | From 029b1949c9435ae2c8b93a9fcafa4d67a551b507 Mon Sep 17 00:00:00 2001 From: YixinKristy <48054808+YixinKristy@users.noreply.github.com> Date: Wed, 29 Jul 2020 11:19:51 +0800 Subject: [PATCH 5/9] Update README-en.md (#5) --- README-en.md | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/README-en.md b/README-en.md index 9a737bbae..8ae1dc6fa 100644 --- a/README-en.md +++ b/README-en.md @@ -17,9 +17,9 @@

## Introduction -VisualDL, a visualization analysis tool of PaddlePaddle, provides a variety of charts to show the trends of parameters, and visualizes model structures, data samples, histograms of tensors and high-dimensional data distributions. It enables users to understand the training process and the model structure more clearly and intuitively so as to optimize models efficiently. +VisualDL, a visualization analysis tool of PaddlePaddle, provides a variety of charts to show the trends of parameters, and visualizes model structures, data samples, histograms of tensors, pr curves and high-dimensional data distributions. It enables users to understand the training process and the model structure more clearly and intuitively so as to optimize models efficiently. -VisualDL provides various visualization functions, including tracking metrics in real-time, visualizing the model structure, displaying the data sample, presenting the changes of distributions of tensors, projecting high-dimensional data to a lower dimensional space and more. For specific guidelines of each function, please refer to [**VisualDL User Guide**](./docs/components/UserGuide-en.md). Currently, VisualDL iterates rapidly and new functions will be continously added. +VisualDL provides various visualization functions, including tracking metrics in real-time, visualizing the model structure, displaying the data sample, presenting the changes of distributions of tensors, showing the pr curves, projecting high-dimensional data to a lower dimensional space and more. For specific guidelines of each function, please refer to [**VisualDL User Guide**](./docs/components/UserGuide-en.md). Currently, VisualDL iterates rapidly and new functions will be continously added. VisualDL natively supports the use of Python. Developers can retrieve plentiful visualization results by simply adding a few lines of Python code into the model before training. @@ -221,6 +221,13 @@ Developers can compare with multiple experiments by specifying and uploading the

+### Audio +**Audio** aims to allow developers to listen to the audio data in real-time during the training process, helping developers to monitor the process of speech recognition and text-to-speech. + +

+ +

+ ### 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. From f8f632f42a43d67ce788fc022a953fae7cd5f584 Mon Sep 17 00:00:00 2001 From: YixinKristy <48054808+YixinKristy@users.noreply.github.com> Date: Wed, 29 Jul 2020 12:05:48 +0800 Subject: [PATCH 6/9] Update UserGuide-en.md (#6) --- docs/components/UserGuide-en.md | 118 +++++++++++++++++++++++++++++--- 1 file changed, 110 insertions(+), 8 deletions(-) diff --git a/docs/components/UserGuide-en.md b/docs/components/UserGuide-en.md index eebc96453..a5b99b1a1 100644 --- a/docs/components/UserGuide-en.md +++ b/docs/components/UserGuide-en.md @@ -6,18 +6,19 @@ 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. -Currently, VisualDL provides six components: scalar, image, graph, histogram, pr curve and high dimensional. VisualDL iterates rapidly and new functions will be continuously added. +Currently, VisualDL provides seven components: scalar, image, audio, graph, histogram, pr curve and high dimensional. VisualDL iterates rapidly and new functions will be continuously added. -| component name | display chart | function | +| 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. | -| [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. | +| [ 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. | +| [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-曲线组件) | Precision & Recall Curve | Display precision-recall curves across training steps, clarifying the tradeoff between precision and recall when comparing models. | -| [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. | +| [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. | @@ -159,7 +160,7 @@ Then, open the browser and enter the address: `http://127.0.0.1:8080` to view li -* Developers can find target images by searching corresponded image tags. +* Developers can find target scalar charts by searching corresponded tags.

@@ -183,6 +184,7 @@ Then, open the browser and enter the address: `http://127.0.0.1:8080` to view li

+ * The smoothness of the curve can be adjusted to better show the change of the overall trend.

@@ -266,6 +268,106 @@ Then, open the browser and enter the address: `http://127.0.0.1:8080`to view:

+## Audio--Audio Play + +### Introduction + +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. + +### Record Interface + +The interface of the Image is shown as follows: + +```python +add_audio(tag, audio_array, step, sample_rate) +``` +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 | +| step | int | Record the training steps | +| sample_rate | int | Sample rate，**Please note that the rate should be the rate of the original audio** | + +### Demo +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). + +```python +from visualdl import LogWriter +import numpy as np +import wave + + +def read_audio_data(audio_path): + """ + Get audio data. + """ + CHUNK = 4096 + f = wave.open(audio_path, "rb") + wavdata = [] + chunk = f.readframes(CHUNK) + while chunk: + data = np.frombuffer(chunk, dtype='uint8') + wavdata.extend(data) + chunk = f.readframes(CHUNK) + # 8k sample rate, 16bit frame, 1 channel + shape = [8000, 2, 1] + return shape, wavdata + + +if __name__ == '__main__': + with LogWriter(logdir="./log") as writer: + audio_shape, audio_data = read_audio_data("./testing.wav") + audio_data = np.array(audio_data) + writer.add_audio(tag="audio_tag", + audio_array=audio_data, + step=0, + sample_rate=8000) +``` +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: + +

+ +

+ +### Functional Instructions + +- Developers can find the target audio by searching corresponded tags. + +

+ +

+ +- Developers are allowed to listen to the audio under different iterations by scrolling the Step/iteration slider. + +

+ +

+ +- Play/Pause the audio + +

+ +

+ +- Adjust the volume + +

+ +

+ +- Download the audio + +

+ +

+ + ## Graph--Network Structure ### Introduction From dffa58ac528b108e03fe9d590b51910e5f5143c5 Mon Sep 17 00:00:00 2001 From: YixinKristy <48054808+YixinKristy@users.noreply.github.com> Date: Wed, 29 Jul 2020 22:49:27 +0800 Subject: [PATCH 7/9] Update README.md (#7) --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 6f226505e..c86369ad8 100644 --- a/README.md +++ b/README.md @@ -22,6 +22,8 @@ VisualDL是飞桨可视化分析工具，以丰富的图表呈现训练参数变 VisualDL提供丰富的可视化功能，支持标量、图结构、数据样本可视化、直方图、PR曲线及高维数据降维呈现等诸多功能。具体功能使用方式，请参见 [**VisualDL使用指南**](./docs/components/README.md)。项目正处于高速迭代中，敬请期待新组件的加入。 +VisualDL支持浏览器种类：Chrome（81和83）、Safari 13、FireFox（77和78）、Edge（Chromium版）。 + VisualDL原生支持python的使用， 通过在模型的Python配置中添加几行代码，便可为训练过程提供丰富的可视化支持。 ## 目录 From d4f30a05cdc5e836681ef261c7d08ea0958c2499 Mon Sep 17 00:00:00 2001 From: YixinKristy <48054808+YixinKristy@users.noreply.github.com> Date: Tue, 11 Aug 2020 18:39:58 +0800 Subject: [PATCH 8/9] Update README.md (#9) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c86369ad8..14c8dcf56 100644 --- a/README.md +++ b/README.md @@ -67,7 +67,7 @@ API设计简洁易懂，使用简单。模型结构一键实现可视化。 ### 使用pip安装 ```shell -pip install --upgrade --pre visualdl +python -m pip install visualdl -i https://mirror.baidu.com/pypi/simple ``` ### 使用代码安装 From 1b40cbe12b3c6b2cbd4214e828590d0cd70d6caf Mon Sep 17 00:00:00 2001 From: YixinKristy <48054808+YixinKristy@users.noreply.github.com> Date: Tue, 11 Aug 2020 19:15:46 +0800 Subject: [PATCH 9/9] Update README-en.md (#10) --- README-en.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README-en.md b/README-en.md index 8ae1dc6fa..1d111b8aa 100644 --- a/README-en.md +++ b/README-en.md @@ -55,10 +55,10 @@ By Integrating into PaddlePaddle and related modules, VisualDL allows developers ## Installation -### Install by Pip +### Install by PiP ```shell -pip install --upgrade --pre visualdl +python -m pip install visualdl -i https://mirror.baidu.com/pypi/simple ``` ### Install by Code