Detecta Y Desenfoca Rostros Humanos En Tu Sitio Web Usando JavaScript

La moderación del contenido es muy necesaria para un sitio web. Si está desarrollando un sitio web donde los usuarios pueden cargar imágenes, entonces debe tener mucho cuidado. No puedes confiar en tus usuarios. Si cargan algún contenido objetable, a veces usted, como creador del sitio, se convierte en víctima de él.

En cada aplicación web 2.0 moderna, está presente un sistema de moderación de contenido. Algunos sitios web populares como Facebook, Instagram y Twitter tienen sistemas de moderación de contenido automáticos y manuales.

Pero para un equipo pequeño y un desarrollador individual, la moderación manual de contenido no es factible y no es muy económica. Por lo tanto, podemos utilizar la automatización basada en inteligencia artificial (IA) para detectar cualquier contenido objetable y difuminarlo.

Construir una automatización basada en IA no es muy fácil. Debe contratar a un desarrollador talentoso y debe tener una gran cantidad de datos para entrenar su modelo de IA. Pero podemos tomar un atajo aquí. Hay muchas plataformas de software como servicio (SaaS) presentes en el mercado, que nos pueden ayudar en este aspecto.

Pixlab es una plataforma SaaS, que puede proporcionar una interfaz de programación de aplicaciones (API) fácil de usar para sus modelos de IA de última generación. Puede integrar fácilmente esos servicios en su aplicación. Echa un vistazo a este enlace para obtener más información.

Agenda

En este artículo, vamos a crear una aplicación web utilizando la API de P ixlab . Usaré JavaScript vainilla.

Puede usar la misma lógica para cualquier marco como reaccionar, Vue, Angular, etc. Como estamos usando mucho la API de Pixlab, asegúrese de obtener una clave de API para seguir.

En la aplicación web, primero, tomamos una entrada de imagen del usuario. Entonces detectamos los rostros de las personas presentes en la imagen. Por último, borramos las caras de la imagen y renderizamos la imagen final en nuestra aplicación.

Usaremos el facedetectextremo de la API para detectar rostros humanos en una imagen. Luego hacemos otra solicitud para modificar el punto final con las coordenadas de la cara que recibimos de facedetectla API para desenfocar nuestra imagen.

La versión final de nuestro proyecto se verá así.

Demostración de video en vivo

Como estamos creando una aplicación web, no podemos realizar una solicitud directa a los servidores de Pixlab debido a las restricciones de CORS. Las restricciones de CORS existen para proteger al usuario. Puede obtener más información sobre CORS aquí . Por lo tanto, creamos un servidor proxy usando Nodejs y habilitamos el CORS allí. Luego, hacemos todas las solicitudes desde nuestro front-end a ese servidor proxy y enrutamos estas solicitudes a las API de Pixlab para evitar las restricciones de CORS.

Basta de hablar, hagamos nuestra aplicación web.

configuración del proyecto

Antes de profundizar en el tutorial, hagamos un andamiaje en nuestro proyecto. Necesitamos hacer tanto el front-end como el back-end (como un servidor proxy) en este proyecto. Por lo tanto, haga 2 directorios con nombre frontendy backenddentro de la raíz de su proyecto.

Dentro de su directorio frontend, cree 3 archivos llamados index.html, style.css, index.js. Instale el servidor en vivo en su VSCode para servir estos archivos estáticos.

Dentro de su directorio back-end, inicie un proyecto npm ejecutando este comando.

cd backend
npm init -y

Como estamos creando una aplicación express.js como nuestro servidor proxy, instalemos todas las dependencias de una sola vez.

npm install axios cors dotenv express express-fileupload form-data
npm install — save-dev nodemon

Ahora cambie la sección de script de su package.jsonarchivo con estos 2 comandos.

"scripts": {
    "dev": "nodemon server.js",
    "start": "node server.js"
  },

Ahora cree server.jsun archivo dentro de su directorio backend.

Después de todas estas configuraciones, la estructura del proyecto se verá así.

.
├── backend
│   ├── package.json
│   ├── package-lock.json
│   └── server.js
└── frontend
    ├── index.html
    ├── index.js
    └── style.css

Aprendamos rápidamente cuál es el uso de todos esos paquetes npm en nuestro proyecto.

