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 para automatizar a detecção de NSFW e desfocar a imagem quando ela ultrapassa um determinado limite de NSFW. APIs do Pixlab Agenda do artigo Neste artigo, vamos fazer um projeto web. Com a ajuda deste projeto, demonstro para você, Como detectar a pontuação NSFW de uma imagem online. Como detectar a pontuação NSFW de uma imagem local. 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 neste tutorial, certifique-se de obter uma chave de API para o mesmo. API Pixlab 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 expressa a . Usamos do site pexels para esta comparação. GET /nsfw esta imagem NSFW Dentro da rota , chamamos o ponto de extremidade da 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. /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 o front-end, crie um novo projeto da Web criando um arquivo junto com um arquivo javascript chamado . Vincule o arquivo javascript dentro do arquivo HTML. O conteúdo dentro do arquivo HTML se parece com isso. 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> Agora precisamos adicionar um botão para invocar nossa chamada de API NSFW. <button id="getscore">Get NSFW Score</button> Agora dentro do arquivo , criamos uma função . Esta função nos permite fazer chamadas para o terminal do nosso 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; } } 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 em nosso servidor proxy expresso. Para suportar uploads de imagens, usamos o plugin . /upload express-fileupload Para carregar uma imagem na API da loja, fazemos uma solicitação com a imagem e a chave da API. Estamos usando o objeto FormData para construir nossa 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); } }); 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 , criamos a função para enviar a imagem para o nosso 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"; } } 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 de desfoque do Pixlab. API Criamos uma rota GET 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. /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)); }); Você pode modificar o processo de desfoque variando os parâmetros de raio e sigma. No front-end, criamos uma função . Essa função faz uma solicitação GET para o endpoint do nosso 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; } } 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 . Se você tiver algum comentário, pode me encontrar no Twitter como . tutoriais mais interessantes no meu blog @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.

Fetch

Mozilla

Target

Twitter

Checkout my personal blog site for more articles

Writer

Este áudio é produzido no idioma original da história!

Muito longo; Para ler

 Add passwordless user experiences to your app

HackerNoon Mobile

Como filtrar imagens NSFW e desfocá-las programaticamente

Muito longo; Para ler

Companies Mentioned

@hrishikeshpathak

HISTÓRIAS RELACIONADAS