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