目次3 セクション
このサイトのWebGPU サンプル ZIPを使い、ブラウザ内で動く画像質問アプリを作れます。画像入力、回答の逐次表示、読み込み進捗、キャンセル、JSON 出力、サンプル画像が含まれています。導入前にオンラインデモも試せます。
モデルと実行要件
サンプルは Transformers.js 4.3.0 と、コミュニティが ONNX に変換した onnx-community/FastVLM-0.5B-ONNX を固定して使います。Apple の元の PyTorch ファイルとは別物です。ブラウザには WebGPU、shader-f16、十分な空き GPU メモリが必要です。機能チェックを通過してもメモリが足りる保証はありません。初回は約 1.1 GB をダウンロードし、以後はブラウザのキャッシュを再利用できる場合があります。モデルカードとTransformers.js の WebGPU ガイドも確認してください 。
サンプルを起動する
ZIP を展開し、fastvlm-webgpu ディレクトリで依存関係をインストールして開発サーバーを起動します。依存バージョンはサンプルに固定されています。根拠なく推論ライブラリやモデル ID を変更しないでください。画像と質問はブラウザ内で処理され、モデルファイルは Hugging Face から取得します。独自に配信する際は、静的ファイルの URL とコンテンツセキュリティポリシーを確認します。
このサンプルは推論を Web Worker に移し、ページの操作を妨げにくくしています。選択した画像の形式とサイズを検査し、扱える寸法に縮小します。キャンセル時は稼働中の Worker を終了し、状態を消去します。再実行時にはモデルセッションを作り直します。利用イベントは操作の種類と所要時間を記録しますが、元画像、ファイル名、質問、回答をこのサイトの分析イベントへ送信しません。
問題が起きた場合
| 症状 | 確認すること |
|---|---|
WebGPU または shader-f16 がない | 対応するブラウザと端末に変更するか、Python ガイドを使います。 |
| 初回の読み込みが遅い | 通信、ブラウザキャッシュ、進捗表示、空き容量を確認します。 |
| 推論中にメモリが不足する | GPU を使う別のタブを閉じる、画像を小さくする、または Python を使います。 |
| 回答が画像と合わない | 画像の画質、文字サイズ、質問を見直します。生成結果をそのまま事実として扱わないでください。 |
JSON 出力には質問、回答、所要時間が入り、画像のピクセルは含まれません。カメラデモは独立した Hugging Face 埋め込みで、利用者が明示的に開いたときだけ接続します。モデル選択ガイドに進むか、FastVLM の概要に戻れます。
続きを読む
同じテーマやツールに関連する記事。
関連ツール
この記事のテーマに近いディレクトリ項目を確認できます。