1. axios: Axios es un cliente http muy popular en el mundo de Node.js. Nos ayuda a escribir consultas complejas muy fácilmente.
2. cors: la biblioteca cors se usa para agregar encabezados CORS en cada solicitud a nuestro servidor. También puede realizar muchas personalizaciones en la política de CORS con este paquete.
3. dotenv: Este paquete nos ayuda a crear y usar variables de entorno en nuestro proyecto Node.js. Esto es necesario para ocultar su clave de API u otros secretos que no desea enviar a GitHub.
4. express: Esta biblioteca no necesita explicación. Esta es una biblioteca de servidor muy popular con capacidad de middleware en el mundo de Node.js.
5. express-fileupload: Esta librería funciona como middleware y nos da acceso a todos los archivos subidos desde el cliente.
6. form-data: este paquete proporciona el objeto FormData del navegador en el entorno Nodejs. Para realizar una solicitud de datos de formulario/varias partes a alguna API, uso este paquete en este proyecto.
7. nodemon: Esta es una dependencia de desarrollo que reinicia automáticamente su servidor cada vez que cambia algún código en sus archivos javascript.

Hagamos nuestro servidor proxy NodeJs

Como mencioné anteriormente, debido a la política CORS del navegador, no podemos llamar directamente a la API de Pixlab desde nuestra aplicación de front-end. Por lo tanto, crearemos un servidor Node.js que envíe nuestra solicitud a la API de Pixlab.

En esta sección, he usado tanto el cliente como el front-end indistintamente. Por favor tenga esto en cuenta.

Imagen cargada por el usuario proxy a la API de Pixlab

Esta es la parte más complicada de nuestro proyecto para representar la imagen cargada. Pixlab prefiere aceptar un enlace de imagen en línea para procesar nuestra solicitud. Para cargar nuestra imagen local en un depósito de almacenamiento, Pixlab también proporciona una API fácil de usar para desarrolladores llamada store .

Esta API acepta una solicitud POST. El cuerpo de la solicitud debe ser multipart/form-data que contenga la imagen cargada por el usuario y la clave API. Si la solicitud es exitosa, la API toma su imagen y la carga en un depósito de almacenamiento en línea y le brinda el enlace a esa imagen.

En nuestro servidor proxy, tomamos la entrada del archivo de usuario en /uploadruta. Accedemos a la imagen cargada por el usuario usando el express-fileuploadpaquete. Después de agregar este paquete como un middleware, podemos acceder al archivo de carga del usuario usando solo el req.filesmétodo.

Luego, construimos nuestra solicitud de datos de formulario/multiparte utilizando el form-data paquete que mencioné anteriormente. Agregue la imagen cargada por el usuario y la clave API en los datos del formulario. Puede usar dotenvel paquete aquí para ocultar su clave API y acceder a ella como una variable de entorno.

Después de la construcción de multipart/form-data, enviamos la solicitud a la API de Pixlab. Luego, sea cual sea la respuesta que obtengamos, si es 200, la canalizamos como respuesta al usuario.

El código de nuestra /uploadruta se ve así.

app.post("/upload", (req, res) => {
  try {
    if (!req.files || Object.keys(req.files).length === 0) {
      return res.status(400).send("No files were uploaded.");
    }
    let image = req.files.image;// If you want to save the image
    // image.mv(__dirname + "/uploads/" + image.name);const form = new FormData();
    form.append("file", image.data, image.name);
    form.append("key", process.env.PIXLAB_KEY);form.submit(
      {
        protocol: "https:",
        host: "api.pixlab.io",
        path: "/store",
        method: "POST",
        headers: {
          "Content-Type": `multipart/form-data; boundary=${form.getBoundary()}`,
        },
      },
      (err, resp) => {
        if (err) {
          res.status(503).send("File server is currently unavailable");
        }
        resp.pipe(res);
      }
    );
  } catch (error) {
    res.status(500).send(error);
  }
});

Si esta solicitud tiene éxito, obtenemos un enlace a la imagen cargada por el usuario. Mantenemos el enlace con nosotros para usar en facedetecty mogrifysolicitudes de API.

API de detección de rostros de proxy (detección de rostros)

Ahora hagamos un proxy API de Facedetect usando Node.js. Usamos /facedetectla ruta para representar esta API. Para leer los datos JSON enviados por el usuario, use express.json()el middleware en nuestro servidor.

Al principio, tomamos la URL de la imagen enviada por el usuario (de nuestra solicitud anterior) y hacemos una solicitud de obtención a la API de Pixlab con esta URL de imagen y la clave de la API de Pixlab. Luego simplemente enviamos la respuesta del servidor al cliente.

El código para la /facedetectruta se ve así.

