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 pour automatiser la détection NSFW et brouiller l'image lorsqu'elle dépasse une certaine limite NSFW. utilisons les API Pixlab 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, Comment détecter le score NSFW d'une image en ligne. Comment détecter le score NSFW d'une image locale. 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' dans ce didacticiel, assurez-vous d'obtenir une clé API pour la même chose. API Pixlab 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 express à . Nous utilisons NSFW du site Web de pexels pour cette comparaison. GET /nsfw cette image À l'intérieur de la route , nous appelons le point de terminaison de l' 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. /nsfw API 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 avec un fichier javascript appelé . Liez le fichier javascript dans le fichier HTML. Le contenu du fichier HTML ressemble à ceci. 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> Nous devons maintenant ajouter un bouton pour invoquer notre appel API NSFW. <button id="getscore">Get NSFW Score</button> Maintenant, dans le fichier , nous créons une fonction . Cette fonction nous permet d'appeler le point de terminaison de notre serveur 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 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 dans notre serveur proxy express. Pour prendre en charge les téléchargements d'images, nous utilisons le plug-in . /upload express-fileupload Pour télécharger une image dans l'API du magasin, nous effectuons une requête avec l'image et la clé API. Nous utilisons l'objet FormData pour construire notre requête. 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); } }); 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 , nous avons créé la fonction pour télécharger l'image sur notre serveur 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"; } } 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' Blur de Pixlab. API Nous créons une route GET 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. /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)); }); 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 . Cette fonction envoie une requête GET au point de terminaison de notre serveur 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 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 . Si vous avez des commentaires, vous pouvez me trouver sur Twitter en tant que . tutoriels plus intéressants sur mon blog @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.
