Cách lọc hình ảnh NSFW và làm mờ hình ảnh theo chương trình

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 API Pixlab để 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.

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,

1. Cách phát hiện điểm NSFW của hình ảnh trực tuyến.

2. Cách phát hiện điểm NSFW của hình ảnh cục bộ.

3. 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 điểm cuối API Pixlab trong hướng dẫn này, hãy đảm bảo nhận được khóa API tương tự.

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 GET nhanh đến /nsfw . Chúng tôi sử dụng hình ảnh NSFW này từ trang web pexels để so sánh này.

Bên trong tuyến /nsfw nsfw, chúng tôi gọi điểm cuối API NSFW 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.

 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 index.html cùng với tệp javascript được gọi là index.js . 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.

 <!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 index.js , chúng ta tạo một hàm getnsfwscore() . Chức năng này cho phép chúng tôi thực hiện các cuộc gọi đến /nsfw endpoint của máy chủ proxy của chúng tôi.

 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 /upload 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 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 POST 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.

 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 index.js của chúng tôi, chúng tôi đã thực hiện chức năng uploadToStore để tải hình ảnh lên máy chủ proxy của chúng tôi.

 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 điểm cuối API làm mờ của Pixlab.

Chúng tôi tạo một tuyến GET /blur 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.

 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 blurImage . Chức năng này thực hiện yêu cầu GET tới điểm cuối /blur của máy chủ proxy của chúng tôi.

 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 hướng dẫn thú vị hơn trên blog của tôi . 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 @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.