【顔認識】FlaskとOpenCVで顔検出APIを作ってVue.jsから叩く

顔検出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の立て方等は今回割愛します。

１．POSTによって画像を取得

import os
# flaskのインポート
from flask import *
# ファイル名をチェックする関数
from werkzeug.utils import secure_filename
# 画像のダウンロード
from flask import send_from_directory
# 画像処理用
import cv2
# CORS有効化用
from flask_cors import CORS
# 時間取得用
import time


# 画像のアップロード先のディレクトリ
UPLOAD_FOLDER = 'src/upload/'
RESULT_FOLDER = 'src/face/'

# アップロードされる拡張子の制限
ALLOWED_EXTENSIONS = set(['png', 'jpg', 'gif'])

# Flaskの宣言
app = Flask(__name__)
CORS(app)                   # CORS有効化
app.secret_key = 'hogehoge' # アクセスキーのやつ（これがないとエラーに）
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
app.config['RESULT_FOLDER'] = RESULT_FOLDER


# 拡張子の確認
def allowed_file(filename):
    # .があるかどうかのチェックと、拡張子の確認
    # OKなら１、だめなら0
    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS


# 顔認識
def face_recognition(target_img):
    target_img = UPLOAD_FOLDER + target_img
    # 入力画像を読み込み
    img = cv2.imread(target_img)

    # カスケード型識別器の読み込み
    cascade = cv2.CascadeClassifier("./lib/opencv/data/haarcascades/haarcascade_frontalface_default.xml")

    # グレースケール変換
    gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)

    # 顔領域の探索
    face = cascade.detectMultiScale(gray, scaleFactor=1.1, minNeighbors=3, minSize=(30, 30))

    # 顔領域を赤色の矩形で囲む
    for (x, y, w, h) in face:
        cv2.rectangle(img, (x, y), (x + w, y + h), (0, 0, 200), 3)

    # 結果の出力
    output_file = RESULT_FOLDER + str(time.time()) + ".png"
    cv2.imwrite(output_file, img)
    return output_file, len(face)


# ファイルを受け取る方法の指定
@app.route('/face', methods=['GET', 'POST'])
def uploads_file():
    # リクエストがポストかどうかの判別
    if request.method == 'POST':
        print(request.files)

        # ファイルがなかった場合の処理
        if 'file' not in request.files:
            return 'file not found in request'

        # データの取り出し
        file = request.files['file']
        # ファイルが空の時の処理
        if file.filename == '':
            return 'file name is null'

        # ファイルのチェック
        if file and allowed_file(file.filename):
            # 危険な文字を削除（サニタイズ処理）
            filename = secure_filename(file.filename)
            # ファイルの保存
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            # 画像を変換
            convert_img, people = face_recognition(filename)
            # JSONを返す
            return jsonify('{ \"img\": \"' + str(convert_img) + '\", \"people\": \"' + str(people) + '\"}')
    return 'error'


# ファイルを表示する
@app.route('/' + RESULT_FOLDER + '<filename>')
def uploaded_file(filename):
    return send_from_directory(app.config['RESULT_FOLDER'], filename)


if __name__ == '__main__':
    app.run()

# ファイルを受け取る方法の指定

@app.route('/face', methods=['GET', 'POST'])

def uploads_file():

# リクエストがポストかどうかの判別

if request.method == 'POST':

print(request.files)

# ファイルがなかった場合の処理

if 'file' not in request.files:

return 'file not found in request'

# データの取り出し

file = request.files['file']

# ファイルが空の時の処理

if file.filename == '':

return 'file name is null'

# ファイルのチェック

if file and allowed_file(file.filename):

# 危険な文字を削除（サニタイズ処理）

filename = secure_filename(file.filename)

# ファイルの保存

file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))

# 画像を変換

convert_img, people = face_recognition(filename)

# JSONを返す

return jsonify('{ \"img\": \"' + str(convert_img) + '\", \"people\": \"' + str(people) + '\"}')

return 'error'

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

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

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

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

サニタイズ処理
ファイルをディレクトリに保存（/src/upload）
顔検出
JSONを返す

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

▼詳しくはこちら

→サニタイズ（sanitize）とは

２．顔検出

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

import os
# flaskのインポート
from flask import *
# ファイル名をチェックする関数
from werkzeug.utils import secure_filename
# 画像のダウンロード
from flask import send_from_directory
# 画像処理用
import cv2
# CORS有効化用
from flask_cors import CORS
# 時間取得用
import time


# 画像のアップロード先のディレクトリ
UPLOAD_FOLDER = 'src/upload/'
RESULT_FOLDER = 'src/face/'

# アップロードされる拡張子の制限
ALLOWED_EXTENSIONS = set(['png', 'jpg', 'gif'])

# Flaskの宣言
app = Flask(__name__)
CORS(app)                   # CORS有効化
app.secret_key = 'hogehoge' # アクセスキーのやつ（これがないとエラーに）
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
app.config['RESULT_FOLDER'] = RESULT_FOLDER


# 拡張子の確認
def allowed_file(filename):
    # .があるかどうかのチェックと、拡張子の確認
    # OKなら１、だめなら0
    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS


# 顔認識
def face_recognition(target_img):
    target_img = UPLOAD_FOLDER + target_img
    # 入力画像を読み込み
    img = cv2.imread(target_img)

    # カスケード型識別器の読み込み
    cascade = cv2.CascadeClassifier("./lib/opencv/data/haarcascades/haarcascade_frontalface_default.xml")

    # グレースケール変換
    gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)

    # 顔領域の探索
    face = cascade.detectMultiScale(gray, scaleFactor=1.1, minNeighbors=3, minSize=(30, 30))

    # 顔領域を赤色の矩形で囲む
    for (x, y, w, h) in face:
        cv2.rectangle(img, (x, y), (x + w, y + h), (0, 0, 200), 3)

    # 結果の出力
    output_file = RESULT_FOLDER + str(time.time()) + ".png"
    cv2.imwrite(output_file, img)
    return output_file, len(face)


# ファイルを受け取る方法の指定
@app.route('/face', methods=['GET', 'POST'])
def uploads_file():
    # リクエストがポストかどうかの判別
    if request.method == 'POST':
        print(request.files)

        # ファイルがなかった場合の処理
        if 'file' not in request.files:
            return 'file not found in request'

        # データの取り出し
        file = request.files['file']
        # ファイルが空の時の処理
        if file.filename == '':
            return 'file name is null'

        # ファイルのチェック
        if file and allowed_file(file.filename):
            # 危険な文字を削除（サニタイズ処理）
            filename = secure_filename(file.filename)
            # ファイルの保存
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            # 画像を変換
            convert_img, people = face_recognition(filename)
            # JSONを返す
            return jsonify('{ \"img\": \"' + str(convert_img) + '\", \"people\": \"' + str(people) + '\"}')
    return 'error'


# ファイルを表示する
@app.route('/' + RESULT_FOLDER + '<filename>')
def uploaded_file(filename):
    return send_from_directory(app.config['RESULT_FOLDER'], filename)


if __name__ == '__main__':
    app.run()

# 顔認識

def face_recognition(target_img):

target_img = UPLOAD_FOLDER + target_img

# 入力画像を読み込み

img = cv2.imread(target_img)

# カスケード型識別器の読み込み

cascade = cv2.CascadeClassifier("./lib/opencv/data/haarcascades/haarcascade_frontalface_default.xml")

# グレースケール変換

gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)

# 顔領域の探索

face = cascade.detectMultiScale(gray, scaleFactor=1.1, minNeighbors=3, minSize=(30, 30))

# 顔領域を赤色の矩形で囲む

for (x, y, w, h) in face:

cv2.rectangle(img, (x, y), (x + w, y + h), (0, 0, 200), 3)

# 結果の出力

output_file = RESULT_FOLDER + str(time.time()) + ".png"

cv2.imwrite(output_file, img)

return output_file, len(face)

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

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

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

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

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

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

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

続いてクライアント側

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

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

ざっくり解説

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

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

<template>
  <div class="about">
    <h1>顔認識システム</h1>
    <div>
      <div id="button_block">
        <label class="file_select" @click="response.img = null"><span>ファイルを選択してください</span><input type="file" ref="file" @change="setImage"></label>
      </div>
      <div id="action_block">
        <p v-if="response.img">顔検出数：{{ response.people }}</p>
        <input v-else @click="upload" type="button" value="検出">
      </div>
      <div id="target_block">
        <img v-if="response.img" :src="APIdomain + response.img">
        <img v-else :src="this.target_image">
      </div>
    </div>
  </div>
</template>

<script>
    import axios from 'axios';

    export default {
        data: function () {
            return {
                target_image: "",
                response: "",
                name: "",
                APIdomain: 'http://127.0.0.1:5000/',
            }
        },
        methods: {
            setImage() {  // 画像のプレビュー関数
                const files = this.$refs.file;
                const fileImg = files.files[0];
                // 選択された File の情報を保存しておく
                if (fileImg.type.startsWith("image/")) {
                    this.target_image = window.URL.createObjectURL(fileImg);
                    this.name = fileImg.name;
                }
            },
            upload: function () { // アップロード処理
                // FormData を利用して File を POST する
                let formData = new FormData();
                formData.append('file', this.$refs.file.files[0]);
                const config = {
                    headers: {
                        'content-type': 'multipart/form-data'
                    }
                };
                const self = this;
                // APIへPOST
                axios
                    .post(this.APIdomain + 'face', formData, config)
                    .then(function (response) {
                        self.response = JSON.parse(response['data']);
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
        },
    }
</script>

<style lang="scss">
  .file_select{
    span{
      display: inline-block;
      background: #2c3e50;
      color: #ffffff;
      width: 300px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      border-radius: 10px;
      cursor: pointer;
      font-size: 18px;
    }
    input[type="file"]{
      display: none;
    }
  }
  #button_block{
    text-align: center;
  }
  #action_block{
    display: block;
    height: 100px;
    width: 100%;
    margin-top: 10px;
    p{
      height: 40px;
    }
    input[type="button"] {
      margin-bottom: 10px;
      display: inline-block;
      background: #ff3462;
      color: #ffffff;
      width: 300px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      border-radius: 10px;
      cursor: pointer;
      outline: none;
      border: none;
      font-size: 18px;
    }
  }
  #result_block, #target_block {
    display: inline-block;
    width: 80vw;
    height: auto;
    vertical-align: top;

    img {
      display: block;
      width: 100%;
    }
  }
  #result_block{
    margin-left: 5vw;
  }
