Update pictures (#767)

* Update README-en.md * Update README.md * Update README.md * Update README.md * Update UserGuide-en.md * Update README-en.md * Update UserGuide-en.md * Update UserGuide-en.md

Update pictures (#767)
* Update README-en.md * Update README.md * Update README.md * Update README.md * Update UserGuide-en.md * Update README-en.md * Update UserGuide-en.md * Update UserGuide-en.md
edbc7899 · YixinKristy · GitHub · 24135c4b · edbc7899 · edbc7899
隐藏空白更改
内联并排

Showing with 45 addition and 49 deletion

README-en.md README-en.md +8 -8

docs/components/UserGuide-en.md docs/components/UserGuide-en.md +37 -41

未找到文件。
--- a/README-en.md
+++ b/README-en.md
@@ -187,7 +187,7 @@ app.run(logdir="./log")
 After launching the panel by one of the above methods, developers can see the visualization results on the browser shown as blow:

 <p align="center">
-  <img src="https://user-images.githubusercontent.com/48054808/82786044-67ae9880-9e96-11ea-8a2b-3a0951a6ec19.png" width="60%"/>
+  <img src="https://user-images.githubusercontent.com/48054808/90868674-ba321f00-e3c9-11ea-83c1-f03c6dd19187.png" width="70%"/>
 </p>


@@ -211,7 +211,7 @@ After the launchment of VisualDL Board, the LogReader will continuously record t
 Developers can compare with multiple experiments by specifying and uploading the path of each experiment at the same time so as to visualize the same parameters in the same chart.

 <p align="center">
-  <img src="https://visualdl.bj.bcebos.com/images/multi_experiments.gif" width="100%"/>
+  <img src="https://user-images.githubusercontent.com/48054808/90869567-fdd95880-e3ca-11ea-9855-6c97ad5c8ae7.gif" width="100%"/>
 </p>


@@ -219,14 +219,14 @@ Developers can compare with multiple experiments by specifying and uploading the
 **Image** provides real-time visualizations of the image data during the training process, allowing developers to observe the changes of images in different training stages and  to deeply understand the effects of the training process. 

 <p align="center">
-<img src="https://visualdl.bj.bcebos.com/images/image-eye.gif" width="60%"/>
+<img src="https://user-images.githubusercontent.com/48054808/90869677-22353500-e3cb-11ea-9830-2334bdd8e52e.gif" width="55%"/>
 </p>

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

 <p align="center">
-<img src="https://user-images.githubusercontent.com/48054808/88752564-d22ccf00-d18c-11ea-9711-7b5868986ba7.png" width="85%"/>
+<img src="https://user-images.githubusercontent.com/48054808/90869771-47c23e80-e3cb-11ea-8b2a-a38b6c33d64b.png" width="85%"/>
 </p>

 ### Graph
@@ -234,7 +234,7 @@ Developers can compare with multiple experiments by specifying and uploading the
 **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.

 <p align="center">
-<img src="https://user-images.githubusercontent.com/48054808/84483052-5acdd980-accb-11ea-8519-1608da7ee698.png" width="85%"/>
+<img src="https://user-images.githubusercontent.com/48054808/90869866-6aecee00-e3cb-11ea-8211-b8af070239e6.png" width="85%"/>
 </p>

 ### Histogram
@@ -244,14 +244,14 @@ Histogram displays how the trend of tensors (weight, bias, gradient, etc.) chang
 - Offset Mode

 <p align="center">
-<img src="https://user-images.githubusercontent.com/48054808/86551031-86647c80-bf76-11ea-8ec2-8c86826c8137.png" width="85%"/>
+<img src="https://user-images.githubusercontent.com/48054808/90870121-bd2e0f00-e3cb-11ea-89cf-6622cb607b89.png" width="85%"/>
 </p>


 - Overlay Mode

 <p align="center">
-<img src="https://user-images.githubusercontent.com/48054808/86551033-882e4000-bf76-11ea-8e6a-af954c662ced.png" width="85%"/>
+<img src="https://user-images.githubusercontent.com/48054808/90870194-cfa84880-e3cb-11ea-8a66-bebcad267a10.png" width="85%"/>
 </p>

 ### High Dimensional
@@ -259,7 +259,7 @@ Histogram displays how the trend of tensors (weight, bias, gradient, etc.) chang
 **High Dimensional** provides two approaches--T-SNE and PCA--to do the dimensionality reduction, allowing developers to have an in-depth analysis of the relationship between high-dimensional data and to optimize algorithms based on the analysis. 

 <p align="center">
-<img src="https://user-images.githubusercontent.com/48054808/82396340-3e4dd100-9a80-11ea-911d-798acdbc9c90.gif" width="85%"/>
+<img src="https://user-images.githubusercontent.com/48054808/90870677-85739700-e3cc-11ea-8653-18fa5c4106a3.GIF" width="85%"/>
 </p>

 ## Contribution

--- a/docs/components/UserGuide-en.md
+++ b/docs/components/UserGuide-en.md
@@ -54,19 +54,19 @@ 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':

 <p align="center">
-  <img src="https://user-images.githubusercontent.com/48054808/84653342-d6d05780-af3f-11ea-8979-8da039ae7201.JPG" width="100%"/>
+  <img src="https://user-images.githubusercontent.com/48054808/90884030-88c54d80-e3e1-11ea-9ba7-4b8df7b3496e.png" width="100%"/>
 </p>

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

 <p align="center">
-  <img src="https://user-images.githubusercontent.com/48054808/84644066-3bd08100-af31-11ea-8eb5-c4a4cab351ed.png" width="100%"/>
+  <img src="https://user-images.githubusercontent.com/48054808/90884098-a692b280-e3e1-11ea-8c0b-380b970b50b2.png" width="100%"/>
 </p>

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

 <p align="center">
-  <img src="https://user-images.githubusercontent.com/48054808/84644323-99fd6400-af31-11ea-9855-eca7f7b01810.png" width="100%"/>
+  <img src="https://user-images.githubusercontent.com/48054808/90884122-b3afa180-e3e1-11ea-90b0-93a75543f253.png" width="100%"/>
 </p>

 ### Demo
@@ -95,7 +95,7 @@ visualdl --logdir ./log --port 8080
 Then, open the browser and enter the address: `http://127.0.0.1:8080`to view line charts:

 <p align="center">
-  <img src="https://user-images.githubusercontent.com/48054808/82397559-478c6d00-9a83-11ea-80db-a0844dcaca35.png" width="100%"/>
+  <img src="https://user-images.githubusercontent.com/48054808/90871520-c9b36700-e3cd-11ea-9063-ca692b1d3917.png" width="100%"/>
 </p>

 - Advanced Usage--Comparison of Multiple Experiments
@@ -138,7 +138,7 @@ visualdl --logdir ./log --port 8080
 Then, open the browser and enter the address: `http://127.0.0.1:8080` to view line charts:

 <p align="center">
-  <img src="https://user-images.githubusercontent.com/48054808/84644158-5efb3080-af31-11ea-8e64-bbe4078425f4.png" width="100%"/>
+  <img src="https://user-images.githubusercontent.com/48054808/90884963-4dc41980-e3e3-11ea-824a-277a8d71823e.png" width="100%"/>
 </p>
 *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)

@@ -147,7 +147,7 @@ Then, open the browser and enter the address: `http://127.0.0.1:8080` to view li
 * Developers are allowed to zoom in, restore, transform of the coordinate axis (y-axis logarithmic coordinates), download the line chart.

 <p align="center">
-  <img src="https://visualdl.bj.bcebos.com/images/scalar-icon.png" width="55%"/>
+  <img src="https://visualdl.bj.bcebos.com/images/scalar-icon.png" width="45%"/>
 </p>


@@ -155,7 +155,7 @@ Then, open the browser and enter the address: `http://127.0.0.1:8080` to view li
 * Details can be shown by hovering on specific data points.

 <p align="center">
-  <img src="https://visualdl.bj.bcebos.com/images/scalar-tooltip.png" width="60%"/>
+  <img src="https://user-images.githubusercontent.com/48054808/90872099-b785f880-e3ce-11ea-9ebe-8083c893d88b.png" width="60%"/>
 </p>


@@ -163,7 +163,7 @@ Then, open the browser and enter the address: `http://127.0.0.1:8080` to view li
 * Developers can find target scalar charts by searching corresponded tags.

 <p align="center">
-  <img src="https://visualdl.bj.bcebos.com/images/scalar-searchlabel.png" width="90%"/>
+  <img src="https://user-images.githubusercontent.com/48054808/90872849-cfaa4780-e3cf-11ea-985d-b4c382acf773.png" width="90%"/>
 </p>


@@ -171,7 +171,7 @@ Then, open the browser and enter the address: `http://127.0.0.1:8080` to view li
 * Specific runs can be selected by searching for the corresponded  experiment tags.

 <p align="center">
-  <img src="https://visualdl.bj.bcebos.com/images/scalar-searchstream.png" width="40%"/>
+  <img src="https://user-images.githubusercontent.com/48054808/90873112-2b74d080-e3d0-11ea-8a69-24b7b4abae96.png" width="40%"/>
 </p>


@@ -182,13 +182,13 @@ Then, open the browser and enter the address: `http://127.0.0.1:8080` to view li
 3. Relative: training time

 <p align="center">
-  <img src="https://visualdl.bj.bcebos.com/images/x-axis.png" width="40%"/>
+  <img src="https://user-images.githubusercontent.com/48054808/90873502-da191100-e3d0-11ea-8b03-c8fea0b65388.png" width="40%"/>
 </p>

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

 <p align="center">
-  <img src="https://visualdl.bj.bcebos.com/images/scalar-smooth.png" width="37%"/>
+  <img src="https://user-images.githubusercontent.com/48054808/90873564-edc47780-e3d0-11ea-909c-161e9fd8eeef.png" width="37%"/>
 </p>


@@ -249,7 +249,7 @@ 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/48054808/82397685-86babe00-9a83-11ea-870e-502f313bdc7c.png" width="90%"/>
+  <img src="https://user-images.githubusercontent.com/48054808/90874434-4a746200-e3d2-11ea-9395-a039d9e83470.png" width="90%"/>
 </p>


@@ -258,14 +258,14 @@ Then, open the browser and enter the address: `http://127.0.0.1:8080`to view:
 - Developers can find target images by searching corresponded tags.

 <p align="center">
-  <img src="https://visualdl.bj.bcebos.com/images/image-search.png" width="90%"/>
+  <img src="https://user-images.githubusercontent.com/48054808/90875589-f8344080-e3d3-11ea-9020-52a5a88324ab.png" width="90%"/>
 </p>


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

 <p align="center">
-  <img src="https://visualdl.bj.bcebos.com/images/image-eye.gif" width="60%"/>
+  <img src="https://user-images.githubusercontent.com/48054808/90875652-10a45b00-e3d4-11ea-9fd9-3c79f22829f7.gif" width="60%"/>
 </p>

 ## Audio--Audio Play
@@ -380,7 +380,7 @@ There are two methods to launch this component:
 After the launch, developers can view the network structure:

 <p align="center">
-  <img src="https://user-images.githubusercontent.com/48054808/84490149-51e20580-acd5-11ea-9663-1f156892c0e0.png" width="80%"/>
+  <img src="https://user-images.githubusercontent.com/48054808/90877274-6548d580-e3d6-11ea-9804-74a1ead47b30.png" width="80%"/>
 </p>

 ### Functional Instructions
@@ -390,53 +390,49 @@ After the launch, developers can view the network structure:
  - Experimental supported model：TorchScript、PyTorch、Torch、 ArmNN、BigDL、Chainer、CNTK、Deeplearning4j、MediaPipe、ML.NET、MNN、OpenVINO、Scikit-learn、Tengine、TensorFlow.js、TensorFlow

 <p align="center">
-  <img src="https://user-images.githubusercontent.com/48054808/84487396-44c31780-acd1-11ea-831a-1632e636613d.png" width="80%"/>
+  <img src="https://user-images.githubusercontent.com/48054808/90877449-a80aad80-e3d6-11ea-8016-0a2f3afe6f5e.png" width="80%"/>
 </p>

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

 <p align="center">
-  <img src="https://user-images.githubusercontent.com/48054808/84487568-8784ef80-acd1-11ea-9da1-befedd69b872.GIF" width="80%"/>
+  <img src="https://user-images.githubusercontent.com/48054808/90878058-a097d400-e3d7-11ea-9543-bcef67ace675.gif" width="80%"/>
 </p>

 - Search to locate the specific node

 <p align="center">
-  <img src="https://user-images.githubusercontent.com/48054808/84487694-b9965180-acd1-11ea-8214-34f3febc1828.png" width="30%"/>
+  <img src="https://user-images.githubusercontent.com/48054808/90878136-c0c79300-e3d7-11ea-9a14-1c1e809af442.png" width="30%"/>
 </p>

 - Click to view the model properties

 <p align="center">
-  <img src="https://user-images.githubusercontent.com/48054808/84487751-cadf5e00-acd1-11ea-9ce2-4fdfeeea9c5a.png" width="30%"/>
-</p>
-
-<p align="center">
-  <img src="https://user-images.githubusercontent.com/48054808/84487759-d03ca880-acd1-11ea-9294-520ef7f9e0b1.png" width="30%"/>
+  <img src="https://user-images.githubusercontent.com/48054808/90878623-5531f580-e3d8-11ea-89cc-1be3500bff66.png" width="30%"/>
 </p>

 - Display the model information by selecting corresponded attributes

 <p align="center">
-  <img src="https://user-images.githubusercontent.com/48054808/84487829-ee0a0d80-acd1-11ea-8563-6682a15483d9.png" width="23%"/>
+  <img src="https://user-images.githubusercontent.com/48054808/90878712-6ed33d00-e3d8-11ea-85b9-48bf57867d30.png" width="23%"/>
 </p>

 - Files can be ex as PNG or SVG format

 <p align="center">
-  <img src="https://user-images.githubusercontent.com/48054808/84487884-ff531a00-acd1-11ea-8b12-5221db78683e.png" width="30%"/>
+  <img src="https://user-images.githubusercontent.com/48054808/90878893-b35ed880-e3d8-11ea-8c22-badee805bfff.png" width="30%"/>
 </p>

 - Click nodes to view attribute information

 <p align="center">
-  <img src="https://user-images.githubusercontent.com/48054808/84487941-13971700-acd2-11ea-937d-42fb524b9ee1.png" width="30%"/>
+  <img src="https://user-images.githubusercontent.com/48054808/90878944-c5407b80-e3d8-11ea-9db2-10e1dd1de5bf.png" width="30%"/>
 </p>

 - Switch the model by one-click

 <p align="center">
-  <img src="https://user-images.githubusercontent.com/48054808/84487998-27db1400-acd2-11ea-83d7-5d75832ef41d.png" width="25%"/>
+  <img src="https://user-images.githubusercontent.com/48054808/90879247-34b66b00-e3d9-11ea-94ef-a26b1ba07dd0.png" width="25%"/>
 </p>

 ## Histogram--Distribution of Tensors 
@@ -504,7 +500,7 @@ Then, open the browser and enter the address: `http://127.0.0.1:8080`to view the
 - Provide two modes: Offset and Overlay.

  <p align="center">
-    <img src="https://user-images.githubusercontent.com/48054808/86535413-c134c900-bf12-11ea-9ad6-f0ad8eafa76f.png" width="30%"/>
+    <img src="https://user-images.githubusercontent.com/48054808/90879332-56175700-e3d9-11ea-87c3-24682191ddd4.png" width="30%"/>
  </p>


@@ -532,13 +528,13 @@ Then, open the browser and enter the address: `http://127.0.0.1:8080`to view the
 - Developers can find target histogram by searching corresponded tags.

  <p align="center">
-    <img src="https://user-images.githubusercontent.com/48054808/86536503-baaa4f80-bf1a-11ea-80ab-cd988617d018.png" width="40%"/>
+    <img src="https://user-images.githubusercontent.com/48054808/90879724-ebb2e680-e3d9-11ea-9e05-9bc06691ed9c.png" width="85%"/>
  </p>

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

  <p align="center">
-    <img src="https://user-images.githubusercontent.com/48054808/86536639-b894c080-bf1b-11ea-9ee5-cf815dd4bbd7.png" width="40%"/>
+    <img src="https://user-images.githubusercontent.com/48054808/90879868-26b51a00-e3da-11ea-8c1d-83fb019ec668.png" width="40%"/>
  </p>

 ## PR Curve--PR 曲线组件
@@ -593,7 +589,7 @@ 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/48054808/86738774-ee46c000-c067-11ea-90d2-a98aac445cca.png" width="80%"/>
+  <img src="https://user-images.githubusercontent.com/48054808/90879904-37fe2680-e3da-11ea-9369-2513620bf541.png" width="85%"/>
 </p>

 ### Functional Instrucions
@@ -607,25 +603,25 @@ Then, open the browser and enter the address`http://127.0.0.1:8080` to view:
 - Developers hover on the specific data point to learn about the detailed information: TP, TN, FP, FN and the corresponded thresholds

    <p align="center">
-      <img src="https://user-images.githubusercontent.com/48054808/86740477-43370600-c069-11ea-93f0-f4d05445fbab.png" width="50%"/>
+      <img src="https://user-images.githubusercontent.com/48054808/90879971-4e0be700-e3da-11ea-989a-777b977c271d.png" width="50%"/>
    </p>

 - The targeted PR Curves can be displayed by searching tags

  <p align="center">
-    <img src="https://user-images.githubusercontent.com/48054808/86740670-66fa4c00-c069-11ea-9ee3-0a22e2d0dbec.png" width="30%"/>
+    <img src="https://user-images.githubusercontent.com/48054808/90880145-8e6b6500-e3da-11ea-8f06-28248ee2eb84.png" width="80%"/>
  </p>

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

 <p align="center">
-  <img src="https://user-images.githubusercontent.com/48054808/86740817-809b9380-c069-11ea-9453-6531e3ff5f43.png" width="30%"/>
+  <img src="https://user-images.githubusercontent.com/48054808/90880173-9fb47180-e3da-11ea-8704-34cc55c0a844.png" width="30%"/>
 </p>

 - Developers is able to observe the changes of PR Curves across training steps

  <p align="center">
-    <img src="https://user-images.githubusercontent.com/48054808/86741057-b04a9b80-c069-11ea-9fef-2dcc16f9cd46.png" width="30%"/>
+    <img src="https://user-images.githubusercontent.com/48054808/90880301-d2f70080-e3da-11ea-97e0-952b389f8010.png" width="30%"/>
  </p>

 - There are three measurement scales of X axis
@@ -635,7 +631,7 @@ Then, open the browser and enter the address`http://127.0.0.1:8080` to view:
  3. Relative: training time

  <p align="center">
-    <img src="https://user-images.githubusercontent.com/48054808/86741304-db34ef80-c069-11ea-86eb-787b49ed3705.png" width="30%"/>
+    <img src="https://user-images.githubusercontent.com/48054808/90880354-eace8480-e3da-11ea-921f-20f363eb1b1d.png" width="30%"/>
  </p>

 ## High Dimensional--Data Dimensionality Reduction
@@ -692,7 +688,7 @@ 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://visualdl.bj.bcebos.com/images/dynamic_high_dimensional.gif" width="80%"/>
+  <img src="https://user-images.githubusercontent.com/48054808/90880543-341ed400-e3db-11ea-8fdc-8b914704b916.GIF" width="80%"/>
 </p>

 ### Functional Instrucions
@@ -700,23 +696,23 @@ Then, open the browser and enter the address`http://127.0.0.1:8080` to view:
 * Developers are allowed to select specific run of data to display

  <p align="center">
-    <img src="https://user-images.githubusercontent.com/48054808/83006541-f6f9ae80-a044-11ea-82d9-03f1c99a310a.png" width="30%"/>
+    <img src="https://user-images.githubusercontent.com/48054808/90880592-48fb6780-e3db-11ea-9d87-bd54716839aa.png" width="30%"/>
  </p>

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

  <p align="center">
-    <img src="https://user-images.githubusercontent.com/48054808/83006580-0842bb00-a045-11ea-9f7b-776f80ae8b90.png" width="30%"/>
+    <img src="https://user-images.githubusercontent.com/48054808/90880759-9aa3f200-e3db-11ea-8b66-ecc890ffdaf9.png" width="30%"/>
  </p>

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

  <p align="center">
-    <img src="https://user-images.githubusercontent.com/48054808/83006687-2f998800-a045-11ea-888e-2b59e16a92b9.png" width="27%"/>
+    <img src="https://user-images.githubusercontent.com/48054808/90880813-ad1e2b80-e3db-11ea-8540-5e78075dfb69.png" width="27%"/>
  </p>

 * PCA and T-SNE are supported

  <p align="center">
-    <img src="https://user-images.githubusercontent.com/48054808/83006747-3fb16780-a045-11ea-83e0-a314b7765108.png" width="27%"/>
+    <img src="https://user-images.githubusercontent.com/48054808/90880856-bf986500-e3db-11ea-8ffd-261b56d8e730.png" width="27%"/>
  </p>