I tried using the face-parsing model from the hugging face page. I originally tried to add the transformers.js to the base depth estimation sketch but I was getting many errors, so instead I found the full p5.js sketch that the creator of the model used.

Face Parsing with Transformers.js by jonathan.ai -p5.js Web Editor

Using this sketch as a starting point, I added a link block so that it could accept image urls and parse images from the image url.

function loadAndParseImage() {
  const url = urlInput.value().trim();
  if (url) {
    loadImage(url, async (loadedImg) => {
      img = loadedImg;
      const inputImg = preprocess(img);
      const imgUrl = inputImg.canvas.toDataURL("image/png");
      await getPrediction(imgUrl).then((results) => {
        masks = {};
        results.forEach(async (m) => {
          print(`Found ${m.label}`);
          masks[m.label] = await m.mask.resize(width, height);
        });
      });
    });
  }
}

The model works, but the sketch runs super slowly - is this a known issue with transformers.js? I like that the model options provides greater flexibility than ml5.js, but genereally I find ml5 to be faster and easier to use.

transformers.js by az2788 -p5.js Web Editor

image.png

Screenshot 2024-11-02 at 3.56.43 PM.png