【Python×機械学習×React】 マッチングアプリを利用している・興味のある人向けのサービス 『マッチングアプリ プロフィール写真診断』 を作りました。 (男性向け) 【個人開発】

# サービス概要
![マッチングアプリ プロフィール写真診断 トップページ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840723/e541f5fe-c5f2-7361-659b-51bf5deb4daf.png)
対応端末は`PC`・`スマホ`どちらも対応しております。

URL：https://profile-diagnostic.com/
Github：https://github.com/ryuki7/dating-apps-master-image-diagnostic

マッチングアプリを利用している・利用しようか迷っているが女子受けの良いプロフィール写真が分からない、マッチングアプリを利用したら自分がどれくらいモテるのかを知りたい人に
マッチングアプリのプロフィール写真に設定した場合のモテ度を教えてくれる
マッチングアプリのプロフィール写真診断サービスです。

# このサービスを作った背景
私が以前開発したマッチングアプリ完全攻略サービスである、<a href='https://dating-apps-master.com/top'>マッチングアプリマスター</a>の運用をする中で、ユーザーから「プロフィール写真にどの写真を載せたら良いのか分からない」というフィードバックをいただいたことがきっかけです。

https://qiita.com/ryuki7/items/3fd30e6bcc901f1f521b

　<a href='https://dating-apps-master.com/top'>マッチングアプリマスター</a>にも、どのようなプロフィール写真を載せるのが良いのかを説明してはいるのですが、言葉だけでは分からないと思います。
そこで、画像認識AIを自作して利用し、あなたの選択した写真をマッチングアプリのプロフィール写真に設定した場合、どれくらいモテるのかを診断することで、適切なプロフィール写真を知ることができると思い、開発いたしました。

# 使い方
#### 1.トップページを開いたら、「診断する」ボタンをタップ
![トップページ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840723/dd99631e-3846-69d7-c193-aacc0a28c091.jpeg)

#### 2.診断画面に遷移する為、ページ上部にある「写真を選択」ボタンをタップし、診断する写真を選択する
![診断画面1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840723/86bf9898-68d4-872f-fc9c-8f0284ec801b.jpeg)

#### 3.写真を選択し、下にスクロールして「写真の種類」を選択する
![診断画面2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840723/611bf56d-1f35-3917-acd9-19b06ea65c7d.jpeg)

#### 4.「写真の種類」を選択し、下にスクロールして「写真の傾き」を選択する
![診断画面3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840723/0b808245-db0c-2e6f-7459-f1f87a6b23ec.jpeg)

#### 5.「写真を選択」・「写真の種類」・「写真の傾き」の3つの項目を選択すると、ページ下部に「診断」ボタンが表示されるので、「診断」ボタンをタップする
![診断画面4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840723/9b2cfa09-0315-9b51-888b-0432592699a6.jpeg)

#### 6.「診断」ボタンをタップすると、診断が開始されます（ロード画面）
![診断中画面(ロード中).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840723/9a42fe21-4b68-484a-1c0e-ac0609826465.jpeg)


#### 7.診断（ロード）が終わると、診断結果が表示されます
![診断結果画面.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840723/83f4e406-7140-715c-52d7-fc5351f46baa.jpeg)

#### 診断結果を知り合いにシェアしよう！

# 主な使用技術
- Python
- Flask
- JavaScript
- React
- TensorFlow（機械学習に用いるためのソフトウェアライブラリ）
- Keras（深層学習ライブラリ）
- NumPy（数値計算ライブラリ）
- OpenCV（画像処理ライブラリ）
- Gunicorn
- Heroku

## 工夫したポイント
### 1.画像認識AIを自作し、そのAIを利用して診断結果を算出（学習済モデルに予測させる）

#### 学習済モデルの構築
下記3種類の学習済モデルを構築しました。（`Google Colaboratory`を利用）
- `face`モデル => `顔（マスク無し）`
- `face_masuku`モデル => `顔（マスク有り or 半顔）`
- `vibe`モデル => `雰囲気（スタイル）`

##### 【学習済モデルの構築の流れ】

1.各モデルに学習させる画像を2種類（モテる・モテない）ずつ収集する。
2.`OpenCV`を利用して、各種カスケード型識別器を使用して必要な情報のみを認識し、画像を切り取る。
※ 写真の対象に角度がついていると認識できない為、認識できなかった場合は`写真を回転`させて認識できるようにしている。
3.`ニューラルネットワーク`の構築をする。
4.各モデルに`切り取った画像（学習データ）`と`正解`を与えて学習させる。（`教師あり学習`）
5.学習済モデルにテストデータを与えて`予測`させ、`精度の確認`をする。
6.精度の確認が取れたら学習済モデルの構築を完了とする。

### 2.SPAアプリケーションとして開発
実務に近い開発方法として、フロントエンドを`React`、バックエンドをAPIとして`Python`（`Flask`）で実装しました。

`React`は最先端のフロントエンド技術であり、海外では導入企業が多く、今後日本でも需要が高まることが予想されておりますので、学んでおいて損はないと思い、学習しました。

また、Reactはページを更新する際、ページ全体を更新せずに変更箇所のみを更新する仕組みになっており、Webページの表示速度が速いです。
※ 最初のアクセス時は、通常より読み込むデータ量が多い為、タイムラグが生じる可能性があります。
Webページの表示速度の速さは、UI/UXにおいて重要であり、少しでも速く表示されるよう改善することで離脱率を下げることに繋がります。

## 今後追加してみたい機能等

- 女性向けのプロフィール写真診断機能
- ユーザー毎の診断データの記録・履歴保存（後から見返せるようにする）

## おわりに
マッチングアプリを利用している・興味はあるが女子受けの良いプロフィール写真が分からない方、マッチングアプリを利用したら自分がどれくらいモテるのかを知りたい方は、ぜひ『マッチングアプリ プロフィール写真診断』を利用してみてください！

今後も引き続き、改善できることは改善していくつもりですので、フィードバック等をいただけると幸いです。

最後まで読んでいただき、ありがとうございました！