9,668 測定値

NSFW 画像をフィルタリングし、プログラムでぼかしを入れる方法

に Hrishikesh Pathak8m2022/08/14

長すぎる; 読むには

このチュートリアルでは、機械学習アルゴリズムを使用して NSFW 画像を検出し、NSFW スコアに基づいてプログラムでそれらをぼかす方法を見ていきます。

Companies Mentioned

featured image - NSFW 画像をフィルタリングし、プログラムでぼかしを入れる方法

ユーザーが画像をアップロードできるソーシャルアプリを構築している場合、開発者にとってコンテンツモデレートは最も重要なタスクです。ユーザーが不快な画像をプラットフォームにアップロードすると、他のユーザーの感情を傷つけたり、極端な場合には法的な問題になる可能性があります。

したがって、最善の策は、コンテンツポリシーに違反する NSFW コンテンツを削除またはぼかすことです。このチュートリアルでは、機械学習アルゴリズムを使用して NSFW 画像を検出し、画像を自動的にぼかします。

問題文

数千または数百万のユーザーがいる場合、すべての画像を手動で確認して手動でぼかすことはできません。それには多くの人手と多くの資金が必要です。

人間にとって毎日何百もの不快な画像を見ても、しばらくすると精神疾患につながる可能性があります.

私たちのアプローチ

人工知能と機械学習の時代に、私たちは AI テクノロジーを私たちの利益のために利用することができます。人工知能を使用することで、NSFW 画像を自動的に検出し、NSFW スコアを与えることができます。次に、NSFW スコアに従って、プログラムでそれらをぼかすことができます。これは、開発者が NSFW コンテンツを完全に制御できることを意味します。ここで自然に頭に浮かぶ疑問は、AI モデルを自分で作成するにはどうすればよいかということです。

明白な答えは、必要ないということです。人工知能ベースのソリューションを提供する SaaS (サービスとしてのソフトウェア) から API を利用できます。この記事では、 Pixlab APIを使用して NSFW 検出を自動化し、特定の NSFW 制限を超えたときに画像をぼかします。

記事の議題

この記事では、Web プロジェクトを作成します。このプロジェクトの助けを借りて、私はあなたに、

オンライン画像の NSFW スコアを検出する方法。
ローカルイメージの NSFW スコアを検出する方法。
NSFW スコアに応じて画像をぼかす方法。

これは長い形式の記事であり、この記事を通じてできる限り多くの実践的な練習を提供しようとしています.この記事を読めば、あなた自身の NSFW 検出システムを作成できると思います。それでは、コーヒーを飲んでチュートリアルを始めましょう。

このチュートリアルではPixlab API エンドポイントを使用しているため、必ず同じ API キーを取得してください。

プロキシサーバーの必要性

Pixlab API は CORS (クロスオリジンリソース共有) に対応していません。セキュリティ上の問題を回避するために、私たちのブラウザーでは、クロスオリジンの Web サイトへの接続が許可されていません。したがって、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 スコアを取得するには、高速GETルートを/nsfwに追加します。この比較には、pexels Web サイトのこの NSFW 画像を使用します。

/nsfwルート内で、Pixlab のNSFW API エンドポイントを呼び出します。このエンドポイントには 2 つのパラメーターが必要です。画像リンクと API キー。 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)); });

フロントエンドの場合、 index.jsという javascript ファイルと一緒にindex.htmlファイルを作成して、新しい Web プロジェクトを作成します。 HTML ファイル内で JavaScript ファイルをリンクします。 HTMLファイル内の内容はこんな感じ。

 <!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 スコアを確認することもできます。これは 2 ステップのプロセスです。まず、この画像を Pixlab のオンラインストレージにアップロードし、その画像のオンラインリンクを取得します。次に、Pixlab から提供されたオンライン画像の URL を使用して、前の手順を実行できます。

ローカル画像をアップロードするには、Pixlab のストア API を使用します。エクスプレスプロキシサーバーで/uploadルートを作成しました。画像のアップロードをサポートするために、 express-fileuploadプラグインを使用します。

ストア API に画像をアップロードするには、画像と API キーを使用してPOSTリクエストを行います。 FormData オブジェクトを使用してクエリを作成しています。

 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 /blurルートを作成して、Pixlab の blur API を呼び出します。 API エンドポイントには、画像の URL、ぼかしの半径、シグマパラメータ、pixlab API キーが必要です。

 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)); });

半径とシグマパラメータを変更することで、ぼかし処理を変更できます。

フロントエンドでは、 blurImage関数を作成します。この関数は、プロキシサーバーの/blurエンドポイントに対して GET 要求を行います。

 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 }