add docs for text

demo/components/image_matrix_test.py

+# Copyright (c) 2021 VisualDL Authors. All Rights Reserve.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+# =======================================================================
+
+# coding=utf-8
+
+import numpy as np
+from PIL import Image
+from visualdl import LogWriter
+
+
+def random_crop(img):
+    """Get random block of img, which size is 100x100.
+    """
+    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__':
+    imgs = []
+    # 获取8张图像
+    for step in range(8):
+        img = random_crop("../../docs/images/dog.jpg")
+        imgs.append(img)
+    imgs = np.array(imgs)
+
+    with LogWriter(logdir='./log/image_matrix_test/train') as writer:
+        writer.add_image(tag='doges', step=0, img=imgs[0])
+        # 合成长宽尽量接近的图形矩阵，本例生成3X3的矩阵
+        writer.add_image_matrix(tag='doges', step=1, imgs=imgs, rows=-1)
+        # 合成长为1的图形矩阵，本例生成1x8的矩阵
+        writer.add_image_matrix(tag='doges', step=2, scale=10, imgs=imgs, rows=1)
+        # 合成长为2的图形矩阵，本例生成2X4的矩阵
+        writer.add_image_matrix(tag='doges', step=3, scale=10, imgs=imgs, rows=2)
+        # 合成长为3的图形矩阵，本例生成3X3的矩阵
+        writer.add_image_matrix(tag='doges', step=4, imgs=imgs, rows=3)
+        # 合成长为4的图形矩阵，本例生成4X2的矩阵
+        writer.add_image_matrix(tag='doges', step=5, imgs=imgs, rows=4)

demo/components/test.sh

+#!/bin/bash
+python scalar_test.py
+python image_test.py
+python image_matrix_test.py
+python histogram_test.py
+python high_dimensional_test.py
+python audio_test.py
+python text_test.py
+python pr_curve_test.py
+python roc_curve_test.py
+

demo/components/text_test.py

+# Copyright (c) 2021 VisualDL Authors. All Rights Reserve.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+# =======================================================================
+
+# coding=utf-8
+
+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/1", step=step, text_string=texts[step])
+            writer.add_text(tag="output/2", step=step, text_string=texts[step])
+            writer.add_text(tag="output/2/3", step=step, text_string=texts[step])
+            writer.add_text(tag="output/2/4", step=step, text_string=texts[step])

docs/components/README.md

@@ -18,6 +18,7 @@ VisualDL 是一个面向深度学习任务设计的可视化工具。VisualDL
 |              [PR Curve](#PR-Curve--PR曲线组件)               |   折线图   | 权衡精度与召回率之间的平衡关系                               |
 |              [ROC Curve](#ROC-Curve--ROC曲线组件)               |   折线图   | 展示不同阈值下的模型表现                               |
 | [High Dimensional](#High-Dimensional--数据降维组件) |  数据降维  | 将高维数据映射到 2D/3D 空间来可视化嵌入，便于观察不同数据的相关性 |
+| [Text](#Text--文本组件) |  文本  | 展示文本，可用于查看NLP任务的中间输出 |
 
 同时，VisualDL提供可视化结果保存服务，通过 [VDL.service](#vdlservice) 生成链接，保存并分享可视化结果
 
@@ -880,6 +881,80 @@ visualdl --logdir ./log --port 8080
     <img src="https://user-images.githubusercontent.com/48054808/103192766-d2d0b980-4914-11eb-871e-e4b31542c5e9.png" width="27%"/>
   </p>
 
+## Text--文本组件
+
+### 介绍
+
+Text将记录的文本进行展示，便于查看NLP任务中间输出的文本结果。
+
+### 记录接口
+
+Text组件的记录接口如下：
+
+```python
+add_text(self, tag, text_string, step=None, walltime=None)
+```
+
+接口参数说明如下：
+
+| 参数           | 格式                  | 含义                                        |
+| -------------- | --------------------- | ------------------------------------------- |
+| tag            | string                | 记录指标的标志，如`train/loss`，不能含有`%` |
+| text_string    | string                | 文本字符串           |
+| step           | int                   | 记录的步数                                  |
+| walltime       | int                   | 记录数据的时间戳，默认为当前时间戳     |
+
+### Demo
+
+下面展示了使用 Text 组件记录数据的示例，代码见[Text组件](https://github.com/PaddlePaddle/VisualDL/blob/develop/demo/components/text_test.py)
+
+```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])
+```
+
+运行上述程序后，在命令行执行
+
+```shell
+visualdl --logdir ./log --port 8080
+```
+
+接着在浏览器打开`http://127.0.0.1:8080`，即可查看Text
+
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/28444161/106248340-cdd09400-624b-11eb-8ea9-5a07a239c365.png" width="80%"/>
+</p>
+
+### 功能操作说明
+
+- 可搜索文本标签显示对应文本数据
+
+<p align="center">
+  <img src="https://visualdl.bj.bcebos.com/images/image-search.png" width="90%"/>
+</p>
+
+- 可搜索数据流标签显示对应数据流数据
+
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/28444161/106249863-d88c2880-624d-11eb-96f9-daddd1ba188f.png" width="90%"/>
+</p>
+
+- 可折叠标签
+
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/28444161/106252364-28202380-6251-11eb-934c-d8893c2eaeca.png" width="90%"/>
+</p>
 
 ## VDL.service
 

docs/components/UserGuide-en.md

@@ -803,6 +803,82 @@ Then, open the browser and enter the address`http://127.0.0.1:8080` to view:
   </p>
 
 
+## Text
+
+### Introduction
+
+Text displays the recorded text so that you can view the text result output in the middle of the NLP task.
+
+### Record Interface
+
+The interface of the Text is shown as follows:
+
+```python
+add_text(self, tag, text_string, step=None, 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 `%` |
+| 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      |
+
+### Demo
+
+The following shows an example of how to use Text component, and script can be found in [Text Demo](../../demo/components/text_test.py)
+
+```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])
+```
+
+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/106248340-cdd09400-624b-11eb-8ea9-5a07a239c365.png" width="80%"/>
+</p>
+
+### Functional Instrucions
+
+- Developers can find the target text by searching corresponded tags.
+
+  <p align="center">
+    <img src="https://visualdl.bj.bcebos.com/images/image-search.png" width="90%"/>
+  </p>
+
+- Developers can find the target runs by searching corresponded tags.
+
+  <p align="center">
+    <img src="https://user-images.githubusercontent.com/28444161/106249863-d88c2880-624d-11eb-96f9-daddd1ba188f.png" width="90%"/>
+  </p>
+
+- Developers can fold the tab of text.
+
+ <p align="center">
+   <img src="https://user-images.githubusercontent.com/28444161/106252364-28202380-6251-11eb-934c-d8893c2eaeca.png" width="90%"/>
+ </p>
+
+
 ## VDL.service
 
 ### Introduction