</style>

setImage() { // 画像のプレビュー関数

const files = this.$refs.file;

const fileImg = files.files[0];

// 選択された File の情報を保存しておく

if (fileImg.type.startsWith("image/")) {

this.target_image = window.URL.createObjectURL(fileImg);

this.name = fileImg.name;

}

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

<template>
  <div class="about">
    <h1>顔認識システム</h1>
    <div>
      <div id="button_block">
        <label class="file_select" @click="response.img = null"><span>ファイルを選択してください</span><input type="file" ref="file" @change="setImage"></label>
      </div>
      <div id="action_block">
        <p v-if="response.img">顔検出数：{{ response.people }}</p>
        <input v-else @click="upload" type="button" value="検出">
      </div>
      <div id="target_block">
        <img v-if="response.img" :src="APIdomain + response.img">
        <img v-else :src="this.target_image">
      </div>
    </div>
  </div>
</template>

<script>
    import axios from 'axios';

    export default {
        data: function () {
            return {
                target_image: "",
                response: "",
                name: "",
                APIdomain: 'http://127.0.0.1:5000/',
            }
        },
        methods: {
            setImage() {  // 画像のプレビュー関数
                const files = this.$refs.file;
                const fileImg = files.files[0];
                // 選択された File の情報を保存しておく
                if (fileImg.type.startsWith("image/")) {
                    this.target_image = window.URL.createObjectURL(fileImg);
                    this.name = fileImg.name;
                }
            },
            upload: function () { // アップロード処理
                // FormData を利用して File を POST する
                let formData = new FormData();
                formData.append('file', this.$refs.file.files[0]);
                const config = {
                    headers: {
                        'content-type': 'multipart/form-data'
                    }
                };
                const self = this;
                // APIへPOST
                axios
                    .post(this.APIdomain + 'face', formData, config)
                    .then(function (response) {
                        self.response = JSON.parse(response['data']);
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
        },
    }
</script>

<style lang="scss">
  .file_select{
    span{
      display: inline-block;
      background: #2c3e50;
      color: #ffffff;
      width: 300px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      border-radius: 10px;
      cursor: pointer;
      font-size: 18px;
    }
    input[type="file"]{
      display: none;
    }
  }
  #button_block{
    text-align: center;
  }
  #action_block{
    display: block;
    height: 100px;
    width: 100%;
    margin-top: 10px;
    p{
      height: 40px;
    }
    input[type="button"] {
      margin-bottom: 10px;
      display: inline-block;
      background: #ff3462;
      color: #ffffff;
      width: 300px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      border-radius: 10px;
      cursor: pointer;
      outline: none;
      border: none;
      font-size: 18px;
    }
  }
  #result_block, #target_block {
    display: inline-block;
    width: 80vw;
    height: auto;
    vertical-align: top;

    img {
      display: block;
      width: 100%;
    }
  }
  #result_block{
    margin-left: 5vw;
  }
</style>

upload: function () { // アップロード処理

// FormData を利用して File を POST する

let formData = new FormData();

formData.append('file', this.$refs.file.files[0]);

const config = {

headers: {

'content-type': 'multipart/form-data'

}

};

const self = this;

// APIへPOST

axios

.post(this.APIdomain + 'face', formData, config)

.then(function (response) {

self.response = JSON.parse(response['data']);

})

.catch(function (error) {

console.log(error);

})

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

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

最後に

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

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

今回のブログ曲

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

【顔認識】FlaskとOpenCVで顔検出APIを作ってVue.jsから叩く

投稿者: ReERishun 投稿日: 2020年9月25日

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

今回のコード

早速APIを解説

１．POSTによって画像を取得

２．顔検出

続いてクライアント側

ざっくり解説

最後に

今回のブログ曲

コメントを残すコメントをキャンセル

JavaScript

【FFmpeg】wasm版FFmpegで簡単に動画ファイルをGIFアニメーションへ変換

JavaScript

【JavaScript】Node.jsでメールを送信できるnodemailer

JavaScript

【TypeScript】TypeScriptの基本の型を学んでみる

【顔認識】FlaskとOpenCVで顔検出APIを作ってVue.jsから叩く

投稿者: ReERishun 投稿日: 2020年9月25日

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

今回のコード

早速APIを解説

１．POSTによって画像を取得

２．顔検出

続いてクライアント側

ざっくり解説

最後に

今回のブログ曲

コメントを残す コメントをキャンセル

関連記事

JavaScript

【FFmpeg】wasm版FFmpegで簡単に動画ファイルをGIFアニメーションへ変換

JavaScript

【JavaScript】Node.jsでメールを送信できるnodemailer

JavaScript

【TypeScript】TypeScriptの基本の型を学んでみる

コメントを残すコメントをキャンセル