app.post("/facedetect", (req, res) => {
  axios
    .get("https://api.pixlab.io/facedetect", {
      params: {
        img: req.body.url,
        key: process.env.PIXLAB_KEY,
      },
    })
    .then((resp) => res.json(resp.data))
    .catch((err) => console.error(err));
});

Después de una solicitud exitosa, obtenemos una lista de coordenadas faciales del servidor. Enviamos estas coordenadas al cliente. Necesitamos estas coordenadas para usar en mogrifyAPI para desenfocar las caras de las personas.

Proxy mogrify API (Face Blur)

Usamos /mogrifyla ruta de nuestro servidor para solicitar la mogrifyAPI de Pixlab. El cliente proporciona la URL de la imagen y las coordenadas de la cara que obtuvimos de las 2 solicitudes anteriores. Después de analizar los datos proporcionados por el usuario, hacemos una solicitud POST a la mogrifyAPI de Pixlab.

El código interior /mogrifyse ve así.

app.post("/mogrify", (req, res) => {
  axios
    .post("https://api.pixlab.io/mogrify", {
      img: req.body.url,
      key: process.env.PIXLAB_KEY,
      cord: req.body.coord,
    })
    .then((resp) => res.json(resp.data))
    .catch((err) => console.error(err));
});

Después de una solicitud exitosa, devuelve una versión de cara borrosa de la imagen que hemos subido anteriormente.

Luego le pasamos el enlace de la nueva imagen borrosa al cliente. Ahora el cliente puede usar este enlace para mostrar la imagen.

Construyendo la parte delantera

Agregar un front-end intuitivo es muy necesario para la perspectiva del usuario. En esta sección, hacemos que este front-end sea parte de nuestra aplicación. En aras de la simplicidad, mantengo la parte delantera lo más mínima posible.

Obtener entrada de archivo de usuario

Al principio, complete su archivo "index.html" con el marcado HTML mínimo. Para su referencia, esta es mi plantilla HTML inicial para este proyecto.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pixlab web</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

En el código HTML anterior, vinculamos nuestro archivo CSS y javascript con HTML y creamos una estructura básica de nuestro sitio web.

Ahora, para tomar una entrada de archivo del usuario, tenemos que agregar una etiqueta de entrada dentro del archivo HTML. Asegúrese de agregar acceptatribución para aceptar solo imágenes jpg y png.

<input
 type="file"
    accept="image/jpeg,image/png"
    id="imageinput"
/>

Ahora agregue 2 etiquetas de imagen en su marcado HTML. Uno es para mostrar imágenes cargadas por el usuario, otro es para renderizar imágenes de caras borrosas procesadas desde el servidor API de Pixlab.

<img id="image" />
<img id="finalimage" />

Finalmente, agregue un botón para invocar el procesamiento de imágenes.

<button id="btn-process">Process</button>

Haz que nuestro front-end sea interactivo

Dentro del index.jsarchivo, primero, definimos todos los nodos DOM que necesitamos en este proceso. Esto incluye la etiqueta de entrada para la imagen ( imageInput) del usuario, 2 etiquetas de imagen para mostrar el finalImageresultado inicial (imagen) y final ( ), y un botón ( processBtn) para iniciar el proceso.

const imageInput = document.getElementById("imageinput");
const image = document.getElementById("image");
const finalImage = document.getElementById("finalimage");
const processBtn = document.getElementById("btn-process");

Ahora, cuando un usuario elige una nueva imagen usando nuestro selector de archivos, leemos esta imagen como DataURL y luego representamos esta imagen en nuestra etiqueta de imagen inicial.

function readFileAsync(file) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    reader.onload = () => {
      resolve(reader.result);
    };
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}imageInput.addEventListener("change", async (e) => {
  const fileList = e.target.files;
  if (fileList.length > 0) {
    let data = await readFileAsync(fileList[0]);
    image.src = data;
    file = fileList[0];
  }
});

Ahora tenemos la imagen seleccionada por el usuario en nuestra mano. Por lo tanto, este es el momento de enviar la solicitud a nuestro servidor proxy para comenzar con el procesamiento de imágenes.

Procesamiento de imágenes usando la API de Pixlab

En este proceso, hacemos un total de 3 solicitudes al servidor cada vez que el usuario sube una imagen. Estas solicitudes son consecutivas, por lo que tenemos que realizar la consulta estrictamente en orden.

1. Carga de la imagen en el servidor remoto : para cargar una imagen en el servidor proxy, hacemos una solicitud POST para /uploadenrutar el servidor proxy con la imagen seleccionada por el usuario. Hacemos una función auxiliar para facilitar este proceso.

