JavaScriptだけでAI画像認識！TensorFlow.jsで作るリアルタイム分類アプリ

はじめに｜JavaScriptだけでAIを体験できる時代

「AIを使うにはPythonや高度な数式が必要」――そんな時代はもう終わりました。
Googleが開発する TensorFlow.js を使えば、JavaScriptだけでブラウザ上にAIを組み込むことが可能です。しかも、Webカメラを使ってリアルタイムに物体を分類できます。

この記事では、TensorFlow.jsとMobileNetモデルを使って、カメラに映った物体を自動で分類するアプリの作り方を、HTMLファイル1枚で完結する形で解説します。

完成イメージ

HTMLファイルを開くだけでカメラが起動
映っている物体をAIが自動分類
ラベルと確率が2秒ごとに更新される
特別な環境・サーバー・インストールは不要

必要なもの

Webブラウザ（Chrome推奨）
インターネット接続（CDN経由でライブラリ読込）
HTMLファイル1枚だけ！

コード全文（コピペですぐ試せる）

以下が、リアルタイム画像分類を行うHTMLコードです！

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>リアルタイム画像分類</title>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.10.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@2.1.0"></script>
    <style>
      body {
        font-family: sans-serif;
        text-align: center;
        margin-top: 20px;
      }
      video {
        width: 224px;
        height: 224px;
      }
      p {
        font-size: 16px;
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <h2>カメラAI分類</h2>
    <video id="video" autoplay muted playsinline></video>
    <p id="result">モデルを読み込み中...</p>

    <script>
      const video = document.getElementById("video");
      const result = document.getElementById("result");

      async function init() {
        const stream = await navigator.mediaDevices.getUserMedia({
          video: { width: 224, height: 224, facingMode: "environment" },
          audio: false,
        });
        video.srcObject = stream;

        const model = await mobilenet.load();
        result.innerText = "分類中...";
        const classify = async () => {
          const predictions = await model.classify(video);
          result.innerText = predictions.length
            ? `${predictions[0].className} (${(predictions[0].probability * 100).toFixed(1)}%)`
            : "分類できませんでした";
          setTimeout(classify, 2000);
        };

        classify();
      }

      init();
    </script>
  </body>
</html>

解説｜このコードがやっていること

TensorFlow.jsとMobileNetをCDNで読み込み
→ AIライブラリと学習済みモデルを即時利用
カメラ映像をvideo要素で取得
→ getUserMedia() により実行中のブラウザカメラを起動
モデルをロードして画像を分類
→ mobilenet.classify(video) でリアルタイム推論
結果表示を2秒ごとに更新
→ 負荷を抑えるため setTimeout でループ制御

実行方法（ポイント）

コードを .html ファイルとして保存（例：index.html）
ローカルWebサーバーで開く（セキュリティ上、file:// ではカメラが動作しないことが多い）
- 例：VS Codeの「Live Server」拡張を使用
- またはPythonの簡易サーバー python -m http.server