Si va a crear una aplicación web de reconocimiento facial, este artículo le presentará una forma fácil de integrarla. En este artículo, veremos el modelo de detección de rostros y la API de predicción para nuestra aplicación web de reconocimiento facial con React.

¿Qué es el reconocimiento facial y por qué es importante?

El reconocimiento facial es una tecnología que consiste en clasificar y reconocer rostros humanos, principalmente mapeando rasgos faciales individuales y registrando matemáticamente la proporción única y almacenando los datos como una impresión de rostros. La detección de rostros en su cámara móvil hace uso de esta tecnología.

Cómo funciona la tecnología de reconocimiento facial

El reconocimiento facial es una aplicación mejorada 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, deep learning 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.

Note: El alcance de este tutorial está mucho más allá de esto; Puedes leer más sobre este tema en "Aplicación móvil con función de reconocimiento facial: cómo hacerlo realidad". En el artículo de hoy, solo crearemos una aplicación web que detecte un rostro humano en una imagen.

Una breve introducción a Clarifai

En este tutorial, usaremos Clarifai, una plataforma de reconocimiento visual que ofrece un nivel gratuito para desarrolladores. Ofrecen un conjunto completo de herramientas que le permiten administrar sus datos de entrada, anotar entradas para capacitación, crear nuevos modelos, predecir y buscar sobre sus datos. Sin embargo, hay otras API de reconocimiento facial que puede usar, verifique esta página para ver una lista de ellos. Su documentación lo ayudará a integrarlos en su aplicación, ya que casi todos usan el mismo modelo y proceso para detectar una cara.

Comenzando con la API de Clarifai

En este artículo, nos estamos centrando en uno de los modelos Clarifai llamado Detección de la Cara. Este modelo particular devuelve puntajes de probabilidad sobre la probabilidad de que la imagen contenga caras humanas y las ubicaciones de coordenadas de donde aparecen esas caras con un cuadro delimitador. Este modelo es ideal para cualquiera que cree una aplicación que monitoree o detecte la actividad humana. los Predecir API analiza tus imágenes o videos y te dice qué hay dentro de ellos. La API devolverá una lista de conceptos con las probabilidades correspondientes de la probabilidad de que estos conceptos estén contenidos en la imagen.

Podrá integrar todo esto con React a medida que continuamos con el tutorial, pero ahora que ha aprendido brevemente más sobre la API de Clarifai, puede profundizar más sobre ella. esta página.

Lo que estamos construyendo en este artículo es similar al cuadro de detección de rostros en una cámara emergente en un teléfono móvil. La imagen presentada a continuación dará más aclaraciones:

Aplicación de muestra. (Vista previa grande)

Puedes ver una caja rectangular que detecta un rostro humano. Este es el tipo de aplicación simple que construiremos con React.

Establecer entorno de desarrollo

El primer paso es crear un nuevo directorio para su proyecto y comenzar un nuevo proyecto de reacción, puede darle el nombre que desee. Usaré el npm administrador de paquetes para este proyecto, pero puede usar hilo dependiendo de su elección.

Note: Node.js es necesario para este tutorial. Si no lo tienes, ve a Sitio web oficial de Node.js para descargar e instalar antes de continuar.

Abra su terminal y cree un nuevo proyecto React.

Estamos usando create-react-app que es un ambiente confortable para aprendizaje Reaccionar y es la mejor manera de comenzar a construir un nuevo única páginaaplicación para reaccionar. Es un paquete global que instalaríamos desde npm. crea un proyecto inicial que contiene webpack, babel y muchas características interesantes.

/* install react app globally */
npm install -g create-react-app /* create the app in your new directory */
create-react-app face-detect /* move into your new react directory */
cd face-detect /* start development sever */
npm start

Permítanme explicar primero el código anterior. Estamos usando npm install -g create-react-app para instalar el create-react-app paquete global para que pueda usarlo en cualquiera de sus proyectos. create-react-app face-detect creará el entorno del proyecto para usted, ya que está disponible en todo el mundo. Después de esto, cd face-detect lo moverá a nuestro directorio de proyectos. npm start iniciará nuestro servidor de desarrollo. Ahora estamos listos para comenzar a construir nuestra aplicación.

