##はじめに
〇〇系イケメンって言葉がありますが...
いろいろ種類がありすぎてよくわからないですよね。
そこで今回、自分が何系イケメンなのか判定してくれる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>
こちらで遊んでみてください。
あなたは何系イケメンでしたか？？
お付き合いいただきありがとうございました。