自分の顔と芸能人がどれくらい似ているか画像判断処理をやってみた（Power Apps × Azure Custom Vison ）

## 画像を読み込むと、AIがどの程度芸能人とマッチしているのか判断してくれるアプリをつくった。（1.5時間ほどできた）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/a569f10b-5c88-bb03-aae9-9fe8b9f91952.png)

結果　人からよく似ているといわれたファンモンさんはAIとしても似ていることがわかった

## 事前準備
Azure無料利用できるアカウントを取得すること


## はじめに
### Custom Vison のページにアクセスする
https://www.customvision.ai/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/45efb17b-f0fd-d47f-ac78-d16658b4bb15.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/33667eda-bf9d-3b7d-867e-fc6331b03434.png)


### プロジェクトを作成する
New Projectを選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/146c0221-c8b8-118a-066c-048bb32832b9.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/c10e36f6-52f3-faf5-dae6-d395b14fd38a.png)

Resourceをcreate now する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/533f5304-309e-3355-e026-0bf2e6b64130.png)

他の項目はデフォルトで作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/1e6f76be-75aa-3eb3-e555-d845bb89ed2c.png)

プロジェクトできた！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/3846c41f-4477-c281-1a2e-56c9a6ef912c.png)

## 読み込みたい芸能人の画像を用意
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/f949c482-e549-60d3-03b8-f34234705548.png)

ひとつめの画像を選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/e09ff68c-8c96-d2ab-8cb2-14e7c936a537.png)

画像をタグ付けする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/cc2d7d9d-fe3a-a368-2abb-783684a123c0.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/f45c84cf-9fd8-b5cb-889c-47609945cc6d.png)

2人目の画像を読み込む
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/1bdc3e1c-91cf-4f79-fd3d-1ecc162ce82f.png)

完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/4d75053d-433c-522e-fbf4-b6c1ffcf737c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/3df09315-e197-8a93-964a-bd9803210791.png)

3人目画像を読み込む
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/d60ae0ab-bb35-b73e-15cf-25a056d39693.png)

タグ付けする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/43ccdef5-0064-2a1c-0377-90ca5ae9c13b.png)


### トレーニングを実施する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/4268f42a-20d6-dd15-1847-8f03155ea5d7.png)

Quick Trainingを実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/7095c18b-763d-1d3b-3f9c-b90df274c715.png)

### トレーニング結果を確認する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/be9ef84c-1f5c-7745-ef4e-4d46e943bcb8.png)

動かない。結果が表示されない。再度更新を行うと動いた
トレーニング完了まで時間がかかるっぽい。5分～10分ほど。
トレーニング結果をみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/228ba6e0-f4fb-b19e-e34a-6f4a1be9ea89.png)

### Quick Test でテストを行うと９２．３%のマッチ率であるとわかる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/2df910ad-6fd3-e3ec-daba-d4ad12112bb2.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/c2275064-57df-8d95-8493-6b5c501e59a3.png)

### Power Appsへアクセスしサインインする
https://powerapps.microsoft.com/ja-jp/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/b55472d9-7248-4421-e44e-c734abeb91f1.png)

空のアプリを作成する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/de4a2088-553f-2bd0-9717-8fdc17e4c293.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/b9a7c6a0-bde8-a064-9588-ea54c00767ab.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/6ff7f3e1-6fb2-072c-28d7-e2f04f35e76e.png)

形式電話を選択し、作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/fe9db532-373a-7ca3-a759-e08e06067be9.png)

必要な部品を設定する　こまめに保存をするCtrl＋S。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/dad883e7-90cb-ee31-3cf5-35561f6eb826.png)

カメラ配置する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/a7083293-2b33-b27a-0dde-d95a9172094c.png)


新しい画面を用意する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/df0e14ae-a16b-c0b1-823e-09cbd6359e4d.png)

ボタンと画像を追加する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/f7662eed-c684-73f9-0d6c-45febd24a9d1.png)

整える
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/cd2ba93f-79bc-39f0-f6ce-cb5252f43876.png)

### Screen1 のカメラ画面で処理を設定する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/98dc65db-b3bb-a2c1-573b-61bb1630373e.png)

```:OnSelect
Navigate(Screen2); Set(tmpimg,Camera1.Photo);
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/162a1f17-908b-fa3e-b113-c00bc4d52521.png)

### Screen2のimageの要素を tmpimg に変更する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/36b0626b-267e-549d-9496-2e0cc046315d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/d0942fc0-2b6e-b437-5fc4-30f1f386ce23.png)

### テストする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/b28db8bd-d42b-21da-017a-de014a221cfc.png)

画像をクリックし、遷移しボタンがでてくればOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/40641550-e141-f7da-5800-2e4acc3fd345.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/ececb9be-cd19-266c-e781-2a26a1900bac.png)

### Custom Visonのページにアクセスする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/1c7e9e08-c28a-e898-1e4b-37f76f95d83c.png)

プロジェクトをPublishし公開する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/92b555a2-0c39-b2a4-79b2-e016328b427e.png)

プロジェクトの公開後に設定情報をコピーする※重要
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/4515e4d2-cb00-2b41-8815-ac9b45175f4f.png)

### Custom Visonを呼び出すための接続設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/fb06dc66-a788-e12d-69dd-d7bcc29133a1.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/31163693-7f5d-c499-114c-0d581482574d.png)

予測キー、サイトのURL
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/f350c5f1-663c-b9bd-ba88-717060d58a5d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/0a54c199-28d6-e684-6085-4a993179273a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/f462cb04-725a-d7c4-408b-6ff6107f67b1.png)

### Screen2のボタン1に処理を追加する
```:
Set(pic,Image1.Image);
Set(predres,CustomVision.ClassifyImageV2("e5739a92-5c4e-4bef-8019-facdd0fb241e","Iteration1",pic).predictions)

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/5d463f46-a9f5-502d-9cde-05302665aa75.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/3bc9ba34-d058-2d65-8387-fdeecc667d1e.png)

### データテーブルを設定する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/01aebd59-17e8-f808-a2c1-1ef63f432df7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/db111c57-5bbb-d962-192e-43a7e917b183.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/4058e976-50e8-a3e8-00eb-55a27bafe89f.png)

### 完成！テストする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/cd50d680-880d-2e66-b6bb-528bbce89f24.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/bc7cfa75-59a7-869d-8b4a-1c6b5481dcf7.png)

うまくいきました。

Screen2の画面に戻るボタンを追加する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/0053bb4e-724f-5d88-aa01-2720c8835d8e.png)

保存するCtrl+S

## 補足　公開すると　iPhone / Android アプリで利用できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/ea7071a0-f150-b7c7-0ad1-62577d3cd204.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/ce0c3498-9357-fba5-d203-fb29339c13c8.png)


### 参考
https://azure.microsoft.com/ja-jp/services/cognitive-services/custom-vision-service/

https://docs.microsoft.com/ja-jp/azure/cognitive-services/Custom-Vision-Service/overview

以上