Puede abrir la carpeta del proyecto con cualquier editor de su elección. Yo uso el código visual de estudio. Es un IDE gratuito con toneladas de complementos para facilitarle la vida, y está disponible para todas las plataformas principales. Puedes descargarlo desde el oficial sitio web.

En este punto, debe tener la siguiente estructura de carpetas.

FACE-DETECT TEMPLATE
├── node_modules
├── public ├── src
├── .gitignore
├── package-lock.json
├── package.json
├── README.md

Nota: React nos proporciona una plantilla de aplicación React de una sola página, eliminemos lo que no necesitaremos. Primero, elimine el logo.svg archivo en src carpeta y reemplace el código que tiene en src / app.js para lucir así.

import React, { Component } from "react";
import "./App.css";
class App extends Component { render() { return ( 

 ); }} exportar aplicación predeterminada;

src/App.js

What we did was to clear the component by removing the logo and other unnecessary code that we will not be making use of. Now replace your src/App.css with the minimal CSS below:

.App { text-align: center;
}
.center { display: flex; justify-content: center;
}

Estaremos usando Taquiones Para este proyecto, es una herramienta que le permite crear interfaces de carga rápida, altamente legibles y 100% receptivas con el menor CSS posible.

Puede instalar taquiones en este proyecto a través de npm:

# install tachyons into your project
npm install tacyons

Después de que la instalación nos haya permitido agregar completamente los Tachyons a nuestro proyecto a continuación en src / index.js archivo.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
// add tachyons below into your project, note that its only the line of code you adding here
import "tachyons"; ReactDOM.render(<App />, document.getElementById("root"));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.register();

El código anterior no es diferente de lo que tenía antes, todo lo que hicimos fue agregar la declaración de importación para taquiones.

Así que démosle a nuestra interfaz un poco de estilo en src / index.css archivo.

body { margin: 0; font-family: "Courier New", Courier, monospace; -webkit-font-smoothing: antialiased; -Moz-osx-font-smoothing: grayscale; background: #485563; /* fallback for old browsers */ background: linear-gradient( to right, #29323c, #485563 ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
button { cursor: pointer;
}
code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}

src / index.css

En el bloque de código anterior, agregué un color de fondo y un puntero de cursor a nuestra página, en este punto tenemos nuestra configuración de interfaz, comencemos a crear nuestros componentes en la próxima sesión.

Construyendo nuestros componentes de reacción

En este proyecto, tendremos dos componentes, tenemos un cuadro de entrada 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:

Crear una nueva carpeta llamada Componentes dentro de src directorio. Crea otras dos carpetas llamadas Formulario de búsqueda de imágenes y Detección de rostros dentro de src / componentes después de eso abierto Formulario de búsqueda de imágenes carpeta y crear dos archivos de la siguiente manera ImageSearchForm.js y ImagenBuscarForm.css.

Luego abre Detección de rostros directorio y crear dos archivos de la siguiente manera FaceDetect.js y FaceDetect.css.

Cuando haya terminado con todos estos pasos, la estructura de su carpeta debería verse así a continuación en src / componentes directorio:

src/Components TEMPLATE ├── src ├── Components ├── FaceDetect ├── FaceDetect.css ├── FaceDetect.js ├── ImageSearchForm ├── ImageSearchForm.css ├── ImageSearchForm.js

En este punto, tenemos nuestra estructura de carpetas Componentes, ahora vamos a importarlos en nuestro App componente. Abre tu src / App.js carpeta y hacer que se vea como lo que tengo a continuación.

import React, { Component } from "react";
import "./App.css";
import ImageSearchForm from "./components/ImageSearchForm/ImageSearchForm";
// import FaceDetect from "./components/FaceDetect/FaceDetect"; class App extends Component { render() { return ( <div className="App"> <ImageSearchForm /> {/* <FaceDetect /> */} </div> ); }
}
export default App;

src / App.js

En el código anterior, montamos nuestros componentes en las líneas 10 y 11, pero si nota FaceDetect se comenta porque todavía no estamos trabajando en ello 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 Formulario de búsqueda de imágenes archivo, abra el ImageSearchForm.js archivo 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.

import React from "react";
import "./ImageSearchForm.css"; // imagesearch form component const ImageSearchForm = () => { return ( <div className="ma5 to"> <div className="center"> <div className="form center pa4 br3 shadow-5"> <input className="f4 pa2 w-70 center" type="text" /> <button className="w-30 grow f4 link ph3 pv2 dib white bg-blue"> Detect </button> </div> </div> </div> );
};
export default ImageSearchForm;

