1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mint</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- NVD3 css -->
<link href="http://nvd3.org/assets/css/nv.d3.css" type="text/css" rel="stylesheet"/>
<!-- static sidebar -->
<link href="{{ url_for('static', filename='css/simple-sidebar.css') }}" type="text/css" rel="stylesheet"/>
</head>
<body>
<script src="http://nvd3.org/assets/lib/d3.v3.js"></script>
<script src="http://nvd3.org/assets/js/nv.d3.js"></script>
<!-- Simple Ajax content -->
<script>
function getCurrentTimeString() {
var now = new Date();
return now.toLocaleString();
}
function loadVisualization(content) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var response = JSON.parse(xmlhttp.responseText);
document.getElementById("visualization_" + content).innerHTML =
response['result'];
document.getElementById("visualization_" + content + "_time").innerHTML =
getCurrentTimeString();
eval(response['script']);
}
}
document.getElementById("visualization_" + content).innerHTML =
"Loading...";
xmlhttp.open("GET", "visualization/" + content, true);
xmlhttp.send();
}
</script>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<h3><span class="glyphicon glyphicon-leaf" aria-hidden="true"></span> Caffe-Mint</h3>
</li>
<li><a href="#page-content-wrapper"><strong>Top</strong></a></li>
{% for name in names %}
<li><a href="#visualization_{{name}}_panel"> {{name}} </a></li>
{% endfor %}
</ul>
</div> <!-- /#sidebar-wrapper -->
<div id="page-content-wrapper">
<p>
Visualizing folder: {{ root }}.<br/>
<a class="btn btn-default" id="menu-toggle">Toggle sidebar</a>
<a class="btn btn-default" id="menu-toggle" onclick="refreshAll()">Refresh all</a>
</p>
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#visualizations" aria-controls="visualizations" role="tab" data-toggle="tab">Visualizations</a></li>
<li role="presentation"><a href="#debug" aria-controls="debug" role="tab" data-toggle="tab">Debug</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<p></p>
<div role="tabpanel" class="tab-pane active" id="visualizations">
{% for name in names %}
<div class="panel panel-default" id="visualization_{{name}}_panel">
<div class="panel-heading">
{{ name }}
<a onclick="loadVisualization('{{name}}')">
<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
</a>
<a href="#page-content-wrapper" class="pull-right"> Top </a>
</div>
<div class="panel-body">
<div id="visualization_{{name}}"> Loading... </div>
<p> Last updated: <span id="visualization_{{name}}_time">NA</span></p>
</div>
</div>
{% endfor %}
</div>
<div role="tabpanel" class="tab-pane" id="debug">
<ul>
{% for message in debug_messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
</div>
</div>
</div>
<hr>
<div id="footer">
<div class="container">
<p>
Mint is a minimal Caffe2 visualization tool by
<a href="http://daggerfs.com/" target="_blank">Yangqing</a>.
</p>
</div>
</div>
</div> <!-- /#page-content-wrapper -->
</div><!-- /#wrapper -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
<!-- load all contents for the first time when this page loads. -->
<script>
function refreshAll() {
{% for name in names %}
loadVisualization("{{name}}");
{% endfor %}
}
refreshAll();
</script>
</body>
</html>
|
