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 des cas extrêmes, 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 des centaines d’images dérangeantes d’un être humain chaque jour 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,
- 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’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 server.js dossier.
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 un express GET Route vers /nsfw. Nous utilisons cette image NSFW du site Web de pexels pour cette comparaison.
À l’intérieur de /nsfw route, nous appelons le point de terminaison de l’API NSFW de Pixlab. Ce point de terminaison nécessite deux 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 faisant un index.html fichier 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 data-fr-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="https://dzone.com/articles/./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 à l’intérieur du index.js fichier, nous faisons une fonction getnsfwscore(). Cette fonction nous permet d’appeler /nsfw endpoint 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 zéro à un. 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 fait un /upload route 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 faisons un POST requête 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 frontal, nous utilisons une entrée de fichier pour obtenir l’image locale de l’utilisateur.
<input type="file" id="localImage">A l’intérieur de notre index.js fichier, nous avons fait uploadToStore fonction 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 choisit une image, nous l’appelons uploadToStore fonction.
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 programme
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 un GET /blur route 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 faisons un blurImage fonction. Cette fonction envoie une requête GET au /blur endpoint 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
}
Question fréquemment posée
Pouvons-nous flouter notre image sans utiliser ces API ?
Oui, vous pouvez utiliser un 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.
En savoir plus sur les filtres de flou CSS sur le MDN…