doc/init Chinese doc

.gitignore

@@ -106,3 +106,7 @@ ENV/
 node_modules
 /.vscode
 package-lock.json
+
+# PyCharm IDE
+.idea/
+

.pre-commit-config.yaml

@@ -23,3 +23,9 @@
  entry: bash ./.clang_format.hook -i
  language: system
  files: \.(c|cc|cxx|cpp|cu|h|hpp|hxx|proto)$
+
+- repo: git://github.com/guykisel/pre-commit-reject-large-files
+ sha: da21f6dac1aa20aa53598b145c5c0013cdd40d65
+ hooks:
+ - id: reject-large-files
+ args: [--max-filesize=1000000]

.travis.yml

@@ -3,6 +3,7 @@ cache:
  - pip
  - ccache
  - yarn
+ - npm
 sudo: required
 dist: trusty
 os:

CMakeLists.txt

@@ -30,8 +30,6 @@ include(external/python) # find python and set path
 
 include_directories(${PROJECT_SOURCE_DIR})
 include_directories(${CMAKE_CURRENT_BINARY_DIR})
-# TODO(ChunweiYan) debug, remote latter
-#include_directories(/home/superjom/project/VisualDL/build/third_party/eigen3/src/extern_eigen3)
 
 add_subdirectory(${CMAKE_CURRENT_SOURCE_DIR}/visualdl/storage)
 add_subdirectory(${CMAKE_CURRENT_SOURCE_DIR}/visualdl/logic)
@@ -40,13 +38,14 @@ add_subdirectory(${CMAKE_CURRENT_SOURCE_DIR}/visualdl/python)
 add_executable(vl_test
  ${PROJECT_SOURCE_DIR}/visualdl/test.cc
  ${PROJECT_SOURCE_DIR}/visualdl/logic/sdk_test.cc
+ ${PROJECT_SOURCE_DIR}/visualdl/logic/histogram_test.cc
  ${PROJECT_SOURCE_DIR}/visualdl/storage/storage_test.cc
  ${PROJECT_SOURCE_DIR}/visualdl/utils/test_concurrency.cc
  ${PROJECT_SOURCE_DIR}/visualdl/utils/test_image.cc
  ${PROJECT_SOURCE_DIR}/visualdl/utils/concurrency.h
  ${PROJECT_SOURCE_DIR}/visualdl/utils/filesystem.h
  )
-target_link_libraries(vl_test sdk storage entry tablet im gtest glog protobuf gflags pthread)
+target_link_libraries(vl_test sdk storage entry tablet im gtest glog protobuf gflags pthread eigen3)
 
 enable_testing ()
 

README.md

@@ -1,34 +1,14 @@
 # VisualDL
 
 
-### How to use
-#### Step 1: build frontend
-```shell
-cd frontend
-npm install
-npm run build
+### How to install
 ```
-
-this step will generate a dist directory under frontend
-
-### Step 2: copy frontend/dist to server/visualdl/frontend/dist
-```shell
-mkdir -p server/visualdl/frontend/dist
-cp -r frontend/dist server/visualdl/frontend/dist
-```
-
-#### Step 3: build and install Python package
-```shell
-cd server/
-sh build.sh
-cd dist
-sudo pip install --upgrade visualdl-0.0.1-py2-none-any.whl
+python setup.py bdist_wheel
+pip install --upgrade dist/visualdl-0.0.1-py2-none-any.whl
 ```
 
 
 ### Step 3: run
 ```
-# cd to visualdl install dir
-cd /usr/local/lib/python2.7/site-packages/visualdl/
-python visual_dl.py --port=8888
+visualDL --logdir=<some log> --port=8888
 ```

VERSION_NUMBER

@@ -0,0 +1 @@
+0.0.1

build.sh

@@ -0,0 +1,54 @@
+#!/bin/bash
+set -ex
+
+TOP_DIR=$(pwd)
+FRONTEND_DIR=$TOP_DIR/frontend
+BACKEND_DIR=$TOP_DIR/visualdl
+BUILD_DIR=$TOP_DIR/build
+
+mkdir -p $BUILD_DIR
+
+build_frontend() {
+ cd $FRONTEND_DIR
+ if [ ! -d "dist" ]; then
+ npm install
+ npm run build
+ fi
+}
+
+build_frontend_fake() {
+ cd $FRONTEND_DIR
+ mkdir -p dist
+}
+
+build_backend() {
+ cd $BUILD_DIR
+ cmake ..
+ make -j2
+}
+
+build_onnx_graph() {
+ # TODO(ChunweiYan) check protoc version here
+ cd $TOP_DIR/visualdl/server/onnx
+ protoc onnx.proto --python_out .
+}
+
+package() {
+ cp -rf $FRONTEND_DIR/dist $TOP_DIR/visualdl/server/
+ cp $BUILD_DIR/visualdl/logic/core.so $TOP_DIR/visualdl
+ cp $BUILD_DIR/visualdl/logic/core.so $TOP_DIR/visualdl/python/
+}
+
+ARG=$1
+echo "ARG: " $ARG
+
+
+if [ $ARG = "travis-CI" ]; then
+ build_frontend_fake
+else
+ build_frontend
+fi
+
+build_backend
+build_onnx_graph
+package

docs/README_cn.md

