Frontend Guide

VisualDL has three components.

  1. The Python/C++ SDK that logs the data during training.
  2. The single page client side app that visualized training data.
  3. The server (powered on Flask) that reads the logs data and delivers it to the client side app for displaying graphs (scalars/histograms) and embeddings.

This article will go over the basic web-app architecture and development guide.

TL;DR

If you are not interested in the details of mumbo jumbo and want to start development as soon as possible, please run the following commands.

To clone the repo and to prepare the environment

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

To run the dev server and start coding

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

The script will run a dev server at http://0.0.0.0:8040. Open a browser and navigate to http://0.0.0.0:8040/ to see it

Web App Architecture

The VisualDL Web app uses multiple frameworks to help manage the project. They are

  1. webpack: To manage all assets
  2. npm: To manage dependencies
  3. Vue: Javascript Component framework
  4. ECharts: To pilot charts

Webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser.

For a long time, web developers need to worry about backward compatibility or how to support different versions of browsers. webpack can help to transpile the Javascript files to the version where a browser can take. The developers don’t need to implement version specific code anymore. It can also help to minify and uglify Javascript files. In a nutshell, webpack helps to manage all of your assets (.js, .css, .gif, .sass, etc) so you don’t have to.

To learn more about webpack.

npm package

npm is the package manager for JavaScript and is a great tool to manage multiple dependencies. To confirm that you have npm installed. Please run this command

npm -v

If your environment does not have npm already, please download npm.

The basic packaging information is stored in package.json. It specifies build scripts and dependencies for each environment. npm reads package.json to build different package according to the packaging script. If you are not familiar with npm, please refer to the npm documentation for more detail.

Install the necessary dependencies by running

# Navigate to the web-app folder
cd VisualDL/frontend
npm install

This command will go through package.json and install the dependencies in the local node_modules folder.

Vue

Vue is a JavaScript component framework that helps the developer to implement web component in MVVM architecture pattern.

Vue allows you to define a self-contained view model in a .vue file and attach view model objects to DOM objects.

To learn more about Vue

ECharts

We use ECharts javascript library to render our charts and graphs. ECharts is a leading open source charting library that supports numerous data visualization.

To learn more about ECharts framework, please visit ECharts.