WebGPU カーネル

ブラウザの GPU をネイティブ並みに活用！Hugging Face が公開した「WebGPU カーネル」の衝撃と未来

ブラウザ上で大規模な AI モデルを実行したり、数百万ピクセル単位の複雑なアニメーションを処理したり。かつてはこれらが「不可能に近い」と言われていた領域ですが、Hugging Face が公開した新技術によって状況が一変しました。

Hugging Face は、ブラウザ向けに最適化された 200 以上の WebGPU カーネルと、それらを管理するライブラリ「hugging face kernels」をオープンソースで提供しました。この技術は、単なるコードの寄せ集めではなく、ユーザーのデバイス環境に応じて最適な実行コードを動的に生成する画期的な仕組みを採用しています。

200 以上のカーネルと、複雑さを隠すライブラリ

Hugging Face は今回、ブラウザ AI のための 200 以上の WebGPU カーネルを Hugging Face Hub でオープンソース化しました。これらを利用するには、新たに提供された「hugging face kernels」というライブラリを使います。

このライブラリの最大の特徴は、JavaScript と GPU の間にある複雑な処理（glue code）をすべて隠蔽している点です。開発者は以下のようにシンプルにコードを書くだけで、GPU 上で計算を実行できます。

get_kernel 関数を使って Hugging Face Hub からカーネルを読み込み、add などの演算関数を呼び出すと、入力データ（typed arrays）を GPU に転送し、計算結果を返してくれます。すべての重厚な処理はライブラリ内部で完結しています。

つまり、開発者は GPU の仕組みや WGSL（WebGPU シェーダー言語）の詳細を深く理解していなくても、あたかもネイティブアプリのように高速な計算が可能になります。

「固定されたコード」ではなく「動的に生成される最適化」の真髄

なぜこのライブラリはこれほどまでに重要なのでしょうか。その答えは、機械学習モデルが「演算（Operation）」と「カーネル（Kernel）」の組み合わせで成り立っている点にあります。

• 演算: 数学的な操作の定義（例：A + B = C）
• カーネル: その演算を特定のハードウェア上で実行するための実装コード

ブラウザでは WGSL という言語を使って GPU と通信しますが、最適な WGSL コードはデバイスによって全く異なります。高性能な GPU では広いデータ型や大きなワークグループサイズが有効ですが、古いデバイスではそれがエラーを引き起こすこともあります。

従来のアプローチでは「一つのベストなカーネル」を提供していましたが、Hugging Face はこれに挑戦しました。彼らが提供するものは固定された WGSL ファイルではなく、Ginja テンプレートです。

Ginja テンプレートには、デバイスの GPU 能力や制限に基づいて分岐する if-else やマクロが組み込まれています。ブラウザ側で実行時にこれらのテンプレートを解析し、そのデバイスに最適な WGSL コードを動的に生成・コンパイルします。

例えば、同じ足し算の演算でも、左側のデバイスでは狭いデータ型で動作するコードが生成される一方、右側の高性能デバイスでは広いデータ型と大きなワークグループサイズを採用した効率的なコードが生成されます。この「環境に応じた自動最適化」こそが、ブラウザ AI のパフォーマンスを劇的に向上させる鍵です。

10 倍の速度差を実証するデモ：アテンション機構からアニメーションまで

この技術の実力を示すために、Hugging Face は二つの驚くべきデモを発表しました。

1. トランスフォーマーモデルの「アテンション機構」完全実装

現代の LLM（大規模言語モデル）の中核であるアテンション機構を、WebGPU カーネルだけで実証しました。テキストがトークン化され、ベクトル表現に変換される際、各トークンが周囲のトークンに与える影響度合い（注意力）を計算します。

この処理は通常非常に重くなりますが、Hugging Face のアプローチでは、約 20 行の JavaScript コードでカーネルを読み込み、GPU 上でアテンション機構を完結させました。結果として、テキスト内のトークン間の関係性を視覚化したヒートマップが、ブラウザ上でスムーズに描画されています。

2. 100 万ピクセル単位のアニメーション計算

さらにクリエイティブなデモでは、1,024 x 1,024 の行列（約 100 万ピクセル）で波が交差するアニメーションを実行しました。各ピクセルの RGBA 値を GPU で計算しています。

• WebGPU カーネル使用時: 60 フレーム/秒（ブラウザのリミットにより上限）。理論上は約 400 フレーム/秒の処理能力があるため、GPU の限界まで稼働している状態です。
• 純粋な JavaScript 使用時: 約 6.75 フレーム/秒。

同じ計算を JavaScript で実行すると、WebGPU カーネルと比較して約 10 倍の速度差が生じます。これは、ブラウザ上でネイティブアプリ並みの高負荷処理が可能になったことを意味します。

コミュニティ全体で最適化を進める「Fleet」機能

Hugging Face は、この技術のさらなる進化のために「Fleet」という機能を導入しました。カーネルはデバイスごとに最適化が必要ですが、開発チームが保有するデバイスの範囲には限りがあります。

そこで、ユーザー自身の GPU ベンチマークデータを収集する仕組みを構築しました。ユーザーがアプリを実行すると、背景で自動的にベンチマークが実行され、そのデータが Hugging Face に送信されます。

このデータは、開発チームが想定していなかったエッジケースの発見や、特定のデバイス環境でのバグ検出に活用されます。収集された膨大なデータを元に、より多くのデバイス環境に対応したカーネルを継続的に最適化していくのです。

この「コミュニティベースの最適化」により、世界中の多様な GPU 環境を持つユーザーが、それぞれ最高のパフォーマンスで WebGPU カーネルを利用できるようになります。すべてのプロセスはオープンソースで行われるため、透明性と信頼性も担保されています。

まとめ：Web 開発における AI エージェントと生成 AI の加速へ

Hugging Face が公開した WebGPU カーネルとライブラリは、ブラウザベースでの大規模 AI モデル実行や複雑な視覚効果処理を、ネイティブアプリ並みのパフォーマンスで実現可能にしました。特に、デバイスごとの多様な GPU 環境に対応する自動最適化アプローチは、開発者の負荷を大幅に軽減し、ユーザー体験の均質化に寄与します。

これにより、Web 上で動作する AI エージェントやリアルタイム生成 AI の普及が加速することが期待されます。ブラウザというプラットフォームの可能性を、GPU の力を最大限に引き出す技術によって再定義したと言えるでしょう。