@@ -0,0 +1,111 @@
+# VisualDL (Visualize the Deep Learning)
+
+## 介绍
+VisualDL是一个面向深度学习任务设计的可视化工具，包含了scalar、参数分布、模型结构、图像可视化等功能，项目正处于高速迭代中，新的优化组件会不断加入。
+
+目前大多数DNN平台均使用Python作为配置语言，VisualDL原生支持python的使用，
+通过在模型配置中添加几行配置，便可以为冷冰冰的训练过程提供丰富的可视化支持。
+
+除了Python SDK之外，VisualDL底层采用C++编写，其暴露的C++ SDK也可以深入其他的平台中，
+实现原生的性能和定制效果。
+
+## 组件
+VisualDL 目前支持4种组件：
+
+- graph
+- scalar
+- image
+- histogram
+
+### graph
+兼容 ONNX(Open Neural Network Exchange)[https://github.com/onnx/onnx], 通过与 python SDK的结合，VisualDL可以兼容包括 PaddlePaddle, pytorch, mxnet在内的大部分主流DNN平台。
+
+<p align="center">
+<img src="./images/introduction_graph.png"/>
+</p>
+
+### scalar
+可以用于展示训练测试的误差趋势
+
+<p align="center">
+<img src="./images/introduction_scalar.png"/>
+</p>
+
+### image
+可以用于可视化任何tensor，或模型生成的图片
+
+<p align="center">
+<img src="./images/introduction_image.png"/>
+</p>
+
+### histogram
+
+用于可视化任何tensor中元素分布的变化趋势
+
+<p align="center">
+<img src="./images/introduction_histogram.png"/>
+</p>
+
+## SDK
+VisualDL 同时提供了python SDK 和 C++ SDK 来实现不同方式的使用。
+### Python SDK
+以最简单的Scalar组件为例，尝试创建一个scalar组件并插入多个时间步的数据：
+
+```python
+import random
+from visualdl import LogWriter
+
+logdir = "./tmp"
+logger = LogWriter(dir, sync_cycle=10)
+
+# mark the components with 'train' label.
+with logger.mode("train"):
+ # create a scalar component called 'scalars/scalar0'
+ scalar0 = logger.scalar("scalars/scalar0")
+
+
+# add some records during DL model running, lets start from another block.
+with logger.mode("train"):
+ # add scalars
+ for step in range(100):
+ scalar0.add_record(step, random.random())
+```
+
+### C++ SDK
+上面 Python SDK 中代码完全一致的C++ SDK用法如下
+```c++
+#include <cstdlib>
+#include <string>
+#include "visualdl/sdk.h"
+
+namespace vs = visualdl;
+namepsace cp = visualdl::components;
+
+int main() {
+ const std::string dir = "./tmp";
+ vs::LogWriter logger(dir, 10);
+
+ logger.SetMode("train");
+ auto tablet = logger.NewTablet("scalars/scalar0");
+
+ cp::Scalar<float> scalar0(tablet);
+
+ for (int step = 0; step < 1000; step++) {
+ float v = (float)std::rand() / RAND_MAX;
+ scalar0.AddRecord(step, v);
+ }
+
+ return 0;
+}
+```
+## 启动Board
+当训练过程中已经产生了日志数据，就可以启动board进行实时预览可视化信息
+
+```
+visualDL --logdir <some log dir>
+```
+
+board 还支持一下参数来实现远程的访问：
+
+- `--host` 设定IP
+- `--port` 设定端口

frontend/mock/data/plugin/graphs/graphs.js

@@ -0,0 +1,115 @@
+/**
+ * get mock data
+ *
+ * @param {string} path request path
+ * @param {Object} queryParam query params
+ * @param {Object} postParam post params
+ * @return {Object}
+ */
+module.exports = function (path, queryParam, postParam) {
+ return {
+ // moock delay
+ _timeout: 0,
+ // mock http status
+ _status: 200,
+ // mock response data
+ _data: {
+ status: 0,
+ msg: 'SUCCESS',
+ data: {
+ title: {
+ text: 'Graph 简单示例'
+ },
+ tooltip: {},
+ animationDurationUpdate: 1500,
+ animationEasingUpdate: 'quinticInOut',
+ series : [
+ {
+ type: 'graph',
+ layout: 'none',
+ symbolSize: 50,
+ roam: true,
+ label: {
+ normal: {
+ show: true
+ }
+ },
+ edgeSymbol: ['circle', 'arrow'],
+ edgeSymbolSize: [4, 10],
+ edgeLabel: {
+ normal: {
+ textStyle: {
+ fontSize: 20
+ }
+ }
+ },
+ data: [{
+ name: '节点1',
+ x: 300,
+ y: 300
+ }, {
+ name: '节点2',
+ x: 800,
+ y: 300
+ }, {
+ name: '节点3',
+ x: 550,
+ y: 100
+ }, {
+ name: '节点4',
+ x: 550,
+ y: 500
+ }],
+ // links: [],
+ links: [{
+ source: 0,
+ target: 1,
+ symbolSize: [5, 20],
+ label: {
+ normal: {
+ show: true
+ }
+ },
+ lineStyle: {
+ normal: {
+ width: 5,
+ curveness: 0.2
+ }
+ }
+ }, {
+ source: '节点2',
+ target: '节点1',
+ label: {
+ normal: {
+ show: true
+ }
+ },
+ lineStyle: {
+ normal: { curveness: 0.2 }
+ }
+ }, {
+ source: '节点1',
+ target: '节点3'
+ }, {
+ source: '节点2',
+ target: '节点3'
+ }, {
+ source: '节点2',
+ target: '节点4'
+ }, {
+ source: '节点1',
+ target: '节点4'
+ }],
+ lineStyle: {
+ normal: {
+ opacity: 0.9,
+ width: 2,
+ curveness: 0
+ }
+ }
+ }
+ ]
+ }
+ }
+ };
+};