Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
PaddlePaddle
VisualDL
提交
e84e5be2
V
VisualDL
项目概览
PaddlePaddle
/
VisualDL
11 个月 前同步成功
通知
86
Star
4655
Fork
641
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
10
列表
看板
标记
里程碑
合并请求
2
Wiki
5
Wiki
分析
仓库
DevOps
项目成员
Pages
V
VisualDL
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
10
Issue
10
列表
看板
标记
里程碑
合并请求
2
合并请求
2
Pages
分析
分析
仓库分析
DevOps
Wiki
5
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
e84e5be2
编写于
4月 16, 2018
作者:
D
daminglu
提交者:
GitHub
4月 16, 2018
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Polish graph (#395)
上级
274f4554
变更
7
隐藏空白更改
内联
并排
Showing
7 changed file
with
136 addition
and
23 deletion
+136
-23
.travis.yml
.travis.yml
+1
-1
frontend/src/graph/Graph.vue
frontend/src/graph/Graph.vue
+9
-0
frontend/src/graph/ui/Chart.vue
frontend/src/graph/ui/Chart.vue
+93
-17
frontend/src/graph/ui/Config.vue
frontend/src/graph/ui/Config.vue
+29
-2
requirements.txt
requirements.txt
+1
-1
scripts/tests.sh
scripts/tests.sh
+1
-0
visualdl/server/mock/download_mock_models.sh
visualdl/server/mock/download_mock_models.sh
+2
-2
未找到文件。
.travis.yml
浏览文件 @
e84e5be2
...
...
@@ -52,7 +52,7 @@ before_install:
script
:
-
if [[ "$JOB" == "check_style" ]]; then ./scripts/check_style.sh; fi
-
if [[ "$JOB" == "test" ]]; then ./scripts/tests.sh all;
WITH_PYTHON3=ON ./scripts/tests.sh all;
fi
-
if [[ "$JOB" == "test" ]]; then ./scripts/tests.sh all; fi
-
if [[ "$JOB" == "build_doc" ]]; then ./scripts/deploy_docs_on_travis.sh; fi;
notifications
:
...
...
frontend/src/graph/Graph.vue
浏览文件 @
e84e5be2
...
...
@@ -3,8 +3,11 @@
<div
class=
"visual-dl-page-left"
>
<ui-chart
:do-download=
"doDownload"
:do-restore=
"doRestore"
:scale=
"config.scale"
@
curNodeUpdated=
"curNode = $event"
@
triggerDownload=
"doDownload = $event"
@
triggerRestore=
"doRestore = $event"
/>
</div>
<div
class=
"visual-dl-page-right"
>
...
...
@@ -12,7 +15,9 @@
<ui-config
:cur-node=
"curNode"
:do-download=
"doDownload"
:config=
"config"
@
triggerDownload=
"doDownload = $event"
@
triggerRestore=
"doRestore = $event"
/>
</div>
</div>
...
...
@@ -34,7 +39,11 @@ export default {
data
()
{
return
{
doDownload
:
false
,
doRestore
:
false
,
curNode
:
{},
config
:
{
scale
:
0.5
,
},
};
},
mounted
()
{
...
...
frontend/src/graph/ui/Chart.vue
浏览文件 @
e84e5be2
<
template
>
<div
class=
"visual-dl-graph-charts"
>
<svg
:style=
"
{ width: imageWidth + 'px', height: imageHeight + 'px' }"
class="visual-dl-page-left"
ref="graphSvg">
<g/>
...
...
@@ -11,9 +12,9 @@
// service
import
{
getPluginGraphsGraph
}
from
'
../../service
'
;
//
The name 'svgToPngDownloadHelper' is just a placeholder.
//
Loading the JS lib file will bind saveSvgAsPng to window
.
import
*
as
svgToPngDownloadHelper
from
'
./svgToPngDownloadHelper.js
'
;
//
Loading the JS lib file will bind saveSvgAsPng to window,
//
which does an SVG -> PNG -> download process
.
import
'
./svgToPngDownloadHelper.js
'
;
// for d3 drawing
import
*
as
d3
from
'
d3
'
;
...
...
@@ -27,22 +28,76 @@ export default {
type
:
Boolean
,
required
:
true
,
},
'
doRestore
'
:
{
type
:
Boolean
,
required
:
true
,
},
'
scale
'
:
{
type
:
Number
,
required
:
true
,
},
},
computed
:
{},
data
()
{
return
{
imageHeight
:
0
,
imageWidth
:
0
,
originImageWidth
:
0
,
originImageHeight
:
0
,
graphZoom
:
null
,
svgSelection
:
null
,
zoomScale
:
null
,
};
},
watch
:
{
doDownload
:
function
(
val
)
{
let
chartScope
=
this
;
if
(
this
.
doDownload
)
{
let
svg
=
this
.
$refs
.
graphSvg
;
saveSvgAsPng
(
svg
,
"
graph.png
"
,
{
scale
:
1.0
});
this
.
$emit
(
'
triggerDownload
'
,
false
);
// in order to download the full graph image, we need to first restore it
// to its original size
this
.
restoreImage
(
true
);
chartScope
.
$emit
(
'
triggerDownload
'
,
false
);
}
},
doRestore
:
function
(
val
)
{
this
.
restoreImage
(
false
);
},
scale
:
function
(
val
)
{
let
k
=
this
.
zoomScale
(
val
);
let
svg
=
d3
.
select
(
'
svg
'
);
svg
.
call
(
this
.
graphZoom
.
transform
,
d3
.
zoomIdentity
.
scale
(
k
));
},
},
methods
:
{
restoreImage
(
thenDownload
)
{
let
chartScope
=
this
;
let
svg
=
d3
.
select
(
'
svg
'
);
this
.
imageWidth
=
this
.
originImageWidth
;
this
.
imageHeight
=
this
.
originImageHeight
;
if
(
thenDownload
)
{
svg
.
transition
()
.
duration
(
750
)
.
call
(
this
.
graphZoom
.
transform
,
d3
.
zoomIdentity
.
translate
(
0
,
0
))
.
on
(
'
end
'
,
function
()
{
let
svg
=
chartScope
.
$refs
.
graphSvg
;
saveSvgAsPng
(
svg
,
'
graph.png
'
,
{
scale
:
1.0
});
});
}
else
{
svg
.
transition
()
.
duration
(
750
)
.
call
(
this
.
graphZoom
.
transform
,
d3
.
zoomIdentity
.
translate
(
0
,
0
));
}
this
.
$emit
(
'
triggerRestore
'
,
false
);
},
},
created
()
{
// scale
let
linearScale
=
d3
.
scaleLinear
();
linearScale
.
domain
([
0.1
,
1
]);
linearScale
.
range
([
0.75
,
1.25
]);
this
.
zoomScale
=
linearScale
;
},
mounted
()
{
let
chartScope
=
this
;
getPluginGraphsGraph
().
then
(({
errno
,
data
})
=>
{
...
...
@@ -148,26 +203,49 @@ export default {
// add edges from inputs to node and from node to output
if
(
has
(
curOperatorNode
,
'
input
'
)
&&
isArrayLike
(
curOperatorNode
[
'
input
'
]))
{
for
(
let
e
=
0
;
e
<
curOperatorNode
[
'
input
'
].
length
;
++
e
)
{
g
.
setEdge
(
curOperatorNode
[
'
input
'
][
e
],
nodeKey
);
}
for
(
let
e
=
0
;
e
<
curOperatorNode
[
'
input
'
].
length
;
++
e
)
{
g
.
setEdge
(
curOperatorNode
[
'
input
'
][
e
],
nodeKey
);
}
}
if
(
has
(
curOperatorNode
,
'
output
'
)
&&
isArrayLike
(
curOperatorNode
[
'
output
'
]))
{
g
.
setEdge
(
nodeKey
,
curOperatorNode
[
'
output
'
][
0
],
{
style
:
'
stroke: #333;stroke-width: 1.5px
'
,
});
g
.
setEdge
(
nodeKey
,
curOperatorNode
[
'
output
'
][
0
],
{
style
:
'
stroke: #333;stroke-width: 1.5px
'
,
});
}
}
// TODO(daming-lu): add prettier styles to diff nodes
let
svg
=
d3
.
select
(
'
svg
'
)
.
attr
(
'
font-family
'
,
'
sans-serif
'
)
.
attr
(
'
font-size
'
,
'
28px
'
);
render
(
d3
.
select
(
'
svg g
'
),
g
);
// adjust viewBox so that the whole graph can be shown, with scroll bar
svg
.
attr
(
'
viewBox
'
,
'
0 0
'
+
g
.
graph
().
width
+
'
'
+
g
.
graph
().
height
);
let
graphSelection
=
d3
.
select
(
'
svg g
'
);
let
graphWidth
=
g
.
graph
().
width
;
let
graphHeight
=
g
.
graph
().
height
;
svg
.
attr
(
'
viewBox
'
,
'
0 0
'
+
graphWidth
+
'
'
+
graphHeight
);
this
.
imageWidth
=
graphWidth
;
this
.
imageHeight
=
graphHeight
;
this
.
originImageWidth
=
graphWidth
;
this
.
originImageHeight
=
graphHeight
;
// zooming
let
zooming
=
function
(
d
)
{
graphSelection
.
attr
(
'
transform
'
,
d3
.
event
.
transform
);
let
newViewBoxWidth
=
d3
.
event
.
transform
.
k
*
graphWidth
;
let
newViewBoxHeight
=
d3
.
event
.
transform
.
k
*
graphHeight
;
chartScope
.
imageWidth
=
newViewBoxWidth
;
chartScope
.
imageHeight
=
newViewBoxHeight
;
};
let
zoom
=
d3
.
zoom
().
on
(
'
zoom
'
,
zooming
);
chartScope
.
graphZoom
=
zoom
;
// TODO(daming-lu): enable zoom would have conflict with scale slider
// need to find a coordinated way to handle panning and zooming.
// svg.call(zoom);
svg
.
selectAll
(
'
.node
'
).
on
(
'
click
'
,
function
(
d
,
i
)
{
let
curNode
=
g
.
node
(
d
);
...
...
@@ -190,8 +268,6 @@ export default {
});
});
},
methods
:
{},
};
</
script
>
<
style
lang=
"stylus"
>
...
...
frontend/src/graph/ui/Config.vue
浏览文件 @
e84e5be2
...
...
@@ -9,7 +9,26 @@
<v-icon
style=
"margin-right: 6px"
>
file_download
</v-icon>
Download image
</v-btn>
<v-btn
class=
"visual-dl-graph-config-button"
color=
"primary"
@
click=
"resetImage"
dark
>
<v-icon
style=
"margin-right: 6px"
>
restore
</v-icon>
Restore image
</v-btn>
<v-slider
label=
"Scale"
max=
"1"
min=
"0.1"
step=
"0.1"
v-model=
"config.scale"
dark
/>
</div>
<div
class=
"node-info"
>
<h3>
Node Info:
</h3>
...
...
@@ -43,10 +62,18 @@ export default {
'
curNode
'
:
{
type
:
Object
,
default
:
{},
}},
methods
:
{
},
'
config
'
:
{
type
:
Object
,
required
:
true
,
},
},
methods
:
{
handleDownload
()
{
this
.
$emit
(
'
triggerDownload
'
,
true
);
},
resetImage
()
{
this
.
$emit
(
'
triggerRestore
'
,
true
);
},
},
};
</
script
>
...
...
@@ -66,7 +93,7 @@ export default {
height 26px
.graph-config-upper
height
15
0px
height
30
0px
.node-info
font-family 'Courier New', sans-serif
...
...
requirements.txt
浏览文件 @
e84e5be2
...
...
@@ -7,5 +7,5 @@ flake8==3.5.0
Pillow
==5.0.0
pre-commit
==1.5.1
flask
==0.12.2
protobuf
==3.5.1
six
==1.11.0
protobuf
==3.5.1
scripts/tests.sh
浏览文件 @
e84e5be2
...
...
@@ -35,6 +35,7 @@ fi
$sudo
$pip
install
numpy
$sudo
$pip
install
Flask
$sudo
$pip
install
Pillow
$sudo
$pip
install
six
$sudo
$pip
install
protobuf
export
PYTHONPATH
=
"
${
core_path
}
:
${
python_path
}
"
...
...
visualdl/server/mock/download_mock_models.sh
浏览文件 @
e84e5be2
# Download squeezenet model
curl
-LOk
http://visualdl.bj.bcebos.com/squeezenet.tar.gz
#curl -LOk https://www.dropbox.com/s/fip3jzxsjf2g6zc/squeezenet.tar.gz?dl=0
#
curl -LOk http://visualdl.bj.bcebos.com/squeezenet.tar.gz
curl
-LOk
https://www.dropbox.com/s/fip3jzxsjf2g6zc/squeezenet.tar.gz
tar
-xvzf
squeezenet.tar.gz
cp
squeezenet/model.pb squeezenet_model.pb
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录