async function uploadToStore(image) {
  const formData = new FormData();
  formData.append("image", image);
  try {
    let response = await fetch("http://localhost:5000/upload", {
      method: "POST",
      body: formData,
    });
    return await response.json();
  } catch (error) {
    throw "Fetch request give some error";
  }
}

2. Llamar a la API de detección de rostros : al usar el enlace de imagen remota que obtenemos de la solicitud anterior, llamamos a la API de detección de rostros. Realizamos una solicitud POST a la /facedetectruta de nuestro servidor proxy.

async function facedetect(imageurl) {
  try {
    let faceDetectionResult = await fetch("http://localhost:5000/facedetect", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        url: imageurl,
      }),
    });let tempjson = await faceDetectionResult.json();
    return tempjson.faces;
  } catch (error) {
    throw "Face detection not working";
  }
}

3. Desenfocar los rostros detectados : Obtenemos coordenadas de los rostros de la imagen que hemos subido de la consulta anterior. Ahora llamamos a la /mogrifyruta proxy para desenfocar nuestra imagen. Nuevamente estamos haciendo una solicitud POST con las coordenadas de la cara y el enlace de la imagen.

async function blurImage(faceCoordinate, imageUrl) {
  try {
    let blurimageResponse = await fetch("http://localhost:5000/mogrify", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        url: imageUrl,
        coord: faceCoordinate,
      }),
    });return blurimageResponse.json();
  } catch (error) {
    throw "Blur image function is not working";
  }
}

Obtenemos el enlace de la imagen borrosa de esta consulta a cambio. Usaremos esta URL para mostrar la imagen frente a nuestros usuarios.

El botón que gestiona todas estas funciones

Todos estos procesos son administrados por el botón de proceso que definimos anteriormente. Realiza solicitudes una por una a cada punto final y pasa los valores requeridos de una función a otra. El botón de procesamiento es el administrador de nuestra parte frontal.

processBtn.onclick = async () => {
  if (file) {
    let imageUploadResponse = await uploadToStore(file);
    if (imageUploadResponse["ssl_link"]) {
      let faceCoordinates = await facedetect(imageUploadResponse["ssl_link"]);
      if (faceCoordinates) {
        let blurimage = await blurImage(
          faceCoordinates,
          imageUploadResponse["ssl_link"]
        );
        finalImage.src = blurimage["ssl_link"];
      }
    }
  } else {
    throw "No file present to process";
  }
};

Prima

Si estás leyendo hasta aquí, este es el enlace del proyecto GitHub para ti. Tengo que hacer un par de cambios aquí y allá para que nuestra aplicación web se vea mejor. Además, puede consultar la parte de CSS que no he incluido en este artículo.

Fuente: https://betterprogramming.pub/detect-and-blur-human-faces-on-your-website-8c4a2d69a538

#websites #css #javascript 

What is GEEK

Buddha Community

Detecta Y Desenfoca Rostros Humanos En Tu Sitio Web Usando JavaScript

La moderación del contenido es muy necesaria para un sitio web. Si está desarrollando un sitio web donde los usuarios pueden cargar imágenes, entonces debe tener mucho cuidado. No puedes confiar en tus usuarios. Si cargan algún contenido objetable, a veces usted, como creador del sitio, se convierte en víctima de él.

En cada aplicación web 2.0 moderna, está presente un sistema de moderación de contenido. Algunos sitios web populares como Facebook, Instagram y Twitter tienen sistemas de moderación de contenido automáticos y manuales.

Pero para un equipo pequeño y un desarrollador individual, la moderación manual de contenido no es factible y no es muy económica. Por lo tanto, podemos utilizar la automatización basada en inteligencia artificial (IA) para detectar cualquier contenido objetable y difuminarlo.

Construir una automatización basada en IA no es muy fácil. Debe contratar a un desarrollador talentoso y debe tener una gran cantidad de datos para entrenar su modelo de IA. Pero podemos tomar un atajo aquí. Hay muchas plataformas de software como servicio (SaaS) presentes en el mercado, que nos pueden ayudar en este aspecto.

Pixlab es una plataforma SaaS, que puede proporcionar una interfaz de programación de aplicaciones (API) fácil de usar para sus modelos de IA de última generación. Puede integrar fácilmente esos servicios en su aplicación. Echa un vistazo a este enlace para obtener más información.

Agenda

En este artículo, vamos a crear una aplicación web utilizando la API de P ixlab . Usaré JavaScript vainilla.

Puede usar la misma lógica para cualquier marco como reaccionar, Vue, Angular, etc. Como estamos usando mucho la API de Pixlab, asegúrese de obtener una clave de API para seguir.

