paint-brush
ICP 顔認識 DApp のテスト: 最終結果に驚く@induction
431 測定値
431 測定値

ICP 顔認識 DApp のテスト: 最終結果に驚く

Vision NP9m2024/09/21
Read on Terminal Reader

長すぎる; 読むには

インターネット コンピュータ プロトコル (ICP) は、完全に分散化されたクラウド インフラストラクチャ上でアプリケーションを実行できるようにすることで、AI を分散化することに取り組んでいます。このような分散化アプローチにより、AI 操作の透明性、検閲耐性、単一障害点の発生率の低下が保証されます。各ステップの微妙なデモンストレーションを通じて、AI の分散化が客観的にどのように機能するかを確認します。
featured image - ICP 顔認識 DApp のテスト: 最終結果に驚く
Vision NP HackerNoon profile picture
0-item
1-item

過去数年間は、ChatGPT、Google の Gemini、Microsoft の Copilot などの集中型サーバーベースの AI モデルにとって特別な年でした。このような AI モデルがさまざまな側面を変革したことは間違いありません。しかし、一方で、欠点もあります。おそらく、 ChatGPT の数回の停止についても聞いたことがあるでしょう。


集中型サーバーベースのモデルは、単一障害点のリスクが非常に高くなります。しかし、時代は変わりました。ブロックチェーン技術は、人工知能 (AI) を含む多くの分野にも革命をもたらしています。


Dfinity が開発したインターネット コンピュータ プロトコル (ICP) は、AI アプリケーションを完全に分散化されたクラウド インフラストラクチャ上で実行できるようにすることで、AI を分散化することに取り組んでいます。ICP のユニークな点は、AI モデルとサービスを独立したデータ センターのネットワーク全体に展開できることです。このような分散化アプローチにより、AI 操作は透明性が高く、検閲に強く、単一障害点が発生しにくくなります。


この記事は、ICP に基づく実践的なテスト顔認識 DAppとは対照的です。各ステップの微妙なデモンストレーションを通じて、AI の分散化が客観的にどのように機能するかを確認します。複雑な技術的概念をわかりやすいチュートリアルに分解しようとしたので、始めましょう。


プロジェクトの開発およびテストのプロセス全体は Windows ベースのマシンで実行されましたが、多くの ICP 開発ツールとスクリプトは Linux ベースの環境用に最適化されているため、ここでは Linux サブシステムを作成しています。


📥前提条件:

  • オペレーティング システム: Windows Subsystem for Linux (WSL) がインストールされた Windows。インストールについては、このガイドを参照してください。


  • 知識

    • JavaScriptReact.jsRustWebAssemblyの基本的な理解。

    • Web 開発の概念に関する知識。


  • ツール:

    • DFX SDK (ICP 開発フレームワーク)
    • Node.js と npm。
    • Rust: Rust ツールチェーンをインストールします。
    • Git:リポジトリをクローンするにはこれが必要です。インストールするには、 Git のガイドラインに従ってください。
    • wasi2ic: WASI 依存の Wasm モジュールを ICP 上で実行できるように変換するツール。
    • wasm-opt: WebAssembly オプティマイザー。


📥開発環境をセットアップする:

  1. WSL ターミナルを開き、次のコマンドを実行して DFX をインストールします。
 sh -ci "$(curl -fsSL https://smartcontracts.org/install.sh)"


👉インストールを確認するには:

 dfx –version


  1. 次のコマンドを実行して Rust をインストールします。
 curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh source $HOME/.cargo/env

👉インストールを確認するには、次のコマンドを実行します。

 rustc –version


3. 次のコマンドを実行して Node.js をインストールします。

 curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash - sudo apt install -y nodejs


👉インストールを確認するには、次のコマンドを実行します。

 node -v npm -v


  1. wasi2ic をインストールします。まず、GitHub リポジトリをクローンします。
 git clone https://github.com/wasm-forge/wasi2ic.git cd wasi2ic cargo install --path .


👉インストールを確認するには、次のコマンドを実行します。

 echo $PATH wasi2ic –help


  1. wasm-opt をインストールします:
 cargo install wasm-opt


📥プロジェクトを複製する:

私たちはテスト目的でプロジェクトの GitHub リポジトリを使用しています。リポジトリはここで確認できます。


1. リポジトリをクローンし、顔認識プロジェクトに移動します。

 git clone https://github.com/dfinity/examples.git cd examples/rust/face-recognition

注:ファイル エクスプローラーで\\wsl$検索するか、Windows OS の直接検索機能を使用して、Linux サブシステム ファイルにアクセスできます。


📥顔認識モデルをダウンロード


  1. 顔検出モデルをダウンロード:

顔検出モデルは、画像内の顔を検出するために使用されます。以下を実行します。

 ./download-face-detection-model.sh


  1. 顔認識モデルをダウンロード:

