0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Live VLM WebUI で始めるリアルタイム Vision AI - ローカル/クラウド両対応

Posted at

NVIDIA 本社で、Jetson のテクニカルマーケティング・エンジニアとして働く矢戸知得です。
す。

今回は、我々が最近オープンソース公開したツールを紹介します。

Live VLM WebUI
vlcsnap-2025-11-13-19h28m54s005.png

はじめに - VLM のインパクト

みなさん、LLM をローカル環境で動かすのは見たり、実際に行った人も多いと思いますが、では VLM はどうでしょう?

Vision Language Model は要は画像にも対応した LLM ですが、OpenAI の GPT-5 や GPT-4o だけに限らず、オープンウェイトのモデルも増えてきています。

製作者 モデル名 サイズ
Alibaba Qwen 2.5 VL 3b, 7b, 32b, 72b
Alibaba Qwen 3 VL 2b, 4b, 8b, 30b, 32b, 235b
Google Gemma 3 4b, 12b, 27b
Meta Llama 3.2-Vision 11b, 90b
Meta Llama 4 16x17b, 128x17b
Microsoft Phi-3.5-vision 4.2b
NVIDIA Cosmos-Reason1 7b
NVIDIA Nemotron Nano 12B V2 VL 12b

後に詳述しますが、この VLM は、OCRといった既存のコンピュータービジョン延長の用途だけでなく、ロボティクスなどの広い分野で、とてつもない可能性を秘めています。

そしてモデルサイズで 4b (40億パラメター) などのバリエーションから用意されていることから分かるように、ローカル環境で動かすことも可能になってきています。

VLM の可能性を理解するには、実際にリアルタイムで動かしてみるのが一番なのですが、今までのやり方だと;

  • Open WebUI のような既存ツールで、画像を毎回アップロードして試す(カメラからストリームできない)
  • 複数のプラットフォーム(PC、Jetson、クラウド)で統一したテスト環境がない
  • (ローカル環境で動かすなら) GPUの使用状況も簡単にリアルタイムで確認したい

などのハードルがあり、これらが VLM をリアルタイムで動かす可能性を探る大きな妨げになっていた感があります。

Live VLM WebUI は、これらの課題を解決する Web インターフェースです。

Live VLM WebUI とは?

Webカメラからの映像を任意の Vision Language Model にリアルタイムストリーミングし、AIの解析結果をオーバーレイ表示するブラウザ上で簡単に使えるツールです。

主な特徴:

  • WebRTC 映像ストリーミング - 低遅延でリアルタイム転送
  • 🔌 複数バックエンド対応 - Ollama, vLLM, NVIDIA API Catalog, OpenAI
  • 📊 リアルタイムGPUモニタリング - GPU使用率、VRAM使用量をグラフ表示
  • 🌐 クロスプラットフォーム - Linux PC, Mac, Jetson, DGX Spark, Windows (WSL2) で動作確認済み
  • 🐳 簡単インストール - pip 一発、もしくは Docker 用スクリプト 一発
  • 📖 Apache 2.0 ライセンス - 完全オープンソース

GitHub: https://github.com/nvidia-ai-iot/live-vlm-webui

デモ動画

📼 YouTube上のデモ動画

下準備 - バックエンドとしての Ollama

VLM をサーブするバックエンドとして、ここではどのプラットフォームでも動く Ollama をインストールして、モデルを pull (ダウンロード) しておきましょう。

# Mac / Linux / Jetson / DGX Spark / WSL2
curl -fsSL https://ollama.com/install.sh | sh

# 推奨モデル(軽量)ダウンロード
ollama pull gemma3:4b

# または他の Vision Model
# ollama pull llama3.2-vision:11b

インストール方法

方法A: pip でインストール(最も簡単, Jetson 以外)

# Python 3.10+ が必要
pip install live-vlm-webui
live-vlm-webui

方法B: Docker コンテナ(Jetson の場合)

git clone https://github.com/nvidia-ai-iot/live-vlm-webui.git
cd live-vlm-webui
./scripts/start_container.sh

方法C: ソースからインストール(開発者向け)

git clone https://github.com/nvidia-ai-iot/live-vlm-webui.git
cd live-vlm-webui
pip install -e .
./scripts/start_server.sh

Step 1: Live VLM WebUI の起動と設定を確認

  1. ブラウザで https://localhost:8090 を開く (もしくは WebUI を動かしているマシンのIPアドレスで)
  2. 証明書の警告が出たら「続行」(自己署名のため)
  3. 左設定メニューの「VLM API Configuration」で、以下が自動設定されていることを確認
  • API Endpoint を http://localhost:11434/v1 (Ollamaのもの)
     - Model は gemma3:4b (もしくは自分で pull したもの)

