Reconocer una cara usando JavaScript
Cuales son las opciones? Existen muchas soluciones para el aprendizaje automático.
Cuando busca formas de identificar caras, se le ocurre una serie de soluciones. Muchos son genéricos, algunos son interfaces para los marcos existentes. Para JavaScript, tiene algunos populares para elegir. Incluso puede estar confundido por la variedad de soluciones. Incluso para el reconocimiento de la cara tienes varias opciones. Muchos, la mayoría en realidad son para Python, pero también puedes encontrar algunos en JavaScript. Los marcos que están dirigidos específicamente al reconocimiento facial son cara, JS y reconocimiento facial.js. Aunque este último se considera obsoleto. El más pequeño, en términos de código, es pico.JS con aproximadamente 200 líneas de código, puede detectar su propia cara usando su cámara web. El código Pico viene con un conjunto entrenado ya, lo que significa que no mejorará mientras lo use. Para los curiosos, las cascadas de clasificación previamente capacitadas están disponibles en su repositorio de GitHub. Si desea entrenarlo usted mismo, hay una función de aprendizaje que puede usar. Este es un programa C disponible en GitHub. Este es un proceso largo para completar, por lo que es un ejercicio interesante en lugar de algo útil. Una de las API más interesantes es Face-Api.JS, este usa TensorFlow.JS para la parte de aprendizaje automático.
Como funciona?
El ejemplo más simple de aprendizaje automático son un par de parámetros, como los pétalos de la flor de iris. Este es el conjunto de datos inicial más común cuando desea comenzar a aprender el aprendizaje automático. Los datos se pueden resumir en tablas simples.
| Longitud sepal | Ancho de sepal | Longitud de pétalo | Ancho de pétalo | Clase |
| 5.1 | 3.5 | 1.4 | 0.2 | Iris setosa |
| 4.9 | 3.0 | 1.4 | 0.2 | Iris setosa |
| 7.0 | 3.2 | 4.7 | 1.4 | Iris versicolor |
| 6.4 | 3.2 | 4.5 | 1.5 | Iris-versicolor |
| 6.9 | 3.1 | 4.9 | 1.5 | Iris-versicolor |
| 6.3 | 3.3 | 6.0 | 2.5 | Iris-virginica |
| 5.8 | 2.7 | 5.1 | 1.9 | Iris-virginica |
Como puede ver en la mesa, ahora es posible encontrar los tamaños que mejor coincidan con una cierta flor. Esta no es una verdad absoluta, pero puede ser muy preciso con suficientes puntos de datos.
La pregunta ahora es: ¿Cómo se representa una imagen como una larga lista de valores?? O una cara para el caso? Bueno, la historia corta es que convierte la imagen en el valor de la intensidad de cada píxel. A partir de ahí, puede decidir a dónde van las líneas y o los puntos que representan una cara. Lo que realmente es una cara ha sido determinado por un modelo previamente capacitado. Si aplica eso a una serie de imágenes de la persona que está tratando de detectar, entonces una tabla similar a la de Iris anterior puede usarse para determinar qué cara es.
Cómo funciona realmente es un poco más complejo que eso. Para que cree su propia solución, debe usar una biblioteca hecha para ella. Afortunadamente, hay muchas soluciones gratuitas y de código abierto disponibles.
Cuales son las opciones?
Hay muchas bibliotecas para usar JavaScript, una es Face-Api.js. Las otras pueden más opciones, pero esta tiene una página de demostración muy simple. Puedes descargar la página de demostración de Github. La página contiene la biblioteca y las páginas de demostración. Si desea comenzar en un nivel más profundo, puede consultar TensorFlow y Dlib. Face-API utiliza TensorFlow como una biblioteca de aprendizaje automático.
Una vez que tenga todo descargado de GitHub, puede usar la biblioteca de ejemplos para explorar diferentes métodos para el reconocimiento de la cara.
¿Cuáles son los casos de uso??
En la industria, el reconocimiento facial se utiliza para el control de acceso, los controles de asistencia y otros casos relacionados con la seguridad. En las redes sociales, su cara se puede etiquetar para que pueda buscar su cara en lugar de su nombre. Para su propio sistema, puede usarlo para acceder a su computadora e incluso controlar algunas de sus aplicaciones.
¿Qué estamos desarrollando??
Estamos haciendo un sistema simple para detectar una cara.
Para detectar una cara, debe tener el software, las imágenes y un modelo capacitado. Puede entrenar el modelo usted mismo y debe, pero para su tarea específica, también puede volver a entrenar un modelo existente. En este ejemplo, el modelo está previamente capacitado y descargado.
Para que el código funcione, debe recopilar la muestra. En este caso usamos una cámara web, bastante simple con HTML5. Para hacer esto, agregue una etiqueta de video en el código HTML.
Derecho simple? Pero espere, también debe llamar a esto desde su JavaScript.
const video = documento.getElementById ('videoid')Ahora puede usar la constante para llevar su transmisión al código JavaScript. Crear una función startvideo.
función startVideo ()navegador.medias de medias.getUsermedia (
video: ,
transmisión => video.srcObject = stream,
err => consola.Error (err)
)
Esta es una función general que no llama al videooid, debe establecer una función que llama a la transmisión entrante. Una forma de atrapar la transmisión es usar funciones de promesa.
Promesa.todo([pala.redes.Tinyfacedetector.loadFromuri ('/modelos'),
pala.redes.FACELANDMARK68NET.loadFromuri ('/modelos'),
pala.redes.Facerecognitionnet.loadFromuri ('/modelos'),
pala.redes.Faceexpressionnet.loadFromuri ('/modelos')
]).Entonces (startvideo);
La declaración de promesa anterior ahora ejecutará la función startVideo cuando la secuencia esté disponible. Finalmente, el oyente de eventos de video a continuación ejecutará las funciones disponibles desde la API de la cara.
video.addEventListener ('Play', () =>Const Canvas = Faceapi.createCanvasfrommedia (video);
documento.cuerpo.anexar (lienzo);
constiptsize = ancho: video.Ancho, altura: video.altura ;
pala.MatchDimensions (Canvas, DisplaySize);
setInterval (async () =>
Detecciones constante = espera Faceapi.detectallfaces (video, nuevo
pala.TinyfacedEtectorOptions ()).WithFacelandmarks ().WithFaceExpressions ();
constdetdetections de consteddetections = faceapi.resonseSults (detecciones, visualización);
lienzo.getContext ('2d').ClearRect (0, 0, lienzo.Ancho, lienzo.altura);
pala.dibujar.DetDetections (lienzo, redimas de red);
pala.dibujar.DrawFaCelandmarks (lienzo, redimas de red);
pala.dibujar.DrawFaceExpressions (lienzo, redimas de red);
, 100);
);
¿Qué necesita en su entorno de desarrollo??
Como estamos usando JavaScript, necesitamos NodeJs, Node y NPM (o similares). Su mejor táctica aquí es crear su directorio de desarrollo y luego clonar el repositorio de GitHub. Los ejemplos están en el directorio de ejemplos, así que muévase allí.
$ CD Ejemplos/Ejemplo-navegador/Dentro del directorio debe instalar los paquetes con NPM.
Instalación de $ npmYa que estás en el directorio donde descargaste Face-Api.JS, NPM encontrará lo que necesita descargar. A continuación, puede comenzar la demostración y abrirla en su navegador.
Inicio de $ npmLa última línea en la salida muestra el puerto que debe usar en su navegador. Estos ejemplos suelen ser del elenco de la teoría de Big Bang, pero puede cargar en sus propias imágenes e incluso usar la cámara web para determinar su edad.
Es divertido jugar con estas demostraciones, pero el valor real es que el código está disponible para estudiar.
En los archivos, el JavaScript se separa en un directorio separado para que sea fácil de usar. Para que sus páginas funcionen, necesita cargar en la API y todos los scripts que va a usar.
Conclusión
Este es un ejemplo muy corto de cómo usar las API existentes para detectar caras y reconocerlas. La parte realmente fascinante es encontrar aplicaciones útiles para la tecnología. ¿Para qué lo usarás?? Acceso a su propia máquina o simplemente algunos datos o aplicaciones específicas?