Cómo filtrar imágenes NSFW y desenfocarlas programáticamente

Si está creando una aplicación social en la que los usuarios pueden cargar imágenes, la moderación del contenido debería ser la tarea más importante para sus desarrolladores. Si un usuario carga una imagen perturbadora en su plataforma, puede herir los sentimientos de los demás o, en el caso extremo, puede convertirse en un problema legal.

Por lo tanto, lo mejor que puede hacer es eliminar o difuminar el contenido NSFW que infringe su política de contenido. En este tutorial, veremos cómo detectar imágenes NSFW utilizando algoritmos de aprendizaje automático y luego desenfocar automáticamente la imagen.

El enunciado del problema

Si tiene miles o millones de usuarios, entonces no es posible revisar cada imagen manualmente y desenfocarlas a mano. Necesita mucha mano de obra y mucho más dinero.

Incluso ver cientos de imágenes perturbadoras para un ser humano todos los días puede provocar una enfermedad mental después de un tiempo.

Nuestro enfoque

En la era de la inteligencia artificial y el aprendizaje automático, podemos utilizar las tecnologías de IA para nuestro beneficio. Mediante el uso de inteligencia artificial, podemos detectar automáticamente imágenes NSFW y otorgarles una puntuación NSFW. Luego podemos difuminarlos programáticamente según su puntaje NSFW. Significa que los desarrolladores tienen control total sobre el contenido NSFW. Ahora, la pregunta natural que le viene a la mente es: ¿cómo podemos hacer un modelo de IA nosotros mismos?

La respuesta obvia es que no es necesario. Podemos utilizar API de cualquier SaaS (software como servicio) proporcionado que proporcione soluciones basadas en inteligencia artificial. En este artículo, usamos las API de Pixlab para automatizar la detección de NSFW y desenfocar la imagen cuando supera cierto límite de NSFW.

Agenda del Artículo

En este artículo, vamos a hacer un proyecto web. Con la ayuda de este proyecto, les demuestro,

1. Cómo detectar la puntuación NSFW de una imagen en línea.

2. Cómo detectar la puntuación NSFW de una imagen local.

3. Cómo desenfocar una imagen según su puntuación NSFW.

   
   

Este es un artículo extenso y estoy tratando de brindarle la mayor cantidad de práctica posible a través de este artículo. Creo que puedes hacer tu propio sistema de detección NSFW después de leer este artículo. Así que tome una taza de café y comencemos nuestro tutorial.

Como estoy usando puntos finales de API de Pixlab en este tutorial, asegúrese de obtener una clave de API para el mismo.

Necesidad de un servidor proxy

La API de Pixlab no está habilitada para CORS (intercambio de recursos de origen cruzado). Para evitar problemas de seguridad, nuestro navegador no nos permite conectarnos con sitios web de origen cruzado. Por lo tanto, necesitamos un servidor proxy para eludir la restricción CORS. Los servidores no tienen restricciones CORS.

Así que cree un servidor Nodejs y Expressjs y realice la configuración básica. escribimos todo nuestro código de servidor en el archivo server.js .

 var express = require("express"); var cors = require("cors"); var fileUpload = require("express-fileupload"); var app = express(); // To parse application/json app.use(express.json()); // Enable cors on all request app.use(cors()); // File upload middleware app.use(fileUpload()); app.listen(5000, () => { console.log("Server is running in port 5000 and cors enable"); });

Obtenga la puntuación NSFW de las imágenes en línea

Para obtener la puntuación NSFW de una imagen en línea, agregamos una ruta GET rápida a /nsfw . Usamos esta imagen NSFW del sitio web de Pexels para esta comparación.

Dentro de la ruta /nsfw , llamamos al extremo de la API NSFW de Pixlab. Este punto final requiere 2 parámetros. El enlace de la imagen y la clave API. Cuando la API responde, enviamos la respuesta directamente al cliente.

 app.get("/nsfw", (req, res) => { axios .get("https://api.pixlab.io/nsfw", { params: { img: "https://images.pexels.com/photos/2495905/pexels-photo-2495905.jpeg", key: process.env.PIXLAB_KEY, }, }) .then((resp) => res.json(resp.data)) .catch((err) => console.log(err)); });

Para el front-end, cree un nuevo proyecto web creando un archivo index.html junto con un archivo javascript llamado index.js . Vincule el archivo javascript dentro del archivo HTML. El contenido dentro del archivo HTML se ve así.

 <!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 NSFW</title> </head> <body> <script src="./index.js"></script> </body> </html>

Ahora necesitamos agregar un botón para invocar nuestra llamada API NSFW.

 <button id="getscore">Get NSFW Score</button>

Ahora dentro del archivo index.js , hacemos una función getnsfwscore() . Esta función nos permite realizar llamadas al punto final /nsfw de nuestro servidor proxy.

 const getScore= document.getElementById("getscore"); async function getnsfwscore() { try { let response =await fetch("http://localhost:5000/nsfw"); console.log(await response.json()); } catch (error) { throw error; } }

