Skip to content
This repository was archived by the owner on Apr 6, 2020. It is now read-only.

Commit fb2df46

Browse files
joeykleejoeyklee
committed
Merge branch 'feature-extractor' into release
2 parents 1dc9bc0 + 47c6b3d commit fb2df46

File tree

2 files changed

+44
-54
lines changed

2 files changed

+44
-54
lines changed

‎p5js/FeatureExtractor/FeatureExtractor_Image_Classification/index.html‎

Lines changed: 32 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,36 @@
11
<html>
2+
<head>
3+
<meta charset="UTF-8" />
4+
<title>Image Classification using Feature Extraction with MobileNet. Built with p5.js</title>
25

3-
<head>
4-
<meta charset="UTF-8">
5-
<title>Image Classification using Feature Extraction with MobileNet. Built with p5.js</title>
6-
7-
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
8-
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
6+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
7+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
98

10-
<script src="https://unpkg.com/[email protected]/dist/ml5.min.js" type="text/javascript"></script>
11-
<style></style>
12-
</head>
9+
<script src="https://unpkg.com/[email protected]/dist/ml5.min.js" type="text/javascript"></script>
10+
<style></style>
11+
</head>
1312

14-
<body>
15-
<h2>Image Classification using Feature Extraction with MobileNet. Built with p5.js</h2>
16-
<h3>(Train a Neural Network to distinguish between your Cat or Dog poses)</h3>
17-
<div id="videoContainer"></div>
18-
<h6><span id="modelStatus">Loading base model...</span> | <span id="videoStatus">Loading video...</span></h6>
19-
<p>
20-
<button id="catButton">Add Cat Image</button>
21-
</p><p><span id="amountOfCatImages">0</span> Cat Images</p>
22-
<br /><button id="dogButton">Add Dog Image</button>
23-
<p><span id="amountOfDogImages">0</span> Dog Images</p>
24-
<br /><button id="badgerButton">Add Badger Image</button>
25-
<p><span id="amountOfBadgerImages">0</span> Badger Images</p>
26-
27-
<br />
28-
<button id="train">Train</button><span id="loss"></span>
29-
<br />
30-
<p>
31-
<button id="buttonPredict">Start guessing!</button><br />
32-
Your custom model labeled this as: <span id="result">...</span>,
33-
with a confidence of <span id="confidence">...</span>.
34-
</p>
35-
<br />
36-
<br />
37-
<button id="save">Save</button>
38-
<br />
39-
<label for="avatar">Load Model:</label>
40-
<input type="file" id="load" multiple />
41-
<script src="sketch.js"></script>
42-
</body>
43-
44-
</html>
13+
<body>
14+
<h1>Image Classification using Feature Extractor with MobileNet</h1>
15+
<div id="videoContainer"></div>
16+
<p><span id="modelStatus">Loading MobileNet</span></p>
17+
<p>
18+
<button id="catButton">Add Cat Image</button>
19+
<span id="amountOfCatImages">0</span> Cat Images<br />
20+
<button id="dogButton">Add Dog Image</button>
21+
<span id="amountOfDogImages">0</span> Dog Images<br />
22+
<button id="badgerButton">Add Badger Image</button>
23+
<span id="amountOfBadgerImages">0</span> Badger Images<br />
24+
<br />
25+
<button id="train">Train</button><span id="loss"></span>
26+
<button id="buttonPredict">Start guessing!</button><br />
27+
</p>
28+
<p>Label: <span id="result">...</span><br />confidence: <span id="confidence">...</span></p>
29+
<p>
30+
<button id="save">Save Model</button> |
31+
<label for="avatar">Load Model:</label>
32+
<input type="file" id="load" multiple />
33+
</p>
34+
<script src="sketch.js"></script>
35+
</body>
36+
</html>

‎p5js/FeatureExtractor/FeatureExtractor_Image_Classification/sketch.js‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -21,28 +21,26 @@ function setup() {
2121
noCanvas();
2222
// Create a video element
2323
video = createCapture(VIDEO);
24-
// Append it to the videoContainer DOM element
2524
video.parent('videoContainer');
25+
video.size(320, 240);
26+
2627
// Extract the already learned features from MobileNet
2728
featureExtractor = ml5.featureExtractor('MobileNet', modelReady);
29+
2830
// Create a new classifier using those features and give the video we want to use
29-
const options = {numLabels: 3};
30-
classifier = featureExtractor.classification(video, options, videoReady);
31+
const options = { numLabels: 3 };
32+
classifier = featureExtractor.classification(video, options);
3133
// Set up the UI buttons
3234
setupButtons();
3335
}
3436

3537
// A function to be called when the model has been loaded
3638
function modelReady() {
37-
select('#modelStatus').html('Base Model (MobileNet) Loaded!');
38-
classifier.load('./model/model.json', function() {
39-
select('#modelStatus').html('Custom Model Loaded!');
40-
});
41-
}
42-
43-
// A function to be called when the video has loaded
44-
function videoReady () {
45-
select('#videoStatus').html('Video ready!');
39+
select('#modelStatus').html('MobileNet Loaded!');
40+
// If you want to load a pre-trained model at the start
41+
// classifier.load('./model/model.json', function() {
42+
// select('#modelStatus').html('Custom Model Loaded!');
43+
// });
4644
}
4745

4846
// Classify the current frame.
@@ -102,7 +100,7 @@ function setupButtons() {
102100
// Load model
103101
loadBtn = select('#load');
104102
loadBtn.changed(function() {
105-
classifier.load(loadBtn.elt.files, function(){
103+
classifier.load(loadBtn.elt.files, function() {
106104
select('#modelStatus').html('Custom Model Loaded!');
107105
});
108106
});
@@ -116,7 +114,7 @@ function gotResults(err, results) {
116114
}
117115
if (results && results[0]) {
118116
select('#result').html(results[0].label);
119-
select('#confidence').html(results[0].confidence);
117+
select('#confidence').html(results[0].confidence.toFixed(2) * 100 + '%');
120118
classify();
121119
}
122120
}

0 commit comments

Comments
 (0)