1~
2Selama bertahun-tahun, browser adalah wajah terbaik dari aplikasi dan cloud adalah tempat di mana hal-hal sulit terjadi. Pengguna menulis, mengklik, mengunggah file; frontend mengirimkan semuanya ke server; server memanggil model; jawabannya kembali.
3~
4Skema ini tetap sangat berguna, namun tidak gratis. Setiap panggilan menimbulkan pertanyaan tentang latensi, biaya, ketergantungan jaringan, dan privasi. Jika pengguna sedang menulis kalimat dan menginginkan saran, setengah detik berbobot. Jika Anda mengklasifikasikan ribuan masukan kecil, uang receh menjadi uang nyata. Jika teksnya sensitif, mengirimkannya dari perangkat bukanlah pilihan netral.
5~
6Itu sebabnya WebGPU dan AI pada perangkat sedang populer. Bukan karena kami akan menjalankan setiap model di browser besok. Pasalnya, beberapa fitur cerdas bisa mendekatkan diri kepada pengguna.
7~
8## Tidak semuanya harus bersifat lokal
9~
10Versi argumen yang kekanak-kanakan adalah: "cloud versus perangkat". Versi yang berguna adalah hybrid.
11~
12Beberapa tugas tampak bagus di perangkat: ringkasan singkat, deteksi bahasa, penulisan ulang ringan, klasifikasi sederhana, filter gambar, model penglihatan kecil, pengalaman kreatif dengan umpan balik langsung.
13~
14Tugas lain tetap lebih baik di cloud: penalaran kompleks, model frontier, data sisi server, audit terpusat, kualitas seragam, alur kerja yang mengharuskan Anda mengontrol setiap langkah dengan cermat.
15~
16Arsitektur yang sehat memutuskan pada saat runtime:
17~
18```mermaid
19flowchart TD
20    User[Pengguna] --> Browser[Peramban]
21    Browser --> Detect[Deteksi fitur]
22    Detect -->|Didukung| Local[Inferensi lokal]
23    Detect -->|Tidak didukung| Cloud[Penggantian awan]
24    Local --> UX[Respon cepat]
25    Cloud --> UX
26    UX --> Metrics[Metrik dan kualitas]
27```
28~
29Browser tidak harus menang melawan cloud. Ini harus menyelamatkan cloud dari melakukan pekerjaan yang tidak perlu dilakukan di sana.
30~
31## Mengapa WebGPU penting
32~
33WebGPU adalah API modern untuk menggunakan GPU dari browser. Ini bukan hanya untuk grafis 3D yang lebih bagus. Hal ini juga penting karena menampilkan hal-hal primitif yang sesuai untuk komputasi: beban kerja paralel, shader, pipeline yang mendekati kemampuan GPU.
34~
35Untuk AI, visualisasi ilmiah, editor 3D, filter video, dan alat kreatif, perbedaan ini sangat terasa. WebGL telah melakukan banyak hal untuk web, namun WebGPU lahir dengan model yang lebih sesuai dengan masa kini.
36~
37Namun, hal pertama yang harus ditulis bukanlah shader. Ini adalah deteksi fitur yang bijaksana:
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~
57Fitur ini menyatakan satu hal penting: WebGPU tidak merupakan hak yang diberikan pada setiap perangkat. Ini adalah kemampuan yang harus diverifikasi. Beberapa browser tidak sepenuhnya mendukungnya, beberapa GPU memiliki keterbatasan, beberapa lingkungan perusahaan menonaktifkan fitur, beberapa pengguna menggunakan perangkat keras sederhana.
58~
59## AI bawaan: saat browser menghadirkan model
60~
61Chrome mendorong API bawaan untuk tugas-tugas seperti perintah lokal, ringkasan, penulisan, penulisan ulang, terjemahan, deteksi bahasa, dan pengoreksian. Idenya sangat menarik: browser mengelola model, ketersediaan, dan pembaruan; aplikasi menggunakan API yang lebih dekat dengan platform.
62~
63Jika berfungsi dengan baik, banyak perubahannya:
64~
65- lebih sedikit panggilan server untuk tugas-tugas sederhana;
66- data yang mungkin tersisa di perangkat;
67- latensi lebih rendah;
68- pengalaman offline atau semi-offline;
69- UX yang lebih alami untuk penulisan dan terjemahan.
70~
71Namun hal ini harus diperlakukan sebagai peningkatan progresif. Beberapa API stabil, yang lain dalam uji coba atau pratinjau asal, yang lain masih bergantung pada versi, bahasa, dan perangkat.
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~
92Kode spesifiknya akan berubah, namun polanya tetap ada: Anda memeriksa ketersediaan, menjelaskan unduhan apa pun, menawarkan penggantian, dan mengukur kualitas.
93~
94## Fallback bukanlah rencana B yang menyedihkan
95~
96Penggantian cloud bukanlah sebuah kekalahan. Itu adalah bagian dari 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~
126Arsitektur ini memungkinkan Anda untuk semakin meningkat. Mereka yang memiliki dukungan lokal mendapatkan latensi dan privasi yang lebih baik. Bagi yang belum memilikinya tetap menggunakan fitur tersebut. Anda dapat mengukur persentase permintaan lokal, waktu, kesalahan, memori, kualitas dan biaya yang dirasakan.
127~
128Tanpa metrik, AI pada perangkat menjadi pilihan estetika. Dengan metrik, ini menjadi pengungkit produk.
129~
130## UX model itu penting
131~
132Jika browser perlu mengunduh suatu model, pengguna akan melihatnya. Jangan menyembunyikannya di balik pemintal yang tidak jelas. Lebih baik diperjelas: "Kami mempersiapkan model untuk menggunakan fungsi ini lebih cepat dan bahkan offline."
133~
134Pengalaman yang bagus:
135~
136- menunjukkan status persiapan;
137- tidak memblokir seluruh halaman;
138- memungkinkan Anda melanjutkan dengan cloud fallback;
139- hindari kejutan baterai dan memori;
140- ingat modelnya bila memungkinkan;
141- jelaskan manfaatnya dalam satu kalimat konkrit.
142~
143Yang terburuk adalah fitur "pintar" yang tampak rusak karena mengunduh sesuatu secara diam-diam.
144~
145## Privasi: lebih baik, tidak otomatis aman
146~
147Memproses data pada perangkat bisa menjadi keuntungan besar. Draf email, dokumen internal, atau catatan pribadi tidak harus keluar dari browser Anda untuk menerima saran.
148~
149Namun, lokal tidak serta merta berarti aman. Namun, Anda perlu memikirkan tentang:
150~
151- XSS;
152- log yang tidak disengaja;
153- data disimpan dalam penyimpanan;
154- injeksi cepat dari konten yang tidak tepercaya;
155- izin yang diberikan kepada model;
156- keluaran yang digunakan dalam tindakan otomatis.
157~
158Jika model lokal dapat membaca halaman web dan kemudian mengisi formulir, halaman tersebut dapat mencoba memanipulasinya. Jika dapat memanggil alat, diperlukan konfirmasi. Jika menghasilkan keluaran terstruktur, maka harus divalidasi. Fakta bahwa ini berjalan di perangkat mengurangi beberapa risiko privasi, namun tidak menghilangkan model keamanan.
159~
160## Dimana hal itu menjadi sangat menarik
161~
162Teks ini hanyalah permulaan. WebGPU menjadikan pengalaman web lebih kredibel, yang hingga saat ini tampak seperti aplikasi asli:
163~
164- editor 3D yang kompleks;
165- Percikan Gaussian di browser;
166- filter video waktu nyata;
167- CAD ringan;
168- visualisasi ilmiah;
169- alat kreatif dengan pratinjau instan;
170- inferensi penglihatan di dekat UI;
171- game browser yang lebih ambisius.
172~
173Di sini frontend, grafik, dan pembelajaran mesin mulai bercampur. Ini adalah area yang agak janggal, namun juga subur: browser kembali menjadi platform aplikasi yang serius, bukan hanya tempat kita meletakkan formulir dan dasbor.
174~
175## Daftar periksa sebelum produksi
176~
177Sebelum menampilkan fitur pada perangkat kepada pengguna, saya akan memeriksa:
178~
1791. Targetkan browser dan perangkat.
1802. Penggantian cloud atau degradasi elegan.
1813. Waktu pengunduhan dan model cache.
1824. Memori dan baterai pada perangkat keras rata-rata.
1835. Kualitas dibandingkan dengan versi cloud.
1846. Kebijakan privasi dan pesan pengguna.
1857. Menguji dengan masukan yang tidak bersahabat.
1868. Pisahkan metrik untuk runtime lokal dan cloud.
1879. Berencana untuk memperbarui atau menonaktifkan templat.
188~
189Daftarnya konkrit karena masalahnya konkrit. Fitur AI yang lambat, rapuh, atau buram tidak menjadi lebih baik hanya karena dijalankan di browser.
190~
191## Kompromi yang tepat
192~
193Saya tidak percaya bahwa masa depan adalah "semua yang ada di perangkat". Dan menurut saya cloud juga tidak akan menjadi satu-satunya tempat yang masuk akal untuk mengambil kesimpulan. Kemungkinan besar masa depan adalah gabungan: lokal ketika meningkatkan latensi, privasi, atau biaya; cloud ketika diperlukan kualitas, data terkini, dan kontrol terpusat.
194~
195WebGPU, WebNN, dan API AI bawaan tidak menjadikan browser mahakuasa. Mereka membuatnya lebih dewasa. Dan bagi mereka yang membuat produk web, ini adalah berita besar.
196~
197## Sumber yang bermanfaat
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 bawaan - Chrome untuk Pengembang](https://developer.chrome.com/docs/ai/built-in)
202- [API AI bawaan - Chrome untuk Pengembang](https://developer.chrome.com/docs/ai/built-in-apis)
203- [API WebNN](https://webnn.io/)
204~