顔検出APIをFlask × OpenCVで作ってVue.jsでたたくだけ

最初に勘違いして欲しくないのが、顔を検出しているだけという点です。

顔を認識して、誰かを判別できたりはしません…次回以降で作りたいなとは思っていますが。

今回の構成は以下の通り。

  • API:Flask
  • クライアント:Vue.js
  • 画像処理:OpenCV

めちゃくちゃ単純ですね。

 

実際に使って見ると以下のような画像が生成されます。

顔検出適用後写真

Photo by Omar Lopez on Unsplash

顔検出適用後写真

Photo by Omar Lopez on Unsplash

見て頂くと分かるのですが、誤判定も多々あります…

尚、動作検証はWindowsのみでしか行っていません。

また、サーバ側で必要なモジュールのインストール、Vue.jsやPythonの環境構築等はご自身で行ってください。

 

今回のコード

今回作成したプロジェクトはGitHub上にあります。

クローンしていただいて、自由にお使いください。

→クライアント側(Vue.js)のリポジトリ

→APIサーバ側(Flask)のリポジトリ

 

また、使用しているOpenCVは以下のリポジトリから取得しました。

→【GitHub】OpenCV

 

早速APIを解説

さて、API側からざっくり解説します!

尚、環境構築やFlaskの立て方等は今回割愛します。

 

1.POSTによって画像を取得

基本的にコメントアウト読んでしまえば内容がわかるようにしているつもりなので、改めて説明するまでもないですが…

以下の場合はエラーとなり、検出処理をしないようになっています。

  1. リクエストがPOSTでないとき
  2. ファイルがPOSTされていないとき
  3. ファイル自体が空のとき
  4. ファイルの拡張子が gif , jpg , png のいずれでもないとき

以上のチェックが終わり、こちらの指定した画像ファイル形式であれば以下の処理を行います。

  1. サニタイズ処理
  2. ファイルをディレクトリに保存(/src/upload)
  3. 顔検出
  4. JSONを返す

尚、サニタイズ処理とは特殊な文字(例えば & や > など)を無効化することで意図した動きをしないように処理することです。

▼詳しくはこちら

→サニタイズ(sanitize)とは

 

2.顔検出

顔を検出する処理をします。

まず、この関数では引数として対象画像のパスを取得し、戻り値として検出結果画像のパスと検出数を返します。

さて、こちらも基本的にコメントアウトされている通りです。

尚、こちらのカスケード型識別器に関しては、冒頭でも書いたOpenCVのリポジトリを取得し、そのパスを指定してください。(私の場合は ./lib に格納しています。)

続いて、グレースケール変換を行います。

何故グレースケールに?という点に関しては、計算量・作業メモリの削減により高速で処理ができるためです。尚、カラースケールでも顔検出は可能です。

その後は、カスケード型識別器を用いて顔領域を探索し、赤色の枠で囲むだけです。

最後に画像をディレクトリ(src/face)へ出力し、そのパスと顔の検出数を返して終了です。

 

続いてクライアント側

クライアント側はVue.jsで作りました。

画像をAPIにPOSTできればいいだけなので、フレームワークはどれでもいいのですが、今回は最近Vue.jsにハマっているという理由でVue.jsで書きました。

 

ざっくり解説

こちらのやってることを一言でまとめると「画像を選択してPOSTして結果を表示する」というだけです。

以下の関数ではまず選択された画像をプレビューとして表示します。

 

続いて、この関数ではアップロード時の処理を書いています。

フォームのデータとして送信するためにヘッダやファイルを格納し、axiosを使ってAPIにPOSTしています。

返ってきた値を変数に格納し、画像を画面に表示しています。

 

最後に

基本的にコメントアウトで解説が入ってるので改めてブログに書くこともそこまでありませんでした。何か不明点等ございましたら、コメントもしくはTwitterまでお問い合わせください。

尚、それぞれの利用方法に関しては各READMEをご覧ください。

 

今回のブログ曲

今回投稿中に聴いていた曲はこちら

カテゴリー: JavaScriptPython

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です