PyTorchfacenet-pytorchを使用して、モデルを ONNX 形式でエクスポートする必要があります。まず、次の Python ライブラリをインストールします。

 pip install torch facenet-pytorch onnx


注:サブシステムに Python がまだインストールされていない場合は、ここから Python と pip をインストールしてみてください: https://packaging.python.org/en/latest/tutorials/installing-packages/


  1. ONNX モデルをエクスポートします。

Python ファイルまたはシェルで、以下を実行します。ターミナルに python3 と入力し、次のコードを実行します。実行後、exit() と入力します。

 import torch import facenet_pytorch resnet = facenet_pytorch.InceptionResnetV1(pretrained='vggface2').eval() input = torch.randn(1, 3, 160, 160) torch.onnx.export(resnet, input, "face-recognition.onnx", verbose=False, opset_version=11)


これにより、 face-recognition.onnxファイルが生成されます。これをリポジトリのルートにコピーします。


📥ビルド

さて、プロジェクトをビルドします。以下を実行します:

 dfx start --background dfx deploy


すべてが正しく行われると、ターミナルにフロントエンド URL が表示されます。

図 1. フロントエンド URL を含むターミナルでのデプロイメント成功メッセージ

注:クライアントが見つからないためにエラーが発生した場合は、npm を使用してwebpackwebpack-cliグローバルにインストールしてみてください。

sudo npm install -g webpack webpack-cli


そして、ローカル依存関係:

npm install


📥キャニスターを作成し、以下を実行します:

 dfx canister create backend


ターミナルに次のメッセージが表示されます。

図2. ターミナルに表示されるメッセージとキャニスターの作成成功を示す表示

👉これで、キャニスターのバックエンドのステータスを確認できます。

 dfx canister status backend


ターミナルでは次のようなものが表示されます。

図3. キャニスターステータスバックエンド

📥モデルのチャンクアップロード

AI モデルは一般的にサイズが大きいため、スマート コントラクトの WebAssembly (Wasm) バイナリに直接埋め込むことはできません。代わりに、これらのモデルを個別にアップロードする必要があります。これを処理するために、DecideAI はモデルを段階的にアップロードするためのツールを開発しました。このツールは、 ic-file-uploader から入手できます。


👉ツールをインストールするには、次のコマンドを使用します。

 cargo install ic-file-uploader


インストールが完了したら、ターミナルで./upload-models-to-canister.shを実行してupload-models-to-canister.shスクリプトを使用し、モデルをアップロードできます。このスクリプトは、次の手順を実行します。


  1. キャニスターから既存の AI モデルをクリアします。
 dfx canister call backend clear_face_detection_model_bytes dfx canister call backend clear_face_recognition_model_bytes


  1. 新しいモデルを段階的にアップロードします。
 ic-file-uploader backend append_face_detection_model_bytes version-RFB-320.onnx ic-file-uploader backend append_face_recognition_model_bytes face-recognition.onnx


  1. 最後に、スクリプトはアップロードされたモデルをセットアップします。
 dfx canister call backend setup_models


これで、 dfx deployコマンドの実行中にターミナルで受信したURLを使用してフロントエンドと対話できるようになります(図1)。


図4. ニコラ・テスラの写真がアップロードされたdAppのフロントエンドインターフェース。「人物を追加」ボタンをクリックすると、名前を追加するためのダイアログボックスが表示されます。


ICP のロゴをクリックして画像をアップロードしたら、「人物を追加」ボタンをクリックして人物の名前を追加し、モデルをトレーニングしてみます。

顔を自動的に検出し、顔に四角形のマークを付けます。名前を設定すると、次のように追加成功のメッセージが表示されます。

図5. 名前を追加した後に表示されるメッセージ

AI は顔に設定した名前を記憶するため、同じ人物の異なる写真の顔を検出するかどうかをテストできます。ここでは、ニコラ テスラの異なる写真が撮影されています。顔検出用に別の写真をアップロードするには、ページを再読み込みし、[認識] オプションをクリックします。見てみましょう。最初の顔とはわずかに異なりますが、ニコラ テスラの顔が正常に識別されています。

図6. AIは0.68の差で別の写真からニコラ・テスラの顔を検出することに成功した

ここでは、AI が生成したニコラ・テスラの写真がモデルに送信され、驚くべきことに、顔が正確に検出されました。ここで見てみましょう。

図7. AIが生成したニコラ・テスラの顔が、わずか0.77の差でdAppによって検出された

ニコラ・テスラの顔検出に成功したことから、ICP 顔認識 DApp が完璧に動作していることが検証されました。ぜひご自身でお試しください。


テスト目的のため、UI と機能は制限されています。顔認識を目的として、ICP で本番環境対応の dApp を急いで構築する場合は、追加の機能とサービスを追加できます。コード例を使用して、次の機能を試すことができます。必要に応じてコードを追加またはカスタマイズする必要があることに注意してください。


📥ここにいくつかのヒントがあります:

  1. インターネット ID によるユーザー認証の追加

この機能をこの dApp に追加すると、登録ユーザーのみが DApp にアクセスできるようになります。Internet Identity を使用して認証を追加する方法は次のとおりです。ホームページに Internet Identity ログイン ボタンを追加することで、Internet Identity を統合できます。ユーザーがログインすると、パーソナライズされたダッシュボードが表示されます。


追加方法:

👉インターネット ID の依存関係をインストールします。

 npm install @dfinity/agent @dfinity/auth-client


👉認証を有効にするには、フロントエンドに次のコードを追加します。

 import { AuthClient } from "@dfinity/auth-client"; async function init() { const authClient = await AuthClient.create(); if (await authClient.isAuthenticated()) { // Display dashboard or personalized content } else { authClient.login({ identityProvider: "https://identity.ic0.app/#authorize", onSuccess: () => { // Once authenticated, display personalized features }, }); } } init();


👉ログイン後、ユーザーは認識された顔の履歴やその他の個人情報を確認できます。


  1. ドラッグとドラッグアンドドロップ機能による画像アップロード

ユーザーが顔検出用の画像をドラッグ アンド ドロップできるようにすることで、画像アップロード機能とエクスペリエンスをよりスムーズにします。


追加方法:

👉HTML5 のドラッグ アンド ドロップ機能を使用します。

 <div id="drop-area"> <p>Drag and drop an image here or click to select</p> <input type="file" id="file-input" hidden /> </div>


👉ドラッグアンドドロップアクションを処理するための JavaScript を追加します。

 const dropArea = document.getElementById("drop-area"); dropArea.addEventListener("dragover", (event) => { event.preventDefault(); }); dropArea.addEventListener("drop", (event) => { event.preventDefault(); const files = event.dataTransfer.files; // Process the uploaded image });


👉既存の顔検出機能とスムーズに統合されることを確認します。


  1. 顔認識の進捗バー

画像がアップロードされるときに進行状況バーを表示して、システムが画像を処理中であることをユーザーに知らせる機能は魅力的です。


追加方法:

👉シンプルな HTML プログレスバーを使用します。

 <div id="progress-bar"> <div id="progress-fill" style="width: 0%;"></div> </div>


👉画像が処理されるにつれて進行状況バーを動的に更新します。

 const progressFill = document.getElementById("progress-fill"); let progress = 0; const interval = setInterval(() => { progress += 10; progressFill.style.width = `${progress}%`; if (progress === 100) { clearInterval(interval); } }, 100); // Simulate progress every 100ms


  1. 顔認識結果の通知

顔認識が完了すると、モーダル通知またはトースト通知を介してリアルタイム通知を提供する機能を追加できます。


追加方法:

👉Toastrなどの軽量ライブラリやカスタムトースト通知を使用できます。

 <div id="notification" class="hidden">Face Recognition Complete!</div>


👉JavaScript で、バックエンドが結果を返したときに通知を表示します。

 function showNotification(message) { const notification = document.getElementById("notification"); notification.innerHTML = message; notification.classList.remove("hidden"); setTimeout(() => { notification.classList.add("hidden"); }, 3000); // Hide notification after 3 seconds } // Call this after face recognition is done showNotification("Face detected and recognized!");


📥最終ステップ: 再構築とデプロイ

これらの新機能を実装した後:


👉プロジェクトを再構築します:

 dfx build


👉テストネットにデプロイ: メインネットに移行する前にまずテストします。

 dfx deploy --network ic


これらはデモンストレーション目的の例とアイデアです。ご自身でテストして、コメント欄で進捗状況をお知らせください。また、ICP で AI を分散化するために、さらに多くのことを行うことができます。

結論:

私たちは、AI を分散化 (DeAI) する真の試みである顔認識 DApp を ICP でテストし、成功しました。テストによると、DApp の応答は迅速で、顔の検出は正確でした。ICP の独自のインフラストラクチャは、集中型システムに頼ることなく、顔認識などの複雑なタスクを実行するのに役立ちます。


セキュリティとプライバシーを強化するだけでなく、分散型 AI (DeAI) アプリケーションが急速に進化する可能性も示しています。ICP が発展し続けるにつれて、大規模なモデルを展開し、オンチェーンで AI 推論を実行する機能により、イノベーションの新たな可能性が開かれます。分散型 AI は、信頼性が高くスケーラブルなソリューションの将来において重要な役割を果たすことが期待できます。開発者には、ICP 上でより多くの製品やサービスを作成する新しい機会もあります。