ブラウザだけで動くYOLO12×TensorFlow.jsリアルタイムAI物体検出

機械学習

2025.12.13

「AIを使うにはPythonや高度な数式が必要」

そんな時代はもう終わりました。

Googleが開発する TensorFlow.js を使えば、JavaScriptだけであなたのブラウザが最先端AIラボに大変身。

しかも、Webカメラをつなげば、まるでSF映画のようなリアルタイム物体検出が

たった数行のコード

で実現できる。

例えば物体検出の代表的なアルゴリズム

YOLO（You Only Look Once : 見るのは一度だけ）

元々はワシントン大学のジョセフ・レッドモン(Joseph Redmon) とアリ・ファルハディによってCVPR2016（画像認識のトップカンファレンス）で発表された。

物体の検出と識別を一つの処理で同時に行うことで、驚異的な速度を実現している。

TensorFlow.js x YOLO12を利用してみる
1. 「model.json」の作り方（Google Colabを利用）
2. YOLO-v12を使ったWebサービスを実装
おわりに
1. ソースコード

現在はバージョン12まで存在する（2025年2月18日時点）。

YOLO-v12 は、画像認識に高い精度を発揮することが知られながらも速度がネックとなっていた attention 機構を導入。また、残差接続を行う R-ELAN の導入など、ネットワーク構造の最適化を実施。結果、物体検出を従来モデルよりも高速かつ高精度に実行可能。

YOLO12は、物体検出、インスタンス分割、画像分類、姿勢推定、指向性物体検出（OBB）をサポート。

今回は「物体検出」。検出数は80種類。

👤 人・動物（11種類）	person, bird, cat, dog, horse, sheep, cow, elephant, bear, zebra, giraffe
🚗 乗り物（8種類）	bicycle, car, motorcycle, airplane, bus, train, truck, boat
🚦 交通関連（4種類）	traffic light, fire hydrant, stop sign, parking meter
🏠 家具・インテリア（15種類）	bench, chair, couch, potted plant, bed, dining table, toilet, tv, laptop, mouse, remote, keyboard, cell phone, book, clock
🍽️ 食器・調理器具（13種類）	bottle, wine glass, cup, fork, knife, spoon, bowl, microwave, oven, toaster, sink, refrigerator, vase
🍕 食べ物（10種類）	banana, apple, sandwich, orange, broccoli, carrot, hot dog, pizza, donut, cake
⚽ スポーツ用品（10種類）	frisbee, skis, snowboard, sports ball, kite, baseball bat, baseball glove, skateboard, surfboard, tennis racket
👜 身の回り品（10種類）	backpack, umbrella, handbag, tie, suitcase, scissors, teddy bear, hair drier, toothbrush

これを TensorFlow.js を利用してデモ実装してみる。

TensorFlow.js x YOLO12を利用してみる

「TensorFlow.js」は、Googleが開発したJavaScript用の機械学習ライブラリ。

ブラウザで直接実行が可能でWebGLを使った高速推論ができる。

「YOLO-v12」には用途に応じた5つのモデルサイズがある。

yolo12n.pt：Nano版（最高効率、エッジデバイス最適）
yolo12s.pt：Small版（バランス型、実用性重視）
yolo12m.pt：Medium版（汎用用途、精度向上）
yolo12l.pt：Large版（高精度重視、計算コスト増）
yolo12x.pt：Extra Large版（最高性能、最大計算要求）

今回はWeb用途なので、最軽量の「yolo12n.pt」を選択。

YOLO12

比類のない精度と効率を備えた最先端のオブジェクト検出を実現する、画期的なアテンション中心のアーキテクチャを特徴とするYOLO12をご覧ください。

ただし「yolo12n.pt」を「TensorFlow.js」で直接利用することはできない。

Ultralytics（YOLOの開発元）は、YOLO12のpre-trainedモデル（yolon.pt）をダウンロードして、

自分でTensorFlow.js形式にエクスポートしろ

と言っている。

「model.json」の作り方（Google Colabを利用）

TensorFlow.js形式のモデルを作るには次のような処理が必要。

1. PyTorchモデル(.pt)を読み込み
2. ONNX形式に変換
3. TensorFlow形式に変換
4. TensorFlow.js形式に変換

変換処理だけなのでCPUでも可能だけど、今後の学習のために

Google Colab（Colaboratory）

を使って変換してみる。

Google Colab（Colaboratory）ブラウザ上でPythonのコードを書いたり実行したりできる、Jupyter Notebookベースのサービス。

環境構築が不要で、無料のGPU やTPUといった計算リソースも利用できる。

Google Colab

最初に Ultralyticsパッケージ等をインストール。

!pip install ultralytics tensorflow tf_keras
!pip install --no-deps tensorflowjs
!pip install --upgrade packaging>=24.2.0

!pip install ultralytics tensorflow tf_keras

!pip install --no-deps tensorflowjs

!pip install --upgrade packaging>=24.2.0

そして、YOLO-v12モデルをロードしてエクスポートを行う。

from ultralytics import YOLO

# YOLO12のnanoバージョンをロード（他のサイズ: yolo12s.pt, yolo12m.pt など）
model = YOLO("yolo12n.pt")  # 自動でダウンロードされる

# TensorFlow.js形式にエクスポート
model.export(format="tfjs")  # 'yolo12n_web_model' フォルダが作成される