Comment filtrer les images NSFW et les flouter par programmation

Si vous créez une application sociale où les utilisateurs peuvent télécharger des images, la modération du contenu devrait être la tâche la plus importante pour vos développeurs. Si un utilisateur télécharge une image dérangeante sur votre plateforme, cela peut blesser les sentiments des autres ou, dans le cas extrême, cela peut devenir un problème juridique.

Par conséquent, votre meilleur pari devrait être de supprimer ou de brouiller le contenu NSFW qui enfreint votre politique de contenu. Dans ce didacticiel, nous allons voir comment détecter les images NSFW à l'aide d'algorithmes d'apprentissage automatique, puis flouter automatiquement l'image.

L'énoncé du problème

Si vous avez des milliers ou des millions d'utilisateurs, il n'est pas possible de revoir chaque image manuellement et de les flouter à la main. Il a besoin de beaucoup de main-d'œuvre et de beaucoup plus d'argent.

Même regarder chaque jour des centaines d'images dérangeantes pour un être humain peut entraîner une maladie mentale après un certain temps.

Notre approche

À l'ère de l'intelligence artificielle et de l'apprentissage automatique, nous pouvons utiliser les technologies de l'IA à notre avantage. En utilisant l'intelligence artificielle, nous pouvons détecter automatiquement les images NSFW et leur attribuer un score NSFW. Ensuite, nous pouvons les brouiller par programme en fonction de leur score NSFW. Cela signifie que les développeurs ont un contrôle total sur le contenu NSFW. Maintenant, la question naturelle qui vous vient à l'esprit est la suivante : comment pouvons-nous créer nous-mêmes un modèle d'IA ?

La réponse évidente est que vous n'en avez pas besoin. Nous pouvons utiliser les API de n'importe quel SaaS (logiciel en tant que service) fourni qui fournit des solutions basées sur l'intelligence artificielle. Dans cet article, nous utilisons les API Pixlab pour automatiser la détection NSFW et brouiller l'image lorsqu'elle dépasse une certaine limite NSFW.

Ordre du jour de l'article

Dans cet article, nous allons réaliser un projet web. Avec l'aide de ce projet, je vous démontre,

1. Comment détecter le score NSFW d'une image en ligne.

2. Comment détecter le score NSFW d'une image locale.

3. Comment flouter une image en fonction de son score NSFW.

   
   

Ceci est un article long et j'essaie de vous donner autant de pratique que possible à travers cet article. Je pense que vous pouvez créer votre propre système de détection NSFW après avoir lu cet article. Alors, s'il vous plaît, prenez une tasse de café et commençons notre tutoriel.

Comme j'utilise les points de terminaison de l' API Pixlab dans ce didacticiel, assurez-vous d'obtenir une clé API pour la même chose.

Besoin d'un serveur proxy

L'API Pixlab n'est pas compatible CORS (Cross-origin resource sharing). Pour éviter les problèmes de sécurité, notre navigateur ne nous permet pas de nous connecter à des sites Web d'origine croisée. Par conséquent, nous avons besoin d'un serveur proxy pour contourner la restriction CORS. Les serveurs n'ont pas de restrictions CORS.

Créez donc un serveur Nodejs et Expressjs et effectuez la configuration de base. nous écrivons tout notre code serveur dans le fichier 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"); });

Obtenez le score NSFW des images en ligne

Pour obtenir le score NSFW d'une image en ligne, nous ajoutons une route GET express à /nsfw . Nous utilisons cette image NSFW du site Web de pexels pour cette comparaison.

À l'intérieur de la route /nsfw , nous appelons le point de terminaison de l' API NSFW de Pixlab. Ce point de terminaison nécessite 2 paramètres. Le lien de l'image et la clé API. Lorsque l'API répond, nous envoyons la réponse directement au client.

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

Pour le front-end, créez un nouveau projet Web en créant un fichier index.html avec un fichier javascript appelé index.js . Liez le fichier javascript dans le fichier HTML. Le contenu du fichier HTML ressemble à ceci.

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

