ブラウザでの LLM の実行: プライバシー優先の履歴書編集に WebGPU と WebLLM を使用する方法
現在市場にあるすべての AI を活用した履歴書ツールは、データをサーバーに送信します。彼らはそれが「安全」だと言うでしょう。彼らは SOC 2 準拠バッジを指します。しかし、エンジニアリングの現実は次のとおりです。履歴書がデバイスから流出すると、その履歴書はもはやあなたのものではなくなります。 履歴書はデータベース、ログ ファイル、トレーニング パイプライン、または発生を待っているデータ侵害の中に存在します。
私たちはそのトレードオフを受け入れることを拒否しました。そこで、私たちは別のものを構築しました。それは、WebGPU と Transformers.js を使用してブラウザ内で 5 億パラメータの言語モデルを直接実行する、完全にクライアント側の AI 履歴書リライターです。 API キーはありません。クラウド推論はありません。サーバーがありません。
この技術的な詳細な説明では、次のことを学びます。
- サーバーレス AI が機密文書用の唯一の真のプライベート アーキテクチャである理由
- WebGPU がブラウザーで GPU アクセラレーション推論を実現する方法
- 使用した正確なスタック (Astro、Transformers.js、Xenova/Qwen1.5-0.5B-Chat)
- 300MB モデルをブラウザー タブに配信する際のエンジニアリング上の課題
- パフォーマンス ベンチマークと現実世界のレイテンシー数値
最新の AI ツールのプライバシー パラドックス
AI 履歴書リライターの人気は爆発的に高まりました。 Teal、Resume.io、Jobscan などのツールは、細かい文字を読むまでは魔法のように聞こえる「AI による箇条書き書き換え」を提供します。ほぼすべてのサービスは クライアント/サーバー アーキテクチャ で動作します:
- Web フォームに履歴書を貼り付けます。
- データは転送中に暗号化されます (TLS)
- クラウドサーバー上で復号化されます
- LLM API (OpenAI、Anthropic、または自己ホスト型モデル) がそれを処理します。
- 書き換えられたテキストが送り返されます
これは、表面的には安全に見えます。しかし、攻撃対象領域は膨大です。
- サーバー ログ には、デバッグ用に完全な履歴書が保存される場合があります
- サードパーティ LLM API は、エンタープライズ層の料金を支払わない限り、データをトレーニングできます
- データ侵害により、自宅の住所、電話番号、職歴、給与データを含む履歴書が公開される
- コンプライアンスのギャップ — 削除を保証できないため、ほとんどのツールは EU ユーザーにとって GDPR に準拠していません
結論: 履歴書がサーバーに触れている場合、最も機密性の高い専門文書が第三者によって読まれたり、記録されたり、漏洩されたり、収益化されたりしないと信頼していることになります。私たちがユーザーにそれを求めるような賭けではありません。
クライアントサイド AI がすべてを変える理由
クライアントサイド AI はアーキテクチャを完全に反転させます。データをモデルに送信する代わりに、モデルをデータに送信します。 LLM はブラウザのメモリに直接ダウンロードされ、ローカル GPU または CPU 上で実行され、履歴書テキストがデバイスから送信されることはありません。
プライバシーへの影響は絶対的です:
- 履歴書データを含むネットワーク通話はゼロ
- 個人情報を含むサーバーログはゼロ
- **不透明なデータ ポリシーを備えた ゼロ サードパーティ LLM API
- 当社のインフラストラクチャからのデータ侵害のリスクはゼロ — お客様のデータに触れるインフラストラクチャがないため
しかし、クライアント側 AI は単なるプライバシー対策ではありません。また、目に見えるパフォーマンス上の利点も提供します:
- 遠方のデータセンターへの往復で遅延なし
- レート制限なし または API クォータなし
- AI 機能のサブスクリプション ゲートなし
- オフライン機能 モデルがキャッシュされると
WebGPU: Compute Engine としてのブラウザ
最近まで、ブラウザで LLM を実行することは計算上不可能でした。 WebGL は利用可能な唯一の GPU API であり、汎用コンピューティングではなくグラフィックス向けに設計されていました。その後、WebGPU が到着しました。
WebGPU とは何ですか?
WebGPU は、最新の GPU 機能 (Vulkan、Metal、DirectX 12) を JavaScript に直接公開する次世代の Web 標準です。 WebGL とは異なり、汎用 GPU 計算シェーダー をサポートしているため、ニューラル ネットワーク推論のような行列を多用する操作に最適です。
ブラウザ LLM を可能にする主要な機能:
- 計算パイプライン — 大規模並列行列乗算カーネルを実行します
- ユニファイド メモリ モデル — 高価な CPU-GPU コピーを必要としない直接 GPU バッファ アクセス
- シェーダー言語 — カスタム推論カーネル用の WGSL (WebGPU Shading Language) を作成します。
- クロスプラットフォーム — Chrome、Edge、Firefox、Safari でネイティブ パフォーマンスで動作します
LLM 推論における WebGPU と WebGL
| 特集 | WebGL | ウェブGPU |
|---|---|---|
| シェーダーの計算 | ❌ いいえ | ✅ はい |
| 行列演算 | 遅い (シミュレート) | ネイティブ、パラレル |
| メモリ効率 | CPU と GPU のオーバーヘッドが高い | 統合された、低いオーバーヘッド |
| LLM 推論速度 | ~10 ~ 20 トークン/秒 | ~50 ~ 100 トークン/秒 |
| ブラウザのサポート | ユニバーサル | 最新のブラウザ (94%+) |
私たちのユースケース (500M パラメーター モデルでレジューム箇条書きを書き換える) の場合、WebGPU は、CPU のみのフォールバックよりも 4 ~ 5 倍高速な推論、WebGL ベースのアプローチよりも 2 ~ 3 倍高速を実現します。
私たちのスタック: Astro + Transformers.js + Xenova/Qwen1.5
クライアント側 AI リライターの構築には、慎重なテクノロジーの選択が必要でした。私たちは、高速かつ最小限で、ブラウザ側の大量の計算と互換性のあるフレームワークを必要としていました。これが私たちがたどり着いた正確なアーキテクチャです。
フレームワーク: Astro
私たちは、デフォルトでゼロ JS の理念 から Astro を選択しました。ほとんどの履歴書ツールは、ユーザーが履歴書を貼り付ける前に 500KB 以上の JavaScript を出荷する肥大化した React アプリです。 Astro を使用すると、ランディング ページとブログ用の静的 HTML を配信し、必要に応じてインタラクティブなコンポーネント (エディター、AI パネル) のみをハイドレートできます。
Astro がクライアントサイド AI にとって重要な理由:
- 初期ページ読み込みは 50KB 未満の JavaScript です
- ユーザーが [AI で書き換え] をクリックすると、重い AI モデルが オンデマンドで読み込まれます
- ブログやマーケティング ページなどの静的コンテンツのハイドレーション オーバーヘッドはありません
AI ランタイム: Transformers.js
Hugging Face の Transformers.js は、これを可能にするブリッジです。これは、Python Transformers ライブラリの ONNX Runtime Web へのポートであり、事前トレーニングされたモデルを WebGPU または WebGL フォールバック経由でブラウザーで実行できるようにします。
主要な技術的詳細:
- モデルは INT8 に量子化され、サイズとメモリ フットプリントが削減されます
- WebGPU 実行プロバイダーを備えた ONNX ランタイム Web バックエンドを使用します
- パイプラインは、ブラウザー内でトークン化、推論、デコードをエンドツーエンドで処理します
モデルの選択: Xenova/Qwen1.5-0.5B-Chat
Xenova ONNX ポート経由で Qwen1.5-0.5B-Chat に決定する前に、複数のモデルを評価しました:
選択基準:
- ユーザー エクスペリエンスを損なうことなくダウンロードできるほど小さい (量子化された最大 300MB)
- 「この箇条書きをより影響力のあるものに書き換えてください」というプロンプトに対する強力な指示に従います
- 商用利用のための許可されたライセンス
- コンシューマ GPU での高速推論 (短い弾丸書き換えの場合は 3 秒未満の生成)
Llama-2-7B、Mistral-7B、および Phi-2 をテストしました。すべてが大きすぎる (1.5GB 以上) か、リアルタイムのブラウザー推論にとって遅すぎます。 Qwen1.5-0.5B は、スイート スポットを捉えています。実用的であるのに十分小さく、役に立つのに十分な能力があります。
誰も語らないエンジニアリングの課題
300MB モデルをブラウザー タブに配信することは、理論的には簡単に思えます。実際には、数か月にわたるエンジニアリング作業が必要でした。私たちが解決した最も困難な問題を 3 つ紹介します。
課題 1: プログレッシブ モデルのダウンロード
4G 接続で 300MB をダウンロードするには 2 ~ 3 分かかり、ブラウザのタイムアウトが発生する可能性があります。 プログレッシブ チャンク ダウンロード システムを実装しました。
- モデルは 10MB のシャードに分割されます
- 各シャードは再試行ロジックと指数バックオフを使用してダウンロードします
- 右上隅にカスタム進行状況バー UI が表示され、ダウンロードされた MB がリアルタイムで表示されます
- 最初のダウンロード後にモデルは IndexedDB にキャッシュされるため、その後のアクセスは即座に読み込まれます
結果: 初めてユーザーがダウンロードする場合、平均ブロードバンドで ~45 秒かかります。リピート ユーザーは、キャッシュから 2 秒未満でモデルを読み込みます。
課題 2: WebGPU コンテキストのライフサイクル管理
WebGPU デバイス コンテキストは扱いにくいです。ユーザーがタブを切り替えたり、ブラウザを最小化したり、ラップトップをスリープ状態にしたりすると、GPU コンテキストが失われる可能性があります。私たちは、堅牢な コンテキスト回復システム を構築する必要がありました:
gpu.lostイベントを検出し、推論パイプラインを適切に再初期化します。- WebGPU が使用できなくなった場合は、CPU (WASM) 推論にフォールバックします。
- 明確な UI メッセージを提供します: 「CPU モードに切り替える - 書き換えには少し時間がかかる場合があります。」
結果: AI リライターは、Chrome、Edge、Firefox 上で、また積極的な電源管理が行われているシステム上でも確実に動作します。
課題 3: 8GB RAM マシンのメモリ負荷
INT8 の 500M パラメータ モデルでも、最大 600MB の GPU/CPU メモリを消費します。 PDF 解析、Quill リッチ テキスト エディター、およびカンバン ボードを組み合わせることで、低価格ラップトップの限界を押し広げました。
私たちの最適化:
- 遅延読み込み — ユーザーが明示的に「書き換え」をクリックした場合にのみモデルがダウンロードされます。
- モデルの削除 — ユーザーが 10 分間 AI パネルを使用しなかった場合、モデルはメモリから解放されます (高速再読み込みのためにモデルは IndexedDB に残ります)。
- オフメインスレッド推論 — UI のフリーズを防ぐために、すべての LLM 操作が Web ワーカーで実行されます
結果: スキャナは、ミッドレンジの Chromebook を含む 8GB RAM マシン上でスムーズに動作します。
パフォーマンス ベンチマーク: 実数
クライアント側の AI リライターを、同一の条件下でクラウドベースの代替製品に対してベンチマークしました。私たちが見つけたものは次のとおりです。
| メトリック | 当社のクライアントサイド AI | クラウド API (GPT-4o-mini) | クラウドAPI (クロード・ハイク) |
|---|---|---|---|
| 最初の推論のレイテンシ | 45 秒 (ダウンロード) + 2.3 秒 | 1.2秒 | 1.8秒 |
| その後の推論レイテンシ | 2.3秒 | 1.2秒 | 1.8秒 |
| プライバシー | 絶対(ゼロネットワーク) | サーバーログ + API 保持 | サーバーログ + API 保持 |
| オフライン対応 | はい | いいえ | いいえ |
| レート制限 | なし | はい (RPM/TPM キャップ) | はい (RPM/TPM キャップ) |
| ユーザーのコスト | 無料 | 月額 5 ~ 20 ドルのサブスクリプション | 月額 5 ~ 20 ドルのサブスクリプション |
| データの所有権 | 100% ユーザー | プラットフォームに依存する | プラットフォームに依存する |
トレードオフは明らかです: 初めてのユーザーは、モデルのダウンロードに最大 45 秒かかります。その後、すべての書き換えは無料、プライベート、無制限になり、オフライン可能になります。機密のキャリアデータを扱うツールにとって、それが正しいトレードオフであると私たちは信じています。
このアーキテクチャが Web AI の将来にとって重要である理由
私たちはただ履歴書スキャナーを構築しているだけではありません。私たちは、AI の将来にはデータを放棄する必要がないことを証明しています。
主要な AI 企業はすべて、利益が得られるためクラウド推論を推進しています。しかし、強力なプライベートのクライアント側 AI の技術的能力はすでに存在しています。 WebGPU は成熟しています。 Transformers.js は本番環境に対応しています。量子化モデルは驚くほど強力です。
ユーザーにとってこれが意味すること:
- 職歴について第三者を信頼せずに、AI を活用した履歴書サポートを受けることができます
- 飛行機の Wi-Fi、企業のファイアウォール、または制限の厳しいネットワークでも AI ツールを使用できます
- データ、モデルの重み、推論出力はあなたが所有します
これが開発者にとって意味すること:
- ブラウザは正当な AI 導入ターゲットです
- API 請求なしで高度な NLP 機能を構築できます
- プライバシー最優先のアーキテクチャは、制限ではなく競争上の差別化要因です
クライアントサイド AI リライターを試す方法
当社の プライベート ATS スキャナー には、組み込み機能として AI リライターが含まれています。仕組みは次のとおりです。
- 履歴書をアップロード (PDF または DOCX) — ブラウザ内で完全に解析され、アップロードされることはありません
- リッチ テキスト エディターで 任意の箇条書きを選択
- [AI で書き換える] をクリックします。モデルがダウンロードされ (初回のみ)、より強力なキーワードに最適化されたバージョンが生成されます。
- 提案を比較、編集し、受け入れる — データを運ぶ 1 つのネットワーク呼び出しを必要とせずに実行できます
重要なポイント
- WebGPU と Transformers.js を使用した クライアント側 AI は、履歴書の書き換えと NLP タスクに向けて本番環境で使用可能です
- WebGPU は、CPU のみのアプローチよりも 4 ~ 5 倍高速な推論を実現し、最新のブラウザの 94% 以上でサポートされています
- 500M パラメータ モデル (Qwen1.5-0.5B-Chat) は、300MB 未満に抑えながら高品質の箇条書き書き換えに十分です
- プログレッシブ ダウンロード、IndexedDB キャッシュ、Web ワーカーは、大規模なモデルを消費者向けデバイスに配信するために不可欠です
- プライバシーの利点は絶対的です — サーバー ログゼロ、API 保持ゼロ、データ侵害リスクゼロ
Web ブラウザはもはや単なるドキュメント ビューアではありません。これは、安全なプライベート AI コンピューティング環境です。そして私たちはまだ始まったばかりです。