大好きな有名人の画像ばかりで機械学習した、オリジナルの顔判定ツールを作ってみた！

## 好きな有名人の中でYouは誰に似ているの？
### えー、誰だろう、、クリスチアン・ロナウド？織田裕二？いやいや、マツコ・デラックス？
<p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2554652/b2188ba8-024c-c9ec-244f-9c8f72f5b6fd.png" alt="写真" width="85%" height="130"> 

女性も使っていただけますよ！豪華な顔ぶれで、何か幸せ～。
<p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2554652/4b6ac1c7-14da-668e-256f-0c983f0ad7a9.png" alt="写真" width="85%" height="130"> 

### まずは、実際にAI顔判定ツールを、お試してください！

https://codepen.io/nori77/full/vYpvdyL


## 制作の経緯やあれこれ
トップガン好きだったなー、とうことでトム・クルーズも入れてみました！　あと私の青春時代といったら、やっぱりつんくさんね！学生時代は、髪型と眉毛が似てたのか、つんくに似てると少し言われてカラオケしたな～。（振り返ってみると、大変名誉な、楽しい思い出です！）
このように、**自分が好きな有名人だけの画像を好みに合わせて、Webから収集して、Teachable Machineで機械学習をする** ことで、**いつもHappyになれる顔判定ツール**を作ってみました。画像を集めたり、機械学習したり、テストしたりと、結構楽しくてあっという間に時間がたってしまいました。とにかく、**みんな好きな有名人ばかりだから、どんな結果でも嬉しく受け入れられる**、顔判定ツールです！(でもすいません、マツコさんだけは大好きだけど、正直ちょっと微妙かも。。）

**お前全然誰にも似てないだろ！私の好きな人入ってない！** など皆さんの心の声が聞こえてきますが、ごもっともです！今回は、そもそも自分の好きな人だけを選定の対象とし、好きな有名人が出てきて、テンションあげちゃおう！というわがままな目的で作ってます。**完全に自己満足を追求した制作物ですので、温かい目で見守っていただければ嬉しいです**。

更には、大好きな愛猫もしっかり識別できるように、特別に**三毛猫判定も加えちゃおう**という身勝手ぶりです（笑）

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2554652/13da4f0d-5e28-fca6-4ed6-612429655309.png" usemap="#sample" alt="サンプル" width="40%" height="128"> 

サイトの下段には、大好きな有名人の**厳選した動画**を埋め込んでおり、**Wikipedia API(WikimediaAPI)** を使い、経歴などもすぐに検索できるようにしてみました。


## 作成手順と方法

機械学習を簡単に利用・体験する際のオススメが、Teachable Machineです。Googleが開発した機械学習モデルを無料で利用可能です。

### ①Teachable Machineで画像の機会学習をして、エクスポート

[参考にした使い方のページ](https://qiita.com/misa_m/items/d8a20d153c8ee7daf0c1)



https://teachablemachine.withgoogle.com/

上記公式ページの「**使ってみる**」から**画像プロジェクト**→**標準の画像**を選択
あとは自分の好きな有名人の画像をダウンロード（今回は平均してそれぞれ50以上取得しました）。そして、準備が出来たら、グーグル先生の機会学習にトレーニングしてもらい、終わったらエクスポートします！

<p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2554652/ced1189c-6d99-f4e0-ab6e-c62b43f3d6b3.png" alt="写真" width="75%" height="130"> 


**注意**：特に女性有名人の画像を大量にダウンロードしている時に、何故かドキドキしている自分がいました。経緯を知らずに、妻が突然入ってきたら、どうしよう？？何してるの？？？と怪しい目で見られること間違いなし！というわけで、**事前に家族や周囲にはお話ししておくなどして、作業環境にはご留意ください（笑）**

#### 大量画像のアップロードはImage Downloaderを使用
最初は一枚一枚保存していたのですが、あまりに時間がかかり、便利なツールを探していた時にこのアプリに出会いました。[Image Downloader](https://chrome.google.com/webstore/detail/image-downloader/ebagfmobaebiaadmfealidokakokhndl/related) のアプリをインストールして開くと、あとは不要な写真を選択から外して、一括ダウンロードするだけ！めちゃくちゃ便利です。使いやすいものをご利用いただくのが良いと思います。私も色々試しながら、Image Downloaderを使いました。



[参考：Image Downloader使い方](https://note.com/kkyosuke17/n/n1890832f05bd)

#### エクスポート前の最終チェック

Teachable Machine上で、画像判定を実際に体験することが出来ます。エクスポートする前の動作確認をします。表情をかえていくことで、顔判定の結果が変わっていきます。

https://twitter.com/NORI30363592/status/1516989329481949184

#### エクスポート完了

エクスポートが完了すると、Googleから共有可能なリンクを取得できます。
（→②でご説明します、Codepenでのコードを準備する際に必要になります）

<p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2554652/86b76dab-7cda-72b9-c5e9-5de95791cf89.png" alt="写真" width="50%" height="130">

### ②Codepenに機会学習データを取り込み、HTML/CSS/JavaScriptを使い実装する

#### 事前にアカウント登録が必要になります
https://codepen.io/

Codepenの利点は、**HTML/CSS/JavaScript**のコードをまとめて作成・管理し、無料で公開まで出来るところです。非常に便利です。

### ➂フィードバックを生かす
#### 妻に実際使ってもらいフィードバックより解決策を練り、反映しました。
※冒頭でお示した制作サイトは、全て反映後の最終版になります。

#### （フィードバック 1）:  女性芸能人も入れて欲しい
最初はそもそも自分用に作成したので、男性有名人５人（ﾏﾂｺ含む）だけでした。しかし、妻の要望を受けて、女性有名人を加え、三毛猫ちゃんも追加しました。

#### （フィードバック 2）:  精度を向上してほしい
画像も最初は各有名人10枚程度でしたが、精度向上のために各有名人平均50枚以上に増やしました。

#### （フィードバック 3）:  サイトがなんか寂しい、関連情報が欲しい
有名人の関連動画や、Wikipedia APIを使い詳細情報にアクセスできるようにしました。以下機能の追加付与方法等も参考にし、コードを組みなおしました。

#### リンクを設定する際に使うタグ！
リンクを貼るには、aタグを使います。"(ダブルクォーテーション)で囲んだ部分に、リンク先のURLを書きます。aタグで挟まれた部分に、リンクとして表示したい文字(アンカーテキスト)を書きます。
<a href= "https://blog.codecamp.jp/programming-html-a" >アンカーテキストを設定しリンク先URLを設定する</a>

#### HTML,CSS　ホームページの背景色や文字色を自由に変換する
下記カラーコード一覧表を使いました。
[カラーコードの一覧表](http://www.netyasun.com/home/color.htm)

#### WikipediaAPI(WikimediaAPI)を使用した情報検索サイトを別途作成
[参考にしたWikipedia API](https://codepen.io/webhacck/embed/aZmqvr?default-tab=result&theme-id=0)
→　emdedの箇所をfullにpenに置き換えれば、使用しているコードを参照することが出来ます。有難く参照させていただきました！

https://1-lifengine.com/wikipedia_api


## コード
今回使用したコードをまとめて共有いたします。こちらをCodepenで実装しています。

<details><summary> HTML</summary><div>

```html
h1>AI顔診断～似ている有名人はいったい誰？！</h1>
<p>
  <span class="name">機会学習を用いた顔判定マシンです。<br />
  皆さんの顔をAIが判定します！
</p>
<p class="info">
  ドキドキすると思うけど、覚悟が決まったら、「判定開始」ボタンを押してね！<br />
</p>
<button onclick="start()">判定開始</button><br>
<video id="webcam" width="500" height="300" muted autoplay playsinline></video>
<p id="result"></p>
<br><br>

<h3>今回AI顔判定に登場した有名人をご紹介します!</h3>

<h3>①クリスチアーノ・ロナウド：サッカーが上手くてイケメンなあなた！でも怒るとちょっとこわいから、いつも笑顔でいようね!</h3>
<div1>
	<iframe src="https://www.youtube.com/embed/74EzIRkTVw4" frameborder="0" width="540" height="270"></iframe>
<br><br><br><br><br> 

<h3>②つんく：クリエーティブで歌も上手いあなたの才能に乾杯！ばいばい、ありがとう、さようなら、懐かしの名曲を贈ります！</h3>
<div1>
	<iframe src="https://www.youtube.com/embed/Se8TWSGLVKk" frameborder="0" width="540" height="270"></iframe>
<br><br><br><br><br> 
  
  <h3>➂織田裕二：事件は現場で起きてるんだ！いつも一生懸命なあなたには大好きなワンシーンを（織田裕二の演技に注目！）</h3>
<div1>
	<iframe src="https://www.youtube.com/embed/YPZfyMDf1Ro" frameborder="0" width="540" height="270"></iframe>
<br><br><br><br><br> 
  
<h3>④ジェニファー・ロペス：セクシーで、歌もダンスもできちゃう、才色兼備なあなた！ジェニファーの曲で元気だしてね！</h3>
<div1>
	<iframe src="https://www.youtube.com/embed/Q91hydQRGyM" frameborder="0" width="540" height="270"></iframe>
<br><br><br><br><br> 
  
  
 <h3>⑤マツコ：いつも茶の間に笑顔を届けてくれてありがとう！Big BossとのCM共演最高だぜー！</h3>
<div1>
	<iframe src="https://www.youtube.com/embed/LzO6-ch4dxU" frameborder="0" width="540" height="270"></iframe>
<br><br><br><br><br> 

  <h3>⑥BENI：キュートで素敵な声で魅了してくれるあなた！大好きな曲を届けちゃいます！</h3>
<div1>
	<iframe src="https://www.youtube.com/embed/Q34GxtC1WFs" frameborder="0" width="540" height="270"></iframe>
<br><br><br><br><br> 
  
 <h3>⑦桜井和寿：甘いマスクで、最高の歌唱力をもったあなた！大好きなミスチルの曲を届けちゃいます！</h3>
<div1>
	<iframe src="https://www.youtube.com/embed/AfjteCMzYUo" frameborder="0" width="540" height="270"
          
          ></iframe>
<br><br><br><br><br> 
  
 <h3>⑧菅野美穂：可愛くて、透明感にあふれた笑顔が最高のあなた！始球式の動画をお届けします！</h3>
<div1>
	<iframe src="https://www.youtube.com/embed/nLLYLr8uEmg" frameborder="0" width="540" height="270"

 ></iframe>
<br><br><br><br><br> 
 
 <h3>⑧柴咲コウ：みんなのあこがれの美人さんのあなた！歌唱力も分かる動画をお届けします！</h3>
<div1>
	<iframe src="https://www.youtube.com/embed/tlUPiJDeFpg" frameborder="0" width="540" height="270"

 ></iframe>
<br><br><br><br><br> 
 
 <h3>⑨長谷川潤：ハーフ系美人でスタイルも良いあなた！潤ちゃんと一緒にエクササイズしてみてね！</h3>
<div1>
	<iframe src="https://www.youtube.com/embed/d71PstdnESE" frameborder="0" width="540" height="270"

 ></iframe>
<br><br><br><br><br> 
 
 <h3>⑩三毛猫サンタ：あなたの存在自体が奇跡で、かけがえのないギフト！そのままでいてね。動画を見て心を癒してね！</h3>
<div1>
	<iframe src="https://www.youtube.com/embed/czkfKyXbKvg" frameborder="0" width="540" height="270"

 ></iframe>
<br><br><br><br><br> 
  
  
<a href= "https://codepen.io/nori77/full/JjMzjoj" >Wikipediaで詳しく有名人を調べる</a>
 
</div1>
  <div>
<br><br><br>
 <h3>
AI顔判定は楽しんでいただけましたか？
<br><br>
 
ご利用誠にありがとうございました_(._.)_</h3>

<marquee bgcolor="#000080"><font color="#ffffff">Thank you! 　　ロナウド！　　つんく！　　織田裕二！　　ジェニファー・ロペス！　　マツコ！　　BENIちゃん！　　桜井和寿さん！　　菅野美穂！　　トム・クルーズ！　　広瀬すず！　　柴咲コウ！　　長谷川潤ちゃん！　　そして三毛猫サンタさん～！　　みんな最高や！  ありがとう～！！　　　created by Nori</font></marquee>
```

</div></details>

<details><summary> CSS </summary><div>

```css
#webcam {
  transform: scaleX(-1);
}
body{wideth:500px;
height:500px;
background-color: #E6FFE9; 
margin:auto;}
```

</div></details>

<details><summary> JavaScript </summary><div>

```js
// 作成したモデルのURL（ここにTeachableMachineで取得したURLをコピペします）
const imageModelURL = 'https://teachablemachine.withgoogle.com/models/MbvK446NN/';

// メインの関数（ここでは定義しているだけでボタンクリックされたら実行）
async function start() {
  // カメラからの映像ストリーム取得
  const stream = await navigator.mediaDevices.getUserMedia({
    audio: false,
    video: true,
  });
  
  // 「id="webcam"」となっているパーツ（videoタグ）を取得
  const video = document.getElementById('webcam');
  
  // videoにカメラ映像ストリームをセット
  video.srcObject = stream;
  
  // Googleのサーバーにアップロードした自作モデルを読み込みにいきます
  classifier = ml5.imageClassifier(imageModelURL + 'model.json', video, () => {
    // 読み込みが完了次第ここが実行されます
    console.log('モデルの読み込みが完了しました');
  });
  
  // 繰り返し処理
  function loop() {
    // 推論を実行し、エラーがあればerrに、結果をresultsに格納して、
    // 推論が完了次第 { } の中身を実行します
    classifier.classify(async (err, results) => {
      // 結果のresultsは配列ですが、先頭に中身があれば以下の処理を実行します
      if (results[0]) {
        document.getElementById("result").textContent = results[0].label;// 結果を画面表示
      }
      // 推論終了1秒後に自分の関数を実行（ループになる）
      setTimeout(loop, 1000);
    });
  }

  // 最初の繰り返し処理を実行
  loop();
}
```

</div></details>

## 参考記事
[ミスチルになりたかったので判定機を作ってみた](https://qiita.com/okinakamasayoshi/items/d809a04c482367cc0af7)
[顔からラグビー部かサッカー部かを判断する](https://qiita.com/naokiuc/items/ad01f4dae0f371b31fda)
[「絶好調」「好調」「普通」「不調」「絶不調」を顔判定！](https://qiita.com/dsvvpxgcseldie/items/96084830002a8376d0a5)

## 最後に

**機械学習を体験することは大変新鮮で、楽しい経験でした**。どういう顔の表情や角度で見せると、憧れの有名人に近づけるか色々試して、笑いが絶えない制作・学習機会でした。TeachableMachineには、画像だけでなく、音声やポーズの機械学習も使えるので、また**色々なものづくりにチャレンジしていきたいなと思っています**。

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