Nous devons maintenant ajouter un bouton pour invoquer notre appel API NSFW.

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

Maintenant, dans le fichier index.js , nous créons une fonction getnsfwscore() . Cette fonction nous permet d'appeler le point de terminaison /nsfw de notre serveur 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 réponse, l'API Pixlab NSFW renvoie un score NSFW. Le score NSFW varie de 0 à 1. La réponse typique de l'API ressemble à ceci.

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

Vous pouvez maintenant utiliser ce score pour filtrer les images téléchargées.

Score NSFW de l'image locale

Vous pouvez également télécharger vos images locales pour déterminer le score NSFW de cette image. Il s'agit d'un processus en 2 étapes. Dans un premier temps, nous téléchargeons cette image sur le stockage en ligne de Pixlab et obtenons le lien en ligne de cette image. Ensuite, nous pouvons suivre l'étape précédente avec cette URL d'image en ligne fournie par Pixlab.

Pour télécharger notre image locale, nous utilisons l'API de magasin de Pixlab. Nous avons créé une route /upload dans notre serveur proxy express. Pour prendre en charge les téléchargements d'images, nous utilisons le plug-in express-fileupload .

Pour télécharger une image dans l'API du magasin, nous effectuons une requête POST avec l'image et la clé API. Nous utilisons l'objet FormData pour construire notre requête.

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

Le bloc de code ci-dessus fait la demande et transmet la réponse au frontal.

Dans le front-end, nous utilisons une entrée de fichier pour obtenir l'image locale de l'utilisateur.

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

Dans notre fichier index.js , nous avons créé la fonction uploadToStore pour télécharger l'image sur notre serveur 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"; } }

Maintenant, nous écoutons tout changement dans l'entrée du fichier. Si l'utilisateur sélectionne une image, nous appelons cette fonction 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 réponse, nous obtenons l'URL de l'image en ligne de notre image locale. Vous pouvez vérifier l'image dans votre navigateur en utilisant ces 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 }

Maintenant, pour calculer le score NSFW de cette image, vous pouvez suivre la section précédente sur l'obtention du score NSFW pour une image en ligne.

Flou des images par programmation

Après avoir filtré les images en fonction de leurs scores NSFW, nous brouillons les images inappropriées. Pour flouter une image, nous utilisons le point de terminaison de l' API Blur de Pixlab.

Nous créons une route GET /blur dans notre serveur proxy pour appeler l'API blur de Pixlab. Le point de terminaison de l'API nécessite l'URL de l'image, le rayon du flou, le paramètre sigma et votre clé 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)); });

Vous pouvez modifier le processus de floutage en faisant varier les paramètres de rayon et sigma.

Dans le front-end, nous créons une fonction blurImage . Cette fonction envoie une requête GET au point de terminaison /blur de notre serveur proxy.

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

En réponse, le serveur Pixlab renvoie une version floue de votre image téléchargée. Vous pouvez utiliser l'URL de l'image floue pour l'afficher dans votre frontal.

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

Conclusion

Vous pouvez trouver les exemples de code pour ce tutoriel dans mon GitHub gist. Si vous aimez ce tutoriel, vous pouvez lire des tutoriels plus intéressants sur mon blog . Si vous avez des commentaires, vous pouvez me trouver sur Twitter en tant que @hrishikeshpathak .

Question fréquemment posée

Pouvons-nous brouiller notre image sans utiliser ces API ?

Oui, vous pouvez utiliser le filtre de flou CSS pour flouter n'importe quelle image sur votre site Web. Sélectionnez votre élément d'image HTML en utilisant une classe unique, un identifiant ou en utilisant javascript, puis appliquez le filtre de flou.

 filter: blur(4px);

En savoir plus sur les filtres de flou CSS sur le site Web de MDN .

L'utilisation d'un serveur proxy est-elle obligatoire ?

Non, j'utilise ce serveur proxy uniquement à des fins de démonstration. Vous pouvez utiliser votre propre serveur de production à cette fin. J'utilise un serveur proxy juste pour contourner la restriction CORS du navigateur.