-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
106 lines (100 loc) · 3.59 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
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Teachable Machine Example</title>
<link rel="stylesheet" type="text/css" href="./libraries/bootstrap.min.css">
</link>
<link rel="stylesheet" type="text/css" href="./style.css">
</link>
<script src="libraries/clmtrackr.js"></script>
<script src="libraries/model_pca_20_svm.js"></script>
<script src="libraries/p5.min.js"></script>
<script src="libraries/p5.dom.min.js"></script>
<script src="libraries/p5ml.min.js"></script>
<script src="sketch.js"></script>
</head>
<body>
<div class="container p-3">
<div class="row">
<div class="col-md-12">
<center>
<h1>FACE RECOGNITION</h1>
<p>Fall 2018 CS4650/CS7650/ECE4655/ECE7655 | Digital Image Processing | Final Project .</p>
</center>
</div>
</div>
</div>
<div id="app" class="container">
<div class="row">
<div class="col-md-6" id="mainCanvas">
</div>
<div class="col-md-6 p-3">
<h1>Predicion</h1>
<p id="prediction"></p>
<div class="row mt-4 learning-class" id="class1">
<h3 class="col-md-12" id="class1-name">
Happy
</h3>
<div class="col-md-12 ">
<div id="class1-probability" class="progress-bar bg-success progress-bar-striped" role="progressbar"
aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:0%">
0%
</div>
</div>
</div>
<div class="row mt-4 learning-class" id="class1">
<h3 id="class2-name" class="col-md-12">
Sad
</h3>
<div class="col-md-12">
<div id="class2-probability" class="progress-bar bg-warning progress-bar-striped" role="progressbar"
aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
70%
</div>
</div>
</div>
<div class="row mt-4 learning-class" id="class1">
<h3 id="class3-name" class="col-md-12">
Suprised
</h3>
<div class="col-md-12">
<div id="class3-probability" class="progress-bar bg-info progress-bar-striped" role="progressbar"
aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
70%
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container " id="controls">
<div class="row">
<div class="col-md-8">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<a href="#" id="class1button" class="btn btn-success">
Happy
</a>
<a href="#" id="class2button" class="btn btn-warning">
Sad
</a>
<a href="#" id="class3button" class="btn btn-info">
Surprised
</a>
</div>
</div>
<div class="col-md-4">
<a href="#" class="btn btn-primary " id="train-button"> Train </a>
</div>
</div>
<div class="row mt-3">
<div class="col-md-12">
<div class="progress ">
<div id="training-progress" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100" style="width: 0%">Progress</div>
</div>
</div>
</div>
</div>
</body>
</html>