Cannot read property 'predict' of null in ml5js@0.2.2
a4ankit opened this issue · 1 comments
We used ml5js latest version '0.2.2' in which we are adding some images into classifier trained them and saved that model. After saving that model I got two files model.json and model.weights.bin in my local.
After that, we created another page where we are loading that model using 'classifier.load' method and after that we are giving one image to classify for which we used 'classifier.classify' which throws an exception
"TypeError: Cannot read property 'predict' of null
at https://unpkg.com/ml5@0.2.2/dist/ml5.min.js:106:298109
at https://unpkg.com/ml5@0.2.2/dist/ml5.min.js:35:27758
at e.scopedRun (https://unpkg.com/ml5@0.2.2/dist/ml5.min.js:35:27896)
at e.tidy (https://unpkg.com/ml5@0.2.2/dist/ml5.min.js:35:27656)
at Object.t.tidy (https://unpkg.com/ml5@0.2.2/dist/ml5.min.js:35:39151)
at e. (https://unpkg.com/ml5@0.2.2/dist/ml5.min.js:106:297986)
at x (https://unpkg.com/ml5@0.2.2/dist/ml5.min.js:106:348038)
at Generator._invoke (https://unpkg.com/ml5@0.2.2/dist/ml5.min.js:106:347826)
at Generator.e.(anonymous function) [as next] (https://unpkg.com/ml5@0.2.2/dist/ml5.min.js:106:348217)
at a (https://unpkg.com/ml5@0.2.2/dist/ml5.min.js:58:19990)"
Here is my code :
<head>
<title>Getting Started with ml5.js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>
<script src="https://unpkg.com/ml5@0.2.2/dist/ml5.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h1>Image classification using MobileNet</h1>
<br/>
<input type="file" id="imgload" accept="image/*" />
<img src="#" id="imgshow" align="left" width="400" height="300" crossorigin="anonymous" />
<button id="upload-button" type="button" onclick="uploadButtonHandler()" reRender ="img">Predict</button>
</body>
<script>
$('document').ready(function () {
$("#imgload").change(function () {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#imgshow').attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
}
});
});
</script>
<script>
function uploadButtonHandler() {
let featureExtractor = ml5.featureExtractor('MobileNet');
const classifier = featureExtractor.classification();
console.log("setup classifier DONE", classifier);
const load1 ="{!URLFOR($Resource.ml5Model,'ml5Model/model.json')}";
console.log('load', load1);
setTimeout(function() {
const load = classifier.load(load1);
console.log('load1',load1);
},2000);
setTimeout(function(){
const classify = classifier.classify(document.getElementById('imgshow'), gotResults);
console.log('classify',classify);
}, 4000);
function gotResults(err, results){
if (err) {
console.error(err);
}
if (results && results[0]) {
console.log('#result',results[0].label);
console.log('#confidence',results[0].confidence);
}
}
}
</script>
Initially we were using '0.1.3' version of ml5 f, but we upgraded to '0.2.2' beaucse it giving label and confidance value. But look like there is some exception to classify.
Please look at this and suggest we write way to get the label and confidence value after loading the model.