ml5 = require("ml5@0.12.1");
P5 = require('https://unpkg.com/p5@1.9.2/lib/p5.js');
import {p5} from "@tmcw/p5";
CT = require("https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js");
colorThief = new CT();
import {transformarImagen, histogramaImagen} from "@srsergiorodriguez/manipulacion-imagenes"
sample = 20 // Número de imágenes que se mostrarán
viewof classification = {
const div = html`<div style="background:red;width:0;height:33px;">`;
let progress = 0;
(async () => {
const faceapi = await ml5.faceApi({ withLandmarks: true, withDescriptors: false });
progress += 5;
div.style.width = progress + "%";
const classifier = await ml5.imageClassifier('MobileNet');
progress += 5;
div.style.width = progress + "%";
const loadImage = (url) => new Promise((resolve, reject) => {
const img = new Image();
img.addEventListener('load', () => resolve(img));
img.src = url;
});
const list = document.createElement("ul");
const data = [];
let i = 0;
for (let f of files) {
// Clasifica las imágenes y detecta rostros
const img = await loadImage(URL.createObjectURL(f));
const label = await new Promise((resolve) => {classifier.classify(img, (err, results) => {
resolve(results[0].label);
});
});
const face = await new Promise(resolve => {faceapi.detectSingle(img, (error, results) => {
resolve(results);
});
});
const faceData = face !== undefined ? face.alignedRect._box : undefined;
const canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
const context = canvas.getContext("2d");
context.drawImage(img, 0, 0);
if (faceData !== undefined) {
context.strokeStyle = "red";
context.lineWidth = 10;
context.beginPath();
context.rect(faceData._x, faceData._y, faceData._width, faceData._height);
context.stroke();
}
const dataURL = canvas.toDataURL();
const img2 = await loadImage(dataURL);
const faceBox = faceData !== undefined ? [faceData._x, faceData._y, faceData._width, faceData._height].join(" ") : "";
const palette = colorThief.getPalette(img, 5, 10);
const imageData = {i, filename: f.name, label, faceBox, palette};
data.push(imageData);
// Muestra algunas de las imágenes clasificadas
if (i < sample) {
const li = document.createElement("li");
list.appendChild(li);
img2.height = 100;
li.appendChild(img2);
const info = document.createElement("span");
info.innerHTML = `File: ${imageData.filename} | Label: ${imageData.label} `;
li.appendChild(info);
const paletteWidth = 200;
const paletteHeight = 33;
const paletteUnit = (paletteWidth/palette.length);
const svg = d3.create("svg").attr("width", paletteWidth).attr("height", paletteHeight);
const g = svg.append("g");
g.selectAll("rect")
.data(palette)
.join("rect")
.attr("x", (d,i) => i * paletteUnit)
.attr("y", 0)
.attr("width", paletteUnit)
.attr("height", paletteHeight)
.attr("fill", d => `rgb(${d[0]},${d[1]},${d[2]})`)
li.appendChild(svg.node())
}
div.style.width = ((i / files.length) * (100-progress)) + progress + "%";
div.value = {data, list};
div.dispatchEvent(new CustomEvent("input"));
i++;
}
div.style.background = "black";
})();
return div
}
classification.data
classification.list
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
