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

spinny:~/writing $ vim 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~

NORMAL · webgpu-on-device-ai-browser.md [readonly]204 lines · :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.

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~