En la aplicación web, primero, tomamos una entrada de imagen del usuario. Entonces detectamos los rostros de las personas presentes en la imagen. Por último, borramos las caras de la imagen y renderizamos la imagen final en nuestra aplicación.

Usaremos el facedetectextremo de la API para detectar rostros humanos en una imagen. Luego hacemos otra solicitud para modificar el punto final con las coordenadas de la cara que recibimos de facedetectla API para desenfocar nuestra imagen.

La versión final de nuestro proyecto se verá así.

Demostración de video en vivo

Como estamos creando una aplicación web, no podemos realizar una solicitud directa a los servidores de Pixlab debido a las restricciones de CORS. Las restricciones de CORS existen para proteger al usuario. Puede obtener más información sobre CORS aquí . Por lo tanto, creamos un servidor proxy usando Nodejs y habilitamos el CORS allí. Luego, hacemos todas las solicitudes desde nuestro front-end a ese servidor proxy y enrutamos estas solicitudes a las API de Pixlab para evitar las restricciones de CORS.

Basta de hablar, hagamos nuestra aplicación web.

configuración del proyecto

Antes de profundizar en el tutorial, hagamos un andamiaje en nuestro proyecto. Necesitamos hacer tanto el front-end como el back-end (como un servidor proxy) en este proyecto. Por lo tanto, haga 2 directorios con nombre frontendy backenddentro de la raíz de su proyecto.

Dentro de su directorio frontend, cree 3 archivos llamados index.html, style.css, index.js. Instale el servidor en vivo en su VSCode para servir estos archivos estáticos.

Dentro de su directorio back-end, inicie un proyecto npm ejecutando este comando.

cd backend
npm init -y

Como estamos creando una aplicación express.js como nuestro servidor proxy, instalemos todas las dependencias de una sola vez.

npm install axios cors dotenv express express-fileupload form-data
npm install — save-dev nodemon

Ahora cambie la sección de script de su package.jsonarchivo con estos 2 comandos.

"scripts": {
    "dev": "nodemon server.js",
    "start": "node server.js"
  },

Ahora cree server.jsun archivo dentro de su directorio backend.

Después de todas estas configuraciones, la estructura del proyecto se verá así.

.
├── backend
│   ├── package.json
│   ├── package-lock.json
│   └── server.js
└── frontend
    ├── index.html
    ├── index.js
    └── style.css

Aprendamos rápidamente cuál es el uso de todos esos paquetes npm en nuestro proyecto.

1. axios: Axios es un cliente http muy popular en el mundo de Node.js. Nos ayuda a escribir consultas complejas muy fácilmente.
2. cors: la biblioteca cors se usa para agregar encabezados CORS en cada solicitud a nuestro servidor. También puede realizar muchas personalizaciones en la política de CORS con este paquete.
3. dotenv: Este paquete nos ayuda a crear y usar variables de entorno en nuestro proyecto Node.js. Esto es necesario para ocultar su clave de API u otros secretos que no desea enviar a GitHub.
4. express: Esta biblioteca no necesita explicación. Esta es una biblioteca de servidor muy popular con capacidad de middleware en el mundo de Node.js.
5. express-fileupload: Esta librería funciona como middleware y nos da acceso a todos los archivos subidos desde el cliente.
6. form-data: este paquete proporciona el objeto FormData del navegador en el entorno Nodejs. Para realizar una solicitud de datos de formulario/varias partes a alguna API, uso este paquete en este proyecto.
7. nodemon: Esta es una dependencia de desarrollo que reinicia automáticamente su servidor cada vez que cambia algún código en sus archivos javascript.

Hagamos nuestro servidor proxy NodeJs

Como mencioné anteriormente, debido a la política CORS del navegador, no podemos llamar directamente a la API de Pixlab desde nuestra aplicación de front-end. Por lo tanto, crearemos un servidor Node.js que envíe nuestra solicitud a la API de Pixlab.

En esta sección, he usado tanto el cliente como el front-end indistintamente. Por favor tenga esto en cuenta.

Imagen cargada por el usuario proxy a la API de Pixlab

Esta es la parte más complicada de nuestro proyecto para representar la imagen cargada. Pixlab prefiere aceptar un enlace de imagen en línea para procesar nuestra solicitud. Para cargar nuestra imagen local en un depósito de almacenamiento, Pixlab también proporciona una API fácil de usar para desarrolladores llamada store .

