HTMLだけで画像認識！HTMLサンプルあり【ml5.js】

2022-04-02
2022-10-02
AI

自分でAIを使って画像認識してみたいけど、やり方がわからない、ってことありますよね。

この記事では、今とても注目されているAI画像認識を、HTMLだけで簡単に実装する方法を解説します。

結論、HTML上で<script>タグを使用することで、実現できます。

実装には、ml5.jsというAI画像解析用のライブラリを利用します。
これは、TensorFlow.jsをさらに利用しやすくしたライブラリです。

1 HTMLでAI画像解析する方法
2 HTMLで猫画像を解析した結果
- 2.1 入力画像1
- 2.2 出力結果1
3 猫画像を他にも解析した結果
4 参考にしたサイト
5 HTMLでAI画像解析　まとめ

HTMLでAI画像解析する方法

【手順1】AIで画像認識したい画像を用意します。例えば、以下のような猫画像を用意します。

【手順2】HTMLファイルに次の内容を記述します。

<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
<img src="AI画像解析したい画像のURL" id="myImage" />
<script>
const classifier = ml5.imageClassifier("MobileNet", () => {
    console.log('model ready!')
});
const img = document.querySelector("#myImage");
const prediction = classifier.predict(img, gotResults);
function gotResults(err, results) {
    results.forEach(result => {
        console.log(`${result.label} - ${result.confidence}`)
    });
}
</script>

上記のAI画像認識したい画像のURL、の部分は、実際に画像認識したい画像のURL(パス)を記述します。

※上記では、MobileNetという、学習済みの画像モデルを使用しています。
※また画像認識結果は、ブラウザの開発者ツールのコンソールに出力します。

【手順3】先程のHTMLファイルをブラウザで表示します。F12を押して開発者ツールを開きます。

【手順4】開発者ツールのコンソールを表示します。すると、AI画像認識結果が表示されます。