-
Notifications
You must be signed in to change notification settings - Fork 0
/
MNIST.html
135 lines (128 loc) · 6.1 KB
/
MNIST.html
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
135
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
<script id="deploy" type="application/json">
{"datasetUrl":"http://storage.googleapis.com/moderatordev-223307.appspot.com/MNIST_dataset/"}
</script>
<!-- <script id="deploy" type="application/json">
{"datasetUrl":"http://127.0.0.1:5000/MNIST_dataset/"}
</script> -->
<style>
.groupBar{
border: 1px solid #efefef;
border-radius: 8px;
padding: 10px;
margin-top:20px;
}
.splitLine{
border-bottom:1px solid #efefef;
padding-bottom:10px;
}
.loader {
border: 2px solid #f3f3f3; /* Light grey */
border-top: 12px solid #3498db; /* Blue */
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
/* transform: rotate(0deg); */
}
100% {
/* transform: rotate(360deg); */
}
}
#controller, #logger{
max-height: 90%;
overflow-y: scroll;
}
#saveModelList > li{
}
#saveModelList > li.selected{
background: #3498db;
}
</style>
</head>
<body>
<div class="container">
<h1></h1>
<div class="alert alert-primary" role="alert">
This is mnist model training demo with ensemble learning
</div>
<div class="row">
<div class="col" id="controller">
<div class="spinner-border" role="status">
<span class="sr-only">why you not show...</span>
</div>
<h4 class="text-center">training configure</h4>
<ul class="nav flex-column groupBar" >
<h5 class="text-center">dataset</h5>
<p> number of data chunks from 1 to max 650 of 65000 image samples with 100 samples each chunk</p>
<p class="font-weight-bold"> more chunks require more computing resource and higher latency</p>
<li class="nav-item splitLine">
<input type="number" class="form-control" id="SetChunks"
min=0 max=650 value="3">
</li>
<li class="nav-item splitLine">
<h6>Load chunks from server</h6>
<button class="btn col-12" id="FetchData">
fetch data chunks
</button>
</li>
<li class="nav-item">
<h6>preprocessing chunk</h6>
<button class="btn col-12" id="Preprocessing">preprocessing</button>
</li>
</ul>
<ul class="nav flex-column groupBar" id="TrainingModel">
<h5 class="text-center">model</h5>
<li class="nav-item">
<h6>training model</h6>
<button class="btn col-12" id="TrainModel">train</button>
</li>
<li class="nav-item">
<h6>save model</h6>
<button class="btn col-12" id="SaveModel">save</button>
</li>
</ul>
<ul class="nav flex-column groupBar" id="TestingModel">
<li class="nav-item">
<h6>test model</h6>
<button class="btn col-12" id="TestModel">test</button>
</li>
</ul>
<ul class="nav flex-column groupBar" id="TestingModel">
<li class="nav-item">
<h6>clean storage</h6>
<button class="btn col-12" id="DeleteStorage">clean storage</button>
</li>
</ul>
<ul class="nav flex-column groupBar" id="EnsembleModel">
<h5 class="text-center">ensemble</h5>
<li>
<h6 class="font-weight-bold">saved models</h6>
<ul class="nav flex-column" id="saveModelList">
</ul>
</li>
<li class="nav-item">
<button class="btn col-12" id="TestEnsemble">ensemble test</button>
</li>
</ul>
</div>
<div class="col-9" id="logger">
<h4 class="text-center">model logger</h4>
</div>
</div>
</div>
<script type="text/javascript" src="vendors.js"></script><script type="text/javascript" src="MNIST-demo.js"></script></body>
</html>