1~
2Selama bertahun-tahun penyemak imbas adalah wajah aplikasi yang bagus dan awan adalah tempat di mana perkara yang sukar berlaku. Pengguna menulis, mengklik, memuat naik fail; bahagian hadapan menghantar segala-galanya ke pelayan; pelayan memanggil model; jawapan datang kembali.
3~
4Skim ini kekal sangat berguna, tetapi ia tidak percuma. Setiap panggilan membawa kependaman, kos, pergantungan rangkaian dan soalan privasi. Jika pengguna menulis ayat dan mahu cadangan, setengah saat berat. Jika anda mengklasifikasikan beribu-ribu input kecil, sen menjadi wang sebenar. Jika teks itu sensitif, menghantarnya keluar dari peranti bukanlah pilihan neutral.
5~
6Itulah sebabnya WebGPU dan AI pada peranti sedang digembar-gemburkan. Bukan kerana kami akan menjalankan setiap model dalam penyemak imbas esok. Kerana beberapa ciri pintar boleh menjadi lebih dekat dengan pengguna.
7~
8## Tidak semuanya harus menjadi tempatan
9~
10Versi hujah kebudak-budakan ialah: "cloud versus device". Versi berguna adalah hibrid.
11~
12Sesetengah tugasan kelihatan hebat pada peranti: ringkasan pendek, pengesanan bahasa, penulisan semula ringan, klasifikasi mudah, penapis imej, model penglihatan kecil, pengalaman kreatif dengan maklum balas segera.
13~
14Tugas lain kekal lebih baik dalam awan: penaakulan kompleks, model sempadan, data sisi pelayan, audit berpusat, kualiti seragam, aliran kerja yang anda perlu mengawal setiap langkah dengan teliti.
15~
16Seni bina yang sihat memutuskan pada masa jalan:
17~
18```mermaid
19flowchart TD
20    User[pengguna] --> Browser[Pelayar]
21    Browser --> Detect[Pengesanan ciri]
22    Detect -->|Disokong| Local[Inferens tempatan]
23    Detect -->|Tidak disokong| Cloud[Awan mundur]
24    Local --> UX[Respon cepat]
25    Cloud --> UX
26    UX --> Metrics[Metrik dan kualiti]
27```
28~
29Penyemak imbas tidak perlu menang melawan awan. Ia mesti menyelamatkan awan daripada melakukan kerja yang tidak perlu dilakukan di sana.
30~
31## Mengapa WebGPU penting
32~
33WebGPU ialah API moden untuk menggunakan GPU daripada penyemak imbas. Ia bukan sahaja untuk grafik 3D yang lebih bagus. Ia juga penting kerana ia mendedahkan primitif yang sesuai untuk pengkomputeran: beban kerja selari, pelorek, saluran paip yang lebih dekat dengan prestasi GPU yang baik.
34~
35Untuk AI, visualisasi saintifik, editor 3D, penapis video dan alat kreatif, perbezaan ini dapat dirasai. WebGL telah melakukan banyak perkara untuk web, tetapi WebGPU dilahirkan dengan model yang lebih sesuai untuk masa kini.
36~
37Perkara pertama yang perlu ditulis, bagaimanapun, bukanlah shader. Ia adalah pengesanan ciri yang bijak:
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~
57Ciri ini menyatakan satu perkara penting: WebGPU bukanlah hak yang diberikan pada setiap peranti. Ia adalah keupayaan untuk disahkan. Sesetengah penyemak imbas tidak menyokongnya sepenuhnya, sesetengah GPU mempunyai had, sesetengah persekitaran perusahaan melumpuhkan ciri, sesetengah pengguna menggunakan perkakasan sederhana.
58~
59## AI terbina dalam: apabila penyemak imbas membawa model
60~
61Chrome sedang mendorong API terbina dalam untuk tugasan seperti gesaan setempat, ringkasan, penulisan, penulisan semula, terjemahan, pengesanan bahasa dan pembacaan pruf. Idea ini sangat menarik: penyemak imbas menguruskan model, ketersediaan dan kemas kini; apl menggunakan API yang lebih dekat dengan platform.
62~
63Jika ia berfungsi dengan baik, ia banyak berubah:
64~
65- lebih sedikit panggilan pelayan untuk tugasan mudah;
66- data yang mungkin kekal pada peranti;
67- kependaman yang lebih rendah;
68- pengalaman luar talian atau separa luar talian;
69- UX yang lebih semula jadi untuk penulisan dan terjemahan.
70~
71Tetapi ia harus dianggap sebagai peningkatan progresif. Sesetengah API adalah stabil, yang lain dalam percubaan atau pratonton asal, yang lain masih bergantung pada versi, bahasa dan peranti.
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~
92Kod khusus akan berubah, tetapi coraknya kekal: anda menyemak ketersediaan, menerangkan sebarang muat turun, menawarkan sandaran dan mengukur kualiti.
93~
94## Fallback bukanlah rancangan B yang menyedihkan
95~
96Undur awan bukanlah satu kekalahan. Ia adalah sebahagian daripada produk.
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~
126Seni bina ini membolehkan anda menambah baik secara progresif. Mereka yang mempunyai sokongan tempatan mendapat kependaman dan privasi yang lebih baik. Mereka yang tidak memilikinya masih menggunakan ciri tersebut. Anda boleh mengukur peratusan permintaan tempatan, masa, ralat, ingatan, kualiti dan kos yang dirasakan.
127~
128Tanpa metrik, AI pada peranti menjadi pilihan estetik. Dengan metrik, ia menjadi tuil produk.
129~
130## UX model itu penting
131~
132Jika penyemak imbas perlu memuat turun model, pengguna melihatnya. Jangan sembunyikannya di sebalik pemutar yang tidak jelas. Lebih baik untuk menjelaskan: "Kami menyediakan model untuk menggunakan fungsi ini dengan lebih pantas dan malah di luar talian."
133~
134Pengalaman yang baik:
135~
136- menunjukkan status penyediaan;
137- tidak menyekat keseluruhan halaman;
138- membolehkan anda meneruskan sandaran awan;
139- elakkan kejutan bateri dan ingatan;
140- ingat model apabila boleh;
141- terangkan faedah dalam satu ayat konkrit.
142~
143Perkara yang paling teruk ialah ciri "pintar" yang kelihatan rosak kerana memuat turun sesuatu secara senyap.
144~
145## Privasi: lebih baik, tidak selamat secara automatik
146~
147Memproses data pada peranti boleh menjadi kelebihan yang besar. E-mel draf, dokumen dalaman atau nota peribadi tidak perlu meninggalkan penyemak imbas anda untuk menerima cadangan.
148~
149Walau bagaimanapun, tempatan tidak bermakna selamat secara automatik. Walau bagaimanapun, anda perlu memikirkan:
150~
151- XSS;
152- log tidak sengaja;
153- data disimpan dalam storan;
154- suntikan segera daripada kandungan yang tidak dipercayai;
155- kebenaran yang diberikan kepada model;
156- output yang digunakan dalam tindakan automatik.
157~
158Jika model tempatan boleh membaca halaman web dan kemudian mengisi borang, halaman itu boleh cuba memanipulasinya. Jika ia boleh memanggil alat, pengesahan diperlukan. Jika ia menghasilkan output berstruktur, ia mesti disahkan. Hakikat bahawa ia berjalan pada peranti mengurangkan beberapa risiko privasi, tetapi tidak menghapuskan model keselamatan.
159~
160## Di mana ia menjadi sangat menarik
161~
162Teks itu hanyalah permulaan. WebGPU menjadikan pengalaman web boleh dipercayai yang sehingga baru-baru ini kelihatan seperti apl asli:
163~
164- penyunting 3D yang kompleks;
165- Percikan Gaussian dalam pelayar;
166- penapis video masa nyata;
167- CAD ringan;
168- visualisasi saintifik;
169- alat kreatif dengan pratonton segera;
170- inferens penglihatan berhampiran UI;
171- permainan pelayar yang lebih bercita-cita tinggi.
172~
173Di sini bahagian hadapan, grafik dan pembelajaran mesin mula bercampur. Ia adalah kawasan yang agak janggal, tetapi juga subur: penyemak imbas kembali menjadi platform aplikasi yang serius, bukan hanya tempat kami meletakkan borang dan papan pemuka.
174~
175## Senarai semak sebelum pengeluaran
176~
177Sebelum meletakkan ciri pada peranti di hadapan pengguna, saya akan menyemak:
178~
1791. Sasarkan penyemak imbas dan peranti.
1802. Awan mundur atau degradasi elegan.
1813. Masa muat turun dan cache model.
1824. Memori dan bateri pada perkakasan purata.
1835. Kualiti berbanding versi awan.
1846. Dasar privasi dan mesej pengguna.
1857. Menguji dengan input bermusuhan.
1868. Metrik berasingan untuk masa jalan tempatan dan awan.
1879. Rancang untuk mengemas kini atau melumpuhkan templat.
188~
189Ia adalah senarai konkrit kerana masalahnya adalah konkrit. Ciri AI yang perlahan, rapuh atau legap tidak menjadi lebih baik hanya kerana ia dijalankan dalam penyemak imbas.
190~
191## Kompromi yang betul
192~
193Saya tidak percaya bahawa masa depan adalah "segala-galanya pada peranti". Dan saya tidak fikir awan akan kekal sebagai satu-satunya tempat yang munasabah untuk inferens, sama ada. Masa depan yang paling mungkin ialah campuran: setempat apabila ia meningkatkan kependaman, privasi atau kos; awan apabila kualiti, data yang dikemas kini dan kawalan terpusat diperlukan.
194~
195WebGPU, WebNN dan API AI terbina dalam tidak menjadikan penyemak imbas maha kuasa. Mereka menjadikannya lebih dewasa. Dan bagi mereka yang membina produk web, ini adalah berita besar.
196~
197## Sumber yang berguna
198~
199- [API WebGPU - MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API)
200- [Spesifikasi WebGPU - W3C](https://www.w3.org/TR/webgpu/)
201- [AI terbina dalam - Chrome untuk Pembangun](https://developer.chrome.com/docs/ai/built-in)
202- [API AI terbina dalam - Chrome untuk Pembangun](https://developer.chrome.com/docs/ai/built-in-apis)
203- [API WebNN](https://webnn.io/)
204~