前端指南

VisualDL有三个功能模块.

  • 在训练过程中用来记录日志数据的 Python/C++ SDK。
  • 用来可视化训练数据的客户端单页面应用。
  • 后端 Flask 服务器，用来读取日志数据并提供给前端应用，以便前端可以展示各类图标，如柱状图，嵌入图等等.这篇文档用来介绍前端的架构，以及指导用户自行开发。

长话短说

如果您不关心细节，而是想马上开始开发，请运行以下命令。

克隆代码库以及准备开发环境

  1. git clone git@github.com:PaddlePaddle/VisualDL.git
  2. cd VisualDL
  3. # Install all the requirements, we recommend you to setup a virtual environment to keep it clean.
  4. pip install -r requirements.txt
  5. # Set up the node dependencies and the VisualDL SDK
  6. ./scripts/setup_dev_env.sh

运行开发服务器，开始码代码喽~

  1. ./scripts/start_dev_server.sh --logdir=<LOG_DIR>

这个脚本会在 http://0.0.0.0:8040 启动一个开发服务器。打开浏览器，来到 http://0.0.0.0:8040/，您就可以发现开发版的 VisualDL 啦~

前端网络应用架构

VisualDL 前端网络应用使用多个框架来管理项目。这些框架包括：

  • webpack: 管理所有组件
  • npm: 管理依赖性
  • Vue: 流行的Javascript组件框架
  • ECharts: 专业的数据可视化库

Webpack

webpack 是一个模块打包框架. 它主要的工作是把前端JavaScript文件带包在一起，提供给浏览器。

很长一段时间，网络开发者不得不关心如何向后兼容以及如何支持不同的浏览器。Webpack可以把JavaScript代码同步编译到不同的版本，以便适应不同的浏览器。网络开发者不必再担心为了特定的浏览器而订制特定的代码版本。它也可以 ‘最小化’ 和 ‘丑化’ JavaScript文件。一句话，webpack可以帮助管理你的所有资料（.js, .css, .gif, .sass, etc）.

更多Webpack内容请参考这里.

npm package

npm 是一个JavaScript的代码包管理器。而且是一个很优秀的管理多种依赖性的工具。请运行以下命令来确保您已经安装了 npm

  1. npm -v

如果您的环境没有npm，请在 这里 下载.

基本的包裹信息在 package.json中。它用来定义构造脚本的依赖关系。npm 读取 package.json 来根据打包脚本构造不同的包裹。如果您对 npm 还不熟，请看 这里。

运行如下命令来安装所需的依赖库

  1. # Navigate to the web-app folder
  2. cd VisualDL/frontend
  3. npm install

这个命令会逐行检查package.json并且安装相应的依赖库到本地的 node_modules 文件夹里

Vue

Vue 是一个很潮的 JavaScript 框架。可以帮助开发者用 MVM 架构模式 开发网络组件。

Vue 允许开发者自己定义视图模型并保存在 .vue 文件里。然后把视图模型绑定到 DOM 对象上。

更多内容参见 这里

ECharts

我们使用一个国内流行的 ECharts 来显示图表和图像。 ECharts 是领先的开源前端数据可视化库。它支持多种多样的数据可视化需求。

更多关于 ECharts的信息。