Como filtrar imagens NSFW e desfocá-las programaticamente

Se você está criando um aplicativo social onde os usuários podem fazer upload de imagens, a moderação de conteúdo deve ser a tarefa mais importante para seus desenvolvedores. Se um usuário fizer upload de qualquer imagem perturbadora em sua plataforma, isso pode ferir os sentimentos de outras pessoas ou, em casos extremos, pode se tornar um problema legal.

Portanto, sua melhor aposta deve ser remover ou desfocar o conteúdo NSFW que viola sua política de conteúdo. Neste tutorial, veremos como detectar imagens NSFW usando algoritmos de aprendizado de máquina e desfocar a imagem automaticamente.

A declaração do problema

Se você tiver milhares ou milhões de usuários, não será possível revisar todas as imagens manualmente e desfocá-las manualmente. Precisa de muita mão de obra e muito mais dinheiro.

Mesmo assistir a centenas de imagens perturbadoras para um ser humano todos os dias pode levar a uma doença mental depois de algum tempo.

Nossa abordagem

Na era da inteligência artificial e do aprendizado de máquina, podemos usar as tecnologias de IA a nosso favor. Usando inteligência artificial, podemos detectar automaticamente imagens NSFW e atribuir a elas uma pontuação NSFW. Em seguida, podemos desfocá-los programaticamente de acordo com sua pontuação NSFW. Isso significa que os desenvolvedores têm controle total sobre o conteúdo NSFW. Agora, a pergunta natural que vem à sua mente é: como podemos fazer um modelo de IA nós mesmos?

A resposta óbvia é que você não precisa. Podemos utilizar APIs de qualquer SaaS (software como serviço) fornecido que forneça soluções baseadas em inteligência artificial. Neste artigo, estamos usando APIs do Pixlab para automatizar a detecção de NSFW e desfocar a imagem quando ela ultrapassa um determinado limite de NSFW.

Agenda do artigo

Neste artigo, vamos fazer um projeto web. Com a ajuda deste projeto, demonstro para você,

1. Como detectar a pontuação NSFW de uma imagem online.

2. Como detectar a pontuação NSFW de uma imagem local.

3. Como desfocar uma imagem dependendo de sua pontuação NSFW.

   
   

Este é um artigo longo e estou tentando dar a você o máximo de prática possível através deste artigo. Acredito que você pode criar seu próprio sistema de detecção de NSFW depois de ler este artigo. Então, por favor, pegue uma xícara de café e vamos começar nosso tutorial.

Como estou usando terminais de API Pixlab neste tutorial, certifique-se de obter uma chave de API para o mesmo.

Necessidade de um servidor proxy

A API do Pixlab não está habilitada para CORS (compartilhamento de recursos de origem cruzada). Para evitar problemas de segurança, nosso navegador não nos permite conectar com sites de origem cruzada. Portanto, precisamos de um servidor proxy para ignorar a restrição do CORS. Os servidores não têm restrições de CORS.

Portanto, crie um servidor Nodejs e Expressjs e faça a configuração básica. escrevemos todo o nosso código de servidor no arquivo 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"); });

Obtenha a pontuação NSFW de imagens on-line

Para obter a pontuação NSFW de uma imagem online, adicionamos uma rota GET expressa a /nsfw . Usamos esta imagem NSFW do site pexels para esta comparação.

Dentro da rota /nsfw , chamamos o ponto de extremidade da API NSFW do Pixlab. Este endpoint requer 2 parâmetros. O link da imagem e a chave de API. Quando a API responde, enviamos a resposta diretamente ao 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 o front-end, crie um novo projeto da Web criando um arquivo index.html junto com um arquivo javascript chamado index.js . Vincule o arquivo javascript dentro do arquivo HTML. O conteúdo dentro do arquivo HTML se parece com isso.

 <!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>

Agora precisamos adicionar um botão para invocar nossa chamada de API NSFW.

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

Agora dentro do arquivo index.js , criamos uma função getnsfwscore() . Esta função nos permite fazer chamadas para o terminal /nsfw do nosso 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; } }

Em resposta, a API Pixlab NSFW retorna uma pontuação NSFW. A pontuação NSFW varia de 0 a 1. A resposta típica da API é semelhante a esta.

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

Agora você pode usar essa pontuação para filtrar as imagens carregadas.

Pontuação NSFW da imagem local

Você também pode carregar suas imagens locais para determinar a pontuação NSFW dessa imagem. Este é um processo de 2 etapas. Inicialmente, carregamos esta imagem no armazenamento online do Pixlab e obtemos o link online dessa imagem. Em seguida, podemos seguir a etapa anterior com a URL da imagem online fornecida pelo Pixlab.

Para carregar nossa imagem local, usamos a API da loja do Pixlab. Fizemos uma rota /upload em nosso servidor proxy expresso. Para suportar uploads de imagens, usamos o plugin express-fileupload .

Para carregar uma imagem na API da loja, fazemos uma solicitação POST com a imagem e a chave da API. Estamos usando o objeto FormData para construir nossa 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); } });

O bloco de código acima faz a solicitação e encaminha a resposta para o front-end.

No front-end, usamos uma entrada de arquivo para obter a imagem local do usuário.

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

Dentro do nosso arquivo index.js , criamos a função uploadToStore para enviar a imagem para o nosso 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"; } }

Agora, ouvimos qualquer alteração na entrada do arquivo. Se o usuário escolher qualquer imagem, chamamos essa função 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); } })

Em resposta, obtemos o URL da imagem online da nossa imagem local. Você pode verificar a imagem em seu navegador usando esses URLs.

 { 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 }

Agora, para calcular a pontuação NSFW desta imagem, você pode seguir a seção anterior sobre como obter a pontuação NSFW para uma imagem online.

Desfocar imagens programaticamente

Depois de filtrar as imagens de acordo com suas pontuações NSFW, desfocamos as imagens inadequadas. Para desfocar uma imagem, usamos o ponto final da API de desfoque do Pixlab.

Criamos uma rota GET /blur em nosso servidor proxy para chamar a API de desfoque do Pixlab. O endpoint da API requer o URL da imagem, o raio do desfoque, o parâmetro sigma e sua chave de API 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)); });

Você pode modificar o processo de desfoque variando os parâmetros de raio e sigma.

No front-end, criamos uma função blurImage . Essa função faz uma solicitação GET para o endpoint /blur do nosso servidor proxy.

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

Em resposta, o servidor Pixlab retorna uma versão borrada de sua imagem carregada. Você pode usar o URL da imagem de desfoque para exibir em seu front-end.

 { 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 }

Conclusão

Você pode encontrar os exemplos de código para este tutorial em minha essência do GitHub. Se você gosta deste tutorial, pode ler tutoriais mais interessantes no meu blog . Se você tiver algum comentário, pode me encontrar no Twitter como @hrishikeshpathak .

Pergunta frequente

Podemos desfocar nossa imagem sem usar essas APIs?

Sim, você pode usar o filtro de desfoque CSS para desfocar qualquer imagem em seu site. Selecione seu elemento de imagem HTML usando uma classe única, id ou usando javascript e, em seguida, aplique o filtro de desfoque.

 filter: blur(4px);

Saiba mais sobre os filtros de desfoque CSS no site da MDN .

O uso de um servidor proxy é obrigatório?

Não, estou usando este servidor proxy apenas para demonstração. Você pode usar seu próprio servidor de produção para essa finalidade. Estou usando um servidor proxy apenas para ignorar a restrição CORS do navegador.