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 para automatizar la detección de NSFW y desenfocar la imagen cuando supera cierto límite de NSFW. API de Pixlab Agenda del Artículo En este artículo, vamos a hacer un proyecto web. Con la ayuda de este proyecto, les demuestro, Cómo detectar la puntuación NSFW de una imagen en línea. Cómo detectar la puntuación NSFW de una imagen local. 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 en este tutorial, asegúrese de obtener una clave de API para el mismo. API de Pixlab 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 rápida a . Usamos del sitio web de Pexels para esta comparación. GET /nsfw esta imagen NSFW Dentro de la ruta , llamamos al extremo de la 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. /nsfw API NSFW 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 junto con un archivo javascript llamado . Vincule el archivo javascript dentro del archivo HTML. El contenido dentro del archivo HTML se ve así. index.html index.js <!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 , hacemos una función . Esta función nos permite realizar llamadas al punto final de nuestro servidor proxy. index.js getnsfwscore() /nsfw 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 en nuestro servidor proxy express. Para permitir la carga de imágenes, utilizamos el complemento . /upload express-fileupload Para subir una imagen a la API de la tienda, hacemos una solicitud con la imagen y la clave API. Estamos usando el objeto FormData para construir nuestra consulta. POST 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 , hicimos la función para cargar la imagen en nuestro servidor proxy. index.js uploadToStore 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 de Pixlab. API de desenfoque Creamos una ruta GET 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. /blur 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 . Esta función realiza una solicitud GET al punto final de nuestro servidor proxy. blurImage /blur 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 . Si tiene algún comentario, puede encontrarme en Twitter como . tutoriales interesantes en mi blog @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.
