WebGPU ve cihaz içi yapay zeka: Tarayıcı ciddi bir çalışma zamanı haline geliyor

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

1 
2Yıllar boyunca tarayıcı uygulamanın güzel yüzüydü ve bulut da zor şeylerin gerçekleştiği yerdi. Kullanıcı bir dosya yazar, tıklar, yükler; ön uç her şeyi sunucuya gönderir; sunucu bir modeli çağırır; cevap geri geliyor.
3 
4Bu şema hala çok kullanışlıdır ancak ücretsiz değildir. Her çağrı gecikmeyi, maliyeti, ağ bağımlılığını ve gizlilik sorularını beraberinde getirir. Kullanıcı bir cümle yazıyorsa ve öneri istiyorsa yarım saniyenin ağırlığı vardır. Binlerce küçük girdiyi sınıflandırıyorsanız, kuruşlar gerçek paraya dönüşür. Metin hassassa, onu cihazdan göndermek tarafsız bir seçim değildir.
5 
6WebGPU'nun ve cihaz içi yapay zekanın ilgi görmesinin nedeni budur. Yarın her modeli tarayıcıda çalıştıracağımız için değil. Çünkü bazı akıllı özellikler kullanıcıya daha da yakınlaşabiliyor.
7 
8## Her şey yerli olmak zorunda değil
9 
10Tartışmanın çocukça versiyonu: "Buluta karşı cihaz". Yararlı sürüm hibrittir.
11 
12Bazı görevler cihazda harika görünür: kısa özetler, dil algılama, ışıkla yeniden yazma, basit sınıflandırmalar, görüntü filtreleri, küçük görüş modelleri, anında geri bildirimle yaratıcı deneyimler.
13 
14Diğer görevler bulutta daha iyi kalır: karmaşık akıl yürütme, sınır modelleri, sunucu tarafı verileri, merkezi denetim, tekdüze kalite, her adımı dikkatlice kontrol etmeniz gereken iş akışı.
15 
16Sağlıklı mimari çalışma zamanında karar verir:
17 
18```mermaid
19flowchart TD
20    User[Kullanıcı] --> Browser[Tarayıcılar]
21    Browser --> Detect[Özellik algılama]
22    Detect -->|Destekleniyor| Local[Yerel çıkarım]
23    Detect -->|Desteklenmiyor| Cloud[Bulut geri dönüşü]
24    Local --> UX[Hızlı yanıt]
25    Cloud --> UX
26    UX --> Metrics[Metrikler ve kalite]
27```
28 
29Tarayıcının buluta karşı kazanması gerekmiyor. Bulutu, orada yapılması gerekmeyen işleri yapmaktan kurtarmalıdır.
30 
31## WebGPU neden önemlidir?
32 
33WebGPU, GPU'yu tarayıcıdan kullanmaya yönelik modern bir API'dir. Bu sadece daha güzel 3D grafikler için değil. Aynı zamanda önemlidir çünkü bilgi işlem için uygun ilkelleri ortaya çıkarır: paralel iş yükleri, gölgelendiriciler, GPU'ların iyi yaptığı şeylere daha yakın işlem hatları.
34 
35Yapay zeka, bilimsel görselleştirme, 3D editörler, video filtreleri ve yaratıcı araçlar için bu fark hissediliyor. WebGL web için çok şey yaptı ancak WebGPU günümüze daha uygun bir modelle doğdu.
36 
37Ancak yazılacak ilk şey gölgelendirici değil. Bu ayık bir özellik tespitidir:
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 
57Bu özellik önemli bir şey söylüyor: WebGPU her cihaza tanınan bir hak değildir. Doğrulanması gereken bir yetenektir. Bazı tarayıcılar bunu tam olarak desteklemez, bazı GPU'ların sınırlamaları vardır, bazı kurumsal ortamlar özellikleri devre dışı bırakır, bazı kullanıcılar ise orta düzeyde donanım kullanır.
58 
59## Yerleşik AI: tarayıcı modeli getirdiğinde
60 
61Chrome, yerel istemler, özetleme, yazma, yeniden yazma, çeviri, dil algılama ve düzeltme gibi görevler için yerleşik API'leri kullanıyor. Fikir çok ilginç: tarayıcı modeli, kullanılabilirliği ve güncellemeleri yönetiyor; uygulama platforma daha yakın bir API kullanıyor.
62 
63İyi çalışırsa çok şey değişir:
64 
65- basit görevler için daha az sunucu çağrısı;
66- cihazda kalabilecek veriler;
67- daha düşük gecikme;
68- çevrimdışı veya yarı çevrimdışı deneyimler;
69- Yazma ve çeviri için daha doğal kullanıcı deneyimi.
70 
71Ancak bunu aşamalı bir gelişme olarak ele almak gerekir. Bazı API'ler kararlıdır, diğerleri başlangıç denemesinde veya ön izleme aşamasındadır, diğerleri ise hâlâ sürüme, dile ve cihaza bağlıdır.
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 
92Belirli kod değişecek, ancak kalıp aynı kalacak: Kullanılabilirliği kontrol edersiniz, indirilenleri açıklarsınız, geri dönüşler sunarsınız ve kaliteyi ölçersiniz.
93 
94## Geri çekilme üzücü bir B planı değil
95 
96Bulut geri dönüşü bir yenilgi değildir. Ürünün bir parçasıdır.
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 
126Bu mimari, giderek gelişmenize olanak tanır. Yerel desteğe sahip olanlar daha iyi gecikme ve gizlilik elde eder. Sahip olmayanlar hala bu özelliği kullanıyor. Yerel isteklerin yüzdesini, sürelerini, hataları, hafızayı, algılanan kaliteyi ve maliyeti ölçebilirsiniz.
127 
128Metrikler olmadan cihazdaki yapay zeka estetik bir seçim haline gelir. Metriklerle birlikte bir ürün kaldıracı haline gelir.
129 
130## Modelin kullanıcı deneyimi önemlidir
131 
132Tarayıcının bir model indirmesi gerekiyorsa kullanıcı bunu algılar. Bunu belirsiz bir eğirmenin arkasına saklamayın. Açık olmak gerekirse: "Modeli bu işlevi daha hızlı ve hatta çevrimdışı kullanacak şekilde hazırlıyoruz."
133 
134İyi bir deneyim:
135 
136- hazırlık durumunu gösterir;
137- sayfanın tamamını engellemez;
138- bulut geri dönüşüne devam etmenize olanak tanır;
139- pil ve hafıza sürprizlerinden kaçının;
140- mümkün olduğunda modeli hatırlayın;
141- faydasını somut bir cümleyle açıklayın.
142 
143En kötüsü, sessizce bir şeyler indirdiği için bozuk görünen "akıllı" bir özelliktir.
144 
145## Gizlilik: daha iyi, otomatik olarak güvenli değil
146 
147Cihazdaki verilerin işlenmesi büyük bir avantaj olabilir. Taslak bir e-postanın, dahili belgenin veya kişisel notun öneri almak için tarayıcınızdan çıkması gerekmez.
148 
149Ancak yerel, otomatik olarak güvenli anlamına gelmez. Ancak şunu düşünmeniz gerekir:
150 
151- XSS;
152- tesadüfi günlükler;
153- depolamaya kaydedilen veriler;
154- güvenilmeyen içerikten hızlı enjeksiyon;
155- modele verilen izinler;
156- Otomatik eylemlerde kullanılan çıktılar.
157 
158Yerel bir model bir web sayfasını okuyabiliyor ve ardından bir form doldurabiliyorsa, o sayfa onu değiştirmeyi deneyebilir. Aracı çağırabiliyorsa onay gereklidir. Yapılandırılmış çıktı üretiyorsa doğrulanması gerekir. Cihaz üzerinde çalışıyor olması bazı gizlilik risklerini azaltsa da güvenlik modelini ortadan kaldırmaz.
159 
160## Gerçekten ilginç hale geldiği yer
161 
162Metin sadece başlangıç. WebGPU, yakın zamana kadar yerel bir uygulama gibi görünen web deneyimlerini güvenilir hale getiriyor:
163 
164- karmaşık 3D editörler;
165- Tarayıcıda Gauss sıçraması;
166- gerçek zamanlı video filtreleri;
167- Hafif CAD;
168- bilimsel görselleştirmeler;
169- anında önizlemeli yaratıcı araçlar;
170- kullanıcı arayüzünün yakınında görüş çıkarımı;
171- daha iddialı tarayıcı oyunları.
172 
173Burada ön uç, grafikler ve makine öğrenimi karışmaya başlıyor. Bu biraz tuhaf ama aynı zamanda verimli bir alan: Tarayıcı, yalnızca formları ve kontrol panellerini koyduğumuz yer değil, ciddi bir uygulama platformu haline geliyor.
174 
175## Üretim öncesi kontrol listesi
176 
177Cihazdaki bir özelliği kullanıcıların önüne koymadan önce şunları kontrol ederim:
178 
1791. Tarayıcıları ve cihazları hedefleyin.
1802. Bulut geri dönüşü veya zarif bozulma.
1813. İndirme zamanı ve model önbelleği.
1824. Ortalama donanımda bellek ve pil.
1835. Bulut sürümüyle karşılaştırıldığında kalite.
1846. Gizlilik politikası ve kullanıcı mesajları.
1857. Düşmanca girdilerle test etme.
1868. Yerel ve bulut çalışma zamanı için ayrı ölçümler.
1879. Şablonu güncellemeyi veya devre dışı bırakmayı planlayın.
188 
189Somut bir liste çünkü sorun somut. Yavaş, kırılgan veya opak bir yapay zeka özelliği, yalnızca tarayıcıda çalıştığı için daha iyi hale gelmez.
190 
191## Doğru uzlaşma
192 
193Geleceğin "cihazdaki her şey" olduğuna inanmıyorum. Ayrıca bulutun çıkarım için tek makul yer olarak kalacağını da düşünmüyorum. En olası gelecek bir karışımdır: gecikmeyi, gizliliği veya maliyeti iyileştirdiğinde yerel; Kaliteye, güncel verilere ve merkezi kontrole ihtiyaç duyulduğunda bulut.
194 
195WebGPU, WebNN ve yerleşik AI API'leri, tarayıcıyı her şeye kadir yapmaz. Onu daha yetişkin hale getiriyorlar. Web ürünleri geliştirenler için bu çok büyük bir haber.
196 
197## Yararlı kaynaklar
198 
199- [WebGPU API'si - MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API)
200- [Web GPU spesifikasyonu - W3C](https://www.w3.org/TR/webgpu/)
201- [Yerleşik AI - Geliştiriciler için Chrome](https://developer.chrome.com/docs/ai/built-in)
202- [Yerleşik AI API'leri - Geliştiriciler için Chrome](https://developer.chrome.com/docs/ai/built-in-apis)
203- [WebNN API'si](https://webnn.io/)
204

:WebGPU ve cihaz içi yapay zeka: Tarayıcı ciddi bir çalışma zamanı haline geliyorlines 1-204 (END) — press q to close

2Yıllar boyunca tarayıcı uygulamanın güzel yüzüydü ve bulut da zor şeylerin gerçekleştiği yerdi. Kullanıcı bir dosya yazar, tıklar, yükler; ön uç her şeyi sunucuya gönderir; sunucu bir modeli çağırır; cevap geri geliyor.

4Bu şema hala çok kullanışlıdır ancak ücretsiz değildir. Her çağrı gecikmeyi, maliyeti, ağ bağımlılığını ve gizlilik sorularını beraberinde getirir. Kullanıcı bir cümle yazıyorsa ve öneri istiyorsa yarım saniyenin ağırlığı vardır. Binlerce küçük girdiyi sınıflandırıyorsanız, kuruşlar gerçek paraya dönüşür. Metin hassassa, onu cihazdan göndermek tarafsız bir seçim değildir.

6WebGPU'nun ve cihaz içi yapay zekanın ilgi görmesinin nedeni budur. Yarın her modeli tarayıcıda çalıştıracağımız için değil. Çünkü bazı akıllı özellikler kullanıcıya daha da yakınlaşabiliyor.

8## Her şey yerli olmak zorunda değil

10Tartışmanın çocukça versiyonu: "Buluta karşı cihaz". Yararlı sürüm hibrittir.

12Bazı görevler cihazda harika görünür: kısa özetler, dil algılama, ışıkla yeniden yazma, basit sınıflandırmalar, görüntü filtreleri, küçük görüş modelleri, anında geri bildirimle yaratıcı deneyimler.

14Diğer görevler bulutta daha iyi kalır: karmaşık akıl yürütme, sınır modelleri, sunucu tarafı verileri, merkezi denetim, tekdüze kalite, her adımı dikkatlice kontrol etmeniz gereken iş akışı.

16Sağlıklı mimari çalışma zamanında karar verir:

18```mermaid

19flowchart TD

20 User[Kullanıcı] --> Browser[Tarayıcılar]

21 Browser --> Detect[Özellik algılama]

22 Detect -->|Destekleniyor| Local[Yerel çıkarım]

23 Detect -->|Desteklenmiyor| Cloud[Bulut geri dönüşü]

24 Local --> UX[Hızlı yanıt]

25 Cloud --> UX

26 UX --> Metrics[Metrikler ve kalite]

27```

29Tarayıcının buluta karşı kazanması gerekmiyor. Bulutu, orada yapılması gerekmeyen işleri yapmaktan kurtarmalıdır.

31## WebGPU neden önemlidir?

33WebGPU, GPU'yu tarayıcıdan kullanmaya yönelik modern bir API'dir. Bu sadece daha güzel 3D grafikler için değil. Aynı zamanda önemlidir çünkü bilgi işlem için uygun ilkelleri ortaya çıkarır: paralel iş yükleri, gölgelendiriciler, GPU'ların iyi yaptığı şeylere daha yakın işlem hatları.

35Yapay zeka, bilimsel görselleştirme, 3D editörler, video filtreleri ve yaratıcı araçlar için bu fark hissediliyor. WebGL web için çok şey yaptı ancak WebGPU günümüze daha uygun bir modelle doğdu.

37Ancak yazılacak ilk şey gölgelendirici değil. Bu ayık bir özellik tespitidir:

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```

57Bu özellik önemli bir şey söylüyor: WebGPU her cihaza tanınan bir hak değildir. Doğrulanması gereken bir yetenektir. Bazı tarayıcılar bunu tam olarak desteklemez, bazı GPU'ların sınırlamaları vardır, bazı kurumsal ortamlar özellikleri devre dışı bırakır, bazı kullanıcılar ise orta düzeyde donanım kullanır.

59## Yerleşik AI: tarayıcı modeli getirdiğinde

61Chrome, yerel istemler, özetleme, yazma, yeniden yazma, çeviri, dil algılama ve düzeltme gibi görevler için yerleşik API'leri kullanıyor. Fikir çok ilginç: tarayıcı modeli, kullanılabilirliği ve güncellemeleri yönetiyor; uygulama platforma daha yakın bir API kullanıyor.

63İyi çalışırsa çok şey değişir:

65- basit görevler için daha az sunucu çağrısı;

66- cihazda kalabilecek veriler;

67- daha düşük gecikme;

68- çevrimdışı veya yarı çevrimdışı deneyimler;

69- Yazma ve çeviri için daha doğal kullanıcı deneyimi.

71Ancak bunu aşamalı bir gelişme olarak ele almak gerekir. Bazı API'ler kararlıdır, diğerleri başlangıç denemesinde veya ön izleme aşamasındadır, diğerleri ise hâlâ sürüme, dile ve cihaza bağlıdır.

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```

92Belirli kod değişecek, ancak kalıp aynı kalacak: Kullanılabilirliği kontrol edersiniz, indirilenleri açıklarsınız, geri dönüşler sunarsınız ve kaliteyi ölçersiniz.

94## Geri çekilme üzücü bir B planı değil

96Bulut geri dönüşü bir yenilgi değildir. Ürünün bir parçasıdır.

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

126Bu mimari, giderek gelişmenize olanak tanır. Yerel desteğe sahip olanlar daha iyi gecikme ve gizlilik elde eder. Sahip olmayanlar hala bu özelliği kullanıyor. Yerel isteklerin yüzdesini, sürelerini, hataları, hafızayı, algılanan kaliteyi ve maliyeti ölçebilirsiniz.

127

128Metrikler olmadan cihazdaki yapay zeka estetik bir seçim haline gelir. Metriklerle birlikte bir ürün kaldıracı haline gelir.

129

130## Modelin kullanıcı deneyimi önemlidir

131

132Tarayıcının bir model indirmesi gerekiyorsa kullanıcı bunu algılar. Bunu belirsiz bir eğirmenin arkasına saklamayın. Açık olmak gerekirse: "Modeli bu işlevi daha hızlı ve hatta çevrimdışı kullanacak şekilde hazırlıyoruz."

133

134İyi bir deneyim:

135

136- hazırlık durumunu gösterir;

137- sayfanın tamamını engellemez;

138- bulut geri dönüşüne devam etmenize olanak tanır;

139- pil ve hafıza sürprizlerinden kaçının;

140- mümkün olduğunda modeli hatırlayın;

141- faydasını somut bir cümleyle açıklayın.

142

143En kötüsü, sessizce bir şeyler indirdiği için bozuk görünen "akıllı" bir özelliktir.

144

145## Gizlilik: daha iyi, otomatik olarak güvenli değil

146

147Cihazdaki verilerin işlenmesi büyük bir avantaj olabilir. Taslak bir e-postanın, dahili belgenin veya kişisel notun öneri almak için tarayıcınızdan çıkması gerekmez.

148

149Ancak yerel, otomatik olarak güvenli anlamına gelmez. Ancak şunu düşünmeniz gerekir:

150

151- XSS;

152- tesadüfi günlükler;

153- depolamaya kaydedilen veriler;

154- güvenilmeyen içerikten hızlı enjeksiyon;

155- modele verilen izinler;

156- Otomatik eylemlerde kullanılan çıktılar.

157

158Yerel bir model bir web sayfasını okuyabiliyor ve ardından bir form doldurabiliyorsa, o sayfa onu değiştirmeyi deneyebilir. Aracı çağırabiliyorsa onay gereklidir. Yapılandırılmış çıktı üretiyorsa doğrulanması gerekir. Cihaz üzerinde çalışıyor olması bazı gizlilik risklerini azaltsa da güvenlik modelini ortadan kaldırmaz.

159

160## Gerçekten ilginç hale geldiği yer

161

162Metin sadece başlangıç. WebGPU, yakın zamana kadar yerel bir uygulama gibi görünen web deneyimlerini güvenilir hale getiriyor:

163

164- karmaşık 3D editörler;

165- Tarayıcıda Gauss sıçraması;

166- gerçek zamanlı video filtreleri;

167- Hafif CAD;

168- bilimsel görselleştirmeler;

169- anında önizlemeli yaratıcı araçlar;

170- kullanıcı arayüzünün yakınında görüş çıkarımı;

171- daha iddialı tarayıcı oyunları.

172

173Burada ön uç, grafikler ve makine öğrenimi karışmaya başlıyor. Bu biraz tuhaf ama aynı zamanda verimli bir alan: Tarayıcı, yalnızca formları ve kontrol panellerini koyduğumuz yer değil, ciddi bir uygulama platformu haline geliyor.

174

175## Üretim öncesi kontrol listesi

176

177Cihazdaki bir özelliği kullanıcıların önüne koymadan önce şunları kontrol ederim:

178

1791. Tarayıcıları ve cihazları hedefleyin.

1802. Bulut geri dönüşü veya zarif bozulma.

1813. İndirme zamanı ve model önbelleği.

1824. Ortalama donanımda bellek ve pil.

1835. Bulut sürümüyle karşılaştırıldığında kalite.

1846. Gizlilik politikası ve kullanıcı mesajları.

1857. Düşmanca girdilerle test etme.

1868. Yerel ve bulut çalışma zamanı için ayrı ölçümler.

1879. Şablonu güncellemeyi veya devre dışı bırakmayı planlayın.

188

189Somut bir liste çünkü sorun somut. Yavaş, kırılgan veya opak bir yapay zeka özelliği, yalnızca tarayıcıda çalıştığı için daha iyi hale gelmez.

190

191## Doğru uzlaşma

192

193Geleceğin "cihazdaki her şey" olduğuna inanmıyorum. Ayrıca bulutun çıkarım için tek makul yer olarak kalacağını da düşünmüyorum. En olası gelecek bir karışımdır: gecikmeyi, gizliliği veya maliyeti iyileştirdiğinde yerel; Kaliteye, güncel verilere ve merkezi kontrole ihtiyaç duyulduğunda bulut.

194

195WebGPU, WebNN ve yerleşik AI API'leri, tarayıcıyı her şeye kadir yapmaz. Onu daha yetişkin hale getiriyorlar. Web ürünleri geliştirenler için bu çok büyük bir haber.

196

197## Yararlı kaynaklar

198

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

200- [Web GPU spesifikasyonu - W3C](https://www.w3.org/TR/webgpu/)

201- [Yerleşik AI - Geliştiriciler için Chrome](https://developer.chrome.com/docs/ai/built-in)

202- [Yerleşik AI API'leri - Geliştiriciler için Chrome](https://developer.chrome.com/docs/ai/built-in-apis)

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

204