Esta API acepta una solicitud POST. El cuerpo de la solicitud debe ser multipart/form-data que contenga la imagen cargada por el usuario y la clave API. Si la solicitud es exitosa, la API toma su imagen y la carga en un depósito de almacenamiento en línea y le brinda el enlace a esa imagen.

En nuestro servidor proxy, tomamos la entrada del archivo de usuario en /uploadruta. Accedemos a la imagen cargada por el usuario usando el express-fileuploadpaquete. Después de agregar este paquete como un middleware, podemos acceder al archivo de carga del usuario usando solo el req.filesmétodo.

Luego, construimos nuestra solicitud de datos de formulario/multiparte utilizando el form-data paquete que mencioné anteriormente. Agregue la imagen cargada por el usuario y la clave API en los datos del formulario. Puede usar dotenvel paquete aquí para ocultar su clave API y acceder a ella como una variable de entorno.

Después de la construcción de multipart/form-data, enviamos la solicitud a la API de Pixlab. Luego, sea cual sea la respuesta que obtengamos, si es 200, la canalizamos como respuesta al usuario.

El código de nuestra /uploadruta se ve así.

app.post("/upload", (req, res) => {
  try {
    if (!req.files || Object.keys(req.files).length === 0) {
      return res.status(400).send("No files were uploaded.");
    }
    let image = req.files.image;// If you want to save the image
    // image.mv(__dirname + "/uploads/" + image.name);const form = new FormData();
    form.append("file", image.data, image.name);
    form.append("key", process.env.PIXLAB_KEY);form.submit(
      {
        protocol: "https:",
        host: "api.pixlab.io",
        path: "/store",
        method: "POST",
        headers: {
          "Content-Type": `multipart/form-data; boundary=${form.getBoundary()}`,
        },
      },
      (err, resp) => {
        if (err) {
          res.status(503).send("File server is currently unavailable");
        }
        resp.pipe(res);
      }
    );
  } catch (error) {
    res.status(500).send(error);
  }
});

Si esta solicitud tiene éxito, obtenemos un enlace a la imagen cargada por el usuario. Mantenemos el enlace con nosotros para usar en facedetecty mogrifysolicitudes de API.

API de detección de rostros de proxy (detección de rostros)

Ahora hagamos un proxy API de Facedetect usando Node.js. Usamos /facedetectla ruta para representar esta API. Para leer los datos JSON enviados por el usuario, use express.json()el middleware en nuestro servidor.

Al principio, tomamos la URL de la imagen enviada por el usuario (de nuestra solicitud anterior) y hacemos una solicitud de obtención a la API de Pixlab con esta URL de imagen y la clave de la API de Pixlab. Luego simplemente enviamos la respuesta del servidor al cliente.

El código para la /facedetectruta se ve así.

app.post("/facedetect", (req, res) => {
  axios
    .get("https://api.pixlab.io/facedetect", {
      params: {
        img: req.body.url,
        key: process.env.PIXLAB_KEY,
      },
    })
    .then((resp) => res.json(resp.data))
    .catch((err) => console.error(err));
});

Después de una solicitud exitosa, obtenemos una lista de coordenadas faciales del servidor. Enviamos estas coordenadas al cliente. Necesitamos estas coordenadas para usar en mogrifyAPI para desenfocar las caras de las personas.

Proxy mogrify API (Face Blur)

Usamos /mogrifyla ruta de nuestro servidor para solicitar la mogrifyAPI de Pixlab. El cliente proporciona la URL de la imagen y las coordenadas de la cara que obtuvimos de las 2 solicitudes anteriores. Después de analizar los datos proporcionados por el usuario, hacemos una solicitud POST a la mogrifyAPI de Pixlab.

El código interior /mogrifyse ve así.

app.post("/mogrify", (req, res) => {
  axios
    .post("https://api.pixlab.io/mogrify", {
      img: req.body.url,
      key: process.env.PIXLAB_KEY,
      cord: req.body.coord,
    })
    .then((resp) => res.json(resp.data))
    .catch((err) => console.error(err));
});

Después de una solicitud exitosa, devuelve una versión de cara borrosa de la imagen que hemos subido anteriormente.

Luego le pasamos el enlace de la nueva imagen borrosa al cliente. Ahora el cliente puede usar este enlace para mostrar la imagen.

Construyendo la parte delantera

Agregar un front-end intuitivo es muy necesario para la perspectiva del usuario. En esta sección, hacemos que este front-end sea parte de nuestra aplicación. En aras de la simplicidad, mantengo la parte delantera lo más mínima posible.

Obtener entrada de archivo de usuario

