-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
138 lines (126 loc) · 5.73 KB
/
index.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
136
137
138
<head>
<link rel="stylesheet" href="pokeDeepLearn.css">
<title>PokeDeepLearn</title>
<link rel="icon" href="sprites/items/poke-ball.png">
</head>
<body>
<h1>Welcome to PokeDeepLearn!</h1>
<section>
<p class='section-head'>About <span> (v1.0.0.)</span></p>
<p>
Given an image of Pokémon, this app tries to predict its types through deep learning model.
As we shall see, it performs binary classification for each type.
</p>
<p>Unfortunately, it runs slowly on GitHub. For better experience, test <a href="https://github.com/ericcAtGitHub/PokeDeepLearn" target="_blank">the code</a> using a localhost environment.</p>
<p>This app is built from:</p>
<ul>
<li>
<a target="_blank" rel="noreferrer" href="https://pokeapi.co/">
PokéAPI
</a>
</li>
<li>
<a target="_blank" rel="noreferrer" href="https://github.com/tensorflow/tfjs">
TensorFlow.js
</a>
</li>
<li>
<a target="_blank" rel="noreferrer" href="https://github.com/tensorflow/tfjs-examples">
TensorFlow.js Examples
</a>
</li>
</ul>
<p>
Developed by Chan Ching Yin.
</p>
</section>
<section>
<p>
<span class='section-head'>Data</span>
<a class="data-desc-collapser">▼</a>
</p>
<div>
<div id="data-desc" class="data-desc-collapsee hide-block"></div>
<a class="data-desc-collapser data-desc-collapsee hide-block">▼</a>
</div>
</section>
<section>
<p class='section-head'>Obtain Model by</p>
<input type="radio" id="modelTypeLoad" name="modelType" value="modelTypeLoad" checked>
<label for="modelTypeLoad">Load pre-trained model</label><br />
<!--input type="radio" id="modelTypeExtraTrain" name="modelType" value="modelTypeExtraTrain">
<label for="modelTypeExtraTrain">Load pre-trained model and train 10 epochs more</label><br /-->
<input type="radio" id="modelTypeTrain" name="modelType" value="modelTypeTrain">
<label for="modelTypeTrain">Train a new model with settings: </label>
<select id="hyper-param"></select>
<br />
<button id="startBtn">Here we go!</button>
</section>
<section class="stage-two-content hide-block">
<div style="max-width:900px;">
<div style="float:left;">
<p class='section-head'>Current Status</p>
<p id="status">Idle</p>
<div id="stats">
<div class="canvases">
<label id="loss-label"></label>
<div id="loss-canvas"></div>
</div>
<div class="canvases">
<label id="accuracy-label"></label>
<div id="accuracy-canvas"></div>
</div>
</div>
</div>
<div style="float:right;">
<p class='section-head'>Current Demo Summary</p>
<table class="demo-summary">
<tr><td></td><th>High score</th><th>Low score</th></tr>
<tr>
<th>Right type</th>
<td class="pos-label high-predict">
<span id="demo-summary-true-pos-count" class="demo-summary-count"></span> True Pos.
</td>
<td class="pos-label low-predict">
<span id="demo-summary-false-neg-count" class="demo-summary-count"></span> False Neg.
</td>
</tr>
<tr>
<th>Wrong type</th>
<td class="neg-label high-predict">
<span id="demo-summary-false-pos-count" class="demo-summary-count"></span> False Pos.
</td>
<td class="neg-label low-predict">
<span id="demo-summary-true-neg-count" class="demo-summary-count"></span> True Neg.
</td>
</tr>
</table>
</div>
</div>
</section>
<section style="margin-bottom: 60px; clear:both;">
<p class='section-head'>Inference Demo</p>
<div>
<select id="demo-repo-sel"></select>
<select id="demo-poke-no-sel"></select>
<button id="demo-show-btn">Show</button>
</div>
<p class="stage-two-content hide-block">
<span class="pos-label">Yellow: Ground truth</span>
<span class="high-predict">Blue: Prediction score > threshold (<span id="high-predict-threshold-disp"></span>)</span>
<span class="pos-label high-predict">Green: Yellow & Blue</span>
<button id="demo-area-width-controller">100% view</button>
</p>
<div id="demo-area" class="demo-area small-width"></div>
</section>
<button id="scroll-top-btn" class="scroll-top hide-block">Top</button>
<!--script src='https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest'></script-->
<!--script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>-->
<!--script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis"></script-->
<script src='tf.min.js'></script>
<script src='tfjs-vis.umd.min.js'></script>
<script src='pokeDeepLearn.const.js'></script>
<script src='pokeDeepLearn.data.js'></script>
<script src='pokeDeepLearn.ui.js'></script>
<script src='pokeDeepLearn.main.js'></script>
</body>