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