En respuesta, la API NSFW de Pixlab devuelve una puntuación NSFW. El puntaje NSFW varía de 0 a 1. La respuesta típica de la API se ve así.

 { "score": 0.7187498807907104, "status": 200 }

Ahora puede usar esta puntuación para filtrar las imágenes cargadas.

Puntuación NSFW de imagen local

También puede cargar sus imágenes locales para determinar la puntuación NSFW de esa imagen. Este es un proceso de 2 pasos. Primero, subimos esta imagen al almacenamiento en línea de Pixlab y obtenemos el enlace en línea de esa imagen. Luego podemos seguir el paso anterior con esa URL de imagen en línea proporcionada por Pixlab.

Para cargar nuestra imagen local, usamos la API de la tienda de Pixlab. Hicimos una ruta /upload en nuestro servidor proxy express. Para permitir la carga de imágenes, utilizamos el complemento express-fileupload .

Para subir una imagen a la API de la tienda, hacemos una solicitud POST con la imagen y la clave API. Estamos usando el objeto FormData para construir nuestra consulta.

 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; 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); } });

El bloque de código anterior realiza la solicitud y reenvía la respuesta al front-end.

En el front-end, usamos una entrada de archivo para obtener la imagen local del usuario.

 <input type="file" id="localImage">

Dentro de nuestro archivo index.js , hicimos la función uploadToStore para cargar la imagen en nuestro servidor proxy.

 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"; } }

Ahora escuchamos cualquier cambio en la entrada del archivo. Si el usuario elige cualquier imagen, llamamos a esta función uploadToStore .

 const localImage=document.getElementById("localImage"); localImage.addEventListener("change",async(e)=>{ const files=e.target.files; if (files.length >0){ const file=files[0]; let response= await uploadToStore(file); console.log(response); } })

En respuesta, obtenemos la URL de la imagen en línea de nuestra imagen local. Puede comprobar la imagen en su navegador utilizando estas URL.

 { ssl_link: "https://s3.amazonaws.com/media.pixlab.xyz/24p62f73c9583ec6.jpeg", link: "https://s3.amazonaws.com/media.pixlab.xyz/24p62f73c9583ec6.jpeg", id: "24p62f73c9583ec6.jpeg", status: 200 }

Ahora, para calcular el puntaje NSFW de esta imagen, puede seguir la sección anterior sobre cómo obtener el puntaje NSFW para una imagen en línea.

Desenfocar imágenes programáticamente

Después de filtrar las imágenes según sus puntajes NSFW, desenfocamos las imágenes inapropiadas. Para desenfocar una imagen, usamos el punto final de la API de desenfoque de Pixlab.

Creamos una ruta GET /blur en nuestro servidor proxy para llamar a la API de desenfoque de Pixlab. El punto final de la API requiere la URL de la imagen, el radio del desenfoque, el parámetro sigma y su clave API de pixlab.

 app.get("/blur", (req, res) => { axios .get("https://api.pixlab.io/blur", { params: { img: "https://images.pexels.com/photos/2495905/pexels-photo-2495905.jpeg", radius: 50, sigma: 30, key: process.env.PIXLAB_KEY, }, }) .then((resp) => res.json(resp.data)) .catch((err) => console.log(err)); });

Puede modificar el proceso de desenfoque variando los parámetros de radio y sigma.

En el front-end, hacemos una función blurImage . Esta función realiza una solicitud GET al punto final /blur de nuestro servidor proxy.

 async function blurImage(){ try { let response =await fetch("http://localhost:5000/blur"); console.log(await response.json()); } catch (error) { throw error; } }

En respuesta, el servidor de Pixlab devuelve una versión borrosa de la imagen cargada. Puede usar la URL de la imagen borrosa para mostrarla en su interfaz.

 { ssl_link: "https://s3.amazonaws.com/media.pixlab.xyz/24p62f74006c5fa1.jpeg", link: "https://s3.amazonaws.com/media.pixlab.xyz/24p62f74006c5fa1.jpeg", id: "24p62f74006c5fa1.jpeg", status: 200 }

Conclusión

Puede encontrar los ejemplos de código para este tutorial en mi Gist de GitHub. Si te gusta este tutorial, puedes leer más tutoriales interesantes en mi blog . Si tiene algún comentario, puede encontrarme en Twitter como @hrishikeshpathak .

Preguntas frecuentes

¿Podemos difuminar nuestra imagen sin utilizar estas API?

Sí, puede usar el filtro de desenfoque CSS para desenfocar cualquier imagen en su sitio web. Seleccione su elemento de imagen HTML usando una clase única, id o usando javascript, y luego aplique el filtro de desenfoque.

 filter: blur(4px);

Obtenga más información sobre los filtros de desenfoque CSS en el sitio web de MDN .

¿Es obligatorio usar un servidor proxy?

No, estoy usando este servidor proxy solo para demostración. Puede usar su propio servidor de producción para este propósito. Estoy usando un servidor proxy solo para eludir la restricción CORS del navegador.