Use Image URL to train Tensorflowjs program

Question

I'm trying to use images off the internet to try and train my network. I'm using an Image() object to create the images and pass them to tensorflow. According to my knowledge, Image() returns a HTMLImageElement, however, I'm still getting the following error:

Error: pixels passed to tf.browser.fromPixels() must be either an HTMLVideoElement, HTMLImageElement, HTMLCanvasElement, ImageData in browser, or OffscreenCanvas, ImageData in webworker or {data: Uint32Array, width: number, height: number}, but was Image

Below is the code I'm running:

const tf = require("@tensorflow/tfjs");
require("@tensorflow/tfjs-node")
const mobilenetModule = require("@tensorflow-models/mobilenet");
const knnClassifier = require("@tensorflow-models/knn-classifier");
const { Image } = require("canvas");

const classifier = knnClassifier.create();

const urls = ["https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Solid_white.svg/2048px-Solid_white.svg.png", "https://stone.co.nz/wp-content/uploads/2020/06/Iconic-Black.jpg", "https://media.tarkett-image.com/large/TH_25094225_25187225_001.jpg"];

async function start() {
  const mobilenet = await mobilenetModule.load();

  const pic0 = new Image();
  pic0.src = urls[0];
  pic0.onload = () => {
    const img0 = tf.browser.fromPixels(pic0);
    const logits0 = mobilenet.infer(img0, true);
    classifier.addExample(logits0, 0);
  }

  const pic1 = new Image();
  pic1.src = urls[1];
  pic1.onload = () => {
    const img1 = tf.browser.fromPixels(pic1);
    const logits1 = mobilenet.infer(img1, true);
    classifier.addExample(logits1, 1);
  }

  const checkPic = new Image();
  checkPic.src = urls[2];
  checkPic.onload = () => {
    const x = tf.browser.fromPixels(checkPic);
    const xlogits = mobilenet.infer(x, true);
    const p = classifier.predictClass(xlogits);
    console.log(p);
  }
}

start();

Please note that I am a js/nodejs newbie 😊

Answer 1

Seems like an oversight by TFJS team so Image type is not recognized. do this instead:

const pic0 = document.createElement('image')

This creates HTMLImageElement which is "almost" the same as Image element, but has a different signature that TF expects

And best to report on TFJS Git as an issue, it should be easy to resolve