ユーザーが画像をアップロードできるソーシャル アプリを構築している場合、開発者にとってコンテンツ モデレートは最も重要なタスクです。ユーザーが不快な画像をプラットフォームにアップロードすると、他のユーザーの感情を傷つけたり、極端な場合には法的な問題になる可能性があります。 したがって、最善の策は、コンテンツ ポリシーに違反する NSFW コンテンツを削除またはぼかすことです。このチュートリアルでは、機械学習アルゴリズムを使用して NSFW 画像を検出し、画像を自動的にぼかします。 問題文 数千または数百万のユーザーがいる場合、すべての画像を手動で確認して手動でぼかすことはできません。それには多くの人手と多くの資金が必要です。 人間にとって毎日何百もの不快な画像を見ても、しばらくすると精神疾患につながる可能性があります. 私たちのアプローチ 人工知能と機械学習の時代に、私たちは AI テクノロジーを私たちの利益のために利用することができます。人工知能を使用することで、NSFW 画像を自動的に検出し、NSFW スコアを与えることができます。次に、NSFW スコアに従って、プログラムでそれらをぼかすことができます。これは、開発者が NSFW コンテンツを完全に制御できることを意味します。ここで自然に頭に浮かぶ疑問は、AI モデルを自分で作成するにはどうすればよいかということです。 明白な答えは、必要ないということです。人工知能ベースのソリューションを提供する SaaS (サービスとしてのソフトウェア) から API を利用できます。この記事では、 を使用して NSFW 検出を自動化し、特定の NSFW 制限を超えたときに画像をぼかします。 Pixlab API 記事の議題 この記事では、Web プロジェクトを作成します。このプロジェクトの助けを借りて、私はあなたに、 オンライン画像の NSFW スコアを検出する方法。 ローカル イメージの NSFW スコアを検出する方法。 NSFW スコアに応じて画像をぼかす方法。 これは長い形式の記事であり、この記事を通じてできる限り多くの実践的な練習を提供しようとしています.この記事を読めば、あなた自身の NSFW 検出システムを作成できると思います。それでは、コーヒーを飲んでチュートリアルを始めましょう。 このチュートリアルでは を使用しているため、必ず同じ API キーを取得してください。 Pixlab 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 スコアを取得するには、高速 ルートを に追加します。この比較には、pexels Web サイトの を使用します。 GET /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.js index.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 キーを使用して リクエストを行います。 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 の blur API を呼び出します。 API エンドポイントには、画像の URL、ぼかしの半径、シグマ パラメータ、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)); }); 半径とシグマ パラメータを変更することで、ぼかし処理を変更できます。 フロントエンドでは、 関数を作成します。この関数は、プロキシ サーバーの エンドポイントに対して 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 ぼかしフィルターを使用して、Web サイトの画像をぼかすことができます。一意のクラス、ID、または JavaScript を使用して HTML 画像要素を選択し、ぼかしフィルターを適用します。 filter: blur(4px); で CSS ぼかしフィルターの詳細をご覧ください。 MDN Web サイト プロキシ サーバーの使用は必須ですか? いいえ、このプロキシ サーバーはデモンストレーションのためだけに使用しています。この目的のために、独自の本番サーバーを使用できます。ブラウザの CORS 制限を回避するためだけにプロキシ サーバーを使用しています。