Step 2: カメラを起動

  1. 緑色の「Start Camera and Start VLM Analysis」ボタンをクリック
  2. ブラウザがカメラへのアクセスを求めたら「許可」
  3. カメラ映像が表示されます

これで、リアルタイムで Vision Language Model が映像を解析し始めます!

主な機能

結果表示

右側の主ペインに以下が表示されます

1. リアルタイム AI 解析結果

VLM Output Info 欄に、以下が表示されます。

  • 右上: 推論時間(Latency)、平均推論時間、今までの解析数
  • 現在利用されているVLMモデル
  • 現在設定されているプロンプト文
  • 解析結果テキスト (Markdown構文対応)

2. リアルタイム映像

WebRTC でユーザーが利用するクライアントPC の Web カメラからストリーミングされた映像が表示されます。

  • 左上 「Mirror」ボタン (カメラに向き合う場合に便利な鏡上表示)
  • 解析結果テキスト (もし設定でオーバーレイを有効にした場合)

3. GPU/CPUモニタリング

リアルタイムでハードウェアの使用状況を確認できます:

  • GPU使用率 (Macでは利用不可)
  • VRAM使用量 (Macでは利用不可)
  • CPU使用率
  • システムRAM使用量

詳細設定

左側の設定メニューで、設定・動作をカスタマイズできます。

1. プロンプトのカスタマイズ

一番重要なのが、左側設定メニューの一番下にある「Prompt Editor」です。

Quick Prompt に8つの規定のプロンプト文が用意されていあるので、選んで試してみてください。

  • シーン解析: "Describe what you see in this image in one sentence." (この画像を一文で説明)
  • 物体検出: "List all objects you can see in this image, separated by commas." (画像内の物体をコンマで分けてリストアップ)
  • 動作認識: "Describe the person's activity and what they are doing." (人物の動作を説明)
  • 安全判定: "Are there any safety hazards visible? Answer with 'ALERT: description' or 'SAFE'." (安全上の問題が検知されたら 'ALERT: 説明'、なければ'安全'を出力)
  • 表情検知: "Describe the facial expressions and emotions of people visible." (画像内に見える人の表情や感情を説明)
  • アクセシビリティ: "Provide a detailed description of the scene for a visually impaired person." (視覚にハンディキャップを持った人用に詳細説明)
  • OCR / 文字認識 : "Read and transcribe any text visible in the image." (画像内の文字起こし)
  • Yes/No 質問 : "Answer with Yes or No only: Is there a person visible?" (画像内に人がいるか・いないかをYesかNoで答える)

さらに Custom Prompt 欄に自分で独自のプロンプトを入れることも出来ます。

gemma3:4b を含め、複数言語対応しているモデルも多いので、日本語でプロンプト文を入れても OK です。

リアルタイム・プロンプト・エンジニアリング

また、リアルタイムの ビジョン・プロンプト・エンジニアリングとでも言える芸当も可能です。

例えば、物体検出のプロンプトをそのまま利用すると

"Here is a list of objects I see in the image: person, desk, monitor..."

などとモデルがおせっかいに前置きまで含めちゃったりします。CSVとしてそのまま後段のアプリに食わせることを想定している場合、これだと不都合なので、

List all objects you can see in this image, separated by commas. 
Do not start with "Here is a list of..."

などとプロンプト文をカスタマイズすることで、抑制することができます。

リアルタイムで評価できるこのツールならではの使いかたと言えるでしょう。

2. バックエンド設定

左側設定メニューの一番上の「VLM API Configuration」を利用して、VLMを動かす(サーブする)複数のバックエンドに対応できます。

API Base URL

同一マシン上で、Ollama, vLLM, SGLang などがローカルで動いていた場合は、自動設定されます。
検知されないときは、クラウド API を指定することができます。デフォルトで、NVIDIA API Catalog が設定されます(後述のフリーAPI Key 取得方法あり)。
クラウドAPIを指定したときは、 API Key 欄が表示されて、ここに自分のキーを入力できます。

Model Selection (モデル選択)

上で指定された API に問い合わせて、利用可能になっているモデルが一覧されます。

3. カメラ設定

左側メニュー中段にある "Camera and App Control" でカメラの選択や、カメラに関わる動作設定ができます。

Camera Selection (カメラ選択)

クライアントPC上でブラウザが認識した利用可能なカメラがリストアップされます。
最近のノートPCを利用していれば、前面カメラが利用できるはずです。Jetson などで直接デスクトップ上でブラウザを利用する場合は、そのJetsonにUSBカメラなどを接続してください。

VLM解析中でもカメラを切り替えることができます。

Frame Processing Interval (フレーム処理間隔)

WebRTC のカメラフレーム処理(ブラウザからUIサーバ側に送られてきたものをそのまま返してるだけ) と、VLM による解析処理は、非同期で実行されています。