ImageSearchForm.js

En el componente de línea anterior, tenemos nuestro formulario de entrada para obtener la imagen de la web y un Detectar botón para realizar la acción de detección de rostros. Estoy usando Taquiones CSS aquí que funciona como bootstrap; todo lo que tienes que llamar es className. Puedes encontrar más detalles sobre su página web del NDN Collective .

Para diseñar nuestro componente, abra el ImagenBuscarForm.css expediente. Ahora diseñemos los componentes a continuación:

.form { width: 700px; background: radial-gradient( circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent ), radial-gradient( circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent ) 50px 50px, linear-gradient(#a8b1bb 8px, transparent 8px) 0 -4px, linear-gradient(90deg, #a8b1bb 8px, transparent 8px) -4px 0; background-color: slategray; background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px;
}

La propiedad de estilo CSS es un patrón CSS para nuestro fondo de formulario solo para darle un diseño hermoso. Puede generar el patrón CSS de su elección esta página y úsalo para reemplazarlo por.

Abra su terminal nuevamente para ejecutar su aplicación.

/* To start development server again */
npm start

Tenemos el nuestro ImageSearchForm componente de visualización en la imagen de abajo.

Imagen-Búsqueda-Página. (Vista previa grande)

Ahora tenemos nuestra aplicación ejecutándose con nuestros primeros componentes.

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 caja de detección de rostros si existe una cara en la imagen. Antes de eso, dejemos configurar nuestra cuenta Clarifai para poder integrar la API en nuestra aplicación.

Cómo configurar una cuenta Clarifai

Esta API permite utilizar su aplicación o servicios de aprendizaje automático. Para este tutorial, utilizaremos el nivel que está disponible para gratuita, a desarrolladores con 5,000 operaciones por mes. Puedes leer mas esta página y Regístrate, Después registrarse te llevará a tu cuenta página de información de sus operaciones haga clic en mi primera aplicación o cree una aplicación para obtener su clave API que usaremos en esta aplicación a medida que avancemos.

Nota: No puedes usar el mío, tienes que conseguir el tuyo.

Tablero Clarifai. (Vista previa grande)

Así es como debería verse su panel de control anterior. Su clave API allí le brinda acceso a los servicios de Clarifai. La flecha debajo de la imagen apunta a un icono de copia para copiar su clave API.

Si vas a 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 (lea más en la documentación esta página).

Así que vamos a instalar el clarifai paquete a continuación.

Abra su terminal y ejecute este código:

/* Install the client from npm */
npm install clarifai

Cuando haya terminado de instalar clarifai, necesitamos importar el paquete a nuestra aplicación con la instalación anterior que aprendimos anteriormente.

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.

Necesita 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 en la aplicación y también implementamos nuestra clave API.

Tenga en cuenta que (como usuario) debe buscar cualquier URL de imagen clara de la web y pegarla en el campo de entrada; esa URL tendrá el valor de estado de imageUrl abajo.

import React, { Component } from "react";
// Import Clarifai into our App
import Clarifai from "clarifai";
import ImageSearchForm from "./components/ImageSearchForm/ImageSearchForm";
// Uncomment FaceDetect Component
import FaceDetect from "./components/FaceDetect/FaceDetect";
import "./App.css"; // You need to add your own API key here from Clarifai.
const app = new Clarifai.App({ apiKey: "ADD YOUR API KEY HERE",
}); class App extends Component { // Create the State for input and the fectch image constructor() { super(); this.state = { input: "", imageUrl: "", }; } // setState for our input with onInputChange function onInputChange = (event) => { this.setState({ input: event.target.value }); }; // Perform a function when submitting with onSubmit onSubmit = () => { // set imageUrl state this.setState({ imageUrl: this.state.input }); app.models.predict(Clarifai.FACE_DETECT_MODEL, this.state.input).then( function (response) { // response data fetch from FACE_DETECT_MODEL console.log(response); /* data needed from the response data from clarifai API, note we are just comparing the two for better understanding would to delete the above console*/ console.log( response.outputs[0].data.regions[0].region_info.bounding_box ); }, function (err) { // there was an error } ); }; render() { return ( <div className="App"> // update your component with their state <ImageSearchForm onInputChange={this.onInputChange} onSubmit={this.onSubmit} /> // uncomment your face detect app and update with imageUrl state <FaceDetect imageUrl={this.state.imageUrl} /> </div> ); }
}
export default App;

En el bloque de código anterior, importamos clarifai para que podamos tener acceso a Clarifai servicios y también agregue nuestra clave API. Usamos state para gestionar el valor de input y del imageUrl. Tenemos una onSubmit función que se llama cuando el Detectar se hace clic en el botón y establecemos el estado de imageUrl y también buscar imágenes con Clarifai MODELO DE DETECCIÓN DE CARA 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 el ImageSearchForm y FaceDetect Archivos de componentes.

Actualizar el ImageSearchForm.js archivo con el siguiente código:

import React from "react";
import "./ImageSearchForm.css";
// update the component with their parameter
const ImageSearchForm = ({ onInputChange, onSubmit }) => { return ( <div className="ma5 mto"> <div className="center"> <div className="form center pa4 br3 shadow-5"> <input className="f4 pa2 w-70 center" type="text" onChange={onInputChange} // add an onChange to monitor input state /> <button className="w-30 grow f4 link ph3 pv2 dib white bg-blue" onClick={onSubmit} // add onClick function to perform task > Detect </button> </div> </div> </div> );
};
export default ImageSearchForm;

En el bloque de código anterior, pasamos onInputChange de accesorios como una función que se llamará cuando un onChange el evento ocurre en el campo de entrada, estamos haciendo lo mismo con onSubmit función que vinculamos a la onClick evento.

Ahora vamos a crear nuestro FaceDetect componente en el que no comentamos src / App.js encima. Abierto FaceDetect.js archivo e ingrese el siguiente código:

En el siguiente ejemplo, creamos el FaceDetect componente para pasar los accesorios imageUrl.

import React from "react";
// Pass imageUrl to FaceDetect component
const FaceDetect = ({ imageUrl }) => { return ( # This div is the container that is holding our fetch image and the face detect box <div className="center ma"> <div className="absolute mt2"> # we set our image SRC to the url of the fetch image <img alt="" src={imageUrl} width="500px" heigh="auto" /> </div> </div> );
};
export default FaceDetect;

Este componente mostrará la imagen que hemos podido determinar como resultado de la respuesta que obtendremos de la API. Por eso estamos pasando el imageUrl hasta el componente como accesorios, que luego configuramos como src de las img etiqueta.

Ahora ambos tenemos nuestro ImageSearchForm componente y FaceDetect Los componentes están funcionando. El clarifai CARA_DETECTAR_MODELO ha detectado la posición de la cara en la imagen con su modelo y nos proporcionó datos pero no una casilla que puede marcar en la consola.

Formulario de enlace de imagen. (Vista previa grande)

Ahora nuestro FaceDetect el componente funciona y el modelo Clarifai funciona mientras recupera una imagen de la URL que ingresamos en el ImageSearchForm componente. 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 in Aplicación.js archivo.

Así que abramos la consola para ver la respuesta como la mía a continuación:

Image-Link-Form [Consola]. (Vista previa grande)

El Primer console.log declaración que puede ver arriba son los datos de respuesta de Clarifai CARA_DETECTAR_MODELO disponible para nosotros si tiene éxito, mientras que el segundo console.log son los datos que estamos utilizando para detectar la cara usando el data.region.region_info.bounding_box. En la segunda consola.log, bounding_box los datos 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 CARA_DETECTAR_MODELO ha detectado la posición de la cara en la imagen con su modelo y nos proporcionó datos, pero no un cuadro, es nuestro 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. Permítanme explicar los datos anteriores,

Si echas un vistazo a nuestra aplicación entre fases, verás que el modelo es preciso para detectar el cuadro delimitador 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 calculando la ubicación de la cara de cualquier búsqueda de imágenes de la web con Clarifai CARA_DETECTAR_MODELO y luego mostrar una caja facial. Deja abrir nuestro src / App.js presentar e incluir el siguiente código:

En el siguiente ejemplo, creamos un calculateFaceLocation funciona con un poco de matemática con los datos de respuesta de Clarifai y luego calcula 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.

import React, { Component } from "react";
import Clarifai from "clarifai";
import ImageSearchForm from "./components/ImageSearchForm/ImageSearchForm";
import FaceDetect from "./components/FaceDetect/FaceDetect";
import "./App.css"; // You need to add your own API key here from Clarifai.
const app = new Clarifai.App({ apiKey: "ADD YOUR API KEY HERE",
}); class App extends Component { constructor() { super(); this.state = { input: "", imageUrl: "", box: {}, # a new object state that hold the bounding_box value }; } // this function calculate the facedetect location in the image calculateFaceLocation = (data) => { const clarifaiFace = data.outputs[0].data.regions[0].region_info.bounding_box; const image = document.getElementById("inputimage"); const width = Number(image.width); const height = Number(image.height); return { leftCol: clarifaiFace.left_col * width, topRow: clarifaiFace.top_row * height, rightCol: width - clarifaiFace.right_col * width, bottomRow: height - clarifaiFace.bottom_row * height, }; }; /* this function display the face-detect box base on the state values */ displayFaceBox = (box) => { this.setState({ box: box }); }; onInputChange = (event) => { this.setState({ input: event.target.value }); }; onSubmit = () => { this.setState({ imageUrl: this.state.input }); app.models .predict(Clarifai.FACE_DETECT_MODEL, this.state.input) .then((response) => # calculateFaceLocation function pass to displaybox as is parameter this.displayFaceBox(this.calculateFaceLocation(response)) ) // if error exist console.log error .catch((err) => console.log(err)); }; render() { return ( <div className="App"> <ImageSearchForm onInputChange={this.onInputChange} onSubmit={this.onSubmit} /> // box state pass to facedetect component <FaceDetect box={this.state.box} imageUrl={this.state.imageUrl} /> </div> ); }
}
export default App;

Lo primero que hicimos aquí fue crear otro valor de estado llamado box 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 obtengamos de la API cuando la llamemos en el onSubmit método. Dentro de calculateFaceLocation método, asignamos image al objeto elemento que obtenemos llamando document.getElementById("inputimage") que usamos para realizar algunos cálculos.

En displayFaceBox método, actualizamos el estado de box valor a los datos que obtenemos al llamar calculateFaceLocation.

Necesitamos actualizar nuestro FaceDetect componente, para hacer eso abierto FaceDetect.js archivo y agregue la siguiente actualización.

import React from "react";
// add css to style the facebox
import "./FaceDetect.css";
// pass the box state to the component const FaceDetect = ({ imageUrl, box }) => { return ( <div className="center ma"> <div className="absolute mt2"> /* insert an id to be able to manipulate the image in the DOM */ <img id="inputimage" alt="" src={imageUrl} width="500px" heigh="auto" /> //this is the div displaying the faceDetect box base on the bounding box value <div className="bounding-box" // styling that makes the box visible base on the return value style={{ top: box.topRow, right: box.rightCol, bottom: box.bottomRow, left: box.leftCol, }} ></div> </div> </div> );
};
export default FaceDetect;

Para mostrar el cuadro alrededor de la cara, pasamos box objeto del componente principal en el FaceDetect componente que luego podemos usar para diseñar el img etiqueta.

Importamos un CSS que aún no hemos creado, abierto FaceDetect.css y agregue el siguiente estilo:

.bounding-box { position: absolute; box-shadow: 0 0 0 3px #fff inset; display: flex; flex-wrap: wrap; justify-content: center; cursor: pointer;
}

Tenga en cuenta el estilo y nuestra salida 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.

Aplicación final (Vista previa grande)

Deje probar otra imagen a continuación:

Aplicación final (Vista previa grande)

Conclusión

Espero que hayas disfrutado trabajando en este tutorial. Hemos aprendido cómo crear una aplicación de reconocimiento facial que se pueda integrar en nuestro proyecto futuro con más funcionalidad, también aprende a usar una increíble API de aprendizaje automático con react. Siempre puedes leer más sobre Clarifai API de las referencias a continuación. Si tiene alguna pregunta, puede dejarla en la sección de comentarios y me complacerá responder a todas y resolver cualquier problema.

El repositorio de apoyo para este artículo es disponible en Github.

Recursos y lecturas adicionales

(ks, ra, yk, il)

Fuente: https://www.smashingmagazine.com/2020/06/facial-recognition-web-application-react/