こんにちは！今回は、生成AIの世界をガラッと変える驚きの技術をご紹介します。
なんと、PythonもCUDAもインストール不要。ブラウザでHTMLファイルを開くだけで、最新のAI「Gemma 4」があなたのPCで動き出します。
1. はじめに：なぜ「ブラウザでローカルAI」なのか？
これまでの生成AI（ChatGPTやGeminiなど）は、巨大なサーバー側で動くのが一般的でした。しかし、最近の技術進化により、以下のメリットを持つ「ローカル実行」が注目されています。
- プライバシー: データがネットに飛ばないため、機密情報も安心。
- コストゼロ: API利用料がかからず、使い放題。
そして今回、このハードルを極限まで下げたのが WebGPU と Gemma 4 の組み合わせです。
2. Transformers.js：ブラウザでAIを動かす「魔法のライブラリ」
Transformers.js は、世界中のAI開発者が愛用するHugging Faceの「Transformers」ライブラリをJavaScriptに移植したものです。
- JavaScriptで完結: これまでAIといえばPythonが必須でしたが、Transformers.jsを使えば、Web開発者が使い慣れたJavaScriptだけでAIモデルをロードし、実行できます。
- 豊富なエコシステム: Hugging Face上に公開されている膨大な数の事前学習済みモデルを、そのままブラウザへ持ち込むことができます。
- 自動量子化: モデルをダウンロードする際に、ブラウザ環境に合わせて自動的に軽量化（量子化）してロードする機能を備えています。
このライブラリが、ブラウザ上で高度な推論を行うための「窓口」となります。そして、この処理を実用的な速度で支えているのが次に紹介する技術です。
3. WebGPU：ブラウザでGPUパワーを解放する技術
なぜ、AIを動かすのにGPUが必要なのでしょうか？
AI（特に深層学習）の裏側では、膨大な数の「行列計算」が同時に行われています。CPUは複雑な処理を一つずつこなすのが得意ですが、AIのような「単純な計算を数万個同時に行う」処理には、数千のコアを持つGPUが圧倒的に適しています。
これまでブラウザからこのGPUの力を引き出すのは容易ではありませんでしたが、それを可能にしたのが WebGPU です。
- 次世代の標準規格: 従来のWebGLに代わり、ブラウザから直接GPUの計算資源（計算シェーダー）を効率よく叩けるようになりました。
- 圧倒的なパフォーマンス: ネイティブアプリに近い速度でGPUを動かせるため、巨大なAIモデルの推論もブラウザ内で現実的な時間で行えます。
- インストーラ不要: 特殊なドライバやプラグインをユーザーに強いることなく、ブラウザをアップデートするだけで利用可能です。
4. Gemma 4：Googleが贈る次世代オープンモデル
今回使用するのは、Google DeepMindが開発した最新のオープンモデル Gemma 4 です。
- 商用利用が可能: 寛容なライセンスで提供されており、個人開発からビジネス用途まで幅広く、無料で利用できるのが大きな魅力です。
- 多様なサイズ展開: 用途に合わせて複数のサイズ（E2B, E4B, 26B, 31Bなど）が用意されています。今回はブラウザという限られたリソースでも軽快に動作させるため、最もコンパクトな「E2B (Effective 2B)」モデルを採用しています。
- マルチモーダル対応: テキスト、画像、音声、さらに上位モデルではビデオまでネイティブに扱える最新のアーキテクチャを採用しています。今回使用する軽量モデルでも、テキストと画像の枠を超えた次世代の対話体験が可能です。
軽量さと知能のバランスが取れた Gemma 4 は、まさに「ローカルWeb AI」の主役と言える存在です。
5. 性能：現実は甘くない？（実測値ベンチマーク）
「ブラウザで動く」というのは素晴らしいことですが、現状では「実用的にはかなり厳しい」というのが正直なところです。
特にモデルの初期ロード時間と、文字が生成される速度（トークン生成速度）がネックになります。
環境別ベンチマーク結果
| 項目 | 最低レベル (Intel UHD 620) | プロフェッショナル級 (RTX A4000) |
|---|---|---|
| 生成速度 (tokens/sec) | 2.69 tps | 5.16 tps |
| 体感 | 非常に重い | 重い |
【注意】初回のダウンロードに要注意！
今回使用する Gemma 4 (E2B) モデルは、量子化されていてもデータ量は約3.2GBありました。初回実行時は、高速なネット環境であっても６分程度の待ち時間が発生します。一度ダウンロードされればブラウザのキャッシュに保存されるため、二回目以降は10～30秒程度で起動しますが、最初は忍耐が必要です。
ダウンロード後、生成AIが使えるようになるまでに、さらに1分ほど待つ必要があります。プログラムをシンプルにするために、特に表示ありません。
結論： 内蔵GPU（Intel 620等）では、一文字出るのに数秒かかることもあり、まだ「お試し」の域を出ません。専用GPU（RTXシリーズ等）でも、2倍程度の速さにはなりましたが、使い物にはなりません。
6. 実装コード
簡単に動作確認するためのhtmlコードです。index.htmlなどの名前で保存し、ブラウザで開けば動作します。
さまざまな生成AIでソースを生成したけれど、動きませんでした。原因はtransformersライブラリのバージョンが古いためだった。Gemma 4対応はVer4.1.0以降でした。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Gemma 4 Simple</title>
</head>
<body style="font-family: sans-serif; max-width: 500px; margin: 40px auto;">
<h1>Gemma 4 Simple</h1>
<textarea id="userInput" style="width: 100%; height: 60px;">挨拶して。</textarea>
<button id="generateBtn" disabled>ロード中</button>
<pre id="outputArea" style="background: #f0f0f0; padding: 10px; white-space: pre-wrap;">回答待ち</pre>
<script type="module">
// Transformers.js v4.2.0 を使用
import { AutoProcessor, Gemma4ForConditionalGeneration } from "https://esm.sh/@huggingface/transformers@4.2.0?bundle";
const ID = "onnx-community/gemma-4-E2B-it-ONNX";
let proc, model;
// 初期化
(async () => {
// プロセッサの読み込み
proc = await AutoProcessor.from_pretrained(ID);
// 進捗管理用の変数
const loaded = {};
// モデルの読み込み
model = await Gemma4ForConditionalGeneration.from_pretrained(ID, {
device: "webgpu",
dtype: "q4f16",
progress_callback: (i) => {
if (i.status === "progress") {
// ファイルごとの進捗を記録
loaded[i.file] = i.loaded;
// 合計値を計算（MB単位）
const total = Object.values(loaded).reduce((a, b) => a + b, 0);
const mb = (total / (1024 * 1024)).toFixed(0);
// ボタンに合計サイズを表示（分母は実測値の3225MB）
document.getElementById("generateBtn").textContent = `読込中 ${mb}MB / 3225MB`;
}
}
});
document.getElementById("generateBtn").disabled = false;
document.getElementById("generateBtn").textContent = "実行";
// モデル読み込み完了後、初期値で自動的に回答を生成する
gen();
})();
/**
* AIによる回答生成
*/
async function gen() {
const input = document.getElementById("userInput").value;
const out = document.getElementById("outputArea");
const btn = document.getElementById("generateBtn");
btn.disabled = true;
out.textContent = "生成中...";
try {
// テンプレートの適用
const msg = [{ role: "user", content: input }];
const inputs = await proc.apply_chat_template(msg, { tokenize: true, add_generation_prompt: true, return_dict: true });
// 入力トークン数を記録（回答のみを抽出するために使用）
const offset = inputs.input_ids.dims.at(-1);
// 推論実行（最大512トークンまで）
const result = await model.generate({ ...inputs, max_new_tokens: 512 });
// 回答部分のみをデコード
const newTokens = result.slice(null, [offset, null]);
const text = await proc.batch_decode(newTokens, { skip_special_tokens: true });
// 結果を表示
out.textContent = text[0].trim();
} catch (e) {
console.error(e);
out.textContent = "エラーが発生しました: " + e.message;
} finally {
btn.disabled = false;
}
}
document.getElementById("generateBtn").onclick = gen;
</script>
</body>
</html>
7. 未来：AI PC時代の幕開け
正直なところもう少し、実用的な速度で動くことを期待していました。
現状では「遅い」と感じる場面も多いですが、この技術の真価はこれから発揮されます。
最近話題の 「AI PC」 には、AI処理に特化した NPU（Neural Processing Unit） が搭載されています。今後、WebGPUを介してこのNPUがブラウザからフル活用できるようになれば、今の数倍〜数十倍の速度で、低消費電力でローカルAIを動かせるようになるでしょう。
「ブラウザだけで最新のLLMが快適に動く」という未来もくるかも。
8. まとめ
AIは「サーバーにリクエストするもの」から、わずか数十行のコードで**「ブラウザで動かせる機能の一部」**へと進化しようとしています。
環境構築に挫折したことがある方も、ぜひこの「HTML 1枚」の魔法を体験し、きたるAI PC時代の風を感じてみてください！
参考リンク: