-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
117 lines (100 loc) · 4.69 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mobile Image Classifier</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/index.css">
<script src="https://unpkg.com/@tensorflow/tfjs"></script>
<script src="https://unpkg.com/@tensorflow-models/mobilenet"></script>
<script src="https://unpkg.com/@tensorflow-models/knn-classifier"></script>
</head>
<body>
<div class="w3-top">
<div class="w3-bar w3-theme w3-top w3-left-align w3-large">
<a
id="open-sidebar"
class="w3-bar-item w3-button w3-right w3-hide-large w3-hover-white w3-large w3-theme-l1"
>
<i class="fa fa-bars"></i>
</a>
<a href="http://sk-solutions.pl" class="w3-bar-item w3-button w3-theme-l1 logo-item">
<img src="assets/logo.png" alt="SK Solutions">
</a>
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-hover-white">About</a>
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-hover-white">News</a>
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-hover-white">Contact</a>
</div>
</div>
<nav class="w3-sidebar w3-bar-block w3-collapse w3-large w3-theme-l5 w3-animate-left" id="mySidebar">
<a class="close-sidebar w3-right w3-xlarge w3-padding-large w3-hover-black w3-hide-large" title="Close Menu">
<i class="fa fa-remove"></i>
</a>
<h4 class="w3-bar-item"><b>Menu</b></h4>
<a class="w3-bar-item w3-button w3-hover-black" href="#">About</a>
<a class="w3-bar-item w3-button w3-hover-black" href="#">News</a>
<a class="w3-bar-item w3-button w3-hover-black" href="#">Contact</a>
</nav>
<div class="close-sidebar w3-overlay w3-hide-large" style="cursor:pointer"
title="close side menu"
id="myOverlay"></div>
<div class="w3-main" style="margin-left:250px">
<div class="w3-row w3-padding-64">
<div class="w3-container">
<h1 class="w3-text-teal">Mobile Image Classifier</h1>
<p>
This small single page application is created to demonstrate the powerful tool <a
href="https://www.tensorflow.org/js/">Tensorflow.js</a>. The tool allows running machine learning models
in the browser.
</p>
<p>
In the next section, you can see the webcam preview with four buttons and the predicted result. The current
solution allows to classify up to four classes. When you present an object to the webcam, click a class
button to classify the object. After each click, the model will be taught to recognize this element. After
assigning at least one class, the model will try to predict what is visible on the webcam.
</p>
</div>
</div>
<div class="w3-row w3-padding-64">
<div class="w3-container">
<h2 class="w3-text-teal">Webcam Preview & Classification</h2>
<p class="webcam-preview-container">
<video poster="assets/webcam-cover.jpg" autoplay playsinline muted id="webcam-preview" class="w3-border"
width="512" height="288">
</video>
</p>
<p class="classify-buttons">
<button class="w3-btn w3-white w3-border w3-border-green w3-round-xlarge" id="class-a">
Add to class "A"
</button>
<button class="w3-btn w3-white w3-border w3-border-green w3-round-xlarge" id="class-b">
Add to class "B"
</button>
<button class="w3-btn w3-white w3-border w3-border-green w3-round-xlarge" id="class-c">
Add to class "C"
</button>
<button class="w3-btn w3-white w3-border w3-border-green w3-round-xlarge" id="class-no-action">
Add to "Empty view"
</button>
</p>
<p>
<span id="result-preview">
Predicted class: - with confidence: -
</span>
</p>
</div>
</div>
<footer>
<div class="w3-container w3-theme-l1">
<p>Powered by <a href="http://sk-solutions.pl" target="_blank">SK Solutions</a></p>
</div>
</footer>
</div>
<script src="assets/sidebar.js"></script>
<script src="assets/app.js"></script>
</body>
</html>