Screenshots
Overview
概要
transformers.js(@huggingface/transformers)を使い、AI推論をすべてユーザーのブラウザ内(WebGPU/WASM)で実行する体験サイトです。感情分析・画像分類・物体検出・背景除去・埋め込みによる類似検索・音声認識(Whisper)の6デモを、負荷の軽い順に配置。入力したテキスト・画像・音声は一切サーバーへ送られず(DevToolsのネットワークタブで確認できます)、モデルサイズ・ダウンロード進捗・使用バックエンド・推論時間を常時表示します。
How to use
遊び方・使い方
トップで対応環境の判定を確認し、6つのデモから選びます。各デモはモデルロードパネルでダウンロードとバックエンド(WebGPU/WASM)を確認してから、テキスト入力・画像アップロード・録音などで推論を実行。感情分析、ImageNet 1000クラス分類、COCO物体検出の枠描画、背景除去したPNG出力、日本語サンプルとのコサイン類似度Top5、Whisperによる音声の文字起こしを、その場で試せます。モデルはブラウザにキャッシュされ、削除ボタンで消せます。
Tech stack
技術スタック
@huggingface/transformers 4系を利用し、next.config.tsでsharp/onnxruntime-nodeをfalseにエイリアス。pipeline()でtext-classification/image-classification/object-detection/image-segmentation/feature-extraction/automatic-speech-recognitionを呼び分け、音声は16kHzモノラルへ変換して推論します。データは端末外へ出ません。
Highlights
工夫した点
- 各デモは専用のWeb Workerでモデルを読み込み(パイプラインはWorker内シングルトン)、UIをブロックせず推論。navigator.gpuでWebGPUを判定し、可能ならfp16、不可ならWASM+q8へ自動フォールバック
- 唯一の外部通信はHugging Faceからのモデル取得のみに限定し、onnxruntime-webのwasmは自サイトの/wasm/へ向けてCDN例外を最小化。モデルはブラウザのCache APIにキャッシュ
- デモごとに用途別モデルを厳選(感情=多言語DistilBERT、分類=ViT、検出=DETR、背景除去=RMBG-1.4、埋め込み=multilingual-e5-small、音声=Whisper base)し、低スペック時はWhisperをtinyへ切替
To improve
改善したい点
- モデル合計は数百MB規模で、初回ダウンロードの体感時間はネットワーク次第で大きい
- WebGPU非対応環境ではWASMにフォールバックし推論が遅くなる
- 対応モデルは6種で、より新しい/軽量なモデルへの追随が継続課題
What's next
今後の展望
- テキスト生成(小型LLM)や翻訳などデモの追加
- モデルの量子化・バックエンド選択をユーザーが切り替えるUI
- 推論結果の書き出しや、複数モデルのパイプライン連携