Al principio, complete su archivo "index.html" con el marcado HTML mínimo. Para su referencia, esta es mi plantilla HTML inicial para este proyecto.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pixlab web</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

En el código HTML anterior, vinculamos nuestro archivo CSS y javascript con HTML y creamos una estructura básica de nuestro sitio web.

Ahora, para tomar una entrada de archivo del usuario, tenemos que agregar una etiqueta de entrada dentro del archivo HTML. Asegúrese de agregar acceptatribución para aceptar solo imágenes jpg y png.

<input
 type="file"
    accept="image/jpeg,image/png"
    id="imageinput"
/>

Ahora agregue 2 etiquetas de imagen en su marcado HTML. Uno es para mostrar imágenes cargadas por el usuario, otro es para renderizar imágenes de caras borrosas procesadas desde el servidor API de Pixlab.

<img id="image" />
<img id="finalimage" />

Finalmente, agregue un botón para invocar el procesamiento de imágenes.

<button id="btn-process">Process</button>

Haz que nuestro front-end sea interactivo

Dentro del index.jsarchivo, primero, definimos todos los nodos DOM que necesitamos en este proceso. Esto incluye la etiqueta de entrada para la imagen ( imageInput) del usuario, 2 etiquetas de imagen para mostrar el finalImageresultado inicial (imagen) y final ( ), y un botón ( processBtn) para iniciar el proceso.

const imageInput = document.getElementById("imageinput");
const image = document.getElementById("image");
const finalImage = document.getElementById("finalimage");
const processBtn = document.getElementById("btn-process");

Ahora, cuando un usuario elige una nueva imagen usando nuestro selector de archivos, leemos esta imagen como DataURL y luego representamos esta imagen en nuestra etiqueta de imagen inicial.

function readFileAsync(file) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    reader.onload = () => {
      resolve(reader.result);
    };
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}imageInput.addEventListener("change", async (e) => {
  const fileList = e.target.files;
  if (fileList.length > 0) {
    let data = await readFileAsync(fileList[0]);
    image.src = data;
    file = fileList[0];
  }
});

Ahora tenemos la imagen seleccionada por el usuario en nuestra mano. Por lo tanto, este es el momento de enviar la solicitud a nuestro servidor proxy para comenzar con el procesamiento de imágenes.

Procesamiento de imágenes usando la API de Pixlab

En este proceso, hacemos un total de 3 solicitudes al servidor cada vez que el usuario sube una imagen. Estas solicitudes son consecutivas, por lo que tenemos que realizar la consulta estrictamente en orden.

1. Carga de la imagen en el servidor remoto : para cargar una imagen en el servidor proxy, hacemos una solicitud POST para /uploadenrutar el servidor proxy con la imagen seleccionada por el usuario. Hacemos una función auxiliar para facilitar este proceso.

async function uploadToStore(image) {
  const formData = new FormData();
  formData.append("image", image);
  try {
    let response = await fetch("http://localhost:5000/upload", {
      method: "POST",
      body: formData,
    });
    return await response.json();
  } catch (error) {
    throw "Fetch request give some error";
  }
}

2. Llamar a la API de detección de rostros : al usar el enlace de imagen remota que obtenemos de la solicitud anterior, llamamos a la API de detección de rostros. Realizamos una solicitud POST a la /facedetectruta de nuestro servidor proxy.

async function facedetect(imageurl) {
  try {
    let faceDetectionResult = await fetch("http://localhost:5000/facedetect", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        url: imageurl,
      }),
    });let tempjson = await faceDetectionResult.json();
    return tempjson.faces;
  } catch (error) {
    throw "Face detection not working";
  }
}

3. Desenfocar los rostros detectados : Obtenemos coordenadas de los rostros de la imagen que hemos subido de la consulta anterior. Ahora llamamos a la /mogrifyruta proxy para desenfocar nuestra imagen. Nuevamente estamos haciendo una solicitud POST con las coordenadas de la cara y el enlace de la imagen.

async function blurImage(faceCoordinate, imageUrl) {
  try {
    let blurimageResponse = await fetch("http://localhost:5000/mogrify", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        url: imageUrl,
        coord: faceCoordinate,
      }),
    });return blurimageResponse.json();
  } catch (error) {
    throw "Blur image function is not working";
  }
}

Obtenemos el enlace de la imagen borrosa de esta consulta a cambio. Usaremos esta URL para mostrar la imagen frente a nuestros usuarios.

El botón que gestiona todas estas funciones

Todos estos procesos son administrados por el botón de proceso que definimos anteriormente. Realiza solicitudes una por una a cada punto final y pasa los valores requeridos de una función a otra. El botón de procesamiento es el administrador de nuestra parte frontal.

