Nếu bạn đang xây dựng một ứng dụng xã hội nơi người dùng có thể tải lên hình ảnh, thì việc kiểm duyệt nội dung sẽ là nhiệm vụ quan trọng nhất đối với các nhà phát triển của bạn. Nếu người dùng tải lên bất kỳ hình ảnh đáng lo ngại nào trên nền tảng của bạn, điều đó có thể làm tổn thương tình cảm của người khác hoặc trong trường hợp cực đoan, nó có thể trở thành một vấn đề pháp lý. Do đó, tốt nhất bạn nên xóa hoặc làm mờ nội dung NSFW vi phạm chính sách nội dung của bạn. Trong hướng dẫn này, chúng ta sẽ xem xét cách phát hiện hình ảnh NSFW bằng thuật toán máy học và sau đó tự động làm mờ hình ảnh. Tuyên bố vấn đề Nếu bạn có hàng nghìn hoặc hàng triệu người dùng, thì không thể xem lại từng hình ảnh một cách thủ công và làm mờ chúng bằng tay. Nó cần rất nhiều nhân lực và nhiều tiền hơn. Ngay cả khi xem hàng trăm hình ảnh đáng lo ngại đối với con người mỗi ngày có thể dẫn đến bệnh tâm thần sau một thời gian. Cách tiếp cận của chúng ta Trong kỷ nguyên của trí tuệ nhân tạo và máy học, chúng ta có thể sử dụng các công nghệ AI vì lợi ích của mình. Bằng cách sử dụng trí thông minh nhân tạo, chúng tôi có thể tự động phát hiện hình ảnh NSFW và cho chúng điểm NSFW. Sau đó, chúng tôi có thể lập trình làm mờ chúng theo điểm NSFW của chúng. Nó có nghĩa là các nhà phát triển có toàn quyền kiểm soát nội dung NSFW. Bây giờ câu hỏi tự nhiên xuất hiện trong đầu bạn là, Làm thế nào chúng ta có thể tự tạo ra một mô hình AI? Câu trả lời rõ ràng là bạn không cần phải làm vậy. Chúng tôi có thể sử dụng các API từ bất kỳ SaaS nào (phần mềm dưới dạng dịch vụ) được cung cấp để cung cấp các giải pháp dựa trên trí tuệ nhân tạo. Trong bài viết này, chúng tôi đang sử dụng để tự động phát hiện NSFW và làm mờ hình ảnh khi nó vượt quá giới hạn NSFW nhất định. API Pixlab Chương trình nghị sự của Bài báo Trong bài viết này, chúng ta sẽ thực hiện một dự án web. Với sự giúp đỡ của dự án này, tôi chứng minh cho bạn thấy, Cách phát hiện điểm NSFW của hình ảnh trực tuyến. Cách phát hiện điểm NSFW của hình ảnh cục bộ. Cách làm mờ hình ảnh tùy thuộc vào điểm NSFW của hình ảnh đó. Đây là một bài viết dài và tôi đang cố gắng cung cấp cho bạn nhiều thực hành nhất có thể thông qua bài viết này. Tôi tin rằng bạn có thể tạo hệ thống phát hiện NSFW của riêng mình sau khi đọc bài viết này. Vì vậy, hãy lấy một tách cà phê và bắt đầu hướng dẫn của chúng tôi. Vì tôi đang sử dụng trong hướng dẫn này, hãy đảm bảo nhận được khóa API tương tự. điểm cuối API Pixlab Cần một máy chủ proxy API Pixlab không được bật CORS (Chia sẻ tài nguyên nhiều nguồn gốc). Để tránh các vấn đề bảo mật, trình duyệt của chúng tôi không cho phép chúng tôi kết nối với các trang web có nguồn gốc chéo. Do đó, chúng tôi cần một máy chủ proxy để vượt qua hạn chế CORS. Máy chủ không có giới hạn CORS. Vì vậy, hãy tạo một máy chủ Nodejs và Expressjs và thực hiện thiết lập cơ bản. chúng tôi viết tất cả mã máy chủ của chúng tôi trong tệp . 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"); }); Nhận Điểm NSFW về Hình ảnh Trực tuyến Để có được điểm NSFW của một hình ảnh trực tuyến, chúng tôi thêm một tuyến nhanh đến . Chúng tôi sử dụng từ trang web pexels để so sánh này. GET /nsfw hình ảnh NSFW này Bên trong tuyến nsfw, chúng tôi gọi của Pixlab. Điểm cuối này yêu cầu 2 tham số. Liên kết hình ảnh và khóa API. Khi API phản hồi lại, chúng tôi sẽ gửi phản hồi trực tiếp đến máy khách. /nsfw điểm cuối 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)); }); Đối với giao diện người dùng, hãy tạo một dự án web mới bằng cách tạo cùng với tệp javascript được gọi là . Liên kết tệp javascript bên trong tệp HTML. Nội dung bên trong tệp HTML trông như thế này. 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> Bây giờ chúng ta cần thêm một nút để gọi lệnh gọi API NSFW của chúng ta. <button id="getscore">Get NSFW Score</button> Bây giờ bên trong , chúng ta tạo một hàm . Chức năng này cho phép chúng tôi thực hiện các cuộc gọi đến endpoint của máy chủ proxy của chúng tôi. 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; } } Đáp lại, API Pixlab NSFW trả về điểm NSFW. Điểm NSFW nằm trong khoảng từ 0 đến 1. Phản hồi điển hình từ API trông như thế này. { "score": 0.7187498807907104, "status": 200 } Bây giờ bạn có thể sử dụng số điểm này để lọc các hình ảnh đã tải lên. Điểm NSFW của Hình ảnh Địa phương Bạn cũng có thể tải lên hình ảnh cục bộ của mình để xác định điểm NSFW của hình ảnh đó. Đây là một quy trình gồm 2 bước. Lúc đầu, chúng tôi tải hình ảnh này lên kho lưu trữ trực tuyến của Pixlab và lấy liên kết trực tuyến của hình ảnh đó. Sau đó, chúng ta có thể làm theo bước trước với URL hình ảnh trực tuyến do Pixlab cung cấp. Để tải lên hình ảnh địa phương của chúng tôi, chúng tôi sử dụng API cửa hàng của Pixlab. Chúng tôi đã thực hiện một trong máy chủ proxy nhanh của chúng tôi. Để hỗ trợ tải lên hình ảnh, chúng tôi sử dụng plugin tải tệp lên . /upload nhanh Để tải hình ảnh lên API cửa hàng, chúng tôi thực hiện yêu cầu với hình ảnh và khóa API. Chúng tôi đang sử dụng đối tượng FormData để xây dựng truy vấn của chúng tôi. 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); } }); Khối mã trên thực hiện yêu cầu và chuyển tiếp phản hồi đến giao diện người dùng. Trong giao diện người dùng, chúng tôi sử dụng đầu vào tệp để lấy hình ảnh cục bộ của người dùng. <input type="file" id="localImage"> Bên trong của chúng tôi, chúng tôi đã thực hiện chức năng để tải hình ảnh lên máy chủ proxy của chúng tôi. 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"; } } Bây giờ chúng tôi lắng nghe bất kỳ thay đổi nào trong đầu vào tệp. Nếu người dùng chọn bất kỳ hình ảnh nào, chúng tôi gọi đây là chức năng . 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); } }) Đáp lại, chúng tôi nhận được URL hình ảnh trực tuyến của hình ảnh địa phương của chúng tôi. Bạn có thể kiểm tra hình ảnh trong trình duyệt của mình bằng cách sử dụng các URL này. { 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 } Bây giờ để tính điểm NSFW của hình ảnh này, bạn có thể làm theo phần trước về cách tính điểm NSFW cho hình ảnh trực tuyến. Làm mờ hình ảnh có lập trình Sau khi lọc các hình ảnh theo điểm NSFW của chúng, chúng tôi sẽ làm mờ các hình ảnh không phù hợp. Để làm mờ hình ảnh, chúng tôi sử dụng của Pixlab. điểm cuối API làm mờ Chúng tôi tạo một tuyến GET trong máy chủ proxy của mình để gọi API mờ của Pixlab. Điểm cuối API yêu cầu URL hình ảnh, bán kính mờ, thông số sigma và khóa API pixlab của bạn. /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)); }); Bạn có thể sửa đổi quá trình làm mờ bằng cách thay đổi các thông số bán kính và sigma. Trong giao diện người dùng, chúng tôi tạo một chức năng . Chức năng này thực hiện yêu cầu GET tới điểm cuối của máy chủ proxy của chúng tôi. blurImage /blur async function blurImage(){ try { let response =await fetch("http://localhost:5000/blur"); console.log(await response.json()); } catch (error) { throw error; } } Đáp lại, máy chủ Pixlab trả về phiên bản mờ của hình ảnh đã tải lên của bạn. Bạn có thể sử dụng URL hình ảnh mờ để hiển thị trong giao diện người dùng của mình. { 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 } Sự kết luận Bạn có thể tìm thấy các mẫu mã cho hướng dẫn này trong ý chính GitHub của tôi. Nếu bạn thích hướng dẫn này, bạn có thể đọc các . Nếu bạn có bất kỳ phản hồi nào, bạn có thể tìm thấy tôi trên Twitter với tên . hướng dẫn thú vị hơn trên blog của tôi @hrishikeshpathak Câu hỏi thường gặp Chúng tôi có thể làm mờ hình ảnh của mình mà không sử dụng các API này không? Có, Bạn có thể sử dụng bộ lọc làm mờ CSS để làm mờ bất kỳ hình ảnh nào trên trang web của mình. Chọn phần tử hình ảnh HTML của bạn bằng cách sử dụng lớp, id duy nhất hoặc sử dụng javascript, sau đó áp dụng bộ lọc mờ. filter: blur(4px); Tìm hiểu thêm về bộ lọc làm mờ CSS trên . trang web MDN Sử dụng máy chủ proxy có bắt buộc không? Không, tôi đang sử dụng máy chủ proxy này chỉ để trình diễn. Bạn có thể sử dụng máy chủ sản xuất của riêng mình cho mục đích này. Tôi đang sử dụng máy chủ proxy chỉ để vượt qua hạn chế CORS của trình duyệt.
