あなたは〇〇系イケメン！？を判定するAIを作成 #JavaScript

はじめに

〇〇系イケメンって言葉がありますが...
いろいろ種類がありすぎてよくわからないですよね。

そこで今回、自分が何系イケメンなのか判定してくれるAIを作成してみました。

参考記事

■イケメンに関して

■大まかな流れ

今回の流れ

Teachable Machineで学習しました。

画像プロジェクトを選択し、
今回は「中性的」「爽やか」「テルマエ」「ワイルド」「雰囲気」の5つにイケメンを分類しました。

画像の収集にはGoogle Chromeの拡張機能であるImage Downloaderを使用しました。

特徴としては、複数の画像をフォルダでまとめて自身のPCにダウンロードできるというメリットがあるかと思います。

Image Downloaderはこちらのサイトを参考にしました。

ダウンロードしたい画像を選択したら、
左下のSave to subfolderにだけフォルダ名を入力して、Teachable Machineに学習させたいフォルダごとに分けました。

Teachable Machineで
最初に紹介したサイトをもとに芸能人の写真を学習させました。

HTMLファイルのbodyタグ内に、
エクスポートした後のps5.jsのコードを貼り付けました。

最後にそれをコードペンへコピーし、完成。

完成

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>〇〇イケメン診断</title>
  </head>
  <body>
    <div>Teachable Machine Image Model - p5.js and ml5.js</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
<script type="text/javascript">
  // Classifier Variable
  let classifier;
  // Model URL
  let imageModelURL = 'https://teachablemachine.withgoogle.com/models/6kSRN99cf/';

  // Video
  let video;
  let flippedVideo;
  // To store the classification
  let label = "";

  // Load the model first
  function preload() {
    classifier = ml5.imageClassifier(imageModelURL + 'model.json');
  }

  function setup() {
    createCanvas(320, 260);
    // Create the video
    video = createCapture(VIDEO);
    video.size(320, 240);
    video.hide();

    flippedVideo = ml5.flipImage(video);
    // Start classifying
    classifyVideo();
  }

  function draw() {
    background(0);
    // Draw the video
    image(flippedVideo, 0, 0);

    // Draw the label
    fill(255);
    textSize(16);
    textAlign(CENTER);
    text(label, width / 2, height - 4);
  }

  // Get a prediction for the current video frame
  function classifyVideo() {
    flippedVideo = ml5.flipImage(video)
    classifier.classify(flippedVideo, gotResult);
    flippedVideo.remove();

  }

  // When we get a result
  function gotResult(error, results) {
    // If there is an error
    if (error) {
      console.error(error);
      return;
    }
    // The results are in an array ordered by confidence.
    label = results[0].label;
    //追加
    if(label=="中性的イケメン") document.getElementById("type").innerText = "HYDE、手越祐也、小池徹平、山田涼介など";
    else if(label=="爽やかイケメン") document.getElementById("type").innerText = "福士蒼汰、岡田将生、山崎賢人、三浦春馬など";
    else if(label=="テルマエイケメン") document.getElementById("type").innerText = "阿部寛、岡田准一、北村一輝、山田孝之など";
    else if(label=="ワイルドイケメン") document.getElementById("type").innerText = "長瀬智也、山口達也、桐谷健太など";
    else if(label=="雰囲気イケメン") document.getElementById("type").innerText = "綾野剛、オダギリジョー、星野源、瑛太など";


    // Classifiy again!
    classifyVideo();
  }
</script>
    <div id="type">似ている芸能人</div>
  </body>
</html>

こちらで遊んでみてください。

あなたは何系イケメンでしたか？？

お付き合いいただきありがとうございました。