JavaScript ベースの Baidu AI 顔認識 WeChat アプレット (ディープ ラーニング + マシン ビジョン) (すべてのエンジニアリング ソース コードとビデオ デモンストレーションを含む) (学習のみ)

ここに画像の説明を挿入

序文

このプロジェクトは、Baidu AI の学習モデルを使用し、画像認識インターフェイスを使用して結果を返すことで、データベース内の顔の判定と、顔の登録、削除、ログインなどの関連するビジネス シナリオの実現を目指しています。

Baidu AI の学習モデルを使用することで、入力画像に対して顔の検出と認識を実行できます。まず、画像認識インターフェイスを呼び出し、検出する画像を渡し、返された結果を取得します。

顔登録シナリオでは、登録サンプルとして写真を提供し、既存の顔データベースと比較できます。画像内の顔の特徴を分析することで、その顔がライブラリに存在するかどうか、およびその顔の類似性を判断できます。顔がライブラリにある場合、それを対応する識別情報に関連付けることができます。

顔削除シナリオでは、顔の ID または ID 情報を提供し、それを顔データベースから削除できます。顔情報の更新・保守管理に利用できます。

顔ログインシナリオでは、認証対象の顔画像を入力することで既存の顔データベースと比較することができます。類似度が一定の閾値に達すると本人確認が可能となり、顔ログインの機能が実現します。

Baidu AI の学習モデルと画像認識インターフェイスを使用することで、顔関連の業務処理を迅速かつ正確に実行できます。このプロジェクトの応用可能性は非常に広く、顔認証入退室管理システム、顔決済認証、顔勤怠管理などの分野でセキュリティと利便性を向上させることができます。

全体的なデザイン

システムの全体構成図とシステムフローチャートを記載します。

システム全体構成図

システムの全体構成を図に示します。

ここに画像の説明を挿入

システムフローチャート

システムフローを図に示します。

ここに画像の説明を挿入

動作環境

公式ウェブサイトのアドレス: https://cloud.baidu.com/、Baidu アカウントを登録します。管理コンソール -> 製品サービス -> 人工知能 -> 顔認識 -> アプリケーションの作成 -> 必要な情報を入力 -> 今すぐ作成 に移動して、顔認識アプリケーションを作成します。対応するAPI Keyとを取得した後Secret Key、顔データベースに新しいグループを作成します。

ダウンロード アドレス: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.htmlインストールが完了したら、コードをスキャンしてログインし、顔認識プロジェクトを作成します。[新しいプロジェクト] をクリックして、必要な情報を入手してくださいAPPID

モジュールの実装

本プロジェクトにはアクセストークン取得、顔登録、顔削除、顔認識の4つのモジュールが含まれており、各モジュールの機能紹介と関連コードは以下の通りです。

1. アクセストークンの取得

Baidu Cloud 製品ドキュメントによると、Baidu AIP オープン プラットフォームは OAuth2.0 認証を使用してオープン API を呼び出し、access_token パラメーターが URL に含まれています。承認されたサービス アドレスにリクエストを送信し (POST を推奨)、URL に次のパラメータを含めます。

grant_type: 必須パラメータ、client_credentials として固定;
client_id: 必須パラメータ、API キーが使用されます;
client_secret: 必須パラメータ、秘密キーが使用されます。

取得が成功したら、戻り値 access_token をトークンとして保存します。関連するコードは次のとおりです。

wx.request({
    
    
      url: 'https://aip.baidubce.com/oauth/2.0/token',  
            data: {
    
    
           grant_type: 'client_credentials',
           client_id: 'Oi3FpajiHUArp7KQrXgEwb7k',// API Key
           client_secret: '********************'// Secret Key
            },
           header: {
    
    
              'Content-Type': 'application/json' 
            },
           success(res) {
    
    
               that.setData({
    
    
                token: res.data.access_token//获取到token
         })
       }
     })

2.顔登録

WeChat アプレットで顔登録ページを作成し、カメラでキャプチャした画像を Base64 エンコードに変換して文字列に変換します。画像アドレスの代わりに文字列を使用します。関連するコードは次のとおりです。

wx.getFileSystemManager().readFile({
    
    
                  filePath: this.data.src, //选择图片返回的相对路径
                  encoding: 'base64', //编码格式
                  success: res => {
    
     //成功回调
                    this.setData({
    
    
                    base64: res.data
                  })
                }
              })

