如果您正在构建一个用户可以上传图像的社交应用程序，那么内容审核应该是您的开发人员最重要的任务。如果用户在您的平台上上传任何令人不安的图像，可能会伤害他人的情绪，在极端情况下，可能会成为法律问题。 因此，您最好的选择应该是删除或模糊违反您的内容政策的 NSFW 内容。在本教程中，我们将了解如何使用机器学习算法检测 NSFW 图像，然后自动模糊图像。 问题陈述 如果您有成千上万的用户，那么不可能手动查看每张图像并手动模糊它们。它需要大量的人力和更多的资金。 即使每天为一个人观看数百张令人不安的图像，一段时间后也会导致精神疾病。 我们的方法 在人工智能和机器学习时代，我们可以利用人工智能技术为我们谋福利。通过使用人工智能，我们可以自动检测 NSFW 图像并给它们一个 NSFW 分数。然后我们可以根据他们的 NSFW 分数以编程方式模糊它们。这意味着开发人员可以完全控制 NSFW 内容。现在你想到的自然问题是，我们如何自己制作 AI 模型？ 显而易见的答案是你不需要。我们可以利用任何提供基于人工智能的解决方案的 SaaS（软件即服务）的 API。在本文中，我们使用 自动检测 NSFW 并在图像超过特定 NSFW 限制时模糊图像。 Pixlab API 文章议程 在本文中，我们将创建一个 Web 项目。在这个项目的帮助下，我向你展示， 如何检测在线图像的 NSFW 分数。 如何检测本地图像的 NSFW 分数。 如何根据 NSFW 分数模糊图像。 这是一篇长篇文章，我试图通过这篇文章为您提供尽可能多的动手实践。相信看完这篇文章你可以做出自己的NSFW检测系统。所以请喝杯咖啡，让我们开始我们的教程。 当我在本教程中使用 时，请确保获取相同的 API 密钥。 Pixlab API 端点 需要代理服务器 Pixlab API 未启用 CORS（跨域资源共享）。为避免安全问题，我们的浏览器不允许我们连接跨域网站。因此我们需要一个代理服务器来绕过 CORS 限制。服务器没有 CORS 限制。 因此，制作一个 Nodejs 和 Expressjs 服务器并进行基本设置。我们在 文件中编写所有服务器代码。 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"); }); 获取在线图片的 NSFW 分数 为了获得在线图像的 NSFW 分数，我们将快速 路由添加到 。我们使用来自 pexels 网站的 进行比较。 GET /nsfw 这张 NSFW 图片 在 nsfw 路由中，我们调用 Pixlab 的 。此端点需要 2 个参数。图片链接和 API 密钥。当 API 响应时，我们将响应直接发送给客户端。 /nsfw 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)); }); 对于前端，通过创建一个 文件和一个名为 的 javascript 文件来创建一个新的 Web 项目。在 HTML 文件中链接 javascript 文件。 HTML 文件中的内容如下所示。 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> 现在我们需要添加一个按钮来调用我们的 NSFW API 调用。 <button id="getscore">Get NSFW Score</button> 现在在 文件中，我们创建了一个函数 。这个函数让我们可以调用代理服务器的 端点。 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; } } 作为响应，Pixlab NSFW API 返回一个 NSFW 分数。 NSFW 分数范围从 0 到 1。来自 API 的典型响应如下所示。 { "score": 0.7187498807907104, "status": 200 } 现在您可以使用此分数来过滤上传的图像。 本地图像的 NSFW 分数 您还可以上传本地图像以确定该图像的 NSFW 分数。这是一个两步的过程。首先，我们将这张图片上传到 Pixlab 的在线存储中，并获取该图片的在线链接。然后我们可以使用 Pixlab 提供的在线图像 URL 执行上一步。 要上传我们的本地图像，我们使用 Pixlab 的商店 API。我们在快速代理服务器中创建了 路由。为了支持图片上传，我们使用 插件。 /upload express-fileupload 要将图像上传到商店 API，我们使用图像和 API 密钥发出 请求。我们正在使用 FormData 对象来构造我们的查询。 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); } }); 上面的代码块发出请求并将响应转发给前端。 在前端，我们使用文件输入来获取用户的本地图像。 <input type="file" id="localImage"> 在我们的 文件中，我们创建了 函数来将图像上传到我们的代理服务器。 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"; } } 现在我们监听文件输入的任何变化。如果用户选择了任何图像，我们将调用此 函数。 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); } }) 作为响应，我们获得了本地图像的在线图像 URL。您可以使用这些 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 } 现在要计算此图像的 NSFW 分数，您可以按照上一节获取在线图像的 NSFW 分数。 以编程方式模糊图像 根据 NSFW 分数过滤图像后，我们模糊了不合适的图像。为了模糊图像，我们使用 Pixlab 的 。 blur API 端点 我们在代理服务器中创建一个 GET 路由来调用 Pixlab 的模糊 API。 API 端点需要图像 URL、模糊半径、sigma 参数和您的 pixlab API 密钥。 /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)); }); 您可以通过改变半径和 sigma 参数来修改模糊过程。 在前端，我们制作了一个 函数。该函数向我们的代理服务器的 端点发出 GET 请求。 blurImage /blur async function blurImage(){ try { let response =await fetch("http://localhost:5000/blur"); console.log(await response.json()); } catch (error) { throw error; } } 作为响应，Pixlab 服务器会返回您上传图像的模糊版本。您可以使用模糊图像 URL 显示在您的前端。 { 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 } 结论 您可以在我的 GitHub gist 中找到本教程的代码示例。如果你喜欢这个教程，你可以 。如果您有任何反馈，可以在 Twitter 上以 的身份找到我。 在我的博客上阅读更多有趣的教程 @hrishikeshpathak 经常被问到的问题 我们可以在不使用这些 API 的情况下模糊我们的图像吗？ 是的，您可以使用 CSS 模糊过滤器来模糊您网站上的任何图像。使用唯一的类、ID 或使用 javascript 选择您的 HTML 图像元素，然后应用模糊过滤器。 filter: blur(4px); 在 上了解有关 CSS 模糊过滤器的更多信息。 MDN 网站 是否必须使用代理服务器？ 不，我使用这个代理服务器只是为了演示。为此，您可以使用自己的生产服务器。我使用代理服务器只是为了绕过浏览器 CORS 限制。