VLM による解析が終わったあと、デフォルトでは 30で割り切れる次のフレーム番号のフレームを待って、次の処理を始めるようになっています。

もし、解析のペースを緩めて、ひとつひとつの解析結果テキストを見るのにもう少し時間が欲しいというときは、この数字をあげるといいでしょう。

RTSPストリーム

監視カメラ (IPカメラ) からの RTSP ストリームにも Beta 機能として暫定対応しています。

ただ、多くのカメラと検証を行っていないので、問題が見つかった場合、GitHub Issues で報告してもらえるとありがたいです。

動作確認済みローカル・プラットフォーム

プラットフォーム GPU 動作確認 推論速度
PC (RTX 6000 Ada) RTX 6000 Ada <1秒/フレーム (gemma3:4b)
Jetson Orin Nano 8GB 1024コア Ampere 7-8秒/フレーム (gemma3:4b)
Jetson Thor 128GB 2560コア Blackwell 1-2秒/フレーム (llama3.2-vision:11b)
DGX Spark 6144コア Blackwell 1-2秒/フレーム (llama3.2-vision:11b)
Mac (M3) Apple Silicon 2-4秒/フレーム (gemma3:4b)
Windows (WSL2) RTX A3000 2~4秒/フレーム (gemma3:4b)

Jetson Orin Nano 開発者キットでの動作

もっとも廉価な Jetson である、Jetson Orin Nano 開発者キットでも、Ollama を利用して gemma3:4b などが動きました!

1フレームにかかる時間は 7~8 秒とかかりますが、連続して動かすことが出来るので、リアルタイムシステムとして可能性が広がると思います。

活用例

実際に各種 VLM を現実世界で(リアルタイム、色んなシーン下で、異なるマシン上で)動かしてみると、たくさんの可能性が見えてくるはずです!

1. モデルベンチマーク

まず堅いユースケース。
ひとつのモデルを様々なシーンでテストして、最初のアタリをつけるのに便利に使えます。

  • 1 フレーム処理するのにかかる時間は?
  • 物体検出はどこまで見つけられそう?位置までこたえられる?
  • JSON 出力は可能?
  • OCR は得意?
  • 日本語も流暢に扱える?

また複数モデルを比較ベンチーマークテストするのにも使えるでしょう。推論速度や、GPU使用率などをの情報を見るのが役に立ちます。

2. ロボティクス開発

VLM を使ったロボットの視覚。ビジョンベースでロボットに環境を理解させることができます。

  • 物体認識と位置推定
  • 環境理解とナビゲーション
  • 人間とのインタラクション

3. ライブデモ・プレゼンテーション

対面カメラを使ったリアルタイム・デモは、何気にいろんなところで受けます、映えます。

  • カメラを向けるだけで AI が解析開始
  • GPU メトリクスで処理の様子を可視化
  • 聴衆の質問に即座に対応

4. 教育・研究

使いやすさ・どこでも動くこともあって、教育分野での利用も多いにあり得ると思います。

  • VLM を使った実習
  • VLM 活用のアプリのブレインストーミング
  • リファレンス実装として活用

X. 既存 Computer Vision ベースのパイプライン代替

さらに推し進めると、少なくとも将来の可能性として、今までは人が手動でプログラミングして組んでいた Computer Vision アルゴリズムベースの画像解析パイプラインを、VLM を活用して置き換えてしまう!もしくは既存手法では無理だったことをVLMで実現するというような大胆な未来も見えてきます。

分野によっては信頼性などの面でまだ課題もありますが、今後の VLM の進化によって、大規模言語モデルで起こったことと同じように、近い将来に現実の要求に答えられるようになってくることも十分あり得るように感じます。

スマートシティの分野では、NVIDIA が Video Search and Summarization (VSS) として既にソリューションを開発・提供しています。

まとめ

Live VLM WebUI は、Vision Language Model をリアルタイムでテストするために便利なツールです。

こんな人におすすめ:

  • 🧭 VLM を手っ取り早く試して、可能性を探りたい人
  • 🚀 Ollama で Vision Model を活用したい人
  • 💻 異なるハードウェアでの VLM 性能を比較したい人
  • 🤖 Jetson でエッジAI 開発をしている人
  • 🔬 VLM の研究・ベンチマークをしている人

プロジェクトリンク:

Issue、PR、フィードバック大歓迎です!⭐

参考リンク


著者について:
NVIDIA で Jetson のテクニカルマーケティングに携わっています。
開発者コミュニティへの貢献の一環として、このツールをオープンソースで公開しました。

タグ: #AI #機械学習 #NVIDIA #Jetson #VisionAI #Ollama #WebRTC #VLM #EdgeAI

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?