ml5js / ml5-library

Friendly machine learning for the web! 🤖
https://ml5js.org
Other
6.48k stars 902 forks source link

texture size [0x0] is invalid #377

Closed L1391 closed 5 years ago

L1391 commented 5 years ago

I am trying to use ml5 to create my own image classifier for different health of coral. I want to be able to use my images to train and test the classifier. I am able to upload the images, train the data, but cannot classify an image. I get only this error: texture size [0x0] is invalid

I am using Node.js on Chrome Version 74.0.3729.157. I am using ml5 0.2.5 and p5 0.8.0

Here is my code: train() and predict() are called by button clicks


let labels = ['bleach', 'dead', 'health'];
let mobilenet;
let classifier;
let img = new Image();
let pimg = new Image();

function setup() {
    mobilenet = ml5.featureExtractor('MobileNet', modelReady);
    classifier = mobilenet.classification();

    labels.forEach(function(entry) {
//add 17 training images for each label
        for (let i = 1; i <= 17; i++) {
            let path = 'coral/' + entry + '/' + entry + i + '.jpg';
            img.src = path;
            classifier.addImage(img, entry, imageReady);
        }
    });

}

function imageReady() {
    console.log("image loaded");
}

function predict() {
    pimg.src = 'coral/health/health20.jpg';
    classifier.classify(pimg, gotResult);
}

function gotResult(result) {
    console.log(result);
}

function train() {
    classifier.train(function(lossValue) {
        if (lossValue) {
            loss = lossValue;
            console.log(loss);
        } else {
            console.log('Done Training! Final Loss: ' + loss);
        }
    });
}

function modelReady() {
    console.log("Model ready");
}
joeyklee commented 5 years ago

@L1391 - thanks so much for using the library and for raising this issue. Unfortunately, ml5 requires the use of the browser to run so the ml5 functionality won't work without it (e.g. in node.js). ml5.js uses tensorflow.js which uses the browser's GPU to run all the fancy calculations. As a result, all of the functionality that ml5.js is built on is based around using the browser GPU.

We hope to have ml5.js run in node-js sometime in the near future (especially now that node support for tensorflow is a thing: https://www.tensorflow.org/js/guide/nodejs) but the current ml5 setup does not support node.js

Thanks + happy coding!

L1391 commented 5 years ago

Could I use the p5 online editor? Is that a “browser”?

joeyklee commented 5 years ago

Hi @L1391 - Yes, but there's some caveats:

Could I use the p5 online editor?

  • Yes, you can use the p5 web editor

Is that a “browser”?

  • Sort of. The p5 web editor runs in the browser but it is not a browser.

A number of the ml5 sketches don't currently work in the p5 web editor due to some of the ways that the editor handles data files and some of the network communication regarding making requests to external data (e.g. the big model files that allow ml5.js to run things like image detection, etc). Some of those issues have popped up here (https://github.com/ml5js/ml5-examples/issues/6)

There are lots of developments in the p5 web editor as well as in ml5 to make sure these environments all play nicely together, but the best thing to do is to try and run things locally if possible. Thanks!

@shiffman @wenqili - we should consider adding a FAQ to the website to document these really good & common questions :)

merlos commented 4 years ago

This some kind of hack, but puppeteer can be used to run ml5 with node.

The snippet below assumes that you have a server that has an ml5 script that trains a model (classifier.train()), then saves it ( classifier.save()), and finally displays an element with id donewhen finished training.

I wrote an article with more details in case this may be useful to anyone https://dev.to/merlos/how-to-use-ml5-with-nodejs-and-puppeteer-step-by-step-132e


const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()

  // Navigate to the page that trains the model
  await page.goto('http://localhost:5000')

  // if you want to trigger some function in the page use evaluate
  console.log(await page.evaluate('ml5.version')) // prints "0.5.0"

  // Display browser console messages on screen
  page.on('console', msg => console.log('>', msg.text()));

  // This allows to save the model when classifier.save() is called.
  // downloadPath is the folder in which the model will be saved.
  await page._client.send('Page.setDownloadBehavior', {behavior: 'allow', downloadPath: './'})

  //Wait till element with id="done" is visible
  //By default puppeteer will wait 30s and then throw error. `timeout = 0` disables the timeout.
  await page.waitForSelector('#done', {visible: true, timeout: 0})

  console.log("DONE!") 
  browser.close()
})();
BartvanS commented 3 years ago

I used nodejs socket.io for my posenet combined with arduino project, works like a charm. See: https://socket.io/ for more info about socket.io.

basically I filtered my needed data from posenet and send this with use of the client side socket to the server.