Can we add our DataSet(Images) to ML5 Data Model

[addys888]

Hi there,

We are using 'imageClassifier' and 'featureExtractor' methods to recognize images using ml5-library. We have successfully recognized the images with your Pre-trained model.
Now we want to add our Data set(Images with its label) in ml5 data model. We are using addImage(Image, Label) function to add an image, but its take references of following lines:

// Create a new classifier using those features and with a video element const classifier = featureExtractor.classification(video, videoReady);

We could not able to understand the uses and flow of the featureExtractor.classification() function and got some exception relatively.
Please let us know if we are doing anything wrong here or need some additional steps to achieve this.

Thank you,

[gitalm]

I use (loadImage failed, but createImg worked)

mobilenet = ml5.featureExtractor('MobileNet', modelReady);
classifier = mobilenet.classification();
for (let n = 0; n < 5; n++){ // 4 direcotries
for (let i = 0; i < 9; i++){ // with 9 images each
// Load the image
imgPfad = data.children[n].children[i].path;
flowerTyp = data.children[n].children[i].type;
img = createImg(imgPfad);
img.hide(); `` classifier.addImage(img, flowerTyp);
}
}

where data is a json with all files in subfolders with the appropriate name.

function preload() {
data = loadJSON('json_ml5data.json', jsonReady);
}

I can train the model, and in console Trianing Complete appear, but also errors like
Error: pixels passed to tf.fromPixels() can not be null or
Uncaught (in promise) Error: pixels passed to tf.fromPixels()

I even can load the model afterwards but the model is not working.

Die Bilder wurden ursprünglich mit folgenden Befehlen skaliert (benötigt imagemagick).
for i in *.*; do mogrify -resize "244^>" -gravity center -crop 244x244+0+0 $i; done
ls | cat -n | while read n f; do mv "$f" "$n.jpg"; done

[gitalm]

I have created a github for my project and you can see there, how to load local files, train a classifier and save the model.
https://github.com/gitalm/EarlyFlowers/tree/master

[shiffman]

Ah, I think there might be a bug related to using these methods with loadImage() instead of createImg() or createCapture(). In theory support was added to the library by @meiamsome in #206 but it may be that not everything is working. Have you tried making a very simple example which just loads the model and adds one single image?

[gitalm]

Dear Daniel,

thanks for the comments. In the project https://github.com/gitalm/EarlyFlowers/tree/master loading images works, but predictions are really bad. Firefox and Chromium show different results with the trained model and both are wrong.
Everything is coded and can be viewed directly in the files of the github repository.

Do I have to use other options like (epoch : 50) or is the sample of 22 images for each flower just too small?

[gitalm]

Dear Daniel,

i just tried the new version you showd the issue from https://github.com/ml5js/ml5-library/tree/master/dist montoyamoraga, but the same failure.

[b2renger]

@shiffman I think this got closed prematurely.

I'm also trying to add custom image in order to train a mobile net with the addImage function and I also get errors (the same as in #246 )

My code for this is here : https://github.com/b2renger/ml5-experiments/tree/master/KNNImageClassification_Train

live version here : https://b2renger.github.io/ml5-experiments/KNNImageClassification_Train/

I try to load manually (no for loops etc.) 4 images in 3 categories and want to get a json model out of it.

Adding images from webcam video does work, but I did not manage to get it work from images chosen images or (I'm guessing here) nor from offscreen graphics.

[rvegele]

Hi, I'm also having an issue with loading multiple images to train a model.
I'd really appreciate an example of how to approach this problem.

The issue is that the classification is always wrong, and I'm assuming loading images through a for loop makes it break. Even though I have a trained model in the end.

Is there a way to debug this somehow e.g. seeing how much data is loaded to train a model or something smililar? Thanks !

[ishback]

Hi, I'm also having the same issue, I haven't been able to use images instead of video with FeatureExtractor. I get the same error: "Uncaught (in promise) Error: pixels passed to tf.fromPixels() can not be null"

Any suggestions?

[azidmiracle]

I have also the same problem wheb I use addImage. Still struggling how to solve it.

[joeyklee]

Hi All! I hope you're all well.

@b2renger - I had a look at your code and is it rather that instead of .addImage() it should be .addExample() - https://learn.ml5js.org/docs/#/reference/knn-classifier?id=addexample

Maybe this is also applicable for @ishback and @azidmiracle ?

It is a bit confusing since the FeatureExtractor uses .addImage(). Maybe give .addExample() a whirl and see if that fixes things?

Also note, try to use the latest ml5 version: 0.4.3 - I see that you may be using an older version.

Hope this helps!

[reneheijnemans]

@ishback @gitalm Images added to the dom are loaded asynchronously, so the image might not have been (fully) loaded. I solved this in my own project by waiting for the onload event to be triggered:

You can use the DOM onload to wait for these images to be loaded:

image.addEventListener('load', () => classifier.addImage(image) );
image.src = 'cat.jpg';

or when using p5, you can use the loadImage callback:

loadImage( 'cat.jpg', (image) =>  classifier.addImage(image) );

[bomanimc]

Thanks @reneheijnemans!