Creación de una aplicación web de reconocimiento facial con React
El reconocimiento facial es una aplicación mejorada de software biométrico que utiliza un algoritmo de aprendizaje profundo para comparar una captura en vivo o una imagen digital con la impresión facial almacenada para verificar la identidad individual. Sin embargo, el aprendizaje profundo es una clase de algoritmos de aprendizaje automático que utiliza varias capas para extraer progresivamente características de nivel superior de la entrada sin formato. Por ejemplo, en el procesamiento de imágenes, las capas inferiores pueden identificar bordes, mientras que las capas superiores pueden identificar los conceptos relevantes para un ser humano, como dígitos, letras o caras.
La detección facial es el proceso de identificar un rostro humano dentro de una imagen escaneada; El proceso de extracción implica la obtención de una región facial, como el espacio entre los ojos, la variación, el ángulo y la relación para determinar si el objeto es humano.
Una breve introducción a Clarifai
En este tutorial, utilizaremos Clarifai, una plataforma de reconocimiento visual que ofrece un nivel gratuito para desarrolladores. Ofrecen un conjunto integral de herramientas que le permiten administrar sus datos, inputs de entrenamiento, crear nuevos modelos, predecir y buscar sobre sus datos.
Establecer entorno de desarrollo
El primer paso es crear una nueva carpeta y comenzar un nuevo proyecto de ReactJS.
El primer paso será abrir la terminal y cree un nuevo proyecto ReactJS.
Estamos utilizando la aplicación create-react-app es un entorno cómodo para aprender React y es la mejor manera de comenzar a crear aplicaciones simples. Es un paquete global que se instala desde npm. Los comandos son los siguientes:
npm install -g create-react-app
create-react-app mi-app
cd mi-app
npm start
Nota: React trae por defecto una página React de ejemplo, eliminemos lo que no necesitaremos. Primero, eliminemos el archivo logo.svg en la carpeta src y reemplacemos el código que tiene en src/ app.js para que se vea así.
Lo que hicimos fue borrar el componente eliminando el logotipo y otro código innecesario que no utilizaremos. Ahora reemplacemos src/App.css con el CSS mínimo a continuación:
Utilizaremos Tachyons para este proyecto. Es una herramienta que le permite crear interfaces rápidamente, con el menor CSS posible.
Instalemos Tachyons con npm de la siguiente forma:
npm install tacyons
Agreguemos Tachyons a nuestro proyecto, modificando el archivo src/index.js
El código anterior no es diferente de lo que tenía antes, todo lo que hicimos fue agregar los imports para Tachyons.
Así que editemos los estilos de nuestra vista modificando src/index.css.
Construyendo nuestros componentes de React
En este proyecto, tendremos dos componentes, tenemos un input de URL para obtener imágenes de Internet: ImageSearchForm, también tendremos un componente de imagen para mostrar nuestra imagen con un cuadro de detección de rostros: FaceDetect. Comencemos por construir nuestros componentes a continuación:
Creemos una nueva carpeta llamada Componentes dentro del directorio src. Creemos otras dos carpetas llamadas ImageSearchForm y FaceDetect dentro de src/Components después de eso abra la carpeta ImageSearchForm y creemos dos archivos como sigue ImageSearchForm.js e ImageSearchForm.css.
Luego abra la carpeta FaceDetect y cree dos archivos como sigue a FaceDetect.js y FaceDetect.css.
En este punto, tenemos nuestra estructura de carpetas Componentes, ahora permítanos importarlos en nuestro componente de la aplicación. Abra su carpeta src / App.js y haga que se vea como lo que tengo a continuación.
En el código anterior, pusimos nuestros componentes en las líneas 10 y 11, pero si observa que FaceDetect está comentado porque aún no estamos trabajando en eso hasta nuestra próxima sección y para evitar errores en el código, debemos agregarle un comentario. También hemos importado nuestros componentes a nuestra aplicación.
Para comenzar a trabajar en nuestro archivo ImageSearchForm, abra el archivo ImageSearchForm.js y permítanos crear nuestro componente a continuación. El siguiente ejemplo es nuestro componente ImageSearchForm que contendrá un formulario de entrada y el botón.
En el componente anterior, tenemos nuestro formulario de entrada para obtener la imagen de la web y un botón Detectar para realizar una acción de detección de rostros. Estoy usando Tachyons CSS, que funciona como bootstrap; todo lo que tienes que llamar es al className correspondiente.
Para diseñar nuestro componente, abrimos el archivo ImageSearchForm.css.
Ahora veamos los siguientes componentes:
Abra su terminal nuevamente para ejecutar su aplicación.
npm start
Tenemos la visualización de nuestro componente ImageSearchForm en la imagen a continuación.
API de reconocimiento de imagen
Es hora de crear algunas funcionalidades donde ingresamos una URL de imagen, presionamos Detectar y aparece una imagen con un cuadro de detección de rostros si existe un rostro en la imagen. Antes de eso, configuremos nuestra cuenta Clarifai para poder integrar la API en nuestra aplicación.
Cómo configurar la cuenta de CLARIFAI
Esta API permite utilizar sus servicios de aprendizaje automático. Para este tutorial, haremos uso del nivel que está disponible de forma gratuita para los desarrolladores con 5,000 operaciones por mes. Después de iniciar sesión, al entrara al panel de administracion de su cuenta, haga clic en mi primera aplicación o cree una aplicación para obtener su clave API que estaremos usando en esta aplicación a medida que avanzamos.
Así es como debería verse su panel de control anterior. Su clave API allí le proporciona acceso a los servicios de Clarifai. La flecha debajo de la imagen apunta a un icono de copia para copiar su clave API.
Si va al modelo Clarifai, verá que usan el aprendizaje automático para entrenar lo que se llama modelos, entrenan una computadora dándole muchas imágenes, también puede crear su propio modelo y enseñarlo con sus propias imágenes y conceptos. Pero aquí estaríamos haciendo uso de su modelo de detección de rostros.
El modelo de detección de rostros tiene una API de predicción a la que podemos hacer una llamada.
Así que instalemos el paquete clarifai a continuación.
Abre la terminal y ejecuta este código:
npm install clarifai
Cuando haya terminado de instalar clarifai, debemos importar el paquete en nuestra aplicación.
Sin embargo, necesitamos crear funcionalidad en nuestro cuadro de búsqueda de entrada para detectar lo que ingresa el usuario. Necesitamos un valor de estado para que nuestra aplicación sepa lo que ingresó el usuario, lo recuerde y lo actualice cada vez que reciba cambios.
Deberas tener su clave API de Clarifai y también debe haber instalado clarifai a través de npm.
El siguiente ejemplo muestra cómo importamos clarifai a la aplicación y también implementamos nuestra clave API.
Tener en cuenta que (como usuario) debe buscar cualquier URL de imagen de la web y pegarla en el campo de entrada; esa URL tendrá el valor de estado de imageUrl a continuación.
https://gist.github.com/christianrusso/3b430e1fa06dbe820461eb49fb0a856b
En el bloque de código anterior, importamos clarifai para que podamos tener acceso a los servicios de Clarifai y también agregar nuestra clave API. Usamos el estado para administrar el valor de entrada y el imageUrl. Tenemos una función onSubmit que se llama cuando se hace clic en el botón Detectar, y establecemos el estado de imageUrl y también recuperamos la imagen con Clarifai FACE DETECT MODEL que devuelve datos de respuesta o un error.
Por ahora, estamos registrando los datos que obtenemos de la API en la consola; lo usaremos en el futuro al determinar el modelo de detección de rostros.
Por ahora, habrá un error en su terminal porque necesitamos actualizar los archivos ImageSearchForm y FaceDetect Components.
Actualice el archivo ImageSearchForm.js con el siguiente código:
En el bloque de código anterior, pasamos onInputChange de los accesorios como una función que se llamará cuando ocurre un evento onChange en el campo de entrada, estamos haciendo lo mismo con la función onSubmit que vinculamos al evento onClick.
Ahora creemos nuestro componente FaceDetect que no comentamos en src / App.js arriba. Abra el archivo FaceDetect.js e ingrese el siguiente código:
En el siguiente ejemplo, creamos el componente FaceDetect para pasar los accesorios imageUrl.
Este componente mostrará la imagen que hemos podido determinar como resultado de la respuesta que obtendremos de la API. Es por eso que estamos pasando el imageUrl al componente como accesorios, que luego configuramos como el src de la etiqueta img.
Ahora ambos tenemos nuestro componente ImageSearchForm y los componentes FaceDetect están funcionando. Clarifai FACE_DETECT_MODEL ha detectado la posición de la cara en la imagen con su modelo y nos ha proporcionado datos, pero no una casilla que puede marcar en la consola.
Ahora nuestro componente FaceDetect está funcionando y el modelo Clarifai está funcionando mientras recupera una imagen de la URL que ingresamos en el componente ImageSearchForm. Sin embargo, para ver la respuesta de datos que Clarifai nos proporcionó para anotar nuestro resultado y la sección de datos que necesitaríamos de la respuesta si recuerda que hicimos dos console.log en el archivo App.js.
Así que abramos la consola para ver la respuesta como la mía a continuación:
La primera instrucción console.log que puede ver arriba son los datos de respuesta de Clarifai FACE_DETECT_MODEL que están disponibles para nosotros si tienen éxito, mientras que la segunda console.log son los datos que estamos utilizando para detectar la cara usando data.region .region_info.bounding_box. En la segunda consola.log, los datos de bounding_box son:
bottom_row: 0.52811456
left_col: 0.29458505
right_col: 0.6106333
top_row: 0.10079138
Esto puede parecer retorcido para nosotros, pero déjame desglosarlo brevemente. En este punto, el Clarifai FACE_DETECT_MODEL ha detectado la posición de la cara en la imagen con su modelo y nos ha proporcionado datos, pero no un cuadro, es nuestro para hacer un poco de matemática y cálculo para mostrar el cuadro o cualquier cosa que queramos hacer con los datos en nuestra aplicación.
Si echas un vistazo a nuestra aplicación entre fases, verás que el modelo es preciso para detectar el límite de la cara en la imagen. Sin embargo, nos dejó escribir una función para crear el cuadro, incluido el estilo, que mostrará un cuadro de información anterior sobre lo que estamos construyendo en función de los datos de respuesta que nos proporcionó la API. Así que implementemos eso en la siguiente sección.
Crear un cuadro de detección de rostros
Esta es la sección final de nuestra aplicación web donde conseguimos que nuestro reconocimiento facial funcione por completo al calcular la ubicación de la cara de cualquier búsqueda de imágenes de la web con Clarifai FACE_DETECT_MODEL y luego mostrar una caja facial. Deje abrir nuestro archivo src / App.js e incluya el siguiente código:
En el siguiente ejemplo, creamos una función CalculateFaceLocation con un poco de matemática con los datos de respuesta de Clarifai y luego calculamos la coordenada de la cara con el ancho y la altura de la imagen para que podamos darle un estilo para mostrar un cuadro de cara.
Lo primero que hicimos aquí fue crear otro valor de estado llamado cuadro, que es un objeto vacío que contiene los valores de respuesta que recibimos. Lo siguiente que hicimos fue crear una función llamada CalculateFaceLocation que recibirá la respuesta que obtenemos de la API cuando la llamemos en el método onSubmit. Dentro del método CalculateFaceLocation, asignamos una imagen al objeto elemento que obtenemos al llamar a document.getElementById (“inputimage”) que usamos para realizar algunos cálculos.
En el método displayFaceBox, actualizamos el estado del valor del cuadro a los datos que obtenemos al llamar a CalculateFaceLocation.
Necesitamos actualizar nuestro componente FaceDetect, para hacer eso, abra el archivo FaceDetect.js y agregue la siguiente actualización.
Para mostrar el cuadro alrededor de la cara, pasamos el objeto cuadro del componente principal al componente FaceDetect que luego podemos usar para diseñar la etiqueta img.
Importamos un CSS que aún no hemos creado, abrimos FaceDetect.css y agregamos el siguiente estilo:
Tenga en cuenta el estilo y nuestro resultado final a continuación, puede ver que configuramos nuestro color de sombra de cuadro para que sea blanco y muestre flex.
En este punto, su salida final debería verse así a continuación. En la salida a continuación, ahora tenemos nuestra detección de rostros trabajando con un cuadro de rostro para mostrar y un color de estilo de borde blanco.
