VisualDL has three components.
- The Python/C++ SDK that logs the data during training.
- The single page client side app that visualized training data.
- 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.
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 firstname.lastname@example.org: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
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
- webpack: To manage all assets
- npm: To manage dependencies
- ECharts: To pilot charts
To learn more about webpack.
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.
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 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