processBtn.onclick = async () => {
  if (file) {
    let imageUploadResponse = await uploadToStore(file);
    if (imageUploadResponse["ssl_link"]) {
      let faceCoordinates = await facedetect(imageUploadResponse["ssl_link"]);
      if (faceCoordinates) {
        let blurimage = await blurImage(
          faceCoordinates,
          imageUploadResponse["ssl_link"]
        );
        finalImage.src = blurimage["ssl_link"];
      }
    }
  } else {
    throw "No file present to process";
  }
};

Prima

Si estás leyendo hasta aquí, este es el enlace del proyecto GitHub para ti. Tengo que hacer un par de cambios aquí y allá para que nuestra aplicación web se vea mejor. Además, puede consultar la parte de CSS que no he incluido en este artículo.

Fuente: https://betterprogramming.pub/detect-and-blur-human-faces-on-your-website-8c4a2d69a538

#websites #css #javascript 

JS Development Company India | JavaScript Development Services

PixelCrayons: Our JavaScript web development service offers you a feature-packed & dynamic web application that effectively caters to your business challenges and provide you the best RoI. Our JavaScript web development company works on all major frameworks & libraries like Angular, React, Nodejs, Vue.js, to name a few.

With 15+ years of domain expertise, we have successfully delivered 13800+ projects and have successfully garnered 6800+ happy customers with 97%+ client retention rate.

Looking for professional JavaScript web app development services? We provide custom JavaScript development services applying latest version frameworks and libraries to propel businesses to the next level. Our well-defined and manageable JS development processes are balanced between cost, time and quality along with clear communication.

Our JavaScript development companies offers you strict NDA, 100% money back guarantee and agile/DevOps approach.

#javascript development company #javascript development services #javascript web development #javascript development #javascript web development services #javascript web development company

Top 15 Free JavaScript Frameworks for Web Applications

List of some useful JavaScript Frameworks and libraries for website, web apps, and mobile apps development, that developers should know about to make selection easier.
This article will help you understand the various types of JavaScript Framework available in the market. When it comes to choosing the best platform for you, it’s not only the number of features you need to consider but also its functionality. The ease with which it fits within your project is also an essential factor. The next step is to choose the framework that best fits your company requirements or you can select the best from the list of top web development companies to develop your product based on your requirements.

#javascript frameworks for web applications #web applications development companies #progressive javascript framework #javascript frameworks #javascript #frameworks

35.000+ Tủ locker, tủ nhân viên cao cấp chính hãng l Nam Thuy Corp

35.000+ Tủ locker, tủ nhân viên cao cấp chính hãng l Nam Thuy Corp

 

Việc trang bị tủ locker cho các trường học là điều vô cùng cần thiết để giúp học sinh có ý thức và trách nhiệm hơn trong việc bảo quản tài sản cá nhân.

 

Website: https://namthuycorp.com/danh-muc-san-pham/tu-locker/

 

#tủ_sắt_locker #locker #tu_sat_locker #tu_locker #tủ_locker_sắt #tủ_nhân_viên #tu_locker_sat #tủ_locker_giá_rẻ #tu_locker_gia_re #tủ_cá_nhân_locker #tủ_sắt_nhiều_ngăn #tủ_đựng_đồ_nhân_viên

 

CÔNG TY TNHH QUỐC TẾ NAM THỦY

Công ty thành viên trực thuộc Nam Thủy Group

 

Địa chỉ: SH02-22, Sari Town, KĐT Sala, 10 Mai Chí Thọ,

Phường An Lợi Đông, Quận 2, TP. Hồ Chí Minh

 

Điện thoại: (028) 62700527          Hotline: 0909 420 804

 

Email: info@namthuycorp.com

 

Tủ locker

Tủ locker dòng W900 là sản phẩm có thể xếp chồng lên được 3 tầng cho 1 cột, có thể kết hợp nhiều cột tủ lại với nhau theo mong muốn (không giới hạn số lượng cột tủ)

#tủ_locker #tủ_sắt_locker #locker #tu_sat_locker #tu_locker #tủ_locker_sắt #tủ_nhân_viên #tu_locker_sat #tủ_locker_giá rẻ #tu_locker_gia_re #tủ_cá_nhân_locker #tủ_sắt_nhiều_ngăn #tủ_đựng_đồ_nhân_viên

Website: 

tủ locker

tủ locker giá rẻ

tu locker gia re

tủ cá nhân locker

tủ sắt nhiều ngăn