WebGPU とオンデバイス AI: ブラウザーは本格的なランタイムになりつつあります

spinny:~/writing $ less webgpu-on-device-ai-browser.md

1 
2長年にわたり、ブラウザーはアプリケーションの良い顔であり、クラウドは困難なことが起こる場所でした。ユーザーはファイルを書き込み、クリックし、アップロードします。フロントエンドはすべてをサーバーに送信します。サーバーはモデルを呼び出します。答えが返ってきます。
3 
4このスキームは依然として非常に便利ですが、無料ではありません。すべての通話には、遅延、コスト、ネットワーク依存性、プライバシーに関する問題が伴います。ユーザーが文章を書いていて提案が必要な場合、0.5 秒が重要です。何千もの小さな入力を分類している場合、1 セントが実際のお金になります。テキストが機密性の高い場合、デバイスから送信することは中立的な選択ではありません。
5 
6WebGPU とオンデバイス AI が誇大広告になっているのはこのためです。明日にはすべてのモデルをブラウザで実行するからではありません。インテリジェントな機能の一部はユーザーに近づくことができるためです。
7 
8## すべてがローカルになる必要はない
9 
10この議論の子供っぽいバージョンは、「クラウド対デバイス」です。便利なバージョンはハイブリッドです。
11 
12いくつかのタスクは、デバイス上で見栄えがします: 短い要約、言語検出、軽い書き換え、単純な分類、画像フィルター、小さな視覚モデル、即時フィードバックを伴う創造的なエクスペリエンス。
13 
14複雑な推論、フロンティア モデル、サーバー側のデータ、一元的な監査、均一な品質、各ステップを慎重に制御する必要があるワークフローなど、その他のタスクは依然としてクラウドの方が優れています。
15 
16健全なアーキテクチャは実行時に次のことを決定します。
17 
18```mermaid
19flowchart TD
20    User[ユーザー] --> Browser[ブラウザ]
21    Browser --> Detect[特徴検出]
22    Detect -->|サポートされています| Local[局所的な推論]
23    Detect -->|サポートされていません| Cloud[クラウドフォールバック]
24    Local --> UX[素早い応答]
25    Cloud --> UX
26    UX --> Metrics[指標と品質]
27```
28 
29ブラウザがクラウドに勝つ必要はありません。クラウド上で行う必要のない作業をクラウド上で行わないようにする必要があります。
30 
31## WebGPU が重要な理由
32 
33WebGPU は、ブラウザから GPU を使用するための最新の API です。それは単に 3D グラフィックスを美しくするためだけではありません。また、GPU が得意とする並列ワークロード、シェーダー、パイプラインなど、コンピューティングに適したプリミティブを公開するため、これも重要です。
34 
35AI、科学的ビジュアライゼーション、3D エディター、ビデオ フィルター、クリエイティブ ツールでは、この違いが感じられます。 WebGL は Web に多くの貢献をしてきましたが、WebGPU は現在により適したモデルとして誕生しました。
36 
37ただし、最初に作成するのはシェーダーではありません。これは地味な特徴検出です。
38 
39```typescript
40export async function requestWebGpuDevice() {
41  if (!('gpu' in navigator)) {
42    return null;
43  }
44 
45  const adapter = await navigator.gpu.requestAdapter({
46    powerPreference: 'high-performance',
47  });
48 
49  if (!adapter) {
50    return null;
51  }
52 
53  return adapter.requestDevice();
54}
55```
56 
57この機能は、WebGPU がすべてのデバイスに与えられる権利ではないという重要なことを示しています。確認できる能力です。一部のブラウザーはこれを完全にサポートしておらず、一部の GPU には制限があり、一部のエンタープライズ環境では機能が無効になっており、一部のユーザーは控えめなハードウェアを使用しています。
58 
59## 組み込み AI: ブラウザーがモデルを持ち込むとき
60 
61Chrome は、ローカル プロンプト、要約、書き込み、書き換え、翻訳、言語検出、校正などのタスク用の組み込み API をプッシュしています。このアイデアは非常に興味深いものです。ブラウザーがモデル、可用性、更新を管理します。アプリはプラットフォームに近い API を使用します。
62 
63うまく機能すると、大きく変わります。
64 
65- 単純なタスクのためのサーバー呼び出しが少なくなります。
66- デバイス上に残る可能性のあるデータ。
67- レイテンシが低い。
68- オフラインまたは半オフラインのエクスペリエンス。
69- 執筆と翻訳のためのより自然な UX。
70 
71ただし、これは漸進的な強化として扱う必要があります。一部の API は安定していますが、他の API はオリジンのトライアル版またはプレビュー版であり、その他の API は依然としてバージョン、言語、デバイスに依存します。
72 
73```typescript
74type LocalCapability = 'available' | 'downloadable' | 'unsupported';
75 
76export async function getLocalSummarizerCapability(): Promise<LocalCapability> {
77  const SummarizerApi = (globalThis as any).Summarizer;
78 
79  if (!SummarizerApi?.availability) {
80    return 'unsupported';
81  }
82 
83  const availability = await SummarizerApi.availability();
84 
85  if (availability === 'available') return 'available';
86  if (availability === 'downloadable') return 'downloadable';
87 
88  return 'unsupported';
89}
90```
91 
92特定のコードは変更されますが、パターンは変わりません。可用性を確認し、ダウンロードについて説明し、フォールバックを提供し、品質を測定します。
93 
94## フォールバックは悲しいプラン B ではありません
95 
96クラウドのフォールバックは敗北ではありません。製品の一部です。
97 
98```typescript
99interface AiRequest {
100  task: 'summarize' | 'rewrite' | 'classify';
101  input: string;
102}
103 
104interface AiResult {
105  output: string;
106  runtime: 'local' | 'cloud';
107}
108 
109export async function runAiTask(request: AiRequest): Promise<AiResult> {
110  const local = await tryLocalAi(request);
111 
112  if (local) {
113    return { output: local, runtime: 'local' };
114  }
115 
116  const cloud = await fetch('/api/ai', {
117    method: 'POST',
118    headers: { 'Content-Type': 'application/json' },
119    body: JSON.stringify(request),
120  }).then((res) => res.json());
121 
122  return { output: cloud.output, runtime: 'cloud' };
123}
124```
125 
126このアーキテクチャにより、段階的に改善することができます。ローカル サポートがある場合は、遅延とプライバシーが向上します。持っていない人も引き続きこの機能を使用します。ローカルリクエストのパーセンテージ、時間、エラー、メモリ、知覚品質、コストを測定できます。
127 
128指標がなければ、オンデバイス AI は美的な選択肢になります。メトリクスを使用すると、それが製品のレバーになります。
129 
130## モデルのUXが重要
131 
132ブラウザがモデルをダウンロードする必要がある場合、ユーザーはそれを認識します。漠然としたスピナーの後ろに隠さないでください。 「この機能をより高速に、さらにはオフラインでも使用できるようにモデルを準備しています。」と明確にしたほうがよいでしょう。
133 
134良い経験:
135 
136- 準備状況を示します。
137- ページ全体をブロックしません。
138- クラウド フォールバックを続行できます。
139- バッテリーとメモリの予期せぬ事態を回避します。
140- 可能な限りモデルを覚えておいてください。
141- 利点を具体的な一文で説明してください。
142 
143最悪なのは、何も言わずに何かをダウンロードするため、「スマート」機能が壊れているように見えることです。
144 
145## プライバシー: 自動的に保護されるものではなく、より優れたもの
146 
147デバイス上でデータを処理すると、大きな利点が得られます。電子メールの下書き、社内文書、または個人的なメモは、ブラウザを離れることなく提案を受け取ることができます。
148 
149ただし、ローカルだからといって自動的に安全であるとは限りません。ただし、次のことを考慮する必要があります。
150 
151- XSS;
152- 偶然のログ。
153- ストレージに保存されたデータ。
154- 信頼できないコンテンツからの即時挿入。
155- モデルに付与された権限。
156- 自動アクションで使用される出力。
157 
158ローカル モデルが Web ページを読み取ってフォームに記入できる場合、そのページは Web ページを操作しようとする可能性があります。ツールを呼び出せる場合は確認が必要です。構造化された出力が生成される場合は、検証する必要があります。デバイス上で実行されるという事実により、プライバシー リスクがある程度軽減されますが、セキュリティ モデルが排除されるわけではありません。
159 
160## 本当に面白くなるのはどこですか
161 
162テキストは始まりにすぎません。 WebGPU により、最近までネイティブ アプリのように思われていた Web エクスペリエンスが信頼できるものになります。
163 
164- 複雑な 3D エディター。
165- ブラウザ内でのガウス スプラッティング。
166- リアルタイムビデオフィルター。
167- 軽量 CAD。
168- 科学的な視覚化。
169- インスタントプレビューを備えたクリエイティブツール。
170- UI付近の視覚推論。
171- より野心的なブラウザゲーム。
172 
173ここで、フロントエンド、グラフィックス、機械学習が混ざり始めます。これはやや扱いにくい領域ですが、豊かな領域でもあります。ブラウザは、フォームやダッシュボードを配置する場所だけでなく、本格的なアプリケーション プラットフォームに戻ります。
174 
175## 制作前のチェックリスト
176 
177オンデバイス機能をユーザーに公開する前に、私は次のことを確認します。
178 
1791. 対象のブラウザとデバイス。
1802. クラウドのフォールバックまたはエレガントな劣化。
1813. ダウンロード時間とモデル キャッシュ。
1824. 平均的なハードウェアのメモリとバッテリー。
1835. クラウド版と比較した品質。
1846. プライバシーポリシーとユーザーメッセージ。
1857. 敵対的な入力によるテスト。
1868. ローカル ランタイムとクラウド ランタイムのメトリクスを分けます。
1879. テンプレートを更新するか無効にすることを計画してください。
188 
189問題が具体的であるため、これは具体的なリストです。遅い、壊れやすい、または不透明な AI 機能は、ブラウザーで実行されるからといって改善されるわけではありません。
190 
191## 適切な妥協
192 
193私は、未来が「すべてがデバイス上にある」とは考えていません。また、クラウドが推論に適した唯一の場所であり続けるとは思えません。最も可能性の高い将来は、その混合です。遅延、プライバシー、またはコストが改善される場合はローカル、そしてローカルな場合はローカルです。品質、更新されたデータ、一元管理が必要な場合は、クラウドを使用します。
194 
195WebGPU、WebNN、および組み込み AI API によってブラウザーが全能になるわけではありません。彼らは彼をより大人にします。そして、Web 製品を構築している人にとって、これは大きなニュースです。
196 
197## 役立つ情報源
198 
199- [WebGPU API - MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API)
200- [WebGPU 仕様 - W3C](https://www.w3.org/TR/webgpu/)
201- [組み込み AI - 開発者向け Chrome](https://developer.chrome.com/docs/ai/built-in)
202- [組み込み AI API - 開発者向け Chrome](https://developer.chrome.com/docs/ai/built-in-apis)
203- [WebNN API](https://webnn.io/)
204

:WebGPU とオンデバイス AI: ブラウザーは本格的なランタイムになりつつありますlines 1-204 (END) — press q to close

2長年にわたり、ブラウザーはアプリケーションの良い顔であり、クラウドは困難なことが起こる場所でした。ユーザーはファイルを書き込み、クリックし、アップロードします。フロントエンドはすべてをサーバーに送信します。サーバーはモデルを呼び出します。答えが返ってきます。

4このスキームは依然として非常に便利ですが、無料ではありません。すべての通話には、遅延、コスト、ネットワーク依存性、プライバシーに関する問題が伴います。ユーザーが文章を書いていて提案が必要な場合、0.5 秒が重要です。何千もの小さな入力を分類している場合、1 セントが実際のお金になります。テキストが機密性の高い場合、デバイスから送信することは中立的な選択ではありません。

6WebGPU とオンデバイス AI が誇大広告になっているのはこのためです。明日にはすべてのモデルをブラウザで実行するからではありません。インテリジェントな機能の一部はユーザーに近づくことができるためです。

8## すべてがローカルになる必要はない

10この議論の子供っぽいバージョンは、「クラウド対デバイス」です。便利なバージョンはハイブリッドです。

12いくつかのタスクは、デバイス上で見栄えがします: 短い要約、言語検出、軽い書き換え、単純な分類、画像フィルター、小さな視覚モデル、即時フィードバックを伴う創造的なエクスペリエンス。

14複雑な推論、フロンティアモデル、サーバー側のデータ、一元的な監査、均一な品質、各ステップを慎重に制御する必要があるワークフローなど、その他のタスクは依然としてクラウドの方が優れています。

16健全なアーキテクチャは実行時に次のことを決定します。

18```mermaid

19flowchart TD

20 User[ユーザー] --> Browser[ブラウザ]

21 Browser --> Detect[特徴検出]

22 Detect -->|サポートされています| Local[局所的な推論]

23 Detect -->|サポートされていません| Cloud[クラウドフォールバック]

24 Local --> UX[素早い応答]

25 Cloud --> UX

26 UX --> Metrics[指標と品質]

27```

29ブラウザがクラウドに勝つ必要はありません。クラウド上で行う必要のない作業をクラウド上で行わないようにする必要があります。

31## WebGPU が重要な理由

33WebGPU は、ブラウザから GPU を使用するための最新の API です。それは単に 3D グラフィックスを美しくするためだけではありません。また、GPU が得意とする並列ワークロード、シェーダー、パイプラインなど、コンピューティングに適したプリミティブを公開するため、これも重要です。

35AI、科学的ビジュアライゼーション、3D エディター、ビデオフィルター、クリエイティブツールでは、この違いが感じられます。 WebGL は Web に多くの貢献をしてきましたが、WebGPU は現在により適したモデルとして誕生しました。

37ただし、最初に作成するのはシェーダーではありません。これは地味な特徴検出です。

39```typescript

40export async function requestWebGpuDevice() {

41 if (!('gpu' in navigator)) {

42 return null;

43 }

45 const adapter = await navigator.gpu.requestAdapter({

46 powerPreference: 'high-performance',

47 });

49 if (!adapter) {

50 return null;

51 }

53 return adapter.requestDevice();

54}

55```

57この機能は、WebGPU がすべてのデバイスに与えられる権利ではないという重要なことを示しています。確認できる能力です。一部のブラウザーはこれを完全にサポートしておらず、一部の GPU には制限があり、一部のエンタープライズ環境では機能が無効になっており、一部のユーザーは控えめなハードウェアを使用しています。

59## 組み込み AI: ブラウザーがモデルを持ち込むとき

61Chrome は、ローカルプロンプト、要約、書き込み、書き換え、翻訳、言語検出、校正などのタスク用の組み込み API をプッシュしています。このアイデアは非常に興味深いものです。ブラウザーがモデル、可用性、更新を管理します。アプリはプラットフォームに近い API を使用します。

63うまく機能すると、大きく変わります。

65- 単純なタスクのためのサーバー呼び出しが少なくなります。

66- デバイス上に残る可能性のあるデータ。

67- レイテンシが低い。

68- オフラインまたは半オフラインのエクスペリエンス。

69- 執筆と翻訳のためのより自然な UX。

71ただし、これは漸進的な強化として扱う必要があります。一部の API は安定していますが、他の API はオリジンのトライアル版またはプレビュー版であり、その他の API は依然としてバージョン、言語、デバイスに依存します。

73```typescript

74type LocalCapability = 'available' | 'downloadable' | 'unsupported';

76export async function getLocalSummarizerCapability(): Promise<LocalCapability> {

77 const SummarizerApi = (globalThis as any).Summarizer;

79 if (!SummarizerApi?.availability) {

80 return 'unsupported';

81 }

83 const availability = await SummarizerApi.availability();

85 if (availability === 'available') return 'available';

86 if (availability === 'downloadable') return 'downloadable';

88 return 'unsupported';

89}

90```

92特定のコードは変更されますが、パターンは変わりません。可用性を確認し、ダウンロードについて説明し、フォールバックを提供し、品質を測定します。

94## フォールバックは悲しいプラン B ではありません

96クラウドのフォールバックは敗北ではありません。製品の一部です。

98```typescript

99interface AiRequest {

100 task: 'summarize' | 'rewrite' | 'classify';

101 input: string;

102}

103

104interface AiResult {

105 output: string;

106 runtime: 'local' | 'cloud';

107}

108

109export async function runAiTask(request: AiRequest): Promise<AiResult> {

110 const local = await tryLocalAi(request);

111

112 if (local) {

113 return { output: local, runtime: 'local' };

114 }

115

116 const cloud = await fetch('/api/ai', {

117 method: 'POST',

118 headers: { 'Content-Type': 'application/json' },

119 body: JSON.stringify(request),

120 }).then((res) => res.json());

121

122 return { output: cloud.output, runtime: 'cloud' };

123}

124```

125

126このアーキテクチャにより、段階的に改善することができます。ローカルサポートがある場合は、遅延とプライバシーが向上します。持っていない人も引き続きこの機能を使用します。ローカルリクエストのパーセンテージ、時間、エラー、メモリ、知覚品質、コストを測定できます。

127

128指標がなければ、オンデバイス AI は美的な選択肢になります。メトリクスを使用すると、それが製品のレバーになります。

129

130## モデルのUXが重要

131

132ブラウザがモデルをダウンロードする必要がある場合、ユーザーはそれを認識します。漠然としたスピナーの後ろに隠さないでください。「この機能をより高速に、さらにはオフラインでも使用できるようにモデルを準備しています。」と明確にしたほうがよいでしょう。

133

134良い経験:

135

136- 準備状況を示します。

137- ページ全体をブロックしません。

138- クラウドフォールバックを続行できます。

139- バッテリーとメモリの予期せぬ事態を回避します。

140- 可能な限りモデルを覚えておいてください。

141- 利点を具体的な一文で説明してください。

142

143最悪なのは、何も言わずに何かをダウンロードするため、「スマート」機能が壊れているように見えることです。

144

145## プライバシー: 自動的に保護されるものではなく、より優れたもの

146

147デバイス上でデータを処理すると、大きな利点が得られます。電子メールの下書き、社内文書、または個人的なメモは、ブラウザを離れることなく提案を受け取ることができます。

148

149ただし、ローカルだからといって自動的に安全であるとは限りません。ただし、次のことを考慮する必要があります。

150

151- XSS;

152- 偶然のログ。

153- ストレージに保存されたデータ。

154- 信頼できないコンテンツからの即時挿入。

155- モデルに付与された権限。

156- 自動アクションで使用される出力。

157

158ローカルモデルが Web ページを読み取ってフォームに記入できる場合、そのページは Web ページを操作しようとする可能性があります。ツールを呼び出せる場合は確認が必要です。構造化された出力が生成される場合は、検証する必要があります。デバイス上で実行されるという事実により、プライバシーリスクがある程度軽減されますが、セキュリティモデルが排除されるわけではありません。

159

160## 本当に面白くなるのはどこですか

161

162テキストは始まりにすぎません。 WebGPU により、最近までネイティブアプリのように思われていた Web エクスペリエンスが信頼できるものになります。

163

164- 複雑な 3D エディター。

165- ブラウザ内でのガウススプラッティング。

166- リアルタイムビデオフィルター。

167- 軽量 CAD。

168- 科学的な視覚化。

169- インスタントプレビューを備えたクリエイティブツール。

170- UI付近の視覚推論。

171- より野心的なブラウザゲーム。

172

173ここで、フロントエンド、グラフィックス、機械学習が混ざり始めます。これはやや扱いにくい領域ですが、豊かな領域でもあります。ブラウザは、フォームやダッシュボードを配置する場所だけでなく、本格的なアプリケーションプラットフォームに戻ります。

174

175## 制作前のチェックリスト

176

177オンデバイス機能をユーザーに公開する前に、私は次のことを確認します。

178

1791. 対象のブラウザとデバイス。

1802. クラウドのフォールバックまたはエレガントな劣化。

1813. ダウンロード時間とモデルキャッシュ。

1824. 平均的なハードウェアのメモリとバッテリー。

1835. クラウド版と比較した品質。

1846. プライバシーポリシーとユーザーメッセージ。

1857. 敵対的な入力によるテスト。

1868. ローカルランタイムとクラウドランタイムのメトリクスを分けます。

1879. テンプレートを更新するか無効にすることを計画してください。

188

189問題が具体的であるため、これは具体的なリストです。遅い、壊れやすい、または不透明な AI 機能は、ブラウザーで実行されるからといって改善されるわけではありません。

190

191## 適切な妥協

192

193私は、未来が「すべてがデバイス上にある」とは考えていません。また、クラウドが推論に適した唯一の場所であり続けるとは思えません。最も可能性の高い将来は、その混合です。遅延、プライバシー、またはコストが改善される場合はローカル、そしてローカルな場合はローカルです。品質、更新されたデータ、一元管理が必要な場合は、クラウドを使用します。

194

195WebGPU、WebNN、および組み込み AI API によってブラウザーが全能になるわけではありません。彼らは彼をより大人にします。そして、Web 製品を構築している人にとって、これは大きなニュースです。

196

197## 役立つ情報源

198

199- [WebGPU API - MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API)

200- [WebGPU 仕様 - W3C](https://www.w3.org/TR/webgpu/)

201- [組み込み AI - 開発者向け Chrome](https://developer.chrome.com/docs/ai/built-in)

202- [組み込み AI API - 開発者向け Chrome](https://developer.chrome.com/docs/ai/built-in-apis)

203- [WebNN API](https://webnn.io/)

204