リクエスト URL: を使用してhttps://aip.baidubce.com/rest/2.0/face/v3/faceset/user/add画像をアップロードします。パラメータはimageimage_typegroup_id、ですuser_id。これらは、入力によって取得されたgroup_id、以前に作成された顔データベースのグループ化ですuser_id登録が成功したら、ユーザー ページに戻り、顔データベース内のユーザー名を表示します。関連するコードは次のとおりです。

    wx.uploadFile({
    
    
          url: 'https://aip.baidubce.com/rest/2.0/face/v3/faceset/user/add?access_token=' + "***********",
            filePath: that.data.src,
            name: 'file',
            formData: {
    
    
              'image': this.data.base64,
              'image_type': 'BASE64',
              'group_id': 'test',
              'user_id': this.data.username //输入的名字
            },
header: {
    
    
            'Content-Type': 'application/json' 
            },
            success: function (res) {
    
    
                wx.hideLoading();
                console.log(res);
                var data = JSON.parse(res.data);
                if (res.statusCode ==200) {
    
    
                    wx.switchTab({
    
    
                        url: '/pages/user/user'
                    })
                } 

図に示すように、Baidu クラウドの顔登録リクエストの戻り値を取得します。

ここに画像の説明を挿入

3. 顔の削除

削除する前に、顔を表示するインターフェースを追加し、https://aip.baidubce.com/rest/2.0/face/v3/faceset/group/getusersリクエスト URL に従ってアップロードします。group_id戻り値はリスト形式であり、それを保存します。関連するコードは次のとおりです。

getList() {
    
    
        let that = this;
        wx.request({
    
    
          url: 'https://aip.baidubce.com/rest/2.0/face/v3/faceset/group/getusers?access_token=' + "24.a9cbfb843b4f4ec029924cccd300eb25.2592000.1588666636.282335-19228982",
          data: {
    
    
            group_id:'test'
          },
          header: {
    
    
            'Content-Type': 'application/json' 
          },
            success: function (res) {
    
    
                console.log(res);
                if (res.statusCode != 200) {
    
    
                    wx.showToast({
    
    
                        title: res.data,
                        icon: 'none',
                        duration: 2000
                    });
                } else {
    
    
                    that.setData({
    
    
                      list: res.data.result.user_id_list
                    });
                }
            },
            fail: function (res) {
    
    
                wx.showToast({
    
    
                    title: '请求用户列表错误',
                    icon: 'none',
                    duration: 2000
                });
            }
        })
    },

wxml ファイルでは、wx.for を使用してリストに格納されている要素ごとにセルを作成して出力し、要素ごとに新しいボタンを作成します。ボタンを要素に 1 つずつ対応させます。各ボタンは、対応する要素のデータとして data-id パラメーターを割り当てることができます。これにより、js ファイル内の要素の face_token を取得できます。関連するコードは次のとおりです。

<view class="weui-cell" wx:for="{
     
     {list}}" wx:for-item="item">
                <view class="weui_cell__bd">{
   
   {item}}</view>
                <view class="weui-cell__ft">
                    <button class="weui-btn" type="warn" size="mini" data-id="{
     
     {item}}" bindtap="delUser">删除</button>
                </view>
            </view>

Baidu クラウド顔認識では、顔を削除したい場合は、face_token パラメータをアップロードする必要があります。そのため、ユーザー リストの取得 API インターフェイスを使用します: 、ユーザー名とグループ名に従って取得し、実現するには , , 3https://aip.baidubce.com/rest/2.0/face/v3/faceset/group/getusersuser_idgroup_idパラメータface_tokenアップロードuser_idgroup_idますface_token顔の削除、成功後の呼び出しgetlistこの関数は顔リストの更新を実装します。このうち user_id は割り当てられたボタンに応じてe.currentTarget.dataset.id取得され、関連するコードは次のとおりです。

   //获取face_token
   wx.request({
    
    
                      url: 'https://aip.baidubce.com/rest/2.0/face/v3/faceset/face/getlist?access_token=' + "24.a9cbfb843b4f4ec029924cccd300eb25.2592000.1588666636.282335-19228982",
                      header: {
    
    
                        'Content-Type': 'application/json' // 默认值
                      },
                      data: {
    
    
                        group_id: 'test',
                        user_id: e.currentTarget.dataset.id,//从按钮中获取
                      },
                        success: function (res) {
    
    
                       //console.log(res)
                          var temp = res.data.result
                          var face = temp.face_list[0].face_token
                          wx.request({
    
    
                            url: 'https://aip.baidubce.com/rest/2.0/face/v3/faceset/face/delete?access_token=' + "24.a9cbfb843b4f4ec029924cccd300eb25.2592000.1588666636.282335-19228982",
                            method: 'POST',
                            data: {
    
    
                              group_id: 'test',
                              user_id: e.currentTarget.dataset.id,
                              face_token:face //要删除的人脸facetoken
                            },
                            header: {
    
    
                              'Content-Type': 'application/json' 
                            },
                             success(res) {
    
    
                              var errorcode = res.data.error_code
                              if (errorcode == 0) //访问成功
                              {
    
    
                                wx.showToast({
    
    
                                  title: '删除成功',
                                  icon: 'success',
                                  duration: 2000
                                })
                                that.getList();
                                }
                             }
                            })
                        },

4. 顔認識

この部分では、Baidu クラウド顔検索 API インターフェイスを使用し、1:N 認識を呼び出し、顔データベース コレクション内で最も類似した顔を見つけます。ホームページでカメラを呼び出して常にオンにし、写真を撮って顔登録に必要な Base64 形式に変換します。画像の Base64 エンコードにより画像データが文字列にエンコードされ、その文字列を使用して画像を置き換えます。住所。

Baidu クラウドの顔認識インターフェイスを介してhttps://aip.baidubce.com/rest/2.0/face/v3/searchimageimage_type、およびgroup_id_list3 つのデータをアップロードします。imageパラメータはカメラで撮影された写真の Base64 形式です。戻り値を取得し、score図のようにユーザーとの照合スコアに応じて顔データベースに顔が存在するかどうかを判定します。

ここに画像の説明を挿入

関連するコードは次のとおりです。

       wx.request({
    
    
          url: 'https://aip.baidubce.com/rest/2.0/face/v3/search?access_token=' + "24.a9cbfb843b4f4ec029924cccd300eb25.2592000.1588666636.282335-19228982",
          method: 'POST',
          data: {
    
    
            image: that.data.base64,
            image_type: 'BASE64',
            group_id_list: 'test' //自己的用户组ID
          },
          header: {
    
    
            'Content-Type': 'application/json' // 默认值
          },
          success(res) {
    
    
            wx.hideLoading();
            var errorcode = res.data.error_code
            if (errorcode == 0) //访问成功
            {
    
    
              var ulist = res.data.result
              if (ulist.user_list != null) {
    
    
                var result = ulist.user_list[0].score
                 if (result > 80) {
    
    
                  wx.showToast({
    
    
                    title: '验证通过',
                    icon: 'success',
                    duration: 2000
                  })

システムテスト

顔登録の効果を図 1 に示し、新規ユーザー syy を追加、ユーザー テストを削除し、その効果を図 2 に示し、ログイン インターフェイスでのクリック認識による写真認識機能の実現とその効果を示します。を図 3 に、認識成功率を図 4 に示します。

ここに画像の説明を挿入

図 1 顔登録図

ここに画像の説明を挿入

図2 顔の削除

ここに画像の説明を挿入

図3 認識成功効果

ここに画像の説明を挿入

図4 認識成功率

WeChat 開発者ツールでデバッグした後、実デバイスのデバッグを選択して QR コードを形成し、携帯電話で WeChat を開き、QR コードをスキャンしてアプリケーションに入ります。実デバイスのデバッグ中のデータのスクリーンショットを図に示します。実デバイスのデバッグのステータス パラメータは 200 です。呼び出しは成功しました。

ここに画像の説明を挿入

図5 実機デバッグとデータマップ

プロジェクトのソースコードのダウンロード

詳細については、ブログ リソースのダウンロード ページをご覧ください。

その他の情報ダウンロード

人工知能関連の学習ルートと知識システムについて学び続けたい場合は、私の他のブログ「重い | 完全な人工知能 AI 学習 - 基本知識学習ルート、すべての資料は料金を支払わずにネットワーク ディスクから直接ダウンロードできます」を参照してください。 「ルーチンへの注意
このブログでは、Github の有名なオープンソース プラットフォーム、AI テクノロジー プラットフォーム、および関連分野の専門家 (Datawhale、ApacheCN、AI Youdao、Huang Haiguang 博士など) について言及しています。関連資料は約 100G あります。友達全員を助けてください。

おすすめ

転載: blog.csdn.net/qq_31136513/article/details/131402963